Sencha Inc. | HTML5 Apps

Blog

Announcing Sencha Designer 2 Beta

January 30, 2012 | Luca Candela

Sencha Designer 2 Now Supports Sencha Touch

Designer 2 beta
Sencha Designer 2 Beta features support for Sencha Touch and Ext JS JavaScript frameworks.
Download Sencha Designer 2 beta today

We’re thrilled to announce that Sencha Designer 2 Beta is available for download! Designer 2 makes it easier than ever to build desktop and mobile applications using Ext JS and Sencha Touch.

We’ve been working hard to bring you the next generation of Designer that will help you quickly build Ext JS and Sencha Touch applications. Experienced users will enjoy the productivity gains of the visual development environment, while folks new to Sencha will have a much easier time learning how to work with our frameworks and quickly build a complete application.

Ext JS and Sencha Touch are incredibly rich: they provide UI components, charting, controllers, models and data stores. In Designer 2, we make all of these features easily accessible and neatly organized to make it easier to discover all their capabilities.

From Ext Designer 1 to Sencha Designer 2

Designer 1.0 was the first step in tooling for Sencha frameworks. Designer 1 was a visual UI builder that made it easy to scaffold and design the UIs for your applications. You used it in conjunction with another code editing tool in order to build Ext JS 3 apps.

In Designer 1.2, we adding the ability to target multiple frameworks and also added support for Ext JS 4. You could continue to build views and stores utilizing all of the new widgets available in the new framework, like charts, enhanced stores, and more.

While you told us that you loved the features of Designer 1.x, we kept hearing that you wanted Designer to do more to help you build fully functional applications in a collaborative way.

Designer 2: Easier, Faster, Stronger

When started planning Designer 2, we wanted to improve every aspect of the tool. To achieve this goal, we adopted the mantra “Easier, Faster, Stronger.”

  • Easier because we believed that the learning curve of building Sencha apps could be shortened. In Designer 2, all components come with handy in-line documentation, and there are quick links to go deep into the API reference. More fundamentally, developers can try things quickly and get instant feedback. The Designer canvas is a live view giving you immediate feedback. Learning the dozens of components in Touch or Ext JS is now a breeze.

  • Faster because traditionally, web based development proceeded like this: write some code, refresh the browser, check the changes. Over and over again. While better web debugging tools have come a long way, debugging and error checking is still a tedious and sometimes unpredictable process.

    Designer 2 is different: all code generated by the tool is guaranteed to work out of the box. You can’t arrange components in a way that will break the frameworks’ conventions. Every property or event of every component is available in Designer, removing guesswork and eliminating digging through the API docs.

    Moreover, the Project Inspector has been greatly enhanced. It’s the heart of your project, and it shows your views, controllers, models, and stores all in one place, along with information about the project’s structure. All components and their relationships are there where you can see and analyze them.

    If you need to jump into a project somebody else started, the Designer Project Inspector makes it easy. At one glance, you can see the entire project and understand how the application is built without thumbing through pages of code.

  • Stronger because Designer 2 helps you create well-structured applications from day one, and ensures that generated code follows best practices. Most (if not all) of the boilerplate code is generated for you, so you can focus on the code that really matters: the controller logic that’s at the core of your unique application.

What’s new in Designer 2?

Designer 2 represents a significant leap ahead in functionality, and here is a brief list of what’s new and what changed since the previous version:

Support for Sencha Touch 2

This feature has consistently been the top request from our community, and now it’s here! Sencha Touch 2 is now a first-class citizen of Designer. Visual development of mobile web applications is now a reality. This beta includes the PR4 release of Sencha Touch 2.

Code editor

Designer now includes a built-in editor so you can add your own code any time you want. You can toggle between the design view, which gives you access to Designer visual controls, and code view, where you write your JavaScript. The files are saved to .js files on the file system, so you can use your editor of choice, or the built-in editor in Designer.

New Toolbox

The component Toolbox has been expanded and improved: it now includes all the components you need to create a fully functional application like Controllers, Models and even a brand new store that connects to Sencha.io. We also worked to make the vast array of components more manageable by adding base categories. This allows you to narrow down the selection quickly, and create your own to fit your personal workflow.

MVC in the Project Inspector

New Project Inspector

The Project Inspector shows the entire application at a glance. The root Application node contains your launch function, while the Controller, View, Store and Model nodes help you keep things organized as you’re building an MVC application.

Event Bindings

There’s a new panel that displays all the Event Bindings available for a component, and you can use this to bring your UI to life. And when your application grows in scope, you can stay organized by moving your event bindings into a controller.

Source control friendly file format

Developers share code using source control, but developers using Designer 1 had a hard time doing that because of the monolithic nature of our project files. Designer 2 projects are better: gone is the single file archive (you still can package them that way for easy sharing via email). Now, each view, model, store is its own file. Designer 2 makes it easier to work in a project team.

In-line documentation

In Designer 2 every component, property and configuration comes with handy in-line documentation, and if you need more there are quick links to go deep in to the API reference.

Caveats for the Beta Release!

We’re excited to share with you our first beta of Designer 2. While we’re excited to see our community give it a whirl, it is still a beta, and there’s still some work left to do. In the following weeks the team will concentrate on two things:

  • Further quality improvements of the existing feature set
  • Improvements in the user experience and the UI design

Certain features that were not quite ready for the beta have been disabled – don’t worry they’ll be back soon. As of today’s beta, the most notable absence is packaging for mobile devices.

The coming weeks are going to be fundamental to make Designer 2 the application you’ve been waiting for, so we need your feedback. We will be running usability tests to make sure we catch bugs on our own before the official release, but if you find something that doesn’t work as you expected, or think you have an idea that would make the application better, go ahead and let us know. All feedback will be evaluated carefully.

If you’re local to the San Francisco Bay Area, and are interested in participating in the usability testing that we’re doing, we’d love to hear from you. Click here to apply for the usability test.

Since the application is going to improve and change significantly before release, the Designer documentation for beta is very basic. We are releasing an introductory article to get you started, and more material will become available as Designer takes its final shape.

We don’t recommend that you adopt the beta of Designer 2 yet in your production environment. Designer 2 has an auto-update feature, so as we make updates, we’ll be pushing changes directly to the application, and you can choose to accept or decline the updates.

To share your ideas, comments and critiques with us, please use the Sencha Designer 2 forum.

To report bugs, please use the Designer 2 Bug Forum.

Promotions, pricing and availability

We are updating pricing for the product at the launch date: individual copies of Designer will be $399, with discounts for 5 and 20 packs.

Special offer: buy an Ext Designer 1.x License today and take advantage of promotional pricing of $279. Plus, you’ll receive a free upgrade to Designer 2.x License when released. Hurry, this offer ends on March 31, 2012.

Upgrading: if you bought Ext Designer 1.0 after January 1st, 2012, you’re entitled to a free upgrade to Sencha Designer when it ships! In order to get your upgrade license please contact the email address designer.upgrade@sencha.com and we will take care of everything for you.

If you purchased an Ext Designer 1.x license prior to January 1st, 2012, you can upgrade to Designer 2 for $199 from now until March 31, 2012. To take advantage of this offer please email us at designer.upgrade@sencha.com. Note that after March 31, 2012, the upgrade price increases to $279.

Please note that Sencha Complete which will include Designer 2, will remain priced at $999.

So, go ahead, download the Designer 2 beta trial or purchase Ext Designer 1 from the Sencha Store, and share your experiences with us!

There are 47 responses. Add yours.

David

3 years ago

I can’t wait to put this beta through the paces.

Phil Strong

3 years ago

I’d like to thank my wife, Jarred @jarrednicholls, Dave @davidfoelber, Luca @luckymethod, Jason @lojjic Bharat @extdude, Aaron @aconran

Donald Organ

3 years ago

What is the upgrade pricing for upgrading form 1 to 2?

Aditya Bansod Sencha Employee

3 years ago

@Donald—we updated to post to be more clear on the upgrade pricing.

Donald Organ

3 years ago

@Aditya

Not sure where the updated pricing is….And I got an email about your response…but its not showing in the thread.

Aditya Bansod Sencha Employee

3 years ago

@Donald—you may need to refresh the page, the update is now live in the bottom section of the post.

Durgaprasad

3 years ago

Wow ! Great news of mobile developer.

AwesomeBobX64

3 years ago

Looks beautiful from the screen pics. Can’t wait to try it out.

Nikolai Babinski

3 years ago

Great work guys!

aw3s0m0

3 years ago

We use extjs mostly with anchor layout since our forms have complicated desktop like design sometimes with more then 100 controls on the single form, and none of the other layouts isn’t right for us. And we also do not want to add more layout containers since the performance is critical feature for us. So in other for the designer to be really useful for us we need two things:
1. Is there going to be multiselection for controls in designer? I wan’t to be able to select multiple controls and delete them or drag them to another location. Also the project inspector does not have multiselection option.
2. Is there going to be support for keyboard positioning of control when in absolute layout? (when control is selected in designer and container has the absolute layout I want to be able to move the control around with keyboard arrows) And generally please work on keyboard support for the designer, for instance the control can’t be deleted with delete key from the designer!

I really want to congratulate on the job well done. But there is still a lot of work to be done to even come close to real rapid development environment like visual studio, eclipse or netbeans…

Peter Kellner

3 years ago

you guys have really pulled out the stops on this.  Nice job!

Stewart McGuire

3 years ago

I just have one word for the new Designer 2.0:    WOW!!!!!!!!!

Stewart McGuire

3 years ago

What is the upgrade price of a 1.x license 5-pack?

seasharp2http://

3 years ago

Just had a play. The ribbon/tool bar buttons are too washed out and appear disabled, I was quite surprised when I found they were clickable. Why is the design/code view toggle buried in a cryptically named classic menu? The welcome experience is poor. I recall having to twice indicate I wanted to access the trial, then having chosen the project type the welcome dialog window disappeared to be replaced a moment later by the full designer window.

LoreZyra

3 years ago

First impression: KICK AZZ!!!
1) Nice redesign. Looks more intuitive than before.
2) Far more robust in terms of proper code creation.
3) Makes it even easier to focus on the business logic and experience flows.

First disappointment: Crashes upon “Save As” on both Windows (XP) and Linux… Damn “undefined” error.

X Flex

3 years ago

There is life after Flex…finally a viable HTML/JS solution for enterprise developers.  Now I can rid myself of jQuery…

Hamilton Quant

3 years ago

Why my previous comment was removed?

Hamilton Quant

3 years ago

Good work.

I had some comments on the UI. I know it is beta and it might get improved by the final release. The pop up windows’ style is not consistent with the rest of the UI and they look alien to the rest. The pop ups look (e.g. Settings) like extjs-ish.

Since it is a designers tools for GUI design, It would nice for the sencha designer to reflect that design spirit. Other than that the tool is very nice, and I am sure the final product will be very useful for gui designers and developers. Keep up the good work.

Nclex

3 years ago

Wow so nice! I can’t wait.

Aaron Conran Sencha Employee

3 years ago

@aw3s0m0, Thanks for the feedback. We appreciate it.

1) Multiselection of controls is something that we do not have at the moment but may come in future versions.
2) Expect a significant re-work of the keyboard navigation in the near future. Deleting a component is done with Shift + Delete and should work reliably.

Gmat

3 years ago

Good job guys!

Aaron Conran Sencha Employee

3 years ago

@seasharp, LoreZyra - We’ve been working on a new look and feel that will be coming in a beta in the near future.

@hamilton quant - Our blog software picked up your comment as spam and it was pending moderation. You actually had 4-5 comments and I let the last 2 which seemed the most relevant and had all of your points through.

@all Thanks for the feedback.

Lino Tadros

3 years ago

Congratulations! Great work and best of luck!

Peter Fisk

3 years ago

This is a major improvement over version 1.x.

I will certainly upgrade my license.

Also, very nice to see support for mobile.

Congratulations on your good work!

Jihan van de Merwe

3 years ago

What about if you already have Sencha Complete? I just paid 495 usd for extending it. Now I have to pay another 199 usd? And if I don’t upgrade, does it mean that I have a version of Ext Designer that comes to a stand still? Sencha seems to be very tough on loyal customers.

Michael Mullany Sencha Employee

3 years ago

Jihan. If you are on Sencha Complete, you get Sencha Designer included as part of your Sencha Complete subscription.

Johan van de Merwe

3 years ago

@Michael Mullany, that is great news, but not very clear from the text regarding upgrades put here. But if that is a confirm, I stay a happy developer with Sencha.

Ozum Eldogan

3 years ago

I appreciate your great work, and I wanted to buy it even if I handcraft my code. However, upgrade price is too high. It is not encouraging old customers who purchased previous version. Your “promotional” upgrade price is equal to regular upgrade price of well known photo editing software which has 700 USD retail price.

My intention is not to be offensive. I know you work hard to publish software with great quality. I just want to show point of view for some (or just one) customer(s).

PranKe01

3 years ago

Is there support for Sencha Charts in the Sencha Designer? I installed the beta, but could not find any charts in the Sencha Touch project.
If not, will there be support for it in the future?

Dawesi

3 years ago

Nice one. Still delivering the wow factor six years on… wink

Phil Strong

3 years ago

@PranKe01 we do not currently support charting package for Touch.  We do for ExtJS as it’s included with the framework.  Imagine we will but not sure on timing

Phil Strong

3 years ago

No support now for Touch Charts.  Future is possible

LoreZyra

3 years ago

Once Sencha irons out the bugs of this release, I would most likely recommend to my clients and colleagues to buy this!

Aaron Conran

3 years ago

@PranKe01 - We were actually just discussing this one. It’s not in there yet but it is on our radar and we are aware of the need to put touch charts in Designer.

Michael Mullany Sencha Employee

3 years ago

@johan. That is a confirmation. Designer 2 is free if you have a currently active Sencha Complete support subscription. This is one of the benefits of buying (& renewing!) Sencha Complete.

David MacLean

3 years ago

I spent some time learning the compass/sass thing.
Figured we were encouraged to do so. Got myself a style I like.
But the designer cannot use it. Dunno how to become productive again unless I go back to the standard style or add miles to the project.

Me too on the pricing. By the end of the day I’ll have spent more than I ever did on say Borland Delpi Pro, which had a designer/code builder/help/editor that makes extjs look like a cheap toy. And the cost of learning to use it has been many times higher.

Looking forward to a stable release that I can use for many years to come. Cheers.

Aaron Conran Sencha Employee

3 years ago

@David - You can certainly use compass/sass alongside the designer and your own custom theme by applying it when you deploy your application. That being said, you are correct in that you cannot link it in at design time and see it applied live. That is a future feature we’d like to have.

Chris

3 years ago

Hi

In “Get Started with Designer 2.0” guide - ‘Component Layout, Step 2’ referrs to a “Grid Panel” I just can’t seem to find. Any idea what I may be doing wrong?

Chris

3 years ago

Sorry, my bad. was looking for it under a touch project smile

Samuel

3 years ago

hi new to sencha touch, i am an undergrad and i love the writeup on the designer 2. but can’t seem to download a trial version. can any body help

Goldclub

2 years ago

Me too on the pricing. By the end of the day I’ll have spent more than I ever did on say Borland Delpi Pro, which had a designer/code builder/help/editor that makes extjs look like a cheap toy. And the cost of learning to use it has been many times higher.

Programmer

2 years ago

Good project! I like this

Johan van de Merwe

2 years ago

@Goldclub, I think that is a bit harsh, to call Ext Designer a cheap toy. I am not using Ext Designer to build complete projects like I have seen in some webcasts. But all my dialogs start with Designer. I have saved already a lot of time, by using this product. I think the price is quite high frankly, but it is hard for me to imagine doing Ext JS projects without it. I haven’t used it yet for Sencha Touch.

Phil Strong Sencha Employee

2 years ago

Senthil Prasanna

2 years ago

Great work, good to have ide from Sencha

Jeremy

2 years ago

Do you have examples of using ext designer with salesforce.com force.com visualforce pages?

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.