Getting Started: Architectural Approach

[sanbeiji]

Hello everyone,

I'm coming from development in jQTouch and am very new at Sencha Touch. I'm making an attempt at creating my first Sencha app prototype, and my target is to build an PR-style app with news, photos, video, and audio buttons that display lists of the respective content, with each list item linking to access the content (i.e. news article fulltext, video link). I have a wireframe diagram attached for reference which hopefully helps to visualize the goals I'm after.

I'm combing through the examples, but I still have a lot of questions as to how to approach something like this. How would one build out the framework for a simple, static prototype of this app layout in jQTouch?

So far what I've tried to do is to copy the code from the Kitchen Sink > Tabs 2 demo. This gets me my bottom row of buttons that I was missing from jQTouch - awesome! And it's pretty easy from there to stick in HTML and such. But now what I want to do is to get each of the panels filled with lists containing a title, summary, timestamp, and maybe a thumbnail image, and to have the behavior work such that when I tap on the list item I get a full view of the content in question - article, image, video, audio. But I suspect this approach is a dead end and need a better way to handle the layers of content. Again, I'm just looking to do a static list at this point and then will worry about connecting the lists to data sources next - really basic stuff in other words. Any advice?

Slightly modified (mangled?) code from the Tabs 2 example so far:

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
        var tabpanel = new Ext.TabPanel({
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            fullscreen: true,
            ui: 'dark',
            animation: {
                type: 'cardslide',
                cover: true
            },
            
            defaults: {
                scroll: 'vertical'
            },
            items: [{
                title: 'Newsroom',
                html: '<h1>Sandia ECIS Prototype!</h1><p>Welcome to the iPhone app prototype. This is to prove functionality and learn how to develop iOS apps for Sandia using Sandias developer license with Apple.</p><p>Docking tabs to the bottom will automatically change their style. The tabs below are type="light", though the standard type is dark. Badges (like the 4 &amp; Long title below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
                iconCls: 'info',
                cls: 'card1'
            }, {
                title: 'Photos',
                html: '<h1>Photos Card</h1>',
                iconCls: 'favorites',
                cls: 'card2',
                // badgeText: '4'
            }, {
                title: 'Video',
                id: 'tab3',
                html: '<h1>Video Card</h1>',
                // badgeText: 'Text can go here too, but it will be cut off if it is too long.',
                cls: 'card3',
                iconCls: 'download'
            }, {
                title: 'Audio',
                html: '<h1>Audio Card</h1>',
                cls: 'card4',
                iconCls: 'settings'
            }]
        });
    }
});

Again be sure to examine the attached wireframe PDF to see what I'm going for. Thanks!

Thanks!
Joe

[Brente]

I'm also looking for a simpler JQT style cards navigating into cards sample. Coming from a JQT semantic html code style, Sencha needs some more basic samples so that people can ease into it a bit. Very interested in this.

Does anyone have a simple example? Looking at other peoples minified websites done in Sencha Touch are unreadable and unhelpful.

[evant]

@OP: Here's a simple example of what you're looking for. I'd probably implement these things as classes to better manage the interaction, but this should get you started.

Ext.setup({
    onReady: function(){
        
        Ext.regModel('Story', {
            fields: ['title', 'desc', 'stamp', 'short']
        });
        
        var main = new Ext.TabPanel({
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }  
            },
            fullscreen: true,
            items: [{
                title: 'Newsroom',
                layout: 'card',
                itemId: 'news',
                iconCls: 'info',
                items: [{
                    itemId: 'news1',
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    items: [{
                        html: 'Banner',
                        height: 100
                    },{
                        flex: 1,
                        xtype: 'list',
                        store: new Ext.data.Store({
                            model: 'Story',
                            data: [{
                                title: 'Story 1',
                                short: 'Desc 1',
                                stamp: 'Stamp 1',
                                desc: 'Long 1'
                            },{
                                title: 'Story 2',
                                short: 'Desc 2',
                                stamp: 'Stamp 2',
                                desc: 'Long 1'
                            },{
                                title: 'Story 3',
                                short: 'Desc 3',
                                stamp: 'Stamp 3',
                                desc: 'Long 1'
                            }]
                        }),
                        itemSelector: '.story',
                        tpl: '<tpl for="."><div class="story"><b>{title}</b><br />{short}<br />{stamp}</div></tpl>',
                        listeners: {
                            itemtap: function(list, index){
                                var rec = list.store.getAt(index),
                                    ct = list.ownerCt.ownerCt,
                                    news2 = ct.getComponent('news2');
                                    
                                ct.setCard(news2);
                                news2.update(rec.data);
                            }
                        }
                    }]
                },{
                    itemId: 'news2',
                    dockedItems: [{
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [{
                            text: 'Back',
                            handler: function(btn){
                                var ct = btn.ownerCt.ownerCt.ownerCt;
                                ct.setCard(0);
                            }
                        }]
                    }],
                    tpl: '{title} - {stamp}<br />{short}<br /><br /><p>{desc}</p>'
                }]
            }, {
                title: 'Photos',
                layout: 'card',
                itemId: 'photos',
                iconCls: 'user'
            }]
        });
    }
});

[sanbeiji]

Thank you Evan - I'll give this a spin!

[TransformD]

I would LOVE to see an example or tutorial on how to port (rather than an abstract chunk of code) a jQTouch style interface to Sencha, including titlebar and toolbar. So far, this is a bit over my head, but I'm working on it. A proper tutorial would go a long way.

Michael

PS - My jQT app on the iPhone uses a huge amount of cards, so each li element on the main screen was linking to local html files using jQT's built-in ajax loader to load those cards. I would love to see that as well. The above example seems to imply loading all the cards at runtime... I think that would crash Safari in my case. There are a few hundred cards with lots of content.

[aconran]

I gave a talk on Monday at Mobile 2.0 on jQTouch and Sencha Touch illustrating the difference between the two approaches and why you'd use one over the other. I'd be interesting in hearing your experiences porting a jQTouch app to Sencha Touch or vice versa.

The above example seems to imply loading all the cards at runtime... I think that would crash Safari in my case. There are a few hundred cards with lots of content.

Quite the opposite, you are loading each card on demand rather than having them up front.

[gabrielstuff]

Quite the opposite, you are loading each card on demand rather than having them up front.

Yes, kind of best practice, right ? should pin up.
Well, the pdf attached to this post is very intersting. We are currently building that kind of App this the same behavior.
I will post it in few days in the examples and showcase section

Thank you !

[jmdesp]

I gave a talk on Monday at Mobile 2.0 on jQTouch and Sencha Touch illustrating the difference between the two approaches and why you'd use one over the other

There's a video of that ?

Separate point : The attached Wireframe is using a lot the 'native iPhone look', that jQtouch includes, but Sencha Touch doesn't at the moment. I'd feel stupid having to cut/paste to ST some of the jQtouch graphic elements.

[Brente]

I'd love to see video of that too. I'm simply not grokking the Sencha Touch approach yet. I saw one good recent screencasts regarding layout, and that was great. But you guys need more of them to help bridge people over to your stuff.

I have a fully functional JQT app that I exactly need to port over. But think it's gonna take a while just learning what is going on and why.

If there's a video of this JQT/Sencha Touch talk, please post the link.
Thank you.