Sencha Touch/EXT JS newbie

[gwthompson]

Hi All,

I've just discovered Sencha Touch and Ext JS and have a few questions that I hope someone can shed some light on for me.

My goal is this:

I want to convert some elearning courses that currently only exist in Flash to use on the iPad but I don't quite know where to start with the Sencha platform. The courses are multi-page and include audio and some video along with different copy and images for each page.

My first questions are:

1. How would one create multiple pages in Sencha Touch?
2. How do you detect for an orientation change? I want to rearrange the layout for portrait versus landscape.
3. What would be the best way to quickly get up to speed on the Sencha Touch/Ext JS platform?

I'm fairly well versed in Javascript/HTML/CSS but up to now have always built everything from scratch. I'm hoping the Sencha platform will be the right choice to use for all of my mobile projects going forward.

Any and all help would be greatly appreciated.

Thanks,
Gary Thompson

[jay@moduscreate.com]

Sencha Touch !== Ext JS

Ext JS is a heavy-weight framework, designed for larger applications.

Sencha touch is a light weight framework designed for mobile apps.

There are books on Ext JS already, but Sencha - not yet.

[abe.elias]

1. How would one create multiple pages in Sencha Touch?

I'd recommend looking at the Kitchen Sink example that we ship with the sdk. As with both Ext JS and Sencha Touch, single page apps are encouraged.

2. How do you detect for an orientation change? I want to rearrange the layout for portrait versus landscape.

The Kitchen Sink source should give you some guidance, but there's an orientation change event that gets fired.

3. What would be the best way to quickly get up to speed on the Sencha Touch/Ext JS platform?

While they are two different projects, their DNA is the same. Jay and others have written a few books on Ext JS, and I strongly encourage reading them. They will help you tremendously. Additionally, we have a Manual on getting started with our foundation lib here: http://www.sencha.com/products/extcore/manual/

We were all newbie's at one point so don't feel bad to ask questions.

~abe

[gwthompson]

Hi Abe,

Thanks for the reply. When you say "single page apps are encouraged" does that mean I should be looking to dynamically load content using an Ajax call of some sort for each "page" in the course? Or would I load all of the content up in my index.html in different div tags? I would think the latter would be time consuming on startup if there were 20-25 images along with that many pages of content.

I'm trying to get my head around the single page app which seems to align itself more with development of a desktop application that loads resources versus the multi=page web site let alone the whole Flash model so please forgive me if my questions are out of left field sometimes.

The Flash versions of these courses I'm looking to port to the iPad (which I didn't develop) tend to take a bit of time pre-loading and then are pretty responsive once loaded.

My goal is to make these courses as nimble and fast for the user along with taking advantage of the iPad interface elements.

I will take a look at the manual and the books.

Thanks again for all of your help!
gt

[abe.elias]

Hi Abe,
Thanks for the reply. When you say "single page apps are encouraged" does that mean I should be looking to dynamically load content using an Ajax call of some sort for each "page" in the course?

This is preferred.

Or would I load all of the content up in my index.html in different div tags?
I would think the latter would be time consuming on startup if there were 20-25 images along with that many pages of content.

We are not huge fans of progressive enhancement.

[digeridoopoo]

Wouldn't something like this be more suitable for your project? Flash media server now converts flash files on the fly for iDevices:

http://www.adobe.com/products/flashmediastreaming/

Also check out stuff like Google Swiffy which converts flash animations into HTML5/Javascript that will work on the iPhone/iPad.

:-)

Si