OperaMasks之web开发全攻略详解一

OperaMasks 2.0的神奇魔力之一：约定优于配置

1. 概述

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

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

现在，就让我们开始 AOM 2.0的神奇之旅吧！

2. 构建基本页面

首先，让我们打开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已经自动帮助你生成了。

3. 完成Lite Bean

这个 LiteBean的基本代码如下：

 

@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;
  }
}

 

上述代码的解释如下：首先，我们声明了3个成员变量，分别是：first、second 和 result，请注意，他们的命名，和页面中相关控件的 id 是一样的，并且，它们都有一个@Bind 的annotation。同时，我们也声明了四个方法，分别是：add、subtract、multiply 和 divide，同样的，它们的命名也和页面中的四个<w:button>的id保持一致，而且，它们也都有 @Action 的annotation声明。

现在，让我们运行一下这个页面，我们来看看，会发生什么情况？

哇，一切都OK了！我们要的功能已经全部具备了！

这是怎么回事？印象中，我们好像并没有指定输入参数的 label 是什么吧，好像也没有指定四个 button 的 value和action啊，AOM是怎么猜到我们想要让它做什么的？

4. 约定优于配置

记得一位朋友在向我介绍 Ruby on Rails时，对RoR的两个特性赞不绝口，一个是 Ruby 这种动态语言（OperaMasks 2.0中的ELite绝不逊色于 Ruby），另一个就是“约定优于配置”（Convention Over Configuration) 这个原则。事实上，OperaMasks 2.0 也将“约定优于配置”这条原则发挥得淋漓尽致。以上述代码为例：在页面中有个 <h:outputLabel for="first"/>，但我们并没有指定它的确切值，那么，AOM会认为，此label的值默认就是这个id，且首字母大写； <w:textField id="first"/> 并没有指定它的value，那么，OperaMasks会自动到后台的 CalcBean 中，找出所有带有@Bind标注且名称为 first 的属性，该textField 的值就对应此属性；对于<w:button id="add"/>，OperaMasks会找出所有带有@Action 标注且名称为 add 的方法，该 button 的 Action 就是此方法。

看上去很美，但是，这样一来，是否意味着我的代码会受到很多限制呢？譬如，我不想让成员变量名称为 first，那么，我该怎么办呢？

5. 一旦配置，那么，配置高于约定

假如你希望将CalcBean中first属性的名称更改为 first2，你可以这样做：

   
   
   
   

    
    
    
    
 
     

       @Bind(id="first") 
     
 
     

       private double first2 = 22.0; 
     
 
    
   
   
   
   

假如你希望方法名不是 add，改成 plus，那么，你可以这样：

   
   
   
   

    
    
    
    
 
     

       @Action(id="add") 
     
 
     

       public void plus() { 
     
 
     

         result = first + second; 
     
 
     

       } 
     
 
    
   
   
   
   

假如你希望将 Add按钮的名称改为“Plus”，那么，你可以这样：

   
   
   
   

    
    
    
    

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

等等，将业务数据与展现层绑在一起，这不是违反了IoVC的原则吗？ 是，你说的对，那我们换个更好的做法，你可以这样：

   
   
   
   

    
    
    
    
 
     

       @Bind(id="add", attribute="value") 
     
 
     

       private String addLabel = "Plus"; 
     
 
    
   
   
   
   

好像还有一点不对劲，仅仅为了显示一个Label，我有必要在 CalcBean 中再增加一个属性吗？你说的对，但这是咱们第二篇文章要介绍的内容了。

6. 总结

好了，我们只是简单的体会了一下 OperaMasks 2.0 的一些新特性。文中所描述的计算器这个示例，在 OperaMasks 2.0 中，只需要简单的十几行代码就轻松搞掂了。是不是非常省事？我记得我的老师袁红岗先生曾经跟我说过：聪明的程序员都是懒惰的。 无疑，OperaMasks 2.0 是为“懒人”准备的，尤其是那些“懒惰的”、“聪明的”程序员们。