[richfaces-issues] [JBoss JIRA] Commented: (RF-6485) Reduce size of html-js generated by RF components

[Ingo Jobling (JIRA)]

    [ https://jira.jboss.org/jira/browse/RF-6485?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=12456093#action_12456093 ] 

Ingo Jobling commented on RF-6485:
----------------------------------

This is the markup generated for a single occurance of a rich:combobox containing a list of 5 choices:

<div class="rich-combobox-font rich-combobox comboBox" id="f:t:0:premisesNumbercombobox" style="width:150px;">
    <div class="rich-combobox-list-cord">
    </div>
    <div class="rich-combobox-font rich-combobox-shell" style="width:150px;">
        <input autocomplete="off" class="rich-combobox-font-disabled rich-combobox-input-inactive  " id="f:t:0:premisesNumbercomboboxField" name="f:t:0:premisesNumbercomboboxField" style="width:140px; " type="text" /><input class="rich-combobox-font-inactive rich-combobox-button-background rich-combobox-button-inactive" id="f:t:0:premisesNumbercomboBoxButtonBG" readonly="true" tabindex="-1" type="text" /><input class="rich-combobox-font-inactive rich-combobox-button-icon-inactive rich-combobox-button-inactive " id="f:t:0:premisesNumbercomboboxButton" readonly="true" style="; background-image: ;" tabindex="-1" type="text" />
        <div class="rich-combobox-strut rich-combobox-font" style="width:140px">
            Strut
        </div>
    </div>
    <div class="rich-combobox-list-cord " id="f:t:0:premisesNumberlistParent" style="display:none; ; position:absolute;z-index:1000;">
        <div class="rich-combobox-shadow">
            <table border="0" cellpadding="0" cellspacing="0" id="f:t:0:premisesNumbershadow">
                <tr>
                    <td class="rich-combobox-shadow-tl">
                        <img alt="" height="1" src="/agritrace/a4j/g/3_3_0.GAimages/spacer.gif" style="border:0" width="10" />
                        <br/>
                    </td>
                    <td class="rich-combobox-shadow-tr">
                        <img alt="" height="10" src="/agritrace/a4j/g/3_3_0.GAimages/spacer.gif" style="border:0" width="1" />
                        <br/>
                    </td>
                </tr>
                <tr>
                    <td class="rich-combobox-shadow-bl">
                        <img alt="" height="10" src="/agritrace/a4j/g/3_3_0.GAimages/spacer.gif" style="border:0" width="1" />
                        <br/>
                    </td>
                    <td class="rich-combobox-shadow-br">
                        <img alt="" height="10" src="/agritrace/a4j/g/3_3_0.GAimages/spacer.gif" style="border:0" width="10" />
                        <br/>
                    </td>
                </tr>
            </table>
        </div>
        <div class="rich-combobox-list-position" id="f:t:0:premisesNumberlistPosition">
            <div class="rich-combobox-list-decoration" id="f:t:0:premisesNumberlistDecoration">
                <div class="rich-combobox-list-scroll" id="f:t:0:premisesNumberlist">
                    <span class="rich-combobox-item rich-combobox-item-normal">1124127</span>
                    <span class="rich-combobox-item rich-combobox-item-normal">1124192</span>
                    <span class="rich-combobox-item rich-combobox-item-normal">1124246</span>
                    <span class="rich-combobox-item rich-combobox-item-normal">1000459</span>
                    <span class="rich-combobox-item rich-combobox-item-normal">1124274</span>
                    <span class="rich-combobox-item rich-combobox-item-normal">1000653</span>
                </div>
            </div>
        </div>
    </div>
    <input id="f:t:0:premisesNumbercomboboxValue" name="f:t:0:premisesNumber" type="hidden" />
</div>
<script type="text/javascript">
    var clientId = 'f:t:0:premisesNumber';
    
    
    var comboboxUserStyles = {
        button: {
            classes: {
                normal: "",
                active: "",
                disabled: ""
            },
            style: {
                normal: "",
                active: "",
                disabled: ""
            }
        },
        buttonicon: {
            style: {
                normal: "",
                active: "",
                disabled: ""
            }
        },
        field: {
            classes: {
                normal: "",
                active: "",
                disabled: ""
            },
            style: {
                normal: "",
                active: "",
                disabled: ""
            }
        },
        combolist: {
            list: {
                classes: {
                    active: ""
                },
                style: {
                    active: "'"
                }
            },
            item: {
                normal: "",
                selected: ""
            }
        }
    };
    
    
    var combobox = new Richfaces.ComboBox("f:t:0:premisesNumber", "f:t:0:premisesNumberlist", "f:t:0:premisesNumberlistParent", "f:t:0:premisesNumbercomboboxValue", "f:t:0:premisesNumbercomboboxField", "f:t:0:premisesNumbercomboboxButton", "f:t:0:premisesNumbercomboBoxButtonBG", "f:t:0:premisesNumbershadow", new Richfaces.ComboBoxStyles(), comboboxUserStyles, "150px", "200px", ['1124127', '1124192', '1124246', '1000459', '1124274', '1000653'], false, true, true, null, null, "Sélectionner...", false, '', 0, 0);
</script>
</div>


> Reduce size of html-js generated by RF components
> -------------------------------------------------
>
>                 Key: RF-6485
>                 URL: https://jira.jboss.org/jira/browse/RF-6485
>             Project: RichFaces
>          Issue Type: Feature Request
>            Reporter: Ingo Jobling
>
> As our project advances, we are running into problems with the size of pages containing certain RF components.
> For example, a recently developed page, which contains a rich:table with 50 rows and and 20 columns, generates over 600K of markup.
> The following three items alone account for 50% of the page size:
> 200K for one column, which contains a rich:comboBox (with only 5 values)
> 60K for the RichDataTable (compared to h:datatable)
> 60K is the rich:menu (about 40 items in all)

-- 
This message is automatically generated by JIRA.
-
If you think it was sent incorrectly contact one of the administrators: https://jira.jboss.org/jira/secure/Administrators.jspa
-
For more information on JIRA, see: http://www.atlassian.com/software/jira