举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > 复合组件的三要素 JSF 复合组件示例

复合组件的三要素 JSF 复合组件示例

2023-03-05 21:18 Java教程

复合组件的三要素 JSF 复合组件示例

复合组件的三要素

复合组件是一种把多个组件组合在一起的技术,它可以帮助开发者更快速、更高效地实现功能。它的三要素包括:

1. 组件:复合组件的基本单元是组件,它是一个独立的、可重用的代码片段,可以用来实现特定功能。例如,一个表单输入字段就是一个独立的组件,它可以被重复使用来创建不同的表单。

2. 结构:复合组件也需要一个特定的结构来将这些独立的组件连接起来。这些连接可能是通过函数调用或者对象层面上的嵌套来实现。例如,你可能会需要将一个表单字段和一个表单标题连接在一起形成一个表单。

3. 抽象:最后,复合组件也需要适当的抽象来使得代码易于理解和重用。例如,你可能会需要将表单字段和标题封装成一个“FormField”对象,而不是直接将字段和标题写在同一个文件中。这样就可以使得代码易于理解、重用、测试和修复。

  const FormField = (props) => { 
    return ( 
      
{props.children}
); };

JSF 复合组件示例

JSF教程 - JSF复合组件示例


JSF可以定义自定义组件来渲染自定义内容。

为了创建一个自定义组件,我们需要创建一个资源文件夹。并将一个xhtml文件放在resources文件夹中与复合命名空间。

我们需要使用复合标签composite:interface,composite:attribute和composite:implementation,来定义复合组件的内容。

然后在composite:implementation中使用cc.attrs来获取在composite:interface中使用composite:attribute定义的变量。

以下代码显示如何使用composite:interface和composite:implementation。

    <composite:interface>
    
      <composite:attribute name="nameLable" />
      <composite:attribute name="nameValue" />
      <composite:attribute name="emailLable" />
      <composite:attribute name="emailValue" />
      
       <composite:attribute name="registerButtonText" />
      <composite:attribute name="registerButtonAction" 
        method-signature="java.lang.String action()" />
        
    </composite:interface>
  
  <composite:implementation>
  
    <h:form>
      
      <h:message for="textPanel" />
      
      <h:panelGrid columns="2" id="textPanel">
      
        #{cc.attrs.nameLable} : 
        <h:inputText id="name" value="#{cc.attrs.nameValue}" />
        
        #{cc.attrs.emailLable} : 
        <h:inputText id="email" value="#{cc.attrs.emailValue}" />
        
      </h:panelGrid>
      
      <h:commandButton action="#{cc.attrs.registerButtonAction}" 
        value="#{cc.attrs.registerButtonText}"/>
    </h:form>
  </composite:implementation>
  

例子

以下代码来自result.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:h="http://java.sun.com/jsf/html"
      >
 
    <h:body>
 
      <h1>Composite Components in JSF 2.0</h1>
 
      Name : #{user.name}
      
      <br />
      
      E-mail : #{user.email}
      
    </h:body>
 
</html>

以下代码来自demo.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:h="http://java.sun.com/jsf/html"
      xmlns:="http://java.sun.com/jsf/composite/"
      >
 
    <h:body>
 
    <:register 
      nameLable="Name" 
      nameValue="#{user.name}" 
      emailLable="E-mail" 
      emailValue="#{user.email}"

      registerButtonText="Register" 
      registerButtonAction="#{user.registerAction}"
       />
  
    </h:body>
 
</html>

下面的代码来自UserBean.java。

package cn..common;


import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="user")
@SessionScoped
public class UserBean{
 
  public String name;
  public String email;
  
  public String getName() {
    return name;
  }
  public void setName(String name) {
    this.name = name;
  }
  public String getEmail() {
    return email;
  }
  public void setEmail(String email) {
    this.email = email;
  }

  public String registerAction(){
    return "result";
  }
}

以下代码来自register.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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:composite="http://java.sun.com/jsf/composite">
    
    <composite:interface>
    
      <composite:attribute name="nameLable" />
      <composite:attribute name="nameValue" />
      <composite:attribute name="emailLable" />
      <composite:attribute name="emailValue" />
      
       <composite:attribute name="registerButtonText" />
      <composite:attribute name="registerButtonAction" 
        method-signature="java.lang.String action()" />
        
    </composite:interface>
  
  <composite:implementation>
  
    <h:form>
      
      <h:message for="textPanel" />
      
      <h:panelGrid columns="2" id="textPanel">
      
        #{cc.attrs.nameLable} : 
        <h:inputText id="name" value="#{cc.attrs.nameValue}" />
        
        #{cc.attrs.emailLable} : 
        <h:inputText id="email" value="#{cc.attrs.emailValue}" />
        
      </h:panelGrid>
      
      <h:commandButton action="#{cc.attrs.registerButtonAction}" 
        value="#{cc.attrs.registerButtonText}"/>
    </h:form>
  </composite:implementation>
</html>
下载 Composite-Components.zip

运行

将生成的WAR文件从目标文件夹复制到Tomcat部署文件夹,并运行Tomcat-Install-folder/bin/startup.bat。

Tomcat完成启动后,在浏览器地址栏中键入以下URL。

http://localhost:8080/simple-webapp/demo.xhtml
阅读全文
以上是编程学为你收集整理的复合组件的三要素 JSF 复合组件示例全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部