apusiczhang

在本系列教程中，我们将通过一个小例子：Calculator，来体会一下Apusic OperaMasks 2.0的特性。

本文中，将围绕的例子如下图所示：

现在，就让我们开始体验一下Apusic OperaMasks 2.0的神奇。

首先，让我们打开Apusic Studio，先画出这样一个页面：

这个页面的代码如下：

<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="Calculator">
    <w:form id="calc">
      <layout:panelGrid columns="3">
        <h:outputLabel for="first"/>
        <w:textField id="first"/>
        <h:message for="first"/>
        <h:outputLabel for="second"/>
        <w:textField id="second"/>
        <h:message for="second"/>
        <h:outputLabel for="result"/>
        <h:outputText id="result"/>
      </layout:panelGrid>
      <br/>
      <layout:panelGrid columns="4">
        <w:button id="add"/>
        <w:button id="subtract"/>
        <w:button id="multiply"/>
        <w:button id="divide"/>
      </layout:panelGrid>
    </w:form>
  </w:page>
</f:view>

此页面的解释：在页面的上半部分，放了两个<w:textField>，其id分别是“first”及“second”，还有一个 <h:outputText>，其id为“result”，页面下半部分放了四个<w:button>，其id分别是“add”、“subtract”、“multiply”及“divide”。OK，我们现在来运行一下这个页面，效果如下：

和我们的预期差不多。下面，让我们来做一下后台的Lite Bean（在AOM 2.0中，将Managed Bean扩展成Lite Bean，详细资料请参考AOM 2.0参考手册），如果你用的是Apusic Studio，那么，在你新建这个页面的时候，这个Lite Bean已经自动帮助你生成了。

@ManagedBean(scope = ManagedBeanScope.REQUEST)
public class CalcBean {
  @Bind
  private double first = 22.0;
  @Bind
  private double second = 7.0;
  @Bind
  private double result;
  @Action
  public void add() {
    result = first + second;
  }
  @Action
  public void subtract() {
    result = first - second;
  }
  @Action
  public void multiply() {
    result = first * second;
  }
  @Action
  public void divide() {
    result = first / second;
  }
} 

@Bind(id="first")
private double first2 = 22.0;

@Action(id="add")
public void plus() {
  result = first + second;
}

<w:button id="add" value="Plus"/>

@Bind(id="add", attribute="value")
private String addLabel = "Plus";