PDA

View Full Version : Ext Designer Review



phanthach
9 May 2010, 8:13 PM
A couple of weeks ago, I decided to download Ext Designer (http://www.extjs.com/products/designer/?ref=family) and play around with it. In this post, I am going to write a review about this application.
Disclaimer: I am not being paid to do this and no one asked me to. Everything I say/write here is my honest opinion.

Designer is a desktop application that helps you create interfaces faster than ever in an easy-to-use, drag-and-drop environment.
The ExtJS Team created a Preview screencast (http://www.extjs.com/api/xds/screencasts/designer.html) in which they mock up some interfaces.
It really is cool. There is a post on ExtJS Blog (http://www.extjs.com/blog/2009/10/08/ext-js-designer-preview/) you can check out all the features of this great tool.
Despite being a great tool with all those amazing features, there are some features and ExtJS components I missed in the application.
If you take a look, you will see the name text field within the personal info field set is declared in a different way.
If you want to export the whole code to your favorite IDE, so you can integrate ExtJS with a programming language or platform (e.g.: PHP, Java, .NET), you just need to select the root component and click on “Export Code to Disk” or “Export code to ClipBoard”:
Look now at the code generated from the project I created – it is the same code you get when you choose the export function:
view source (http://loianegroner.com/2010/04/ext-designer-review/#viewSource)
print (http://loianegroner.com/2010/04/ext-designer-review/#printSource)? (http://loianegroner.com/2010/04/ext-designer-review/#about)

001MyWindowUi = Ext.extend(Ext.Window, {
002 title: 'Ext Designer Test',
003 width: 400,
004 height: 250,
005 initComponent: function() {
006 this.items = [
007 {
008 xtype: 'tabpanel',
009 activeTab: 1,
010 items: [
011 {
012 xtype: 'panel',
013 title: 'Grid',
014 items: [
015 {
016 xtype: 'grid',
017 title: 'My Grid',
018 columns: [
019 {
020 xtype: 'gridcolumn',
021 header: 'Name',
022 sortable: true,
023 resizable: true,
024 width: 100,
025 dataIndex: 'name'
026 },
027 {
028 xtype: 'gridcolumn',
029 header: 'Phone #',
030 sortable: true,
031 resizable: true,
032 width: 100,
033 dataIndex: 'phone'
034 },
035 {
036 xtype: 'gridcolumn',
037 header: 'Address',
038 sortable: true,
039 resizable: true,
040 width: 100,
041 dataIndex: 'address'
042 }
043 ],
044 bbar: {
045 xtype: 'paging'
046 }
047 }
048 ]
049 },
050 {
051 xtype: 'panel',
052 title: 'Form',
053 items: [
054 {
055 xtype: 'fieldset',
056 title: 'Personal Info',
057 layout: 'form',
058 items: [
059 {
060 xtype: 'textfield',
061 fieldLabel: 'Name',
062 anchor: '100%',
063 name: 'nameField'
064 },
065 {
066 xtype: 'textarea',
067 fieldLabel: 'Address',
068 anchor: '100%',
069 name: 'addressField'
070 },
071 {
072 xtype: 'textfield',
073 fieldLabel: 'Phone #',
074 anchor: '100%',
075 name: 'phoneField'
076 }
077 ]
078 },
079 {
080 xtype: 'button',
081 text: 'Save'
082 }
083 ]
084 },
085 {
086 xtype: 'panel',
087 title: 'Tree',
088 items: [
089 {
090 xtype: 'treepanel',
091 title: 'My Tree',
092 root: {
093 text: 'Root Node'
094 },
095 loader: {
096
097 }
098 }
099 ]
100 }
101 ]
102 }
103 ];
104 MyWindowUi.superclass.initComponent.call(this);
105 }
106});


It generated a single code block! Lucky me it is a small and simple project! Imagine the code generated from a big project? Not friendly if you need to maintain this project in the future.
This is the first thing I think they could improve in Ext Designer. If the tool creates a class for each component already, why do not use the reference to it to generate the whole code? And they could export all the classes in different files. I think this is the way most of ExtJS developers does when they have to develop a big project.
The second thing I did not like is that the code is read only. I am a developer, and sometimes I just want to set a property in the code. It may be faster than searching the property in the Component Config tab, after all, I am used to set the properties in the code already. I understand this can be sort of a protection if a person does not know ExtJS and he/she can mess up with the code trying to change anything.
Third: I missed some components, such as radio group and graphs, among others. Maybe this is something they can implement for a near future?
The coolest feature in my opinion is the preview function. It is really awesome!
In general, Ext Designer is a great tool and I love it! It is very intuitive.
I do not recommend it if you are learning ExtJS. I think it is important to understand how ExtJS works and the components patterns before you get started with a visual tool. However, it is great if you are an ExtJS developer already. It can save you a lot of time. It is also great to prototype and design applications (if there is a design team in your company that do not know ExtJS programming).

(http://www.extjs.com/store/designer/)
_________________________
dianabol (http://www.buyonlinesteroids.com)
Smart Lipo (http://www.smartlipotopdocs.com/)