Struts-Layout
Struts-Layout 是我从 Open Source 上了解到的 project，对它的 introduction 充满 surprise.它是一个用在Struts的tag库.这个强大的tag库可以用来display面板(panels),input框,table,treeviews,sortable lists,datagrids,popups,calendar等.使用这些tag可以不用写HTML code,甚至可以不用know HTML. Now,let me introduce 给你吧:
First of All，需要几个支持包 commons-logging-1.0.4.jar、commons-collections-3.1.jar、uitags-main-1.0.0-nonfinal5.jar、velocity-dep-1.4.jar、jstl-1.1.1.jar、standard-1.1.1.jar.
Second，config web.xml :
以上配置看你的需要而定，这里我做如下配置。
Last,test page:
First of All，需要几个支持包 commons-logging-1.0.4.jar、commons-collections-3.1.jar、uitags-main-1.0.0-nonfinal5.jar、velocity-dep-1.4.jar、jstl-1.1.1.jar、standard-1.1.1.jar.
Second，config web.xml :
<servlet> <servlet-name>uitags.js</servlet-name> <servlet-class> net.sf.uitags.js.JsProviderServlet </servlet-class> </servlet> <servlet> <servlet-name>comboDatePicker.js</servlet-name> <servlet-class> net.sf.uitags.js.JsProviderServlet </servlet-class> <init-param> <param-name>suites</param-name> <param-value>core,calendar,panel</param-value> </init-param> </servlet> <servlet> <servlet-name>comboOptionTransfer.js</servlet-name> <servlet-class> net.sf.uitags.js.JsProviderServlet </servlet-class> <init-param> <param-name>suites</param-name> <param-value> core,optionTransfer,shift,sort,search </param-value> </init-param> </servlet> <servlet> <servlet-name>uitagsDebug.js</servlet-name> <servlet-class> net.sf.uitags.js.JsProviderServlet </servlet-class> <init-param> <param-name>directory</param-name> <param-value>/js</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet> <servlet-name>countryListAjaxServlet</servlet-name> <servlet-class> net.sf.uitags.ajax.CountryListAjaxServlet </servlet-class> </servlet> <servlet-mapping> <servlet-name>uitags.js</servlet-name> <url-pattern>/uitags.js</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>comboDatePicker.js</servlet-name> <url-pattern>/comboDatePicker.js</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>comboOptionTransfer.js</servlet-name> <url-pattern>/comboOptionTransfer.js</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>uitagsDebug.js</servlet-name> <url-pattern>/uitagsDebug.js</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>countryListAjaxServlet</servlet-name> <url-pattern>/countryListAjaxServlet</url-pattern> </servlet-mapping>
以上配置看你的需要而定，这里我做如下配置。
Last,test page:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- import package -->
<%@ taglib prefix="uic" uri="http://uitags.sf.net/uitags"%>
<%@ page pageEncoding="gb2312"%>
<%
request.setAttribute("commonJs", "/uitags.js");
request.setAttribute("comboOptionTransferJs",
"/comboOptionTransfer.js");
%>
<html>
<script type="text/javascript"
src="<c:url value="${requestScope.commonJs}" />"></script>
<body>
<div>
<form action="">
<h3>
显示、移除或者隐藏效果
</h3>
<table>
<tr>
<th colspan="2">
Postal Address
</th>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id="removePostalSection" value="true" />
<label for="removePostalSection">
Same as residential (REMOVE)
</label>
<input type="checkbox" id="hidePostalSection" value="true"
style="margin-left: 50px;" />
<label for="hidePostalSection">
Same as residential (DISABLE)
</label>
</td>
</tr>
<tr>
<td>
<label id="postalAddressLabel">
Address:
</label>
</td>
<td>
<input type="text" name="postalAddress" />
</td>
</tr>
<tr>
<td>
<label id="postalCountryLabel">
Country:
</label>
</td>
<td>
<select name="postalCountry">
<option>
Afghanistan
</option>
</select>
</td>
</tr>
</table>
<!--使用标签-->
<uic:formGuide>
<uic:observe elementId="removePostalSection" forValue="true" />
<uic:remove elementId="postalAddressLabel" />
<uic:remove elementId="postalCountryLabel" />
<uic:remove elementName="postalAddress" />
<uic:remove elementName="postalCountry" />
</uic:formGuide>
<uic:formGuide>
<uic:observe elementId="hidePostalSection" forValue="true" />
<uic:disable elementId="postalAddressLabel" />
<uic:disable elementId="postalCountryLabel" />
<uic:disable elementName="postalAddress" />
<uic:disable elementName="postalCountry" />
</uic:formGuide>
<h3>
Observing a Checkbox Group
</h3>
<div>
<input type="checkbox" id="termsAccepted" name="accepted"
value="terms" />
<label for="termsAccepted">
I accept the terms and conditions.
</label>
</div>
<div>
<input type="checkbox" id="licenceAgreementAccepted"
name="accepted" value="licenceAgreement" />
<label for="licenceAgreementAccepted">
I accept the licence agreement.
</label>
</div>
<input type="submit" value="Download" name="download" />
<!--使用标签-->
<uic:formGuide>
<uic:observe elementName="accepted" forValue="terms" />
<uic:observe elementName="accepted" forValue="licenceAgreement" />
<uic:enable elementName="download" />
</uic:formGuide>
<h3>
Observing a Radio Group
</h3>
<table>
<tr>
<td colspan="3">
Search for:
</td>
</tr>
<tr>
<td>
<input type="radio" name="searchFor" value="keywords"
checked="checked" />
Keywords:
</td>
<td>
<input type="text" name="keywords" />
</td>
<td>
<input type="submit" id="keywordsSearchSubmit" value="Search" />
</td>
</tr>
<tr>
<td>
<input type="radio" name="searchFor" value="author" />
Author:
</td>
<td>
<input type="text" name="author" />
</td>
<td>
<input type="submit" id="authorSearchSubmit" value="Search" />
</td>
</tr>
</table>
<!--使用标签-->
<uic:formGuide>
<uic:observe elementName="searchFor" forValue="keywords" />
<uic:disable elementName="author" />
<uic:disable elementId="authorSearchSubmit" />
</uic:formGuide>
<uic:formGuide>
<uic:observe elementName="searchFor" forValue="author" />
<uic:disable elementName="keywords" />
<uic:disable elementId="keywordsSearchSubmit" />
</uic:formGuide>
<h3>
Observing a Select Box
</h3>
<div>
Your favorite programming language:
<select name="favoriteLanguage">
<option value="1" selected="selected">
Java
</option>
<option value="2">
C
</option>
<option value="-1">
Other - specify
</option>
</select>
<input type="text" id="specifiedFavoriteLanguage"
name="specifiedFavoriteLanguage" />
</div>
<!--使用标签-->
<uic:formGuide>
<uic:observe elementName="favoriteLanguage" forValue="-1" />
<uic:enable elementId="specifiedFavoriteLanguage" />
</uic:formGuide>
<h3>
Observing for an Empty Select Box
</h3>
<div>
<div>
Selecting at least one option will enable the clear button.
</div>
<select id="clearTarget" multiple="multiple" size="4">
<option>
Selecting any
</option>
<option>
of these will
</option>
<option>
enable the
</option>
<option>
Clear button
</option>
</select>
</div>
<input type="button" value="Clear" id="clearTrigger" />
<!--使用标签-->
<uic:select type="none" injectTo="clearTrigger"
applyTo="clearTarget" />
<uic:formGuide>
<uic:observeForNull elementId="clearTarget" />
<uic:disable elementId="clearTrigger" />
</uic:formGuide>
</form>
</div>
</body>
</html>