A Web Designer

My business is to develop web applications in Java.

I would like to talk about a simple business application I do, where users insert / review data from a database.
We choose the standards librairies: JSF-Seam-Hibernate with RichFaces as the U.I. components.
This time, we were lucky enough to hire a web designer ! Big Time !

Let me share with you some of the things I’ve learned working with him.

Organization

First, how the development was organized ?

1. The web designer write the screens in jpg using Photoshop and  Illustrator

2. After several round-trip with the client, the « final » version eventually emerges

3. The web designer then writes the pages in HTML / CSS with the same look and feel

4. I develop a basic JSF page with the Seam backing beans. It only displays the needed information

5. We incorporate its HTML / CSS  into my JSF pages.

The last step is the  tricky one, so let me update with the problems we encountered….

HTML to JSF

CSS problems

The web designer of course came with it’s own set of css styles, with it’s own way of creating the page structure and graphics.
However, the RichFaces JSF library comes with it’s own set of css styles and page structure.

For example, the datatable component generates an HTML <table>, whereas the web designer was expecting <div>. We overcome this problem by changing its HTML with <table>. It’s quite understandable to use a <table> for displaying tabular data in HTML. It’s only by using <table> to position precisely elements that you make a mistake.

Aligning text with images.

Next problem : « align » attribute is not generated by the JSF graphicImage component.
Of course, our web design uses this attribute to align text with image…. Once again, the web designer changed it’s page design to support this. It is now better to use CSS to do this anyway.

A damned simple button

This one is really scary. The web designer don’t use <input type= »submit » /> in it’s forms, but <button>.
Never seen this tag anywhere, but it’s a standard one.

The web designer used it to enable the rollover effect, and to insert <span>…</span> around the text to apply images in the button via css. It’s button was: <button type= »submit »><span><span><span>Submit</span></span></span></button>
I haven’t seen any JSF library with a command button generating HTML.

Of course, you can tell me to create one new JSF Component, but common, I’ve already created some, and it’s way too complex for a simple button ! I have to rewrite the HTML renderer, manage all the subtle things in the implementation…
Currently, our solution is to created a javascript code (called using click event) to submit the form. Not very nice.

Conclusion

We’ve done only the first page of our application, and I’m really wondering if we took the right library. I believe now that in case you have a web designer in your team, you shouldn’t use libraries that generate HTML for you, like JSF or gwt, but instead use a framework allowing to generate the precise HTML the designer wants (maybe Tapestry, or plain JSP ?)

Hi,

I found some other neat things while editing Spring files in my project using IDEA.

1- Searching for the Usage of a class shows  where it is used in Spring XML files:

Here you can see it has found that DbHelper is used in several spring xml files. Cool !

2- Completion works for .properties values

When you edit a Spring file, you can  set values by referencing a property defined in a .properties file.
For example, in the screenshot below, by using ${DbSchema.commun} as a value of an bean attribute, Spring can be instructed to load the masteri.properties file, and replace  ${DbSchema.commun} with the value defined there.

IDEA is so smart (well it’s development team is), that code completion will display the properties defined in the .properties files!

Another very handy feature….

GC

I try to develop in Javascript (using jquery) the UI editor of Appliweb.

For now, Javascript seems fuzzy logic to me => you can write almost anything with (of course) no compiler errors, you have to run it to check basic mistakes.

Let me show you some examples:

---

- No error when you call a method with an invalid parameters (just a small warning it seems in IntelliJ IDEA):

I believe it’s because somehow Javascript allows you to  pass parameters not needed ?

- More awkward: You don’t know if your Javascript will run or not.
For example, I add a very simple method in my code. This method is called at a very late stage, and then nothing works !
You get no errors in the editor, no error in firefox nor in Firebug (a great tool for javascript development…), but it seems to blow away everything !
Maybe the information is somewhere in Firebug, but I can’t find it.

UPDATE: Thanks to Raveman comment, you have to enable the console to see the errors. Here is then the error displayed in Firebug:

Much easier to fix now:-)

- Where is my stacktrace ????
In Java, a small error you make in calling a function will fail your program with a big error and a stack trace telling you exactly what where wrong. In Javascript, well, you can see in your browser that there is a problem, but where ?
You have to do some guesswork by setting breakpoints (thanks firebug !) and try to understand what went wrong…..

This is quite disturbing for me poor old Java developer…..

GC.

Hello,

In my work, I still spend much of my time doing development.

A lot of people now uses Eclipse but in all companies I work in, I asked them to buy me IDEA. Most of the time, they don’t want to buy it, mostly because they find stupid using any other thing than the free Eclipse.
It’s quite hard to persuade people about the many little things that are better in IDEA than in Eclipse.

Now, as release 8.0 is out, I will use it for 30 days (the free evaluation time) for Appliweb development. Each time I will see some great (or small) features I like, I’m going to tell you about it, I hope this will help you understand it’s usefullness.

---

I use maven for all my java projects, so I was pleasantly surprised to see that we can create directly a Maven project using IDEA, It will create it’s directories and project files  Even better, you can choose archetypes ! (archetypes are template projects for maven):

---

For the development of the GUI editor of Appliweb, I need to write HTML, CSS and javascript. IDEA is primary a Java source code editor, but I found nice little things for web editing.

Like the underlined link to a missing file. Nice to fix for typos.

The XHTML parser understand it’s a link to a file, and the file is missing from the project !

---

Even better, it can suggest to create the file:

Only using Alt+Enter keys, it will suggest and create the file for you !

---

Editing a CSS file, while adding a color to a CSS rule, I see that IDEA displays a little square at the left showing you what color it is:

Once again, a really small little thing  very pleasant to see….

Hello,

I’m developing my project under Kubuntu. I’m quite happy with this OS, and really like

- the new Application Launcher Menu

- the button that allows you to browse your directories directly from the taskbar…

But this time I have a small problem. Maybe I didn’t catch the new desktop metaphor , but I have difficulties with this simple little thing:

I’m using Java development tools, that starts with a .sh, I want this .sh to be easily accessible from my desktop.

---

So I used Kubuntu « Desktop view »,and put a link to the .sh there:

See the javatools.sh  ?

Now my question is: How can I run it ?

It’s a link to an executable, but how can it be run ? When I click on it, I get kwrite opening the file.

When I right-click it,  I see that the .sh is recognized as a script shell:

But no options to run it….

What’s wrong with this ? How can I do a simple icon that starts a .sh ?

UPDATE: Found the solution.

The link must be directly on the desktop, not in folder view.

Like all Java developers I’m curious about JavaFX

I suggest you to watch the video puzzle demo.

It’s a puzzle made from a running video.
Quite impressive indeed !!

http://www.javafx.com/samples/VideoPuzzle/index.html

GC

The Appliweb project will involve lots of Javascript development.

I’m not really a fan of Javascript coding, because:

- I used to do some in 1997-1998, where it was impossible to write javascript compliant with I.E. and Netscape. Even between same versions of I.E. on different desktop you had a different behavior

- No debugger at that time, and very light ones years after.

I really code-as-you-think, so I really need a good debugger to see what’s going on.

I hope that now, years after my previous experiences, I will find some good ones. Here is a list I’ve found:

- FireBug: Waouw, seems to be a great tool, with html and css editor, maybe close to what I would like to do with Appliweb GUI editor. I will try that one first

- Venkman debugger:  I used it in 2005 to fix some hard to find javascript bug in a web application developped in Java Server Faces. It has worked great, but the tool was not pleasant to use.

- Yaldex: Seems only working in Windows, as my development computer is Linux…. It has a free edition though….

- Netbeans: Yep, netbeans, the java IDE. Last version has support for  javascript debugging. As a Java developper I know netbeans well, it’s free, and if the editor/ debugger is ok, maybe I’ll use it. It seems to support debugging under firefox and I.E. A Nice feature for crazy compatibilities issues between these two browsers.

- IntelliJ IDEA: My favourite Java IDE. It now supports javascript debugging too ! I’m sure they’ve done first class support for that, and I would be happy to use it, but it’s not free, and my current company don’t want to buy it…. Too bad really.

Here is a short roundup of the javascript debuggers I stumble upon. If you have any advice (I’m considering myself as a new guy in javascript development), please feel free to insert your remarks. I will test them and give the result in next post….

Bye.

GC.

Welcome to my new project : Appliweb !

With Appliweb, I’ll try to create a successfull opensource project, for a subject that I find most important: web development.

By successfull opensource project, I mean:

- A Project with lots of (other) people involved

- A Project  that will help people.

- A Project I will eventually earn money with.

For this,

- I’ve rent  a shared-server to an ISP: planetwork. A friend of mine (here) recommended them to me.

- I setup a Joomla project, with blogs and comments and forums

- I wrote some articles explaining my ideas and how to create them

It’s the  first project that I didn’t start by writing the code ! Others have failed, even if many people still looks into them….

Now the website is ready, I will begin to write some code (in javascript ! eechhhh).

I’m waiting to have something to show before I write about it in my favorite websites !

G.C.