D-RexGXT

はじめに

　D-RexGxtは、Google Web Toolkit(Ext GWT)での開発を支援するGUI画面デザインツールです。 D-RexGxt自身がGWTにより実装されているため、ブラウザーのみでExt GWTの画面開発が行えます。作成した画面はGWTのソースコードとして生成されます。また生成したソースコードを取り込むことも可能です。現在D-RexGxtの稼動サーバー（http://www.sweetie.atnifty.com/D-RexGxt2/）を公開しています。どこからでもブラウザーさえあればこのURLにアクセスして画面開発が行えます。

注：GWT（GoogleWebToolKit）は、従来JavaScript言語で開発されていたクライアント側のAjaxプログラムをJava言語で開発することができるフレームワークです。 GWTについては、http://code.google.com/intl/ja/webtoolkit/を参照してください。

Ext GWTはリッチインターネットアプリケーション開発用のJavaScriptフレームワークとして有名なExt JSの開発メンバーが開発したJavaライブラリーです。 Ext GWTについては、http://extjs.co.jp/を参考にしてください。

［サポートブログ］

D-RexGXTはブログ「ケーピーの技術ノート」でサポートする予定です
ご要望や必要に応じてぼちぼち機能拡張を行う予定です。よろしく。

動画デモ

２列のフォームを作る様子 ← 始まるまで少々時間がかかります

メインパネル

画面の右側に位置するのがメインパネルです。このメインのパネルを右クリックすると操作メニューが出ます。操作メニューから[add]を選ぶと、パネルに貼り付けるComponentを選択できます。 [add]からComponentを選択することで、クリックした場所に選択したComponentを貼りつけることができます。 LayoutContainer等にはさらに他のComponentを張ることが出来ます。（Componentによっては、ExtGwtのサンプルページ http://extjs.com/explorer/#overview にあるようなComponentのサンプルの形式になったものもあります。（AcordingLayoutSample,FormPanelSample等）

ヘッダーメニュー

file

New: 新しいメインパネルになり、編集中のComponentはすべて破棄されます。
Open File: GenerateされたGXTのソースコードファイルを読み込みます。
Save As: GenerateされたGXTのソースコードをファイルに保存します。
Generate: 編集中のComponentを作成するためのGXTのソースコードが生成されます。なお、ComponentのTitleに明示的に値を設定した場合は、その値がソースコードの変数名に反映されます。
Import: 生成したソースコードを入力するとComponentが再構築されます。
Add Style: このボタンを押すとダイアログが現れます。そのダイアログにcssを貼り付け、[add Style]を押すとcssが反映されます。

display

Toolbar: ONにすると画面上にToolBarを表示することができます。ここからドラッグアンドドロップで、Add機能と同様にComponentを貼ることが出来ます。（MS VBの開発みたいなものにしてみました。まだ工事中）

右クリックメニュー

クリックしたComponentの種類・名前の表示: Propertiesダイアログが開いて、該当のComponentの属性を変更できます。
add: その場所に貼り付ることができるComponentが種類別に表示されます。Componentを選択するとその場所に貼り付けることが出来ます。
html: クリックしたComponentのhtmlソースが表示されます。
Undo: ４回まで戻すことができます。
import: 生成したソースコードを入力すると、クリックした場所にComponentが再構築されます。
addModelGrid: 工事中
cut: Componentを切り取ります。
copy: Componentをコピーします。
remove: Componentを取り除きます。
resizemode: リサイズモードに変わり、選択されたComponentのサイズを変更できます。
クリックしたComponentのLayoutのクラス名(LayoutContainorの場合): Propertiesダイアログが開いて、該当のComponentのLayoutの属性を変更できます。
クリックしたComponentのLayoutDataのクラス名: Propertiesダイアログが開いて、該当のComponentのLayoutDataの属性を変更できます
ChangeLayout(空のLayoutContainorの場合): LayoutContainorのLayoutのクラスを変更できます
addButton: 該当のContent Panelの下部に、ボタンバーおよびボタンが追加されます。

properiesダイアログの値の設定に関する注釈

一部の属性の型に関しては、以下のフォーマットで入力してください

Rectangle: x,y,width,height
Margins: top,left,bottom,right
Point: x,y
Size: width,height
NumberFormat: NumberFormatのPatternの形式
DateTimeFormat: DateTimeFormatのPatternの形式

Component Tree

画面の左側に位置するのがComponentTreeパネルです。このComponentTreeパネル上に、編集中のComponentの階層構造が表示されます。パネル上のComponentにマウスをのせると、メインパネル上の該当Componentが色づけされます。 ComponentTreeの各アイテムはComponent同様、右クリックで操作、ダブルクリックでResizeMode、ドラッグアンドドロップが可能です。

コンポーネント

コンポーネントの種類

Compnentは大きく以下のように分かれています。

Layout：様々なLayoutを持ったLayoutContainer
Panel/Sample：xxxPanelクラスおよびSample Component
Tool/Menu：Menuやボタン類
Field：FormLayout上に貼れるField類
misc：その他

コンポーネントに対する機能

Componentをダブルクリックする事で、リサイズモード（マウスでリサイズ可能）になります。さらにダブルクリックする事で、リサイズモードは解消します。
Componentをドラッグアンドドロップして、別のコンポーネント上に移動できます。注：現在TreeItemのドラッグアンドドロップはメインパネルでは出来ません。ComonentTreeでは可能です。
Componentをctrlキーを押しながらドラッグアンドドロップすると、Copyできます。
GridのカラムもComponet同様に追加・変更・削除・ドラッグアンドドロップが可能です。

D-RexGXT - GUI Design Tool for GWT -