ShowTable of Contents
This article along the attached samples provide a simple introduction to using manually coded jQuery user interfaces with IBM Web Experience Factory.
This particular article is intended for experienced jQuery developers who are looking for information on leveraging that existing jQuery expertise with Web Experience Factory applications. As such, it does not go into where to get jQuery or where to start with jQuery development. There are many existing resources on the internet, including some mentioned in the references below, that provide such introductions to jQuery.
What about Dojo?
This community wiki article is intended to provide the reader with more information about how they may customize use of the Web Experience Factory product, via integration with 3rd party or open source user interface toolkits. No endorsement of any specific 3rd party or open source toolkit by IBM is intended by the text of this document and likewise no endorsement of Web Experience Factory by any mentioned 3rd party or open source toolkit is intended or implied. There is no guarantee implied in this article, by IBM or the author, as to the suitability or support-ability of integration with any particular 3rd party or open source user interface toolkit Any opinions expressed in this article are solely opinions of the author and do not necessarily represent the positions, strategies or opinions of IBM.
This article suggests ways to leverage particular open source software obtainable and/or reference-able on the internet from Web Experience Factory, but makes no claims as to the appropriateness of the licenses or copyrights of such open source software for any particular use. Please verify that the licenses and copyrights of all software obtained and leveraged in your applications allow such use and are acceptable to your organization prior to any such use.
The Simple Samples
This community wiki article is intended to provide the reader with more information about how they may customize use of the Web Experience Factory product, via integration with 3rd party or open source user interface As stated above, this introductory sample (to jQuery use with Web Experience Factory) is intentionally over-simplified, to focus on the builders used when integrating an HTML via jQuery UI with Web Experience Factory. There will be follow-on articles that describe jQuery UI integration with Web Experience Factory data service operations.
Setup the Samples
- Create a Web Experience Factory project in the Eclipse based Designer. Follow the "Creating a Project" tutorial provided with the product, if this is your first introduction to the tool.
- Use the Eclipse project menu "Import" -> Web Experience Factory Archive menu action, to import the attached sample archive into your project.
- This will import two simple jQuery sample models into your project in a folder named WebContent/WEB-INF/models/samples/jquery/aSimplePage/
- and associated HTML files into your project under WebContent/samples/jquery/aSimplePage/
- Obtain a copy of, or URL references to a copy of, jQuery and jQuery-UI, including the CSS for jQuery-UI. This article and sample assumes that the target audience, being existing jQuery experts, will have knowledge of how/where to obtain the version of jQuery, jQuery-UI and related plugins.
- The samples were built with jQuery 1.10.x but may work as is with other recent versions of jQuery. Again, the primary point of the sample is to introduce which builders to use, if you choose to use jQuery not to recommend jQuery over any other UI mechanism or any specific version.
- As provided, the sample requires that you place a copy of jQuery core as jquery.min.js, jQuery-UI as jquery-ui.min.js and jQuery-UI CSS as jquery-ui.css in a folder called jquery within your WEF project's WebContent folder.
- Note - you should also copy the jQuery UI images subtree into this same location, if using a local copy of jquery-ui.css
- In both of these samples, a fictitious developer has an HTML page that has grown to more than is appropriate to show at once within an application page and wishes to show and hide portions at a time (in the browser without making additional requests to the server) based on user-interaction with UI controls.
- The first sample ( jQuerySimplePageAccordion ) applies a jQuery-UI based Accordion widget to a named (via id attribute) section of the page, containing multiple html child elements that should be shown one at a time based on which accordion section is currently selected.
- The second sample ( jQuerySimplePageTabs ) applies a jQuery-UI Tab widget to a named (via id attribute) section of the page, containing multiple html child elements that should be shown one at a time based on which tab is selected.
Explore the Samples
- Open both the sample models and both of the HTML pages in the Eclipse based Web Experience Factory designer and explore the contents of the pages and the builder calls
- As mentioned above, these are extremely over-simplified samples and not a full blown application, and as such have only a minimal set of builder calls in them.
- Builder calls 1 and 2 are Comments, containing a copyright and sample disclaimers
- Builder call 3 is an Action List called "main" which will be executed when the model is run via browser, which just dispatches to a page called "page1".
- Builder call 4 is an Imported Page builder which imports the associated HTML page from "samples/jquery/aSimplePage/" from the project in designer and from the deployed application WAR on the server.
- Builder calls 6, 7 and 8 add references to jQuery, jQuery-UI and jQuery-UI CSS to the page
- NOTE: As mentioned previously, Portal Pages should be pulling in jQuery core, jQuery-UI and related plugins when leveraging jQuery as portlets, each portlet should NOT try to load jQuery itself, so these last 3 builder calls should be disabled or deleted when running this or similar Web Experience Factory applications as portlets in a portal page which loads jQuery itself.
- For standalone (non-portlet) web applications, where the application itself (as opposed to a portal page) is pulling in jQuery, these 3 builder calls could be modified to point to where your organization loads jQuery and related stylesheets from.
- Use "Imported Page" to import an html file from the project for use in the application.
- Use the "Style Sheet" builder to add a link reference to a stylesheet, to the application page.
- Load jQuery, jQuery-UI and any commonly used plugins in the Portal Page when building portlet applications rather than loading those artifacts from a portlet.
Since this article is targeted at developers that are already experts in some 3rd party or open source UI toolkit such as jQuery, iit is likely that you are already familiar with jQuery or the toolkit you're choosing to use instead of the rich web UI automation WEF provides out of the box. If you are not already an expert in some other UI framework, you may want to stick with what WEF provides and automated for you, based on HTML, HTMl5, CSS, Dojo etc. These references are provided solely as a reminder of some useful resources out there, and may not be a complete or accurate list of what you need to get started with and become an expert in any particular UI toolkit or framework.
- Web Experience Factory Community Blog - contains multiple blog postings describing what others have done to replace or extend the user interfaces generated out of the box by Web Experience Factory, with 3rd party toolkits