首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

复合组件最佳实践(1)

复合组件最佳实践(1)

可编辑输入复合组件文本的示例组件是一个可编辑的输入复合组件。 所示的应用程序使用两个可编辑输入复合组件,一个用于输入名字,另一个输入姓氏:
图 1. 可编辑文本组件从上到下, 中的这 3 个屏幕截图显示了名字的编辑序列:
  • 最上面的截图显示应用程序的初始状态,edit... 按钮位于 First name:Last name: 标签的右边。
  • 中间截图显示了当用户单击了 First name: 后边的 edit... 按钮,并在文本输入区域输入  Roger 之后应用程序的状态。一个 done 按钮出现在文本输入区右边。
  • 最下面的屏幕截图显示了当用户单击了 done 按钮之后应用程序的状态。现在出现了 First name: Roger,在其右边有一个 edit... 按钮。
接下来,我们将讨论如何使用这个可编辑输入组件,并向您显示如何实现。之后,我将就组件的实现逐个讨论这 5 个最佳实践。
使用组件使用可编辑输入组件和使用其他任何 JFS 组件一样:声明适当的名称空间,然后对复合组件使用 JFS 生成的标记。 说明了  中所示的页面的两个步骤以及标签:
清单 1. 使用 <util:inputEditable>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:util="http://java.sun.com/jsf/composite/util">
   <h:head>
      <title>Implementing custom components</title>
   </h:head>
   <h:body>
      <h:form>   
         <h:panelGrid columns="2">
            First name:
            <util:inputEditable id="firstName"
                             value="#{user.firstName}"/>
               
            Last name:
            <util:inputEditable id="lastName"
                             value="#{user.lastName}"/>
        </h:panelGrid>
      </h:form>
   </h:body>  
</html>




为了完整起见, 显示了  引用的 user bean 的实现:
清单 2. User bean
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package com.corejsf;

import java.io.Serializable;
import javax.inject.Named;
import javax.enterprise.context.SessionScoped;

@Named("user")
@SessionScoped
public class UserBean implements Serializable {
   private String firstName;
   private String lastName;

   public String getFirstName() { return firstName; }   
   public void setFirstName(String newValue) { firstName = newValue; }

   public String getLastName() { return lastName; }
   public void setLastName(String newValue) { lastName = newValue; }   
}




现在您已经看到了如何使用可编辑输入组件,我将向您演示它的实现。
返回列表