SourceForge.JP

Introduction

Please try Ext GWT by all means if you want to develop the rich Internet application as a Java programmer. And D-RexGxt must be useful when feeling like developing with Ext GWT.

D-RexGxt is GUI screen design tool that supports development with Google Web Toolkit(Ext GWT). Because D-RexGxt is developed by GWT, the screen development of Ext GWT can be done only by a browser. The made screen is generated as a source code of GWT. Moreover, it is also possible to import the generated source code.

Operation server (http://www.sweetie.atnifty.com/D-RexGxt2/) of D-RexGxt has been opened to the public now. The screen development can be done by accessing this URL as long as there is a browser from anywhere.


Note: GWT(GoogleWebToolKit) is a framework to be able to develop the Ajax program on the client side by the Java language. Please refer to http://code.google.com/intl/ja/webtoolkit/ for GWT.

Ext GWT (aka GXT) is a Java library that work on GWT that the development member of famous Ext JS developed as JavaScript framework for the rich Internet application development. Please refer to http://extjs.co.jp/ for Ext GWT.


Support blog

  • As for D-RexGXT, it is scheduled to support it by blog "Technological note of KP". Unfortunately this blog is made by only Japanese, but we will accept English comment.
  • We will enhanced if necessary. My best regards.

Animation demonstration

The main panel

Being located at the right of the screen is the main panel. The operation menu comes out when right-clicking in the panel. Component selected from "add" menu is pasted in the clicked place. On LayoutContainer,other component can be pasted. In these components, there are some components that became the form of the sample of component on sample page http://extjs.com/explorer/#overview of ExtGwt according to (AcordingLayoutSample and FormPanelSample, etc.).

The header menu

file
New
It becomes a new, main panel, and all component under the edit is annulled.
Open File
The file of the source code of GXT that generated by D-RxGxt is read.
Save As
The source code of GXT is preserved in the file.
Generate
The source code of GXT to make component under the edit is generated. When component's title was specified explicitly, it will be reflected in the variable identifier of source code.
Import
When the generated source code is input, Component is restructured.
Add Style
The dialog appears when this button is pushed. When css is put on the dialog, and add Style is pushed, css is reflected.
display
Toolbar
ToolBar can be displayed on the screen by turning it on. Component can be pasted here by drag and drop as well as the "add" function. (It made it to the one like the development of MS VB. but under construction still. )

Right-clicking menu

Kind and name representation of clicked Component
The Properties dialog opens, and The properties of the component can be set.
add
The selected component is pasted. It is possible to put it on the place by selecting component.
html
The html source of clicked component is displayed.
Undo
It is possible to return it up to four times.
import
When the generated source code is input, Component is restructured in the clicked place.
addModelGrid
under construction.
cut
Component is cut out.
copy
Component is copied.
remove
Component is removed.
resizemode
It changes into the resize mode. It is possible to resize it with the mouse.
Class name of Layout of clicked Component (For LayoutContainor)
The Properties dialog opens, and The properties of Layout of the component can be set.
Class name of LayoutData of clicked Component
The Properties dialog opens, and The properties of LayoutData of the component can be set.
ChangeLayout (For empty LayoutContainor)
Class of Layout of the component can be changed.
addButton
The button bar and the button are added under Content Panel of the correspondence.

Annotation concerning setting of value of properies dialog.

Please input the type of a part of attribute by the following formats.

Rectangle
x,y,width,height
Margins
top,left,bottom,right
Point
x,y
Size
width,height
NumberFormat
Form of pattern of NumberFormat
DateTimeFormat
Form of pattern of DateTimeFormat

Component Tree

Being located at the left of the screen is component tree panel. The layered structure of component under the edit is displayed on this component tree panel. When the mouse is put on component on the panel, correspondence component on the main panel can be colored. As for each item of component tree, it operates by right-clicking , resize mode by double-clicking, and drag and drop are possible as well as component in main panel.

Component

Kind of component

Compnent has be categorized as follows.

  1. Layout: LayoutContainer with various Layout
  2. Panel/Sample:xxxPanel class and Sample Component
  3. Tool/Menu:Menu and buttons
  4. Field: that can be pasted on FormLayout
  5. Misc: Others

Function to component

  • It becomes a resize mode(It is possible to resize it with the mouse) by double-clicking component. The resize mode is canceled by the another double-click.
  • It is a drug as for component and it is possible to move on another component by dropping it. Note: The drag and drop of TreeItem cannot be done in the main panel now. It is possible in comonent tree.
  • Copy can be done by drag and drop while pushing the ctrl key.
  • The addition, the change, the deletion, and drag and drop to the column of Grid are similarly possible like to component.