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!
What's your reaction?
0
0
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?
I’m posting a comment to disable follow up comments, any other way to do it? My mailbox getting spammed because of a lot of people answering here!
Please don’t disable comments! I’d really like to use the designer, but at this point I can’t continue:
I finally managed to get the designer to use the latest beta libraries. However I’m still getting the same errors as before. At this point I’m unable to assess the designer any further. Is there another way to instantiate the views without refs?
@Francesco You can do so from your settings I believe also isn’t there a link in the email to disable?
@Trevor this appears to be fixed. Can you start a forum post in the help area of the forums. Feel free to link it from here.
https://www.sencha.com/forum/forumdisplay.php?99-Sencha-Designer-Forums
It would help if you give as much detail as possible
OK. I created a forum post about this issue here: https://www.sencha.com/forum/showthread.php?179823-Refs-not-generating-getters-in-beta-2&p=730925#post730925
Will Ext JS designer support the ability to update themes. or apply themes?
Thanks a lot Phil, very helpful tips. Hope we see more.
The current beta build (need to update when prompted) allows you to add a csspath that gets added to your index file. We expect to add a theme tool but not sure on timing just yet
@Chris G expect to see more examples and videos between now and GA
I know you mentioned the source, but I have not been able to find it. It would be very helpful to have the full source including the project file for this video. I did download the zipped project file but when I open it it asks me to import a project and when I specify a directory it fails with “Unable import project” I would really like to be able to duplicate the work you’ve done in the video line by line or even a simpler version of it, but so far I cannot. Thanks. I am new to Sencha so perhaps that is the issue as maybe I should not start with the designer, but I really would like to ramp up as quickly as possible and I felt the designer would be the best way to go. Perhaps I need to go back to doing it by hand.
Cannot open .xda file “Unable to import project”. Please provide the full source to this video project.
Thanks
@Phil Strong: Thanks, removing “Notify me of follow-up comments” didn’t change the setting but the one on the e-mail did! It was spamming my mailbox too much.
By the way, I think a theming tool would be great, actually I use Ext JS for management website or for private section of the website, I have problems in using them on “normal” websites because I have troubles in changing the graphics. I would like to stop using JQuery UI or things like that for websites just because they are graphically easier to customize; I really like Ext JS Documentation, how the library is built and I think it would improve diffusion if we can customize theme, allowing us to effectively use it everywhere!
@Trevor please be sure you unzip the file first before trying to import it. I was able to import it fine using build: 276
Nice summary.
HI Phil,
I am trying to import the project using the xda but I get a message saying ‘Unable to import project’. What’s the right way to do it?
SZ
“I am trying to import the project using the xda but I get a message saying ‘Unable to import project’. What’s the right way to do it?”
I was having this same problem as well. If you double click on the .xda file as I was doing it asks you to import and it always failed. I was however, able to import the file by doing the following: Open designer and choose new mobile project. Go to file Import and open the .xda file, select a directory to import to.
@SZ Did you unzip the file first? I had to zip it in order to upload it to the blog but you’ll need to unzip it to use it.
Can I post a comment already??
Seems like I can post comments that don’t contain anything useful, but if I post a solution to someone’s problem, it’s marked as spam.
Don’t double click on the file. There is a bug with that import functionality. The way I got it to work was to open the designer, choose New Mobile project and then go to File-Import. Then it worked.
Don’t double click on the file. There is a bug with that import functionality. The way I got it to work was to open the designer, choose New Mobile project and then do import.
Phil,
Nice demo. I did get the demo loaded into Designer 2, deployed to test and that was fine. Where would I add a marker to the map to display the exact location. I assume it is centered, but would like to see what and were code is needed to add the image marker.
Thanks,
I also would like to know how to get PIN placed on maps. Also how do I activate the CALL button? Last one – the designer.html and .JS can we move the content to lets say index.html and add http://www.boilerplate.org and http://www.modernizr.com – or is this process not necessarily? I know each time I save the project designer.html and JS will be overwritten so once at production level maybe move to boilerplated and modernizr enabled files?
Since Sencha Touch 2 uses the advanced class system from Ext JS 4, great apps with powerful MVC capabilities like extended Class properties , mixins( traits), config etc…
The industry’s first HTML5 mobile framework will be the best mobile framework and have a great future..
The tutorial on this ‘ http://docs.sencha.com/touch/2-0/#!/guide/getting_started ‘ is also very helpful for beginners..
@TrevordK: Thanks a lot!! That worked!
Thanks, Phil.
I was a little unclear when adding the generic ‘Components’ at 21:45 for the photo and data elements of the Contact view. This ‘Component’ (x-type) must have been removed in the 2/15 update. I proceeded using the Media/Image for the photo and since this didn’t have a tpl attribute, I added the template data in the ‘html’ attribute. Was this the right thing to do? Also, for the ‘data’ element, I used a Container/Container and again entered the template data in the ‘html’ attribute.
Should I have used any other components than what I used?
@jay sorry the component missing is a bug and is fixed in a build released today. Build 288
@fred – “I have not tested the beta for Designer 2 … and I will not test since it is not able to produce MVC code.”
It is in fact able to produce MVC code, using Sencha best practices. Please take a look ;)
Phil, any news regarding the freezing of Designer on Snow Leopard ?
I had buyed an Ext designer 1.2. But I think it’s fairly difficult to use. Where can I get the Ext designer 2?
How a great news.
Very nice video, it actually makes learning Sencha Touch fun. We really need more of those!
The tool is also very nice and easy to use, although it is a bit weird for me because I only code and not design anything but this is the first tool that dragging things into the canvas actually saves time. Very nice… waiting for more updates!
I would also like to see editing CSS and styles in a video, even a not so long one.
Any word about the development on Ext Designer 1? What will happen with Ext Designer 1 when Designer 2 ships out?
I enjoyed the video. Watched on ipad 2. Still evaluating whether as a developer to commit time after work to learning this product. $995 for a single developer license is a lot while the product is still being skaken out. Need to learn more before deciding. Reading Manning’s “ExtJS In Action 2nd Edition” early edition is a good way to spin wheels in the meantime. Am hoping Sencha will provide more free videos going forward to help lesson the height of the learning curve. Good luck to all.
I really enjoy your work, it was really helpful to understand some procedures in Sencha Designer.
The strage thing is that I’ve done everything like you said, but…I receive, when I tap on ad item, the following console error: Uncaught TypeError: Object #<Object> has no method ‘Create’ at app/Controller/Business.js ( me.details = Ext.Create(‘CityBars.view.DetailPanel’,{ …. ) at onListItemTap function.
Any idea about it? Strange indeed!
The loading of json file is perfect, and before that line I put a Ext.Msg.alert and it works correctly.
Thanks a lot, Ale
Your style is very unique in comparison to other people I’ve read stuff from.
Thanks for posting when you have the opportunity, Guess
I’ll just book maark this page.
Nice info
Thanks for sharing…