-
I put two computed labels in a panel on an XPage, one above the other, both centered. This is what I see in DDE.- When I load that XPage in a web browser I get the properly computed text all crammed together on one line in the top-left corner of the browser window. That’s not what I see in Designer.
-
While it’s probable I’m not using a Panel correctly DDE is not coming across as being even remotely WYSIWYG, where I’m under the impression that XPages are supposed to work that way. If its centered on two lines in DDE it should be centered on two lines on the web. If it’s going to render all crammed in the upper left corner, then that’s what I should see in Designer. Otherwise what’s the point of “drag and drop”?
-
If I take the elements out of the Panel and delete that container, so the XPage has only two computed Labels centered one above the other, I get exactly the same result in the browser … both sets of computed text all crammed in the upper left corner.
-
At least that’s consistent…
Subject: Apparently the trick is best described as “scope”…
-
If the text is centered in a wide control, such as a Label, then that centering is utterly and completely ignored on rendering in a browser, despite the fact that text-align:center clearly appears on the style for that control, and it quite clearly shows up centered in Designer.- If, however, one sets the control to align left, then applies text-align:center to the paragraph around the control, then it does in fact render centered in the browser, even though the content of the control does NOT render centered in Designer.
-
Apparently the width of the control is irrelevant when rendering (it doesn’t even set a lower bound before scroll bars appear; just checked), it’s only the width of the computed content that matters, and one is supposed to “just know” that if the borders of the control are centered in Designer then the (run time) text will be centered when rendered, even though the content in Designer is all lopsided, the borders of a control are only visible when it’s selected, and any number of widths of controls may be present at any given time.
-
So this:
<xp:view xmlns:xp=“http://www.ibm.com/xsp/core”
style="text-align:center">
<xp:label value="${javascript:database.getTitle()}"
style="width:26.0%;font-family:Arial;font-size:14pt;font-weight:bold;text-align:right"
id="AppTitle">
</xp:label>
<xp:br></xp:br>
<xp:label value="${javascript:'Ticket #'}"
style="width:39.0%;height:30.0px;font-family:Arial;font-size:11pt;font-weight:bold;text-align:left"
id="dspTrackerID">
</xp:label>
<xp:div style="text-align:left">
</xp:div><xp:div style="text-align:left"></xp:div></xp:view>
shows the first Label’s contents align right and the second Label’s contents align left, in Designer, and unless one of the controls is selected it’s impossible to tell where either control’s borders are. Yet in the browser all content is centered.
-
Perhaps it’s just me, but this seems more than a little counter-intuitive. What’s the point of having a width on a control if it’s utterly ignored? Same with alignment on a control? Same with showing control content alignment in DDE? It’s confusing at best, to someone who’s used hand-crafted style sheet layout for years and years.
-
Just to end on a positive note, I do have to say that having the Source tab in DDE is a real bonus. If nothing else I can paste in what’s in Designer, as above, so others will know unequivocally what’s on my screen, and perhaps be able to make suggestions. It’s also considerably simpler to edit properties in the Source tab than to click through a gajillion property pages to do the same thing. Very spiffy…
Subject: Apparently DDE is NOT a visual design tool…
-
I stumbled upon Declan Sciolla-Lynch’s most excellent XPages tutorial, which is scattered all over his blog, but very comprehensive and thorough. Serious kudos on a job well done! IBM should pay to have that repackaged into a sanctioned online tutorial.- It’s obvious going through it that XPages are NOT intended to be a visual design system, for not one single thing in that tutorial, starting with the very first XPage in Part 1, renders in Designer even remotely like it does in a browser. The rendering between DDE and a browser are about as similar as apples and golf carts.
-
I was somehow given the expectation that XPages DO employ visual design, such that DDE is a “WYSIWYG” editor where the developer does layout and code simultaneously, and the compiled product very closely if not exactly mimics the IDE. I was most likely given this impression by the “Site Finder Demo”, which comes across significantly more “visual” than Declan Sciolla-Lynch’s tutorial.
-
It’s perfectly fine that DDE isn’t visual, but it’s unpleasant to quite strongly be given the impression that it is, then spend hours and hours trying to figure out why patently simple things “won’t render correctly”.
-
An explicit “DDE isn’t a visual design tool” would have saved enormous amounts of time and frustration.