Ext JS Designer Preview
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:
We can now encode the raw bitmap data and write it to the file system:
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.
Hello, Aaron! It’s awesome app. How can I save project in Java Script in this designer?
Hi Medvedev, project saving ability will come in the stable release, in the time when ExtJS 3.1 released, if I knows as right.
Looks great, looking forward to see demo with import/export and save/load functionality.
Looks fantastic, can’t wait for the release!!
Ext JS FTW!
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!
Great work!
Will it support user extensions of different kinds (for example layouts)?
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.
Awesome!! really impressive. thank you for this update.
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!
Nothing major but just pointing out that the “download” link above doesn’t work in Safari on the Mac. Firefox is fine.
Speechless as always!
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?
@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.
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?
@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…)
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!
God-like work or good work, your choice. :D
@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?
Good stuff!
Can we download it without Air packaging like a tar or zip file?
看着很炫，但是我还是习惯直接编码方式
This is fantastic. Look forward to the release!
This is fantastic. I look forward to the release!
朋友 生成的代码的功能 是需要收费的
friends, the generated code features are fee-charging
Круто, круто, круто :)
Aaron you are a genius! Great stuff man.
This will be great with saving or viewing design code support. Great job!
This is awesome! =)
очень хорошая работа. впечетляют возможности. хотелось бы ее в действии посмотреть… потрогать так сказать )))
i will test it now.
WOW!!! ExtJs rules!
extjs magic!!!
When the Pro version is released, will it too require Air?
@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.
Will the production release be in available as in browser JavaScript that can be modified and incorporated other applications?
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
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.
@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.
Music credits would of been nice, that’s a cool tune.
Oh yeah and the designer is looking very slick. Rock on!
Wow, looks like this will help to prototype new designs quickly. Looking forward to trying it out.
@Chester James – Music is Pony Pony Run Run – Hey You
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.
@Dan Schad – You need to install the Adobe AIR runtime to use the Designer. http://get.adobe.com/air/
很好
it feel so good ,and i like it
Like Dan, i have Adobe Air installed but designer wont run on IE8. Running on firefox though. Love it.
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…
@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.
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.
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
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
Хорошая штука, сделайте кнопку сохранения и будет вообще круто
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…
Good job! Will it have an option to save the final code?
Thank you
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!
Don’t you think this is like becoming VS ASP.NET components now :)
@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! :D It will be a separate tool like JSBuilder. We will distribute both a free and a paid version.
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?
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
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.
Bravo, voilà un super outil!
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!
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
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.
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.
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
3 questions.
1.- When is release a version?
2.- What will it cost?
Looks fantastic, can’t wait for the release!!
The install is confusing because in IE the download link ends up saving a file named xds-1.0.5.zip, instead of the correct name of xds-1.0.5.air. A simple rename fixes this up but I suspect many people attempted to open and work with the contents of the zip.
Download and install instructions when using IE:
- Install Adobe Air: http://get.adobe.com/air/
- Save download link file with a .air extension http://extjs.com/products/extjs/download.php?dl=xds
- Run .air file
شكرا ممتازة جدا
At the moment it’s a little annoying not to be able to quickly add json snippets in various places to speed up things, but I guess as you mentioned, it’s coming.
You could add another tab to edit the json then click update and be back in the designer… kind of like ‘code’, ‘split’ and ‘design’ views in Dreamweaver.
Surely the community version should allow you to actually get ‘something’ out of the designer… if so what? Can I whip up layouts for free? Are you going to charge per component or by a block of components? I like to own what I pay for… so I recon you should offer pricing for both models.
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..
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
Is anyway to buy the code generator for Ext JS designer preview?
How download Ext JS Designer Preview?
question – how do i run / install the extjs designer?
@Tom, @np: There is a download link in the first paragraph.
Just amazing, there will be no more reasons for beginners to say I dont know ExtJS enough to start a project (great example, great doc, and now great designer)
you are the best !
很好，顶
不错，不错。
Code generation is not currently in the designer.
When ‘Pro’ version will release ?
When will be available the new version?
thanks
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 …
download?
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.
It’s very great
it works also for GXT?
Great stuff! awasome
So when is this going to be released?
Extjs, the best framework of javascript that I know, excelent!!!
the downloadeded xds-1.0.5.zip does not contains “Ext Designer Preview.exe”. So it cannot run.
have to change it to xds-1.0.5.air =.=
Hello,
So is this due to be released at the end of November or in December? Very impressive product.
Michael
Awesome! Great song, great framework! Great blog!!!
It downloaded in the .air format… Isn’t it a program? If so, how do I use it then?
Try downloading Adobe Air runtime at here: http://get.adobe.com/air/
Ext.fly()为空不是对象
Using Ext JS Designer to design a form finally how to get the source file
any one explain..
Hello Aaron,
I did a test with this new version and found it very good. How do I save the source code and use in my applications? Do I need to buy the version to have this functionality?
Thank you.
qutoe Aaron Conran:
“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“
best regards
3xc3ption
Great tool! the sad part is that ExtJs license makes tool and library unusable for small companies in small countries (the license will cost me more than i can earn with it). Only the rich can get richer
Congratulations, great work. Thank you
What a great tool! Did you plan to support treeview(s)?
When will be available the PRO version with the code generation?
Really, when is it going to be availabe? Can we at least have a rough date?
Congratulations, good job. Thank you
plz can i copie this article to my blog???????????,
Designer looks good!
I did a translation of this blog post, for Chinese readers. the url（以下是该文的中文版）:
http://blog.csdn.net/zhangxin09/archive/2009/12/19/5035733.aspx
What i dont get is, how can i save what i have just designed?
is there now way to get the code (config, components) out of the designer, or is this all about taking screenshots of them?
Nice Video, Terrible Song. Perhaps I’m a little conservative to listen this crap.
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!
We’re considering using ExtJs for new products, but we find writing user interfaces in code a time consuming and tedious task. Is there a timeframe for the release of the designer?
It’s very good!
good!
This is amazing. It´ll help for fast conding with greatful visual.
Great job! When will be released a version with a saving option?
Great work…….awesome…I am waiting for releas
any update on how soon this will b released. Looks amazing,
a rough idea would be cool, eg feb/march ish
anything?
this teaser is torture!
Ext JS Designer, a high-quality product. This quality of the product designers to easily access required. For this, there are various promotional and marketing methods. These result in the easiest one is the Google Ad. For this, I would recommend this site.
GoogleAds
what is the name of the song and artist?
Эт-то круто:
http://www.sigmawidgets.com/products/sigma_visual/VisualJS/index.html
como puedo hacer una consulta sql y mostrar los datos en un combo
How to use Array Store?
Simplemente maravilloso!
I could not really watch the first video I see how much I’ve gained momentum on this issue serious projects and those who want to share information please visit the website Astosoft
拖拽的功能对初学者应该很容易入门吧。
开始使用Ext
Is this going to be part of the Extjs 3.x package or will it require a seperate license fee?
One more question…. I coudl not find a way to make a tree view. Is this still in development or did i miss something?
期待生成功能早日出来啊。
Cool! If this can run on web, that would be the best. I did find something like this, http://www.projectspace.nl/, but it doesn’t work well.
i don’t know how to build code, i have build PNGEncoder.swf but i don’t know use it
用图片生成代码的方式还是挺新奇的，不知有没有人试过这种方式
From another post in forum, it said the price could be $200 (per year?).
How much is it?
When will it be released?
Thanks.
AWESOME!
I really impressed guys, i have seen a lot of in computing technologies, but you are real gurus!!!
Good luck for you!!
Yea, that´s right Alexey. Thanks for the Video and for the many usefully Questions and Answers :)
Wow good tool… Please add export and import facility.
This tool will be released any soon ?
Jesus Manuel Olivas
Interesting tool i Think about to get it. greets robert
good tool.
very good!
I think this is a wonderful idea to talk about it, and I am really grateful I found your website
Any thoughts on making a version for GXT?
Just discovered Ext-JS and really impressed by the product!
Is the tool built with ExtJS or ExtGWT?
When do you release it?
wktk
Any release date?
Please,
I just need when do you release it?
When do you release it?
I concur; Give us an estimated release date! Can’t very well plan to include it in any upcoming project expenses if we don’t have an idea on when we can have it.
wow es fantástico el potencial de esta aplicación.
Hi,
can you please tell me how I can get this tool?
c’est interessant , merci pour l’info !
When is this product will be launched..
มันเยี่ยมมาก Very good!!!
I have Pre-Ordered and my money has been taken, surely we deserve a release date emailed to us for pre-ordering?
When is this product will be launched … Can you say a Date?
Nice~
I have bought a preorder but i deserve an mail confirmation and at least the release day :s
Nice product. I’ve already view the preview and it’s a very good software must have for ajax lover.
I check here everyday to see if a release date has been announced. As someone said earlier, how can we include it in project expenses if we don’t know when it will be released? My boss is having me evaluate UI prototyping tools at the moment. This seems like it would be an even better candidate than a straight UI mockup tool but unless this is to release imminently, we will have to go another direction.
Actually, looking a little closer at the demo above, I don’t see on the widgets list on the left a tree, a spinner, or even a combo box. Will these be included in the product?
I testet the Designer preview and miss some things like the combo box, a tree. I´m thinking about the Pre-Order – does anybody know something about the release date?
Excellent product should have for web developer. Thanks for your effort.
Has anyone got the release version(released today) and tried?
Looking for more details / screen shots / features before I buy this. No further information available here except a link to buy..
Waiting..
cool~
Nice blog! There have a chance that we can have an furthur exchanges. May be we have common interests. Let’s keep in touch. Also I will always pay attention to your blog.
Hi There,
Great tool, but the pricing for single developer is very expensive. Unfortunatelly here in Brazil there’s no way for one developer pay 219USD for a piece of software.
Hi,
I agree with Rafael, is very expensive for brazilian people =(
I’m student and want to use this great tool.
Thanks for the fantastic Article
I have been using the preview version and expected to use the update function to get the final release. However it looks like the packaging has changed from Adobe AIR to Qt so have to download the full installer. Any reason for the switch?
I really don’t think this will have a stand in compare to the visual studio and php editors.
Anyways good attemp.
very exciting indeed
QQ群：84507704
Javascript面向对象/jQuery/ExtJS
your blog is so hot, there are so many replies. this method is so worked for me, i want to design my website. maybe i can get something for your blog. i will come here frenqutly, and learn more.
Great articles & Nice a site….
gigirdfdf gread music~….
your ground music is good
I have been using the preview version and expected to use the update function to get the final release. However it looks like the packaging has changed from Adobe AIR to Qt so have to download the full installer. Any reason for the switch?
Awesome, I didn’t know that it is so easy. Thx for publishing the screencast!
شكرا ممتازة جدا!!