How to reduce number of requests dojo makes to the server? - xpages

I am using Domino 9.0.1 with Fix Pack 5 which gives me dojo 1.9.7. In my xsp properties I have it set to use runtime optimized JavaScript and CSS resources. I was expecting this setting to greatly reduce the number of requests made to the server when loading an XPage but it only had a minimal effect.
The culprit is dojo.js - it is doing a little over 100 separate requests to the server for various .js and resource files. I assume these are coming from the various controls I am using that utilize dojo. Is there any way to consolidate these dojo requests into a single request?
UPDATE: They are just about all coming from /xsp/.ibmxspres/dojoroot-1.9.7/dijit/ and /xsp/.ibmxspres/dojoroot-1.9.7/dojo/ and also a few from /xsp/.ibmxspres/.extlib/dijit/
UPDATE:
My XSP settings:
xsp.ajax.renderwholetree=false
xsp.error.page.default=true
xsp.persistence.mode=fileex
xsp.resources.aggregate=true
xsp.user.timezone=true
xsp.html.doctype=html
xsp.theme.mobile.pagePrefix=m_
xsp.application.forcefullrefresh=true
xsp.library.depends=com.ibm.xsp.extlib.library
xsp.min.version=9.0.1
xsp.theme=vi.theme
UPDATE:
I am using a dynamicContent control which is automatically loading a custom control which contains a number of controls that use dojo. This results in the XPages engine generating a bunch of script tags with dojo.require() calls in them. These calls are causing over 100 xhr requests by dojo.js.

My solution was to include the dojo.require() calls that the XPages engine was autogenerating in my custom control in my theme using a resources tag:
<resources>
<dojoModule target="xsp" name="dojo.parser"></dojoModule>
<dojoModule target="xsp" name="extlib.dijit.DynamicContent"></dojoModule>
<dojoModule target="xsp" name="dextlib.dojo.helper.IFrameAdjuster"></dojoModule>
<dojoModule target="xsp" name="dijit.Toolbar"></dojoModule>
<dojoModule target="xsp" name="dijit.form.Button"></dojoModule>
<dojoModule target="xsp" name="extlib.dijit.Menu"></dojoModule>
<dojoModule target="xsp" name="extlib.dijit.Tabs"></dojoModule>
<dojoModule target="xsp" name="extlib.dijit.TabPane"></dojoModule>
<dojoModule target="xsp" name="dijit.form.DateTextBox"></dojoModule>
<dojoModule target="xsp" name="dijit.form.TimeTextBox"></dojoModule>
</resources>
This results in the dojo js files being aggregated. The number of requests went from 134 to 28 after doing this.

The -u in those paths indicates that it is loading the uncompressed dojo file resources. This suggests that aggregation is not enabled.
If you look at the source pane of your application's xsp properties, it should have this property xsp.resources.aggregate=true that enables the resource aggregator. And you should remove this if it's there: xsp.client.resources.uncompressed=true. They correspond to the checkboxes highlighted below:

Related

AEM 6.2 (Drag Component Here) Parsys height 0px

I am using AEM 6.2 and trying to create a parsys component in crx, using the code below
However, the height of this parsys, in edit mode, comes as 0px.
Attached are the screenshots.
When I manually change the height to some values eg. 40px, it looks fine.
Note: I am not using any client library for the above page. (no css and js)
Futher, All sample sites like geomatrix etc have parsys showing correctly.
Could anyone guide me with what I am doing wrong?
I think that the problem is outside the component or any of the code shown here.
I think what's happening is that the css style for the div that gives the droptarget placeholder its dimensions is not loading.
That's loaded as part of the AEM authoring client libraries which you should be inheriting from the foundation page component.
Examine your page component's sling:resourceSuperType property. It should point to either wcm/foundation/components/page or wcm/foundation/components/page or inherit from a component that does.
If that is set then you have may have blocked one of the scripts within it, quite possibly head.html.
Include following code in the head section of the page component's rendering script.
<!--/* Include Adobe Dynamic Tag Management libraries for the header
<sly data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" data-sly-unwrap/>
*/-->
<!--/* Initializes the Experience Manager authoring UI */-->
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>
For resolving your issue, you need to include init.jsp in the first before writing down the parsys code. I mean write like this.
<head>
<sly data-sly-include='/libs/wcm/core/components/init/init.jsp' />
</head>
<body>
<sly data-sly-resource="${'par' #resourceType='foundation/components/parsys'}" />
</body>
I think #l-klement pointed it out correctly that the problem is outside component. When I rename the landingpage.html file to body.html it starts working fine. I think this may be because of different files like head.html etc present at wcm/foundation/components/page which is required to provide proper styling and load certain required client libraries which assigns proper styling to parsys.
If the above is true, my next question would be, How can I have my own head.html, body.html, header.html, footer.html etc files without compromising with the parsys styling?

JSF to set style in stylesheets?

So I'm trying to create a webpage with customizable style for each user. You can save style options as strings in a JSF bean property and access them in inline style attributes, or <style> tags within a webpage very easily, but who uses inline/onpage styling anymore?
Is there any way to forward these properties from a JSF (2.0) bean to my stylesheet or am I required to simply add <style> blocks to the pages I wish to be customizable?
EDIT: I guess I could make a function to write these properties to a stylesheet, making one for each user, but this is obviously not preferred.
For full customization, you could save stylesheets for all the changeable elements and their style options and reference these with your bean properties.
Since that is quite a bit of stylesheets though, you could just define your own style schemes and give the users a choice between these pre-defined stylesheets. This doesn't exactly answer your question but would save a lot of work
I'm not sure exactly what your functionality is, but one option would be ->
<h:outputStylesheet library="css" name="#{userBean.styleSheetName}" />
Where the "UserBean" had names of sheets.
Alternatively you could just output the stylesheet (as you said) inbetween the style tags. If you wanted to go nuts you could write a servlet that read the user's session and generated a cached stylesheet.
I would definitely go the servlet route for the functionality you're suggesting, but if it is just a "set" of stylesheets the users have access to, I would probably use a simple dynamic property as per the first example.

Overriding default control templates - ListTitleViewSelectorMenu

I am following the example given here to override the default DocumentLibraryForm rendering template
MSDN - Override a Default Control Template
<SharePoint:RenderingTemplate ID="DocumentLibraryForm" runat="server">
... Custom stuff here ..
</SharePoint:RenderingTemplate>
(Thats the 2007 version, the 2010 version is the same but not complete, it doesn't show the directives)
And that all works just fine. There are lots of other examples on t'internet of overriding control rendering templates.
However I am trying to override things like ListTitleViewSelectorMenu and that isn't working.
<!-- Definition from allitems.aspx -->
<SharePoint:ListTitleViewSelectorMenu AlignToParent="true" id="LTViewSelectorMenu" runat="server" />
SharePoint:RenderingTemplate can only be used to override defined templates, usually in the generation of forms and list views. I dont think they can be used to replace random controls that are placed on page layouts.
I think i have tried what you are trying do, customise that view dropdown on list layout pages. I have an control that shows it sorted. The way that you replace controls is with a DelegateControl (http://msdn.microsoft.com/en-us/library/ms470880.aspx), but unfortuately ListTitleViewSelectorMenu is not wrapped by a DelegateControl in the standard list layouts. You may have to replace the entire bread crumb.

Overriding Sharepoint CSS class names in a webpart

I've been searching high and low for a satisfactory answer to this and failed. I hope StackOverflow can deliver for me!
I am using SharePoint Foundation 2010 (my first real attempt to deep dive into SharePoint), with (among other things) a custom web part; the master page for the site uses a CSS file supplied by the client and to which I must adhere. The issue I am having is that SharePoint, by adding several SharePoint specific CSS classes to the web part HTML structure, is conflicting with the client's styling. After some digging, I've found that the ms-WPBody class and its various element selectors are the chief culprits.
I could add !important to everything in the client style sheet, but that is verboten. I could insert some very messy styling into the child content of the web part in an attempt to override the SharePoint styling, which is the course I've been pursuing of late, but it's been getting messy. Or, I could try to remove the class from the web part, which brings me to my question:
How can I remove or otherwise override the CSS class names inserted into the HTML structuring for a SharePoint web part? I don't know enough of the inner workings of SharePoint to know what to hook to make this change, and my google-fu is fail on the subject. CssClass on the ASP.NET web control markup is obviously ignored, probably some holdover inherited from WebControl.
Help me StackOverflow! You're my only hope!
Edit
I apologize for not making it clear before, but I would like to state that I grok CSS and am not looking for help with styling. What I really am looking for is how to remove the CSS class emitted by SharePoint. Can anyone help there? I'm going to remove the CSS tag, since that appears to be confusing people. This question isn't really about CSS, it's about SharePoint.
CSS has to match the html that it is applied to - with generated html like that produced by SharePoint (or standard asp.net webforms for that matter) it is usually far easier to modify the css. If adding important is not an option you can usually do something using more specific selectors - ie a style defined as "table td" will override one for "td" though they actually select all the same elements. You can use this approach to undo any bits of sharepoint styling that are causign issues.
If you really want to change the classes sharepoint puts on the page, use jquery - trying to do that server side is really not something you want to get into on your first sharepoint project.
I'm not sure I follow, but why not wrap your webpart in a container div and then style to your heart's content:
<style type="text/css">
.ms-WPBody {
background-color:red;
}
#myCustomCss p
{
background-color:Blue;
}
</style>
<div class=ms-WPBody>
<div id=MyCustomCSS>
<p>Hello world</p>
</div>
</div>
In 2007, we had to worry about making sure your stylesheet was named last alphabetically so that it was applied correctly. Prefix your css file with z to see if it helps.
Here's a reference article about the issue:
http://singchan.com/2009/12/29/branding-sharepoint-2010-collaboration-sites-part-2-in-a-series/
Here's some typical Web Part HTML:
<div style=""
allowexport="false"
allowdelete="false"
class="ms-WPBody ms-wpContentDivSpace"
width="100%"
id="WebPartctl00_m_g_d0420a1c_44b7_4009_81c9_2bbcf9b325e9"
haspers="false"
webpartid="d0420a1c-44b7-4009-81c9-2bbcf9b325e9">
<div id="ctl00_m_g_d0420a1c_44b7_4009_81c9_2bbcf9b325e9">
Web Part Content goes here...
</div>
</div>
The trick is that the Web Part itself is the inner DIV (and all its children). The outer DIV (the one with the ms-WPBody class) is the WebPartZone. This control is sealed, but you can write an Adapter that will render the WebPartZone however you want. Most of the examples are for table-less rendering, you could write one that maintains the existing structure, but removes the classes.
To me, coding all of that and then registering it in the compat.browser of App_Browsers for the Web Application seems like overkill, so I'd probably go with jQuery (but if you do the Adapter, I'd love see it).
Or just add a Content Editor Web Part and override the CSS style element in the HTML:
<style type="text/css">
.ms-stylebox {
border:o important;
}
</style>
-- Peace!
how are you loading your CSS file? IF you are loading it in part of the head of your master page, or through just setting a custom.css, you can try loading it outside of the head. This should cause it to load after core.css and therefore allow you to override the standard classes as needed.

Best way to make standalone chromeless browser with nothing else

I'm making an html autorun, loading it with default browser has lots of issues, rendering inconsistencies, and more issues when it's loaded internet explorer like users has to click on allow at the top when some javascript is loaded etc. What is the best solution to create a small standalone app with just a full browser control in it which will load an html file say index.html from the application path.
That is if I have browser.exe in a cd, it will load index.html from the cd directory. The browser should be based webkit or Gecko. So far i have been using xulrunner... but its a overkill especially when the file to load is just few kbs. Its using lot of system resources.
I have experience in vb.net(but it requires the .net framework) and php on windows. And basic python, c and javascript. Where should i start and what are your suggestions?
Update:
This is meant to be a wrapper or a chromeless browser that will load the html. So the only functionality needed is autorun and load the html in full screen, thats it! So air, .net etc wont do the work. It should be an standalone exe.
As no answer for this, I will post how you can use XULRunner for this purpose.
Getting Started etc could be found here.
I'm just putting my layout code in which how I achieved a chrome less browser window that
loads my particular page for autorun purpose.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="main" title="Edusoft" hidechrome="true" sizemode="maximized" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!--This Sets the browser control and loads index.html and sets clip menu as the popup menu -->
<browser id="1" type="content" src="chrome://myapp/content/theme1/index.html" flex="1" context="clipmenu"/>
<!-- Clips menu -->
<popupset>
<menupopup id="clipmenu">
<menuitem label="Go Back" oncommand="document.getElementById('1').goBack()"/>
<menuseparator/>
<menuitem label="About" oncommand="" />
<menuseparator/>
<menuitem label="Exit" oncommand="close();" />
</menupopup>
</popupset>
</window>
This is the window that loads first when XULRunner is run. It's defined in prefs.js
Thing will be clear when you read through this.

Resources