JSF 2 简介: 后来添加的 Ajax 复合组件
2010-07-13 00:00:00 来源：WEB开发网现在，我将向您展示如何使用不超过 25 行 XML 代码实现该图标组件。
字体选择程序示例
字体选择程序由 4 个文件组成：
图 1 中显示的页面，在 index.xhtml 中定义。
图标组件，位于 /resources/util/icon.xhtml 下。
一个侦听器（com.clarity.FontSelectionListener.java）。
一个 bean（com.clarity.FontSettings）。
图 2 展示了目录结构：
图 2. 字体选择程序示例的文件
清单 1 是 图 1 所示页面的 facelet — index.xhtml：
清单 1. facelet (/web/index.xhtml)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:corejsf="http://corejsf.com"
xmlns:util="http://java.sun.com/jsf/composite/util">
<h:head>
<h:outputStylesheet library="css" name="styles.css"/>
<title>#{msgs.windowTitle}</title>
</h:head>
<h:body>
<h:outputStylesheet library="css" name="styles.css"/>
<h:outputText value="#{msgs.fontSizeHeading}"
style="padding-left: 30px; font-size: 2em;"/>
<h:panelGrid columns="3" style="padding-left: 80px;">
<util:icon id="minus" image="#{resource['images:minus.gif']}">
<f:actionListener for="link" type="com.clarity.FontSelectionListener"/>
</util:icon>
<util:icon id="plus" image="#{resource['images:plus.gif']}">
<f:actionListener for="link" type="com.clarity.FontSelectionListener"/>
</util:icon>
<h:outputText id="readout" value="#{fontSettings.size}em"/>
</h:panelGrid>
<h:outputText id="fontPreview" value="Aa"
style="font-size: #{fontSettings.size}em; font-style: italic"/>
</h:body>
</html>
中查找“JSF 2 简介: 后来添加的 Ajax 复合组件”更多相关内容
中查找“JSF 2 简介: 后来添加的 Ajax 复合组件”更多相关内容更多精彩
赞助商链接
