通过在J2EE资源管理器中，右键点击“新建”->Apusic标准工程，或者File->New->Apusic标准工程创建新的Apusic 工程。

配置Apusic 服务器。（指定Apusic 安装目录）

工程上点击右键-->新建-->Web模块

配置Web模块的基础配置，使用默认值

配置Web模块的细节，使用demo作为默认命名空间

Web模块上点击右键->新建->Faces页面

在“New Faces Page”窗口的File Name输入域中输入“greeting.xhtml”点击“Next”

选择Faces Page模板，点击“Next”

选择托管Bean的配置

通过可视化编辑器编辑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>

选择Design模式，分别拖拽控件到页面上

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

（1）双击控件即可激活辅助功能向导，首先填写控件的id

（2）生成代码的设置，这里使用默认的

（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下的效果

编写托管Bean的逻辑代码

（1）打开托管Bean的切换页签（在Window -> Preference -> Apusic -> Web中配置显示litebean页签）

切换页面到对应的托管Bean

（2）托管Bean代码

package demo;

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