Ajaxフレームワーク ユーザーズガイド

F.1.1 ビューの概要

以下に、Ajaxページエディタのビューの概要を説明します。

[図: Ajaxページエディタのビュー]

• 設計ビュー
  UI部品を使用した画面をWYSIWYGで編集するビューです。
  以下の特長があります。
  • UI部品を、実行時エンジン(JavaScript)で表示する
  • 絶対座標を使用した編集が可能
  • パレットからマウスで選択した部品を配置
  • 選択した部品をマウスで移動、リサイズすることが可能
  • UI部品、HTMLタグに対してクリップボードを使用した編集操作が可能
  • 編集結果は、ソースビュー、プロパティビュー、アウトラインビューと連動

• ソースビュー
  UI部品を使用した画面のソースコードを編集するビューです。
  以下の機能を提供します。
  • UI部品の定義に従った入力支援機能
  • UI部品の定義に従ってバリデータの警告を抑止
  • 編集結果を、設計ビュー、プロパティビュー、アウトラインビューに反映

• パレットビュー
  HTMLタグおよびUI部品をパレットに表示して、設計ビュー上に配置するためのビューです。

• アウトラインビュー
  編集中の画面のタグの構造を表示するビューです。
  UI部品は、部品の定義構造を表示します。UI部品以外は、XHTMLの構造を表示します。

• プロパティビュー
  設計ビューで選択されたUI部品、ソースビューでキャレットのあるタグおよびUI部品、アウトラインビューで選択されたタグおよびUI部品のプロパティを表示するビューです。
  表示されたプロパティは、以下の方法で編集できます。
  • 直接、値を入力
  • コンボボックスにより値を選択

• プレビュー
  エディタのタブにより、設計ビュー/ソースビューとプレビューを切り分けて表示することができます。
  • [Design]タブ: 設計ビューとソースビューが表示されます。
  • [Preview]タブ: プレビューが表示されます。

  プレビューでは、Internet ExplorerのIEコンポーネントを使用して、実行時の画面表示およびブラウザで動作するイベント処理を確認することができます。

  
  

  プレビューで使用するJavaScriptファイルには、通信フレームワークおよびマッシュアップフレームワークに関するものは含まれていません。
  “実行環境の設定”を参照のうえ、クラスパスに以下のライブラリを設定してください。

  • 通信フレームワークの機能を利用する場合
    • ujircf.jar
    • uji.jar
  • マッシュアップフレームワークの機能を利用する場合
    • ujircf.jar
    • muf.jar
    • Tidy.jar
    • uji.jar

  

ビュー間の連携
ビュー間では、データが同期します。それぞれのビューで編集操作により変更があった場合は、ほかのビューにもその変更が反映されます。ただし、設計ビューで複数部品を選択して操作する場合、選択状態はほかのビューと同期しません。