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]
还等什么呢?还不快来试试:)
[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]
还等什么呢?还不快来试试:)