JSF+HTML标签总结

现在的位置: 首页 > 综合 > 正文

JSF+HTML标签总结

2013年08月23日 ⁄ 综合 ⁄ 共 12764字 ⁄ 字号小中大 ⁄ 评论关闭

*页面的开头
<%@ 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=”width: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;width:100%;text-align:center;background-color:#DDDDDD;" />

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>
  </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;
}

【上篇】使用批处理启动及关闭SAP MMC for ECC6
【下篇】VC2008 vs VC6之CToolBar

作者: landfill

该日志由 landfill 于11年前发表在综合分类下，最后更新于 2013年08月23日.
转载请注明: JSF+HTML标签总结 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

JSF+HTML标签总结

作者: landfill

书签

最新文章New

本站推荐

返回首页