📄 stylesheet.jsp
字号:
<%-- tpl:insert page="/template/jsfTemplate.jtpl" --%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://www.ibm.com/jsf/html_extended" prefix="hx"%>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM Software Development Platform">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="../theme/Master.css" rel="stylesheet" type="text/css">
<LINK href="../theme/new.css" rel="stylesheet">
<LINK rel="stylesheet" type="text/css" href="../theme/stylesheet.css" title="Style">
<%-- tpl:put name="headarea" --%>
<title>styleSheet.jsp</title>
<LINK rel="stylesheet" type="text/css" href="../theme/sample.css" title="Style">
<%-- /tpl:put --%>
<LINK rel="stylesheet" type="text/css" href="/JSFandSDO/theme/stylesheet.css" title="Style">
</HEAD>
<f:view>
<BODY>
<TABLE class="title" cellpadding="0">
<TBODY>
<TR>
<TD class="noBorder" background="../images/gradient.jpg"
align="CENTER"><IMG border="0" src="../images/title.jpg"></TD>
</TR>
<TR>
<TD class="noBorder" align="RIGHT"><A href="/JSFandSDO">Return to Main Menu</A></TD>
</TR>
</TBODY>
</TABLE>
<%-- tpl:put name="bodyarea" --%>
<hx:scriptCollector id="scriptCollector1">
<h:form styleClass="form" id="form1">
<H2>Using Cascading Style Sheets</H2>This page contains JSF components assigned various style classes to alter their look and feel without having to alter any backend or JSF code. Every JSF component has an attribute called "styleClass" which can be bound to a style class contained within cascading style sheets (CSS). The style class can be assigned in the Properties view of each component.<BR>
<BR>A data table can be bound to multiple row classes, column classes, and one header and footer class.
When you bind a table to multiple row classes the classes are assigned to each row in alternating order. In this example the "Style 2" table has two row classes assigned and the rows alternate in color. To see where the style classes are assigned view the Display Options in the data table's properties view. When a page is generated at runtime, CSS classes assigned to the row classes are outputed in the <TR> tags and CSS classes assigned to the column classes are outputed in the <TD> tags.<BR>
<BR>
<TABLE border="1">
<TBODY>
<TR>
<TD align="center">Style 1</TD>
<TD align="center">Style 2</TD>
</TR>
<TR>
<TD align="center"><h:dataTable id="table1" value="#{pc_StyleSheet.employee.employees}" var="varemployees" styleClass="dataTable" headerClass="headerClass1" footerClass="footerClass" rowClasses="rowClass11" columnClasses="columnClass1" border="0" cellpadding="4" cellspacing="0">
<h:column id="column1">
<f:facet name="header">
<h:outputText styleClass="outputText" value="Department" id="text1"></h:outputText>
</f:facet>
<h:outputText id="text2" value="#{varemployees.department}" styleClass="outputText">
</h:outputText>
</h:column>
<h:column id="column2">
<f:facet name="header">
<h:outputText styleClass="outputText" value="Id" id="text3"></h:outputText>
</f:facet>
<h:outputText id="text4" value="#{varemployees.id}" styleClass="outputText">
</h:outputText>
</h:column>
<h:column id="column3">
<f:facet name="header">
<h:outputText styleClass="outputText" value="Name" id="text5"></h:outputText>
</f:facet>
<h:outputText id="text6" value="#{varemployees.name}" styleClass="outputText">
</h:outputText>
</h:column>
</h:dataTable></TD>
<TD align="center"><h:dataTable id="table2" value="#{pc_StyleSheet.employee.employees}" var="varemployees" styleClass="dataTable" headerClass="headerClass2" footerClass="footerClass" rowClasses="rowClass12, rowClass22" border="0" cellpadding="4" cellspacing="0" columnClasses="colClass1">
<h:column id="column4">
<f:facet name="header">
<h:outputText styleClass="outputText" value="Department" id="text8"></h:outputText>
</f:facet>
<h:outputText id="text12" value="#{varemployees.department}" styleClass="outputText">
</h:outputText>
</h:column>
<h:column id="column5">
<f:facet name="header">
<h:outputText styleClass="outputText" value="Id" id="text13"></h:outputText>
</f:facet>
<h:outputText id="text14" value="#{varemployees.id}" styleClass="outputText">
</h:outputText>
</h:column>
<h:column id="column6">
<f:facet name="header">
<h:outputText styleClass="outputText" value="Name" id="text15"></h:outputText>
</f:facet>
<h:outputText id="text16" value="#{varemployees.name}" styleClass="outputText">
</h:outputText>
</h:column>
</h:dataTable></TD>
</TR>
</TBODY>
</TABLE>
<BR>Here various JSF components are shown with different style classes assigned to each.
<BR>
<TABLE border="1">
<TBODY>
<TR>
<TD colspan="3" align="center"><B>Input Boxes</B></TD>
</TR>
<TR>
<TD align="center">inputText</TD>
<TD align="center">inputText2</TD>
<TD align="center">inputText3</TD>
</TR>
<TR>
<TD><h:inputText styleClass="inputText" id="text7"></h:inputText></TD>
<TD><h:inputText styleClass="inputText2" id="text10"></h:inputText></TD>
<TD><h:inputText styleClass="inputText3" id="text11"></h:inputText></TD>
</TR>
<TR>
<TD colspan="3" align="center"><B>Check Box Group</B></TD>
</TR>
<TR>
<TD align="center">selectManyCheckbox</TD>
<TD align="center">selectManyCheckBox2</TD>
<TD align="center">selectManyCheckBox3</TD>
</TR>
<TR>
<TD align="center"><h:selectManyCheckbox disabledClass="selectManyCheckbox_Disabled" styleClass="selectManyCheckbox" id="checkbox1">
<f:selectItem itemValue="Yes" itemLabel="Yes" />
<f:selectItem itemValue="No" itemLabel="No" />
</h:selectManyCheckbox></TD>
<TD align="center"><h:selectManyCheckbox disabledClass="selectManyCheckbox_Disabled" styleClass="selectManyCheckbox2" id="checkbox2">
<f:selectItem itemValue="Yes" itemLabel="Yes" />
<f:selectItem itemValue="No" itemLabel="No" />
</h:selectManyCheckbox></TD>
<TD align="center"><h:selectManyCheckbox disabledClass="selectManyCheckbox_Disabled" styleClass="selectManyCheckbox3" id="checkbox3">
<f:selectItem itemValue="Yes" itemLabel="Yes" />
<f:selectItem itemValue="No" itemLabel="No" />
</h:selectManyCheckbox></TD>
</TR>
<TR>
<TD align="center" colspan="3"><B>Command-Button</B></TD>
</TR>
<TR>
<TD align="center">commandExButton</TD>
<TD align="center">commandExButton2</TD>
<TD align="center">commandExButton3</TD>
</TR>
<TR>
<TD align="center"><hx:commandExButton type="submit" value="Submit" styleClass="commandExButton" id="button1"></hx:commandExButton></TD>
<TD align="center"><hx:commandExButton type="submit" value="Submit" styleClass="commandExButton2" id="button2"></hx:commandExButton></TD>
<TD align="center"><hx:commandExButton type="submit" value="Submit" styleClass="commandExButton3" id="button3"></hx:commandExButton></TD>
</TR>
</TBODY>
</TABLE>
<H4>Files of Interest:</H4>
<UL>
<LI><B>WebContent/styleSheet/styleSheet.jsp</B> - (This Page) Where the JSF components are added to the page and style classes are assigned.</LI>
<LI><B>WebContent/theme/sample.css -</B> The style sheet used for this page. Feel free to alter the style classes in this file to see their affects on this page.</LI>
<LI><B>src/pagecode.styleSheet.StyleSheet.java</B> - The Page Code file.</LI>
</UL>
</h:form>
</hx:scriptCollector>
<%-- /tpl:put --%>
<TABLE class="title" cellpadding="0">
<TBODY>
<TR>
<TD class="noBorder" align="RIGHT"><A href="/JSFandSDO">Return to Main Menu</A></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</f:view>
</HTML><%-- /tpl:insert --%>
<%-- jsf:pagecode language="java" location="/src/pagecode/styleSheet/StyleSheet.java" --%><%-- /jsf:pagecode --%>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -