Loading classes on the fly from server ( widgets style)

[gostbuster]

Hi there,

I'm quite a new French user of sencha touch 2 and really appreciate this tool.

I need to develop an application which works with widgets (lets all it MyApp). Let me explain :

My application has a list of services. Each service is actually a little application (like a widget).

Services are on the web server, but I wan't my app to be stand alone.

I can't have written my services classes (models, views, controllers) in my application folders because services have to be developped and managed separately (that's mean I would like to be able to add or remove services whenever I wan't)

I imagined a solution like that :

MyApp/
            view/
                  Widget.js
            controller/
                  Widget.js

When I initialize my Widget js, I launch an Ajax request (CORS), like that :

 Ext.Ajax.request({
            url: 'http://myserver/myscript.php',
        useDefaultXhrHeader: false,
           
              success: function(response) {
              //myscript.php only contains javascript so I simply eval it
               eval(response.responseText);
              
                // I create a page with A class 'ScriptPage' written in myscript.php and evaluated in ajax success
                 var page=Ext.create('Test.view.ScriptPage');
               //I had it on my viewport,
                Ext.getCmp('viewPort').add(page);
            
            }  
        });

The aim is to load new classes from ajax request and then work with theses new classes.
Now let's have a look on what is myscript.php on server side.


myscript.php only contains javascript. I use smarty to generate the all code with fetching files like this :

{* ------ MODELS -------- *}
{fetch file='templates/mobile/model/Widget.js'}


{* ------ CONTROLLERS -------- *}
{fetch file='templates/mobile/controller/Widget.js'}


{* ------ VIEW -------- *}
{fetch file='templates/mobile/view/ScriptPage.js'}

As a result of this, this is only javascript with classes code displayed.
I wan't to keep my code well organized so I used the same folder organisation.

Unfortunately, when I try to create a Test.view.ScriptPage instance, there is an error :

Uncaught Error: [Ext.Loader] Failed loading 'app/view/ScriptPage.js',


That is for use, this file doesn't exists on the application side, it's on the server side, but the class Test.view.ScriptPage should exists cause I got it with my ajax request and evaluated it....

Well that was just to illustrate what I'm trying to do.

What experts suggest ? My need is to be able to load classes with ajax request and use them.

Thanks in advance.
Please don't hesitate to ask for more precision if needed.

Regards

[mitchellsimoens]

So you return this:

{fetch file='templates/mobile/view/ScriptPage.js'}

or is it actually the JavaScript for that class?

[gostbuster]

Thank you for replying,

Actually, myscript.php on server side includes my classes written on server side. The result of this all the code of my classes like this :

Ext.define('Myapp.controller.widgetController',{
[.......]
});

Ext.define('Myapp.view.widgetPanel',{
[.......]
});

Then, my app receive with ajax response all this javascript and simply do an

eval(response.responseText);

Then I would just like to create an instance of 'Myapp.view.WidgetPanel' and display it,

Unfortunately, the new classes just got from ajax are unknow by the app which try to get the js files on the app side instead of using the classes just evaluated.

Do you understand better of shall I maybe make a schematic of this ?

[gostbuster]

Hello,

I'm still workin on it, and maybe it would need more explanation as I assume this is maybe not a normal behaviour.

Well you certainly all know netvibes or iGoogle, they are portals with widgets. Let's consider each widget as a standalone application. (This is actually the true, each widget is independant from the "portal").

Well I would like to do the same with my sencha app.
You'll find the schematic of what I'm wishing to do.

I have on the first side my Sencha App loaded on my device (It could be a phonegap app, so all the app files are on the phone).

On the second side, I have an Apache server with folders, each folder is a widget. In fact, I'm able to add futures widgets without loading a new version of my sencha device app.

What I would like to do is to load widgets classes (this is js code), from an ajax request, and after evaluating this, be able to use it.
I organized my widgets with view/controller/model to keep the MVC organization.

The result of my ajax request would be :

Ext.define('Widget1.controller.MyWidget1Controller'),{
/** here all my class***/
})
//then the views, and the models, 
Ext.define('Widget1.model.MyWidget1Model'),{
/** here all my class***/
})
Ext.define('Widget1.view.MyWidget1View'),{
/** here all my class***/
})
etc....

I eval this code, so then I can create a MyWidget1View view, add it to my viewport and display it....and also be able to trigger events written in MyWidget1Controller.....

What do Sencha Experts think of this ? Thank you in advance !



schemasencha.png

[gostbuster]

Any ideas ? This does not seem to inspirate you....
Don't hesitate to ask me if there is something you don't understand