Web Console: Graphical buttons

[dmlloyd]

I've implemented simple graphical buttons for the web application. Let me know what you think. Also, I've added special icons for task form buttons.

I've tested in Firefox 1.5 and MSIE 6.0.

[kukeltje]

Where can I find these? I have the latest code from cvs, but did not encounter them (at least not that I'm aware of)

[kukeltje]

sorry, forget previous post. Again, eclipse fooled me that there were no updates. Closing it and starting it again shows updates AND graphical buttons.

First comment: They are not easily i18n, so if you want more styled buttons, I can try do some css 'magic' on normal buttons...

[kukeltje]

hmm... Are the gif's generated? I see that the transition names are on there....

Still the fonts are/look different, aliased, alignment is different... in short.. I'm not in favour, they just look out of place.. sorry

[dmlloyd]

"kukeltje" wrote:
hmm... Are the gif's generated? I see that the transition names are on there....

Still the fonts are/look different, aliased, alignment is different... in short.. I'm not in favour, they just look out of place.. sorry

Would you mind posting a screenshot of a task form, along with your OS and the version of java that you're running in?

Yes, they are currently generated at runtime. It uses the Arial font, which is standard on Windows but which you have to install on Linux (not sure about Mac). If it finds the Arial font as a TTF, it will render the text antialiased. Here is how it's supposed to look: http://www.flurg.com/graphical_buttons.png

I may have to switch to distributing a font with the application to make it look uniform. In this case I'd have to find a font with a compatible license, which means that Arial is probably out (it's a Microsoft font; I'm not a lawyer but this doesn't look promising: http://corefonts.sourceforge.net/eula.htm)

Anyway, please get back to me with that information and maybe I can do something to improve the situation.

[kukeltje]

I'll post a screenshot tonight (windows, jdk 1.5.0_04 or 1.4_12) but it certainly looks less good. Not so much the task form (no icons for me ???) but more the navigation above the tables (next, previous etc..)

Still, I would not mind not having rounded corners and just style this with css or a real background image, see e.g. http://sophie-g.net/jobs/css/e_buttons.htm.

Icons can be easily customized via css then, as wel as the font type and if the background image is removed you still can have buttons with hover color changes etc...

Ronald.

[dmlloyd]

"kukeltje" wrote:
I'll post a screenshot tonight (windows, jdk 1.5.0_04 or 1.4_12) but it certainly looks less good.

Ok, thanks, that will be a big help.

"kukeltje" wrote:
Not so much the task form (no icons for me ???) but more the navigation above the tables (next, previous etc..)

Ok, first the task form will only have icons if you use a recent GPD to generate the form, or if you use the <jbpm:saveButton>, <jbpm:cancelButton>, and <jbpm:transitionButton> tags instead of manually setting up the action (as it was done during earlier versions).

Bear in mind that forms generated during earlier 3.2 CVS versions might not work, because we've been updating the JSF tags used in the task forms. The format is considered stable now however.

As for the navigation buttons, I'll have to see what you mean. As you might have guessed, I did not have the opportunity to do much testing under windows. However I'm fairly certain that antialiasing is supposed to work on that platform.

"kukeltje" wrote:
Still, I would not mind not having rounded corners and just style this with css or a real background image, see e.g. http://sophie-g.net/jobs/css/e_buttons.htm.

Icons can be easily customized via css then, as wel as the font type and if the background image is removed you still can have buttons with hover color changes etc...

Ronald.

I will consider this. It is easy to change the implementation if needed. I would probably have to have multiple widths available though, or some trick to scale the buttons, since task transition names may have a fairly arbitrary length.

[kukeltje]

I'll try the latest GPD. Did not get that up and running the last two weeks. I'll try running it in a clean eclipse tonight.

Different width's is as easy as cutting the image in three left, middle and right and 'scale' the middle. Although instead of a clean css version, you need some additional javascript (as you have now) since stupid IE5.5 and IE6 do not support :hover on divs (afaik) but a solution can be found here. http://www.xs4all.nl/~peterned/csshover.html

[kukeltje]

If you accept 'no-rounded-corners' for the moment, I'll try to make a css only version tonight.... images can be added later then. So no gif creation etc is needed

[kukeltje]

AAAAAAAAAAHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH

F***CKING GIF images.... sorry. It cost me over two hours to find out that the jboss cvs serves gif images as ascii so they (save, cancel, ok, transition) all are corrupted. Therefor I did not see them in my webapp before. Altough my eclipse client is configured to store them as binary, they still come in as ascii even when I tried to re-get them....

I now have buttons which are fully stylable with css, rounded corners in ff (opera and safari will follow), but not IE, dynamic width, you can hover over them, 'press' them, they have an image on them (configurable via css), a disabled style and NO javascript at all, no hasseling with fonts etc...

They still need some tweeking (id and class thing) , the correct images (can someone try to check them in as binary? and the correct colors.. and then wrapped in a tag... The html required is the following:

<a href="#" class="button" id="buttonCancel" title="Clicking this button won?t validate anything"><span class="icon">Ok</span></a>
 <p><a href="#" class="buttonDis" id="buttonSave" title="This button is disabled"><span class="icon"Save"</span></a></p>

css:

/* button styles */
a.button,a.buttonDis {
 display: inline;
 height: 28px;
 margin: 6px auto;
 padding: 4px 16px 4px 16px;
 text-align: center;
 font-size: 100%;
 font-weight: bold;
 text-decoration: none;
 font-family: Arial, Helvetica, sans-serif;
 cursor: pointer;
 border-top: 2px solid #FFAAAA;
 border-left: 2px solid #FFAAAA;
 border-right: 2px solid #CCAAAA;
 border-bottom: 2px solid #CCAAAA;
 -moz-border-radius: 7px 7px 7px 7px;;
 background-color: #D0D0D0;
}

a.button:link,a.button:visited {
 color: #002577;
}

a.button:hover {
 background-color: #E0E0E0;
 color: #FF7200;
}


a.button:active {
 background-color: #C0C0C0;
 color: #F76D00;
 border-top: 2px solid #997777;
 border-left: 2px solid #997777;
 border-right: 2px solid #CCAAAA;
 border-bottom: 2px solid #CCAAAA;
}


a.buttonDis:link,a.buttonDis:visited,a.buttonDis:hover,a.buttonDis:active
 {
 background-color: #8F8F8F;
 color: #5F5F5F;
 cursor: default;
}

.icon {
 position: relative;
 top: 0px;
 left: 0px;
 background-repeat: no-repeat;
 padding: 0px 0px 5px 18px;
}

a.button:hover .icon {
}

a.button:active .icon {
 top: 1px;
 left: 1px;
}

a.buttonDis:link .icon,a.buttonDis:visited .icon,a.buttonDis:hover .icon,a.buttonDis:active .icon
 {

}

/* list of button icons */
#buttonOK .icon {
 background-image: url("../images/ok.gif");
}

#buttonCancel .icon {
 background-image: url("../images/cancel.gif");
}

#buttonSave .icon {
 background-image: url("images/save.gif");
}

There seems to be some redundant/empty style info in here, but that can be used to do some other things if wanted by someone

[dmlloyd]

"kukeltje" wrote:
It cost me over two hours to find out that the jboss cvs serves gif images as ascii so they (save, cancel, ok, transition) all are corrupted.

Heh... that's probably my fault. I added the images to CVS and didn't manually mark them -kb... I had added some other images before and it seemed to recognize them so I did not bother to check to make sure it added them correctly. I've performed the appropriate CVS voodoo and it should be OK now. Sorry about that! :-(

[kukeltje]

Hey, I know nobody does this on purpose, no so worries..

Strange thing is, is that fisheye did show them correctly, therefor I'm not completely sure it is your fault or the cvs server

[aguizar]

[OT]
I just saw the screenshot of the new task console... I must say, AMAZING JOB! Keep it up! :-)

-Alejandro

[dmlloyd]

"kukeltje" wrote:
I'll post a screenshot tonight (windows, jdk 1.5.0_04 or 1.4_12)

Ronald, have you had a chance to generate that screenshot, after I've fixed the gifs? If so, please post a link if you could. This will be greatly helpful.

Thanks!

[kukeltje]

David... no sorry, no screenshot, because afther the gifs were fixed it looked the same as with you. Just a small difference that the fonts on windows itself are normally not aliased and the fonts on the buttons are, so that looks different.

The issue about the styling remains though...