JSF 与 HTML 标签的联系

*页面的开头

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<%@ taglib uri="http://myfaces.apache.org/extensions" prefix="x"%>

<%@ taglib uri="http://jsftutorials.net/htmLib" prefix="htm"%>

<%@ taglib uri="http://www.ccb.cn/xmdc" prefix="xmdc"%>

<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>

<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt"%>

<%@ taglib prefix="tiles" uri="http://struts.apache.org/tags-tiles"%>

<link rel="stylesheet" type="text/css"

       href="<%=request.getContextPath()%>/css/style_organ.css" />

<link rel="stylesheet" type="text/css"

       href="<%=request.getContextPath()%>/css/public.css" />

<link rel="stylesheet" type="text/css"

       href="<%=request.getContextPath()%>/css/ext.css" />

*假数据的构造

<%String str[] = new String[] { "项目名称1", "项目名称2" };

javax.faces.model.ArrayDataModel ad = new javax.faces.model.ArrayDataModel(str);

pageContext.setAttribute("ad", ad, PageContext.SESSION_SCOPE);

%>

1、inputTextarea

常用属性：cols

          Rows

常用的写法：

<h:inputTextarea value=”” rows=”8” style=”100%” />

2、inputText

   常用属性：readonly

               Size       框的大小

               Maxlength  最多字符数

     常用的写法：

<h:inputText value=”” size=”5” readonly=”true”

Maxlength=”6”

style=”color:yellow;background:Teal;” />

3、outputText

常用属性：escape   如果设置为true，会转义<、>和＆字符。默认值为false   

使用举例：

 <h:outputText value="outputtext"

         style="height:30;100%;text-align:center;" />

4、outputFormat

此标签用于tag体中指定的参来格式化组合的消息，

例如：

 <h:outputFormat value=”{0} is {1} years old!” >

 <f:param value=”Bill” />

 <f:param value=”38” />

 </h:outputFormat>

5、graphicImage

      常用例子：

          <h:graphicImage value=”/tjefferson.jpg” style=”border:thin solid black” />

           <h:graphicImage value=”/tjefferson.jpg” style=”border:0px” />

      <h:graphicImage value="../../images/fadajing.gif" />

6、commandButton

     常用属性：

         Type     

      使用举例：

     <h:panelGrid columns="2" align="center">

            <h:commandButton value="确认" action="" styleClass="button" style="margin-right:10px"/>

            <h:commandButton value="取消" action="" styleClass="button" />

</h:panelGrid>

<h:panelGrid columns="6" align="center" cellspacing="5">

       <xmdc:outputText value="请选择：" />

       <h:selectOneMenu>

              <f:selectItem itemValue="0" itemLabel="下一步" />

       </h:selectOneMenu>

       <h:commandButton value="提 交" action="" styleClass="button" />

       <h:commandButton value="确 认" action="" styleClass="button" />

       <h:commandButton value="取 消" action="" styleClass="button" />

       <h:commandButton value="撤消审批意见" onclick="javascript:cancelApproval()"

              action="" styleClass="button" />

</h:panelGrid>

7、commandLink

使用举例：

   <h:commandLink>

      〈h:outputText value=”#{msgs.linkTex}” />

   </h:commandLink>

8、outputLink

使用举例：

   <h:outputLink value=”” title=”outputLink的标题” target=”blank” >

       <h:outputText value=”” />           </h:outputLink>

   <h:outputLink value="http://www.ccb.cn">

                         <xmdc:outputText value="额度信息" bold="true" />

</h:outputLink>

9、selectBooleanCheckbox

      复选框(单个的)

      <h:selectBooleanCheckbox value=”sdfsdf” />

10、selectManyCheckbox

一组复选框

<h:selectManyCheckbox value=”#{form.colors}” >

    <f:selectItem itemValue=”红” />

    <f:selectItem itemValue=”蓝” />

    <f:selectItem itemValue=”黄” />

    <f:selectItem itemValue=”绿” />

    <f:selectItem itemValue=”橙黄” />

</h:selectManyCheckbox>

11、selectOneRadio

       单选按钮

<h:selectOneRadio>

         <f:selectItem itemValue="0" itemLabel="全体人员" />

         <f:selectItem itemValue="1" value="true" itemLabel="HR人员" />

</h:selectOneRadio>

12、selectOneListbox

  

     <h:selectOneListbox value=”#{}” size=”5” >

         <h:selectItem value=”1900” itemLabel=”1900” />

         <h:selectItem value=”1901” itemLabel=”1901” />

         <h:selectItem value=”1902” itemLabel=”1902” />

         <h:selectItem value=”1903” itemLabel=”1903” />

     </h:selectOneListbox>

13、selectManyListbox

   <h:selectManyListbox value=”#{}” size=”5” >

         <h:selectItem value=”1900” itemLabel=”1900” />

         <h:selectItem value=”1901” itemLabel=”1901” />

         <h:selectItem value=”1902” itemLabel=”1902” />

         <h:selectItem value=”1903” itemLabel=”1903” />

     </h:selectManyListbox>

14、iframe

<iframe name="main" frameborder="0" framespacing="0" scrolling="no" width="100%" src="Organview/OrganIndex.htm">

</iframe>

15、inputCalendar

<x:inputCalendar monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader"

       currentDayCellClass="currentDayCell" renderAsPopup="true" popupTodayString="Today" popupWeekString="Week" popupDateFormat="yyyyMMdd" value=""/> 

16、datatable2

<xmdc:dataTable2 value="#{ad}" var="blankstr" width="88%" columnClasses="center">

                                          <h:column>

                                                 <f:facet name="header">

                                                        <h:outputText value="姓名" />

                                                 </f:facet>

                                                 <h:outputText value="#{blankstr}" />

                                          </h:column>

                                          <h:column>

                                                 <f:facet name="header">

                                                        <h:outputText value="成绩" />

                                                 </f:facet>

                                                 <h:outputText value="" />

                                          </h:column>

                                          <h:column>

                                                 <f:facet name="header">

                                                        <h:outputText value="总体成绩" />

                                                 </f:facet>

                                                 <h:outputText value="" />

                                          </h:column>

                                          <h:column>

                                                 <f:facet name="header">

                                                        <h:outputText value="表现评语" />

                                                 </f:facet>

                                          </h:column>

       </xmdc:dataTable2>

17、表头为复杂的datatable

<%//                     些处为复杂表格    %>

              <htm:table width="650" border="1" align="center">

                     <htm:tr>

                            <htm:td height="80" width="56" rowspan="2" align="center"

                                   valign="middle" bgcolor="#f3f3f3">

                                   <h:outputText value="项目" />

                            </htm:td>

                            <htm:td colspan="5" align="center" bgcolor="#f3f3f3">

                                   <h:outputText value="中长期劳动合同员工" />

                            </htm:td>

                            <htm:td rowspan="2" align="center" width="56" bgcolor="#f3f3f3">

                                   <h:outputText value="短期劳动合同员工" />

                            </htm:td>

                            <htm:td rowspan="2" align="center" width="56" bgcolor="#f3f3f3">

                                   <h:outputText value="劳务用工" />

                            </htm:td>

                            <htm:td rowspan="2" align="center" width="56" bgcolor="#f3f3f3">

                                   <h:outputText value="审计系统人员" />

                            </htm:td>

                            <htm:td colspan="2" align="center" bgcolor="#f3f3f3">

                                   <h:outputText value="机构" />

                            </htm:td>

                     </htm:tr>

                     <htm:tr>

                            <htm:td align="center" width="56" bgcolor="#f3f3f3">

                                   <h:outputText value="总计" />

                            </htm:td>

                            <htm:td align="center" bgcolor="#f3f3f3">

                                   <h:outputText value="一级分行行领导或总行本部部门领导" />

                            </htm:td>

                            <htm:td align="center" bgcolor="#f3f3f3">

                                   <h:outputText value="六、七职等管理岗位职务人员" />

                            </htm:td>

                            <htm:td align="center" bgcolor="#f3f3f3">

                                   <h:outputText value="三、四级专业技术岗位职务人员" />

                            </htm:td>

                            <htm:td align="center" width="56" bgcolor="#f3f3f3">

                                   <h:outputText value="党员" />

                            </htm:td>

                            <htm:td align="center" width="56" bgcolor="#f3f3f3">

                                   <h:outputText value="总计" />

                            </htm:td>

                            <htm:td align="center" width="56" bgcolor="#f3f3f3">

                                   <h:outputText value="其中:营业机构" />

                            </htm:td>

                     </htm:tr>

              </htm:table>

<%//                     些处为复杂表格 end    %>

              <xmdc:dataTable2 value="#{ad}" var="blankstr" width="650"

                     columnClasses="center" align="center">

                     <h:column>

                            <h:outputText escape="false" value="#{blankstr}" />

                     </h:column>

                     <h:column>

                            <h:outputText escape="false" value="#{blankstr}" />

                     </h:column>

                     <h:column>

                            <h:outputText escape="false" value="#{blankstr}" />

                     </h:column>

                     <h:column>

                            <h:outputText escape="false" value="#{blankstr}" />

                     </h:column>

                     <h:column>

                            <h:outputText escape="false" value="#{blankstr}" />

                     </h:column>

                     <h:column>

                            <h:outputText escape="false" value="#{blankstr}" />

                     </h:column>

                     <h:column>

                            <h:outputText escape="false" value="#{blankstr}" />

                     </h:column>

                     <h:column>

                            <h:outputText escape="false" value="#{blankstr}" />

                     </h:column>

                     <h:column>

                            <h:outputText escape="false" value="#{blankstr}" />

                     </h:column>

                     <h:column>

                            <h:outputText escape="false" value="#{blankstr}" />

                     </h:column>

                     <h:column>

                            <h:outputText escape="false" value="#{blankstr}" />

                     </h:column>

              </xmdc:dataTable2>

18、HRDC的datatable

<h:dataTable width="95%" align="center" border="1" value="" var="" rowClasses="td01,td02,td02,td02,td02,td02">

       <h:column>

              <f:facet name="header">

                     <xmdc:outputText value="" />

              </f:facet>

              <h:selectOneRadio>

              </h:selectOneRadio>

       </h:column>

       <h:column>

              <f:facet name="header">

                     <xmdc:outputText value="序号" />

              </f:facet>

              <h:outputText value="" />

       </h:column>

       <h:column>

              <f:facet name="header">

                     <xmdc:outputText value="客户编号" />

              </f:facet>

              <h:inputText value="" />

       </h:column>

       <h:column>

              <f:facet name="header">

                     <xmdc:outputText value="合同编号" />

              </f:facet>

              <h:outputText value="" />

       </h:column>

       <h:column>

              <f:facet name="header">

                     <xmdc:outputText value="客户名称" />

              </f:facet>

              <h:outputText value="" />

       </h:column>

       <h:column>

              <f:facet name="header">

                     <xmdc:outputText value="合同品种" />

              </f:facet>

              <h:outputText value="" />

       </h:column>

       <h:column>

              <f:facet name="header">

                     <xmdc:outputText value="合同币种" />

              </f:facet>

              <h:outputText value="" />

       </h:column>

       <h:column>

              <f:facet name="header">

                     <xmdc:outputText value="表内余额" />

              </f:facet>

              <h:outputText value="" />

       </h:column>

       <h:column>

              <f:facet name="header">

                     <xmdc:outputText value="表外余额" />

              </f:facet>

              <h:outputText value="" />

       </h:column>

       <h:column>

              <f:facet name="header">

                     <xmdc:outputText value="五级分类"></xmdc:outputText>

              </f:facet>

              <h:outputText value="" />

       </h:column>

       <h:column>

              <f:facet name="header">

                     <xmdc:outputText value="状态"></xmdc:outputText>

              </f:facet>

              <h:outputText value="" />

       </h:column>

       <h:column>

              <f:facet name="header">

                     <xmdc:outputText value="经办机构"></xmdc:outputText>

              </f:facet>

              <h:outputText value="" />

       </h:column>

       <h:column>

              <f:facet name="header">

                     <xmdc:outputText value="授信支用详情"></xmdc:outputText>

              </f:facet>

              <h:outputLink value="">

                     <xmdc:outputText value="x001"></xmdc:outputText>

              </h:outputLink>

       </h:column>

</h:dataTable>

19、panelGrid

 

       <xmdc:panelGrid columns="4" align="center" width="100%" border="1"

              columnbgcolors="#F3F3F3,#FFFFFF,#F3F3F3,#FFFFFF"

              columnwidths="20%,30%,20%,30%"

               rowheights="22,22,22,22,22"

              columnbgcolors="#F3F3F3,#ffffff,#F3F3F3,#ffffff"

              columnaligns="left,center,right"

              columnvaligns="top,top,"

        colspan=”;2,2;2;3,1;”

              >

              <xmdc:outputText value="债项批复编号" />

              <xmdc:outputText value="" />

              <xmdc:outputText value="合同编号" />

              <xmdc:outputText value="" />

              <xmdc:outputText value="期限" />

              <xmdc:outputText value="" />

              <xmdc:outputText value="合同性质" />

              <xmdc:outputText value="" />

       </xmdc:panelGrid>

20、selectOneMenu

<h:selectOneMenu>

       <f:selectItem itemValue="0" itemLabel="新增" />

       <f:selectItem itemValue="1" itemLabel="借新还旧" />

       <f:selectItem itemValue="2" itemLabel="债务转移(签定新合同)" />

       <f:selectItem itemValue="3" itemLabel="整体债务转移" />

       <f:selectItem itemValue="4" itemLabel="展期" />

       <f:selectItem itemValue="5" itemLabel="担保变更" />

       <f:selectItem itemValue="6" itemLabel="信用证修改" />

       <f:selectItem itemValue="7" itemLabel="保函修改" />

       <f:selectItem itemValue="8" itemLabel="资产转让(买断型受让)" />

</h:selectOneMenu>

21、标签页面：multlink

<%//顶部标签%>

              <xmdc:multlink value="1" paneLable="一般客户,集团客户"s            paneLink="CreditineLedgerInfoQuery_Gen.jsf,CreditineLedgerInfoQuery_Gen.jsf"

                     align="left" />

22、页面弹出(按钮)

<h:commandButton type=”button” onclick=openWindow('examine_approve/2.jsf’,

800,320,100,100)” value=”选择下一个审批人” styleClass=”button” />

23、分页的代码

<xmdc:panelGrid columns="1" align="center" rendered="#{customerMagnifierBackingBean.flag}">

              <xmdc:panelGrid columns="2" align="center" columnaligns="center,center" columnvaligns="middle,middle">

                     <x:dataScroller id="scroll_1" for="userdata" fastStep="10" pageCountVar="pageCount" pageIndexVar="pageIndex" paginator="false" paginatorMaxPages="0" rowsCountVar="rowsCount" displayedRowsCountVar="displayedRowsCountVar" firstRowIndexVar="firstRowIndex"

                            lastRowIndexVar="lastRowIndex" style="display:inline" actionListener="#{customerMagnifierBackingBean.scrollerAction}">

                            <f:facet name="first">

                                   <h:outputText value="首页" />

                            </f:facet>

                            <f:facet name="last">

                                   <h:outputText value="尾页" />

                            </f:facet>

                            <f:facet name="previous">

                                   <h:outputText value="上一页" />

                            </f:facet>

                            <f:facet name="next">

                                   <h:outputText value="下一页" />

                            </f:facet>

                     </x:dataScroller>

                     <x:dataScroller id="scroll_2" for="userdata" rowsCountVar="rowsCount" displayedRowsCountVar="displayedRowsCountVar" firstRowIndexVar="firstRowIndex" lastRowIndexVar="lastRowIndex" pageCountVar="pageCount" pageIndexVar="pageIndex">

                            <h:outputFormat id="outputFormat" value="一共找到{0}条记录，第{1}页/共{2}页" style="display:inline">

                                   <f:param value="#{rowsCount}" />

                                   <f:param value="#{pageIndex}" />

                                   <f:param value="#{pageCount}" />

                            </h:outputFormat>

                     </x:dataScroller>

              </xmdc:panelGrid>

       </xmdc:panelGrid>

24、上传下载

文档上传必须统一使用myfaces控件，不得使用其他上传方法。

界面：

<x:inputFileUpload value="#{creditLimitApplicationSchemeBackingBean.myFile}" storage="file" required="true"></x:inputFileUpload>

Backingbean：

InputStream inputStream = new BufferedInputStream(myFile.getInputStream());

下载必须采用Basebackingbean的downLoadFile方法：

/**

   * 文件下载

   * @param object FileInputStream或ByteArrayOutputStream

   * @param FileName 文件名

   * @param contenttype 下载类型

   */

  public void downLoadFile(Object object,String fileName,String contenttype)

界面主要是一个动作对应后台一个方法

Backingbean调用如下方法：

例如：

        public String downloadExcel()

        {

                 String contentType = "application/vnd.ms-excel";

                // 获得Excel文件流(可能是输出流，也可能是输入流)

                object = IBizApplicationUCC.downloadExcel(bizId)

                // 生成默认文件名

               defaultFileName = 文档类型代码.业务申报书 + BriefBizTaskVO.bizEventNumber

                //弹出窗口给界面下载

                downLoadFile(Object object,String defaultFileName ,String contenttype)

                return null;

        }