TOP設計・移行・活用> 画面デザイン
Biz/Browser
Biz/Browserで経営の効率化を実現する

第1回:リッチクライアントとBiz/Browser
著者:アクシスソフト  永井 一美   2005/9/14
前のページ  1  2  3  4
画面デザイン

   では、画面をデザインしましょう。本の一覧を表示させます。項目はCSVファイルで作成し、以下の通りです。
  • ISBN
  • 書籍名
  • 著者
  • 出版社

   こういった一覧を表示するコントロールとしてSpreadSheetというクラスがあります。

   そして、SpreadSheetに表示するCSVファイルを読み込むため、ボタンを用意します。Buttonクラスです。

   デザインはクラスセレクタから必要なクラスをドラッグ&ドロップでデザイン画面(先ほど作成したフォーム)に貼りつけます。

クラスセレクタ
図9:クラスセレクタ

   まず、Buttonを貼りつけ、タイトルをつけます。タイトルはインラインで入力、「読み込み」とします。

   次にSpreadSheetを貼りつけます。

ButtonとSpreadSheetの貼りつけ
図10:ButtonとSpreadSheetの貼りつけ
(画像をクリックすると別ウィンドウに拡大図を表示します)

   SpreadSheetの列は初期表示では1つだけです。先ほどのCSVファイルの項目は4つでしたので、列も4つにします。

子オブジェクトの挿入
図11:子オブジェクトの挿入

   オブジェクトビューからのポップアップメニューで列(SpreadColumn)を3つ増やします。

   そして、列のタイトルをつけます。デザイン画面は2つのタブがあります。「デザイン」と「スクリプト」です。タイトルは「スクリプトペイン」で記述します。

スクリプトビュー
図12:スクリプトビュー
(画像をクリックすると別ウィンドウに拡大図を表示します)

   このスクリプトペインで表示されているテキストが、実はCRSです。これが、ファイルとしてWebサーバに置かれることになります。スクリプトは、デザインペインにドラッグ&ドロップすることによって記述される文と直接記述する文がありますが、入力補完機能により、実質のコーディング量を抑えています。例えば「ti」と打ったときにTitleというプロパティを補完します。

   デザインビューに戻ると以下のようになっています。

デザインビュー
図13:デザインビュー


サーバからの受信記述

   それでは、ボタンを押下しCSVファイルをサーバから読み込み、表示する部分を作成します。クラスはプロパティとイベントを持っています。ボタン押下はButtonクラスのTouchイベントになります。イベントビューでTouchの部分をダブルクリックします。そうすると、スクリプトペインにTouchイベントのハンドラが記述され、そこに飛びます。

   イベントハンドラ内に、SpreadSheetにCSVファイルを読み込む記述をします。

イベントハンドラ
図14:イベントハンドラ
(画像をクリックすると別ウィンドウに拡大図を表示します)

   CSV用のクラスCSVDocumentを定義し、Getメソッドを利用し、サーバにリクエストを投げてレスポンス(CSVファイル)を受け取り、SpreadSheetに流し込みます。

   「<<」は流し込むための記述です。なお、CSVファイルはlocalhost\\bookにあるものとしています。この3行でサーバからのダウンロード、表示が完了です。


テスト実行

   Biz/Designer上でのテスト実行を行い、SpreadSheetの行/列幅を調整した結果が以下です。

結果
図15:結果

   Biz/Designerは豊富なデバッグ機能を持っていますが、Biz/Browserテスト実行時にプロキシとして動作し、通信をウォッチしています。

   「通信ログ」に通信状態が表示されています。

通信ログ
図16:通信ログ

   先ほど、スクリプトで記述した、sp.Get("http://localhost/book/book.csv");の結果です。ここをダブルクリックすると通信内容やHTTPヘッダ情報を見ることができます。

通信内容とHTTPヘッダ情報
図17:通信内容とHTTPヘッダ情報
(画像をクリックすると別ウィンドウに拡大図を表示します)

   WebサーバがIISであることや、実際の受信データ(CSVファイル)を確認することができます。応答時間も確認できますので、レスポンス性能の目安となります。

   次回は、実際に運用されているシステム事例をご紹介します。

前のページ  1  2  3  4


アクシスソフト 永井 一美
著者プロフィール
アクシスソフト株式会社  永井 一美
アクシスソフト株式会社 執行役員プロダクト事業部長
SI会社にてオフコンでのアプリケーション開発やメインフレームでのOS開発、PCでの開発、品質保証業務などを経験、SI事業部門の管理者を経てアクシスソフトに入社。入社時より一貫して製品事業に携わる。特にBiz/Browserにおいては、「確かなUIによりエンドユーザの生産性を高め業務に対するモチベーションを持っていただくことが、企業全体の生産性を押し上げる」との信念で推進している。


INDEX
第1回:リッチクライアントとBiz/Browser
  はじめに
  Biz/Browserの位置づけ
  CRS(チェイン・リフレクション・スクリプト)とは
画面デザイン