Hybrid View

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    24
    Vote Rating
    1
    rvelasquez is on a distinguished road

      1  

    Default Problem with Sencha Profiles

    Problem with Sencha Profiles


    Hi,

    I'm trying to wrap my head around Sencha profiles and I'm finding it a little awkward to use. I would like to have a different layout between Android and iPhone (different position of tab bar). Here are the two profile specific views:

    Code:
    Ext.define("myapp.view.iphone.MyView", {
        extend: 'Ext.TabPanel',
        xtype: 'myview',
    
    
    	config: {
    		tabBarPosition: 'bottom',
                    .........
    });
    Code:
    Ext.define("myapp.view.android.MyView", {
        extend: 'Ext.TabPanel',
        xtype: 'myview',
    
    
    	config: {
    		tabBarPosition: 'top',
                    .........
    });
    Then in my profiles I'm loading the profile specific view:

    Code:
    Ext.define('myapp.profile.Android', {
        extend: 'Ext.app.Profile',
    
    
        config: {
            name: 'Android',
            views: [
    'myapp.view.android.MyView'
            ]
        },
        ..........
    });
    
    Code:
    Ext.define('myapp.profile.iPhone', {
        extend: 'Ext.app.Profile',
    
    
        config: {
            name: 'iPhone',
            views: [
    'myapp.view.iphone.MyView'
            ]
        },
        ..........
    });
    

    Finally in my main application view:

    Code:
    Ext.define("myapp.view.Main", {
        extend: 'Ext.Container',
        xtype: 'mainview',
        config: {
    		layout: 'card',
    		items: [
    			{ xtype: 'someotherview' },
    			{ xtype: 'myview' }
    		]
        }
    });
    What I was hoping to happen is that Sencha would only load the views of the first profile that returns true when isActive is called. Then there would be only one view with the xtype "myview". That way when the Main view loads it will load the myview that's specific to the device I'm launching. However it looks like I can't use xtype that way. It looks like it loads all the views (both Android specific and iPhone). So when it tries to resolve the xtype "myview" it doesn't get the right one. It seems really awkward if I have to create a profile specific version of the Main view just so I can get this work. How should I go about getting this to work?

  2. #2
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    The framework does indeed load all of the specified views, even if the profile isActive function did not match. The reason for this is that if we don't do it then we don't have a universal app - you'd have to build an Android version of the app and an iPhone version of the app, then figure out which to serve to which devices, presumably somewhere on the server. Instead, we create a universal version of the app that can bootstrap itself on the device and figure out what to do.

    The main downside of this approach is exactly what you've just pointed out - you can't overload the xtypes in this manner. It's something I'd like us to come up with a better solution around in the next minor release or two, and would welcome ideas and feedback.
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    24
    Vote Rating
    1
    rvelasquez is on a distinguished road

      0  

    Default


    So is the recommended approach to create different versions of all controllers/views etc for each profile? That could be really messy if you are dealing with more than two profiles. I'm pretty new to Sencha and I'm only using the JSON config style to configure my views/controllers. It seems like there must be a way to do this dynamically like a factory that creates different views based on the profile that is currently active. What's the proper way to construct objects dynamically instead of through the JSON style construction.

  4. #4
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    At the moment I'd just say to avoid using the same xtype when you have profile-specific views. That may mean you end up with xtypes like 'overviewios' and 'overviewandroid'. You could factory this if you want to keep your code cleaner - should be simple enough but that's not built into the framework at the moment.
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    24
    Vote Rating
    1
    rvelasquez is on a distinguished road

      0  

    Default


    Yeah ... that's what I was trying to avoid because I have controllers that ref the view so if I create a profile specific view I also need to create a profile specific controllers for each controller that references that view. I realize I can use inheritance to reduce code duplication but overall it's just awkward. Using Sencha has been awesome but the experience of using profiles has been inconsistent with how the amazing the rest of Sencha is.

  6. #6
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Yup, definitely something we want to improve
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  7. #7
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    Quote Originally Posted by edspencer View Post
    The main downside of this approach is exactly what you've just pointed out - you can't overload the xtypes in this manner. It's something I'd like us to come up with a better solution around in the next minor release or two, and would welcome ideas and feedback.
    Any progress on this, Ed? This is probably one of the roughest areas of the API design to me. You can do marvelous things designing your interface in separate files as object configs. But then when you go to use multiple profiles, there's simply a big gap in the road that you have to build your own bridge to. Every time.

    It seems like Controllers already work the way we'd expect them to. The API knows to prune off the inactive profile-specific controllers and treat them as "dead" code. I really wish it'd do the same thing for inactive profile-specific views (and I suppose models and stores).

    As you noted, all the code has to be in the app. But the API doesn't have to pay attention to all of it if it ties in with the profiles at all levels.

  8. #8
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Hey jep, I actually left Sencha a few months back so not totally clued in on the current state of things... I see 2.1 just went GA so maybe there's something in there.

    Agreed that it's the worst part of MVC at the moment - it's probably the only part of that stack that I would have liked to have fixed before I moved on.
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  9. #9
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    Ah, I see, Ed. Well, thanks for the update. I'm poking around in the guts of the code right now to see if there's anything I can hack in to prune out the unused profiles. But I'm sure you're even more aware than I am of how nitty-gritty that code can get!

  10. #10
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    Well, I never could figure out a way to fix it at the framework level. The code is just too complicated and seems like it would take some major work. So here's my hack:

    Code:
    //<debug>
    Ext.Loader.setPath({
        'Ext': 'touch/src',
        'default': 'app'
    });
    //</debug>
    
    var profiles;
    
    if (window.location.search.indexOf('profile1') !== -1) {
        profiles = ['profile1'];
    }
    else {
        profiles = ['profile2'];
    }
    
    Ext.application({
        profiles: profiles,
    
        name: 'TestApp',
    I basically do all my testing for which profile(s) should be loaded right there in the app.js. For this simple test I used URL params but you'd do similar by using Ext.os.is('iPad') or whatever.