Sencha Designer 2 beta is the latest version of our visual drag-and-drop tool for building JavaScript-based applications. Designer 2 supports both the Ext JS and Touch frameworks, so you can use the tool to build applications for either desktop or mobile operating systems. For a more in-depth look at Sencha Designer 2, please see our Introduction and Guided Tour included in the Designer documentation.
**UPDATE**: On February 15th, we pushed an update to Sencha Designer 2 beta. This update addresses several critical bugs, as well as adds our new Snow Theme for the UI. Open the app and click accept to automatically get the update.
h3. Building a Sencha Touch Mobile App using Sencha Designer 2
This tutorial is delivered in both video and written form. You may find it easier to follow one or the other, or use both in unison. Continue on to the bottom of this post to see the full video walkthrough.
The application we’ll be building is called CityBars, a Sencha Touch app for mobile devices which makes use of the Yelp API to find nearby watering holes. I’ve tried to add some color to the video and to introduce you to Sencha Designer 2 in much the same way I’d help any developer new to Designer.
h3. Project Assets
To follow along with the project you’ll need a copy of Sencha Designer 2 beta; and a Yelp developer API key. Note: Your API key will be capped at about 150 calls per day. If everything stops working this might be why.
You’ll also need to follow the step-by-step guide along with the CityBars project file — be sure to unzip it. (The CityBars project is also available as Github repository, though this is simply the Sencha Touch mobile app, and not the Sencha Designer project.)
h3. Watch the Video
Watch this video on Vimeo.com
If you hit any road bumps, head over to the Sencha Designer 2 Help & Discussion forum to ask questions and get some assistance!
Any improvement about the WEB designer? I tried the 1.0 version and was quite unhelpful (except for learning first steps on how to build an ui).
No project support, no real MVC support (I had to create 1 project for each view and had to manually import each file… was making me mad). I really prefer a designer, but it needs a lot of improvements
The guy in the video seems soooo tired…
The impression is that he hates the designer :)
As for the voice, I suspect it’s the British accent.
The guy is too much “blasé” Sounds like the Merovingian, in Matrix II
@Francesco: I assume you’re talking about Ext Designer. Have you tried the beta for Designer 2? It’s a huge expansion of what Designer can do and seems to cover all the things you’re asking for. I would give it a spin.
@Alex: Phil doesn’t hate Designer, he sounds tired because he’s working days and nights to get you a better product and still finds time to create tutorial videos to help new users get acquainted with the software. And no, he’s not British: he’s from Maryland :-)
I second Francesco’s comment. I was looking forward to leverage Designer in my ExtJS 4 MVC project to quickly create my views, but it was a complete disappointment.
Any improvements there in Designer 2?
@Steve yes of course there is an enormous amount of improvements around MVC capabilities. I suggest watching the video to get a sense of it.
I have not tested the beta for Designer 2 … and I will not test since it is not able to produce MVC code.
Was a little put off by the loud sigh in the beginning of the video, but I adjusted to the voice after a few minutes. I need to play with this some more before I give you feedback, but I would like to ask you which tool did you use to create the video? I thought the quality of the video was pretty good.
Thanks!
Thanks Phil, the video gave me a very good insight of Designer. I’ve been trying it out for a few days, but your video answered a lot of questions and will help me develop better MVC apps in designer. Small links like the title:’Yo’ shortcuts, linking demo and is not easy to come across in the docs :)
..but yeah, you do sound a bit bored in the beginning ;)
@Phil Strong: I think you accent was okay, I’m Italian and my english skills are not so good but I managed to understand everything you said without subtitles, which is good. About the video I must complain that it start a bit “slow” (it took 4 minutes to start with the project, which bored me a bit on the beginning).
@Luca Candela: Yes I were talking about it and I didn’t try the beta (I tried the trial 1 designer I think), I’ll look to the 2.0 so, thanks for suggestion.
@Steve: Yea, I estimated the costs of the designer in my project because I thought it was a must-have. But after some tries I completely uninstalled the trial because the product, even if it’s nice, it was completely unhelpful for a real world project.
Nothing wrong with the Phil’s voice and no he does not have a British accent. Just avoid the sighs Phil and it’s fine. One thing I’d add though is spell out verbally what you are typing in. It’s not always visible in the video. Nice job though!
Can you provide source for the templates?
@Trevor thanks. Yes the source and a written account of all I did during the video is available here – http://img1.sencha.com/files/misc/AfirstlookaDesigner2.pdf.zip
The information in the video was great, but the guy presenting almost made this unwatchable. I considered stopping multiple times. Did he drink a bottle of NyQuil before doing this? I highly recommend better pre-planning for the presenter. If you are going to make an hour long technical video, you really need to speak with a little more energy and also know what you are going to do before you do it, instead of stopping…taking a nice big breath…sighing..and then moving forward.
Nicely done and very informative.
Any talks about adding an Exts Theme updater/ Playground option. I’ve coined “theme playground option” an application or tool in EXTjs Designer that allows designers to modify style sheets and images. Instead of using Compass.
I don’t know what John Doe or Francesco’s problems are but I can tell you that they are unappreciative of the amount of work that goes into such products as Designer and Sencha’s API.
I have used a multitude of IDE’s (Eclipse, IntelliJ, Felx Builder, etc) during my 20+ year career and I have to tell you that the designer2 really is very good. A very intuitive and very productive tool in my opinion. I love being able to skin the cat more than one way plus the quick search and using JSON notation to set variable is a big time saver.
Great work guys. Some of use really do appreciate the hard work put into these tools and APIs. My life has gotten a whole lot easier with Sencha and Designer.
BTW, I thought the voice of the video was friendly and well spoken. I felt like I was just chatting with another developer and wasn’t being sold anything.
I was little bored watching the video (I almost fell sleep at some point…) but helped me a lot to understand some new concepts of D2.
Thanks Bill!
Thank you for the video, Phil. It was very informative and very helpful to understand the basics and concepts. I am looking forward to working with the polished product.
Though, if you don’t mind me offering some suggestions for improvement on delivery, the repetitive sighing and the pacing needs to be addressed. The mood comes across as being exasperated, even at times, bored with one’s own presentation, and yes, I too fell asleep (though watching in my bed on an iPad may be have factors) at about the 16min marker. I was hoping for a way to watch it 2x the playback speed. Feel free to stop part way, or just edit out some of the more tediously slow portions.
Thank you again for hearing us out. ;-)
Of course he is breathing heavy. Creating awesome stuff and recording video is hard work and I believe he is a developer and not a movie star? (might be wrong here)
@Phil Strong, good job! The video answered a lot of the questions I had to the designer.
Hi,
video is set as private.
Phil. In your video you are looking for the street you searched for on the map.
I don’t think it’s there, since the map is not centered correctly.
Centering is done before layout, and the map does not know it’s size. I now have the same problem:
https://www.sencha.com/forum/showthread.php?179764-Center-Google-Map
@Artur be sure you shift + refresh it’s possible you have a cached version of the page.
@Alex – he’s not british. He does sound very put out though. He really wanted to be doing something else when he made this video. :-)
@all thanks for the feedback. You can believe I’ll be well rested and peppy for the next one! I do hope the content outweighed the delivery ;)
@David factually correct! Thanks
I’ve been following through with the examples, but I have a problem using refs: Every time I add a ref to a view and then call the getter like this in the init function:
var dataList = me.getDataList();
alert(dataList);
dataList.setStore(store);
dataList is always null. If I assign the property “autocreate” to true, then I do get a value for dataList, but then I get the error that there is no method “setStore” on dataList. I have been back over the example in the video over and over and cannot figure this out. Please help!
We had a bug in ST2 PR4 where getters weren’t set at init time. I think it was fixed in Beta1
Thanks for the reply. The designer has the following as the sencha touch path: http://extjs.cachefly.net/touch/sencha-touch-designer-edition/ So I’m guessing that is 1.1. I have downloaded the latest beta, but when I change the path in the designer, nothing seems to happen. Furthermore the path keeps getting reset to the above path. Also the “Publish” function doesn’t do anything (no files are copied to the virtual directory). So how can I test the designer using the latest beta?