• 追加された行はこの色です。
  • 削除された行はこの色です。
  • Transition へ行く。

* 画面遷移定義 XML [#d9c055c9]

アプリケーションの開始時やイベント処理の終了時に実行される遷移処理を記述する XML 文書です。アプリケーションが初期表示するレイアウトもこの XML で指定します。

** 記述可能なタグ一覧 [#g3c091cc]

画面遷移定義 XML で利用可能なタグは以下の通りです。

- [[hideLayout>Transition/HideLayout]]
- [[init>Transition/Init]]
- [[loadCSS>Transition/LoadCSS]]
- [[loadJS>Transition/LoadJS]]
- [[loadLayout>Transition/LoadLayout]]
- [[removeLayout>Transition/RemoveLayout]]
- [[showLayout>Transition/ShowLayout]]
- [[transition>Transition/Transition]]
- [[transitionDef>Transition/TransitionDef]]

** 記述例 [#cfaae0a7]

ルート要素に transition タグを記述し、その内部に init タグや transition タグを用いて遷移処理を記述します。init タグではアプリケーション実行開始時の初期遷移、transition タグではコンポーネントのイベント発生時の遷移処理を記述します。

#pre{{
<?xml version="1.0" encoding="UTF-8"?>
<eventDef>
  <event id="onload">
    <!-- ここにレイアウトの初期化処理を指定する -->
  </event>
<transitionDef>
  <init>
    <!-- 初期遷移: ログイン画面を表示 -->
    <loadJS fileName="login.js" />
    <loadLayout xmlFile="login.xml" target="divMaskat" show="true" />
  </init>

  <component id="searchButton">
    <event id="onclick">
      <!-- ここに GUI オブジェクトのイベント処理を記述する -->
    </event>
  </component>
</eventDef>
  <transition component="loginButton" event="onclick" branch="success">
    <!-- ログイン処理の成功時: 業務メニュー画面を表示 -->
    <hideLayout layout="login" />
    <loadLayout xmlFile="appmenu.xml" target="divMaskat" show="true" />
  </transition>

  <transition component="logoutButton" event="onclick">
    <!-- ログアウト処理後: ログイン画面を再表示 -->
    <hideLayout layout="appmenu" />
    <showLayout layout="login" />
  </transition>
</transitionDef>
}}

** 画面遷移定義 XML における注意事項 [#le292c92]

*** ファイル名の命名規則 [#s96a42c4]

画面遷移定義 XML はコンテナ HTML と同じフォルダ (ベース URL) にある transtion.xml というファイル名で読み込まれます。