IoVC实例分析：Hello Duke！

最新推荐文章于 2021-02-24 14:18:53 发布

原创最新推荐文章于 2021-02-24 14:18:53 发布 · 9.6w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#button #string #action #应用服务器 #编程 #null

本文通过helloDuke示例介绍IoVC编程模型的应用。在新版中，UI控件与后台JavaBean通过ID关联，简化了EL表达式使用。GreetingBean通过@Bind和@Action注解与界面元素绑定。

IoVC实例分析：Hello Duke！

张勇

1. 概述 2. 应用的开发

2.1. greeting.xhtml

3. 后台 JavaBean 的变化 4. Apusic Studio的支持 5. 注意

1. 概述

本文用一个非常简单的例子“helloDuke"，介绍 IoVC 编程模型的一种实际场景。在阅读本文前，建议您首先阅读这两篇文章：

Hello Duke！

IoVC，一种新的编程思想

在IoVC编程模型下的 HelloDuke 版本，功能没做任何增减，依然如下图所示：

但由于在程序中用到了 IoVC 思想，及 facelets 技术，因此，整个程序的目录结构更改如下：

helloDuke
  --duke.gif
  --greeting.xhtml
  --sameName.xhtml
  --WEB-INF
      --web.xml
      --faces-config.xml
      --operamasks.xml
      --classes
        --helloduke
          --GreetingBean.class

下面就让我们来完成此应用。

2. 应用的开发

2.1. greeting.xhtml

首先，我们来看一下老版本的 greeting.jsp是怎样的：

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<f:view>
<h:form>
  <h2>Hello, my name is Duke. What is yours?</h2>
  <h:graphicImage url="duke.gif"></h:graphicImage>
  <h:outputText value="#{userBean.result}"/><br>
  <h:inputText value="#{userBean.name}"></h:inputText>
  <h:commandButton value="sayHello" action="#{userBean.sayHello}"/>
</h:form>
</f:view>

那么，在AOM 2.0版本下，并且在 IoVC 编程思想下，greeting.xhtml又是怎样的呢？

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
  xmlns:w="http://www.apusic.com/jsf/widget" xmlns:layout="http://www.apusic.com/jsf/layout"
  renderKitId="AJAX" xmlns:h="http://java.sun.com/jsf/html">
  <w:page title="helloDuke">
    <w:form>
      <h2>Hello, my name is Duke. What is yours?</h2>
      <img src="/articles/helloduck-iovc/html_single/duke.gif" />
      <h:outputText id="result"></h:outputText><br />
      <w:textField id="name"></w:textField>
      <w:button id="sayHello" value="sayHello" />
    </w:form>
  </w:page>
</f:view>

我们的注意力不要被<w:>还是<h:>所影响，我们先假设这两者都是等价的。我们主要观察<h:outputText>、<w:textField> 以及<w:button> 这三个主要UI控件的写法。我们可以看到，在新版本中，<h:outputText> 和<w:textField>并没有指定value，而<w:button>也没有指定action，但这三者都有不同的id，并且，整个页面全部都是展现层相关信息，没有任何代码片断或 EL 表达式的引入。

那么，这三者的值以及动作事件，又是怎样和后台的JavaBean关联起来的呢？

3. 后台 JavaBean 的变化

首先，我们也是先熟悉一下老版本中的 UserBean（在新版本中，它的名称改为 GreetingBean）。

package helloduke;

public class UserBean {

private String name;

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public String getResult() {
    if(this.name == null || "".equals(name.trim())) return "Please input your name."; 
    else return "Hello " + name;
  }

  public Object sayHello() {
    if("duke".equalsIgnoreCase(name)) return "duke";
    return null;
  }
}

那么，在新版本中，上述逻辑变成怎样的呢？如下所示：

package helloduke;

@ManagedBean(name="GreetingBean", scope=ManagedBeanScope.SESSION)
public class GreetingBean {

  @Bind(id="result")
  private String result;

  @Bind(id="name")
  private String name;

  @Action(id="sayHello")
  public Object sayHello(){
    if("duke".equalsIgnoreCase(name)) return "/sameName.xhtml";
    return null;
  }

  @BeforeRender
  private void settingValues(boolean isPostBack){
    if(this.name == null || "".equals(name.trim())) { 
        result = "Please input your name."; 
    }
    else {
      result = "Hello " + name; 
    }
  }
}

我们可以观察到，在 result 属性上，有一个 @Bind(id="result")的 annotation 声明；同样，在name上，也有 @Bind(id="name") 的声明，而在 sayHello 方法上，则有@Action(id="sayHello") 的声明。至此，我们恍然大悟：通过这样一些声明，<h:outputText>的值自动和 result 属性关联，<w:textField>的值自动和 name 属性关联，而<w:button> 的Action事件，则和 sayHello 方法关联。

等一下，这里有个问题：针对 result 属性和 name 属性，在AOM 2.0下，连 setter/getter 方法都没有？是的，完全可以忽略。

那么，result 的值是在哪里设置的？请注意 settingValues 方法，它有一个 @BeforeRender 的声明，意思就是说：当页面在渲染前，请调用此方法。这就相当于一个回调函数，因此，对 result 属性的设置，我们就可以在此处进行处理。

好像一切都很完美，但是，还有一个问题，greeting.xhtml页面，是怎样和 GreetingBean 对应起来的？目前，你可以假设认为：这是通过命名规则获得的，但这部分内容已经超过本文所要介绍的范围，请允许我在下一篇文章中介绍。