AOM 初体验（一）

AOM2.0M1在2月2号就发布了：
[quote]Apusic OperaMasks 2.0 M1 发布
1. 升级到Ext2.0
2. IoVC编程模型支持
3. 无状态支持
4. 增强调试辅助
5. 完善的布局组件
6. 组件快速开发支持[/quote]

还有就是现在地球人都知道的：约定优先配置（Convention Over Configuration），AOM在2.0M1中已经得到了很大的支持。

我们以用户登陆例子开始AOM2.0的探索之旅。

新建apusic标准项目
[img]http://mmm.iteye.com/upload/picture/pic/8866/2fa57464-f678-33a5-a715-30607ee87e9d.png[/img]

[img]http://mmm.iteye.com/upload/picture/pic/8878/dc36149f-7361-340a-9872-f8fe751173f1.png[/img]
点击 完成

新建一个web模块
[img]http://mmm.iteye.com/upload/picture/pic/8880/c90c90de-b25c-39c0-96cc-a6ebea26d668.png[/img]
点击下一步，将默认后缀名xhtml 选上
[img]http://mmm.iteye.com/upload/picture/pic/8882/b90b07ca-c253-3cd9-aa5e-5d564a952c69.png[/img]
点击完成。

在web/webContent下新建登陆页面 login.xhtml
[code]
<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"
xmlns:ajax="http://www.apusic.com/jsf/ajax"
renderKitId="AJAX" xmlns:h="http://java.sun.com/jsf/html">
<w:page>
<w:form clientValidate="true">
<layout:panelGrid columns="3">

<h:outputLabel for="username"/>
<w:textField id="username"/>
<h:message for="username"/>

<h:outputLabel for="password"/>
<h:inputSecret id="password" />
<h:message for="password"/>
<h:outputText id="message"/>
</layout:panelGrid>
<layout:panelGrid>
<w:button id="login"/>
</layout:panelGrid>
</w:form>
</w:page>
</f:view>
[/code]

页面很简单，就是一个表单，包括用户名、密码还有个按钮。可是为什么label的value都没有值呢？不急，我们先继续做下去。

在web/src下，新建LoginBean.java
[img]http://mmm.iteye.com/upload/picture/pic/8874/dbd8eaaf-6e4a-39bb-b245-6b47f55dc4ca.png[/img]

[img]http://mmm.iteye.com/upload/picture/pic/8876/690a733e-a27e-3b70-ab74-4cc7ae26a314.png[/img]
点击完成。

那么页面上的控件如何和代码绑定呢？
在Bean中
1：属性是通过元数据@Bind 来绑定页面对应控件的ID的。
2：方法是通过元数据@Action 来绑定页面对应控件的ID

LoginBean 修改成如下代码
[code]
package org.operamasks.demo.login;

import org.operamasks.faces.annotation.Action;
import org.operamasks.faces.annotation.Bind;
import org.operamasks.faces.annotation.ManagedBean;
import org.operamasks.faces.annotation.ManagedBeanScope;

@ManagedBean(scope = ManagedBeanScope.SESSION)
public class LoginBean {
/**
* 用户账号
*
* @Bind 表示绑定页面对应的控件
*/
@Bind
private String username;

/**
* 用户密码
*
* @Bind 表示绑定页面对应的控件
*/
@Bind
private String password;

/**
* 绑定页面id为message控件，用于显示消息
*/
@Bind
private String message;

/**
* 用户登陆
*
* @Action 表示页面对应id控件的action
*/
@Action
public void login() {
this.message = "欢迎你："+this.username;
}
}
[/code]

绑定的属性是可以直接在页面上通过el之类的表达式访问的，因此也无需要getter/setter了。

如何将页面和Bean对应起来，在jsf中，大家都知道通过faces-config.xml 来配置url,model-bean.在AOM中，可以简化掉这繁琐的工作。
在webContent/web-inf/目录下，新建operamasks.xml
[code]
<?xml version="1.0"?>

<operamasks-config xmlns="http://www.operamasks.org/IoVC"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.operamasks.org/IoVC http://www.operamasks.org/schema/operamasks.xsd ">
<view-mapping>
<url-pattern>*</url-pattern>
<model-bean>#{~View}Bean</model-bean>
</view-mapping>
</operamasks-config>
[/code]

login.xhtml 会自动寻找bean:LoginBean，如果你的bean的name为小写,即loginBean，那么将[code]
<model-bean>#{~View}Bean</model-bean>
[/code]
中的大写V改成小写的v即可
[code]
<model-bean>#{~view}Bean</model-bean>
[/code]

在那里配置bean的name?
哦，忘记了。在LoginBean代码中
[code]
@ManagedBean(name="loginBean",scope = ManagedBeanScope.SESSION)
public class LoginBean {
}
[/code]
如果没有写，默认的是LoginBean。

好了，这就是全部可以运行的代码，我们测试下
Apusic Studio默认已经内置支持apusic，选择login.xhtml，点击右键浏览即可
[img]http://mmm.iteye.com/upload/picture/pic/8884/85a92816-6a09-3602-875b-62ca35149a9f.png[/img]

有人要问，是不是不能在其他的服务器上运行呢？
当然可以，AOM并没有绑定死在Apusic上，如果你愿意(想)，当然没有任何问题的。你可以参考operamasks.org上的文档
[url]http://infocenter.apusic.com/help/index.jsp?topic=/org.operamasks.infocenter/output/eclipse/install_requirement.html[/url]

[img]http://mmm.iteye.com/upload/picture/pic/8886/f1c3a484-4311-309d-b8ec-d439408b8eca.png[/img]
输入用户名测试下：
[img]http://mmm.iteye.com/upload/picture/pic/8888/10904ac1-b651-3e6d-bf30-aad74a2366ff.png[/img]

用户名和密码都是必须的，我该如何验证呢？
OK,该@Required登场了。修改LoginBean.java,在需要验证的地方，加上@Required元数据
[code]
/**
* 用户账号
*
* @Bind 表示绑定页面对应的控件
* @Required 验证 表示该属性是必须的
*/
@Bind
@Required
private String username;

/**
* 用户密码
*
* @Bind 表示绑定页面对应的控件
* @Required 验证 表示该属性是必须的
*/
@Bind
@Required
private String password;
[/code]

保存代码，刷新下页面，看看效果
[img]http://mmm.iteye.com/upload/picture/pic/8890/2ad2effd-bc3a-369d-b062-05a10652ca28.png[/img]

Great!

可是这个我可以放在客户端先验证的，没必要直接提交给服务器验证，该怎么办？
这个提议不错，AOM当然也提供支持，修改login.xhtml
[code]
<w:form>
[/code]
为
[code]
<w:form clientValidate="true">
[/code]

打开FireBug, 盯着 Console，再刷新，哦，确实是在客户端验证了。

那么错误信息可以自定义吗？
@Bind有个message属性，你可以直接输入 @Bind(messages="Ooops....")

还有更多验证吗？
当然有，不过不是本文的范围，会在接下来的文章中专门介绍。

输入框旁边的字符这么出来的呢？
这个是根据你的id自动产生的，首字母大写。

可是我想改呢？
控件都有个value的属性，直接修改即可
[code]
<h:outputLabel for="username" value="用户名"/>
[/code]

看着上面直接在代码中输入 message ,value="用户名" 感觉代码的坏味道又出来了，我要全球化怎么办？
AOM很好，也很强大:) 已经有很到的支持了，每个bean会自动去加载同目录级别下的LocalStrings_xxx.properties

在LoginBean.java同目录新建
LocalStrings_en_US.properties
[code]
LoginBean.username.label=Username
LoginBean.password.label=Password
LoginBean.login.label=Login
[/code]

LocalStrings_zh_CN.properties
[code]
LoginBean.username.label=用户名
LoginBean.password.label=密码
LoginBean.login.label=登陆
[/code]

再次浏览页面
[img]http://mmm.iteye.com/upload/picture/pic/8896/628e0fb6-4227-3b2c-adce-6a03dc11c931.png[/img]
错误信息的改变：
[img]http://mmm.iteye.com/upload/picture/pic/8894/10b20168-45d5-3db6-85cc-4de8c9320d3a.png[/img]

还等什么呢？还不快来试试:)