F.1.5 画面をヘッダ部とボディ部などに分けて作成したい

以下のようにして画面を複数の領域に分割し、各領域ごとに入出力ページを作成することができます。

制御ページに領域の数だけuji:includeタグを記述します。uji:includeタグのpaneアトリビュートに領域名を指定します。

領域を分割するための制御ページの例

<%@ page contentType= "text/html; charset=shift_jis" %>
<%@ page errorPage="error.jsp" %>
<%@ taglib uri="uji-taglib" prefix="uji" %>
<HTML>
<HEAD><TITLE>領域分割サンプル</TITLE></HEAD>
<BODY>
    <uji:dispatch />
    <uji:include pane="head" />
    <uji:include pane="body" />
</BODY>
</HTML>

この例では、head, bodyという2つの領域を定義しています。

それぞれの領域に使用するデータBeanと入出力ページを作成します。

各領域に画面を表示させるためには、ビジネスクラスのメソッドで以下の処理を実行します。

表示するデータをデータBeanに格納します。
データBeanのsetVerbメソッドで表示モードを設定します。表示モードが不要な場合はこの処理を省略できます。
com.fujitsu.uji.DispatchContextクラスのsetResponseBeanメソッドで、データBeanを各領域に割り当てます。
ビジネスクラスの例
```
import com.fujitsu.uji.GenericHandler;

public class SampleHandler extends GenericHandler {
    ....

    public void startup(DispatchContext context) {
        BodyBean bodyBean = new BodyBean();
        bodyBean.setVerb("input");
        HeadBean headBean = new HeadBean();
        ....

        context.setResponseBean("head",headBean);
        context.setResponseBean("body",bodyBean);
    }
}
```
head領域にHeadBeanを、body領域にBodyBeanを割り当てています。ページマップでHeadBeanクラス、表示モード無しに対応付けられた入出力ページがhead領域に表示され、BodyBeanクラス、表示モードinputに対応付けられた入出力ページがbody領域に表示されます。

各領域の画面は、対応するuji:includeタグの位置に表示されます。領域の位置関係を指定したい場合は、TABLEタグやスタイルシートを使います。

TABLEタグで領域の位置を調整する例

<%@ page contentType= "text/html; charset=shift_jis" %>
<%@ page errorPage="error.jsp" %>
<%@ taglib uri="uji-taglib" prefix="uji" %>
<HTML>
<HEAD><TITLE>領域分割サンプル</TITLE></HEAD>
<BODY>
    <uji:dispatch />
    <TABLE>
      <TR>
        <TD><uji:include pane="head" /></TD>
        <TD><uji:include pane="body" /></TD>
      </TR>
    </TABLE>
</BODY>
</HTML>

この例では、head領域が左に、body領域が右に表示されます。

DIVタグとスタイルシートで領域の位置を調整する例

<%@ page contentType= "text/html; charset=shift_jis" %>
<%@ page errorPage="error.jsp" %>
<%@ taglib uri="uji-taglib" prefix="uji" %>
<HTML>
<HEAD>
<TITLE>領域分割サンプル</TITLE>
<STYLE TYPE="text/css">
<!--
DIV.header_x{  position:absolute;
                left:0px;
                width:500px;}
DIV.body_x{  position:absolute;
                left:560px;
                width:500px;}
-->
</STYLE>
</HEAD>
<BODY>
    <uji:dispatch />
    
    <DIV CLASS="header_x">
        <uji:include pane="head" />
    </DIV>
    <DIV CLASS="body_x">
        <uji:include pane="body" />
    </DIV>
</BODY>
</HTML>

この例では、head領域が左に、body領域が右に表示されます。スタイルシートで領域の表示位置と横幅を指定しています。