选中工程，点击右键“新建-->Web模块”，如下图：

图 11.8. 从右键菜单新建Web模块

出现“新建Web项目”向导，第一页是基础配置，其中上下文根是页面中URL访问的根路径，如下图：

图 11.9. “基础配置”向导

点击下一步，出现“Web配置细节”向导，如下图：

图 11.10. “Web配置细节”向导

例子中使用demo作为默认命名空间，点击完成生成Web模块。

web模块生成后，会在工程目录下生成一个web / WebContent文件夹，一般将页面存放在此。在该文件夹上点击右键“新建-->Faces页面”新建一个greeting.xhtml的faces页面，如下图：

图 11.11. 从右键菜单新建faces页面

在“新建Faces页面”向导中，输入文件名，例子中为“greeting.xhtml”，如下图：

图 11.12. “新建Faces页面”向导

点下一步，出现“选择Facelets模板”向导，选择New Faces Page (Facelets View)，如下图：

图 11.13. “选择Facelets模板”向导

点下一步，出现“布局模板”向导，此时包名已经根据前面设置的默认命名空间设置成了demo，如下图：

图 11.14. “布局模板”向导

点完成，出现用Web Page Editor打开的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"
 xmlns:ajax="http://www.apusic.com/jsf/ajax" renderKitId="AJAX">
 <w:head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </w:head>
 <w:page title="Insert title here">
 </w:page>
</f:view>

在Web Page Editor中选择Design模式，在这个模式下支持控件拖拽操作，如下图：

图 11.15. 页面编辑器的Design模式

使用studio的IoVC辅助功能进行控件的IoVC绑定。

1.双击输入框（w:textFiled）控件即可激活辅助功能向导，首先填写控件的id，这里设置为name，如下图：

图 11.16. 填写控件ID输入框

2.生成代码的设置，这里使用默认的，点击完成，会在web/src/demo下生成一个GreetingBean.java的托管Bean文件。

图 11.17. “生成默认的绑定代码”向导

3.使用相同方法绑定其它两个控件

4.页面最终代码如下

<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:h="http://java.sun.com/jsf/html"
 renderKitId="AJAX"> 
 <w:page title="hello duke">
  <w:form>
   <h2>Hello, my name is Duke. What is yours?</h2>
   <img src="images/duke.gif" />
   <h:outputText id="result" />
   <br/>
   <w:textField id="name"/>
   <w:button id="sayHello"/>
  </w:form>
 </w:page>
</f:view>

5.页面在Design下的效果

图 11.18. 页面在Design模式下的效果图

编写托管Bean的逻辑代码

1.打开托管Bean的切换页签（在窗口 -> 首选项 -> Apusic -> Web 中配置显示LiteBean页签），如下图：

图 11.19. 首选项中的页签位置

重新打开编辑器，切换到对应的托管Bean，如下图：

图 11.20. 编辑器中的页签位置

2.托管Bean代码

package demo;

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

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

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

 @Bind(id="result")
 private String result;
 
 @Action(id="sayHello")
 @Label(value="sayHello")
 public String sayHello(){
  result = "hello " + name;
  if("duke".equalsIgnoreCase(name)) {
    return "sameName.xhtml";
  }
  return null;
 }
}

创建上述Bean代码中所需要的另一个faces文件，名为：sameName.xhtml。其作用为当用户输入duke，则跳转到这个页面，显示Hi, we have the same name "Duke"!

<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" renderKitId="AJAX">
 <w:page title="hello duke">
  <h2>Hi, we have the same name "Duke"!</h2>
  <img src="images/duke.gif"/>  
  <a href="greeting.faces">return</a>
 </w:page>
</f:view>

在greeting.xhtml上点右键“运行方式->在Apusic应用服务器上运行”。

图 11.21. 右键菜单“运行方式->在Apusic应用服务器上运行”

查看运行结果。

图 11.22. 运行结果