复合组件最佳实践（1）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-9-20 19:04 | 只看该作者

复合组件最佳实践（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; }
}

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

收藏分享评分

回复引用

订阅 TOP

返回列表