IBI and CSS, oh dear...

November 28, 2012, 04:29 AM

Wep5622

I had the silly idea to try and outsmart HTML Composer to make the generated code a bit more readable (and manageable). HTML Composer had generated a date-fieldlike this:

<INPUT style="Z-INDEX: 6; POSITION: absolute; WIDTH: 120px; HEIGHT: 22px; TOP: 11px; FONT-WEIGHT: bold; LEFT: 60px" id=startDate tabIndex=1 size=13 persistentuniqueid="compUid_4" elementtype="14" defaultselection="1" name="STARTDATE">

That's pretty unreadable (what variable corresponds to that field, for example? You need to scroll past all that style info to see... grrr), so I thought "Why don't I put that style information where it belongs: in a style-sheet"?
So here we go:

<STYLE type="text/css">
#startDate  { Z-INDEX: 6; POSITION: absolute; WIDTH: 120px; HEIGHT: 22px; TOP: 11px; FONT-WEIGHT: bold; LEFT: 60px; }
</STYLE>
</HEAD>
<BODY ...>
<INPUT id=startDate tabIndex=1 size=13 persistentuniqueid="compUid_4" elementtype="14" defaultselection="1" name="STARTDATE">

What happens? The calendar icon loses its positioning

Why? It's semantically equivalent, isn't it? IBI isn't actually parsing the contents of the actual style attribute instead of reading out element style information through the style property of the element, are they?

November 28, 2012, 07:54 AM

Dave

Well, you already know the answer...
...you don't need to look at the code. Use the GUI!

...oh yeah, and if the GUI doesn't offer you the functionality you can always code it yourself.

You've been waiting a long time to post this didn't you? Just so that you could make this post nr. 666 (!)

I agree, the code is a mess!

November 28, 2012, 08:14 AM

Dave

What really happens ( I think ):

The calender icon isn't in the code. It's added later. Since it isn't a real HTML item. It takes whatever is in the STYLE element of the inputbox and uses that ( with some modifications ) to display the icon. Since you've cleared / removed the STYLE it can not do that.
If you catch the generated HTML you'll see additional A tags added to the end of the code.
Unfortunately they don't seem to get an ID. :-(

Added code by WF:

<A href="javascript: calendar1_calendar.show()"><IMG style="Z-INDEX: 10000; LEFT: 219px; POSITION: absolute; TOP: 150px" height=16 alt=Calendar src="http://getyourownbloodyserver/ibi_html/javaassist/ibi/html/maint/dynCalendar.gif" width=16 border=0></A>

You might be able to pinpoint the element by checking for attributes. ( http://www.w3schools.com/css/c...ribute_selectors.asp )

G'luck, Dave

November 28, 2012, 08:20 AM

Enigma006

HTML Composer used to be very clean with 7.6.4 n before. After 7.6.9, its unable to make changes manually even though we can add customized code.

November 28, 2012, 10:34 AM

Wep5622

quote:
Originally posted by Dave:
You've been waiting a long time to post this didn't you? Just so that you could make this post nr. 666 (!)

Oh indeed, it is! Frankly, I don't usually bother with posting numbers, they're quite meaningless. In this case, I'm aware that some people associate a meaning with this particular number, but I'm not one of them.

Regarding what really happens; I didn't actually remove the styling, I just moved it around a bit. The styles are still associated with the element, and the element must be what IBI's code bases its positioning for the calendar icons on. Basically, they messed up.

My main reason for posting wasn't as much to complain about yet another issue with HTML composer (plenty of those on these forums, quite a few by yours truly), but to inform people that although this seems a sane thing to do, it doesn't work out the way you'd expect.

I think it should be possible to override some of the ibirls3 code to fix this, but I haven't had an opportunity to look into that yet.

November 28, 2012, 10:43 AM

Dave

I know you just used another way of adding styling to an element. The end result in a browser should be the same...

...but it not just a browser looking at this code.

You -did- remove the STYLE attribute from the INPUT tag. And if some WF code tried to read the contents of the STYLE attribute... ...it will assume no styling is present. ( which it pretty much counts on I guess ).

G'luck,
Dave

November 28, 2012, 03:35 PM

Waz

You need to keep in mind that the whole section in composer is XML data, and should be treated as such. the items are not HTML elements.... (yet).

November 29, 2012, 03:57 AM

Wep5622

I'm sorry, but that statement makes no sense.
The code that's having problems necessarily does its work in javascript, which is perfectly capable of getting to the styling information on a given HTML element. It's not even more difficult (quite possibly it's actually easier) than getting that information from the style attribute as IBI is apparently doing now.

Composer only created the HTML that I improved a bit on. I have no need for it to be able to interpret it again after the change. What's surprising is that it broke stuff in the browser, as that was totally unnecessary.

The reason that I changed the HTML was that I wanted to fix the tab-indexes. With the almost random order in which labels and form elements tend to appear in the HTML and all that style info at the front of each element, its really difficult to see what form-element you're currently looking at. Putting the style info at the end would alleviate the problem, but you still would't be able to read, for example, a label's text.
Moving the style info into a separate style-section in the HTML seemed like a good (and proper) solution - but, as I described here, that unfortunately doesn't work for calendar controls (and for no particular reason).

November 29, 2012, 03:54 PM

BarryS

Hi

In WebFOCUS 8 the tool does not even let you view the HTML code but only allows you to edit the JAVASCRIPT functions. The more you play with the HTML code the more you can break and maytimes the code will not get converted correctly. The more you play with the HTML code the better the chance you will break something and the report cannot be migrated to newer releases and that is when IBI hears about it.

You can see all the styling for any control by clicking on the control and doing the following:

1 - Goto the Properties window on the right side of the composer page (by default).
2 - Look for Styling: Advanced ... and click on the elipsis button to the right.
3 - The Style Composer popup window will come up and you can set all the properties there in a safe manner.

I hope that this resolved you issue and if not please feel free to open a case with Tech Support and someone will assist you.

Thanks Barry

November 29, 2012, 03:58 PM

BarryS

OH by the way the Tab order can be changed in the GUI as well. Go to View menu item and make sure that "Positioning" is checked. Then look for the third icon on that toolbar with a finger pointing to three boxes. That icon is the TAB ORDER button and that will let you change the Tab order of the HTM page.

Thanks Barry

December 11, 2012, 04:59 AM

Wep5622

I know you can change the tab order using HTML composer, but then I need to restart Dev Studio after changing the tab order to get line numbers in Dev Studio back. Moving the style attribute to the "appropriate" section and editing the tab indexes by hand (and removing the superfluous ones on the labels) is quicker and requires less mouse usage.

Prod:	WebFOCUS 7.6.10/8.1.04	Upgrade:	WebFOCUS 8.2.07	OS:	Linux	Outputs:	HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!