1. #1
    Ext User
    Join Date
    Aug 2010
    Posts
    3
    Vote Rating
    0
    sanbeiji is on a distinguished road

      0  

    Default Getting Started: Architectural Approach

    Getting Started: Architectural Approach


    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:

    Code:
    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
    Attached Files

  2. #2
    Ext User
    Join Date
    Aug 2010
    Posts
    3
    Vote Rating
    0
    Brente is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,054
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    @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.

    Code:
    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'
                }]
            });
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Ext User
    Join Date
    Aug 2010
    Posts
    3
    Vote Rating
    0
    sanbeiji is on a distinguished road

      0  

    Default


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

  5. #5
    Ext User
    Join Date
    Sep 2010
    Posts
    2
    Vote Rating
    0
    TransformD is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,413
    Vote Rating
    129
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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.

    Quote Originally Posted by TransformD View Post
    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  7. #7
    Sencha User
    Join Date
    Jul 2010
    Location
    Paris, France
    Posts
    257
    Vote Rating
    0
    gabrielstuff is on a distinguished road

      0  

    Default


    Quote Originally Posted by aconran View Post
    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 !

  8. #8
    Ext User
    Join Date
    Aug 2010
    Posts
    22
    Vote Rating
    0
    jmdesp is on a distinguished road

      0  

    Default


    Quote Originally Posted by aconran View Post
    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.

  9. #9
    Ext User
    Join Date
    Aug 2010
    Posts
    3
    Vote Rating
    0
    Brente is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. Architectural question
    By bkraut in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 22 Jul 2009, 12:39 AM
  2. How should I approach this?
    By catmd2b in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 12 Oct 2008, 8:03 PM
  3. What is the best approach?
    By egobits in forum Community Discussion
    Replies: 1
    Last Post: 24 Jan 2008, 8:21 AM

Thread Participants: 6

Tags for this Thread