Ext 2.0 Gui Designer

[sierk]

Finally it's there a new stable version of the new Gui Designer for ExtJs 2.1.0.

With this designer you can create you own GUI by just drag and drop of ExtJs elements. The result is saved in a JSON file which can be loaded outside the designer.

For download use this external link. The link contains code and documentation in one file. Because of limitations of the forum we decided to stop adding attachments to this thread. Please used the link provided.

There is a running version which can be found on http://www.webblocks.eu/designer/index.php.

The main features of the designer are:

• Full support of drag and drop for all Ext xtyped elements
• Eventhandler can be added containing JavaScript
• Advanced options to connect Json design to caller
• Embbeded documentation
• Backend support to load and save json designs
• External wizard support

Hope you like my changes and I will continue to make new changes. If you have an idea, question or bug/problem please drop a message in this thread.

Sierk

Release history:
2.1.0 Visual Resize and New JsonParser[22/11/08]

• A compressed version of designer is added (Ext.ux.guid.plugin.Desginer-all.js)
• Added a new json parser therefor begin and end tags are no longer needed in code
• Visual resize added activated by context menu
• Visual move of element in absolute layout activated by context menu
• Added XType fallback to panel for unknown xtypes
• All xtypes which are loaded before guidesigner is loaded are now selectable
• Found a good solotion for property grid error
• Split single javascript files containing multiple classes into files
• Added "scope.!<VAR>" in json object, so you can create local objects if they don't exist
• Toolbox is forced to do a layout before showing.
• Changed path ExtJs version can be changed, still using 2.0.1 as base because of stablility
• You can now add you own property editors, by setting "editor" in properties.json
• Undo and redo are now keeping track of selected element
• Active item is now selected in code tree
• Codetree can now also be used beside drag drop in designer to reorganize code elements.
• Url options can now beused to configure designer window: window=1 (shows window mode) docked=1 (will dock designer) debug=1 (compression off)
• A error statusicon and tab have been added to show errors. Click on error icon on statusbar to show or hide detailtab
• A simple loader for javascript and stylesheets is added (require)
• Third party design elements can be configured (componentFiles) to be added to Components tree
• Components can be ExtJs version dependend, just set isVersion in component config.
• Wizard are now stored in wizard directory in json format.
• Added code to allow tabpanel selection
• When adding a second form into a form, the second form is transformed into layout
• ScriptEditor has been replace by CodeField this also resolves a number of bugs in this area
• You can drag you saved code to the designer, which will be loaded through JSONPanel or in case when shift key pressed or Repository is not supporting url data is appended
• Optionpanel added
• Resize of show window is stored in json and will be used when showing again
• Fixed a lot of small bugs
• Updated documentation

2.0.6 PHP Backend support[15/08/08]

• Added PHP File control thanks to Epsylon
• index.php is added again to release, wraps index.html
• Fixed problem with null values in json causing error message (layout wizards)
• Fixed undo problem, changes made with grid could not be undone
• Cleaned duplicated values from the propertyselection list
• Drag element, pressing shift changes to clone mode
• JsonInit is removed from redraw to increase performance
• Made code override for Ext.FormPanel so it does not crash on a empty item list
• Moved ExtJs to seperate folder, so you can choose your version of extjs
• Cleaned old code from subversion
• Workarround for error in property grid throwing error variable k

BugList/Open Issues see BugTracker

I will keep release history only for 3 release in this thread. Full history is within changes.txt which is include in the release download.

Because 2.1.0 is brand new and not allways compatible with 2.0.6 we left 2.0.6 as an forum download. Will be removed when i have made a zip file which will fit within forum limits.


For download use this external link. Attached version of 2.1.0 is compressed only

You can check out the version on subversion
svn://svn.webblocks.eu/GuiDesigner/
user : guid
password : guidesigner

[Mango_lier]

For the life of me, I can't find where to add the handler in the GUI.

[sierk]

A quick example:

1. Add a panel
2. On this panel add a button
3. Select added button
4. In the grid combobox type handler
5. Select in grid the handler and click to open the scripteditor
6. For example add the code: function(){alert('test')}
7. Apply the code and select an other item in grid to accept the enter value
8. Now hit the button and you should see an alert with test

Hopes this solves your question

Sierk

[Mango_lier]

Thanks. Now I understand, works like a charm. Can we now use it to add GridPanels and TreePanels?

[sierk]

Thanks. Now I understand, works like a charm. Can we now use it to add GridPanels and TreePanels?

Gridpanels and Treepanels can be supported by this version by adding a xtype. But because they use other objects they are more difficult to design and code.

In next release we will add a grid wizard that will help you adding the needed code. Tree panel will come later

Sierk

[Foggy]

Its possible to add tbar/bbar in visual manner instead of scripteditor?
And a menu would be nice to

BTW: nice additions to Tof's App. Maybe you guys could act in collusion

[franckxx]

Gridpanels and Treepanels can be supported by this version by adding a xtype. But because they use other objects they are more difficult to design and code.

In next release we will add a grid wizard that will help you adding the needed code. Tree panel will come later

Sierk

FANTASTIC !! ... grid and tree panel builder can be Usefull !

[krogebry]

Great work! I'm currently using a template driven system where I copy my layouts around to new applications, then tweak as needed. However, I think I might start using something like this instead.

[dearsina]

This is brilliant, and will make creating skeleton systems a breeze. One thing though, would it be possible to limit the parameter list to things that are only applicable for the element highlighted?

So if I'm "styling" a particular form element, only the parameters applicable to the form element would be selectable (or in some way highlighted).

That would make things easier (instead of having to scroll through a long list of attributes, you only scroll through the ones applicable), but more importantly, it would also be an excellent learning tool, where you could become better familiar with each element and its parameters.

[fallenrayne]

Hi,

I love your work on this, it is very usable and has some cool features. The one issue I am having with it though is that I tried adding a tbar/bbar to a panel. I tried using two methods:

1st: Added the tbar config option from the combo box and clicked into the scripteditor to add it.

2nd: I clicked on the Edit JSON button and added a tbar in there.

Both methods worked initially, but as soon as I tried opening the code again it would escape out all of the tbar code and starts throwing errors. It would try and place quotes around the tbar code and add slashes. Haven't had time to look into it to see what could be causing the escaping.

Thanks,