-
1. Re: Size of and content of generated HTML
nbelaevski Dec 2, 2008 12:37 PM (in response to sumdude)Hi SumDude,
Try to different strategies of scripts loading: http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html/ArchitectureOverview.html#ScriptsandStylesLoadStrategy -
2. Re: Size of and content of generated HTML
nbelaevski Dec 2, 2008 12:43 PM (in response to sumdude)"SumDude" wrote:
The next is the generated HTML which contains a lot of javascript markup, making it very difficult to debug. An example of this is the following:<script type="text/javascript">new ModalPanel('newFilePanel', { width: 450, height: 100, minWidth: -1, minHeight: -1, resizeable: false, moveable: true, left: "auto", top: "auto", zindex: 100,onresize: '',onmove: '',onshow: '',onhide: '',onbeforeshow: '',onbeforehide: '', keepVisualState: false, showWhenRendered: false, selectBehavior: "disable", autosized: true});</script></div><script type="text/javascript"></script>
This is included in the HTML for every possible modal panel (about 12 on that page) and makes the HTML hard to read and much larger than it should be. Is there anything that I can do about this?
Looks like no. These scripts contain components initialization information and they're necessary. -
3. Re: Size of and content of generated HTML
sumdude Dec 3, 2008 12:18 AM (in response to sumdude)Hi nbelaevski,
Thanks for the reply.
I tried the ALL strategy for loading script and stylesheets, but that causes the initial page to be over 900kb (which is then cached, but still, almost 1MB for the first time any page is loaded). Ideally I'd want to keep every page in the 200kb region (excluding images). Is there any way to accomplish this?
As for the script I posted, perhaps it was a bad example. I was in a hurry so I just grabbed the first large section of code I saw. However, I don't understand why the default values aren't optionally assigned in the javascript. That piece of script could only be this:<script type="text/javascript">new ModalPanel('newFilePanel', { width: 450, height: 100 });</script></div><script type="text/javascript"></script>
How about something like this?<div id="frmMain:optionmenu"><script>var contextMenu = new Richfaces.ContextMenu('frmMain:optionmenu', 50, [new E('div',{'style':'display: none; z-index: 2;', 'className':'dr-menu-list-border rich-menu-list-border', 'id':'frmMain:optionmenu_menu'},[new E('div',{'className':'dr-menu-list-bg rich-menu-list-bg'},[new E('div',{'style':';', 'onmouseup':function (context) { return Richfaces.interpolate("Event.stop(event);", context);}, 'onmouseover':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('frmMain:j_id181').style.cssText='; ; ;'; $('frmMain:j_id181:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('frmMain:j_id181:anchor'), 'rich-menu-item-label-selected');", context);}, 'onmouseout':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('frmMain:j_id181').style.cssText=';'; $('frmMain:j_id181:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('frmMain:j_id181:anchor'), 'rich-menu-item-label-selected');", context);}, 'onclick':function (context) { return Richfaces.interpolate("this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; Richfaces.componentControl.performOperation(event,'#newFolderPanel','show',{},false); A4J.AJAX.Submit('_viewRoot','frmMain',event,{'parameters':{'frmMain:j_id181':'frmMain:j_id181'} ,'actionUrl':'/RepositoryWeb/CompanyAreas/companyArea.xhtml'} );", context);}, 'id':'frmMain:j_id181', 'className':'dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled'},[new E('span',{'id':'frmMain:j_id181:icon', 'className':'dr-menu-icon rich-menu-item-icon'},[new E('img',{'width':'16', 'src':'/RepositoryWeb/a4j/g/3_2_2.SR1images/spacer.gif.xhtml', 'height':'16'})]),new E('span',{'id':'frmMain:j_id181:anchor', 'className':'rich-menu-item-label'},[new T('New'),new E('script',{'type':'text/javascript'},[new T('//<![CDATA[\n Richfaces.onAvailable(\'\', function()\n{\n Richfaces.componentControl.attachEvent(\'#\', \'onselect\', \'#newFolderPanel\', \'show\', function() { return {}; }, false);\n });//\x5D\x5D>')])])]),new E('div',{'style':';', 'onmouseup':function (context) { return Richfaces.interpolate("Event.stop(event);", context);}, 'onmouseover':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('frmMain:j_id183').style.cssText='; ; ;'; $('frmMain:j_id183:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('frmMain:j_id183:anchor'), 'rich-menu-item-label-selected');", context);}, 'onmouseout':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('frmMain:j_id183').style.cssText=';'; $('frmMain:j_id183:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('frmMain:j_id183:anchor'), 'rich-menu-item-label-selected');", context);}, 'onclick':function (context) { return Richfaces.interpolate("this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; Richfaces.componentControl.performOperation(event,'#editFolderPanel','show',{},false); A4J.AJAX.Submit('_viewRoot','frmMain',event,{'parameters':{'frmMain:j_id183':'frmMain:j_id183'} ,'actionUrl':'/RepositoryWeb/CompanyAreas/companyArea.xhtml'} );", context);}, 'id':'frmMain:j_id183', 'className':'dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled'},[new E('span',{'id':'frmMain:j_id183:icon', 'className':'dr-menu-icon rich-menu-item-icon'},[new E('img',{'width':'16', 'src':'/RepositoryWeb/a4j/g/3_2_2.SR1images/spacer.gif.xhtml', 'height':'16'})]),new E('span',{'id':'frmMain:j_id183:anchor', 'className':'rich-menu-item-label'},[new T('Edit'),new E('script',{'type':'text/javascript'},[new T('//<![CDATA[\n Richfaces.onAvailable(\'\', function()\n{\n Richfaces.componentControl.attachEvent(\'#\', \'onselect\', \'#editFolderPanel\', \'show\', function() { return {}; }, false);\n });//\x5D\x5D>')])])]),new E('div',{'id':'frmMain:j_id185', 'className':'dr-menu-separator rich-menu-separator'}),new E('div',{'style':';', 'onmouseup':function (context) { return Richfaces.interpolate("Event.stop(event);", context);}, 'onmouseover':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('frmMain:j_id186').style.cssText='; ; ;'; $('frmMain:j_id186:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('frmMain:j_id186:anchor'), 'rich-menu-item-label-selected');", context);}, 'onmouseout':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('frmMain:j_id186').style.cssText=';'; $('frmMain:j_id186:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('frmMain:j_id186:anchor'), 'rich-menu-item-label-selected');", context);}, 'onclick':function (context) { return Richfaces.interpolate("this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; A4J.AJAX.Submit('_viewRoot','frmMain',event,{'parameters':{'frmMain:j_id186':'frmMain:j_id186'} ,'actionUrl':'/RepositoryWeb/CompanyAreas/companyArea.xhtml'} );", context);}, 'id':'frmMain:j_id186', 'className':'dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled'},[new E('span',{'id':'frmMain:j_id186:icon', 'className':'dr-menu-icon rich-menu-item-icon'},[new E('img',{'width':'16', 'src':'/RepositoryWeb/a4j/g/3_2_2.SR1images/spacer.gif.xhtml', 'height':'16'})]),new E('span',{'id':'frmMain:j_id186:anchor', 'className':'rich-menu-item-label'},[new T('Cut')])]),new E('div',{'style':';', 'onmouseup':function (context) { return Richfaces.interpolate("Event.stop(event);", context);}, 'onmouseover':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('frmMain:j_id187').style.cssText='; ; ;'; $('frmMain:j_id187:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('frmMain:j_id187:anchor'), 'rich-menu-item-label-selected');", context);}, 'onmouseout':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('frmMain:j_id187').style.cssText=';'; $('frmMain:j_id187:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('frmMain:j_id187:anchor'), 'rich-menu-item-label-selected');", context);}, 'onclick':function (context) { return Richfaces.interpolate("this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; A4J.AJAX.Submit('_viewRoot','frmMain',event,{'parameters':{'frmMain:j_id187':'frmMain:j_id187'} ,'actionUrl':'/RepositoryWeb/CompanyAreas/companyArea.xhtml'} );", context);}, 'id':'frmMain:j_id187', 'className':'dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled'},[new E('span',{'id':'frmMain:j_id187:icon', 'className':'dr-menu-icon rich-menu-item-icon'},[new E('img',{'width':'16', 'src':'/RepositoryWeb/a4j/g/3_2_2.SR1images/spacer.gif.xhtml', 'height':'16'})]),new E('span',{'id':'frmMain:j_id187:anchor', 'className':'rich-menu-item-label'},[new T('Copy')])]),new E('div',{'style':';', 'onmouseup':function (context) { return Richfaces.interpolate("Event.stop(event);", context);}, 'onmouseover':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('frmMain:j_id188').style.cssText='; ; ;'; $('frmMain:j_id188:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('frmMain:j_id188:anchor'), 'rich-menu-item-label-selected');", context);}, 'onmouseout':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('frmMain:j_id188').style.cssText=';'; $('frmMain:j_id188:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('frmMain:j_id188:anchor'), 'rich-menu-item-label-selected');", context);}, 'onclick':function (context) { return Richfaces.interpolate("this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; Richfaces.componentControl.performOperation(event,'#confirmMovePanel','show',{},false); A4J.AJAX.Submit('_viewRoot','frmMain',event,{'parameters':{'frmMain:j_id188':'frmMain:j_id188'} ,'actionUrl':'/RepositoryWeb/CompanyAreas/companyArea.xhtml'} );", context);}, 'id':'frmMain:j_id188', 'className':'dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled'},[new E('span',{'id':'frmMain:j_id188:icon', 'className':'dr-menu-icon rich-menu-item-icon'},[new E('img',{'width':'16', 'src':'/RepositoryWeb/a4j/g/3_2_2.SR1images/spacer.gif.xhtml', 'height':'16'})]),new E('span',{'id':'frmMain:j_id188:anchor', 'className':'rich-menu-item-label'},[new T('Paste'),new E('script',{'type':'text/javascript'},[new T('//<![CDATA[\n Richfaces.onAvailable(\'\', function()\n{\n Richfaces.componentControl.attachEvent(\'#\', \'onselect\', \'#confirmMovePanel\', \'show\', function() { return {}; }, false);\n });//\x5D\x5D>')])])]),new E('div',{'id':'frmMain:j_id190', 'className':'dr-menu-separator rich-menu-separator'}),new E('div',{'style':';', 'onmouseup':function (context) { return Richfaces.interpolate("Event.stop(event);", context);}, 'onmouseover':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('frmMain:j_id191').style.cssText='; ; ;'; $('frmMain:j_id191:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('frmMain:j_id191:anchor'), 'rich-menu-item-label-selected');", context);}, 'onmouseout':function (context) { return Richfaces.interpolate("if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('frmMain:j_id191').style.cssText=';'; $('frmMain:j_id191:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('frmMain:j_id191:anchor'), 'rich-menu-item-label-selected');", context);}, 'onclick':function (context) { return Richfaces.interpolate("this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; Richfaces.componentControl.performOperation(event,'#deleteFolderPanel','show',{},false); A4J.AJAX.Submit('_viewRoot','frmMain',event,{'parameters':{'frmMain:j_id191':'frmMain:j_id191'} ,'actionUrl':'/RepositoryWeb/CompanyAreas/companyArea.xhtml'} );", context);}, 'id':'frmMain:j_id191', 'className':'dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled'},[new E('span',{'id':'frmMain:j_id191:icon', 'className':'dr-menu-icon rich-menu-item-icon'},[new E('img',{'width':'16', 'src':'/RepositoryWeb/a4j/g/3_2_2.SR1images/spacer.gif.xhtml', 'height':'16'})]),new E('span',{'id':'frmMain:j_id191:anchor', 'className':'rich-menu-item-label'},[new T('Delete'),new E('script',{'type':'text/javascript'},[new T('//<![CDATA[\n Richfaces.onAvailable(\'\', function()\n{\n Richfaces.componentControl.attachEvent(\'#\', \'onselect\', \'#deleteFolderPanel\', \'show\', function() { return {}; }, false);\n });//\x5D\x5D>')])])]),new E('div',{'className':'dr-menu-list-strut rich-menu-list-strut'},[new E('div',{'style':'', 'height':'1', 'width':'1', 'className':'dr-menu-list-strut rich-menu-list-strut'},[new T(' ')])])])]) , new E('script',{'type':'text/javascript', 'id':'frmMain:optionmenu_menu_script'},[new T('new RichFaces.Menu.Layer(\'frmMain:optionmenu_menu\',50,800).asContextMenu({\'onitemselect\':function(event){;return true;},\'oncollapse\':function(event){;return true;},\'onexpand\':function(event){;return true;},\'dummy\':\'dummy\',\'ongroupactivate\':function(event){;return true;}} ).addItem(\'frmMain:j_id181\',{\'selectStyle\':\'\',\'flagGroup\':0,\'selectClass\':\'\',\'iconClass\':\'\',\'closeOnClick\':1,\'disabled\':false} ).addItem(\'frmMain:j_id183\',{\'selectStyle\':\'\',\'flagGroup\':0,\'selectClass\':\'\',\'iconClass\':\'\',\'closeOnClick\':1,\'disabled\':false} ).addItem(\'frmMain:j_id186\',{\'selectStyle\':\'\',\'flagGroup\':0,\'selectClass\':\'\',\'iconClass\':\'\',\'closeOnClick\':1,\'disabled\':false} ).addItem(\'frmMain:j_id187\',{\'selectStyle\':\'\',\'flagGroup\':0,\'selectClass\':\'\',\'iconClass\':\'\',\'closeOnClick\':1,\'disabled\':false} ).addItem(\'frmMain:j_id188\',{\'selectStyle\':\'\',\'flagGroup\':0,\'selectClass\':\'\',\'iconClass\':\'\',\'closeOnClick\':1,\'disabled\':false} ).addItem(\'frmMain:j_id191\',{\'selectStyle\':\'\',\'flagGroup\':0,\'selectClass\':\'\',\'iconClass\':\'\',\'closeOnClick\':1,\'disabled\':false} );')]) ]);Richfaces.onAvailable('frmMain:tree',function () {var vars = {contextMenu:contextMenu};return function() { with (vars) {contextMenu.attachToElementById('frmMain:tree','oncontextmenu',{} )}}}());Richfaces.disableDefaultHandler('oncontextmenu');</script></div>
I'm not exactly sure what's going on in there - but is it needed for all of that to be duplicated everytime such a context menu is used?
Thanks for your help,
SumDude -
4. Re: Size of and content of generated HTML
nbelaevski Dec 4, 2008 11:03 AM (in response to sumdude)SumDude,
Yes, menus definitely need some cleaning: https://jira.jboss.org/jira/browse/RF-5226 -
5. Re: Size of and content of generated HTML
sumdude Dec 6, 2008 1:41 AM (in response to sumdude)Thanks nbelaevski,
I really like RichFaces for its wide variety of components and beautiful styling, but unfortunately the size of the generated response is outside the range which our client will find acceptable. I hope you guys can get that fixed, because I'd love to work with RichFaces again sometime in the future.
Thanks for the replies.