Results 1 to 5 of 5

Thread: Dynamic Javascript Class Load and Instantiation

  1. #1
    Sencha User
    Join Date
    Apr 2010
    Location
    Cupertino, Ca
    Posts
    247

    Default Dynamic Javascript Class Load and Instantiation

    I have a proof of concept idea want to bounce off you guys.

    The problem:
    • I don't want to add cards to my application until a user has authenticated.
    • I want the cards I add to be dumb and not know about their container


    The proposed solution:
    • after an authentication event fetch a list of files of format 'package1/packageN/Class.js'
    • add script tags to head with the source being the package strings in the list
    • Make the packages namespaces in the application
    • Dynamically traverse the package list and instantiate an object of MyClass.js
    • add the new obj to the containing panel


    Relevant snippet:
    Code:
    // These would be in there own files
    Class1 = Ext.extend(Ext.Panel,{});
    Class2 = Ext.extend(Ext.Panel,{});
    Class3 = Ext.extend(Ext.Panel,{});
    ...
    ClassN = Ext.extend(Ext.Panel,{});
    ...
    
    
    
    Ext.ns(
        'app',
        'app.package1',
        'app.packageN',
    );
    
    Panel = new Ext.Panel({
    ...
        layout:'card',
        listeners:{
            authenticated:function(){
                var secure_pages = [ // TODO HACK FIXME put this behind an authenticated request
                    'package/Class1.js',
                    'package/Class2.js',
                     'package/Class3.js',
                     'package/Class4.js',
                     'package/ClassN.js',
                    
                ];
                var head = Ext.DomQuery.selectNode('head');
                Ext.each(secure_pages,function(item,index,items){
                    Ext.DomHelper.append(
                        head,
                        {
                            tag:'script',
                            type:'text/javascript',
                            src:settings.MEDIA_URL+'js/' + item
                        }
                    );
                    var properties = item.split('/');
                    var cls = properties.pop();
                    properties.push(cls.replace('.js',''));
                    var page = new Ext.functional.reduce(
                        function(x,y){return x[y];},
                        test,
                        properties
                    );
                    this.add(page);
                },this);
        }
    })
    note* I added Ext.functional to reference this library
    http://osteele.com/sources/javascript/functional/

    Thoughts? Any issues I should consider with a technique like this? Are there examples of similar code?

    Thanks!

  2. #2
    Sencha User
    Join Date
    Apr 2010
    Location
    Cupertino, Ca
    Posts
    247

    Default

    So I had to wait to create the pages until I could be sure I got the response back. I also ran into what I think is a DomHelper bug.
    To workaround these issues I've applied the following
    Code:
              var normalizePath=function(path){
                    var properties = path.split('/');
                    var cls = properties.pop();
                    properties.push(cls.replace('.js',''));
                    return properties;
                }
                var evaluateAsObj = function(properties){
                    return Ext.functional.reduce(function(x,y){return x[y];},Namespace,properties);
                };
                var createPage = function(item){
                    item = normalizePath(item);
                    var page = evaluateAsObj(item);
                    page = new page();
                    page = obj.add(page);
                    if(item.pop() == nextPage){
                        obj.setActiveItem(page);
                        obj.getTabBar().setHeight(56);
                        obj.doComponentLayout();
                        
                    }// objectify and initialize
               }
                var importJS = function(item,index,items){
                      //Create a 'script' element 
                      var scrptE = document.createElement("script");
                      // Set it's 'type' attribute  
                      scrptE.setAttribute("type", "text/javascript");
                      // Set it's 'language' attribute
                      scrptE.setAttribute("language", "JavaScript");
                      // Set it's 'src' attribute
                      scrptE.setAttribute("src", settings.MEDIA_URL+'js/' + item);
                      
                      scrptE.onload = function(){
                          createPage(item);
                      };
                      // Now add this new element to the head tag
                      document.getElementsByTagName("head")[0].appendChild(scrptE);
                      
                      // I don't know why ext code doesn't work
                      // Causes DOM Exception 9
                      /** var head = Ext.DomQuery.selectNode('head');
                      var script = Ext.DomHelper.append(head,{
                          tag:'script',
                          type:'text/javascript',
                          src:settings.MEDIA_URL+'js/' + item
                      });
                      script.addEvent('onload')
                      script.addListener('onload', function(){
                          createPage(item);
                      });*/
                }
               
                Ext.each(secure_pages,importJS,this); // add script tags

  3. #3
    Sencha User
    Join Date
    Apr 2010
    Location
    Cupertino, Ca
    Posts
    247

    Default

    Accckkkk! when asyncronisity attacks! Looks like I'll need to follow best practices anyway and build the dev files into a one document package. Otherwise I cannot predict the order in which I will get them. Combining this with a page factory for that package should reduce my complexity. But it was an interesting excercise.

    Time to look at the sencha build process and jsbuilder2

  4. #4
    Sencha Premium User
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    693

    Default

    did you look in head.js i loads js files for you and have callbacks when files are loaded

  5. #5
    Sencha User
    Join Date
    Apr 2010
    Location
    Cupertino, Ca
    Posts
    247

    Default

    Thanks Mr. Sunshine. Very interesting, especially the part about parallel loading being faster and iphone cache size limits.

    I originally did a little google-fu and found several options. I thought they might be overkill, but I guess not. Clearly a non trivial problem. I think I'll do a little more comparison.

    http://requirejs.org/ and http://berklee.github.com/nbl/ also look good.

Similar Threads

  1. Dynamic load class
    By cybervirax in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 21 Jan 2011, 12:19 AM
  2. Lazily Instantiation to decrease load on application
    By SabaSarwat in forum Ext 3.x: Help & Discussion
    Replies: 7
    Last Post: 12 Oct 2010, 1:54 AM
  3. Dynamically load javascript library and native javascript calls
    By okwei in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 4 Nov 2008, 3:43 PM
  4. Dynamic JavaScript Load
    By CrazyFluger in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 22 May 2008, 9:24 AM
  5. Replies: 15
    Last Post: 1 May 2007, 2:14 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •