Web Experience Factory comes with many builder that use DOJO to provide a rich user experience. These builders provide with an easy way to use DOJO’s features easily within your portlets but there are times when one feels that these builders don’t quite provide what the client requires.
At times like these you may want to use JQuery within your portlets. JQuery is a lighter alternative for DOJO and offers more control over styling and UI then DOJO does.
This post discusses how you should integrate JQuery with your project. I have also provided a sample model that shows how easy it is to work with JQuery within portlet factory, you can find the download link for that model at the end of this post.
Here’s what you’ll need to do :
1) Download JQueryUI :
Visit the following link : http://jqueryui.com/download . Select the components you want to include in your download package, if required you can select a different theme from the themes dropdown or you can even create your own customized theme by clicking on “design a custom theme”. Click on download to begin downloading your customized JQuery package:
Create a new folder in the WebContent directory of your project and name it JQuery . Open the downloaded package and copy the “js” and “css” directories from it to the JQuery folder.
Now that you have the necessary files within your project , add the following spans into the head tag of all of your pages :
Now that all the required JS files have been added , we need to add the CSS required by JQuery, for that we’ll add a StyleSheet builder and keep its inputs as per the following screenshot :
Now we have all that is needed to begin working with JQuery.