Wrong alignment

[jac53]

I just started to evaluate Genie. Our company uses JDEdwards software. The menu uses 12 fields of 73 characters. In each fields they show 2 options meaning the menu could have up to 24 options. The problem I have is that when Genie convert it on the fly the lines are not correctly aligned and also the on focus event (reverse blue color) only works for some of the options.

Attached there is a PDF document with the image of my menu. I copied the gradient skin as the manual suggest to do. I will appreciate any help.

[David]

The trouble here is simply the font that the Gradient skin is using. It's set up to use a proportional font, which has a nicer look.

Trouble is that a lot of DDS is coded to rely on spacing and character counts to line things up, rather than aligning things by using separate fields and lining up field edges. This means that the screens only work well when used with a fixed-width font.

This is easily resolved by adjusting the skin's style heet to use a fixed-width font. I've attached a modified version of the Gradient skin's stylesheet that does this.

To install it, overwrite your skin's style sheet with it.

Your skin's stylesheet is located on the IFS at:

/www/profoundui/htdocs/profoundui/userdata/genie skins/YOUR_SKIN/YOUR_SKIN.css

After doing that, start with a "fresh" browser to ensure it's not caching the old version of the style sheet. If you still don't see the font change, try hitting the browser's refresh button, or the refresh button on the Genie Design Toolbar.

Now, things should line up properly in all cases.

[jac53]

Thank you very much. The alignment is fixed. The only thing is the on focus property some time reverse image the whole text in the option and some only the number, but in both cases when you click it takes you to the right option.

[David]

Here Genie is trying to cleverly interpret the screen content. It tries to create clickable hyperlinks out of screens that appear to be menu panels.

The feature is based on the typical IBM menu panel pattern:

[number 1-99][dot][text]

All occuring within a single field. Of course, different software packages have their own way of formatting the fields so this does not always come out perfectly to begin with.

However, it is possibly (and pretty easy) to write a simple JavaScript function that creates the links by catering to the patterns of the software you are using.

This is something we could assist you with...

[jac53]

By the way the only skin which could be duplicated is Gradient? What about all the others? Will they work for menus or for my case specifically?

[David]

You can duplicate any skin you'd like. Custom skins can even be created entirely from scratch with a bit of HTML/CSS know how.

The menu effect is not tied to a skin but is just a built-in feature of Genie, it would turn them out the same way although the colors/styling will be different from skin to skin.

[jac53]

I dowloaded the Genie/ProfounUI to a new partition with V5R4M0. I repeated the process of copying you attached yourskin.css of course with the right name of my skin but it does not work continuing having the problem of my attached documents. The last time I did it in my V7R1M0 partition it worked fine and it is still working even after I downloaded your latest 3.02 version.
Any ideas why is it happening?

[jac53]

I just noticed that the profoundui.css is loading after the myskin.css so is overriden mine.
How do I change the order in which they are loaded?

[David]

You should reverse the order of the <link> tags in your skin's "start.html" file so that hte "profoundui.css" is first, then yours.

This allows yours to override.

Does that resolve it? If not, attach the skin's CSS and HTML files and I can have a look.

[jac53]

Yes that solved the problem. Why the order changed I do not know.
Thank you.