Date: Wed, 5 Mar 2008 17:18:08 -0800
Greetings!
After looking through the generated components there seems to be a lot of
opportunity to improve the CSS and HTML for some of the 4.1.1 components. Is
there anything on the roadmap associated with improving the CSS and HTML for
future releases?
For example, this convenient little component:
<webuijsf:alert id="processingAlert" summary="my Message"
type="information" visible="false">
See attached file to see what is rendered...
But what is created in the DOM is very bloated and is using some old-school
table-based design and image placeholders and also declares 21 separate
'class' attribute declarations throughout.
<span id="j_id61">
<div id="processingAlert" class="inlineAlert_4_sun4 modalAlert"
dojoattachpoint="domNode" widgetid="processingAlert">
<table cellspacing="0" cellpadding="0" border="0" title="">
<tbody>
<tr>
</tr>
<tr class="middleRow_sun4">
<td class="leftMiddle_sun4">
</td>
<td>
<div class="middle_sun4">
<div class="header_sun4">
<span id="processingAlert_imageContainer" dojoattachpoint="imageContainer">
<img id="processingAlert:error" class="hidden_sun4" width="21" height="21"
border="0" dojoattachpoint="domNode" widgetid="processingAlert:error"
alt="Error"
src="/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/dot.gif"
style="background-image:
url(/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/combinedImage.png);
background-position: 0px -1338px; height: 21px;"/>
<img id="processingAlert:warning" class="hidden_sun4" width="21" height="21"
border="0" dojoattachpoint="domNode" widgetid="processingAlert:warning"
alt="Warning"
src="/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/dot.gif"
style="background-image:
url(/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/combinedImage.png);
background-position: 0px -4566px; height: 21px;"/>
<img id="processingAlert:success" class="hidden_sun4" width="21" height="21"
border="0" dojoattachpoint="domNode" widgetid="processingAlert:success"
alt="Success"
src="/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/dot.gif"
style="background-image:
url(/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/combinedImage.png);
background-position: 0px -2878px; height: 21px;"/>
<img id="processingAlert:information" class="" width="21" height="21"
border="0" dojoattachpoint="domNode" widgetid="processingAlert:information"
alt="Information"
src="/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/dot.gif"
style="background-image:
url(/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/combinedImage.png);
background-position: 0px -1615px; height: 21px;"/>
</span>
<span class="label_sun4">
<span id="processingAlert_summaryContainer"
dojoattachpoint="summaryContainer">We are processing your request. Please
wait.</span>
</span>
</div>
<div class="details_sun4">
<span class="label_sun4">
<span id="processingAlert_detailContainer"
dojoattachpoint="detailContainer"/>
</span>
<span id="processingAlert_detailContainerLink"
dojoattachpoint="detailContainerLink">
<img id="processingAlert:alertLink:j_id32" class="" width="12" height="10"
border="0" dojoattachpoint="domNode"
widgetid="processingAlert:alertLink:j_id32" alt=">>"
src="/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/dot.gif"
style="background-image:
url(/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/combinedImage.png);
background-position: 0px -1605px; height: 10px;"/>
<a onclick="cancelSearch();" href="#"> Cancel </a>
</span>
</div>
</div>
</td>
<td class="rightMiddle_sun4">
<span id="processingAlert_rightMiddleContainer"
dojoattachpoint="rightMiddleContainer">
<img id="processingAlert_spacerImage4" class="" border="0"
dojoattachpoint="domNode" widgetid="processingAlert_spacerImage4"
src="/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/dot.gif"/>
</span>
</td>
</tr>
<tr>
<td class="bottomLeftCorner_sun4">
<span id="processingAlert_bottomLeftContainer"
dojoattachpoint="bottomLeftContainer">
<img id="processingAlert_spacerImage0" class="" border="0"
dojoattachpoint="domNode" widgetid="processingAlert_spacerImage0"
src="/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/dot.gif"/>
</span>
</td>
<td class="bottomMiddle_sun4">
<span id="processingAlert_bottomMiddleContainer"
dojoattachpoint="bottomMiddleContainer">
<img id="processingAlert_spacerImage1" class="" border="0"
dojoattachpoint="domNode" widgetid="processingAlert_spacerImage1"
src="/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/dot.gif"/>
</span>
</td>
<td class="bottomRightCorner_sun4">
<span id="processingAlert_bottomRightContainer"
dojoattachpoint="bottomRightContainer">
<img id="processingAlert_spacerImage2" class="" border="0"
dojoattachpoint="domNode" widgetid="processingAlert_spacerImage2"
src="/v4/theme/com/sun/webui/jsf/suntheme4_1_1/images/other/dot.gif"/>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</span>
(image/gif attachment: jsAlert.gif)