SourceForge.JP

はじめに

 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
4回まで戻すことができます。
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同様に追加・変更・削除・ドラッグアンドドロップが可能です。