S3UIフレームワーク

S3UI フレームワーク

XML や JSON を RESTful に扱う強力なバックエンドである S3XRC には、その利点を最大限に活用できるフロントエンドフレームワークがあります。 S3UI は ExtJS ベースのフロントエンドで、単に S3XRC のユーティリティにとどまらず、JSON でデータをやり取りし、ページ全体のリロードを回避することで、通信帯域を大幅に削減します。S3UIは、ユーザが Sahana Eden を使って行う様々なタスクのワークフローを簡単かつ迅速に作成できるようになっています。

現在の状態

概要

  • S3UI フレームワークは、 S3XRC 上で動くウィジェットを提供しています。S3UIフレームワークを使うことで、エンドユーザはワークフローの処理を素早く行えるようになります。
  • 現状では、S3UIは大きく3つの要素に分かれています。
    • グリッドビュー(Grid View)ウィジェット
    • ポップアップフォーム
    • Rheader タブ
  • その場でのリソースの編集・追加ができます。
  • S3UI フレームワークは ExtJS を介して JSON でバックエンドと通信します。

使い方

 S3UIの機能のビデオツアー

1. グリッドビューウィジェット 

Grid view sample

  • ツールバー上のボタンの機能 -
    • グリッド上の変更を適用するには、「変更を保存する(Save Changes)」を使います。バックエンド側で検証に失敗したデータは適用されません。
    • 間違った変更をしてしまったり、項目をたくさん作りすぎてしまって最初からやりなおしたいときは、「変更をもとに戻す(Undo Changes)」を押します。
    • 新しいレコードを追加するには「新規追加(Add New)」を使ってフォームウィンドウをポップアップします。
  • データカラム -
    • データをカラムごとに昇順または降順で並び替えるのに使います。
    • 下矢印をクリックすると、フィールドの表示ON/OFFを切り替えます。
  • データグリッド -
    • ログインすると、データの編集権限が付与されるので、グリッドは編集可能モードで描画されます
      • 描画方法
        • フィールドをクリックして編集モードに切り替えます。
        • 編集したフィールドは赤色に反転します。
        • 編集を終了したら「変更を保存する(Save Changes)」ボタンを押します。
  • アクション -
    • データの表示や削除のアイコンを表示します。
  • ボトムツールバー -
    • 複数ページにわたる項目を移動するには、ページ移動コントロールを使います。
    • 更新(Refresh)ボタンを使って、現在のビューを更新します。誰かが変更を行った場合に便利です。更新を行っても、現在のページの項目しかリロードしないので高速です。
    • ページサイズの選択 - たくさんの項目を一度に見たいときのために、ページあたり100項目まで変更できます。

2. ポップアップフォーム 

  • ポップアップフォームを使うことで、データの新規登録や既存のデータの更新を簡単に行うことができます。
  • グリッドビュー上で「新規追加(Add New)」ボタンを押すと表示されます。
  • 空のリスト上で「新規追加(Add New)」ボタンを押した場合にも表示されます。
  • 各リソースの表示ページ上で、ページ右上の「編集(Edit)」ボタンを押すと、更新フォームを表示します。
  • データの入力や変更を終えたら、「保存する(Save)」ボタンを押してタスクを完了します。
  • 変更内容を取り消すには「キャンセル」や「閉じる」を使います。(フォームを閉じて開き直すと、保存されなかった変更箇所はすべてもとに戻ります。)

3. タブビュー 

Screen shot 2010-08-19 at 2.08.59 AM.png

  • リソースページ上で、タブを使ってリソースの各要素のページに切り替えできます。
  • 開発者たちは上のリソース情報の各タブを Rheader と呼んでいるので、タブのことをRheaderタブといいます。
  • 各タブの内容はIframeになっていて、該当レコードのページを指しています。
  • 「タブ形式」は通常のビューを切り替えるのに使われています。

参考

Comments