# D-RexGXT
- GUI Design Tool for GWT -

日本語

English

- はじめに
- メインパネル
  - ヘッダーメニュー
  - 右クリックメニュー
- Component Tree
- コンポーネント

## はじめに

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のソースコードが生成されます。
  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は大きく以下のように分かれています。

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

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

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