As we know struts2-jquery-plugin provide support for AJAX and UI widgets to struts2. It is based on the jQuery javascript framework. Struts2-jquery-plugin has built in support for themes. If you want to use built-in theme you can use like this:
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head jqueryui="true" jquerytheme="cupertino"/>
</head>
<body>
</body>
</html>
Above code using cupertino built-in theme from plugin.
Lets see where built-in themes resides. Expand struts2-jquer-plugin-x.x.x.jar in your IDE, you will find cupertino theme.Here is the directory strusture.
But if you want to use own theme or want to change existing theme (Here i am changing cupertino theme ). There are two ways to do this.
Method 1:
1. Make directory structure, in web content folder of your project , like this:
2. Extract the struts2-jquer-plugin-x.x.x.jar and go to struts2-jquery-plugin-x.x.x -> template -> themes -> cupertino -> images ,copy all images to images folder (template -> themes -> mytheme -> images) of your theme. Copy and paste jquery-ui.css (struts2-jquery-plugin-x.x.x -> template -> themes -> cupertino ->jquery-ui.css) to mytheme folder. Change jquery-ui.css accordingly.
3. Use this mytheme in your jsp page like this:
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head jqueryui="true" jquerytheme="mytheme" customBasepath="template/themes"/>
head>
<body>
body>
html>
OR
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<s:url var="context" value="/" />
<sj:head locale="de" jqueryui="true" jquerytheme="mytheme" customBasepath="%{context}template/themes"/>
head>
<body>
body>
html>
Method 2:
Create and Download your own Theme with jQuery ThemeRoller
1. Create a folder in your WebRoot path template/themes/mytheme
2. Extract downloaded theme and go to the css folder
3. Rename jquery-ui-x.x.x.custom.css to jquery-ui.css
4. Copy jquery-ui.css and images folder into the template/themes/mytheme folder
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<s:url var="context" value="/" />
<sj:head locale="de" jqueryui="true" jquerytheme="mytheme" customBasepath="%{context}template/themes"/>
head>
<body>
body>
html>
References :
1. http://code.google.com/p/struts2-jquery/
2. http://code.google.com/p/struts2-jquery/wiki/HeadTag
Thank you vary much for this simple and helpful tutorial....
ReplyDeleteHey,
ReplyDeleteI wanted to inject select (Please Select) option in select tags where ever it is optional field.Should i use a custom theme for that
Thanks