Ana*_*oli 23 grid jsf alignment composite-component jsf-2
我在panelGrids中有很多outputLabel和inputText对
<h:panelGrid columns="2">
<h:outputLabel value="label1" for="inputId1"/>
<h:inputText id="inputId1/>
<h:outputLabel value="label2" for="inputId2"/>
<h:inputText id="inputId2/>
...
</h:panelGrid>
Run Code Online (Sandbox Code Playgroud)
我希望所有这些都有一些行为:比如每个inputText的相同验证或相同大小.所以我创建了一个复合组件,它只包含一个outputLabel和一个inputText
<my:editField value="field1"/>
<my:editField value="field2"/>
Run Code Online (Sandbox Code Playgroud)
但是现在当我将它们放在gridPanel中时,根据标签文本的长度,它们不会对齐.我理解为什么,但我不知道如何解决.
Bal*_*usC 44
复合组件确实呈现为单个组件.您想要使用Facelet标记文件.它的呈现方式与输出呈现的内容完全相同.这是一个启动示例,假设您需要一个包含第三列中的消息字段的3列表单.
创建标记文件/WEB-INF/tags/input.xhtml
(或者/META-INF
当您想要在要包含的JAR文件中提供标记时/WEB-INF/lib
).
<ui:composition
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<c:set var="id" value="#{not empty id ? id : (not empty property ? property : action)}" />
<c:set var="required" value="#{not empty required and required}" />
<c:choose>
<c:when test="#{type != 'submit'}">
<h:outputLabel for="#{id}" value="#{label} #{required ? '* ' : ''}" />
</c:when>
<c:otherwise>
<h:panelGroup />
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="#{type == 'text'}">
<h:inputText id="#{id}" value="#{bean[property]}" label="#{label}" required="#{required}">
<f:ajax event="blur" render="#{id}-message" />
</h:inputText>
<h:message id="#{id}-message" for="#{id}" />
</c:when>
<c:when test="#{type == 'password'}">
<h:inputSecret id="#{id}" value="#{bean[property]}" label="#{label}" required="#{required}">
<f:ajax event="blur" render="#{id}-message" />
</h:inputSecret>
<h:message id="#{id}-message" for="#{id}" />
</c:when>
<c:when test="#{type == 'select'}">
<h:selectOneMenu id="#{id}" value="#{bean[property]}" label="#{label}" required="#{required}">
<f:selectItems value="#{options.entrySet()}" var="entry" itemValue="#{entry.key}" itemLabel="#{entry.value}" />
<f:ajax event="change" render="#{id}-message" />
</h:selectOneMenu>
<h:message id="#{id}-message" for="#{id}" />
</c:when>
<c:when test="#{type == 'submit'}">
<h:commandButton id="#{id}" value="#{label}" action="#{bean[action]}" />
<h:message id="#{id}-message" for="#{id}" />
</c:when>
<c:otherwise>
<h:panelGroup />
<h:panelGroup />
</c:otherwise>
</c:choose>
</ui:composition>
Run Code Online (Sandbox Code Playgroud)
在/WEB-INF/example.taglib.xml
(或者/META-INF
当您想要在要包含的JAR文件中提供标记时)定义它/WEB-INF/lib
:
<?xml version="1.0" encoding="UTF-8"?>
<facelet-taglib
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facelettaglibrary_2_0.xsd"
version="2.0">
<namespace>http://example.com/jsf/facelets</namespace>
<tag>
<tag-name>input</tag-name>
<source>tags/input.xhtml</source>
</tag>
</facelet-taglib>
Run Code Online (Sandbox Code Playgroud)
声明taglib用法/WEB-INF/web.xml
(当标记由JAR文件提供时不需要这个/WEB-INF/lib
!JSF *.taglib.xml
文件将自动加载所有文件/META-INF
).
<context-param>
<param-name>javax.faces.FACELETS_LIBRARIES</param-name>
<param-value>/WEB-INF/example.taglib.xml</param-value>
</context-param>
Run Code Online (Sandbox Code Playgroud)
(多个taglib文件可以用分号分隔;
)
最后只需在主页面模板中声明它.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:my="http://example.com/jsf/facelets"
>
<h:head>
<title>Facelet tag file demo</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="3">
<my:input type="text" label="Username" bean="#{bean}" property="username" required="true" />
<my:input type="password" label="Password" bean="#{bean}" property="password" required="true" />
<my:input type="select" label="Country" bean="#{bean}" property="country" options="#{bean.countries}" />
<my:input type="submit" label="Submit" bean="#{bean}" action="submit" />
</h:panelGrid>
</h:form>
</h:body>
</html>
Run Code Online (Sandbox Code Playgroud)
(#{bean.countries}
应该返回一个Map<String, String>
国家/地区代码作为键和国家/地区名称作为值)
截图:
希望这可以帮助.
归档时间: |
|
查看次数: |
15813 次 |
最近记录: |