让我们直接看一下代码片断（注意：这里用到的IoVC、Facelets请暂且全部忽略）：

paymentType.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:h="http://java.sun.com/jsf/html" 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="选择支付类型">   
    <div align="center" style="font-size: 11pt; padding-top: 20px;">
      <w:form>
        <h3>请选择支付类型</h3>                        
        <w:radioGroup direction="h" id="type">
          <f:selectItems id="types"/>
        </w:radioGroup>
        <w:button id="next"/>
      </w:form>
    </div>
  </w:page>
</f:view>

payment.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:h="http://java.sun.com/jsf/html" xmlns:ajax="http://www.apusic.com/jsf/ajax"
  renderKitId="AJAX" xmlns:c="http://java.sun.com/jstl/core">
  <w:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </w:head>
  <w:page title="支付">
    <div align="center" style="font-size: 11pt; padding-top: 20px;">
      <w:form>
        <layout:panelGrid columns="2">
          <layout:cell>请输入卡号：</layout:cell>
          <layout:cell>
            <w:textField id="cardNum"></w:textField>
          </layout:cell>
          <c:if test="#{paymentBean.type.equals('creditCard')}">
            <layout:cell>卡片背面末三位：</layout:cell>
            <layout:cell>
              <w:textField id="last3Num"></w:textField>
            </layout:cell>
          </c:if>
        </layout:panelGrid>
        <w:button id="ok"/>
      </w:form>
    </div>
  </w:page>
</f:view>

以<c:if test="">括起来的内容，只有当 test 表达式值为true时，其内容才会显示。

PaymentBean.java

@ManagedBean(name = "paymentBean", scope = ManagedBeanScope.SESSION)
public class PaymentBean implements Serializable {

  @Bind
  @ManagedProperty
  private String type = "creditCard";

  @Bind
  @SelectItems
  private SelectItem[] types = new SelectItem[] {
    new SelectItem("creditCard", "信用卡"), new SelectItem("unionPay", "银联卡")};

  @Bind(id="cardNum", attribute="value")
  private String cardNum;

  @Bind(id="last3Num", attribute="value")
  private String last3Num;

  @Action(id="next")
  public String next(){
    return "view:redirect:payment.xhtml";
  }

  @Action(id="ok")
  public void ok(){
    System.out.println("您选择的是通过 '" + type + "' 进行支付，您的卡号是:'" 
      + cardNum + "'. ");
    if("creditCard".equals(type)) {
      System.out.println("您的信用卡背面末三位是：'" + last3Num + "'.");
    }
  }
}

此处是Apusic OperaMasks的特性，意指：请重定向(redirect)到 payment.xhtml 页面

我们可以观察到，在 payment.xhtml 中，为了动态判断是否在页面中显示“卡片背面末三位”的组件，我们可以通过 <c:if/>进行条件判断。 除了<c:if/>外，Facelets还提供了<c:forEach/>、 <c:catch/>、<c:set/>等tag供你使用。

还需要提及的是，在Apusic OperaMasks（目前你可以把它当成JSF的一种具体实现）中，由于 ELite 的存在，你甚至可以获得类似于<%%>的Power！请参考后续文章。

除了 jstl 这种解决方案以外，你还可以通过“组件的服务器端API”达到相同的目的，请参考下述代码：

paymentType2.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:h="http://java.sun.com/jsf/html" 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="选择支付类型">   
    <div align="center" style="font-size: 11pt; padding-top: 20px;">
      <w:form>
        <h3>请选择支付类型</h3>                        
        <w:radioGroup direction="h" id="type">
          <f:selectItems id="types"/>
        </w:radioGroup>
        <w:button id="next"/>
      </w:form>
    </div>
  </w:page>
</f:view>

payment2.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:h="http://java.sun.com/jsf/html" 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="支付">
    <div align="center" style="font-size: 11pt; padding-top: 20px;">
      <w:form>
        <layout:panelGrid columns="2" id="panelGrid">
          <layout:cell>请输入卡号：</layout:cell>
          <layout:cell>
            <w:textField id="cardNum"></w:textField>
          </layout:cell>
        </layout:panelGrid>
        <w:button id="ok" />
      </w:form>
    </div>
  </w:page>
</f:view>

Payment2Bean.java

@ManagedBean(name = "payment2Bean", scope = ManagedBeanScope.SESSION)
public class Payment2Bean implements Serializable {

  @Bind
  @ManagedProperty
  private String type = "creditCard";

  @Bind
  @SelectItems
  private SelectItem[] types = new SelectItem[] {
    new SelectItem("creditCard", "信用卡"), new SelectItem("unionPay", "银联卡")};

  @Bind(id="cardNum", attribute="value")
  private String cardNum;

  @Bind(id="last3Num", attribute="value")
  private String last3Num;

  @Bind(id="panelGrid")
  private HtmlPanelGrid panelGrid;

  @Action(id="next")
  public String next(){
    return "view:redirect:payment2.xhtml";
  }

  @Action(id="ok")
  public void ok(){
    System.out.println("您选择的是通过 '" + type + "' 进行支付，您的卡号是:'" 
      + cardNum + "'. ");
    if("creditCard".equals(type)) {
      System.out.println("您的信用卡背面末三位是：'" + last3Num + "'.");
    }
  }

  @BeforeRender
  public void beforeRender(boolean postBack) {
    if(panelGrid != null && !postBack && "creditCard".equals(type)) {
      Application app = FacesContext.getCurrentInstance().getApplication();

      HtmlGridCell cell = (HtmlGridCell) app.createComponent(HtmlGridCell.COMPONENT_TYPE);
      panelGrid.getChildren().add(cell);

      HtmlOutputText lab =  (HtmlOutputText) app.createComponent(HtmlOutputText.COMPONENT_TYPE);
      lab.setValue("卡片背面末三位：");
      cell.getChildren().add(lab);

      cell = (HtmlGridCell) app.createComponent(HtmlGridCell.COMPONENT_TYPE);
      panelGrid.getChildren().add(cell);

      UITextField txt = (UITextField) app.createComponent(UITextField.COMPONENT_TYPE);
      cell.getChildren().add(txt);
      txt.setId("last3Num");
    }
  }
}

	当页面要被渲染时，会调用被 @BeforeRender 所标注的方法。在此时，我们会根据选择的卡片类型，来决定是否动态生成新的组件。
	获得 Application，所有组件的创建都应该通过 Application 进行。
	创建一个 Cell，并将其加入到 PanelGrid中。
	创建一个 OutputText，并将其加入到Cell中。
	创建一个 TextField，并将其加入到 Cell中。

事实上，通过服务器端API来动态控制页面内容，更类似于 C/S 架构下的编程模型。

最后，再回到第三个问题：JSF与JSP能混合使用吗？

当然可以！

有一个一直让我莫名其妙的问题是：很多同学有“健忘症”，他们一旦使用 JSF 来开发Web应用，转眼间，积累了那么多年的 JSP/Servlet 知识好像全都忘记了。

经常有同学问我：“我想做一个重定向页面怎么办？”

我说：“没有JSF之前你是怎么做的？”

回答：“很简单啊，只要在JSP中调一下response.sendRedirect 就可以了啊！”。

我说：“那你就写一个专门做重定向的JSP页面不就得了！”

至此才恍然大悟。

事实上，笔者强烈建议：用 Facelets作为JSF页面的描述载体（view-handler），而把JSP页面就当成普通的JSP来用。