Ext JS Designer Preview
October 8, 2009 by Aaron Conran
We are very excited to share our latest version of the Ext JS Designer. This new version adds many new features to improve your efficiency creating application designs. Once you get accustomed to these features its difficult to live without them. For those of you that don't have the time or ability to download and play around with the Designer, we have created a Preview screencast in which we mock up some interfaces. We have tried to show off as much features and functionality as possible.
New Features
- Duplicating Components
- Transforming Components
- Undo/Redo
- Configuration Searching
- Auto Updating
- Screenshots
Duplicating Components
How many times have you copied and pasted a set of source code and/or configuration and modify a couple of values to save on some keystrokes? The designer now has the same ability by providing you the ability to duplicate sets of components and then modify their values.
Take a look at this quick sample where I've leveraged the duplicate functionality to quickly build a form without dragging and dropping the components and setting up common configurations over and over.
Building a simple form:
Transforming Components
When developing you are capable of quickly changing a component from one class to another without losing your configurations by changing the class that you are extending from or instantiating.
For Example:MyGrid = Ext.extend(Ext.grid.EditorGridPanel, { }); // or new Ext.grid.EditorGridPanel({ });
Developing in the designer should not be any different. If after creating a GridPanel I decide that I really meant to use an EditorGridPanel. I can right click on the component within the inspector and see which transformation options are available.
A GridPanel can be transformed to an EditorGridPanel and vice-versa.
Let's put together a GridPanel. When we drag out a field for a particular column the designer intelligently knows that in order to use a TextField within a column it must convert itself to an EditorGrid. The designer will automatically perform this transformation for you.
Another interesting transformation is converting a TabPanel to a Panel and then setting the layout to accordion. Fields are capable of transforming between types.
Component Undo/Redo
If you make a mistake while putting together your application you can undo/redo the last change that was made via the Undo and Redo buttons in the top toolbar. A current limitation of this feature is that if you perform a transform on a top level component then the history is reset.
Configuration Searching
A critical feature missing in prior releases was the ability to search configurations which are available to the component you have currently selected. In the past, if you were searching for a component configuration you had to look through the entire list available! The screenshot to the right demonstrates searching for the 'la' configuration in a FormPanel.
You can now unset configurations by clicking on the x on the right hand side of the configuration. This is useful when you want to remove setting a configuration and not just set it to "".
Newly Added Components
Some of the exciting new components added are:- EditorGrid
- ButtonGroup
- BoxComponent
- Slider
Auto-Update
We are using Adobe AIR's Auto Update framework to provide updates to the designer as we push out new public releases. When we release a new version you will be prompted to update to the latest version. You can expand out the "Release Notes" to see what enhancements and bug fixes have been made. Adobe AIR provides us the ability to quickly deploy updates to all of you as new versions are released seamlessly.
Auto Updating the Designer via Adobe AIR
Screenshots - Leveraging ActionScript within Ext JS
One feature we wanted to implement within the designer was taking screenshots of your budding prototype directly within the application. Imagine this, you quickly mock up a borderlayout complete with tabs, a grid, and a form and then click the screenshot button. You can then choose to save the screenshot of the component you've just created as a PNG. We thought that this would probably be a simple task within AIR but ended up having to do quite some digging to figure out how to accomplish it.
In order to create a screenshot of the applications current state we can use air.BitmapData to retrieve the raw bitmap data of the current screen by calling the draw method.
var capture = new air.BitmapData( window.htmlLoader.stage.stageWidth, window.htmlLoader.stage.stageHeight); capture.draw( window.htmlLoader );
The contents of the variable capture now has the raw bitmap data of our entire application. We'd like to convert this into a modern format like PNG and save it to the file system. We will use PNGEncoder from as3corelib. You can compile and use any arbitrary actionscript code to a SWF and expose it to JavaScript within Adobe AIR by including it in the page by giving it a type of application/x-shockwave-flash.
Use the mxmlc compiler from the Flex SDK to compile the code:aaron@aaron-desktop:~/as3corelib-.92.1/src$ mxmlc -source-path=. com/adobe/images/PNGEncoder.as Loading configuration file /home/aaron/FlexSDK/frameworks/flex-config.xml /home/aaron/as3corelib-.92.1/src/com/adobe/images/PNGEncoder.swf (1242 bytes)You can then copy the file into your project and include the file:
<script src="adobe/PNGEncoder.swf" type="application/x-shockwave-flash"></script>
var file = air.File.documentsDirectory.resolvePath('screenshot.png'); var stream = new air.FileStream(); // Encode image captured from air.BitmapData var png = window.runtime.com.adobe.images.PNGEncoder.encode( capture ); stream.open( file, air.FileMode.WRITE ); stream.writeBytes( png, 0, 0 ); stream.close();
When you import classes from ActionScript into your HTML App they will immediately be placed in the window.runtime namespace with their appropriate package namespaces.
Therefore our class com.adobe.images.PNGEncoder is placed in window.runtime.com.adobe.images.PNGEncoder. (As an aside this is all AIRAliases.js file which you include simply provides smaller aliases from window.runtime into the air namespace.)
When taking the screenshot we also use a clipping rectangle and the copyPixels method to to grab only the bounding rectangle of the currently active component.
Summary
We've added lots of features which should improve your productivity when building user interfaces with the designer. We hope you like our progress and as always we greatly appreciate your feedback. For those of you that have suggestions, questions, found bugs, or just want to make a remark, we are listening.
Posted on October 12th, 2009 at 3:41 am
[...] This post was mentioned on Twitter by Aaron Conran. Aaron Conran said: @extjs New blog post: Ext JS Designer Preview http://bit.ly/1VkQwv #ext #xds New Features to improve productivity [...]
Posted on October 12th, 2009 at 4:05 am
Hello, Aaron! It’s awesome app. How can I save project in Java Script in this designer?
Posted on October 12th, 2009 at 4:41 am
Hi Medvedev, project saving ability will come in the stable release, in the time when ExtJS 3.1 released, if I knows as right.
Posted on October 12th, 2009 at 6:48 am
Looks great, looking forward to see demo with import/export and save/load functionality.
Posted on October 12th, 2009 at 7:05 am
Looks fantastic, can’t wait for the release!!
Posted on October 12th, 2009 at 7:21 am
[...] ExtJS官方Blog上（http://www.extjs.com/blog/2009/10/08/ext-js-designer-preview/）发布了Ext JS Designer新版本，版本号为1.0.5，这个版本添加了不少新特性，如直接修改title，config参数搜索等等。不过还是之前问题，没有打开生成代码的功能，你设计后，还是看不到生成的代码，这个功能应该不会很久，很快就会出现啦。 [...]
Posted on October 12th, 2009 at 10:54 am
Ext JS FTW!
Posted on October 12th, 2009 at 11:02 am
Incredible upgrades to 1.0 that was previously out. Makes it _so_ much easier to do tedious tasks, or templated configs. Excited for what else is in the pipes too, you guys do great stuff!
Posted on October 12th, 2009 at 11:04 am
Great work!
Will it support user extensions of different kinds (for example layouts)?
Posted on October 12th, 2009 at 11:12 am
Nickolay -
Yes, it’s in the works to support user extensions of all kinds (Components, Plugins and Layouts). When we complete the marketplace infrastructure more details will follow on how to implement your own user extensions for use in the designer.
Posted on October 12th, 2009 at 11:22 am
Awesome!! really impressive. thank you for this update.
Posted on October 12th, 2009 at 11:31 am
Very nice work Aaron and team. I have to say using the designer has helped in prototyping and debugging complex layouts. I look forward to future functionality and work on the project. Keep it up!
Posted on October 12th, 2009 at 12:20 pm
Nothing major but just pointing out that the “download” link above doesn’t work in Safari on the Mac. Firefox is fine.
Posted on October 12th, 2009 at 12:20 pm
Speechless as always!
Posted on October 12th, 2009 at 1:01 pm
I’ll bite. Even after learning what a .cpgz is and figuring out how to crack it open… I still don’t see how to install this. It’s an Air app, yes? Link to some intall instructions?
Posted on October 12th, 2009 at 1:22 pm
@Brian
If you have Adobe Air installed (http://get.adobe.com/air/) you should be able to download the file and run it. The installer will automatically start.
Posted on October 12th, 2009 at 3:27 pm
Is it just my AIR environment…but how do you actual see the JS code that gets generated from the UI you create by all the dragging and dropping? I don’t see any place or button that says view code, neither does any JS file get created in my install dirs (I’m assuming my environment is restricting this). Has anyone been able to see the generated code for their components?
Posted on October 12th, 2009 at 3:55 pm
@Eric
Dunno if this happens automagically in a windows environment, but on my mac, I had to rename the .air.zip to just .air and then the extension association picked it up. (And now I just learned that .air files are just zip files with a different name…)
Posted on October 12th, 2009 at 4:41 pm
Great job Aaron!
It’s great to see Designer make so much progress. Designer has helped us complete prototypes much faster than before since we are able to visualize the components and use real data.
Keep up the god work!
Posted on October 12th, 2009 at 4:42 pm
God-like work or good work, your choice.
Posted on October 12th, 2009 at 5:06 pm
@Ian
Code generation is not currently in the designer. This will come in the ‘Pro’ version release in a month’s time. If you’d like to take a look at what the code will look like:
http://www.extjs.com/forum/showthread.php?p=378242#post378242
@Clause lol
@Brian Did this only happen with Safari? How about Firefox?
Posted on October 12th, 2009 at 6:34 pm
Good stuff!
Can we download it without Air packaging like a tar or zip file?
Posted on October 12th, 2009 at 9:00 pm
看着很炫，但是我还是习惯直接编码方式
Posted on October 12th, 2009 at 9:11 pm
This is fantastic. Look forward to the release!
Posted on October 12th, 2009 at 9:12 pm
This is fantastic. I look forward to the release!
Posted on October 12th, 2009 at 9:20 pm
朋友 生成的代码的功能 是需要收费的
friends, the generated code features are fee-charging
Posted on October 13th, 2009 at 12:47 am
Круто, круто, круто
Posted on October 13th, 2009 at 1:29 am
Aaron you are a genius! Great stuff man.
Posted on October 13th, 2009 at 2:54 am
This will be great with saving or viewing design code support. Great job!
Posted on October 13th, 2009 at 3:03 am
This is awesome! =)
Posted on October 13th, 2009 at 5:15 am
очень хорошая работа. впечетляют возможности. хотелось бы ее в действии посмотреть… потрогать так сказать )))
Posted on October 13th, 2009 at 6:00 am
i will test it now.
Posted on October 13th, 2009 at 7:27 am
[...] o mais novo preview do Ext Designer para deixar os membros da comunidade ainda mais ansiosos! Devo confessar que a cada lançamento de [...]
Posted on October 13th, 2009 at 11:35 am
WOW!!! ExtJs rules!
Posted on October 13th, 2009 at 11:41 am
extjs magic!!!
Posted on October 13th, 2009 at 2:50 pm
When the Pro version is released, will it too require Air?
Posted on October 13th, 2009 at 8:02 pm
[...] Ext JS Designer Preview Release – We are very excited to share our latest version of the Ext JS Designer. This new version adds many new features to improve your efficiency creating application designs. Once you get accustomed to these features its difficult to live without them. [...]
Posted on October 13th, 2009 at 9:41 pm
@Matt Bittner – Yes, it will always require an install. A web version is not an option as we need to be able to write/read to the file system. It also enables us to do some pretty slick things given that we know our users *always* will have a WebKit browser and lightning fast JavaScript.
Posted on October 13th, 2009 at 10:57 pm
Will the production release be in available as in browser JavaScript that can be modified and incorporated other applications?
Posted on October 14th, 2009 at 3:47 am
I am playing around sigma builder, it’s simple but easy to use.
But when I go deeply into programming, documentation is poor.
Anyway, this builder&it’s source could be used under LGPL license.
http://www.sigmawidgets.com/products/sigma_visual/VisualJS/index.html
Posted on October 14th, 2009 at 8:30 am
[...] Conran has published a new preview of Ext JS Designer which includes the new [...]
Posted on October 14th, 2009 at 9:15 am
Thanks, Aaron.
Also one thing to keep in mind. I’m not sure about others, but I know the project I’m on resides not on the “internet”, per se, but instead a different, stand-alone network. If there are others, maybe there needs to be a way to “disconnect” the designer from automatically checking whatever Ext site for updates, etc. Maybe this is already within the app and if so, my apologies for wasting time.
Posted on October 14th, 2009 at 9:42 am
@Ethan Brooks – No, we took the desktop approach which allows us to read/write to the file system and be guaranteed that we know the environment that you are running in.
@Nuke – Thanks for the link. It’s interesting to see what other people are doing in the same space.
@Matt Bittner – This shouldn’t be a problem at this point. However, we are intending to add authentication to Ext so that you can dynamically get pro features and/or access to any components that you’ve purchased in the upcoming marketplace. That may pose an issue if you are in a secure financial/government environment as you are describing.
Posted on October 14th, 2009 at 9:57 am
Music credits would of been nice, that’s a cool tune.
Oh yeah and the designer is looking very slick. Rock on!
Posted on October 14th, 2009 at 10:06 am
Wow, looks like this will help to prototype new designs quickly. Looking forward to trying it out.
Posted on October 14th, 2009 at 10:29 am
[...] Enlace | Ext Designer [...]
Posted on October 14th, 2009 at 11:15 am
@Chester James – Music is Pony Pony Run Run – Hey You
Posted on October 14th, 2009 at 2:49 pm
Nice concept but the download did yield a very good experience. The layout did not run correctly in firefox and wouldn’t start at all in explorer. Very interesting to see what this will finally work like.
Posted on October 14th, 2009 at 3:11 pm
@Dan Schad – You need to install the Adobe AIR runtime to use the Designer. http://get.adobe.com/air/
Posted on October 14th, 2009 at 8:18 pm
[...] Conran has published a new preview of Ext JS Designer which includes the new [...]
Posted on October 15th, 2009 at 1:11 am
很好
Posted on October 15th, 2009 at 2:31 am
it feel so good ,and i like it
Posted on October 15th, 2009 at 4:36 am
Like Dan, i have Adobe Air installed but designer wont run on IE8. Running on firefox though. Love it.
Posted on October 15th, 2009 at 10:04 am
can you develop this as a EXTJS development tool
this is useless tool i don’t want to get screen shots i want to build a working application
please improve this in to EXTJS Development Tool like EXTJS IDE…
Posted on October 15th, 2009 at 1:56 pm
@Joel
The Designer is not meant to run in the browser! It is an actual desktop application that you install locally. Adobe AIR is a platform that allows you to install applications written in HTML/Javascript. It allows us to open/write to files on the filesystem, and many other things that we need to provide certain functionality. If you have Adobe Air installed, and you run the .air file we have provided, it will ask you if you want to install the Designer, where you want to install it, etc.
@chamika somasiri
Taking screenshots is just one of the functionalities that we provide. I don’t know if you have actually read anything we have explained in our blogposts, but the Designer will of course allow you to build a working UI. It will generate Javascript classes for you, not just take screenshots.
Posted on October 15th, 2009 at 5:18 pm
Am new to ext-js the designer preview looks great and seems ideal for a newbie like myself, would love to install and have a play around. Are there any installation instructions around.
Posted on October 16th, 2009 at 4:35 am
Fantastic … I look forward to the release of version 3.1.
Stupid question : The button “Load Data” for JsonStore doesn’t work? Bye
GREAT work
Posted on October 16th, 2009 at 7:00 am
Hi. Congratulation for the great work! Impressive!
A question: I want to integrate a designer in a web tool. It is possible to have a particular license (paying a fee of course) to embed ExtJs Designer in my application?
Thank you,
Cristian
Posted on October 16th, 2009 at 9:35 am
Хорошая штука, сделайте кнопку сохранения и будет вообще круто
Posted on October 16th, 2009 at 11:54 am
[...] More information can be found here. [...]
Posted on October 16th, 2009 at 9:01 pm
I was checking out the preview via the download. What’s up with the viewport -> borderlayout? I don’t see any regions and nothing in the component properties related to regions…
Posted on October 17th, 2009 at 12:35 am
Good job! Will it have an option to save the final code?
Thank you
Posted on October 17th, 2009 at 8:05 am
Great stuff!
But,
- i cat’t save/load my designs,
- when I change the component layout, (especially form -> table) the new layouts component config do not appear (OSX 10.5.8, Air 1.5.2, Ext Dp 1.0.5)
- ext direct support?
I’m also glad for a form to grid transform. I’m waiting for this tool very long time… It will be part of ExtJs distribution or a separated like JSBuilderX?
ExtJs rocks! Keep good work!
Posted on October 17th, 2009 at 9:47 am
Don’t you think this is like becoming VS ASP.NET components now
Posted on October 17th, 2009 at 11:37 am
@ash – Install Adobe AIR and then download/install the .air file linked above.
@giuspel – Did you specify a url for the JsonStore? Did you specify what fields would be in the response?
@Christian – We haven’t made any decisions yet about OEMing the designer for integration with other products.
@Chris – Viewport is just a specialized container. It does not immediately mean that it is a borderlayout. Change the layout configuration to ‘border’. Then drag and drop additional panel’s into the container. They will be auto-assigned regions which you can manipulate afterwards.
@nicksaint – Yes, we will have a service that is capable of generating classes for what you design.
@TripToNe – Code generation will be part of an additional service that plugs into the designer. Could you tell us more about your problem changing layouts from form to table? Ext Direct support is coming!
It will be a separate tool like JSBuilder. We will distribute both a free and a paid version.
Posted on October 17th, 2009 at 10:15 pm
Trying to use the jsonstore and it says url has not been set. i have a local server with some json i want to use in the grid. How would i go about setting the url? I set the url to http://localhost/employees.json and it still doesn’t work what am i doing wront?
Posted on October 18th, 2009 at 1:19 pm
Nice job guys! Can’t wait until release. Currently, using Coolite.com for ASP.NET. Looking forward to an agnostic visual designer! Any idea when you guys will be ready for beta! I’m in!
PS – Funky bg music! Heheh
Posted on October 18th, 2009 at 5:30 pm
Aaron is the man! Keep up the great work. The designer is coming along nicely, can’t wait until I can see the code it generates.
Posted on October 18th, 2009 at 9:54 pm
[...] ExtJS官方Blog上（http://www.extjs.com/blog/2009/10/08/ext-js-designer- preview/）发布了Ext JS Designer新版本，版本号为1.0.5。 [...]
Posted on October 18th, 2009 at 9:56 pm
[...] 查看Ext JS Designer更多详情：http://www.extjs.com/blog/2009/10/08/ext-js-designer-preview/ [...]
Posted on October 19th, 2009 at 11:32 pm
[...] ExtJS本家のブログにスクリーンキャストが載っています。 http://www.extjs.com/blog/2009/10/08/ext-js-designer-preview/ ExtJS Designer の [...]
Posted on October 21st, 2009 at 9:17 am
Its getting very mature, I just tried this new version and I rellly enjoyed, but I see it’s just some demo cuz I can’t save or export the code. Anyway very nice job!
Posted on October 21st, 2009 at 5:13 pm
pity that it is payant, i understand why it is, seen the tremendous work that it represents and at the same time it is sad!. good work
Posted on October 22nd, 2009 at 2:24 am
There is a bug……….
While I’m adding a jsonstore to a gridpanel,then quickadding the fields,I can not add any more fields.It doesn’t work.
Posted on October 23rd, 2009 at 11:14 am
This is very impressive. I’m new to Extjs and have been exploring the various libraries hoping to find one that I can sink my teeth into and learn to integrate into my projects. This designer puts Extjs way out front for me.
I do have a question about database connectivity. Is it possible to incorporate database connectivity and field binding into the designer? For example, when setting up the project you could select the database and have the fields available for inclusion in grids, forms and other data bound elements?
Great work and I’ll most likely by a license for this great library….hope the designer release is coming soon too.
Posted on October 23rd, 2009 at 11:01 pm
Hello – just wanted to give feedback on your visual designer. I really like the product. I work for Bell Helicopter and we would be purchasing it along with ext js support and licenses. We would much rather pay for the tool upfront instead of a yearly fee.
Just my perspective.
Scott
Posted on October 26th, 2009 at 5:32 pm
3 questions.
1.- When is release a version?
2.- What will it cost?
Posted on October 27th, 2009 at 2:47 am
Looks fantastic, can’t wait for the release!!
Posted on October 27th, 2009 at 6:35 pm
شكرا ممتازة جدا
Posted on October 28th, 2009 at 4:49 am
Hi, nice app!
I created a viewport, panel, grid panel, array store and data fields
Inside Component Inspector panel (on the right), right clicking on data field.. then the context menu is stuck there forever, can’t close it. clicking new project, it’s still there..
Posted on October 28th, 2009 at 12:38 pm
Designer looks cool. But I’m not familiar with EXT JS so I’ve got a newbie question. How easy is it to link your controls to a database like MySQL? I’m from a Delphi background and would like to see controls that have a datasource so it can connect to a database table. This will allow it to display and save the contents back to the database. How easy is it to do this?
TIA
Brent
Posted on October 31st, 2009 at 2:17 pm
Is anyway to buy the code generator for Ext JS designer preview?
Posted on November 1st, 2009 at 7:19 am
How download Ext JS Designer Preview?
Posted on November 2nd, 2009 at 3:54 pm
question – how do i run / install the extjs designer?
Posted on November 3rd, 2009 at 12:20 pm
@Tom, @np: There is a download link in the first paragraph.
Posted on November 5th, 2009 at 2:02 am
很好，顶
Posted on November 5th, 2009 at 11:20 pm
不错，不错。
Posted on November 6th, 2009 at 2:20 am
Code generation is not currently in the designer.
When ‘Pro’ version will release ?
Posted on November 8th, 2009 at 11:31 pm
Wihhh hebat….
Posted on November 8th, 2009 at 11:32 pm
weleh weleh iki opo maneh cak, sing gawe mangan ope sih ??
wong-wong podo mumet iki bikin enak wayah bikin program.
Posted on November 9th, 2009 at 8:44 pm
When will be available the new version?
thanks
Posted on November 10th, 2009 at 10:30 am
When do you plan to generate EXT GWT code from this designer?
Maybe some file.designer.java code?
Serious, efficient, complex and MVC based apps with unit testing have to use such technology or you will be in trouble …
Posted on November 10th, 2009 at 11:15 pm
download?
Posted on November 12th, 2009 at 7:33 am
I read in a previous post where the guy said he would like the cost to be an up front charge and not a yearly charge. I agree with that.
Posted on November 12th, 2009 at 11:45 am
Dunno if this happens automagically in a windows environment, but on my mac
Posted on November 13th, 2009 at 5:24 pm
Incredible upgrades
Posted on November 14th, 2009 at 2:24 am
It’s very great
Posted on November 17th, 2009 at 5:33 am
it works also for GXT?
Posted on November 18th, 2009 at 4:53 am
Great stuff! awasome
Posted on November 18th, 2009 at 1:37 pm
So when is this going to be released?
Posted on November 18th, 2009 at 2:41 pm
Extjs, the best framework of javascript that I know, excelent!!!
Posted on November 19th, 2009 at 7:14 am
the downloadeded xds-1.0.5.zip does not contains “Ext Designer Preview.exe”. So it cannot run.
Posted on November 19th, 2009 at 7:24 am
have to change it to xds-1.0.5.air =.=
Posted on November 19th, 2009 at 1:44 pm
Hello,
So is this due to be released at the end of November or in December? Very impressive product.
Michael
Posted on November 20th, 2009 at 2:07 am
good ! but I know noting about extjs , can any one teach me some about it, my qq number is 565198745
Posted on November 20th, 2009 at 5:31 am
Awesome! Great song, great framework! Great blog!!!