PDA

View Full Version : Ext Designer 1.x



Pages : [1] 2

aconran
9 Nov 2008, 12:49 PM
I thought I would share some videos of the current development version of the Ext 3 Designer. It's coming along nicely.

Video showing grid, window, forms:

http://www.screencast.com/t/c4T3Gbfhn

Older version showing grid:

http://www.screencast.com/t/XN8RXirJ

Yes, it was actually built using Ext. :D

Remy
9 Nov 2008, 1:14 PM
Holy cow, that is trully impressive.

danh2000
9 Nov 2008, 2:59 PM
Wow - my management will LOVE this!

As always Jack, very impressive!

vishalg
9 Nov 2008, 4:29 PM
Can't wait for 3.0
Thanks for the sneak peak.

albeva
9 Nov 2008, 8:24 PM
very very nice. Can't wait to get my hands on this.

It's all extjs and Air right? So basically it will generate json? what's json code quality? any example of that? I mean how easy would it be to understand, edit and modify once generated code?

mankz
9 Nov 2008, 8:56 PM
Incredible stuff... Can't wait :)

Animal
10 Nov 2008, 1:15 AM
Very impressive.

You seem to have a good javascript "bean" API going there which allows editing of properties. Very impressive to hoik the beginners in.

It's going to create a high support demand as people throw something together with that which is totally Ext standard, and then wail "How do I center the buttons in my login dialog?"* and they have no idea what anything is, what the DOM is what CSS is, what Javascript is, what an object is...

And if they have any wherewithall, they'll soon find it faster to program Ext directly themselves.


* An actual question from a couple of days ago. You have to be able to manipulate the resulting DOM structure after render.

Darklight
10 Nov 2008, 2:08 AM
very nice indeed!
Animal is right, it's probably going to quadruple the n00b posts, but this is also a nice starting point for the veterans who can slap something together quickly and then just hand-code the little details. can't wait to play with this!
great job Jack!

Animal
10 Nov 2008, 2:35 AM
Veterans can slap something together in code much more quickly than twiddling about clicking in PropertyGrid cells, and dragging things around! It really is an absolute beginner tool.

oliverseitz
10 Nov 2008, 2:41 AM
wow!!! looks great.

any idea when new release extjs 3 will come??

bye
oliver

jack.slocum
10 Nov 2008, 3:41 AM
It really is an absolute beginner tool.

I have to disagree here. It has been designed from the start to be a tool that I would be willing to use - and in the past, I have also never been willing to use any kind of designer. Don't pass judgment so quickly. ;)

jay@moduscreate.com
10 Nov 2008, 4:09 AM
That's awesome dude.

ThorstenSuckow
10 Nov 2008, 4:43 AM
Nice, reminds me of the time where me and JBuilder would meet every day for a couple of hours :)

jay@moduscreate.com
10 Nov 2008, 5:35 AM
wow!!! looks great.

any idea when new release extjs 3 will come??

bye
oliver

did you see the end of the video?

ry.extjs
10 Nov 2008, 7:34 AM
this is exactly the kind of tool that i've been waiting for. it'll put a capital R on the rapid in Rapid development framework.

jon.whitcraft
10 Nov 2008, 8:38 AM
I thought I would share some videos of the current development version of the Ext 3 Designer. It's coming along nicely.

Video showing grid, window, forms:

http://www.screencast.com/t/c4T3Gbfhn

Older version showing grid:

http://www.screencast.com/t/XN8RXirJ

Yes, it was actually built using Ext. :D


Very nice Jack! Can't wait to see a preview release of this!

azeredo
10 Nov 2008, 11:14 AM
Very nice!!

Its works in localhost or web only?

TopKatz
10 Nov 2008, 12:54 PM
Very nice!!

Its works in localhost or web only?

It looked like it was running in AIR in the SC

Animal
10 Nov 2008, 11:46 PM
Does it generate one hugely nested, by-the-book Ext config object?

What happens when you tweak it to do what the application demands? Because I have almost never used an object unmodified in some way.

And the generated script is copy/pasted into a JSP page (or equivalent)?

Foggy
11 Nov 2008, 12:50 AM
Holy crap

yuri.rj
11 Nov 2008, 2:22 AM
Can we try it?

jratcliff
11 Nov 2008, 6:27 AM
This is really nice!!!! Now if only this was an eclipse plugin.... :)

jack.slocum
11 Nov 2008, 6:46 AM
This is really nice!!!! Now if only this was an eclipse plugin.... :)


We are working on that. :)

jratcliff
11 Nov 2008, 7:16 AM
We are working on that. :) Oh wow!!!! That's great news! Especially for the Lotus Notes/Domino developers who are now moving to using Eclipse with the lastest version of their IDE, Domino Designer. =D>

Brendan Carroll
11 Nov 2008, 11:20 AM
=D> Breathe Deep...

fmartinez
12 Nov 2008, 2:10 AM
Wow...

My own IDE project can now go to the trash...

:(

tjstuart
12 Nov 2008, 2:39 PM
Does it generate one hugely nested, by-the-book Ext config object?

What happens when you tweak it to do what the application demands? Because I have almost never used an object unmodified in some way.

And the generated script is copy/pasted into a JSP page (or equivalent)?

I would like to know this also. Looks great though.

jack.slocum
12 Nov 2008, 3:07 PM
Does it generate one hugely nested, by-the-book Ext config object?

What happens when you tweak it to do what the application demands? Because I have almost never used an object unmodified in some way.

And the generated script is copy/pasted into a JSP page (or equivalent)?

No, of course not. Remember I said it was being designed to be something I would actually use? ;)

The code it generates follows best practices for how to organize components into isolated, reusable components - even within your application (not just Ext itself).

However, if you were to do your entire application as 1 designer component, then yes, you would get 1 class and 1 big config object.

tjstuart
12 Nov 2008, 3:17 PM
The code it generates follows best practices for how to organize components into isolated, reusable components - even within your application (not just Ext itself).

Excellent. I need this yesterday :)

linux_china
12 Nov 2008, 4:51 PM
We are working on that. :)
Can I implement this plugin in IntelliJ IDEA? :)

Zyclops
12 Nov 2008, 10:22 PM
Fantastic work.. it was so good in fact, I had to tell the world http://ajaxian.com/archives/ext-js-30-roadmap-and-developer-tool :)

oshimin
13 Nov 2008, 11:54 AM
i view the demo it's very cool!!!! i wait for it.
video here (http://www.screencast.com/t/c4T3Gbfhn)

SeaSharp2
13 Nov 2008, 7:15 PM
What license will ship with the Ext 3.0 Designer?

I ask because I would like to incorporate a cut down version of the form designer inside my current ExtJS project.

pieturp
14 Nov 2008, 11:39 AM
Now *that* is what I call superb :-)
I can't wait!

Thank you Jack and everyone contributing!

carl23934
19 Nov 2008, 6:44 AM
I think one thing that I think many people would like to see is absolute positioning of form elements within a panel. Is there any plan for this in the future of the Designer or Ext at all? It doesn't seem practical to somehow hard-code the positions in Ext, but the Designer opens a whole new world with drag and drop placement abilities.

The lack of truly dynamic forms in Ext is one reason I have not used it for 100% of my recent projects. It's wonderful using Ext, but some of these trivial limitations keep me from using it 20% of the time.

Your designer will definitely make the development time much quicker when creating quick mock ups to show the boss that are redesigned at every whim.

Well done!

Animal
19 Nov 2008, 7:38 AM
"The lack of truly dynamic forms"

I don't understand that. Ext Containers are dynamic. You can add to them and remove from them as needed.

And pixel-based positioning is almost always undesirable. Best to work to a layout scheme that will lay out the components according to smoe defined rules.

jay@moduscreate.com
19 Nov 2008, 7:40 AM
Very nice Jack! Can't wait to see a preview release of this!

holy crap dude, where have you been? :)

Lobos
19 Nov 2008, 9:06 AM
And pixel-based positioning is almost always undesirable. Best to work to a layout scheme that will lay out the components according to smoe defined rules.

Animal,

That is an interesting statement you made there, do you have directions on acquiring further information or examples for working with this layout scheme and the defined rules you mentioned?

Thanks,

Lobos

Lobos
19 Nov 2008, 9:08 AM
ooops I should have posted this first!

Jack, thanks a lot for the Designer IDE - I can see great use for this, especially if you can create and save custom components / layouts, etc.

Great tool! Thanks again.

Lobos

carl23934
19 Nov 2008, 10:06 AM
I don't understand that. Ext Containers are dynamic. You can add to them and remove from them as needed.

And pixel-based positioning is almost always undesirable. Best to work to a layout scheme that will lay out the components according to smoe defined rules.

Pixel-based positioning is what I would always prefer for forms. In the forms I deal with, there are too many fields to put them one on top of another or in a few columns. I can create a very complex colum layout that will get me the desired affect, but I could also just use tables or divs with normal html forms to get the effect I need MUCH more quickly.

jack.slocum
19 Nov 2008, 10:33 AM
I think one thing that I think many people would like to see is absolute positioning of form elements within a panel. Is there any plan for this in the future of the Designer or Ext at all? It doesn't seem practical to somehow hard-code the positions in Ext, but the Designer opens a whole new world with drag and drop placement abilities.

The lack of truly dynamic forms in Ext is one reason I have not used it for 100% of my recent projects. It's wonderful using Ext, but some of these trivial limitations keep me from using it 20% of the time.

Your designer will definitely make the development time much quicker when creating quick mock ups to show the boss that are redesigned at every whim.

Well done!

Its already supported in any container that has a layout of absolute. Any component can be dragged and positioned, not just form fields. :)

Ronaldo
19 Nov 2008, 10:44 AM
Hi Jack,

Very, very impressive...
If you get this in Eclipse... I've got a rough EMF eclipse that can generate java or php (working on those templates) so we could also generate thet server-side code... (Now it generates javascript Ext code, but with the builder we might not need that any more)

Meanwhile, it would be really great if you could configure the 'IDE' with extra plugins. But I'm sure you thought about that :)

Ronaldo

Animal
19 Nov 2008, 11:01 AM
Animal,

That is an interesting statement you made there, do you have directions on acquiring further information or examples for working with this layout scheme and the defined rules you mentioned?

Thanks,

Lobos

I just mean Ext Layouts.

Maybe put your form fields in a layout:'table' container, or several columns of a layout:'column' container. It just allows more flexibililty so use a layout manager which works according to a rules, and then you ask it to arrange your elements.

I just don't fine pixel based positioning necessary.

Specify the right layout, configure the padding/margins properly, and out pops a neatly layed out UI which can also react to resizing.

damien
20 Nov 2008, 2:15 AM
It looks very nice, but i think i have to agree a little bit with animal that beginners with ext like to use somthing like this. If you need advanced things it will require knowledge off the framework. You can only obtain thiss knowledge with playing it yourself not with a tool like this one. I will use something like this for quickly making a beginning for a page, then copy the code to my editor and modify it myself. It looks great!

pljluca
8 Jan 2009, 1:36 AM
I thought I would share some videos of the current development version of the Ext 3 Designer. It's coming along nicely.

Video showing grid, window, forms:

http://www.screencast.com/t/c4T3Gbfhn

Older version showing grid:

http://www.screencast.com/t/XN8RXirJ

Yes, it was actually built using Ext. :D

Hi!
Where is possible to download the Ext Designer showed in to the movie?

serserfan
8 Jan 2009, 6:54 AM
Very nice! What time the new version will be released ?

mabello
8 Jan 2009, 8:14 AM
http://extjs.com/products/extjs/roadmap.php

serserfan
8 Jan 2009, 10:20 AM
Early 2009 ? but What time ?

jay@moduscreate.com
8 Jan 2009, 10:23 AM
Early 2009 ? but What time ?

At 19:32

mjlecomte
8 Jan 2009, 11:35 AM
At 19:32

Which timezone is that?

mavenn
9 Jan 2009, 2:40 AM
when exactly it is coming. jan?:)

Eclipse version is cool.

Are you guys also gonna do extjs.com using extjs fully.)

bone
9 Jan 2009, 4:09 AM
This is beyond fantastic. This is beyond brilliant.

The ToolBox ALONE made us smile from ear to ear.

Take your time, make it perfect (as always)

dawesi
13 Jan 2009, 7:58 PM
I have to disagree here. It has been designed from the start to be a tool that I would be willing to use - and in the past, I have also never been willing to use any kind of designer. Don't pass judgment so quickly. ;)

I think it's flippin' awesome - should be added as a second tab to the air docs. :-)

deepak
14 Jan 2009, 6:14 AM
Animal is right - I can already see the queries coming in...'can you tell me what is wrong with my component?'.

People who code in Ext should be using this tool, not the nubs.

I do like the ideology of an Ext designer, as long as it does not deviate the core components' UI magic that has always been flaunted. Would Ext 3.0 be the same old set of components along with this designer? or would we be seeing any evolution in the components themselves (new components? behaviors?)

PS: these kind of designers are very easy to create in the scope of Ext 2.0, not only for modeling Ext components, but pretty much any damn thing. I would like to see this designer throwing production level code that plays well with any containing application..ah, so many options.

Just one question: Do you infer the list of properties dynamically from an object or are they defined in some store ? This is something I need to look into for my own reasons :p

Cheers and keep the show running :)

garyk
14 Jan 2009, 7:12 AM
That is pretty stunning!

Keen for a release date, I would buy that today if it was available.

Gary

xevin
24 Jan 2009, 7:42 PM
Master Jack,

Just a question, is Ext JS 3.0 will update Adobe AIR "ext-air.js" as well? also, in the second preview why didn't you use the AIR? is there any advantage in usin Google Chrome than in Air?

alindsay55661
30 Jan 2009, 10:44 AM
This is outstanding, as Ext 3.0 will have an "All new lightweight, high-speed core base library" are there going to be issues with backwards compatibility? In other words, will we be able to move current Ext 2.2 projects to Ext 3.0 and edit components with the new editor?

Solstice
2 Feb 2009, 12:44 PM
Which timezone is that?

The one on the right. :D

jack.slocum
3 Feb 2009, 1:01 PM
This is outstanding, as Ext 3.0 will have an "All new lightweight, high-speed core base library" are there going to be issues with backwards compatibility? In other words, will we be able to move current Ext 2.2 projects to Ext 3.0 and edit components with the new editor?

3.0 will be backwards compatible.

mdm-adph
3 Feb 2009, 1:40 PM
3.0 will be backwards compatible.

Deliver on that promise and I'll buy a support license. :D

mask_hot
5 Feb 2009, 12:05 AM
Hi,

I did not see any answer at the following question but maybe I missed something but :
would it be possible to use the Ext community plug-ins (as saki's recordform, CherryOnExt, ..) through the Ext.Designer?

Maybe you already thought to link the Ext.Designer with the Ext.ux repository?

kpopov
17 Feb 2009, 7:50 AM
I was wondering if the designer is available in SVN? Or the Eclipse plugin?

sugen
18 Feb 2009, 11:28 PM
very nice .

dfsilva
19 Feb 2009, 8:53 AM
What if this tool will be available for download?
She will be free?

Thank you!

Neil McLachlan
20 Feb 2009, 5:18 AM
Veterans can slap something together in code much more quickly than twiddling about clicking in PropertyGrid cells, and dragging things around! It really is an absolute beginner tool.

Back in the early '90s when Microsoft introduced Visual Basic, we all thought exactly the same thing. In the end, that GUI-style authoring has become pretty standard.

Once I learned enough about VB, the snob in me wanted to edit the form files directly but it was always quicker to use the GUI.

The issue of this being used by people to generate code that they can't possibly understand is a valid one, but the solution is to improve the code model so that it becomes understandable by noobs, rather than abandon the GUI designer because it's too easy.

Perhaps one day people will be able to double-click on a control on the designer form and type code into an event handler like we do now with C#. The whole DOM model could become hidden and just as irrelevant as the GDI model is to app developers now.

It's striking how the VB form designer interface has become the standard for everything these days. I forget the name of the UI designer who built it, I do have his book kicking around somewhere. A true visionary.

Animal
20 Feb 2009, 5:21 AM
There's just no way you can add all the complex interactions that a fussy boss wants using pointy-clicky.

May be OK with the limited abilities of a regular GUI, but we're talking HTML where you can do anything that HTML can. And people want you to do anything.

Our configs are as non-standard as you can get. Custom initComponent methods poked in, embedded handler functions. And we have custom classes. The main application "component" class (which encapsulates what used to be a JSP page) is a highly enhanced subclass of Ext.Panel. There's no way a pointy-click tool could work it.

jay@moduscreate.com
20 Feb 2009, 5:55 AM
The biggest issue i see with this people having problems learning the framework. We recently had a thread where a user posted code generated by the currently user-driven GUI designer code and said "It just don't work".

To properly write plugins and extensions, you need to know the component, container and layout models at the very minimum.

I'm not saying that these tools are not great learning tools. Hell, I could never design a Mac OS X UI if it wasn't for their UI coding tools. But using them as a learning guide is key, i believe.

Hell, we have not reallly seen the current version of the Ext tool. Like aaron pointed out, there may be a boat load of features that advanced developers like nige and I may be able to use, such as custom method attachments/etc.

soze
20 Feb 2009, 6:17 AM
As always, and like everyone else, I'm incredibly impressed with this new designer and it is a HUGE step forward for making ExtJS a js standard language across the board.

I also understand all of these comments concerning more n00b questions but this is a good thing surely! When I 1st heard about ExtJS, it was very clear from reading through the forum that there was and sometimes is an air of exclusivity. This prevented me from even asking any questions until I'd read through everything and done extensive testing. The only reason why I stuck with it is because I was on my dying bed in hospital (dramatic but true) and I had a lot of time on my hands and wanted to distract myself.

There were a lot of initial complaints from n00bs not understanding or being given a fair hearing when they had questions or documentation. The documentation is now extremely impressive and this designer WILL draw them in. This is where we should now be standing here with open arms and welcoming all questions. I know I don't answer as many questions as you other guys but maybe if there is a n00b section just for their questions then the real hardcore posters or support team can tackle the more advanced stuff.

This is an opportunity about to present itself to rubber-stamp leadership in this ever evolving game and should be seen as thus.

kpopov
20 Feb 2009, 6:21 AM
I agree with the points expressed above.

However, a tool like this will be useful for quick mock-ups for a client. Sometimes it is much faster for some people, not all, to just see what they are doing to visually design a UI. Once the design is approved, I would go into the code and actually write it all there.

A tool like this would enhance even further Ext's appeal. ;)

jay@moduscreate.com
20 Feb 2009, 6:42 AM
@soze well said :)

Neil McLachlan
20 Feb 2009, 7:14 AM
Actually from my point of view it's the mockup/rapid prototyping stuff that I would use this for. All my production code is metadata-driven, so there's no use for me in being able to set titles and stuff with the designer.

Also, throwing together a bunch of components and then looking over the code for some clues as to 'how it *should* be done' compared to the awful mess I've produced on my own...

But, there's no question that tools like this will improve the appeal of the platform. What would really kick it off is if the underlying code managed to abstract away all the DOM/HTML/CSS and javascript weirdness and gave the developer a pre-wired framework to start entering code into.

If you start a new windows forms app in c#, design a form, then start editing the code for the form... that's my idea of where ExtJS can go. It might sound like a stretch but I'm positive it's doable. Maybe that's what v3.0 is doing, I have no idea.

Animal
20 Feb 2009, 7:21 AM
This prevented me from even asking any questions until I'd read through everything and done extensive testing

That's a good thing!

Animal
20 Feb 2009, 7:23 AM
It might sound like a stretch but I'm positive it's doable. Maybe that's what v3.0 is doing, I have no idea.

Maybe it is. Jack's been very quiet for months, and he can kick out thousands of lines of code per week. So I'm expecting something very impressive.

Gunmen
15 Mar 2009, 3:35 PM
Maybe it is. Jack's been very quiet for months, and he can kick out thousands of lines of code per week. So I'm expecting something very impressive.

Me too. Can't wait any more.

patrick de laet
19 Mar 2009, 1:59 PM
I know I'm getting old and my eyes are no longer that good, but can I download the Ext 3.0 Designer somewhere? I searched all fora and have SVN installed and JSBuilded Ext 3.0 but I can't find the designer?

regards

Patrick De Laet

mjlecomte
19 Mar 2009, 2:17 PM
I know I'm getting old and my eyes are no longer that good, but can I download the Ext 3.0 Designer somewhere? I searched all fora and have SVN installed and JSBuilded Ext 3.0 but I can't find the designer?

regards

Patrick De Laet

It hasn't been released yet, not even to svn.

vtswingkid
19 Mar 2009, 3:03 PM
I think I take animals stance on this. It sure is neat but I hope more time has been spent working on Ext 3.0 itself.

Animal
19 Mar 2009, 10:20 PM
The marketing value of a tool like this, written to Jack's high standards, and producing error-free (if totally standard, out-the-box) Ext Components is enormous though. I can really see why he's doing it.

When you see the number of people who can't add a Panel to a TabPanel. They'd just buy the tool to save themselves 3 days of learning curve grasping the Container(+layout)->Component scheme.

aomadevelopers
31 Mar 2009, 12:00 PM
Extjs 3.0 Designer tool looks too good, when its getting release?

Kango_V
31 Mar 2009, 12:42 PM
Would be very interesting if the designer in Eclipse could put out Java code for ExtGWT.
Now this would be cool. Could also generate the GWT RPC server side code.

I'll start wishing now :) But, this is incredibly cool.

stever
1 Apr 2009, 12:58 PM
They'd just buy the tool to save themselves 3 days of learning curve grasping the Container(+layout)->Component scheme.

Is this supposed to be a standalone tool that people pay extra for? Or something like the current GuiDesigner for ext 2.2 that you can add into your own web application?

Sesshomurai
2 Apr 2009, 8:25 AM
Will this designer be embeddable in my extjs app so I can use it to create forms inside my app?

thanks,

EDIT: I just saw the above post, so yeah, that's my question too.

sentrie
2 Apr 2009, 2:39 PM
nice info ..
i was try guibuilder2.0

bennylam
5 Apr 2009, 11:34 PM
It will be a great tool for Ext Ajax development.
Great work!

I've tried some commercial GUI builder tools with similar features (and lot of features) like the Ext Designer.

One of Ajax and PHP IDE is Delphi for PHP from Codegear (company of Borland), which is modelled from Dephi IDE / MS Visual Studio type of tools.

http://www.codegear.com/article/37858#1FormDesigner
http://video.codegear.com/pix/NickHodges/DelphiforPHP/BasicIntro/BasicIntro.html

This tool has many drag-and-drop GUI components from an Open Source Ajax/php library VCL, which is supported by Codegear
http://www.qadram.com/vcl4php/index.php?ac=7

Such tools are very convenient and attractive to developers like me.
However, after trying it for a while, I am hesitated to use for serious development because of following considerations:
1. The product is designed with commericial interest in mind and hence it is very tightly glued with their own library and framework even VCL is opensouce.
2. It is difficult to understand not even modify the generated source code.
3. It is hard to integrate with other code sources or frameworks.

I understand that for easy and fast development, you need to sacrifice open and flexibility in development approach somehow.

I hope your new GUI Designer for Ext will make a good balance in Ajax development using Ext as one of the attractive nature of Ext framework is the lean, open and yet power script library.

Thanks for your effort.

Benny

Right Station
Web Solution
www.rightstation.com

dawesi
6 Apr 2009, 8:17 PM
I'm collecting screencasts and vids from around the place put up on extjs.tv as a video portal thing... can I put these up there? Got any others? Want a login to post stuff?

franklt69
8 Apr 2009, 6:57 PM
I wonder if I buy Ext3, or upgrade from Ext2.2 I get the Ext3.0 Designer?

when it will be release?

kind regards
Frank

rgarret
9 Apr 2009, 3:13 PM
So I'm wondering the same thing... Is the designer going to be provided with Ext for free or do we have to pay for it?

gregorio
12 Apr 2009, 12:37 PM
I was getting frustrated and was looking for something just like this. I can't believe my luck! This would be great!

HappyPike
12 Apr 2009, 2:44 PM
Wow, this looks really impressive!!! :)

jonhobbs
13 Apr 2009, 5:44 AM
I think one thing that I think many people would like to see is absolute positioning of form elements within a panel. Is there any plan for this in the future of the Designer or Ext at all? It doesn't seem practical to somehow hard-code the positions in Ext, but the Designer opens a whole new world with drag and drop placement abilities.

The lack of truly dynamic forms in Ext is one reason I have not used it for 100% of my recent projects. It's wonderful using Ext, but some of these trivial limitations keep me from using it 20% of the time.



I would like to pick up on this point from earlier.

I was with a client on Thursday who has a big MS Access app with a SQL Server back-end. They have around 100 forms, all laid out differently using the Access form designer. It's many years old and can no longer be supported by the people who built it for them.

I was trying to explain that we could build them a new version as a we app using Ext JS, but we'd be more restricted when it came to the layout of the forms because you can't just drag and drop controls onto a grid like you can in access. For all it's faults Access is great for allowing anyone to easily design big complicated forms very quickly.

So, if this new designer allows me to quickly prototype and build hundreds of custom form layouts then I'll be a very happy person. I'm assuming that that kind of speed and flexibility could only come from absolutely positioning dragged components onto a grid.

gregorio
15 Apr 2009, 1:37 AM
Will this be introduced together with xtjs 3.0? I truly hope so.

crp_spaeth
15 Apr 2009, 2:25 AM
In a Blogpost one of those happy guys who is able to visit the ext-conference wrote that the Ext Team says the Ext Designer will get released together with Ext 3.1 :(

gregorio
15 Apr 2009, 4:21 AM
The question will now be: when will 3.1 be available.

Nah..just kidding..

..not really :(

alexdorand
20 Apr 2009, 10:10 AM
Nicely done. Very interesting Tool. It keeps the code development consistent hopefully.

Animal:
"I believe you should understand the world of computing is not based on your feelings and your personal experience, it is beyond that so do not jump on the train of judging things that might not make sense to you individually. Like your comment on the pixel perfect applications and absolute positioning. If you work with government agencies or large companies you see pixels and positions as part of requirements. Example of other companies that would absolutely love to have pixel perfect apps with emphasis on absolute positioning would be banks, insurance companies, accounting companies and ...."

Keep supporting Animal.

alexdorand
20 Apr 2009, 10:16 AM
So when do we see this tool released?
Are there any similar tools or plugins out there?

Condor
21 Apr 2009, 3:55 AM
It should be released with Ext 3.1.

For Ext 2.x there is the Ext 2 GUI Designer (http://extjs.com/forum/showthread.php?t=28133).

jamesjara
21 Apr 2009, 12:48 PM
wou, people the GUI D 3, is online now?

jay@moduscreate.com
21 Apr 2009, 3:58 PM
no

stever
21 Apr 2009, 4:43 PM
For Ext 2.x there is the Ext 2 GUI Designer (http://extjs.com/forum/showthread.php?t=28133).

Which works with Ext3 just fine with a few changes here and there...

only_do@126.com
24 Apr 2009, 1:42 AM
when will the extjs 3.1 be come out? :)

jay@moduscreate.com
24 Apr 2009, 4:25 AM
3.0 is not even stable yet. People, please chill out a bit :)

smokeman
24 Apr 2009, 9:44 AM
has anyone seen the coolite.com stuff? After hearing it mentioned at the conference, I tried it, and in seconds had a borderlayout, with tabpanels, and property grids up, with no code written at all....wow!
I hope designer is as easy as that. I don't know visual basic, but seeing how easy that was, I think I may learn.

dawesi
3 May 2009, 5:48 PM
Well, anyone who's ever done marketing would know that you release a 'designer' type product and get hype, when you release your product and you get double hype. :-) ExtJS Designer = after ExtJS 3.1 (full) release (common sense)

Just in case someone on the designer dev crew is watching this thread (you never know)... more ideas...

http://www.wavemaker.com/product/demos.html

clayton_ajax
14 May 2009, 10:16 AM
When will the release of Ext Designer 3.0?
Any prediction?

thanks


Evan Edit

The designer is due to be released with Ext 3.1.


I thought I would share some videos of the current development version of the Ext 3 Designer. It's coming along nicely.

Video showing grid, window, forms:

http://www.screencast.com/t/c4T3Gbfhn

Older version showing grid:

http://www.screencast.com/t/XN8RXirJ

Yes, it was actually built using Ext. :D

celiane
2 Jun 2009, 10:38 AM
Please release BETA 8-|
Please \:D/
I visit every day on this post, waiting release (:|

alexvgs
2 Jun 2009, 11:07 AM
Jack,

I'm a newbie, so pardon my ignorance. I dont know if this is blasphemy - is the Designer planned to be open source or is it going to involve a paid license (like Visual Studio etc).

Thanks
Alex

celiane
2 Jun 2009, 11:19 AM
the “ext. Designer 3.0” will mark a length in advance!

the “ext. Designer 3.0” must be open source!
Ext. already suffers from that license!

competition in the RIA is increasingly strong!
look at: http://jqueryui.com…

I believe in this project, but to hear that it is paying; afflict me, I find that slowed down are expention

KrullWarKing
3 Jun 2009, 3:08 AM
Always a day late and a dollar short. But, I will master this. This is the bad a@#est library I have ever seen. How long did it take to put ext together? Where is a good history lesson on ext and its founders? I guarantee you that this is going to sweep the market up.... Like they say in Jersey.... Yous guys are gonna be freakin buzzilionaiers!:D

dorgan
4 Jun 2009, 12:58 PM
Wavemaker looks very interesting.

jay@moduscreate.com
4 Jun 2009, 1:01 PM
Wavemaker looks very interesting.

I fail to see the point in your post.

jamesjara
7 Jun 2009, 5:11 AM
hii people.... soo what happend?

its now ready?

tryanDLS
7 Jun 2009, 6:02 AM
hii people.... soo what happend?

its now ready?

A release date for 3.1 has not even been announced, so no it's not ready.

zelegolas
10 Jun 2009, 12:07 PM
Hi

Just some quicks questions for the futur version of Ext Designer.

- Can we define some cross validation? (ex: if checkbox active valid if the date format is valid else disable input field date)
- Can we define some cross activation? (ex: if radio button is enable => enable a couple of others components and the opposite )

Thanks

tryanDLS
10 Jun 2009, 7:28 PM
Hi

Just some quicks questions for the futur version of Ext Designer.

- Can we define some cross validation? (ex: if checkbox active valid if the date format is valid else disable input field date)
- Can we define some cross activation? (ex: if radio button is enable => enable a couple of others components and the opposite )

Thanks
How about we wait til there's actually a working beta release to play with before asking for more features?

jay@moduscreate.com
10 Jun 2009, 7:52 PM
Tim, i would not waste my time dude. Seriously.

zelegolas
11 Jun 2009, 3:53 AM
How about we wait til there's actually a working beta release to play with before asking for more features?
I don't ask for more features just want to know if thoses features will exist in Ext Designer.
For sure if I can play with version (even a beta release) it's should be great. Do you know if a beta is available and where we can download it??

tryanDLS
11 Jun 2009, 7:10 AM
@zelegolas - Read my post - there is no beta release yet. And don't ask when it will be here - no date has been announced.

jay@moduscreate.com
11 Jun 2009, 8:44 AM
has to be more spam. wtf!

zelegolas
11 Jun 2009, 6:26 PM
@zelegolas - Read my post - there is no beta release yet. And don't ask when it will be here - no date has been announced.
Understood :s

dbassett74
12 Jun 2009, 1:42 PM
It should be released with Ext 3.1.

For Ext 2.x there is the Ext 2 GUI Designer (http://extjs.com/forum/showthread.php?t=28133).

The Ext 3 designer isn't based on this one is it? Cause for all that I care, it doesn't work. Seems to be completely useless. Can't even reposition controls where you want on the panel surface. Sure hope Ext 3 Designer is better than this one...

dbassett74
12 Jun 2009, 1:49 PM
Okay, just watched the screencast. VERY impressive and looks like a completely different product. But one thing it didn't show is an Absolute Layout. Can controls (like a textbox) be dragged into position on the surface and be moved around to a specific position? Can't wait!

paleagha
29 Jun 2009, 11:15 AM
Hi, When do you expect to launch this?

tryanDLS
29 Jun 2009, 12:36 PM
Hi, When do you expect to launch this?

No further info is available yet per my post on 6/12

manduks
30 Jun 2009, 6:46 AM
muy impresionante, and it does generate reusable code awsome!! very awsome.
congrats to you guys, an a posible eclipse plugin wow!! so it wil work with aptana? hope yes!!!

best luck o luckExtJs
in spanish !SuertExtJs!
:)

Ahava
7 Jul 2009, 6:29 AM
Definetly watching news about this Designer :)

fabiano_franca
15 Jul 2009, 4:20 AM
Where the Ext 3.1 is released?

jay@moduscreate.com
15 Jul 2009, 4:21 AM
Where the Ext 3.1 is released?

https://www.nietofineart.com/catalog/images/TonyFaceSmack_1.jpg

mjlecomte
15 Jul 2009, 5:15 AM
Where the Ext 3.1 is released?

3.0.0 was released recently. An approximate estimate for 3.1.0 release is 4 months after the 3.0.0 release.

stever
15 Jul 2009, 5:56 PM
Can someone change the title of this thread to be "Ext 3.1 Designer"? Thanks..

abnervv
20 Jul 2009, 11:46 AM
hi guys,

In my point of view this tool will represent a new era of ExtJs
Developer some web app must be fast and it will help a lot
It take so long to learn the basic of Js and so much long
when we r talking about Objects, classes...etc
Normally the companies dont have this time,
they wanna an app working porperly in a short period of time
It looks like Swing API - Java
Now there are some GUI Designer which helps a lot

Thanks Jack! =D>

bkraut
20 Jul 2009, 2:06 PM
Respect.
Is it possible to somewhere download a preview of the code?

Animal
20 Jul 2009, 9:33 PM
It's going to be a Very Bad Thing.

It will just preserve the preceived veil of mystery around how Ext works.

I mean already people are just confused and can't realize that it's just perfectly normal HTML with CSS, and are mentally unable to poke in and see what's happening.

All that will happen is that people will abdicate use of brains all together for some dumbed-down WYSIWYG, draggy-droppy pretty picture, and then when they want to DO anthing, it will be straight to the forum with "she no work".

Disastrous. Education would be better.

mystix
20 Jul 2009, 9:47 PM
granted.

it would make prototyping much much faster though.

tof
20 Jul 2009, 10:24 PM
Roh, please understand people here, don't be so nervous each time someone asks "when".

You show a product which seems wonderful for most people, for a (dual license) open source library; it seems quite normal for people to be wanting it, or at least asking when.

Look at the success of the (very poor) extjs designer...

mjlecomte
21 Jul 2009, 5:00 AM
Respect.
Is it possible to somewhere download a preview of the code?

Not that I've heard of. Latest estimate I've heard is that something may be released around the time ExtJS 3.1.0 is released. ExtJS 3.1.0 is estimated to be released approximately 4 months after 3.0.0 was released. Yes, "estimated", "approximately" and forward looking statements that could change.

jay@moduscreate.com
21 Jul 2009, 5:06 AM
according to some people, estimated and approximately means that its set in stone.
http://farm4.static.flickr.com/3016/2922496074_9c745868e8.jpg

MikeB
21 Jul 2009, 5:10 AM
according to some people, estimated and approximately means that its set in stone.

Awww yes but just rememember that no matter how large or hard that stone is all it takes is one good size stick of explosive to shatter that stone into rubble ;)

MikeB
21 Jul 2009, 5:16 AM
it would make prototyping much much faster though.

I agree mystix. And a tool like this makes getting a GOOD looking prototype into the hands of the customer by a good front end GUI developer so much easier and that leaves all the back end coding to the hard core developers.

However I can also understand where Animal comes from. After watching a commercial last nite on TV about how some of the new Mercedes can keep your car in lane, automatically stop or slow down when you approach a vehicle in front of you too quickly and even parallel park all by themselves, makes me wonder what the next generation of people in general are going to have to do for themselves? They won't know how to do ANYTHING on their own!

And I'll stop here before I REALLY get a rant going :D

abnervv
21 Jul 2009, 9:34 AM
:> I'm sure most of the people in here waited for a tool like this,
the preview is very actrative, it seems to be very easy to build
components and then use this in lots of projects. I think the main idea
of this is about writing less code, I have to agree with animal
in some parts, anyway u should learn about extjs cuz u will need
this knowledge for sure. I always avoid writing some dumb question
to the forum cuz I see I should know the basic at least, but
many people just have started playing with extjs and of course they
have lots of doubts. by the way when this will be released ??? :-? haahah
just kidding! :((

mdm-adph
21 Jul 2009, 9:39 AM
It will just preserve the preceived veil of mystery around how Ext works.

I mean already people are just confused and can't realize that it's just perfectly normal HTML with CSS, and are mentally unable to poke in and see what's happening.


Good for business, bad for support team? :D

Animal
21 Jul 2009, 9:52 AM
Is there an official support team?

jay@moduscreate.com
21 Jul 2009, 9:56 AM
that's what your title says ;)

mystix
21 Jul 2009, 10:08 AM
i wish they'd let us stick little icons next to our forum titles.

then i could stick a pitchfork + blood in there, @animal could stick a guillotine with animated victims + blood, while @condor could do with an animated gif of Prometheus having his liver ripped out + blood. >:)

jay@moduscreate.com
21 Jul 2009, 10:10 AM
i was just teasing btw. :)

jay@moduscreate.com
21 Jul 2009, 10:14 AM
this came to mind.
http://www.leedberg.com/MotaroFTP/graphics/spinerip.gif

bkraut
21 Jul 2009, 10:54 PM
Ok. I have to comment this. I agree with Animal, that this will normally be the source for questions - "It's not working". Because EXT in some points is different from other languages and people need time to understand, how it works.

But this tool is also an oportunity. We are building now a system, where an user will be able to create an extension directly online. Currently I'm using Ext.ux.CodePress for editing the code, but if I would also have an option to create GUI (or at least a prototype with some help, it would be even better).

This GUI designer will be very helpfull - if you know for what you can use it.

Animal
21 Jul 2009, 11:41 PM
Don't kow if the devs are monitoring this, or if there might be some kind of user input (not that I'd be a user!), but I have some suggestions because we have a system which generates the Javascript config for an entire page, and I have a few things which proved useful.

The main thing is allowing easy access to the Components that make up a page without having to do Ext.getCmp everywhere.

What I do, is have the page processor collect all itemId values, and create vars by those names in the outermost scope.

When the Components are instantiated, they are assigned to those vars, so the code may look like:



(function(){ // encapsulate whole execution unit

// Declare vars named after all itemIds specified.
var mainForm, /* Ext.form.formPanel */
fieldSet1, /* Ext.form.FieldSet* /
textField1, /* Ext.form.TextField/
... etc...

mainForm = new Ext.form.FormPanel({
itemId: 'mainForm',
initComponent: function() {
this.constructor.prototype.initComponent.call(this);
fieldSet1 = new Ext.form.FieldSet({
itemId: 'fieldSet1',
initComponent: function() {
this.constructor.prototype.initComponent.call(this);
textField1 = new Ext.form.TextField({
itemId: 'textField1',
initComponent: function() {
this.constructor.prototype.initComponent.call(this);
// Insert user-specified initialization script here
}
});
this.add(textField1);
// Insert user-specified initialization script here
}
});
this.add(fieldSet1);
// Insert user-specified initialization script here
}
});
})(); // execute anonymous function



Another feature is that child Components for any Containers are created inside an injected initComponent method.

This is to allow initialization scripts to be easily inserted.

abe.elias
10 Aug 2009, 6:54 PM
For those of you interested in playing around with the designer:

We have released a Designer Preview (requires Adobe Air):

http://extjs.com/blog/2009/08/10/ext-js-30-be-outstanding/

mankz
10 Aug 2009, 11:36 PM
@Abe: What's an estimated price for the designer?

Looks sharp

jburnhams
11 Aug 2009, 12:01 AM
In the blog post you say "Our intentions are to charge a fee for this service" - does this mean we will pay per use with a hosted application, or an annual subscription to download?

Zyclops
11 Aug 2009, 12:48 AM
Awesome!

1. Is the designer itself extensible?

i.e. are we going to be able to build designer based plugins to add even higher level features to it and adding easier/quicker ways of producing our own specific apps.

2. For your own custom widgets, do you have to do much work to make them available in the designer?

3. Rough details about pricing / licensing would also be really handy.

4. Do you want / Where can we submit bug reports?

leeby
11 Aug 2009, 1:17 AM
Hehe, I made a very simple demo about this idea before, and now you make it come true, so great, expecting~

kenton
11 Aug 2009, 7:49 AM
I am missing the save feature? It would be nice to see the code behind it to save some time when creating prototypes.

jay@moduscreate.com
11 Aug 2009, 7:51 AM
I am missing the save feature? It would be nice to see the code behind it to save some time when creating prototypes.
yes - it's a readonly demo. you will have to pay for the code generation portion.

Seems this will be SaaS

abe.elias
11 Aug 2009, 8:24 AM
@mankz and @jburnhams

We plan on having multiple generators - you can have one for Ext JS, Ext GWT, CFTags, etc. Combined with a marketplace that allows our community to sell their components or projects under an Ext Marketplace License and under an Open Source License using our FLOSS Exceptions.

In addition to selling components in the marketplace we envision the community creating Starter Packs that will provide a jumpstart in application development. A collection of UI components that adhere to the 80/20 rule that, at a reasonable price point, can be very attractive.

Our initial thoughts for a Designer license with unlimited usage is 150 - 200 a year.

Zyclops
11 Aug 2009, 4:23 PM
>Our initial thoughts for a Designer license with unlimited usage is 150 - 200 a year.

Time based usage per year is an odd model unless it's a online software as a service application. Does that mean it won't be available for offline use or will it come as an adobe air app, or is the per year because you expect to bring out yearly major updates for it?

> Designer Extensibility
it would be a huge advantage to be able to extend the designer itself (since i assume the entire designer is a big extjs application)

abe.elias
11 Aug 2009, 9:03 PM
I tend to disagree slightly with this being an odd model. Anti-virus vendors have been doing this for years. I will agree your point has merits as it relates to the traditional developer tool space.

Ultimately, it becomes the classic discussion of "Money vs Time" where some will spend money to save time, and others will spend time to save money.

The designer will save a lot of time. We just want to make it very affordable so you get the best of both worlds.

jay@moduscreate.com
12 Aug 2009, 1:56 AM
I don't think that having a renewable license of 150-200/yr is bad. As long as we can work with the tool offline.

joeri
12 Aug 2009, 3:44 AM
200 / year is indeed not excessive, however...

I don't need to work with the tool offline, but I do need to be able to easily use it for collaboration. IMHO, when actually developing apps, the time advantage of a designer is minimal. When prototyping however, the advantage is sizable, but only if I can easily collaborate with others (send around ready-made prototypes, have them edit those, get the results back). If the light version doesn't allow collaboration in this way, everyone that has to be able to edit prototypes needs a license. This could quickly raise the budget beyond the levels of what's acceptable.

Zyclops
12 Aug 2009, 3:52 AM
The pricing sounds very reasonable too me (especially if the code generation is going to be as good as it sounds). I find quite a lot of time is in "playing" with the UI, having used the preview I know it's going to save time + it would mean you could get less technical people to do UI prototypes.

SAnDAnGE
12 Aug 2009, 5:16 AM
As long as the designer will have all the components that are in extjs... it should be fine.

abe.elias
12 Aug 2009, 7:41 PM
I don't need to work with the tool offline, but I do need to be able to easily use it for collaboration.

Working with the Designer offline is must in my opinion. I wouldn't want to be dependent on a server/internet being up to generate code. In contrast, I want to be able to receive updates and download extensions. There needs to be connectivity when its required and the ability to be productive when not.

That's what we're after.

deanna
12 Aug 2009, 7:45 PM
Will there be an API so we can write code generators. For instance, I have a zendx_extjs php library that needs the xtype config in php array form.

abe.elias
12 Aug 2009, 7:58 PM
Will there be an API so we can write code generators. For instance, I have a zendx_extjs php library that needs the xtype config in php array form.

It's on our internal road map. We plan to expose it to our OEM customers first.

danh2000
12 Aug 2009, 8:19 PM
I personally don't think $150 - $200 is excessive either, but it's not throw-away money either and I'd think seriously before purchasing for myself.

It may be prudent to look at the pricing of existing commercial JS and/or Web Developer tools - Aptana is popular and feature rich for instance - look at their pricing model and compare the features.

abe.elias
12 Aug 2009, 9:33 PM
Aptana offers a fantastic IDE. Paul is doing a great job in that space. There's no reason that the Designer won't be able to integrate into Aptana or as an Eclipse plugin some day.

celiane
15 Aug 2009, 7:40 AM
ext designer :
http://extjs.com/blog/2009/08/10/ext-js-30-be-outstanding/

ext designer preview :
http://extjs.com/deploy/xds_preview.air



I think this tool is not complete to be paying! there is not much better than Ext_Gui_Builder_2 or Ext_Gui_Designer which are free!


I am willing to pay, if the tool is complete, it has no value if it is to do simple actions!

thank you

please add the following features:

celiane
15 Aug 2009, 7:50 AM
it would be good to have a manual.
or better video tutorials.
as the demo videos:
http://www.screencast.com/users/JackSlocum/folders/Default/media/f7450651-778b-4bbc-9fc4-4e921a7a2705
http://www.screencast.com/users/JackSlocum/folders/Default/media/75f2af3e-4e53-46fa-a125-a6492578a0be

SAnDAnGE
15 Aug 2009, 8:17 AM
Yeap... lots of features present in ExtJS are missing in the designer... One of them is EditorGridPanel.

abe.elias
15 Aug 2009, 9:53 AM
it would be good to have a manual.
or better video tutorials.
as the demo videos:
http://www.screencast.com/users/JackSlocum/folders/Default/media/f7450651-778b-4bbc-9fc4-4e921a7a2705
http://www.screencast.com/users/JackSlocum/folders/Default/media/75f2af3e-4e53-46fa-a125-a6492578a0be




We are currently working on making the Designer feature complete. What video tutorials would you like to have? If we get enough interest, we'll create them for the final release.

abe.elias
15 Aug 2009, 10:06 AM
One of them is EditorGridPanel.

We completed the EditorGridPanel this week. You'll now be able to drag form fields to columns to specify a columns editor.

We are also working on the ability to "Transform." You'll be able to drag a grid out, complete the configuration then easily transform it to an Editor Grid.

soze
15 Aug 2009, 11:25 AM
ext designer :
http://extjs.com/blog/2009/08/10/ext-js-30-be-outstanding/

ext designer preview :
http://extjs.com/deploy/xds_preview.air



I think this tool is not complete to be paying! there is not much better than Ext_Gui_Builder_2 or Ext_Gui_Designer which are free!


I am willing to pay, if the tool is complete, it has no value if it is to do simple actions!

thank you

please add the following features:

If it has no value to you then don't pay for it and don't tell anyone you're not going to pay for it. Everyone knows the components that missing and desirable but its the foundation for something great, if you understand the "mundane" work required to start building something from scratch.

Foggy
18 Aug 2009, 1:40 AM
i've noticed that XDS will work fine in browser too. Are customers allowed to implement XDS in their web applications?

BTW: i also think that time based usage per year is an odd model. In case of antivirus software, you pay for new and up to date virus definitions but not for the software itself. If i decide to not pay anymore, i can use my antivirus software anymore, but without current virus definitions.
In your case a time based model make no sense for me. I should it pay once for same versions...
But thats just my opinion.

SAnDAnGE
18 Aug 2009, 2:00 AM
i've noticed that XDS will work fine in browser too. Are customers allowed to implement XDS in their web applications?

What's XDS ?

tof
18 Aug 2009, 4:18 AM
I'm just wondering, why did the ExtJS team did not comment anything about this old demo : http://extjs.com/forum/showthread.php?t=14702

This was 2 years ago, the concept is very near (I know the code isn't, my builder was quick and very dirty).

No grudge or whatever, but it would have been good to have answers from the ext team, since now you show interest in a designer, which integrates the same concepts.

Foggy
18 Aug 2009, 5:29 AM
What's XDS
eXtDeSigner

bramvano
18 Aug 2009, 5:49 AM
This looks extremely nice!

celiane
18 Aug 2009, 6:00 AM
We are currently working on making the Designer feature complete. What video tutorials would you like to have? If we get enough interest, we'll create them for the final release.

example:

- How to use layouts in the designer:
http://www.extjs.tv/index.php/2009/tgd-i-009-layouts-border-layout/
http://www.extjs.tv/index.php/2009/tgd-i-009-layouts-border-layout-5/
http://www.extjs.tv/index.php/2009/tgd-i-009-layouts-border-layout-5-2/
http://www.extjs.tv/index.php/2009/tgi-i-008-layouts-absolute-fit-and-accordion/
http://www.extjs.tv/index.php/2009/tdg-i-layouts-container-anchor-and-form/
- How to add a column to a grid store
- How to add data to a grid store
- How to add buttons, placement of buttons
- How to add plugins
- How to add code snippets and share them on the forum!
- Import existing javascript extjs

ideas:
- A "debugger" to view the JSON response and drag and drop or click to automatically add column JSON
- The possibility that the source and edit it directly and better see the changes in real
- Integrate the designer in Eclipse
- Can view and modify existing extjs javascript
- The possibility to modify the workspace (delete or move the "box" ex: Toolbox, compoment Config ...
- A database of plugins / codesnippets common to all and a search engine in the ext designer
- The addition of all samples (http://extjs.com/deploy/dev/examples/samples.html)(shared codesnippets)

bramvano
19 Aug 2009, 2:12 AM
Integrate the designer in Eclipse

I'd much rather see a NetBeans plugin! I've developed with Eclipse for years but I discovered a few months ago that NetBeans works a lot better and offers the same functionality...and more (FTP integration, stable, fast, support for a lot of languages, etc.)

dbassett74
19 Aug 2009, 6:06 AM
So this is not going to be web based?

aconran
19 Aug 2009, 6:24 AM
So this is not going to be web based?

No, it will be a cross-platform desktop application.

We felt that many customers would not have been comfortable developing on a web page.

jay@moduscreate.com
19 Aug 2009, 6:25 AM
No, it will be a cross-platform desktop application.

We felt that many customers would not have been comfortable developing on a web page.

I know many UI designers that would *love* to not have to worry about the limitations of the web. Just need local load and saves :)

Foggy
19 Aug 2009, 9:10 AM
No, it will be a cross-platform desktop application
But as I said, the designer works well in firefox too...

jay@moduscreate.com
19 Aug 2009, 9:12 AM
But as I said, the designer works well in firefox too...

how did you test it in firefox?

andycramb
19 Aug 2009, 11:14 AM
Will you be able to import existing projects? I mean ones that have been developed prior to the designer release?
It would be useful if this is the case to validate it and highlight any issues such as over nesting etc.
Will you be able to decide on the version of Ext you want to develop against?

jay@moduscreate.com
19 Aug 2009, 11:21 AM
I think that's asking for a bit too much.

andycramb
19 Aug 2009, 12:01 PM
Never having been involved in developing an application like this, I would not know what would be classed as too much.

I thought this might be very useful for all the existing Ext JS code that has currently been developed.

I was more genuinely wondering if these would be possible features. I guess not then:(

jay@moduscreate.com
19 Aug 2009, 12:04 PM
Think of what would be required to parse someone else's code and interpret it. just insane amount of work. People do all types of crazy stuff with the framework, such as using autoEl to load javascript for a panel.

Don't take my word for it though. I was just offering my $.02

andycramb
19 Aug 2009, 12:09 PM
Ok I see what you are getting at, maybe I was getting carried away by the quality of what the Ext guys have produced to date and current desktop IDEs. Maybe one for further down the line. I can still dream.

jay@moduscreate.com
19 Aug 2009, 12:11 PM
just know, that there is no 'magic' ;)

andycramb
19 Aug 2009, 12:14 PM
Agreed, but we won't tell the client that :)

Foggy
19 Aug 2009, 8:32 PM
how did you test it in firefox?
Just browse to your «C:\Program Files\Ext Designer\Ext Designer Preview» folder and open the designer.html. It looks like just air.html is the air wrapper with save, open, ... actions

jay@moduscreate.com
20 Aug 2009, 2:48 AM
touche!

abe.elias
20 Aug 2009, 4:44 AM
Just browse to your «C:\Program Files\Ext Designer\Ext Designer Preview» folder and open the designer.html. It looks like just air.html is the air wrapper with save, open, ... actions


that's how we do our testing too. ;)

NBRed5
20 Aug 2009, 6:08 AM
I have just had a first play and it looks very impressive, however I think developing as an Air application makes it a bit restrictive, I have a multiple monitor setup (lucky me):D and it would be nice to be able to pull some of the property/component panels onto a second monitor as to maximize viewable area of the preview.

jay@moduscreate.com
20 Aug 2009, 6:10 AM
get a bigger monitor. I don't think AIR has the capability to do what you want.

NBRed5
20 Aug 2009, 6:37 AM
get a bigger monitor. I don't think AIR has the capability to do what you want.

Isn't that what I just said, and I have got a large viewable area, i.e. 2 monitors, I didn't say it wasn't any good just that it could be restrictive.

If the properties and component panels were windows could they be dragged to another monitor or are they restricted to being bound by the parent viewport?

jay@moduscreate.com
20 Aug 2009, 6:40 AM
yes, like GIMP or how the photoshop (and many apps) work on the mac.

Again, i think AIR doesn't support this. We could come up with a million "cool" features that this could implement. The idea is to suggest *practical* ones.

NBRed5
20 Aug 2009, 6:43 AM
Aha!

Solved it, don't maximise the air window, as it just maximizes to a single monitor, just resize it to to span both monitors, OK you get the monitor's borders in the middle but still better.:D

mystix
20 Aug 2009, 7:16 AM
Aha!

Solved it, don't maximise the air window, as it just maximizes to a single monitor, just resize it to to span both monitors, OK you get the monitor's borders in the middle but still better.:D

multiple monitor maniacs... *mumble mumble mumble* ~o)

jay@moduscreate.com
20 Aug 2009, 7:19 AM
multiple monitor maniacs... *mumble mumble mumble* ~o)

I have one of these at work: http://s3files.core77.com/blog/images/apple_30_inch_LCD.jpg and still use the 15" with it on my macbook pro ;)

Dave.Sanders
21 Aug 2009, 4:20 AM
Wow, am I the only one who thinks that $150 to $200 is way too much? Especially yearly?

This is comparing apples and oranges, but Microsoft's Visual Studio Standard retails on Amazon for only $239 and it has MANY more capabilities, features and purpose. Aptana Pro is $99. XCode and Eclipse are free.

Agreed, the designer might save me time, and it might be worth the investment compared to hand tweaking JS, but my immediate reaction to $200 is shock. As another poster said, I would have to seriously consider and think about that - especially since I'm experienced enough with Ext that I can usually rattle off the JS on my own - or have built up enough C# libraries to do what I need to do from that angle.

Based on past experience with the 2.0 designer that someone released, it was a helpful learning tool but once I figured out the basic patterns of things I was about 1000% faster doing things by hand. Usually, there would be some slight hiccup in the editor, or I needed to do some other coding around the design that it really didn't help me much in the end. And once I had to start flipping back and forth between code and designer, I just gave up on the designer and learned to do it by hand.

In other words, I'm paying to use a designer to save me time, but in the end I'm going to end up spending just as much time tweaking in the designer and then tweaking in the code to get the finished product.

Will the designer come with the commercial license? That would be a better scenario in my mind - buy the commercial license and get the designer included. And NOT a yearly fee - charge for upgrades if you want, but I don't want to wake up a year later and not be able to work without depositing another coin.

There would need to be a lot more features before I'd even consider dropping that kind of investment. Especially since I'm an independent and am not backed up by an expense account. Based on what little I've seen so far, I'm thinking my top price would be about $50.

Also, I'm not grokking the "app store" angle. If someone is doing custom projects with Ext, I can't imagine that there would be a lot of widgets that I'd want to purchase that would be applicable. Now, a UX and Theme marketplace WOULD make sense to me, especially if it were well designed, all of the UX had API docs as good as Ext and the UX were supported via email and forums. I would contribute to that every chance I could get.

My 2 cents. I'm not trying to devalue the hard work you guys have done to produce an exceptional and mind-blowing product. But I'm afraid the price is just too high for what the user receives. I was really excited to see the email about the Designer Preview today, but then I saw the price and nearly spat out my cheerios.

Dave

jay@moduscreate.com
21 Aug 2009, 4:22 AM
The question you have to ask yourself:

Will you make *more* hourly by using this (in time savings).

Going back to abe's question: how much is your *time* worth?

jay@moduscreate.com
21 Aug 2009, 4:23 AM
You *cannot* compare huge company products to small company products in this way. They sell in much higher volume, thus their prices can be lower.

Dave.Sanders
21 Aug 2009, 8:31 AM
Read my post - that's my point. In my experience while a designer would be nice, with ExtJs (or any other JS programming) the Designer is not going to save me that much time. It will help me with the sketch out of an interface, but once I start digging into the functionality, I won't end up using the designer much.

And yes I can compare products from large companies to products from small companies. To me, the end customer, $200 is still $200. Should I as a developer spend my $200 on the next version of Visual Studio that will give me a 10x benefit or the designer for a 2x benefit? As a consumer, it doesn't really mean anything to me if the dev team is smaller or larger - its still $200.

Others may feel differently, that's fine. It's your money - I'm just adding my opinion to the forum so that they know that $200 doesn't sit well with EVERYONE, for the feature set. That's all.

Dave

jay@moduscreate.com
21 Aug 2009, 8:42 AM
I think you're comparing apples to oranges dude! visual studio is an entire IDE - is it not? The Ext JS designer is just the designer component.

For the record I too am an independent contractor. I've been with the framework since the very beginning (yui-ext .3x). I can see the value with quickly being able to design UIs *with* my customers live and get the *exact* look for each screen as we go through the requirements. This tool will make me more valuable as a developer in the long run, thus being able to deliver much more quicker.

Also for the record, I was an severe skeptic, but now am a user for this alread.

abnervv
21 Aug 2009, 10:20 AM
I'm pretty sure this tool will help me a lot,
I have got the designer and it seems very easy
to built something really complex, that's the idea.
Of course many people don't think the same
but in my opinion this tool is gonna make
ExtJs community bigger and happier! :D
Thanks guys! =D>

abe.elias
21 Aug 2009, 10:21 AM
@ Dave

XDS isn't intended for everyone. If you can't justify the value (for whatever reason), then you can continue to use Ext like you always have.

Although XDS is optional, once you start using it, it gets very addictive.

Mango_lier
21 Aug 2009, 10:56 AM
I was wondering if some one can post a simple example of what kind of code this XDS will generate and how it can be used. A simple grid example or border layout will do.

iamleppert
21 Aug 2009, 11:10 AM
I would like to see the generated code before I will assign a final value to the designer. That, I think, will be a better gauge of how useful it ultimately is than how easy it is to design an interface using the tool. Especially for complicated layouts, etc. For $200 I would expect nothing less than perfectly formatted, clear code, with jsdoc framework ready to be filled in.

I also don't agree with the $200 price tag, especially not yearly. I can buy Photoshop CS4 for less than that, and I actually would own the thing. I understand Photoshop is made by a larger company with more resources but I don't see how that matters to the user, in terms of making a product that is competitive. If you want to make cars, you gotta compete with Honda. ;-)

If it's really going to be $200 (yearly!) than I would expect the Designer to have a lot more features and capability that what the preview has shown. People are going to like the designer no question asked, but at that price point with unattractive yearly model only a matter of time before someone releases an OSS designer clone and puts the ext one out of business.

BillEisner
23 Aug 2009, 8:19 AM
I'm very enthusiastic about the designer, and I see it as fundamental to moving EXT forward. I suspect that this has to do with my many years of experience with Visual Basic, which a reasonable model for an effective form-based development IDE. Powerful form designers are not only a tool for beginners. If they are well designed, they provide WYSIWYG functionality that speeds development.

EXT's forms and widgets use specifications that are very readable. That said, use of the various properties is not always evident. Intelli-sense (or whatever it is called in Aptana) can make discovery of attributes simpler, and help content can enhance developer's understanding of the attributes. But there is no substitute for a live environment that immediately reflects changes in the values of the attributes. So in my opinion, having an EXT designer should make it not only easier for a beginner to get started with EXT, but should be an excellent resource for those of us with an ongoing need to design and tweak new and existing user interfaces.

From what I have seen in the excellent demonstrations of the designer, it will have the power to take EXT from being a JS library to a level of being a programming environment with a built-in IDE. It should be noted that although VB forms were supported by an underlying text-based specification, there was no capability for editing those specifications prior to VB.net, and well over 3 million programmers dealt with that product even before forums became available through the Internet. Dynamic drag-and-drop, resizing, and property modification was self-evident in that product and appears to be the characteristic in the new EXT designer. To the extent that the designer ends up being incapable of supporting advanced EXT programming, the right answer should be to enhance the designer, not to require that the developer resort to manual changes of the specifications. If Jack follows that philosophy, he'll be able to enlist large numbers of application programmers who initially find EXT impenetrable and just want to get their applications developed.

- Bill Eisner

aconran
24 Aug 2009, 8:54 AM
I'd like to post a preview of what the code generation capabilities will look like out of the designer. I've built a simple nested border layout in the designer and then exported it to code. I named the class MyApp.MyPanel and gave it an xtype of "mypanel".

http://extjs.com/playpen/eac/MyApp.MyPanel.png

The designer generated 2 separate files:

ui/MyPanel.js


//-----------------------------------------------
// AutoGenerated by Ext Designer - Do NOT Edit //
//-----------------------------------------------
Ext.ns('MyApp.ui');
MyApp.ui.MyPanel = Ext.extend(Ext.Panel, {
title: "Basic Nested Border Layout",
width: 400,
height: 400,
layout: "border",
initComponent: function() {
this.items = [
{
xtype: "panel",
region: "center",
layout: "border",
border: false,
items: [
{
xtype: "panel",
title: "Center Region",
region: "center"
},
{
xtype: "panel",
title: "Detail Panel",
region: "south",
height: 150
}
]
},
{
xtype: "panel",
title: "West Region",
region: "west",
width: 120
}
];
MyApp.ui.MyPanel.superclass.initComponent.call(this);
}
});


MyPanel.js


MyApp.MyPanel = Ext.extend(MyApp.ui.MyPanel, {

});
Ext.reg("mypanel", MyApp.MyPanel);



The ui/MyPanel.js file will be regenerated each time you make a change to the user interface and save it within the designer. The designer will create MyPanel.js the first time, but will not modify it afterwards. Note that I could have added ref's, itemId's or id's within the designer and they would have been included in the generated MyApp.ui.MyPanel allowing you to access the child items. I would then add any additional methods and event handlers that I wanted within MyApp.MyPanel.

We also have a concept of being able to "Promote" a widget into a class. For example say we had added a grid to the center region of our border layout. We could then right click on the grid in the Component Inspector of the Designer, choose "Promote to Class". A dialog would then prompt you for the name of the class and the xtype you'd like to give the new class. For our example, let's use MyApp.ProductGrid and "productgrid". The Designer would create a new top level component named MyApp.ProductGrid and would then replace the instance of the gridpanel with an instance of the productgrid.

Bulle Bas
24 Aug 2009, 9:56 AM
@Dave, iamleppert
Where do you get those figures ($ 150-200) from?
I agree with you that €200,- yearly won't make any sense to most of the web developers. Clients are inclined to compare the prices with the other software products they own, with the conclusion being that the extjs designer has an extremely low value/cost ratio by comparison.

Like @jcgarcia said, there is also a comparison to be made between the time savings and the investment. That is of course a very valid consideration.
Some remarks:

You'll need to pay upfront each year, while not everybody knows if this is going to pay back. The amount of work involved with extjs might fluctuate, probably not every web project will be an ext-js project.
The designer is not necessary and since $200 is beyond the psychological barrier, people will hesitate or resist to invest in the software.
People prefer ownership above renting.
tolerance of low value/cost ratio is low, especially amongst developers that use the biggest free systems in the world (linux, eclipse, thunderbird, ...)



I don't say that ext-js shouldn't charge $200, $500, $1000… for their designer, it is their business, and what is more lovely than running your own business. :)
You all made valid observations imho. My point is that even if you are able to arrange for an user-profitable offer, clients might still refuse this offer based on other criteria.


@aconran
It seems like you are doing this job it in the right way. Very cool!

abnervv
24 Aug 2009, 10:14 AM
thanks a lot for this sampler.

Nash-T
24 Aug 2009, 11:26 AM
Nice work Aaron, et. al.
I agree with the comparisons to VB, those were exciting days when VBX became widespread.

Pricing/Marketing is always tricky, good luck. This has probably all ready been discussed but I think IT managers will love this designer. It lets them use non-expert developers to make UI changes after the consultant is gone. This will increase the demand for ext consultants.
How about a open source version so developers can get familiar with it, but IT shops will still buy?

Dave.Sanders
24 Aug 2009, 5:15 PM
@Dave, iamleppert
Where do you get those figures ($ 150-200) from?

Post #155 from Abe.


Our initial thoughts for a Designer license with unlimited usage is 150 - 200 a year.

I'm ASSUMING he's talking $USD, if its euros then there's no way I'm touching it for that price.

I agree also about the own vs. rent bit. And like I said before, Ext can charge whatever they want for it - it IS their business. I just read a bunch of posts that said something like "150-200 seems fine" and I wanted to voice my opinion that it wasn't fine for everyone - in hopes that they would take that into account in their decision. (Which I'm assuming is the point of this whole thread - post some stuff for the community to see and then quietly gather up their feedback over time and then make decisions.)

Good work on Ext Team's side, but probably just not a tool for me.

D

tof
25 Aug 2009, 1:29 AM
For sure, I won't use the designer for such a price :(; but, for sure, some people will.

I know (as a developper) that it's very difficult to put a price on a product, and that the price of the designer won't ever cover the time spent on it by the Ext Team.

Anyway, here is a very interesting document :

http://www.codinghorror.com/blog/archives/001293.html

Animal
25 Aug 2009, 3:27 AM
Aaron, what if you had given those three region Panels itemIds?

Would it have created vars by those names?

What I think would be very useful to people is if their itemIds became usable variables in the generated code.

And also, if they could insert arbitrary script into the generated class.

So, if perhaps, an Initialize Script property could be added for all Components, then the generated could could look like this:



//-----------------------------------------------
// AutoGenerated by Ext Designer - Do NOT Edit //
//-----------------------------------------------
Ext.ns('MyApp.ui');
MyApp.ui.MyPanel = Ext.extend(Ext.Panel, function () {
var myCenter, myDetail, myWest;
return {
title: "Basic Nested Border Layout",
width: 400,
height: 400,
layout: "border",
initComponent: function () {
this.items = [{
xtype: "panel",
region: "center",
layout: "border",
border: false,
items: [myCenter = new Ext.Panel({
xtype: "panel",
itemId: 'myCenter',
title: "Center Region",
region: "center"
}),
myDetail = new Ext.Panel({
xtype: "panel",
itemId: 'myDetail',
title: "Detail Panel",
region: "south",
height: 150
})]
},
myWest = new Ext.Panel({
xtype: "panel",
itemId: 'myWest',
title: "West Region",
region: "west",
width: 120
})];
MyApp.ui.MyPanel.superclass.initComponent.call(this);
// init-script for MyPanel from XDS:
myWest.on('expand', function() {
myCenter.load({....});
});
// end init-script
}
}
});


No point in putting xtyped config objects in. You might as well just create the real objects and then keep references to them is useful vars.

Animal
25 Aug 2009, 3:37 AM
One thing I also noticed is that some configs which are only valid when a Component is a child of a certain type of container do not become available.

For example, the title config is a config of Panel.

But put any BoxComponent (eg a Container) in a TabPanel, and you may give it a title which the TabPanel uses. XDS does not offer this currently.

Condor
25 Aug 2009, 7:35 AM
@aconran: Why is it using initComponent instead of constructor?

@Animal: Wouldn't your example create GLOBAL variables?

Animal
25 Aug 2009, 7:50 AM
No, I'm encapsulating all the code in a function into which the variables are scoped.

This is how we work it here.

And we inject a generated initComponent to add child items, and house any scripts that the component developer wants including with the Component.

So any <asp:script>...</asp:script> elements that are embedded inside any <asp:component>...</asp:component> element (or and subclass of Component) create extra code in an initComponent, so any naked code in there has a predictable "this" - it's the Component.

deanna
25 Aug 2009, 9:18 AM
...

No point in putting xtyped config objects in. You might as well just create the real objects and then keep references to them is useful vars.

I disagree with this. There are other programming paradigms where the configs with xtypes is exactly what you need. For example, sending a json config block from the server to be instantiated on the client.

Animal
25 Aug 2009, 9:25 AM
And the only difference is "new Ext.Panel(" + ")". That's it. 15 characters.

Except that you end up with a reference to something useful my way.

deanna
25 Aug 2009, 9:37 AM
If it goes that route it will invalidate my use case and require editting of the output, thus eliminating the ability to re-edit in the editor. That would make the product useless to me unless I could have a custom output module.

deanna
25 Aug 2009, 9:40 AM
Maybe there should be an intermediate output file that is re-editable. It wouldn't take back in any code or changes you made to the final output but wouldn't have your worked ruined if you did that.

Animal
25 Aug 2009, 10:06 AM
I don't understand how it could make any difference.

deanna
25 Aug 2009, 10:20 AM
My use case is sending components from the server as they are needed. They are sent as a json config objects. The objects are then created with Ext.ComponentMgr.create. Components are used then destroyed as needed.

jburnhams
25 Aug 2009, 11:37 PM
I think animal is suggesting that there is a "Initialize Script property could be added for all Components" which is then used to optionally specify whether you want them initialised to variables or just the xtype configs.

tof
26 Aug 2009, 1:09 AM
I don't understand how it could make any difference.


items: [myCenter = new Ext.Panel({
xtype: "panel",
itemId: 'myCenter',
title: "Center Region",
region: "center"
}),...

Or


items: [{
xtype: "panel",
title: "Center Region",
region: "center"
},...

One is JSON, one is not.

Animal
26 Aug 2009, 5:59 AM
Technically, yes.

But both will evaluate just fine.

Animal
26 Aug 2009, 6:05 AM
For example, My login page comes down from the server like this.

See how the Viewport's injected initComponent method creates references for the itemIds of all Components that exist on that page? (some are autogenerated if not specified)

It makes it very convenient for developers.



<link rel="stylesheet" type="text/css" href="/fclasp71A/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="/fclasp71A/css/Aspicio.css"/>
<script type="text/javascript" src="/fclasp71A/js/asp-all.js">
</script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/fclasp71A/images/s.gif';
Ext.onReady(function() {

AC.lowResolution = screen.availWidth <= 1024;
AC.mediumResolution = (screen.availWidth <= 1400) && !AC.lowResolution;
AC = aspicio.config = {
"dateOrder": 0,
"dateFormat": "d-M-Y",
"sessionTimeout": 600,
"logoutUrl": "logout.do",
"logo": "images/asp_lgo_fcl.gif",
"title": "Welcome to FCL-ASP (alpha, 2517, 71CUR, FCL)",
"imp": "fcl_71cur_ext",
"loginUrl": "/fclasp71A/AspCtrlIndex.jsp?imp=fcl_71cur_ext"
};
Ext.form.DateField.prototype.format = AC.dateFormat || 'd-M-Y';
AU.initializeSession();
new Ext.Viewport({
"id": "AspicioPage1251288047938",
"title": "Secure Login For ASP WebTrack",
"stateful": false,
"stateId": "AspicioPage1251288047938",
"initComponent": function() {
try {
var AspicioContainer1251288047940, AspicioComponent1251288047944, cust_id, user_id,
password, AspicioButton1251288047950, AspicioButton1251288047951, loginForm,
AspicioContainer1251288047953, AspicioPanel1251288047941, AspicioContainer1251288047939,
AspicioButton1251288047957, AspicioContainer1251288047956, loginHelp;
this.constructor.prototype.initComponent.apply(this, arguments);
loginHelp = this.children.loginHelp = new Ext.Window({
"id": "AspicioWindow1251288047954",
"name": "loginHelp",
"title": "Welcome to FCL-ASP (alpha, 2517, 71CUR, FCL)",
"stateful": false,
"stateId": "loginHelp",
"ownerCt": this,
"initComponent": function() {
try {
this.constructor.prototype.initComponent.apply(this, arguments);
this.elements += ',footer';
this.fbar = {
"id": "AspicioContainer1251288047956",
"autoEl": {
"tag": "center"
},
"stateful": false,
"stateId": "AspicioContainer1251288047956",
"ownerCt": this,
"initComponent": function() {
try {
this.constructor.prototype.initComponent.apply(this, arguments);
AspicioButton1251288047957 = this.children.AspicioButton1251288047957 = new Ext.Button({
"stateful": false,
"stateId": "AspicioButton1251288047957",
"ownerCt": this,
"name": "AspicioButton1251288047957",
"text": "Close",
"handler": function() {
loginHelp.hide();
}
});;
this.add.apply(this, [AspicioButton1251288047957]);

} catch(e) {
Ext.Msg.alert('Error in Container initialization script', "<pre><code>" + e + "</code></pre>")
}
},
"xtype": "container",
"children": {},
"labelSeparator": " "
}

} catch(e) {
Ext.Msg.alert('Error in Window initialization script', "<pre><code>" + e + "</code></pre>")
}
},
"width": 600,
"autoHeight": true,
"children": {},
"labelSeparator": " ",
"bodyStyle": "padding:10px",
"buttonAlign": "center",
"autoScroll": true,
"html": "This is a secure service that requires you to log in using your username and password. This is because this service stores and delivers sensitive commercial data. Your username and password will also tell the system which services to show you and which data belongs to you.<br><br> If you have not been supplied with username and password, you will not be able to use this service. An Email link to the correct contact has been provided on the login screen above the login form. This is the person you should contact.<br><br> If you are unable to connect to this service you <em>should<\/em> be given a meaningful error message. To connect to our services your must do the following:-<br><ul><li>Enable cookies in your browser.<\/li><li>Log in using the correct customer ID, user ID and password that you were supplied with (these are not case sensitive)<\/li><\/ul> Please bear in mind that if your session window is inactive for more than a few minutes, this service will disconnect you to free up the connection.",
"renderToContainer": this,
"closeAction": "hide"
});
AspicioContainer1251288047939 = this.children.AspicioContainer1251288047939 = this.lookupComponent({
"id": "AspicioContainer1251288047939",
"autoEl": {
"tag": "center"
},
"stateful": false,
"stateId": "AspicioContainer1251288047939",
"ownerCt": this,
"initComponent": function() {
try {
this.constructor.prototype.initComponent.apply(this, arguments);
AspicioContainer1251288047940 = this.children.AspicioContainer1251288047940 = this.lookupComponent({
"id": "AspicioContainer1251288047940",
"autoEl": {
"tag": "div"
},
"cls": "login-errormessage",
"style": "margin-top:65px;margin-bottom:10px;",
"stateful": false,
"stateId": "AspicioContainer1251288047940",
"ownerCt": this,
"xtype": "container",
"children": {},
"labelSeparator": " "
});
AspicioPanel1251288047941 = this.children.AspicioPanel1251288047941 = new Ext.Panel({
"id": "AspicioPanel1251288047941",
"title": " ",
"stateful": false,
"stateId": "AspicioPanel1251288047941",
"ownerCt": this,
"initComponent": function() {
try {
this.constructor.prototype.initComponent.apply(this, arguments);

var p = this;
function initPanel() {
p.doAutoWidth('.title,.note');
loginForm.getForm().findField('cust_id').focus();
p.el.child('a.login-help').on('click', function(e) {
e.stopEvent();
loginHelp.show();
});
}
this.elements += ',footer';
this.fbar = {
"id": "AspicioContainer1251288047953",
"autoEl": {
"tag": "div",
"html": "<table><tbody><tr><td><div class=\"public-service-title\">Public Services (no login required)<\/div><a class=\"bulleted\" style=\"text-decoration:none;\" href='/fclasp71A/AspWtPublic.jsp?imp=fcl_71cur_ext'>Public Consignment Tracking<\/a><br><a class=\"bulleted\" style=\"text-decoration:none;\" href='/fclasp71A/AspSSPublic.jsp?imp=fcl_71cur_ext'>Sailing Schedule<\/a><\/td><\/tr><\/tbody><\/table>"
},
"style": "line-height:normal;font-size:11px;",
"stateful": false,
"stateId": "AspicioContainer1251288047953",
"ownerCt": this,
"xtype": "container",
"children": {},
"labelSeparator": " "
}
loginForm = this.children.loginForm = new Ext.form.FormPanel({
"id": "AspicioForm1251288047943",
"name": "loginForm",
"cls": "login",
"stateful": false,
"stateId": "loginForm",
"ownerCt": this,
"initComponent": function() {
try {
this.constructor.prototype.initComponent.apply(this, arguments);
this.elements += ',bbar';
this.bottomToolbar = new Ext.Toolbar({
"id": "AspicioToolbar1251288047949",
"stateful": false,
"stateId": "AspicioToolbar1251288047949",
"ownerCt": this,
"initComponent": function() {
try {
this.constructor.prototype.initComponent.apply(this, arguments);
AspicioButton1251288047950 = this.children.AspicioButton1251288047950 = new Ext.SubmitButton({
"title": "Log in to FCL-ASP",
"stateful": false,
"stateId": "AspicioButton1251288047950",
"ownerCt": this,
"name": "AspicioButton1251288047950",
"text": "Login",
"handler": function() {
if (!this.ownerCt.ownerCt.getForm().isValid()) {
arguments[1].stopEvent();
}
}
});
AspicioButton1251288047951 = this.children.AspicioButton1251288047951 = new Ext.Button({
"title": "Clear form",
"stateful": false,
"stateId": "AspicioButton1251288047951",
"ownerCt": this,
"name": "AspicioButton1251288047951",
"text": "Clear",
"handler": function() {
this.ownerCt.ownerCt.getForm().reset();
}
});;
this.add.apply(this, [AspicioButton1251288047950, AspicioButton1251288047951]);
this.on('afterlayout', function(tb) {
tb.el.child('.x-toolbar-right').remove();
var t = tb.el.child('.x-toolbar-left');
t.removeClass('x-toolbar-left');
t = tb.el.child('.x-toolbar-ct');
t.setStyle('width', 'auto');
t.wrap({
tag: 'center'
});
},
null, {
single: true
});

} catch(e) {
Ext.Msg.alert('Error in Toolbar initialization script', "<pre><code>" + e + "</code></pre>")
}
},
"children": {},
"labelSeparator": " "
});
AspicioComponent1251288047944 = this.children.AspicioComponent1251288047944 = this.lookupComponent({
"xtype": "component",
"id": "AspicioComponent1251288047944",
"autoEl": {
"tag": "div",
"html": "<a href=\"http://www.forward-comp.co.uk/\"><img alt=\"\" src='images/asp_lgo_fcl.gif' style=\"border:0px none\"><\/a><div class=\"title\" style=\"margin-top:10px\">Welcome to FCL-ASP (alpha, 2517, 71CUR, FCL)<\/div><div class=\"note\"> To use this service you need a login ID and password.  <a class=\"login-help\" href=\"#\" title=\"Help on connecting to ASP\" target='help'>Tell me why<\/a><br> If you require a login, or have forgotten yours, please <a href='mailto:support@forward-comp.co.uk'>contact us<\/a><\/div>"
},
"stateful": false,
"stateId": "AspicioComponent1251288047944",
"ownerCt": this,
"initComponent": function() {
try {
this.constructor.prototype.initComponent.apply(this, arguments);
this.on({
"afterrender": {
"delay": 100,
"fn": initPanel
}
});

} catch(e) {
Ext.Msg.alert('Error in Component initialization script', "<pre><code>" + e + "</code></pre>")
}
}
});
cust_id = this.children.cust_id = new Ext.form.TextField({
"fieldLabel": "Customer ID",
"stateful": false,
"stateId": "cust_id",
"ownerCt": this,
"name": "cust_id",
"allowBlank": false
});
user_id = this.children.user_id = new Ext.form.TextField({
"fieldLabel": "User ID",
"stateful": false,
"stateId": "user_id",
"ownerCt": this,
"name": "user_id",
"allowBlank": false
});
password = this.children.password = new Ext.form.TextField({
"fieldLabel": "Password",
"stateful": false,
"stateId": "password",
"ownerCt": this,
"name": "password",
"inputType": "password",
"allowBlank": false
});;
this.add.apply(this, [AspicioComponent1251288047944, cust_id, user_id, password]);
this.on({
"beforeaction": {
"fn": function(f, a) {
if (a.type == 'submit') {
if (!f.isValid()) {
aspicio.util.displayMessage('Invalid Fields', aspicio.util.ERROR);
f.highlightInvalid();
return false;
}
}
}
}
});

} catch(e) {
Ext.Msg.alert('Error in Form initialization script', "<pre><code>" + e + "</code></pre>")
}
},
"autoHeight": true,
"children": {},
"layout": "form",
"labelSeparator": " ",
"bodyStyle": "padding:10px",
"border": false,
"autoScroll": true,
"html": "<input type=\"hidden\" name=\"cic\" value='FCL'><input type=\"hidden\" name=\"cin\" value='Forward Computers'><input type=\"hidden\" name=\"clif\" value='asp_lgo_fcl.gif'><input type=\"hidden\" name=\"cema\" value='support@forward-comp.co.uk'><input type=\"hidden\" name=\"stct\" value='alpha'><input type=\"hidden\" name=\"xfpn\" value='2517'><input type=\"hidden\" name=\"scheme\" value='ext'>",
"fileUpload": false,
"standardSubmit": true,
"url": "asp_connect.do"
});;
this.add.apply(this, [loginForm]);

} catch(e) {
Ext.Msg.alert('Error in Panel initialization script', "<pre><code>" + e + "</code></pre>")
}
},
"width": 400,
"autoHeight": true,
"children": {},
"labelSeparator": " ",
"frame": true,
"baseCls": "x-window",
"border": true,
"autoScroll": true
});;
this.add.apply(this, [AspicioContainer1251288047940, AspicioPanel1251288047941]);

} catch(e) {
Ext.Msg.alert('Error in Container initialization script', "<pre><code>" + e + "</code></pre>")
}
},
"xtype": "container",
"children": {},
"labelSeparator": " "
});;
this.add.apply(this, [AspicioContainer1251288047939]);

} catch(e) {
Ext.Msg.alert('Error in Page initialization script', "<pre><code>" + e + "</code></pre>")
}
},
"children": {},
"labelSeparator": " ",
"autoScroll": false,
"xtype": "panel",
"border": true,
"layout": "fit",
"cls": (screen.availWidth <= 1024) ? 'asp-low-resolution' : (screen.availWidth <= 1400) ? 'asp-medium-resolution' : ''
});
},
null, {
delay: Ext.isGecko3 ? 100 : 0
});
</script>
<title>
Secure Login For ASP WebTrack
</title>
</head>
<body id="asp-document-body">
</body>
</html>

aconran
26 Aug 2009, 6:44 AM
Aaron, what if you had given those three region Panels itemIds?


I could then access my components with the getComponent method. I'll admit this can quickly become tiring as getComponent only works on direct children so you need to know how to drill down appropriately. We need a method like findById which works on itemId's instead of id's. Look for a findByItemId method on container coming soon.



Would it have created vars by those names?

No.



What I think would be very useful to people is if their itemIds became usable variables in the generated code.


This can be achieved with the ref configuration. From my example let's say for the west region i used a ref of "../navigation". Then....


var pnl = new MyApp.MyPanel();
var navPanel = pnl.navigation;

Animal
26 Aug 2009, 6:50 AM
Yes, the ref might be good.

But it still requires that user script have a reference to the Container into which the ref was inserted.

And also, what if they use a ref of 'items' or 'layout', or 'title', or 'body', or 'style', or 'tools' etc etc etc etc?

A scoped var is the most useful.

I went through these iterations as I developed our code generation for our tag handlers.

First, I created properties directly in the parent Containers like ref. But I soon realized that would cause collisions, as I just pointed out.

Then I started putting then into a children property of the Container, but it was unwieldy having to use



myFormPanel.children.destFieldset.children.desinationPort


To access a field.

Now of course, I just use



destinationPort

aconran
26 Aug 2009, 7:02 AM
One thing I also noticed is that some configs which are only valid when a Component is a child of a certain type of container do not become available.

For example, the title config is a config of Panel.

But put any BoxComponent (eg a Container) in a TabPanel, and you may give it a title which the TabPanel uses. XDS does not offer this currently.

This is something that we *can* support. Any component that is dragged on the canvas can be given additional configurations by:
- being used by a certain container
- its container having a certain layout

aconran
26 Aug 2009, 7:07 AM
@aconran: Why is it using initComponent instead of constructor?

initComponent's purpose is to initialize the component and this is where the actual items are added in Ext.Container. This could have been done in the constructor but we consider it best practice to be done in initComponent.

aconran
26 Aug 2009, 7:16 AM
Yes, the ref might be good.

But it still requires that user script have a reference to the Container into which the ref was inserted.

And also, what if they use a ref of 'items' or 'layout', or 'title', or 'body', or 'style', or 'tools' etc etc etc etc?

If you overwrote a reference to a critical variable/method yes, this would generate problems.




A scoped var is the most useful.

This may be an okay solution for your environment but remember these ui classes are going to be auto generated. People are not going to be accessing these or writing code within them.

This scoped local variable is only local to initComponent. If you wish to access it an afterRender method or in another class you would still have to access it from within the children object.



I went through these iterations as I developed our code generation for our tag handlers.

First, I created properties directly in the parent Containers like ref. But I soon realized that would cause collisions, as I just pointed out.

Then I started putting then into a children property of the Container, but it was unwieldy having to use



myFormPanel.children.destFieldset.children.desinationPort


The children idea was a good idea to combat the reference collisions but this almost feels as heavy as using getComponent and itemId's


myFormPanel.getComponent('destFieldset').getComponent('destinationPort')






The purpose of the ref configuration was for a quick and easy way to access the instances of teh child items off of the parent or some other ancestor.

To access a field.

Now of course, I just use



destinationPort



But this only works within the initComponent and will lead to lots of nested code so that the variable is accessible.

Animal
26 Aug 2009, 7:21 AM
This may be an okay solution for your environment but remember these ui classes are going to be auto generated. People are not going to be accessing these or writing code within them.


Unless you offer scriptability within the designer. The ability to add script for a Component which is inserted into the generated initComponent for it.




This scoped local variable is only local to initComponent. If you wish to access it an afterRender method or in another
class you would still have to access it from within the children object.


Which is why everything is done inside an initComponent method, never ueing items

All descendant Components are within that initComponent method. So all script declared inside the outermost Container sees them all.

All child items are created inside an initComponent method. They will be configured with their own injected initComponent method. It is all within the scope of the outermost one where the one big var statement is.

I've been through loads of these permutations and decisions. This latest method is very powerful and easy to use.

deanna
26 Aug 2009, 7:41 AM
I agree with Animal on needing the scriptability. We need to be able to specify event handlers and renderers (for grids). I have suggested before that an init (before and after) event is needed - which would go well with the designer methodology.

As for downloading js vs json, I prefer the json method - but if you only have one bit of js at the start to create a new var with new ... I can regex that out. But what may be needed here is different output modules. One that works more like Animals methodologies and one that outputs json data structures - both are equally valid methodologies.

aconran
26 Aug 2009, 7:42 AM
I've been through loads of these permutations and decisions. This latest method is very powerful and easy to use.

I can see how this would be a powerful concept but I think the code would quickly become convoluted as it became nested deeper and deeper. I think this is best left to server-side code generation.

Animal
26 Aug 2009, 8:02 AM
I agree with Animal on needing the scriptability. We need to be able to specify event handlers and renderers (for grids). I have suggested before that an init (before and after) event is needed - which would go well with the designer methodology.

As for downloading js vs json, I prefer the json method - but if you only have one bit of js at the start to create a new var with new ... I can regex that out. But what may be needed here is different output modules. One that works more like Animals methodologies and one that outputs json data structures - both are equally valid methodologies.

Yes. An init event for people to hook into (or for automated, generated code to hook into) would be very useful.

Animal
26 Aug 2009, 8:07 AM
I can see how this would be a powerful concept but I think the code would quickly become convoluted as it became nested deeper and deeper. I think this is best left to server-side code generation.

Probably true. It does get very deeply nested at the innermost initComponent. Running some of my generated code through jsbeautifier produces scary looking code!

But our stuff not designed to be ever read or used client side. All scripting is done in the tag-based definitions which are much less scary looking.

hendricd
26 Aug 2009, 8:18 AM
It sounds like ComponentMgr still has an important role to play within the Designer. It would simply act as the Project.Component.Registry.

It has the ability to resolve all Component references (no matter where they came from), and would be invaluable in binding event listeners (actions) from any 'named' Component to any other 'named' Component/class instance.

But, the notion of lazy-instantiation of Components becomes trivial whilst you play inside the sand-box (all Components are declared/live as soon as the Play button is pressed or the Designer needs to populate a list of available class/singleton methods).

What appears to be missing is the ability to define/manage application-level classes (the binders) that manage even basic component communication (a messageBus or general scripting) eg. 'SelectGridRow -> LoadForm' type stuff.

Without such an 'engine' included, you're left to coding all that 'interaction (event binding)' yourself anyhow.

You're almost there, why not go all the way?

mystix
26 Aug 2009, 8:26 AM
initComponent's purpose is to initialize the component and this is where the actual items are added in Ext.Container. This could have been done in the constructor but we consider it best practice to be done in initComponent.

wouldn't the constructor be a better place to do this?
doesn't initComponent() still suffer from the initialConfig problem?
(think extensions of the FormPanel)

imran
28 Aug 2009, 11:57 AM
hmm unless I'm missing something, how do you actually view the JSON representation of the components you create/arrange?

SamuraiJack1
2 Sep 2009, 2:37 AM
Then I started putting then into a children property of the Container, but it was unwieldy having to use



myFormPanel.children.destFieldset.children.desinationPort
To access a field.



I could then access my components with the getComponent method. I'll admit this can quickly become tiring as getComponent only works on direct children so you need to know how to drill down appropriately. We need a method like findById which works on itemId's instead of id's. Look for a findByItemId method on container coming soon.






The children idea was a good idea to combat the reference collisions but this almost feels as heavy as using getComponent and itemId's


myFormPanel.getComponent('destFieldset').getComponent('destinationPort')
But this only works within the initComponent and will lead to lots of nested code so that the variable is accessible.


Ext.ux.reference.Slot (http://extjs-ux.org/docs?class=Ext.ux.reference.Slot)address exactly this issues in a much nicer way than 'ref' config option:


MyForm = Ext.extend(Ext.Panel, {


slots : true,

constructor : function (config) {
config = config || {}

Ext.apply(config, {

buttons : [
{
text : 'Ok'
},
{
text : 'Cancel'
}
],

items: [
{
xtype : 'container', // nesting level skipped
layout : 'form',

items : [
{
xtype : 'fileuploadfield',

slot : 'fileupload',

anchor : '100%',

allowBlank : false
},
{
xtype : 'textfield',
slot : 'name',

anchor : '100%',

allowBlank : false
},
{
xtype : 'textarea',
slot : 'description',

anchor : '100%'
}
]
},
{
xtype : 'custom-widget',
slot : 'custom',

customConfig : {
attr1 : 'value1'
}
}
]
})

MyForm.superclass.constructor.call(this, config)
},


initComponent : function () {
MyForm.superclass.initComponent.call(this)

this.slots.fileupload.on('fileselected', this.onFileSelected, this)
},


onFileSelected : function (field, filename) {
this.slots.name.setValue(filename.replace(/.*[\/\\]([^\/\\]*)/, '$1'))

this.slots.custom.complexCalculations()
}

})

Ext.reg('xtype', MyForm)

aconran
2 Sep 2009, 7:02 AM
@SamuraiJack
One cool idea that you have in the Slot implementation is being able to set slots: true on the container of which you want to set the reference to. This eliminates the need of having ../../ etc in the ref config.

Other than that I don't see a big benefit to using the ux; Can you think of one?

SamuraiJack1
2 Sep 2009, 7:17 AM
Exactly - this allows to change nesting level for any component w/o the hassle of correcting its 'ref' config.
Plus, no potential collisions with standard configs.

For me, its enough B)

Cybjorg
4 Sep 2009, 2:10 PM
Perhaps I'm missing something here, but can someone tell me how to define the column variables (widths, etc.) in a column layout? I really like how GuiBuilder has a window that allows the user to define widths and titles, but I don't see any such functionality in Designer.

Cybjorg
4 Sep 2009, 2:35 PM
Also, can someone tell me how to get multiple Hboxes to play nice? When I drop them into Designer, they crowed under one another despite the definition of 'pack: start'. Also where are the flex capabilities?

celiane
6 Sep 2009, 12:07 PM
What is the release date?