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 (http://www.webblocks.eu/designer.zip). 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 (http://www.webblocks.eu/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 (http://www.webblocks.eu/designer.zip). 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:

Add a panel
On this panel add a button
Select added button
In the grid combobox type handler
Select in grid the handler and click to open the scripteditor
For example add the code: function(){alert('test')}
Apply the code and select an other item in grid to accept the enter value
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 :D

[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 :D

:D:D:D 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,

[fallenrayne]

Ok, I kinda figured out the toolbars now, by adding a new element to the panel I want the toolbar in and changing the xtype to toolbar. Still having an issue when trying to create a menu.

Also, is it possible to set widths and heights that are non-pixel? In my application I have a border layout with West and Center having a width of 50%. Is this something that could be implemented into this?

[tof]

Also, is it possible to set widths and heights that are non-pixel? In my application I have a border layout with West and Center having a width of 50%. Is this something that could be implemented into this?

Yes, but not with a border layout.

For this I use an AbsoluteLayout :
http://extjs.com/forum/showthread.php?p=109429#post109429

[franckxx]

aie aie !!!

Grid and Tree Support.....ARG, so COOL !

I ge to test it immediately !!

THX for your SPEED 1.3 h

[sierk]

Ok, I kinda figured out the toolbars now, by adding a new element to the panel I want the toolbar in and changing the xtype to toolbar. Still having an issue when trying to create a menu.

Also, is it possible to set widths and heights that are non-pixel? In my application I have a border layout with West and Center having a width of 50%. Is this something that could be implemented into this?

On a panel you should be able to use tbar as an option and therefor don't have to play with xtype. (You first option) Menubar i have to look at because i never created one with the designer yet.

Note: Version 1.2 had problems with the javascript for tbar, has been fixed in version 1.3

For Height en Width i will change the type support so that it can be a precentage.

Sierk

[dearsina]

This might seem insignificant, but would be very useful, could you include a "Copy JSON" button, so you don't have to click on edit, highlight all, copy, close?

This tool has saved me sooo much time, I love it!

[sierk]

This might seem insignificant, but would be very useful, could you include a "Copy JSON" button, so you don't have to click on edit, highlight all, copy, close?

This tool has saved me sooo much time, I love it!

We have added this to the next release (1.4), but for Firefox (after user aproval) and IE. Buttons of menu can now be enabled or disabled.

Sierk

[dlethe]

Ok, I give up.. how do you save / load work-in-process so you can pick up the design process where you left off?

[Lev_A]

Try to create Table layout 3 column and 2 rows and results:

{
layout:"table",
layoutConfig:/*BEGIN*/{
columns:3
}/*END*/,
defaults:/*BEGIN*/{

}/*END*/,
items:[{
html:"col 0, row 0"
},{
html:"col 0, row 1"
},{
html:"col 1, row 0"
},{
html:"col 1, row 1"
},{
html:"col 2, row 0"
},{
html:"col 2, row 1"
}]
}

but must be:

{
layout:"table",
layoutConfig:/*BEGIN*/{
columns:3
}/*END*/,
defaults:/*BEGIN*/{

}/*END*/,
items:[{
html:"col 0, row 0"
},{
html:"col 1, row 0"
},{
html:"col 2, row 0"
},{
html:"col 0, row 1"
},{
html:"col 1, row 1"
},{
html:"col 2, row 1"
}]
}

[sierk]

Ok, I give up.. how do you save / load work-in-process so you can pick up the design process where you left off?

Currently you cannot save or load work then doing it manualy. Use the show json to copy and past you code. In the release 1.4 we are working on right now, we have added support for loading and saving to url. So use copy and past for the moment.

Sierk

[sierk]

Try to create Table layout 3 column and 2 rows and results:

Fixed this problem in code for next release.

[kusoft.net]

why ext2.0 GUI Desginer can't support label with
Ext.form.Label

waiting.......

who can help me

[sierk]

why ext2.0 GUI Desginer can't support label with
Ext.form.Label

waiting.......

who can help me

I don't understand you problem, please explain in more detials.
Form labels are supported if you use a formpanel.

[kusoft.net]

I use GUI Builder 1.3, I have bean add "form,{xtype:'label',text:'Label'}" in *Designer.js
When drag 'label' to in formpanel element,will not show,is error.


JSON CODE:


{
xtype:"form",
title:"Form",
layout:"absolute",
items:[{
xtype:'label',
text:'aa',
x:10,
y:10
}]
}

warning message:

Load config,typeerror

[sierk]

I use GUI Builder 1.3, I have bean add "form,{xtype:'label',text:'Label'}" in *Designer.js
When drag 'label' to in formpanel element,will not show,is error.


JSON CODE:


{
xtype:"form",
title:"Form",
layout:"absolute",
items:[{
xtype:'label',
text:'aa',
x:10,
y:10
}]
}

warning message:

Load config,typeerror

xtype 'label' is not supported by Ext as far my knowledge goes. So if you want to used it you have to register it.

Sierk

[kusoft.net]

ext2.02 form label have bean support by ext.

[sierk]

ext2.02 form label have bean support by ext.

I checked and you are correct that it is supported in version 2.02 of extjs, but current designer is bundeld with 2.01 and therefor it is not available. I will change the version of extjs in the next release and will add label support. If you need it in the short term just replace the version of extjs.

Sierk

[kusoft.net]

thank you for Sierk reply.

[kusoft.net]

I have updated to ext2.02 from ext.2.01.
how to set gui designer.form label can be selected, when I click the label,it can't be selected, only select label in tree panel.who help me?

[tavox]

AMAZING...

excelent work and thanks.

Best regards from Per

[sierk]

I have updated to ext2.02 from ext.2.01.
how to set gui designer.form label can be selected, when I click the label,it can't be selected, only select label in tree panel.who help me?

We fixed this in version 1.4 which will be released within a view days, but if you cannot wait add the following code.

Sierk


/**
Override the label id so id is selectable in guidesigner
*/
Ext.override(Ext.form.Label, {
onRender : function(ct, position){
if(!this.el){
this.el = document.createElement('label');
this.el.innerHTML = this.text ? Ext.util.Format.htmlEncode(this.text) : (this.html || '');
if(this.forId){
this.el.setAttribute('htmlFor', this.forId);
}
//Swap the ids, so it becomes selectable in designer
this.el.id = this.id;
this.id = this.id + '-';
}
Ext.form.Label.superclass.onRender.call(this, ct, position);
}
});

[kusoft.net]

thank you for Sierk reply.

[barsol]

I have a need to define my own composite controls and ran into issues where blank elements were inserted into the view on refresh. I modified appendConfig to loop my child controls and broke table support. I then added a catch for table and now it works great. There may be other 'gotchas', but this was the only one I was aware of.

Barry



// add a config to the tree
appendConfig : function(config, appendTo, doUpdate, markUndo) {

if (!appendTo) {
appendTo = this.treePanel.getSelectedNode() ||
this.treePanel.root;
}
if (appendTo==this.treePanel.root) {
if (config.window) appendTo.elConfig = config.window;
delete config.window;
var c = 0; //Check if there are other elements to add
for(var k in config) c++;
if (c==0) return appendTo;
}
var canAppend = this.canAppend(config,appendTo);
if (canAppend !== true) {
Ext.Msg.alert("Unable to add element", canAppend);
return appendTo;
}

var items = config.items;
delete config.items;

var id = config.id||(config._node ? config._node.id : Ext.id());
var newNode = new Ext.tree.TreeNode({id:id,text:this.configToText(config)});

for(var k in config) {
if (config[k]===null) {
delete config[k];
}
}
newNode.elConfig = config;


if (markUndo === true) {
this.markUndo("Add " + newNode.text);
}
appendTo.appendChild(newNode);


//
// Custom Control Support
//

// Load all child objects of this new component
// If this is a table that needs to add 'Element' nodes then do so
//
if (this.configToText(config) == "<i>table</i>") {
if (items && items.length) {
for (var i = 0; i < items.length; i++) {
this.appendConfig(items[i], newNode, false);
}
}
}
else { // Loop all child controls
for(var k in items) {
if (this.configToText(items[k]) != "Element") {
this.appendConfig(items[k], newNode, false);
}
}
}


if (doUpdate !== false) {
this.updateForm(false, newNode);
}
return newNode;
}

[sierk]

I have a need to define my own composite controls and ran into issues where blank elements were inserted into the view on refresh. I modified appendConfig to loop my child controls and broke table support. I then added a catch for table and now it works great. There may be other 'gotchas', but this was the only one I was aware of.

Barry


Barry can you provide a Json with you problem and how to reproduce it, so i can test it and see if there is a more general problem i can solve.

Sierk

[barsol]

Here ya go.

Barry


// Composite Controls
data.push(
['CompositeControls',
'Name',
'Name Control',
{
xtype:'fieldset',
title:'Name Control',
x: '0',
y: '0',
width: 'auto',
height: 'auto',
style: 'background:#dfdfdf;',
items:[{
xtype:'textfield',
fieldLabel:'First Name',
name:'textvalue'
},{
xtype:'numberfield',
fieldLabel:'Last Name',
name:'numbervalue'
},{
xtype:'datefield',
fieldLabel:'DOB',
name:'datevalue'
}],
autoHeight:true
}
],

['CompositeControls','SSN',
'A panel containing form elements',
{
xtype:'fieldset',
title:'SSN Control',
items:[{
xtype:'checkbox',
fieldLabel:'SSNCanadian',
name:'Canadian'
},{
xtype:'numberfield',
fieldLabel:'Number',
name:'numbervalue'
}],
autoHeight:true
}
]
);

[manzanitatech]

Thanks for this great tool. I think it is going to make my life easier.

Is it possible to populate some tree nodes in the root node in the tree panel? If so how would you do it? I'm want to add some static nodes to be able to mock up a screen to show what it would look like when it is plugged into the back end (which is not written yet.)

[Rich Kucera]

Thanks, this'll be nice, for the detail views, for the grids too for that matter :-)

[tof]

Hi,
I (at last) put a license on the GUI Builder.
Sorry I should have done this before !

So could you please include the gpl file (named COPYING) in your ZIP ?

see you

[sierk]

Hi,
I (at last) put a license on the GUI Builder.
Sorry I should have done this before !

So could you please include the gpl file (named COPYING) in your ZIP ?

see you

We just released version 1.4 and this has the license in header and file.

Sierk

[kaki]

Great work! :D:D

[mattup]

I may need to imbed Gui Designer in another application, what is the best way to accomplish this?

[sierk]

I may need to imbed Gui Designer in another application, what is the best way to accomplish this?

You can do this in two ways:
Always include the JsonPanel and Designer javascript files and then
A. Place it in a json file as a design element in you designer and load this json file with the JsonPanel.

new Ext.Viewport({
layout: 'fit',
items : new Ext.ux.JsonPanel({autoLoad:'json/designer.json'})
}).show();
or B. Just include use it as a object.

new Ext.Viewport({
layout : 'fit',
items: new Ext.ux.Designer({border:false,customProperties : true})
}).show();

You should choise the solutions which fits your coding style, the viewport can be any other object that can contain a panel. Like for example a panel.

Adding the designer as a design element can be done by adding the following code line to the Components config item in index.html. In the version 1.5 (current under development) we will have added th designer as advanced element with property support.

Components : [
['Designer','Designer','The designer',{xtype:'designer'}]
],

Sierk

[dchapiesky]

Sierk,

Where do we find the latest 1.4 release? Do we look for an attachment in the forum, or do you have a site where is made available?

I'm use to sourceforge and javascript distribution is totally foreign to me.

Anyway - extJS + GUI Builder = Best Thing I've Seen In A Long Long Time.... Kudos to you...
- Daniel

[sierk]

Sierk,

Where do we find the latest 1.4 release? Do we look for an attachment in the forum, or do you have a site where is made available?

I'm use to sourceforge and javascript distribution is totally foreign to me.

Anyway - extJS + GUI Builder = Best Thing I've Seen In A Long Long Time.... Kudos to you...
- Daniel

Release is in first item of this thread, just click on the attachment.

Sierk

[kaki]

label can not use. 8-|

[sierk]

label can not use. 8-|
As of version 1.4 GuiBuilder is bundled ExtJs 2.02. This version of ExtJS is required to support label (Element is in Forms). Have tested this on IE and FireFox.

Sierk

[dfx]

Hello to all!

I am new to ext and i would need some help. I am doing a litlle modification with gui designer ver. 1.3 and i would like to know, where and how can i disable panels ( in case i want to disable elements tree upper on left site.... how and where can i do this in code ? ).. i would really need some help...

Thank you very much,

DFX

[sierk]

Hello to all!

I am new to ext and i would need some help. I am doing a litlle modification with gui designer ver. 1.3 and i would like to know, where and how can i disable panels ( in case i want to disable elements tree upper on left site.... how and where can i do this in code ? ).. i would really need some help...

Thank you very much,

DFX

To disable a element select the disabled option from the add combobox and hit enterkey this will add the disabled option to item grid and from there you can put it to true.

Sierk

[dfx]

Hello!

How do u mean that ?? i dont think u understand me .. i would like to modify code, so that whole designer would look different... i have already deleted bottom elements ( i need some kind of form generator, so user can generate his own forms, but i would like to remove some options that default designer has, like it is tree window, i have already removed some components, i left just forms, removed panels also at bottom components categories... ) ... the problem is i dont know where and how can i remove whole upper left element tree becouse i dont want users to see it ...

Thank you very much,

DFX

[sierk]

Hello!

How do u mean that ?? i dont think u understand me .. i would like to modify code, so that whole designer would look different... i have already deleted bottom elements ( i need some kind of form generator, so user can generate his own forms, but i would like to remove some options that default designer has, like it is tree window, i have already removed some components, i left just forms, removed panels also at bottom components categories... ) ... the problem is i dont know where and how can i remove whole upper left element tree becouse i dont want users to see it ...

Thank you very much,

DFX

You cannot remove treepanel because this is the container which store the code parts for each element. We create the json by walking down this tree.

Sierk

[dfx]

Hello!

So that means that i cannot visual remove any panel ? :(

[sierk]

Hello!

So that means that i cannot visual remove any panel ? :(

No this means that you cannot remove the treepanel. All others can go.

Removing the treepanel would involve major code changes. The json structure should be converted in into a inernal object without a visual components.

Sierk

[dfx]

Hello!

Thank you very much for your help... ok than i will let this tree, what else can i do... how can i remove a property grid maybe ??

[sierk]

Hello!

Thank you very much for your help... ok than i will let this tree, what else can i do... how can i remove a property grid maybe ??

Just remove gird and remove event from treepanel which loads the grid.

Sierk

[flatburger]

i try the GUIDesigner, and I got the JSON

how to use this JSOn, and make it run on the Dialog

this is the case, i still dont get how it work


{
xtype:"panel",
title:"Panel",
items:[{
xtype:"tabpanel",
activeTab:1,
items:[{
xtype:"panel",
title:12,
layout:"anchor"
},{
xtype:"panel",
title:13,
layout:"fit"
},{
xtype:"panel",
title:14,
layout:"anchor"
},{
xtype:"form",
title:"Form",
items:{

}
},{
xtype:"form",
title:"Form",
items:{

}
}]
},{
xtype:"panel",
title:"Panel"
}]
}

[sierk]

i try the GUIDesigner, and I got the JSON

how to use this JSOn, and make it run on the Dialog

this is the case, i still dont get how it work


Save the json into a file and use code below or use it as a config item of an other element.

You can load the json file by using the code below, don't forget to include localHXR and jsonpanel.


new Ext.Window({
title : 'Demo',
width:600,
layout:'fit',
items : new Ext.ux.JsonPanel({autoLoad:'yourfile.json'}) ,
modal : true,
maximizable : true,
closeAction : 'close'
}).show();

Sierk

[flatburger]

can help me to fixed this?


/*
* Ext JS Library 2.0 Beta 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif';

Ext.onReady(function() {

var window = new Ext.Window({
title: 'User Management',
width: 500,
height:300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
//items: form, // FormPanel
items : new Ext.ux.JsonPanel({autoLoad:'/json/jsondesigner.json'}) ,
buttons: [{
text: 'Send',
handler: function () {

}

},{
text: 'Cancel'
}]
});





window.show();
});

[sierk]

can help me to fixed this?
Your code works: I just wrapped it in html see results below. If there is still a problem please describe it better.

Sierk
Note: that you can also add you buttons and all others items within the designer. Leaving only the json to load.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- The ExtJs base 2.02 -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>

<!-- The Gui Designer -->
<script type="text/javascript" src="js/Ext.ux.JsonPanel.js"></script>
<!-- Only needed because json file depends on them, as of version 1.6 these are also not longer needed -->
<link rel="stylesheet" type="text/css" href="css/designer.css" />
<script type="text/javascript" src="js/Ext.ux.Designer.js"></script>
</head>
<body>
<script>

Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif';

Ext.onReady(function() {
var window = new Ext.Window({
title: 'User Management',
width: 500,
height:300,
minWidth: 300,
minHeight: 200,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
//items: form, // FormPanel
items : new Ext.ux.JsonPanel({autoLoad:'json/designer.json'}) ,
buttons: [{
text: 'Send',
handler: function () {
}
},{
text: 'Cancel'
}]
});
window.show();
});
</script>
</body>
</html>

[flatburger]

work well now. :)

this is a cool idea, the form work well.

i will fill the input form with value now from another JSON.

see diagram.

I can see your GUIDesigner will fit my projects.. cimande

hope can share the code soon

right now we just use ExtJS there,

[sierk]

Hi all,

As you can see whe just released version 1.6 of the designer. Now the code is stable enough for me to use as a production tool. I will start documenting the code and cleaning it up (version 1.7) . I have some idea's:-? what to do after that but input of people how use the tool is welcome. Please add you request as a reply to this thread.

Sierk

[flatburger]

i am mapping the json syntax with the extjs parameter, and also the idea to run it on your GUIDesigner

any idea to map it as fast as possible

because i want to map with my own MDA DB model.

F

[sierk]

i am mapping the json syntax with the extjs parameter, and also the idea to run it on your GUIDesigner

any idea to map it as fast as possible

because i want to map with my own MDA DB model.

F
What do you trying to do. I don't understand. Give a example. It sounds like one of the idea's we have to create visual datamapping tool for stores so it is more easy to fill forms or grids.

Sierk

[flatburger]

right

i have a project called cimande, it use struts2, spring and hibernate

and we add compiere/adempiere meta data to the code, and we try to implement the s2-json

so the metadata (mapped using hibernate) will become json

this sound like hibernate2json project

but i want my meta data become like your json

see this model

http://flickr.com/photos/fthamura/2345346708/


every window have tab and field, tab and field mapped to table db and column db

the problem is type

a field can have a reference, and it must map with the json, like max length, type, integer etc

F

[sierk]

right
i have a project called cimande..

Hi i see what you want todo, but where could I help you, if you take the designer into account ?

Sierk:-/

[flatburger]

I just wait your designer, and let we develop the rest

take a look of this architecture..

http://www.flickr.com/photos/fthamura/2344519319/

and this is my metadata that will become json, which will be consume as the layout designer

http://www.flickr.com/photos/fthamura/2345346708/

i wish there is JSON in GUI Designer of yours that can become a json, and save in my metadata

i am glad to change my meta specification to your json.

[flatburger]

why dont the GUIDesigner have their own website..

and make a demo in your webiste like demo.extguidesigner.com

so anyonw can see and try your code, without have to visit this forum

ofcourse put and write in this forum also important

[sierk]

why dont the GUIDesigner have their own website..

and make a demo in your webiste like demo.extguidesigner.com

so anyonw can see and try your code, without have to visit this forum

ofcourse put and write in this forum also important

It has a working site:
The Basic Panel using cookies (http://www.projectspace.nl/index.html)
The PHP version with backend support (http://www.projectspace.nl/index.php)

Based on you comments i will start to make a more general starting page on my website. For now i just maintain the first entry of this thread.

Sierk

[psavolai]

Hi,
I just downloaded the version 1.6 and tried to open it from local file and from my local IIS.
In both cases I get the same result:
"Failed to load designer json file undefinedExt.ux.Designer.ComponentsDoc.json"

The version on your site seems to be working though.

Petri.

[sierk]

Hi,
I just downloaded the version 1.6 and tried to open it from local file and from my local IIS.
In both cases I get the same result:
"Failed to load designer json file undefinedExt.ux.Designer.ComponentsDoc.json"

The version on your site seems to be working though.

Petri.

Localy it should work, I now with IIS you sometimes have to configure ISS to let JSON files pass.

If that does not work try to remove the following line from Ext.ux.JsonPanel.js:

url += (url.indexOf('?') != -1 ? '&' : '?') + '_dc=' + (new Date().getTime());
This will remove the disabling of caching but should not break the code and will allow files to behandeld in a static way.

Sierk

[nickyqu]

Failed to load designer json file undefined Ext.ux.Designer.ComponentsDoc.json

[nickyqu]

Failed to load designer json file undefined Ext.ux.Designer.ComponentsDoc.json

[sierk]

Failed to load designer json file undefined Ext.ux.Designer.ComponentsDoc.json

Found the problem; it is in CodePress. It is disabling the scripts below it self in firefox. Causing the path of the designer not to be visible any more. Just remove the following line from index.html will remove the problem

<script id="js/codepress/Ext.ux.CodePress.js" type="text/javascript" src="js/codepress/Ext.ux.CodePress.js"></script>
This will disable codepress, but rest will work.

I have fixed it in version 1.7. which is available for download at first thread item.

Sierk.

[rtrocc]

Hey Sierk,

I just wanted to thank you for such a great tool. It is the ideal wysiwyg builder for any ext developer as it provides the structure that can then be fine tuned. Saves me so much time fiddling with options.

Thank you :)

[psavolai]

wow, that was fast.
the 1.7 release really does work as you said.
Thanks man.

I just spent a few weeks learning Dojo and building a biggish application with it.
Seeing ext makes me wish I didn't, but such is life ...
...so I decided to port the app over to ext.

To me this Gui designer seems to be the holy grail of Ajax development, but to ensure that I
get on board as soon a as possible there are some things that I'd like to ask:

I have a three pane structure where pane 1 is accordion menu, pane 2 is selection tree,pane 3 is the record editor area.
in Dojo I use code llike this to load the contents (and scripts) of pane 3:

function openForm(formName,pars,msg) {
dojo.xhrPost({
url: formName,
load: function (data) {
dijit.byId('recordpane').setContent(data);
if (msg) statusMessage(msg);
},
error: function (data) {
console.log('oijoi:'+data.message);
reportError("Server error ,code :" + data.status);
},
content: pars
});
}


This replaces the htmlcontents of pane 3 and dynamically loads in attached scripts which become callable from other panels as soon the panel is fully loaded.

Can I do the same with your jsonPanels ?

In the scripts I have a scheme where all the loaded panels declare scripts with same name, so the main panel can operate on it regardless of the actual datatype.
In Dojo these script get nicely overwritten when subsequent panel loads are performed.
I'm pretty sure that there are no memory leaks either.

Would this work the same way with your jsoPanels ?


One of the most difficult things with all these constantly appearing new tools is to understand the inteded usage and workflow. To you it must be obvious, but it is far from obvious to me. Even after glancing the source code it is still not quite clear.

To ease the learning curve it would be great if someone made a youtube video
where one would build a simple page with the Gui designer, add some event handlers and then use that page in the context of some toy application. (full circle so to speak)

This would propably lead to situation where all the newbies like me would not flood this forum with silly questions.


anyways , thanks for such a great tool.

petri.

[sierk]

wow, that was fast.
the 1.7 release really does work as you said.
Thanks man.
......
petri.

Hi,

I am currently working on creating source documentation, including some examples. A draft version of this can be found on http://www.projectspace.nl/doc. I find it a good idea to create a screencast on how to use the designer and will see if i can find the time to do it after the documentation has finished.

You question on how to load a Json panel on a click event triggered me that i have to test the function load on the JsonPanel. Will do this in next release. But for now you could give it a try:
jsonpanel.load({
url: "your-url.php",
params: {param1: "foo", param2: "bar"}, // or a URL encoded string
callback: yourFunction,
scope: yourObject // optional scope for the callback
});

Required JavaScripts or Stylesheets can be added to the JSON created within the designer by setting required_js,required_css on the root of the designer tree. These files will be loaded, if not allready, before the json file is evaluated.

Sierk

[devnull]

I just downloaded the 1.7 version to replace my older version and unzipped it onto my webserver, but upon loading it (both the gui designer within the php version and loading the designer directly) i am getting a 'this.layout.layout is not a function' deep within ext-all.js, looks like in initComponent. I wonder if perhaps there is some configuration I need to do to localize it to my environment, but cannot find any docs to that effect.
Any ideas?
I can post more details if it helps any.

[sierk]

I just downloaded the 1.7 version to replace my older version and unzipped it onto my webserver, but upon loading it (both the gui designer within the php version and loading the designer directly) i am getting a 'this.layout.layout is not a function' deep within ext-all.js, looks like in initComponent. I wonder if perhaps there is some configuration I need to do to localize it to my environment, but cannot find any docs to that effect.
Any ideas?
I can post more details if it helps any.

Does it work locally ? Because it sound like a problem we had in version 1.5, so make sure all files are replaced.(Some only change in caps). If not send me a private message with more details and i will see how i can help you. Perhapse it's a bug. When sending private message please also include some details about your server and the json

Sierk

Perhapse it can help to set option caching:false when creating the designer(index.html). This will force loading of javascripts and json not to be chached.

[devnull]

I am not convinced yet that its a problem with your code, the errors seem weird and it works fine in IE so I will dig into it a bit more.

[psavolai]

Thanks for help Sierk.

So i started to experiment and design my Dojo app port.
After few hours of goofing it was coming together quite nicely, expect that i don't quite understand the mechanics of creating a toolbar in the GuiDesigner.
I understand that I can add an array atrribute called tbar and have the buttons live there.
but in what format ? what exactly do i type in the editbox ?

I'm sure that sooner or later I will figure it out.
But having your docs finished (or few screencams ) will fix all these types of worries.

Sierk should nor spend his time answering questions here, he should be writing the docs.
Anyone else care to explain the toolbar format for me ?

Petri.

[psavolai]

Hi guys,

I understood from sorted mails here in the forum that is it possible to use the FormPanel
in such a way that it arranges the fields and their lables in two or three columns while still
occasionally having some elements which span more than one column.

Very much like a html table would behave.

Sort of what this guy has at the bottom of his blog entry:
http://www.danvega.org/blog/index.cfm/2008/1/31/Ext-Forms-Using-cfExt

How can I build a form like this with GuiDesigner ?

Sorry to ask, but again this is not obvious when looking at the Designer.

petri.

[psavolai]

Hi (again),

tried to use the accordion and dropped one into a column of my three column layout.
Works fine...
... except that i can't get it to fill the container area, like the accordion in Desktop sample does.

any ideas ?

Petri.

[sierk]

Hi guys,

I understood from sorted mails here in the forum that is it possible to use the FormPanel
in such a way that it arranges the fields and their lables in two or three columns while still
occasionally having some elements which span more than one column.

Very much like a html table would behave.

Sort of what this guy has at the bottom of his blog entry:
http://www.danvega.org/blog/index.cfm/2008/1/31/Ext-Forms-Using-cfExt

How can I build a form like this with GuiDesigner ?

Sorry to ask, but again this is not obvious when looking at the Designer.

petri.

Just drop a tablelayout from layout section on your panel. Set number of columns and if a column should span more then one column set rowspan as property.

Sierk

[sierk]

Hi (again),

tried to use the accordion and dropped one into a column of my three column layout.
Works fine...
... except that i can't get it to fill the container area, like the accordion in Desktop sample does.

any ideas ?

Petri.

Did you set the layout to fit ?

[sierk]

Thanks for help Sierk.

So i started to experiment and design my Dojo app port.
After few hours of goofing it was coming together quite nicely, expect that i don't quite understand the mechanics of creating a toolbar in the GuiDesigner.
I understand that I can add an array atrribute called tbar and have the buttons live there.
but in what format ? what exactly do i type in the editbox ?

I'm sure that sooner or later I will figure it out.
But having your docs finished (or few screencams ) will fix all these types of worries.

Sierk should nor spend his time answering questions here, he should be writing the docs.
Anyone else care to explain the toolbar format for me ?

Petri.


The tbar of the designer looks something like this.

tbar : [{
text : 'Save',
tooltip : 'Save the design file',
iconCls:'icon-save',
disabled : true,
id : this.FBSaveBtn,
handler: function() {this.saveConfig},
},{
text : 'Reload',
iconCls:'icon-reload',
tooltip : 'Reload the design file',
handler: function (){
this.markUndo("Reload");
this.loadConfig();
Ext.getCmp(this.FBSaveBtn).disable();
}
}]

[psavolai]

Did you set the layout to fit ?

Which layout, the panels ?, accordionpanels ?
I tried both , to no avail.

Are you saying that if you take a new panel, drop an accordion onto it
your accordion will fill the content area ?

since mine doesn't and I cant make it do so no matter what I try .

Petri.

[sierk]

Which layout, the panels ?, accordionpanels ?
I tried both , to no avail.

Are you saying that if you take a new panel, drop an accordion onto it
your accordion will fill the content area ?

since mine doesn't and I cant make it do so no matter what I try .

Petri.

Perti,

Send me a private message, with the json you currently created and a good description what you want to do and i will see if i can make some kind of demo for you.

Sierk

[psavolai]

Perti,

Send me a private message, with the json you currently created and a good description what you want to do and i will see if i can make some kind of demo for you.

Sierk

Funny thing.
I finally gave up and started from other direction.
I took the "complex layout"-example and started modifying the code and voila, the accordion works exactly as it is supposed to.
So there is big difference if the ui is created purely with code or from json.

For some reason I cannot achieve the same behaviour with GuiDesigner.
So I'll go with what works.

You should maybe not waste your time on this, except if you really want to know
how the tool Generated code behaves differently from the one that is in "complex layout".

thanks,

Petri.

[sierk]

Funny thing.
I finally gave up and started from other direction.
I took the "complex layout"-example and started modifying the code and voila, the accordion works exactly as it is supposed to.
So there is big difference if the ui is created purely with code or from json.

For some reason I cannot achieve the same behaviour with GuiDesigner.
So I'll go with what works.

You should maybe not waste your time on this, except if you really want to know
how the tool Generated code behaves differently from the one that is in "complex layout".

thanks,

Petri.

Still I would like to know what is the problem, so i would like to get the code so I can see how to make it work in the designer. Because also complex layouts should be easy to create.

Sierk

[psavolai]

Still I would like to know what is the problem, so i would like to get the code so I can see how to make it work in the designer. Because also complex layouts should be easy to create.

Sierk

So this is a clip which shows how the accordion wont fill the container area:
http://www.wainotar.com/siirto/accordion.wmv

I've tried all sorts of thinkable and unthinkable attributes and no result, until I started creating accordion by code like in the Complex-example.

here's a very short clip of the structure that I'm trying to achive: (this is the dojo version)
http://www.wainotar.com/siirto/jesblack.wmv

petri.

[sierk]

So this is a clip which shows how the accordion wont fill the container area:
http://www.wainotar.com/siirto/accordion.wmv

I've tried all sorts of thinkable and unthinkable attributes and no result, until I started creating accordion by code like in the Complex-example.

here's a very short clip of the structure that I'm trying to achive: (this is the dojo version)
http://www.wainotar.com/siirto/jesblack.wmv

petri.

Thanks for your video. It made the problem clear i made a JSON that shows that it works, but you have to remove property autoHeight. This causes your problem. In next release we added this option to wizard

Sierk

And then use the following JSON to see that it works:

{
layout:"accordion",
xtype:"panel",
title:"Accordion",
defaults:/*BEGIN*/{html: '&lt;empty panel&gt;', bodyStyle:'padding-top:20px; text-align:center;font-style:italic;color: gray;font-size:11px;'}/*END*/,
items:[{
title:"Panel 1"
},{
title:"Panel 2"
},{
title:"Panel 3"
},{
title:"Panel 4"
}],
window:{
height:500
}
}

[psavolai]

It works.
thank you very much Sierk.

I hate to ask you, but I spent this afternoon and evening (it's 21.40 here in Finland now)
searching for a clear and concise example on how to use the generated Json files properly in the context of an application.
... needles to say that I found none.

I have two basic use cases:

1. At application init create needed panels and such.
" this is easy, just copy the generated code json literally to the constructor call ".
... and assignt it to what ?
... and what if I'd rather have the json files in separate files, how would I suck them in ?
... which portion of files (just the items, or all of it ?)

2. Dynamically, after a click on a button, load some form and display it on the ui
- simple setup :
two panels on borderlayout, first one having two buttons and the other panel, well, just lying there , empty.
- user clicks on first button: load the contents of "panel1.json" in the place of the original panel2
- user clicks on button two: load the contents of "panelx.json" in the place of original panel2


To me these use cases represent the basics of form handling in web applications.
Sorry for being a little thick, but I just can't get a clear picture from the docs that are available.

If you describe the steps to me (or even better, show me a working example) I will promise to make screencams out of the solutions and post them for future generations .

Petri.

[devnull]

A small bug that I had to fix on my system: (index.php line 75)


$data = stripslashes((isset($_POST['data'])) ? $_POST['data'] : null) ;

note the addition of the stripslashes function, I was ending up with extra slashes that were causing invalid json.
If it matters, my server platform is apache2 w/ php5 on linux.

[devnull]

It works.
thank you very much Sierk.

I hate to ask you, but I spent this afternoon and evening (it's 21.40 here in Finland now)
searching for a clear and concise example on how to use the generated Json files properly in the context of an application.
... needles to say that I found none.

The generated json can be fed to anything that accepts a lazy render config object. which should be anything that is based off of Ext.Component, but will typically be viewport or panel.


I have two basic use cases:

1. At application init create needed panels and such.
" this is easy, just copy the generated code json literally to the constructor call ".
... and assignt it to what ?

new Ext.Panel('your json here');


... and what if I'd rather have the json files in separate files, how would I suck them in ?
... which portion of files (just the items, or all of it ?)

However you wanted. Generally Ext.Ajax.request, but you might also look into the remoteComponent extension that I have seen referenced.


2. Dynamically, after a click on a button, load some form and display it on the ui
- simple setup :
two panels on borderlayout, first one having two buttons and the other panel, well, just lying there , empty.
- user clicks on first button: load the contents of "panel1.json" in the place of the original panel2
- user clicks on button two: load the contents of "panelx.json" in the place of original panel2

You would need to have code that would clear out (destroy) the items of the target panel, then get the new json (via ajax most likely, as above) and add it to the target panel. Note that I think this is a rather unusual use case, as it is not very good coding practice to be actually modifying what should be static portions of the layout. More common practice would be to use tabPanels and Ext.Windows, which should accept the json unmodified.



To me these use cases represent the basics of form handling in web applications.
Sorry for being a little thick, but I just can't get a clear picture from the docs that are available.

If you describe the steps to me (or even better, show me a working example) I will promise to make screencams out of the solutions and post them for future generations .

Petri.
You seem to be interested in using snippets of json to modify a layout at runtime, which as I mentioned should be avoided. The way I see it, the application's main interface should be described by a single config, which is generally included in the index.html and fed to viewport. Dynamic portions of the ui are best created with tabPanels (to which new tabs are easily added) and popup Ext.Windows. To some extent I could see a cardLayout being usefull as well.

[sierk]

A small bug that I had to fix on my system: (index.php line 75)


$data = stripslashes((isset($_POST['data'])) ? $_POST['data'] : null) ;

note the addition of the stripslashes function, I was ending up with extra slashes that were causing invalid json.
If it matters, my server platform is apache2 w/ php5 on linux.

Will give it a test myself and if it works will add it to the code of next release

Sierk

[sierk]

It works.
thank you very much Sierk.

I hate to ask you, but I spent this afternoon and evening (it's 21.40 here in Finland now)
searching for a clear and concise example on how to use the generated Json files properly in the context of an application.
... needles to say that I found none.
Petri.

There are two ways howto work with JSON which one you choose is depends on what you belive in:

Use JSON only for layout (no javascript) and put all code into a JS file
Use JSON with behavioral javascript included in JSON

If you are a beliver of the first one you can use the designer to create you structure and copy it into your code like this:

... new Ext.Panel(... JSON ..)
or you save the json and load it, use index.php will make this easier.

.. new Ext.ux.JsonPanel('url to your json file')

If you are a beliver of the second option as i am. You put all Behavior Code in the JSON file using the designer and load it using the Ext.ux.JsonPanel. You create only new components if the functionality is so common that it should be implemented in a seperate class.

Take a look at the desginer.json which is include in the code tree. This json includes other javascript and stylesheet used by the code in the json. With the following html you create a starting page, just replace the designer.json with your own url.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="icons/favicon.ico" >
<title>ExtJs Gui Designer</title>
<!-- The ExtJs base 2.02 -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>

<!-- Whe load Gui Designer through used of JSON which includes all needed files -->
<script id="js/Ext.ux.JsonPanel.js" type="text/javascript" src="js/Ext.ux.JsonPanel.js"></script>
</head>
<body>
<script>
new Ext.Viewport({
items : new Ext.ux.JsonPanel({autoLoad:'json/designer.json'}),
layout: 'fit'
}).show();
</script>
</body>
</html>


So you have now a starting page that is filled by a external json. What you now could do is create a primary json screen which contains a JsonPanel and secondary screens json files which should be autoloaded into the internal panel of the primary json container dynamicly. The easiest way to load a json is just call the load method or using the autoload config option of the JsonPanel with the url.

Somewhere today i will make an example at http://www.projectspace.nl/index.php which explains these concepts. The designer.json is there allready available and can be a good starting point.

Sierk

[psavolai]

Thanks Sierk and devnull.

As Sierk noticed I am a follower of the "second" approach.
My apps are usually partitioned exactly the way he described:
- a smallish global-pool of common functionality including a loader that swaps in the handlers of specific datatypes as they are needed.

( I have my reasons to do so, believe me)

>So you have now a starting page that is filled by a external json. What you now could do is >create a primary json screen which contains a JsonPanel and secondary screens json files >which should be autoloaded into the internal panel of the primary json container dynamicly. >The easiest way to load a json is just call the load method or using the autoload config >option of the JsonPanel with the url.

It's the actual steps for loading and assigning the secondary screens that I'm looking for.

Pseudocode:
delete (outerJsonPanel.innerJsonPanel); // to prevent leaks
outerJsonPanel.innerJsonPanel = new jsonPanel(autoload,url); // suck it in
outerJsonPanel.doLayout(); // or whatever

I hope that your working example of dynamic loading will make this clear for me (and others).

cheers,

Petri.

[sierk]

Thanks Sierk and devnull.

As Sierk noticed I am a follower of the "second" approach.
My apps are usually partitioned exactly the way he described:
- a smallish global-pool of common functionality including a loader that swaps in the handlers of specific datatypes as they are needed.

( I have my reasons to do so, believe me)

>So you have now a starting page that is filled by a external json. What you now could do is >create a primary json screen which contains a JsonPanel and secondary screens json files >which should be autoloaded into the internal panel of the primary json container dynamicly. >The easiest way to load a json is just call the load method or using the autoload config >option of the JsonPanel with the url.

It's the actual steps for loading and assigning the secondary screens that I'm looking for.

Pseudocode:
delete (outerJsonPanel.innerJsonPanel); // to prevent leaks
outerJsonPanel.innerJsonPanel = new jsonPanel(autoload,url); // suck it in
outerJsonPanel.doLayout(); // or whatever

I hope that your working example of dynamic loading will make this clear for me (and others).

cheers,

Petri.


I think you peusdo code is even more easy, but will show it in the demo.
outerJsonPanel.load('new json file');

I made a demo, but found out there is a small bug in the json panel that has to be fixed before it works. Code is below just put it in the correct place in Ext.ux.JsonPanel.js

After you fixed your JsonPanel then create the three json files and add the first into the main index.html (posted before). Take when saving your code keep path in mind i used json/ as a base.

The demo shows accordion with in each panel a button. Click on them to see the content of center panel change.

Sierk
PS: Tonight i will publish this example on the website http://www.projectspace.nl/index.php as example DynamicLoadExample


onRender : function(ct, position){
Ext.ux.JsonPanel.superclass.onRender.call(this, ct, position);
var um = this.getUpdater();
um.showLoadIndicator = false; //disable it.
um.setRenderer({render:
function(el, response, updater, callback){
//add item configs to the panel layout
var items;
//Load the code to check if we should javascripts
try { items = this.decode(response.responseText); } catch (e) {alert('Failed to load JsonPanel:' + e)}
if(items){
if (items.window) {
this.required_css(items.window.required_css);
this.required_js(items.window.required_js);
}
//Now load object again but apply internal code
try { items = Ext.decode(response.responseText); } catch (e) {alert('Failed to load JsonPanel:' + e)}
delete items.window;
//Clear out orignal content
for (var i=0;i<this.items.items.length;i++) {this.remove(this.items.items[i])};
if(items instanceof Array) {
this.add.apply(this,items);
} else {
this.add(items);
}
this.doLayout();
}
if(callback) {callback();}
}.createDelegate(this)
});
},


Main Json File

{
xtype:"panel",
title:"Panel",
layout:"border",
window:{
height:500
},
items:[{
xtype:"panel",
layout:"accordion",
region:"west",
width:200,
items:[{
title:"Panel 1",
autoHeight:false,
items:[{
xtype:"button",
text:"Load Panel 1",
handler:/*BEGIN*/function(){
Ext.getCmp('JsonPanel').load({url: this.url});
}/*END*/,
url:"json/JsonPage1.json"
}]
},{
title:"Panel 2",
autoHeight:false,
items:[{
xtype:"button",
text:"Load Panel 2",
url:"json/JsonPage2.json",
handler:/*BEGIN*/function(){
Ext.getCmp('JsonPanel').load({url :this.url});
}/*END*/
}]
}]
},{
xtype:"jsonpanel",
title:"JSON Panel",
layout:"fit",
autoLoad:/*BEGIN*/'json/JsonPage2.json'/*END*/,
region:"center",
id:"JsonPanel"
}]
}

JsonPage1.json

{
xtype:"panel",
title:"Panel",
html:"THIS IS PAGE ONE"
}

JsonPage2.json

{
xtype:"panel",
title:"Panel",
html:"THIS IS PAGE TWO"
}

[psavolai]

Hi Sierk,

I hate to be nuisance, but this index.html (placed in GuiDesigner1.7 directory)
only shows white screen. Not the contents of "designer.json".
Other than that, your example is just what I needed and asked for.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="icons/favicon.ico" >
<title>ExtJs Gui Designer</title>
<!-- The ExtJs base 2.02 -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>

<!-- Whe load Gui Designer through used of JSON which includes all needed files -->
<script id="js/Ext.ux.JsonPanel.js" type="text/javascript" src="js/Ext.ux.JsonPanel.js"></script>
</head>
<body>
<script>
new Ext.Viewport({
items : new Ext.ux.JsonPanel({autoLoad:'json/designer.json'}),
layout: 'fit'
}).show();
</script>
</body>
</html>

I tried playing with it, but still no luck.
Maan, I must be stupid or something.
:-?

Petri.

[sierk]

Hi Sierk,

I hate to be nuisance, but this index.html (placed in GuiDesigner1.7 directory)
only shows white screen. Not the contents of "designer.json".
Other than that, your example is just what I needed and asked for.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" href="icons/favicon.ico" >
<title>ExtJs Gui Designer</title>
<!-- The ExtJs base 2.02 -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>

<!-- Whe load Gui Designer through used of JSON which includes all needed files -->
<script id="js/Ext.ux.JsonPanel.js" type="text/javascript" src="js/Ext.ux.JsonPanel.js"></script>
</head>
<body>
<script>
new Ext.Viewport({
items : new Ext.ux.JsonPanel({autoLoad:'json/designer.json'}),
layout: 'fit'
}).show();
</script>
</body>
</html>

I tried playing with it, but still no luck.
Maan, I must be stupid or something.
:-?

Petri.

The designer.json depends on index.php so it won't work in html. Take a look at the http://www.projectspace.nl/index.php
and open the designer.json. Now you can play with it and see how stuff works.

Try to use the main.json file a posted earlier instead of designer.json and this should work

Sierk

[psavolai]

Sorry Sierk,
but those files do not work.
I will zip them up and attach so you can try for yourself and see.

Petri.

[sierk]

Sorry Sierk,
but those files do not work.
I will zip them up and attach so you can try for yourself and see.

Petri.

Shall we continue by using private messages if you need more help:

In my session everything works seee http://www.projectspace.nl/main.html. When you fix your names in the main.json files. In main the files are called json/JsonPage1.json and /json/JsonPage2.json while you files are called json/JsonPanel1.json,json/JsonPanel1.json

So question did you fix the Ext.ux.JsonPanel.js.

I send you the complete code in a private message.

Sierk

[psavolai]

Thank you Sierk.

It really does work, but NOT LOCALLY as I have been trying to do it all a along.
:D

(See, if I had screencammed this, we would have noticed it immediately)

So there must me still one more bug in the load code concerning local loading, but fortunately there is a workaround .

Petri.

[sierk]

Thank you Sierk.

It really does work, but NOT LOCALLY as I have been trying to do it all a along.
:D

(See, if I had screencammed this, we would have noticed it immediately)

So there must me still one more bug in the load code concerning local loading, but fortunately there is a workaround .

Petri.

The Local behavoir is not a bug, but this is how Ext works with Ajax Requests. If you want to use it locally include localXHR.js that can be found here (http://extjs.com/forum/showthread.php?t=10672). This will override the local behavoir of Ajax.

Just add it to you html

Sierk

[epsylon]

Hello,

You create excelent extensions. Do you think about add feature to relize that functionality:

when you click edit parameters whose name like 'html' then don't open ScriptEditor but TinyMCE plugin? I think that it is very easy to code.

cheers,
Artur T.

[sierk]

Hello,

You create excelent extensions. Do you think about add feature to relize that functionality:

when you click edit parameters whose name like 'html' then don't open ScriptEditor but TinyMCE plugin? I think that it is very easy to code.

cheers,
Artur T.

Based on you idea i changed some code in version 1.8 (current development) that will make it easy to add your own editors to specific fields. But i will not include TinyMCE because i think most editing of HTML fields does not need such advanced editors.

As of version 1.8 you can use the following code to override the editor for a field named html width code below.

Sierk

designer = new Ext.Viewport({
layout : 'fit',
items: new Ext.ux.Designer({
border:false,
customProperties : true,
editors : { 'html' : new Ext.grid.GridEditor(.... Your Editor ....)}
})
});

[QuinnPerkins]

I'm trying to add a tabpanel in a form. I'm actually bringing across some JSON that worked ok in the original guibuilder by tof. The effect I'm shooting for is like the fifth example here: http://extjs.com/deploy/dev/examples/form/dynamic.html

When I try to do this I get an error: You cannot add element "tabpanel" under "form"

Really? I seem to have done his before...

Quinn

[sierk]

I'm trying to add a tabpanel in a form. I'm actually bringing across some JSON that worked ok in the original guibuilder by tof. The effect I'm shooting for is like the fifth example here: http://extjs.com/deploy/dev/examples/form/dynamic.html

When I try to do this I get an error: You cannot add element "tabpanel" under "form"

Really? I seem to have done his before...

Quinn

Hi,

This check was add because tabpanels with dynamic content will break forms. Take look at the code of form 5 and you will see that they also used multiple forms to solve the issue.

Sierk

[sureshthalluri]

This is a very helpful tool.. adding air capability will help to save the templates and load them back also run it out of the browser

[sierk]

This is a very helpful tool.. adding air capability will help to save the templates and load them back also run it out of the browser

I never worked with Air:-?, but perhapse i will give it a go. But for now you can use the index.php which is included in the build to save and load files.

Sierk

[nmartignole]

Congratulations for the ExtJs GUI Designer

This is really a great idea.

Nicolas

[sierk]

All,

As you can see in the start of the thread we have released a new version. The version fixes a number of problems when you are using the index.php version. Now two editors can be opened and the editors will work. We also fixed a number of layout issues.

We also complete the documentation of the code that is now compliant with jsdoc. Download is in the main item thread or just browse it at http://www.projectspace.nl/doc/index.html

Sierk

[jermworm]

I'm missing something (or maybe I'm not) but the below example illustrates my problem
I'm trying to load an edit form from a grid the rowDblClickHandler has


newwin=new regEditWindow;
newwin.show(this,grid.store.getAt(rowIndex)) ;
The form shows ok except:
a) I cannot get it to see the data (unless I make the data var global which I don't want to do)
b) I cannot attach the handler unless I make the handler function global - I don't want to do that either.

I want to be able to have two regEditWindows open at the same time with their own data handling their own events. (Maybe I'm going about this all wrong) I also don't want to clutter my code with form definition code.

I'm almost certain the problem has to do with the 'scope' of the loaded form but how do I get it to be in the correct scope?

If I'm going about this the completely wrong way a good example of how to do it the right way would be greatly appreciated.



regEditWindow=function() {
var parent;
var window;
var data;

return {
show: function (parent,record) {
this.parent=parent;
this.data=record.data;
this.window=new Ext.Window({
title: 'Edit Registration :' + this.data.id,
width: 612,
height: 472,
// The next items: line works as I want
// items: new Ext.Panel({items: new Ext.Button({scope: this, handler:this.showdata,text:"Show Data"})})

// The next items: line doesn't work I've tried all sorts of scope settings
// and different methods of specifying the handler
items: new Ext.ux.JsonPanel({scope: this, autoLoad: 'form.json'})
/* form.json looks like :
{
xtype:"form",
id:"regform",
height:440,
width:600,
layout:"form",
frame:true,
items:[{
xtype:"button",
text:"Click Me!",
scope: this,
handler: function() {
this.showdata();
}
}]
}
*/
});
this.window.show();
},
showdata: function() {
alert(this.data.Company);
},
};
}

[sierk]

I'm missing something (or maybe I'm not) but the below example illustrates my problem
I'm trying to load an edit form from a grid the rowDblClickHandler has ....

I looked at you json and saw a scope:this binding. You cannot have this binding in JSON because this will be set to the scope of the eval and not the object. If you need behavaior like that uses this do that from within a event like render.

Sierk

[jermworm]

I looked at you json and saw a scope:this binding. You cannot have this binding in JSON because this will be set to the scope of the eval and not the object. If you need behavaior like that uses this do that from within a event like render.

Sierk

Fair enough but it still doesn't work if I take it out (It was only in desperation I put it in) - the question remains how does one 'do that from within a event like render' i.e. How am supposed to do the binding without using global vars.

[sierk]

Fair enough but it still doesn't work if I take it out (It was only in desperation I put it in) - the question remains how does one 'do that from within a event like render' i.e. How am supposed to do the binding without using global vars.

If i understand correctly you are trying to combine a JSON with code for a javascript file. The problem with that is that there is no connection between the JSON data and the script file as you also allready found out. You did a good step by setting the scope of the jsonpanel to this, but you are using it in a event of a button where this becomes the button. The only trick i now is to walk down the parentlist until you find the jsonpanel, or get the jsonpanel using Ext.getCmp() and then use the scope variable.

Because of this problemen i make all the code i needed in the json-panel and use the component-id to access the functionality

Hopes this helps

In short: give JSONPanel an ID and then do Ext.getCmp("ID").scope.YourFunction

Sierk

[psavolai]

Hi Guys,

For some reason when I use TableLayout it never fills the container area completely.
How would I achieve this using GuiDesigner.

- I'm asking because I find it easier to do complex forms with tables that having to use multiple formlayouts in one panel. After a while it gets really messy.

I know that I can do this:
.x-table-layout {
width: 100%;
}

in my CSS-file, but seems a bit too global for my taste.
I'd like to set only one table at the time.

petri.

[psavolai]

Another one,
is this synchronous ?

var myStuff = new Ext.ux.JsonPanel({autoLoad:'json/JsonPage3.json'});

i.e. can I trust that myStuff is fully loaded after this line or not?
if not, is there a mechanism for synchronizing through callbacks or something ?

Petri.

[sierk]

Another one,
is this synchronous ?

var myStuff = new Ext.ux.JsonPanel({autoLoad:'json/JsonPage3.json'});

i.e. can I trust that myStuff is fully loaded after this line or not?
if not, is there a mechanism for synchronizing through callbacks or something ?

Petri.

The JsonPanel it self is asynchrone but the loading of javascript files (required_js) within the JsonPanel is synchrone. In the version 1.8 are no events which you could catch, I will add them to version 1.9. (beforejsonload,afterjsonload,failedjsonload). The only thing you can do for now is use a callback function

autoload : {url : 'json/JsonPage3.json',callback: function(){youcode}}

Sierk

[sierk]

Hi Guys,

For some reason when I use TableLayout it never fills the container area completely.
How would I achieve this using GuiDesigner.

- I'm asking because I find it easier to do complex forms with tables that having to use multiple formlayouts in one panel. After a while it gets really messy.

I know that I can do this:
.x-table-layout {
width: 100%;
}

in my CSS-file, but seems a bit too global for my taste.
I'd like to set only one table at the time.

petri.

I will give this a try but for now the only thing is to but this in a ccs file and add it as required_css to the json. There should be also a other way but i will search. Also based on your problems if found a number of bugs in the wirzard which i will fix in next version.

Sierk

[psavolai]

Thanks Sierk,

I downloaded the version 1.8 of GuiDesigner and version 2.1 of ext .

Funny thing, the selection behaviour had gotten somewhat weird and I couldn't select
(click on a panel and it would get yellow) as freely as I could on version 1.7.
Ultimately I had to switch back to patched 1.7. to continue work.
Do you want a screencam of the oddities ?

"Ext version 2.1 is soo much better , faster and leaner than 2.02".
.. yeah right.
My json-based apps started mystically killing Firefox after 20 minutes of usage when running on ext 2.1.
So I switched back and will wait for next dot release.

Have you noticed similar things ?


-==== ADDITION =====-
Oh now I get it.
I just read the new licensing policy.

So they think that now ext has so much momentum that it can go commercial.
Since no closed source product will GPL their stuff, they will have to buy licenses.
Of course the team has every right to do this, but still ... ambush.
I thought they could make enough money by selling services and education around ext, but apparently not.

In this case I will stick to 2.02.

Will this affect Gui Designer licensing as well ?
If I wanted to build apps that were customizable and include GuiDesiner, would It have to be version 1.7 ?

-==== ADDITION =====-


Petri.

[sierk]

Thanks Sierk,

I downloaded the version 1.8 of GuiDesigner and version 2.1 of ext .

Funny thing, the selection behaviour had gotten somewhat weird and I couldn't select
(click on a panel and it would get yellow) as freely as I could on version 1.7.
Ultimately I had to switch back to patched 1.7. to continue work.
Do you want a screencam of the oddities ?

"Ext version 2.1 is soo much better , faster and leaner than 2.02".
.. yeah right.
My json-based apps started mystically killing Firefox after 20 minutes of usage when running on ext 2.1.
So I switched back and will wait for next dot release.

Have you noticed similar things ?


-==== ADDITION =====-
Oh now I get it.
I just read the new licensing policy.

So they think that now ext has so much momentum that it can go commercial.
Since no closed source product will GPL their stuff, they will have to buy licenses.
Of course the team has every right to do this, but still ... ambush.
I thought they could make enough money by selling services and education around ext, but apparently not.

In this case I will stick to 2.02.

Will this affect Gui Designer licensing as well ?
If I wanted to build apps that were customizable and include GuiDesiner, would It have to be version 1.7 ?

-==== ADDITION =====-


Petri.

We will also stick to version 2.02 of the ExtJs package. We will check if it also works on other packages, but will not bundle it with any other version. Our source will stay LGPL so as long as you project complaint with this you can use it.

Yes it would be greate to have screencam of the problem. Also if you could try it with the version at www.projectspace.nl because this is my test site.

Sierk

[psavolai]

We will also stick to version 2.02 of the ExtJs package. We will check if it also works on other packages, but will not bundle it with any other version. Our source will stay LGPL so as long as you project complaint with this you can use it.

Yes it would be greate to have screencam of the problem. Also if you could try it with the version at www.projectspace.nl because this is my test site.

Sierk

I will screencam it for you, and use your site to do it ,but I'm a way for a couple of days, so maybe on friday.
Very nice of you to stick with LGPL.Thank you.
I read all 32 pages of the debate in the forum. phew.
Wonder if there's going to be a fork of 2.0.2 ... we'll see.

Petri.

[psavolai]

I will screencam it for you, and use your site to do it ,but I'm a way for a couple of days, so maybe on friday.
Very nice of you to stick with LGPL.Thank you.
I read all 32 pages of the debate in the forum. phew.
Wonder if there's going to be a fork of 2.0.2 ... we'll see.

Petri.

---- EDIT
Sorry Serk,
It was my fault.
The Json had some inconsistencies and thats why the selection didn't beahave as expected.

In fact This 1.8 Seems to perform at least as nicely as the previous did.
once more, I'm so sorry.

Another subject,

What If we do buy a commercial license, how could we attach GuiDesigner to allow our
customers customize their installation of our application ?
Or do we just instruct them to dowload it and use it as a separate thing at their own risk ?

Petri.
---- EDIT

[sierk]

---- EDIT
Sorry Serk,
It was my fault.
The Json had some inconsistencies and thats why the selection didn't beahave as expected.

In fact This 1.8 Seems to perform at least as nicely as the previous did.
once more, I'm so sorry.

Another subject,

What If we do buy a commercial license, how could we attach GuiDesigner to allow our
customers customize their installation of our application ?
Or do we just instruct them to dowload it and use it as a separate thing at their own risk ?

Petri.
---- EDIT


Because our desginer is release under LGPLv3 (http://www.opensource.org/licenses/lgpl-3.0.html) (lesser GPL) and also codepress you can use it with a commerical product if you comply to this license. If you bundel then this is the most important part of the diference (by keep in mind whole LGPLv3 license applies).


3. Object Code Incorporating Material from Library Header Files.
The object code form of an Application may incorporate material from a header file that is part of the Library. You may convey such object code under terms of your choice, provided that, if the incorporated material is not limited to numerical parameters, data structure layouts and accessors, or small macros, inline functions and templates (ten or fewer lines in length), you do both of the following:

a) Give prominent notice with each copy of the object code that the Library is used in it and that the Library and its use are covered by this License.
b) Accompany the object code with a copy of the GNU GPL and this license document.

See also the code header

/*License: This source is licensed under the terms of the Open Source LGPL 3.0 license.
Commercial use is permitted to the extent that the code/component(s) do NOT become
part of another Open Source or Commercially licensed development library or toolkit
without explicit permission.Full text: http://www.opensource.org/licenses/lgpl-3.0.html*/
Sierk

[tof]

Because our desginer is release under LGPLv3 (http://www.opensource.org/licenses/lgpl-3.0.html) (lesser GPL)

Geez 8-|,

My GUI Builder was released under GPL, not LGPL.
You agreed on this license on this forum thread; and, anyway, the "COPYING" file is specifying the GPL, not LGPL.

I am sorry you cannot change this license, even for a fork...

However, there is no really interest for the builder/designer to be under the LesserGPL, since this license is mainly used for librairies.

With the designer on GPL, you can still use :
- extjs LGPL
- extjs GPL
- even extjs commercial

So, please, care of the licence of my original project, and advertise on GPL. Codepress being LGPL does not change anything.


Thanks

[sierk]

Geez 8-|,

My GUI Builder was released under GPL, not LGPL.
You agreed on this license on this forum thread; and, anyway, the "COPYING" file is specifying the GPL, not LGPL.

I am sorry you cannot change this license, even for a fork...

However, there is no really interest for the builder/designer to be under the LesserGPL, since this license is mainly used for librairies.

With the designer on GPL, you can still use :
- extjs LGPL
- extjs GPL
- even extjs commercial

So, please, care of the licence of my original project, and advertise on GPL. Codepress being LGPL does not change anything.


Thanks

All,

I agree with TOF that the usage of GPL or LGPL will not make a lot off difference for someboy using extjs, but because i created an extjs component off it (library) and not like the orginal idea a standalone application. It can be used as a library and therefor I use LGPL.

To solve our different opions on which license to use (Main reason is that I started the my code before tof added the license to his original) i asked him to discusse this with me in a private thread and he accepted. I will stick to LGPL also when this means i need to remove the original Gui desgin from tof and replace it with something new.

Sierk

[tof]

Hi Sierk,

Again, I do not want any conflict about this. I'm pro-GPL, and that's why I insist on this.

As you must have seen in the code, the main work of the builder is not the interface / design (which is really poor from my point of view).

I spent more than one week on :
* how the components can be dynamically added / removed / updated
* the ID components association
* the search of parents'parent's .... tabpanel/border layout and other complex components
* the generation of the cfg.js file
* the detection of the elements in the design area
* the visual resize thing
* ...

And I spent about half a day on the visual gui (since this app was made for developpers, this is the last thing I had in mind).

So, the design is not what is to be recoded; that's the core of the builder that should be.

I decided to put my work in the public domain, that's not a big request to ask for a license choice, is it ? This does not discredit your work in any way.

[sierk]

Hi Sierk,

Again, I do not want any conflict about this. I'm pro-GPL, and that's why I insist on this.

As you must have seen in the code, the main work of the builder is not the interface / design (which is really poor from my point of view).

I spent more than one week on :
* how the components can be dynamically added / removed / updated
* the ID components association
* the search of parents'parent's .... tabpanel/border layout and other complex components
* the generation of the cfg.js file
* the detection of the elements in the design area
* the visual resize thing
* ...

And I spent about half a day on the visual gui (since this app was made for developpers, this is the last thing I had in mind).

So, the design is not what is to be recoded; that's the core of the builder that should be.

I decided to put my work in the public domain, that's not a big request to ask for a license choice, is it ? This does not discredit your work in any way.


A license discussion has started between me and tof the owner of GuiBuilder as you can see
Based on that i decided to remove all version of the designer. Remove all code that is unique for the GuiBuilder that is still in GuiDesigner and will release a complete new version (2.0) of it totaly as LGPL.
I hope to do this within 4 weeks as of 25-april-2008.


After this statement it is time to responed to the reaction of tof about some of his elements.

Adding,moving,detection is nothing more then Drag and Drop and therefor not a unqiue element. See also the orignal idea tof based his code one.
The component assosation (_node) is not a unique coding style, but i don't need it.
Documentation of items will be recreated from documentation.
If you look at the original code and compare you will see there has changed allready a lot



The Ext.ux.Designer as an extjs component is not the same as the formbuilder, but uses part of it, where at moment of split the license was unclear. This is a mistake from myself :(( that I will fix shortly. I want to make clear that the changes i made are not part of the orignal and therefor not scope of the discussion.

Sierk

[tof]

Well, I don't mind this decision; though I'm actually quite confused since I make you rewrite a lot of things from scratch, only because we could not agree on a license because of my convictions.

Let's this subject closed, and, as I said lot of times in the Builder Thread, most parts of the code are dirty, and actually need a rewrite. So this is not such a loss.

[poplei]

expect

[bomka]

Sierk, any thoughts on when this will be available again? The functionality offered seems great (at least reading this post), so wondering when I can see something in "action"...
thanks.

[sierk]

Sierk, any thoughts on when this will be available again? The functionality offered seems great (at least reading this post), so wondering when I can see something in "action"...
thanks.

I am preparing to release the first beta of the new desinger somewhere this week. This is a plugin based version supporting fully drag and drop. Has a dockable or floating toolbox window and can therefor use the whole screen. The code is fully disconnected for the toolbox and can therefor be fully customized.

So give me a number of days.

Sierk

[bomka]

Thanks a lot Sierk. Can't wait to look at the improved functionality...

[dearsina]

Any update? I really liked the previous version, very much looking forward to the new version to kick-start my extjs project! thanks for all your hard work...

[sierk]

Hi all,

After 4 weeks, from which i have been ill for two weeks, there is a new GuiDesigner which can be downloaded for the first page. Because of the two weeks i am a little behind with testing. But i found it time to release the code again.

The current beta is missing the php backend, documentation and will have bugs. I will continue testing and replacing the old wizards with new ones. Please report bugs back to forum (with example) makes it easier to fix.

I will try to keep the bug list at beginning of thread up to date.

Sierk.:D

[epsylon]

I try add grid with paging plugin in your GUI Designer. I add parameters to grid



ds=new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'contesty.php?cmd=get_ranking',
method: 'POST'
}),
autoLoad: true,
reader:new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
}, [
{name: 'id'},
{name: 'FILED1'},
{name: 'FILED2'}])
})

and



bbar=new Ext.PagingToolbar({
plugins: [new Ext.ux.Andrie.pPageSize({
afterText: 'in page'
})],
pageSize: 10,
store: store, /* in this line is the problem */
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "no data",
items: [{}]
})

I need something like "parent.store", it is possible? How resolve this problem?

Cheers,
Epsylon

[sierk]

I try add grid with paging plugin in your GUI Designer. I add parameters to grid



ds=new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'contesty.php?cmd=get_ranking',
method: 'POST'
}),
autoLoad: true,
reader:new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
}, [
{name: 'id'},
{name: 'FILED1'},
{name: 'FILED2'}])
})

and



bbar=new Ext.PagingToolbar({
plugins: [new Ext.ux.Andrie.pPageSize({
afterText: 'in page'
})],
pageSize: 10,
store: store, /* in this line is the problem */
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "no data",
items: [{}]
})

I need something like "parent.store", it is possible? How resolve this problem?

Cheers,
Epsylon


The only trick i can come up for now using a function for the bbar like this.

ds= new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'contesty.php?cmd=get_ranking',
method: 'POST'
}),
autoLoad: true,
reader:new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
}, [
{name: 'id'},
{name: 'FILED1'},
{name: 'FILED2'}])
})

bbar=function(){
//Create the toolbar
var pt = new Ext.PagingToolbar({
plugins: [new Ext.ux.Andrie.pPageSize({
afterText: 'in page'
})],
pageSize: 10,
store: this.store, //(ds)Because we use function it is called when first used and this is valid
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "no data",
items: [{}]
});
//Drop function and set the real thing
this.bbar = pt;
return pt;
}

This should work, i did not check syntax.
Sierk

[Pluto1833]

I'm getting issues with the attached zip.. anyone else?

[dahool]

Hi, I'm using JsonPanel to create a form on runtime using:



var prefForm = new Ext.form.FormPanel({
baseCls: 'x-plain',
url:'index.php?action=user_preferences&op=save',
items: new Ext.ux.JsonPanel({autoLoad:'index.php?action=user_preferences'}),
waitMsgTarget: true,
frame: true,
buttons:[{
text: _('Save'),
formBind: true,
handler: function(){
prefForm.initFields();
if (prefForm.getForm().isValid()) {
prefForm.getForm().submit({
method:'POST',
waitTitle: _('Saving ...'),
waitMsg: _('Saving ...'),

success:function(form, action){
win.close();
}
});
}
}
}]

});


The problem is that when is a delay in the load the window is empty until the form is loaded. I was wondering if it is posible to have a progress indicator during the form load.

[sierk]

Hi all,

I just released beta2. The list below contains the major fixes.

Added delete element as context menu
Added Undo and Redo functions
Added CodeTree
Added "scope.<VAR>" in json object, so you can create local objects
Fixed Problem required_js in json was not loaded
Fixed copy to clipboard did not work
Fixed redraw problems for containers
Fixed problems in editableJson code


The scope options is something i have to explain and will use part of the code from epsylon to explain. The scope variable is the scope object of the jsonpanel (this or config item scope). So this varaible can be used to access any object of the caller. The json config item of first item can be used to control items before the complete json is evaluated. By setting "scope.<variable>" in this json you later can then access them by scope.<variable>

In code below i use "scope.MyStore" and later scope.MyStore.

Hope you like the changes.

Sierk


{
json : {
required_js : 'js/pPageSize.js', //List of javascript files to load (seperated by ,)
//Create varaiable which will be connected to scope varaible
"scope.MyStore" : new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'contesty.php?cmd=get_ranking',
method: 'POST'
}),
autoLoad: true,
reader:new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
}, [
{name: 'id'},
{name: 'FILED1'},
{name: 'FILED2'}])
})
},
.... Your other stuff
items : [{
xtype : 'grid',
bbar : new Ext.PagingToolbar({
plugins: [new Ext.ux.Andrie.pPageSize({
afterText: 'in page'
})],
pageSize: 10,
store: scope.MyStore, //From Scope set in JSon
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "no data",
items: [{}]
})
}]
}

[sierk]

Hi, I'm using JsonPanel to create a form on runtime using:
....
The problem is that when is a delay in the load the window is empty until the form is loaded. I was wondering if it is posible to have a progress indicator during the form load.

I will put it on the feature list. Should be posbile to do.

Sierk

[dahool]

I will put it on the feature list. Should be posbile to do.

Sierk

That would be great!

[kusoft.net]

Platform: IE7.0/Ext2.0/GUI Builder

But I don't know how to add new 'xtype'

examples:
I create a DictCombo,it extends Ext.form.combo,
How to add toGuiBuilder.

[sierk]

Platform: IE7.0/Ext2.0/GUI Builder

But I don't know how to add new 'xtype'

examples:
I create a DictCombo,it extends Ext.form.combo,
How to add toGuiBuilder.

In beta whe don't support adding of items dynamic. But what you can do is add you item to the Ext.ux.plugin.Desginer.Components.json or just add a panel and change the xtype

Sierk

[kenshinlk]

Hi,I have two questions to ask.
1.How to add the store property of combobox.just like this below


store: new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: [[0,'YES'],[1,'NO']]
})

2.When will you finish the beta stage:D:D:D:D
Thank you for your reply~~:D

[sierk]

Hi,I have two questions to ask.
1.How to add the store property of combobox.just like this below


store: new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: [[0,'YES'],[1,'NO']]
})

2.When will you finish the beta stage:D:D:D:D
Thank you for your reply~~:D

To connect a store to a combo box do the following:
Select the combobox and type store in combo box below the properptygrid and hit enter
Double click on the new created property and add your code. (starting from new)

First release with all functions planned next week(End beta)

Sierk

[kenshinlk]

To connect a store to a combo box do the following:
Select the combobox and type store in combo box below the properptygrid and hit enter
Double click on the new created property and add your code. (starting from new)

First release with all functions planned next week(End beta)

Sierk

Many thanks for your reply;).
But,When I try to connect the store following your tip,it turn out not what I want.
When I open the json source code editor,I found that the value of store property was added as the following string.


store : "new Ext.data.SimpleStore({ fields: ['value', 'text'], data: [[0,'YES'],[1,'NO']]})"

Notice that double quotation marks were added to the property value.:">
Is this a issue?:-?

[mystix]

First release with all functions planned next week(End beta)


eagerly looking forward to your release :D

[sierk]

Many thanks for your reply;).
But,When I try to connect the store following your tip,it turn out not what I want.
When I open the json source code editor,I found that the value of store property was added as the following string.


store : "new Ext.data.SimpleStore({ fields: ['value', 'text'], data: [[0,'YES'],[1,'NO']]})"

Notice that double quotation marks were added to the property value.:">
Is this a issue?:-?

This is a bug. Found out that the file with property defintions is not always loaded in beta 2. Therefor the editor thinks that store is a text instead of code. I will fix this in the next release. You should be able to make it work by changing the code in editor to


store : /*BEGIN*/new Ext.data.SimpleStore({ fields: ['value', 'text'], data: [[0,'YES'],[1,'NO']]})/*END*/

Sierk

[sierk]

Hi all,

Base on the problems above i have decided to release beta3 instead of the full release. Beta2 is not really usefull. Beta 3 has been tested with problem above and works.

The file tab is not working in this release (beta3) is planned for final release before end of june 2008.

Sierk


/* This file is created with Ext.ux.plugin.GuiDesigner */
{
xtype : "form",
title : "Form",
items : [{
xtype : "combo",
mode : "local",
fieldLabel : "Text",
name : "combovalue",
hiddenName : "combovalue",
valueField : "value",
displayField : "text",
store : /*BEGIN*/new Ext.data.SimpleStore({ fields: ['value', 'text'], data: [[0,'YES'],[1,'NO']]})/*END*/
}]
}

[kenshinlk]

Hi all,

Base on the problems above i have decided to release beta3 instead of the full release. Beta2 is not really usefull. Beta 3 has been tested with problem above and works.

The file tab is not working in this release (beta3) is planned for final release before end of june 2008.

Sierk


/* This file is created with Ext.ux.plugin.GuiDesigner */
{
xtype : "form",
title : "Form",
items : [{
xtype : "combo",
mode : "local",
fieldLabel : "Text",
name : "combovalue",
hiddenName : "combovalue",
valueField : "value",
displayField : "text",
store : /*BEGIN*/new Ext.data.SimpleStore({ fields: ['value', 'text'], data: [[0,'YES'],[1,'NO']]})/*END*/
}]
}

You done a great job=D>,thanks a lot!~o)

[kenshinlk]

I find one bug about data initialization.
When I add store property to the combo just like this below,it seems fine.

{
xtype : "combo",
mode : "local",
fieldLabel : "Text",
name : "combovalue",
hiddenName : "combovalue",
valueField : "value",
displayField : "text",
store : /*BEGIN*/new Ext.data.SimpleStore({ fields: ['value', 'text'], data: [[0,'YES'],[1,'NO']]})/*END*/
}
and then,i save this config to the database.But when i load the config from database again to the page,and using
designer.setConfig(/*config loaded from database*/); I found that the store property will become to null.

{
xtype : "combo",
mode : "local",
fieldLabel : "Text",
name : "combovalue",
hiddenName : "combovalue",
valueField : "value",
displayField : "text",
store : /*BEGIN*/null /* Class has no initialConfig *//*END*/,
}:-?
Hope that I can describe the bug clearly.:">

[dahool]

Hi all, I made a simple hack to show a 'Loading' message.

It has, loadMask (true by default), msg and msgCls.

The zip contains the modified Ext.ux.JsonPanel.js and also a diff patch.

It is based on beta 3.

Regards.

[sierk]

Hi all, I made a simple hack to show a 'Loading' message.

It has, loadMask (true by default), msg and msgCls.

The zip contains the modified Ext.ux.JsonPanel.js and also a diff patch.

It is based on beta 3.

Regards.

Thanks for the fix will put it into the next release.

Sierk

[bhaidaya]

Coming along nicely!

FYI - I get an error

Failed to update elementTypeError: invalid 'instanceof' operand Ext.form.Form

when i do a layout using this JSON:
/* This file is created with Ext.ux.plugin.GuiDesigner */

{
layout : "border",
items : [{
region : "center",
title : "test center"
},{
region : "west",
title : "test west",
width : 250,
height : /*BEGIN*/null/*END*/,
split : true,
collapsible : false,
titleCollapse : true,
layout : "anchor",
items : [{
title : "logo",
layout : "auto",
anchor : "100% 8%"
},{
title : "main"
}]
}]
}



and after changing any property on any panel ( specifically west logo panel anchor )

[Eric24]

A truly useful tool--Great work! Something that I believe would be very valuable is to limit (or as least mark in some way) the list of available config options that can be applied to only those that pertain to the selected component.

[epsylon]

Hello!

What you think - When you release version with "Load and save function including backend"? That simply suggestion that i wrote you in private - you should use it?

[sierk]

A truly useful tool--Great work! Something that I believe would be very valuable is to limit (or as least mark in some way) the list of available config options that can be applied to only those that pertain to the selected component.

This is allready build in the code, but i did not find the time yet to go trough all the options (Ext.ux.plugin.Desginer.Properties.josn) and add the instanceof property. If this property is set it will only be shown for those instance. If you have the time to help you are welcome.

Sierk

[sierk]

I find one bug about data initialization.
When I add store property to the combo just like this below,it seems fine.

{
xtype : "combo",
mode : "local",
fieldLabel : "Text",
name : "combovalue",
hiddenName : "combovalue",
valueField : "value",
displayField : "text",
store : /*BEGIN*/new Ext.data.SimpleStore({ fields: ['value', 'text'], data: [[0,'YES'],[1,'NO']]})/*END*/
}
and then,i save this config to the database.But when i load the config from database again to the page,and using
designer.setConfig(/*config loaded from database*/); I found that the store property will become to null.

{
xtype : "combo",
mode : "local",
fieldLabel : "Text",
name : "combovalue",
hiddenName : "combovalue",
valueField : "value",
displayField : "text",
store : /*BEGIN*/null /* Class has no initialConfig *//*END*/,
}:-?
Hope that I can describe the bug clearly.:">

You set the code (setConfig) as a object (so it is allready evaluated by JavaScript) and not as String. When you set the code as string we do the evaluation and can determin the code of an object, so it can be used in designer. If you pass us an object we try to find the constructor of object to recreated the code. In your case we cannot reconstruct the code and therefor you get the message Class has no initialConfig .

Solution just add the code as String or call the loadConfig(url) method which will be available in new release (2.0.4).


Sierk

[peacock]

very good
thank!

[sierk]

Hi all,

Just before my holiday util end of july a new release. Not everthing i wanted to finish has finished but the code is stable, therefor i decided to release it. Next release 2.0.5 will be the documentation and code cleaning release (august).

Then in september i will start with version 2.1 which will include databinding options.

Version 2.0.4:
+ Loading indicator
+ Documentation window added under Question Mark
+ Added loadConfig method for loading from URL
+ Added autoLoad option in config to load json from URL
+ Added Cookie files
- Remove debug message Created, for special scope objects
* Config is now shown in window
* Fixed layout problem

Sierk

[dahool]

Hi all,

Just before my holiday util end of july a new release. Not everthing i wanted to finish has finished but the code is stable, therefor i decided to release it. Next release 2.0.5 will be the documentation and code cleaning release (august).

Then in september i will start with version 2.1 which will include databinding options.

Version 2.0.4:
+ Loading indicator
+ Documentation window added under Question Mark
+ Added loadConfig method for loading from URL
+ Added autoLoad option in config to load json from URL
+ Added Cookie files
- Remove debug message Created, for special scope objects
* Config is now shown in window
* Fixed layout problem

Sierk

Sierk, I found a minor bug in the 'Loading indicator' implementation.
The mask after the server response, with is not really useful.

This is the current code.



onRender : function(ct, position){
Ext.ux.JsonPanel.superclass.onRender.call(this, ct, position);
var um = this.getUpdater();
um.showLoadIndicator = false; //disable it.
um.on('failure',function(el, response){
this.ownerCt.el.unmask();
this.fireEvent('failedjsonload',response)
}.createDelegate(this));

if (this.loadMask)
this.ownerCt.el.mask(this.loadMsg, this.msgCls); // <<-- THIS LINE SHOULD BE HERE

um.setRenderer({render:
function(el, response, updater, callback){
//add item configs to the panel layout
//Load the code to check if we should javascripts
if (this.loadMask)
this.ownerCt.el.mask(this.loadMsg, this.msgCls); // <<-- CURRENT POSITION
this.fireEvent('beforejsonload', response);
try {
this.applyJson(response.responseText);
this.fireEvent('afterjsonload');
this.ownerCt.el.unmask();


I'm attaching a patch.

Regards.

[sierk]

Sierk, I found a minor bug in the 'Loading indicator' implementation.
The mask after the server response, with is not really useful.

This is the current code.



onRender : function(ct, position){
Ext.ux.JsonPanel.superclass.onRender.call(this, ct, position);
var um = this.getUpdater();
um.showLoadIndicator = false; //disable it.
um.on('failure',function(el, response){
this.ownerCt.el.unmask();
this.fireEvent('failedjsonload',response)
}.createDelegate(this));

if (this.loadMask)
this.ownerCt.el.mask(this.loadMsg, this.msgCls); // <<-- THIS LINE SHOULD BE HERE

um.setRenderer({render:
function(el, response, updater, callback){
//add item configs to the panel layout
//Load the code to check if we should javascripts
if (this.loadMask)
this.ownerCt.el.mask(this.loadMsg, this.msgCls); // <<-- CURRENT POSITION
this.fireEvent('beforejsonload', response);
try {
this.applyJson(response.responseText);
this.fireEvent('afterjsonload');
this.ownerCt.el.unmask();


I'm attaching a patch.

Regards.

Placing it in that place will not work if you don't have a loading content (loading will stick to screen). It tryed beforeupdate event but this does not get fired. Will continue to search for a solution

Sierk

[epsylon]

Hi Sierk,

Why CookiesFile is other than in documentation? I try write it myself but i have problem. Create folder and delete folder do not apper in context menu etc

this is a simply way to do it?

[sierk]

Hi Sierk,

Why CookiesFile is other than in documentation? I try write it myself but i have problem. Create folder and delete folder do not apper in context menu etc

this is a simply way to do it?

Epsylon,

I seams i forgot to run a documentation update before releasing. All folder functions have been removed from code.

Folders are now build from the full name of the file. So saving a file as folder/file will create a folder. Reason of dowing it makes the implementation of back-end PHP system much easier. Only the following functions should be overwriten, implementing call to backend. Beawre that if will still extend the code futher, so if you make changes or have a good idea please post or send private message.

Sierk



init : function(){
this.cookies = new Ext.state.CookieProvider();
this.files = this.cookies.get('Designer.files') || {};
},

reset : function(){
this.cookies.clear('Designer.files');
},

saveChanges : function(id,action,callback,content) {
this.files[id] = id;
this.cookies.set('Designer.files',this.files);
if (content) this.cookies.set('Designer/' + id,escape(content));
if (action=='delete') {
delete this.files[id];
this.cookies.clear('Designer.'+id);
if (id==this.last) this.last = null;
} else {
this.last = id;
}
if(typeof callback == "function") callback(true);
},

openFile : function(fileInfo,callback) {
var result = unescape(this.cookies.get('Designer/' + fileInfo));
this.last = fileInfo;
if(typeof callback == "function") callback(true,result);
},

[mbajema]

Sierk,

I'm trying to get a very simple example working with Ext.ux.JsonPanel and the required_js option, but I can't get it to work.

I can make it work if I modify the example to create a new Ext.ux.JsonPanel() object and then call the setRequired_js() method.

Please see the attached zip file which contains two examples using each method as described above:

jsonpanel.htm attempts to use the required_js option in jsonpanel.json (this does not work)
jsonpanel2.htm creates a new Ext.ux.JsonPanel() object using jsonpanel2.json and then call the setRequired_js() method (this does work)On a side note, why does the Gui Designer Documentation not include documentation on the Ext.ux.JsonPanel (or am I missing something)?

Thanks for all your work.

[mbajema]

I figured it out. I needed to override the default blockedJsonInit config option to exclude required_js.

What is the reasoning in setting the default blockedJsonInit to: ['required_js','required_css','alignTo','anchorTo','items']? What are the scenarios where you'd want to block these options from initializing?

Thanks again.

[sierk]

I figured it out. I needed to override the default blockedJsonInit config option to exclude required_js.

What is the reasoning in setting the default blockedJsonInit to: ['required_js','required_css','alignTo','anchorTo','items']? What are the scenarios where you'd want to block these options from initializing?

Thanks again.

This is a bug. In older version required_js was done manually in the code. Now it is automatic and should not be in exclude list. I have removed it and will release it in version 2.0.5. With some other fixes and update of documentation. There are still some problems in the code which causes that not all documentation is generated.

VERSION 2.0.5 HAS JUST BEEN RELEASED

Sierk

[epsylon]

Hello,

I'am write a phpbackend. This is very basic way to do this, but I think that is can be usefull for someone. Sierk probably rewrite this in good way code in future.

I decided to code file extension validation in server side so please give .json extension to all file in GUI designer.

Ext.ux.plugin.Designer.js:



Ext.ux.plugin.PhpFiles = function(config) {
Ext.apply(this,config);
Ext.ux.plugin.PhpFiles.superclass.constructor.call(this);
this.init();
}

Ext.extend(Ext.ux.plugin.PhpFiles,Ext.util.Observable,{
files : null,
last : null,
activeNode : null,

init : function(){
Ext.Ajax.request({
url: "backend.php",
params: {
cmd: 'get_files',
baseDir: this.baseDir
},
callback: function(options, success, response)
{
this.files=Ext.util.JSON.decode(response.responseText);
},
scope: this
});
},

reset : function(){
/*
this.cookies.clear('Designer.files');
*/
},

saveChanges : function(id,action,callback,content) {

this.files[id] = id;

Ext.Ajax.request({
url: "backend.php",
params: {
cmd: 'save_changes',
baseDir: this.baseDir,
filename: id,
action: action,
content: content
},
callback: function(options, success, response)
{
if(response.responseText=='1')
{
if(action=='delete')
{
delete this.files[id];
if (id==this.last) this.last = null;
} else {
this.last = id;
}
}

if(typeof callback == "function")
{
if(response.responseText=='1')
callback(true);
else
callback(false);
}
},
scope: this
});
},

openFile : function(fileInfo,callback) {

Ext.Ajax.request({
url: "backend.php",
params: {
cmd: 'get_content',
baseDir: this.baseDir,
filename: fileInfo
},
callback: function(options, success, response)
{
this.last = fileInfo;
if(typeof callback == "function") callback(true,response.responseText);
},
scope: this
});
},

deleteFile : function(fileInfo,callback){
this.saveChanges(fileInfo,'delete',callback);
},

renameFile : function(fileFrom,fileTo,callback){
var last = this.last;
this.openFile(fileFrom,function(success,content) {
if (success) {
this.saveChanges(fileTo,'save',function(success){
if (success) {
this.deleteFile(fileFrom,function(success){
if (success && last==fileFrom) this.last=fileTo;
if(typeof callback == "function") callback(success);
}.createDelegate(this));
} else if(typeof callback == "function") callback(success);
}.createDelegate(this),content);
} else if(typeof callback == "function") callback(success);
}.createDelegate(this));
},

saveFile : function(fileInfo,content,callback){
this.saveChanges(fileInfo,'save',callback,content);
},

newFile : function(fileInfo,content,callback){
this.saveChanges(fileInfo,'new',callback,content);
},

load : function(node, callback){
this.loadNodes(node,false);
if(typeof callback == "function") callback();
},

loadNodes : function(node,append){
this.activeNode = null;
if (!append) while(node.firstChild) node.removeChild(node.firstChild);
node.beginUpdate();
for (f in this.files){
var file = this.files[f];
var path = f.split('/');
var name = '';
var cnode = node;
var n;
for (var i=0;i<path.length;i++) {
name += path[i];
n=null;
for (var j=0,c=cnode.childNodes;j<c.length && !n;j++) {
if (c[j].attributes.text==path[i]) n = c[j];
}
if (!n) {
var leaf = (i==path.length-1);
n = new Ext.tree.TreeNode({
text: (name==this.last ? '<B>' + path[i] + '</B>' : path[i]),
cls: leaf ? 'file' : 'folder' ,
leaf : leaf,
id : name
});
cnode.appendChild(n);
if (name==this.last) this.activeNode = n;
}
cnode = n;
name += '/'
}
}
node.endUpdate();
return this.activeNode;
}

});


And backend.php:


class phpFiles
{
var $baseDir;
var $hide;
var $file_list;

function __construct($basedir)
{
$this->hide = array(
'index.php',
'.htaccess',
'.htpasswd',
'.svn',
'.',
'..'
);

$this->baseDir=$basedir;
}

private function mkdir_recursive($pathname, $mode)
{
is_dir(dirname($pathname)) || $this->mkdir_recursive(dirname($pathname), $mode);
return is_dir($pathname) || @mkdir($pathname, $mode);
}

private function check_and_fix_dir($filename)
{
$folder=explode("/",$filename);
$path=$this->baseDir;

for($i=0;$i<sizeof($folder)-1;$i++)
{
$path.="/".$folder[$i];
}

$this->mkdir_recursive($path,0777);
}

private function is_json_file($name)
{
if(substr($name,-4)=="json") return true;
else return false;
}

private function ReadDirs($dir)
{
if ($handle = opendir($dir))
{
while (false !== ($file = readdir($handle)))
{
if (!in_array($file,$this->hide))
{
if(is_dir($dir.$file))
{
$dir_array[]=$dir.$file."/";
}
else
{
if($this->is_json_file($file))
$file_array[]=substr($dir.$file,strlen($this->baseDir));
}
}
}
closedir($handle);

//dir first
for($i=0;$i<sizeof($dir_array);$i++) $this->ReadDirs($dir_array[$i]);
//files second
for($i=0;$i<sizeof($file_array);$i++) $this->file_list[$file_array[$i]]=$file_array[$i];
}
}

function get_files()
{
$this->ReadDirs($this->baseDir);
echo json_encode($this->file_list);
}

function get_content($filename)
{
if($this->is_json_file($filename))
echo file_get_contents($this->baseDir.$filename);
}

function save_changes($filename,$action,$content)
{
if(!$this->is_json_file($filename))
{
die('0');
}

if($action=='delete')
{
$full_name=$this->baseDir.$filename;
if(file_exists($full_name))
{
unlink($full_name);
die('1');
}
}

if($action=='save')
{
$this->check_and_fix_dir($filename);
if(($fp=fopen($this->baseDir.$filename,"w")) === FALSE){
die('0');
}
fwrite($fp,$content);
fclose($fp);
die('1');
}
}
}

$PhpBackend=new phpFiles($_POST['baseDir']);

if($_POST['cmd']=="get_files") json_encode($PhpBackend->get_files());
if($_POST['cmd']=="get_content") $PhpBackend->get_content($_POST['filename']);
if($_POST['cmd']=="save_changes") $PhpBackend->save_changes($_POST['filename'],$_POST['action'],$_POST['content']);


and in index.html change line:


fileControl : new Ext.ux.plugin.CookieFiles()

to:


fileControl : new Ext.ux.plugin.PhpFiles({baseDir: "json/"})

I will try to upgrade this code tomorrow. If you see bug or something to improve - post in this place.

Cheers,
Epsylon/Abstract.Org

[sierk]

Thanks Epsylon=D>,

Based on the changes Epsylon provided for the PHP backend i added allready made changed to the desginer creating a abstract class named FileControl, which will be available as of version 2.0.6. But because i go on holiday and don't have time to test and finish coding 2.0.6 fully. I decided to post at least this part of the code.

For the time being this should help Epsylon or anybody else to make backends which will work in version 2.0.6

Sierk


/**
* FileControl
*/
Ext.ux.plugin.FileControl = function(config) {
Ext.apply(this,config);
Ext.ux.plugin.FileControl.superclass.constructor.call(this);
this.init();
}

Ext.extend(Ext.ux.plugin.FileControl,Ext.util.Observable,{
files : {},
last : null,
activeNode : null,

init : function(){
this.refreshFiles();
},

refreshFiles : function (callback) {
this.files = this.files || {};
if(typeof callback == "function") callback(true);
},

saveChanges : function(id,action,callback,content) {
this.files[id] = id;
if (action=='delete') {
delete this.files[id];
if (id==this.last) this.last = null;
} else {
this.last = id;
}
if(typeof callback == "function") callback(true);
},

openFile : function(id,callback,content) {
this.last = id;
if(typeof callback == "function") callback(true,content);
},


deleteFile : function(id,callback){
this.saveChanges(id,'delete',callback);
},

renameFile : function(fileFrom,fileTo,callback){
var last = this.last;
this.openFile(fileFrom,function(success,content) {
if (success) {
this.saveChanges(fileTo,'save',function(success){
if (success) {
this.deleteFile(fileFrom,function(success){
if (success && last==fileFrom) this.last=fileTo;
if(typeof callback == "function") callback(success);
}.createDelegate(this));
} else if(typeof callback == "function") callback(success);
}.createDelegate(this),content);
} else if(typeof callback == "function") callback(success);
}.createDelegate(this));
},

saveFile : function(id,content,callback){
this.saveChanges(id,'save',callback,content);
},

newFile : function(id,content,callback){
this.saveChanges(id,'new',callback,content);
},

load : function(node, callback,refresh){
if (refresh) {
this.refreshFiles(function(){
this.loadNodes(node,false,callback);
}.createDelegate(this));
} else {
this.loadNodes(node,false,callback);
}
},

loadNodes : function(node,append,callback){
this.activeNode = null;
if (!append) while(node.firstChild) node.removeChild(node.firstChild);
node.beginUpdate();
for (f in this.files){
var file = this.files[f];
var path = f.split('/');
var name = '';
var cnode = node;
var n;
for (var i=0;i<path.length;i++) {
name += path[i];
n=null;
for (var j=0,c=cnode.childNodes;j<c.length && !n;j++) {
if (c[j].attributes.text==path[i]) n = c[j];
}
if (!n) {
var leaf = (i==path.length-1);
n = new Ext.tree.TreeNode({
text: (name==this.last ? '<B>' + path[i] + '</B>' : path[i]),
cls: leaf ? 'file' : 'folder' ,
leaf : leaf,
id : name
});
cnode.appendChild(n);
if (name==this.last) this.activeNode = n;
}
cnode = n;
name += '/'
}
}
node.endUpdate();
if(typeof callback == "function") callback(this.activeNode);
return this.activeNode;
}

});


/*
* CookieFiles
*/
Ext.ux.plugin.CookieFiles = Ext.extend(Ext.ux.plugin.FileControl,{

init : function(){
this.cookies = new Ext.state.CookieProvider();
Ext.ux.plugin.CookieFiles.superclass.init.call(this);
},

refreshFiles : function (callback) {
this.files = this.cookies.get('Designer.files');
Ext.ux.plugin.CookieFiles.superclass.refreshFiles.call(this,callback);
},

saveChanges : function(id,action,callback,content) {
if (content) this.cookies.set('Designer/' + id,escape(content));
if (action=='delete') this.cookies.clear('Designer.'+id);
Ext.ux.plugin.CookieFiles.superclass.saveChanges.call(this,id,action,callback,content);
this.cookies.set('Designer.files',this.files);
},

openFile : function(id,callback,content) {
content = unescape(this.cookies.get('Designer/' + id));
Ext.ux.plugin.CookieFiles.superclass.openFile.call(this,id,callback,content)
}

});

/*
* PHPFiles
*/
Ext.ux.plugin.PHPFiles = Ext.extend(Ext.ux.plugin.FileControl,{

refreshFiles : function (callback) {
Ext.Ajax.request({
url: this.url || "backend.php",
params: {
cmd: 'get_files',
baseDir: this.baseDir
},
callback: function(options, success, response) {
this.files= success ? Ext.util.JSON.decode(response.responseText) : {};
if(typeof callback == "function") callback(success);
},
scope: this
});
},

saveChanges : function(id,action,callback,content) {
Ext.Ajax.request({
url: this.url || "backend.php",
params: {
cmd: 'save_changes',
baseDir: this.baseDir,
filename: id,
action: action,
content: content
},
callback: function(options, success, response) {
if(success && response.responseText=='1') {
if(action=='delete') {
delete this.files[id];
if (id==this.last) this.last = null;
} else {
this.last = id;
}
}
if(typeof callback == "function") callback(response.responseText=='1');
},
scope: this
});
},

openFile : function(id,callback,content) {
Ext.Ajax.request({
url: this.url || "backend.php",
params: {
cmd: 'get_content',
baseDir: this.baseDir,
filename: id
},
callback: function(options, success, response) {
if (success) this.last = id;
if(typeof callback == "function") callback(success,response.responseText);
},
scope: this
});
}
});

[epsylon]

Main.json:


/* This file is created with Ext.ux.plugin.GuiDesigner */
{

items : [{
xtype : "jsonpanel",
title : "JSON Panel",
layout : "fit",
autoLoad : /*BEGIN*/{url : 'json/grid.json'}/*END*/,
'scope.my_ds' : /*BEGIN*/new Ext.data.Store({reader: new Ext.data.ArrayReader({}, [{name: 'comment'}]),data: [['Please set CM and DS properties']]})/*END*/
}]
}grid.json:


/* This file is created with Ext.ux.plugin.GuiDesigner */
{
xtype : "grid",
border : false,
viewConfig : /*BEGIN*/{
forceFit : true
}/*END*/,
ds : /*BEGIN*/scope.my_ds/*END*/,
cm : /*BEGIN*/new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),{header: 'Comment', width: 120, sortable: true, dataIndex: 'comment'}])/*END*/
}Firebug error:


missing : after property id
'scope.my_ds' : "new Ext.data.Store({reader: new Ext.data.ArrayReader({}, [...And it dosen't work. I try to understand 'scope' feature. I need it to create pagging grid. Anybody can help me? What I doing wrong?

Greetz,
Epsylon/abstract.aei.pl

[imran]

One minor thing I noticed in the new 2.x version is that a warning/error is thrown when you go to create a new layout, say BorderLayout. The error is: Failed to apply code TypeError: B has no properties

After looking at the JSON that gets generated, it appears that the commented null statements on blank values seem to cause this.

For example:
title : /*BEGIN*/null/*END*/

When the title property is removed, it loads fine.

[wildfire]

I have just started investigating your awesome Gui Designer, great work, it will save me hours! One thing I cannot seem to do is drag/drop reorder components in the code tree or in the document body. Am I missing something?

Cheers

Nick

[lorezyra]

I wish I knew about this before I started my GUI layout design last week... :(


This stuff is awesome!!!! Just thought I would say that... :D

[sierk]

Main.json:


/* This file is created with Ext.ux.plugin.GuiDesigner */
{

items : [{
xtype : "jsonpanel",
title : "JSON Panel",
layout : "fit",
autoLoad : /*BEGIN*/{url : 'json/grid.json'}/*END*/,
'scope.my_ds' : /*BEGIN*/new Ext.data.Store({reader: new Ext.data.ArrayReader({}, [{name: 'comment'}]),data: [['Please set CM and DS properties']]})/*END*/
}]
}grid.json:


/* This file is created with Ext.ux.plugin.GuiDesigner */
{
xtype : "grid",
border : false,
viewConfig : /*BEGIN*/{
forceFit : true
}/*END*/,
ds : /*BEGIN*/scope.my_ds/*END*/,
cm : /*BEGIN*/new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),{header: 'Comment', width: 120, sortable: true, dataIndex: 'comment'}])/*END*/
}Firebug error:
And it dosen't work. I try to understand 'scope' feature. I need it to create pagging grid. Anybody can help me? What I doing wrong?

Greetz,
Epsylon/abstract.aei.pl


Epsylon,

Just a quick mail form my holiday, but hopes this helps you to understand scope.
scope is a global object used during evaluation of the created json. Normally scope is the jsonpanel which loads the json file or the scope variable of the jsonpannel.
Knowing this you can use this object to access infromation from the caller. The other trick is that json files are parsed in two waves. First wave we load the json tag on the top level so we can load javascript files or style sheet. But also whe can change element of the scope
object by setting for example "scope.varaiblename" in the json tag and later in seconde wave of evaluation you can the use scope.varaiblename to retreive the element.

So move the "scope.my_ds" to the json tag and then use it to initnalize a ds : scope.my_ds

Hopes it helps otherwise wait a week and we will do this in a private message

Sierk

[sierk]

I have just started investigating your awesome Gui Designer, great work, it will save me hours! One thing I cannot seem to do is drag/drop reorder components in the code tree or in the document body. Am I missing something?

Cheers

Nick

For reodering the guidesinger uses the screen. Just click on the element and drag it to the new position. I will add reordering in code three in the one of the next releases.

Sierk

[sierk]

One minor thing I noticed in the new 2.x version is that a warning/error is thrown when you go to create a new layout, say BorderLayout. The error is: Failed to apply code TypeError: B has no properties

After looking at the JSON that gets generated, it appears that the commented null statements on blank values seem to cause this.

For example:
title : /*BEGIN*/null/*END*/

When the title property is removed, it loads fine.

Thanks for the tip,

I fixed this bug in the upcomming release 2.0.6. I plan to release this version arround the 15-08-2008. I will aslo include updated documentation, php files save support and some minor code fixed.

Sierk

[prologic]

Heya,

Just tried your fantastic GuiDesigner.

1. Added a BorderLayout
2. Clicked Ok

Get a dialog:
"Failed to update element TypeError: B is null"

Bug ?

cheers
James

[randcasburn]

Been found by many already. Might try looking around first.


http://extjs.com/forum/showthread.php?p=192856#post192856

It's amazing what you might actually find if you try. I'm sure it's being looked into. So, after you discover an issue like this, then look around and find out someone else has the same issue, you might politely ask the extremely generous person that has done all this wonderful great work...

Hey thanks for all this wonderful great work I can't quite do on my own yet...is there any progress on this one little issue?

[erichua]

I really appreciate it's ideal. But I still try to get used to it. I usually use eclipse to composite the js.
A question who knows where the file is saved? I can not find it .

[sierk]

I really appreciate it's ideal. But I still try to get used to it. I usually use eclipse to composite the js.
A question who knows where the file is saved? I can not find it .

When you use the basic designer files are store in cookies. You can use plugins to save you files to file system. Only works when you use a webserver and is till under development. The first PHP version are available in this thread and will be part of next release. In that release i will also try to fix the layout bug.

Sierk

[SamuraiJack1]

Great stuff )

It will be even better if combine it with this hack:
http://extjs.com/forum/showthread.php?p=204167#post204167

slots collections will be ready after initComponent method execution

[SamuraiJack1]

I tried to refactor my component (which is manually defined) with this designer. Here is my experience and suggestions:

-- It was a form component, so it was unnatural to see it expanded to whole screen. Why not to make default edit mode - in window? Those who expects fullscreen mode can maximize it, and those who not - will be happy too.

-- My component uses custom xtype and Apply button in "Edit Json" dialog failed. Think it should silently fallback to xtype 'panel' (but not change the initial xtype)

-- After changing the xtype to 'panel' Apply succeeded. But it changed all occurrences of "this" to something like
/*BEGIN*//*BEGIN*/new Ext.ux.plugin.Designer({
toolboxTarget : "toolbox",
disableCaching : true,
customProperties : true,
fileControl : null /* Class Ext.ux.plugin.CookieFiles has no initialConfig */
}) /*END*//*END*/not quite sure what is it, seems like internals exposed, but not what I expected. Moreover, when I tried to submit new definition (even w/o modification) it failed with error "Failed to apply code SyntaxError: missing ) in parenthetical"

-- A "Show in window" view was different from original, specifically the components which were defined with column layout, were missed.

[sierk]

I tried to refactor my component (which is manually defined) with this designer. Here is my experience and suggestions:

-- It was a form component, so it was unnatural to see it expanded to whole screen. Why not to make default edit mode - in window? Those who expects fullscreen mode can maximize it, and those who not - will be happy too.

-- My component uses custom xtype and Apply button in "Edit Json" dialog failed. Think it should silently fallback to xtype 'panel' (but not change the initial xtype)

-- After changing the xtype to 'panel' Apply succeeded. But it changed all occurrences of "this" to something like
/*BEGIN*//*BEGIN*/new Ext.ux.plugin.Designer({
toolboxTarget : "toolbox",
disableCaching : true,
customProperties : true,
fileControl : null /* Class Ext.ux.plugin.CookieFiles has no initialConfig */
}) /*END*//*END*/not quite sure what is it, seems like internals exposed, but not what I expected. Moreover, when I tried to submit new definition (even w/o modification) it failed with error "Failed to apply code SyntaxError: missing ) in parenthetical"

-- A "Show in window" view was different from original, specifically the components which were defined with column layout, were missed.

Thanks for this feedback,

The window idea i like and will see how to make this available as a option in the designer.

Chaning xtype is not so easy, this because the json is parsed in one go. But still I understand your question and the advantage and there for will therefor put it on the change list.

The last bit i don't understand. I know why it goes wrong there should be no nested /*BEGIN*/ ... /*END*/ tags. Bug how it is created is for me a questionmark. If you could provide a little bit more information, private message or response, that would be great.

Sierk

[sierk]

All,

The holiday season is over so i started again to make code changes to the Gui designer. The new version is still missing the full documentation as i planned. But because of the number of bugfixes and the new PHP backend for files I decided to release it.

Next release will be focused on getting the documentation up to date.

Sierk

Release history:
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

[riets003]

Just want to say that I love what you made

[SamuraiJack1]

Still having the same issues, any chances they will be fixed (at least reversable JSON generation)?

[sierk]

Still having the same issues, any chances they will be fixed (at least reversable JSON generation)?

Your wiches and bug are put on the change list, but where not implementend. The problem with double encoded tags will be removed in next release. But needs a little more testing before releasing. Still i don't understand how you get the double tag. Also the code example you gave with double encoding is strange. You should not use the designer if you want to load a json. Perhapse you can send a full private message with every step you are doing and what you try to do.

The other option will come but please give some time, or if you have a idea how to solve them you are welcome to give me some pointers.

Sierk

[SamuraiJack1]

pm'ed to you, please check your messages

[winpygsfli]

This may be a rookie mistake, but I am getting the attached error in IE when trying to access GUIDesigner 2.0.6 on a 2003 server runing IIS7. I removed the lines referencing code press and localXHR.js.

[sierk]

This may be a rookie mistake, but I am getting the attached error in IE when trying to access GUIDesigner 2.0.6 on a 2003 server runing IIS7. I removed the lines referencing code press and localXHR.js.

I have no experiance with IIS7 so cannot really help. But what i know is that if you run the Designer by using a webserver you don't need localXHR so just remove it. LocalXHR is there so that you can run the designer from a local (file).

Sierk

[sierk]

Hi all,

I finally started the documentation cycle for version 2.0.x of the GuiDesigner. I have started documenting the code but find it also handy to add some examples of real usage to the documentation.

Therefor i would ask the users of the guidesigner to help me make a better documentation by donation some helpfull tips and tricks of even add user documetation.

If you have something that is usefull just drop it in this thread.

Sierk

[sj137]

Hi

I'm new to the gui designer, btw it looks awesome and i greatly appreciate your effort and especially making it freely available!

I'd like to add the gui designer to the web-desktop example

do you have any tips?

i tried creating a simple window module and adding the viewport, but that replaced the whole desktop apart from the start-menu and taskbar...

please excuse my ignorance i'm not very familiar with viewports

ideally i'd like to have the updatable region inside a window and have the toolbox as another window...

many thanks!

regards

Sunny

[sj137]

ok managed to create the jsonpanel inside a window module but the toolbox window didn't show up...

is it possible to create the toolbox plugin in a seperate window..?

[sierk]

ok managed to create the jsonpanel inside a window module but the toolbox window didn't show up...

is it possible to create the toolbox plugin in a seperate window..?

You can force the toolbox to show up in any location that can contain a window. Moving it to a other container. The container must be called toolbox in id.

Sierk

See example in index.html and uncomment
/* When adding region west toolbox is renderd to this area
{ region : 'west',
layout : 'fit',
border : false,
id : 'toolbox',
xtype : 'panel',
title : 'toolbox',
width : 215
},*/

[sj137]

Hi Sierk, great stuff! ...that works but not entirely...

i created a toolbox window module with just one empty panel and the 'toolbox' id...

then i open my other window module with the json panel....

at first the toolbox isn't loaded, however if i minimise it's window and restore it again then the toolbox loads...

...strange, i'm trying to investigate..

[sj137]

i added

this._toolbox.doLayout();

to line 1012 in Ext.ux.plugin.Designer.js

and now it works...

i guess it could also be added to the beforeshow event... :-?

this plugin is too cool B)

[sierk]

i added

this._toolbox.doLayout();

to line 1012 in Ext.ux.plugin.Designer.js

and now it works...

i guess it could also be added to the beforeshow event... :-?

this plugin is too cool B)

Thanks added it to the new version i am workin on Version 2.1.0:
The following stuff have allready been added to this version

Visual resizing of elements
Visual moving of element within absolute layout
A new internal json parser, therefor no need anymore for /*BEGIN*/ and /*END*/ tags
Custom xtypes added can now also be selected
Code has been cleaned
Added a test suite
Updated the documentation
And a lot of small fixes, like the one you gave


The version will take some more time in testing before releasing and will also gain some more functions. So still any feedback or idea's are welcome.

Sierk

[vega]

v2.0.6 - Still getting layout issue with drag/drop.
border layout -drag/drop- fill in regions / works fine
click on west region, click on property>width and change it from 100 to 150, hit enter
Everything clears from the screen except what is left seems to be as though all the regions merged into one and is empty of data.
I "save" the file as 'test'
then open 'test' and the it displays the correct information, -west is now 150px wide
this is true for any editing at all that is not resizing region-borders with the mouse.

winXPpro sp2
apache2.2
gui 2.0.6
firefox 3.0.1

Love this project. I can see some serious leaps into the code scaffolding realm very soon. As soon as the environment can be used as a live, !saved! document that you can add to and see instantly propagated grid fields, where you can with a click designate targets for linkage, through and ajax interface, watching queries respond to an interface you are changing.

Between this project and the Camping/Shoes project for ruby, I am curious to see who comes out first with the first fluid online interfaced true wysiwyg development environment that acts like and app but is flexible in a way that conventional executable or 'programs' are limited in their inherent rigidness. A system like this could update itself and it capabilities as a gui development environment instantly and concurrently with what is 'saved' at the repository level.

Either way. I have high hopes for this project, as I just had this very same Idea and how powerfull it could be for all developers (especially right brained ones like myself!)... i knew someone had to be doing it.

Kudos -Vega

[sierk]

v2.0.6 - Still getting layout issue with drag/drop.
border layout -drag/drop- fill in regions / works fine
click on west region, click on property>width and change it from 100 to 150, hit enter
Everything clears from the screen except what is left seems to be as though all the regions merged into one and is empty of data.
I "save" the file as 'test'
then open 'test' and the it displays the correct information, -west is now 150px wide
this is true for any editing at all that is not resizing region-borders with the mouse.

winXPpro sp2
apache2.2
gui 2.0.6
firefox 3.0.1




Thanks for your bug, have fix this in version 2.1.0. For now you can just hit the refesh button to redraw and it is display correctlty. Or implement the fixed.


/**
* redraw an element with the changed config
* @param {Element} element The elmenent to update
* @param {Object} config The config
* @return {Boolean} Indicator that update was applied
*/
redrawElement : function (element,selectId) {
var el = element || this.activeElement;
if (el) {
try {
var id = selectId || (this.activeElement ? this.activeElement[this.jsonId] : null);
var p = this.container; //Redraw whole canvas
if (!this.redrawContainer && el!=p) {
//Check if whe can find parent which can be redraw
var c = '';
p = this.getContainer(el);
//Search if whe find a layout capable contianer
while (p!=this.container && !c) {
c = p.codeConfig.layout;
p = this.getContainer(p.ownerCt);
}
}
this.applyJson(this.getConfig(p).items,p);
this.redrawContainer=false;
this.selectElement(id);
} catch (e) { Ext.Msg.alert('Failure', 'Failed to redraw element ' + e); }
this.fireEvent('change',el);
this.modified = true;
return true;
}
return false;
},


Can you drop me a message with the url to the Camping/Shoes project for ruby. Always nice to see what somebody else is doing.

Sierk

[Nam]

I've had troubles getting this to work properly, so I thought I would mention it here...

What I was trying to do is run Gui Designer on my site to allow it to be run from within my application that I am designing. I am intending to use it as a form designer, so that I can dynamically create forms for what ever purpose I want using a GUI interface. This Gui Designer is a perfect for this I think...

So, because I am using this from within a PHP based site which uses CodeIgniter, the paths are different, and I do not want to use the default paths which Gui Designer (GD) uses (ie /js/). So, I put everything where I wanted to, and I ran into some troubles of course. I saw that the file Ext.ux.plugin.Designer.json had to be changed to point to the proper files. I then saw that in the documentation that one of the files has to be specified using the toolboxJson config option. When I did this though, I ran into a problem which is the reason I am posting to this thread.

When I changed the toolboxJson option, things stopped working properly. I was getting an alert error saying something about this.propertyFilter not being a function. After looking at the code inside of Ext.ux.plugin.Designer.js and doing a bit of debugging, I found that a section of code was not being run which needs to be. Lines 963 through line 989 was not being run at all. I commented out line 962 and 990, reloaded the page, and it started working again.

So, this seems like a bug which prevents the toolboxJson config option from working properly. The small fix which I did by removing the "if (!this.toolboxJson) {" statement is the fix for this which worked for me.

You may want to take a look into this....

[sierk]

I've had troubles getting this to work properly, so I thought I would mention it here...
...

You may want to take a look into this....

Hi,

I know that in the current version there are some path problems. The current code tries to construct the path by going trough the loaded java files. This will change, with a lot of other stuff, in the new version 2.1.0 that is currently on the way. Then you can specfiy the full path in the toolbox config item. Keep in mind that this problem is also there for code editor.

The best way to solve it for now is go into the code of the desginer.js and find the place where we make the path. Replace this with you hard code path.

Sierk

[sierk]

Hi all,

It has been a while but i almost finished version 2.1.0. This is version has a number of new features and a large number of bug fixes. Before i want to release the version in general i am looking for people who are using a version 2.0.x and want to help it make more stable.

I already want to thanks Samuraijack who is already helping.

So i you are willing to help testing send me a private message and i will provide you a download link.

Sierk

Current changelist Version 2.1.0:
+ 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 load 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 version of base ExtJs to 2.2 instead of 2.0, so it also works correlty on firefox 3.0
+ You can now add you own property editors, bye 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)
+ A error statusbar and tab have been added to show errors. Click on error icon on statusbar to show or hide detailtab
* Fixed when removing all properties of node also the node is removed
* Fixed redrawElement problem causing a blank screen to be shown
* Fixed problem in propertygrid that selectionboxes which where allowed to be customized could not be changed
* Fixed refresh is now using redraw instead of reloading config
* Fixed Before showing the preview window the designer is cleared, therefor no conflicts any more with same extjs ids
* Fixed the codetree was not cleared when last element removed

[heikochan]

Hi Sierk, thanks for the contribution of the Free Gui designer, it helps alot!

but for me (a newbie) in Extjs, i have some suggestions,
i rather like putting the tree structure panel(Code Tree) and the (Components) panel separaterly(showing them on the screen at the same time without tab switching)...

Since every time i want to add a new component, i need to switch the tab,
but the fact is that i am concentrated in the tree structure panel(Code Tree)and the property of each elements...while i need to add the elements at the same time,

so i am suggesting that could the (Components) panel be a standalone tool bar so that i can easily keep track on the structure and the properties of the elements?
just like http://tof2k.com/ext/formbuilder/ this builder?

i am also new to user Interface, so i am not sure if my suggestion make sense or not

but P.s. many thanks to your GUI designer! it is reali very helpful!:D:D:D

[sierk]

Hi Sierk, thanks for the contribution of the Free Gui designer, it helps alot!

but for me (a newbie) in Extjs, i have some suggestions,
i rather like putting the tree structure panel(Code Tree) and the (Components) panel separaterly(showing them on the screen at the same time without tab switching)...

Since every time i want to add a new component, i need to switch the tab,
but the fact is that i am concentrated in the tree structure panel(Code Tree)and the property of each elements...while i need to add the elements at the same time,

so i am suggesting that could the (Components) panel be a standalone tool bar so that i can easily keep track on the structure and the properties of the elements?
just like http://tof2k.com/ext/formbuilder/ this builder?

i am also new to user Interface, so i am not sure if my suggestion make sense or not

but P.s. many thanks to your GUI designer! it is reali very helpful!:D:D:D


Hi,

The code tree is only there to edit hidden components. Because compared to formbuilder each field in the designer can be visual moved or cloned by dragging it. Also we are going to add inline editing of labels(2.2) and visual resize (2.1).

I know there is to little documenation on how to use it. There for i will create and publish a demo with the release of 2.1 and hopefully some user documentation.

Sierk

[heikochan]

hi, sierk, oic !!
i in fact duno it can d'nd
now it is easier to handle!!
thanks!:D:D

how about copy function?
does it allow me to copy some elements? thanks!

[sierk]

hi, sierk, oic !!
i in fact duno it can d'nd
now it is easier to handle!!
thanks!:D:D

how about copy function?
does it allow me to copy some elements? thanks!

Copy of elements or group of elements can be done by starting a drag with shift holding down. This will start clone mode. You have to have shift pressed before starting drag in version 2.0.x as of version 2.1 it can also be pressed during drag.

Sierk

[heikochan]

oo!!! i get it !!! thanks!!=D>=D>=D>

[sierk]

Finaly version 2.1.0 is release 'Visual Resize and New JsonParser'

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


Enyou and use external download (http://www.webblocks.eu/designer.zip) to download the full code.

:D
Sierk

[fionn]

I create a borderlayout (north and west) and add a tab panel to center (1 tab). Now I want to add items to the tab. Unfortunately I cant select it and the "Select" Tab in the Designer window is entirely empty. Whats wrong?

[sierk]

I create a borderlayout (north and west) and add a tab panel to center (1 tab). Now I want to add items to the tab. Unfortunately I cant select it and the "Select" Tab in the Designer window is entirely empty. Whats wrong?


What wrong is that there is a internal error, a variable el has no value causing the error, that item is not redrawn. When hitting the refesch button it is. I will create a bug for this and will try to solve it. Check out subversion to get the latest release with fixes.

Sierk

[wgollino]

I was having the same problem with the select tab not showing any items. I think I found a solution.

In the file /js/Ext.ux.guid.plugin.Designer.Select.json, change line 42 to:
this.root.reload.defer(100, this.root);

from:
this.root.reload.defer(100,this);

The change is "this" => "this.root" - basically call this.root within its own scope.

Thanks,

Will

[paulallen]

It seems you bug tracker is having issues.

It takes a long time to respond, all images and css appear missing and links within tend to point to the same site but on port 8000.

I really like what you've made but it's not as functional on Chrome as the other browsers.

My Chrome is Version 0.4.154.31.

I have 2 bugs I'd like to raise when the tracker becomes available.

The select tab appears empty when items are present, in the design area a difference from Firefox.

I notice you mask the properties section when no controls are added to the design window. If you trigger the help page and maximize it, the mask appears over the help page.

[sierk]

It seems you bug tracker is having issues.

It takes a long time to respond, all images and css appear missing and links within tend to point to the same site but on port 8000.

I really like what you've made but it's not as functional on Chrome as the other browsers.

My Chrome is Version 0.4.154.31.

I have 2 bugs I'd like to raise when the tracker becomes available.

The select tab appears empty when items are present, in the design area a difference from Firefox.

I notice you mask the properties section when no controls are added to the design window. If you trigger the help page and maximize it, the mask appears over the help page.

Bug tracker is running on port 8000 on my server and works fine when i test it with my chrome. 0.4.154.29. Please try to connect directly to bugtracker to see if it works better

http://www.webblocks.eu:8000/bugtracker/index.php

Sierk

[panosru]

Hi!, I love your application it is extremely useful!
I just have a question about RecordGrid, it produces the following code, but how to use it? I mean xtype is not supported and required_js & required_css are not working is there any extension i have to insert except recordform extension?


/* This file is created or modified with
* Ext.ux.guid.plugin.GuiDesigner (v2.1.0)
*/
{
xtype : "recordformgrid",
json : {
required_js : "3rdparty/recordform/js/Ext.ux.grid.Search.js;3rdparty/recordform/js/Ext.ux.IconMenu.js;3rdparty/recordform/js/Ext.ux.grid.RowActions.js;3rdparty/recordform/js/Ext.ux.grid.RecordForm.js;3rdparty/recordform/js/Ext.ux.form.DateTime.js;3rdparty/webblocks/Ext.ux.RecordFormGrid.js",
required_css : "3rdparty/recordform/css/icons.css;3rdparty/recordform/css/Ext.ux.grid.RowActions.css;3rdparty/recordform/css/recordform.css"
}
}

Thanks in advance! :D

EDIT:
Ok, i downloaded GUI Designer and read the code and realized the way it works ;)

PS: I added the files from require_js /_css manualy as i couldn't make this work automatically... :(

[kusoft.net]

(1) add a formpanel with layout=absolute
(2) add a radio component to formpanel
(3)drap the radio component to center.(it can't drop center.)why

[Condor]

Almost predictable bug:

Enter:

anchor: '-10'

The GUI designer will see this as:

anchor: -10
(which doesn't work of course)

[jjw]

I have a ComboBox that I need bound to a JsonStore. Clearly I am doing something wrong.

The ComboBox is defined like this:


{
xtype : "combo",
fieldLabel : "Gender",
hiddenName : "gender",
name : "gender",
id : "gender",
allowBlank : false,
displayField : "gender",
store : new Ext.data.JsonStore({
name: 'gstore',
id: 'gstore',
url: '/sassi/genders',
autoLoad: true,
fields: [{ name: 'gender'}],
listeners: {
load: function() {
alert("Genders loaded");
foo = this;
this.each(function(bar) {
alert(bar.get('gender'));
});
}
}
})
}

The alerts fire after loading with the proper values, but the values never appear in the ComboBox.

Additionally, given that a JsonStore has been created, I don't seem to be able to grab the object with an Ext.getCmp(<id>). Is there any way to expose the store to the object or function that contains the JsonPanel containing this ComboBox?

Thanks in advance for any insights into what is going on.

-J

[Condor]

1. You should make your combobox mode:'local' if you autoLoad your store.
2. Don't specify a name AND a hiddenName. You don't have a valueField, so hiddenName isn't needed.
3. Most people want triggerAction:'all' instead of the default 'query'.

ps. This doesn't apply to you (because you should remove hiddenName), but:
hiddenName and id can NOT be the same!

[murmor]

I placed two Tabs inside TabPanel one contains JsonPanel and the other contains CodePress. I get the code written in CodePress as string but it does not render in JsonPanel. How can I write something in CodePress in a tab and show it in JasonPanel on other tab.

[mdm-adph]

Wow -- first I've seen of this. Looks amazing!

[anshubansal2000]

Mindblowing..... amazing work.. How long it took you to develop something like this??

[juanyque]

Hi, Sier, good job.

I'm new in ExtJS and more new in GuiDesigner.

I can't view de code tree in GuiDessigner 2.1.0. I only can see tree components. No section title "Components" or "Code Tree" are showed like in example images.

Thanks in advanced.

[juanyque]

It looks that the first time I use de GuiDesigner from a new directory, Code Tree is show in Tab Select, but if I close de browser and I open GuiDesigner one more Time, Tab Select doesn't work and it doesn't show Code Tree...

Is there any file saved automatically with defalts (and bad) configuration that I can delete until the bug it's solve?

Thanks

[three_uncle]

=D>
=D>
=D>

[sierk]

All,

It has been a long time, before i had the time to make some fixes. So i started again and solved the select problem. People who know how to use svn can download version 2.1.1 others have to wait a few days more. Have to do some more testing and see if i can fix more problems.

Any request or bug please let it know.

Sierk
:D

[sierk]

Almost predictable bug:

Enter:

anchor: '-10'

The GUI designer will see this as:

anchor: -10
(which doesn't work of course)

Will add a code fix for this property type, are there more of these types ?

Sierk

[juanyque]

Hi Sierk, thanks for you response,

I can't find guidesigner snv repository, can you send me the url please?

Thanks

[sierk]

Hi Sierk, thanks for you response,

I can't find guidesigner snv repository, can you send me the url please?

Thanks

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

[sierk]

Mindblowing..... amazing work.. How long it took you to develop something like this??

2.0 has been build up form scratch in arround 100 hours.

Sierk

[ZeroPain]

I made a patch to your current svn revision. Fixes a issue with your php code for saving and opening files. At least on my server it was turning all " into \" which wouldn't allow me to reload it after saving.

I also added two little quick things. I included jsmin and a js formatter and added 2 new buttons on the json edit window and the codefield box's.

I signed up on your bugtracker also. Which is why i added the jsmin feature i saw someone had put in a feature request for it and figured it wouldn't take me long to do. and the library i used to do both the formatting and minify has no license conflicts. Both say you can use it for whatever you see fit basicly. I'm not sure if you want this patch or not but i figured i'd offer just let me know where to send it if you do.

Also if i can find the time today i'm gonna try to finish one of other change or addon. Putting this awesome app of yours into a adobe air app with a new file provider using the system open and save options. I haven't gotten to far into it so i don't know how well it will work but in theory at least in my mind should be pretty easy to do.

I have a few other ideas to which if i complete i will share with you and you can include them or not up to you.

I'll also send you a copy of that if you wish. When i get it finished i'd also be willing time allowing to keep the adobe air version up2date with your based version.

I really like what you have made here so just trying to help a little bit.

[mschwartz]

I made a patch to your current svn revision. Fixes a issue with your php code for saving and opening files. At least on my server it was turning all " into \" which wouldn't allow me to reload it after saving.

I also added two little quick things. I included jsmin and a js formatter and added 2 new buttons on the json edit window and the codefield box's.

I signed up on your bugtracker also. Which is why i added the jsmin feature i saw someone had put in a feature request for it and figured it wouldn't take me long to do. and the library i used to do both the formatting and minify has no license conflicts. Both say you can use it for whatever you see fit basicly. I'm not sure if you want this patch or not but i figured i'd offer just let me know where to send it if you do.

Also if i can find the time today i'm gonna try to finish one of other change or addon. Putting this awesome app of yours into a adobe air app with a new file provider using the system open and save options. I haven't gotten to far into it so i don't know how well it will work but in theory at least in my mind should be pretty easy to do.

I have a few other ideas to which if i complete i will share with you and you can include them or not up to you.

I'll also send you a copy of that if you wish. When i get it finished i'd also be willing time allowing to keep the adobe air version up2date with your based version.

I really like what you have made here so just trying to help a little bit.

http://www.php.net/magic_quotes

[dbassett74]

Although this thing LOOKS pretty nice, it seems completely useless. For example, why can't it support adding another BorderLayout into the Center of an existing BorderLayout? Also, why can't I click on an existing item and Edit the properties? What does the "Select" tab do? It is always empty for me. Seems like a lot of work left to do.

[Condor]

You can add a border layout inside another border layout (but there is a display error, which can be fixed by clicking redraw.
The select tab should show a tree of the generated components, but it also didn't work all the time for me.

[vuv]

Is there any documentation of how to use the GUI Designer extension? I'm fairly new at ExtJS.

Thank you.

[rongren]

thanks

[Nekiy]

How I may components property to do invisible in left bottom site. But in JSON this property need to be?

[dbassett74]

How I may components property to do invisible in left bottom site. But in JSON this property need to be?

Translation please?

[Nekiy]

Translation please?
I want some properties of a component, to hide for editing. But in generated JSON these properties should be in my defaults values. I can make this configure, or I should edit functions Javascript for this?

[MikeB]

A little more specific information would be helpful. Such as what components do you want to use? What components do you want to hide during editing?

Providing a code example / screen shot of what you want the designer outputs with some comments on what parts are to be hidden, etc would be a good starting point.

[SchattenMann]

thats one of the most useful work i've seen...i mean, using extjs to simplify the work to develop on extjs...is great!

congrats

[Manhani]

Hello all,

Is there a way for me to add a new custom xtype?? For example, i need to add a customized fieldset that i've made to the designer called 'myfieldset' and it has a .js named myfieldset.js that has it's actions. How can i make it part of guidesigner?

Thanks in advance.

[cmschick]

Hi Sierk,

Great tool, it amazes me how fast some of you seem to come up to speed with ExtJS, absolutely astonishing.

Anyway, I was reading this thread on page 10 and noticed you were discussing the onRender function of the Ext.ux.JsonPanel.js file. I would like to do the same thing and I was hoping I could just use what you listed in the thread but I don't see the same source in the latest svn version. I don't really want to modify the svn version to match what you posted without knowing why it didn't make it into the release version...

Could you please let me know if this is still viable? Or maybe send me what you had at the time?

Thanks again for the designer and your help.

Chris

[sierk]

Hi Sierk,

Great tool, it amazes me how fast some of you seem to come up to speed with ExtJS, absolutely astonishing.

Anyway, I was reading this thread on page 10 and noticed you were discussing the onRender function of the Ext.ux.JsonPanel.js file. I would like to do the same thing and I was hoping I could just use what you listed in the thread but I don't see the same source in the latest svn version. I don't really want to modify the svn version to match what you posted without knowing why it didn't make it into the release version...

Could you please let me know if this is still viable? Or maybe send me what you had at the time?

Thanks again for the designer and your help.

Chris

Hi,

The code changed, we implemented a Apply function which is called from the code. So the effect is the same but you can also apply code without calling the onrender.


onRender : function(ct, position){
Ext.ux.JsonPanel.superclass.onRender.call(this, ct, position);
var um = this.getUpdater();
um.showLoadIndicator = false; //disable it.
um.on('failure',function(el, response){
if (this.ownerCt) this.ownerCt.el.unmask();
if (this.json.fireEvent('error','failedjsonload','url in autoLoad not valid')) {
this.fireEvent('failedjsonload',response);
}
}.createDelegate(this));
um.on('beforeupdate',function(el, url, params) {
if (this.loadMask && this.ownerCt)
this.ownerCt.el.mask(this.loadMsg, this.msgCls);
}.createDelegate(this));

um.setRenderer({render:
function(el, response, updater, callback){
this.apply(response.responseText,callback);
}.createDelegate(this)
});
},

/**
* Apply a json configuration to this window
* @param {String} cfg A string containing a json configuration
* @param {Function} callback A callback function called after succesfull apply
* @returns {Boolean} True when apply was successfull otherwise false
*/
apply : function(cfg,callback) {
this.fireEvent('beforejsonload', cfg);
try {
this.json.apply(this,cfg);
this.fireEvent('afterjsonload');
if(callback) {callback();}
return true;
} catch (e) {
if (this.json.fireEvent('error','failedjsonload',e) &&
this.fireEvent('failedjsonload',cfg,e))
Ext.Msg.alert('Failure','Failed to decode load Json:' + e.message)
return false;
}
}

[sierk]

Chris,

Code is same but now we use apply function


onRender : function(ct, position){
Ext.ux.JsonPanel.superclass.onRender.call(this, ct, position);
var um = this.getUpdater();
um.showLoadIndicator = false; //disable it.
um.on('failure',function(el, response){
if (this.ownerCt) this.ownerCt.el.unmask();
if (this.json.fireEvent('error','failedjsonload','url in autoLoad not valid')) {
this.fireEvent('failedjsonload',response);
}
}.createDelegate(this));
um.on('beforeupdate',function(el, url, params) {
if (this.loadMask && this.ownerCt)
this.ownerCt.el.mask(this.loadMsg, this.msgCls);
}.createDelegate(this));

um.setRenderer({render:
function(el, response, updater, callback){
this.apply(response.responseText,callback);
}.createDelegate(this)
});
},

/**
* Apply a json configuration to this window
* @param {String} cfg A string containing a json configuration
* @param {Function} callback A callback function called after succesfull apply
* @returns {Boolean} True when apply was successfull otherwise false
*/
apply : function(cfg,callback) {
this.fireEvent('beforejsonload', cfg);
try {
this.json.apply(this,cfg);
this.fireEvent('afterjsonload');
if(callback) {callback();}
return true;
} catch (e) {
if (this.json.fireEvent('error','failedjsonload',e) &&
this.fireEvent('failedjsonload',cfg,e))
Ext.Msg.alert('Failure','Failed to decode load Json:' + e.message)
return false;
}
}

[Tal]

I love Ext and this GUI is a great idea but so far (version 2.1) it does not work much :(

For instance you cannot resize a button. How hard should that be?
Select" also is a weird tab that will work sometimes only. It will stay empty otherwise and you may have a hard time selecting elements in the main panel.

So sorry but I can't say that this tool is great. It's useless in it's current state and that's a pity.

I also tried a bit with IE and as expected it's even worst. But who cares of IE nowadays :p

[tof]

Wooch Tal !

I won't say this is the tool of the century, furthermore I did not approve this fork.

But you should not criticize it like this, because this is done by volunteer work, and on an opensource license. And it was a lot of work.

Buttons cannot be resized because this builder is for ext2, where buttons cannot be resized...

It seems abandoned now, but anybody (you ?) can go and edit the source code.

[sierk]

Wooch Tal !

I won't say this is the tool of the century, furthermore I did not approve this fork.

But you should not criticize it like this, because this is done by volunteer work, and on an opensource license. And it was a lot of work.

Buttons cannot be resized because this builder is for ext2, where buttons cannot be resized...

It seems abandoned now, but anybody (you ?) can go and edit the source code.

Because lake of time and version 3 that will have a builder I decided not to continue. Also not that as of version 2.x the code is totaly different from the original of tof.

[sqsandres]

Hello, I’m a software developer and I’m using your component to ExtJs web designer. (Thanks for this code)

I have a problem and I try and try to fix but I can’t. The problem appear when I use the ExtJs version 3, the method “appendConfig” in “Ext.ux.guid.plugin.Designer”, when the component add the items to the reference object “src.codeConfig.items = []” or “src.codeConfig.items.push(comp);” the container must be update too but in ExtJs version 3 don’t work.
In others words "src.codeConfig != this.container.codeConfig.items[x]" so the drops items don't be rendered

Please if you can help me please try because I don’t know what happen.

Thanks a lot for your time and if you can’t help me don’t worry thanks again.

__________
Carlos

[chakik]

Hello,

I'm new to Extjs and have downloaded your Gui designer. I have made a panel with 3 tabs and I would like to know if it is possible to put into the tabs the result of execution of php code. However, if I have libraries and stylesheets to include in the header for the resulting html code (after execution of php), how to include them?

Thank you.
-Fadi

[Redsandro]

This is great. This is the latest tool for Ext designing that is not commercial, correct? Or is there something newer that I am not aware of?

This editor has more features than the older formbuilder which is still running here:
http://tof2k.com/ext/formbuilder/

But the formbuilder has an Elements Tree where you can select everything.
Gui Designer does not have this, and I cannot select a button I created. It just does nothing, or fires the handler. Any way around this?

-edit-

I have noticed the 'Select' tab is the new 'Elements Tree', but it is buggy and after clicking around a bit, the 'Select' tab is always empty (nothing to select).