PDA

View Full Version : How to load entire application after completion of some configuration activities



livinglegends
13 Sep 2010, 9:35 PM
Hi,

In my application, some configuration data are stored in Database.

so, when application start to load, I fire query to retrieve data from the database and based on the retrieved values, it should load application like TreePanel, GridPanel etc.

Problem is:

I fire query to database using AJAX call and it takes some time say 5-6 seconds to retrieve data. So, as request goes to server, it start to configure application say GridPanel, TreePanel etc. So, application load wrong UI as it doesn't find configuration details as AJAX call has not returned any value.

I have multiple js files in application which configure application.

So, How to configure application in such a way that, after retrieving data from database it start to load and configure application and till that it shows some progress bar.

Hope, I could clearly my problem.

Waiting for reply and suggestion.

Thanks
LivingLegends

Condor
14 Sep 2010, 12:12 AM
You will have to move all your application building logic into the success handler of the AJAX call for the configuration data.

You can't show a progress bar, because you don't know how long loading is going to take. You should use an 'waiting' animated gif instead.

livinglegends
15 Sep 2010, 12:25 AM
You will have to move all your application building logic into the success handler of the AJAX call for the configuration data.

You can't show a progress bar, because you don't know how long loading is going to take. You should use an 'waiting' animated gif instead.

Thanks for reply.

Actually my logic to building application are scattered in different different js files. So, how to write the code which load remaining js files after success handler of AJAX call of configuration data which is again in one js file?

Condor
15 Sep 2010, 12:39 AM
Use a messagebus to communicate, e.g.

File 1:
MessageBus = new Ext.util.Observable();
MessageBus.addEvents('init');

File 2:
MessageBus.on('init', function(){
// application initialization
});

File 3:
MessageBus.on('init', function(){
// more application initialization
});

File 4:
Ext.onReady(function(){
...
Ext.Ajax.request({
url: '...',
success: function(response){
// handle response
MessageBus.fireEvent('init');
}
});
});

livinglegends
15 Sep 2010, 12:43 AM
Use a messagebus to communicate, e.g.

File 1:
MessageBus = new Ext.util.Observable();
MessageBus.addEvents('init');

File 2:
MessageBus.on('init', function(){
// application initialization
});

File 3:
MessageBus.on('init', function(){
// more application initialization
});

File 4:
Ext.onReady(function(){
...
Ext.Ajax.request({
url: '...',
success: function(response){
// handle response
MessageBus.fireEvent('init');
}
});
});

Can you explain me how it works?
I am not getting it.

Does it mean that I need to write logic of each js files in MessageBus.on('init') function?

Condor
15 Sep 2010, 12:47 AM
Correct. I assume that you are now using Ext.onReady(fn) in your files? Replace that with MessageBus.on('init', fn) (except the last one that does the request).

livinglegends
15 Sep 2010, 12:49 AM
But Ext.onReady is only in one file. In other files, I am not using it.

Condor
15 Sep 2010, 12:56 AM
OK, so you were calling all your application initialization from one Ext.onReady handler?

Then why did you have trouble moving all that to the success handler of your Ajax request?

livinglegends
15 Sep 2010, 12:57 AM
But how to do it? How to I call other js files after completion of this request?
plz give me some code hint.

livinglegends
15 Sep 2010, 1:44 AM
But how to do it? How to I call other js files after completion of this request?
plz give me some code hint.

Hi Condor... waiting for ur reply.

nsolsen
15 Sep 2010, 2:02 AM
But how to do it? How to I call other js files after completion of this request?
plz give me some code hint.

It difficult to help you in a very precise way, when you give so little detail about your problem.

You say that you have problems "calling other js files".. Sounds like you have the init code in global scope in those js files, and that you are relying on <script> tags to have it executed? If so, then you need to stuff your init code in some functions, that you can call in the AJAX success handler inside Ext.onReady().

Only guessing here, since you provide no details..

livinglegends
15 Sep 2010, 2:03 AM
Let me explain the actual flow.

1. When I open application, one login page will be there.
2. When user enter correct user name password, it will open one page with GridPanel in it.
3. User select any row and click on submit.
4. Now, on submit request I am opening one jsp page and this jsp page contains list of all js files including the js file which does request to get configuration information.
5. Problem is, when jsp page start to load, it also start to load all js files.
6. Config js file make ajax reqeust but before getting response of ajax request other js files start to load and not wait for the response of config reqeust.
7. So, I want to load all js files after completion of config ajax request.

Hope, now I clear with my flow.

steffenk
15 Sep 2010, 2:05 AM
there is no "one" way, it depends on your application.

I usually have something like

myNamespace.App = {
init: function() {
storeXY.load({callback: this.doNext, scope: this});
storeYZ.load({callback: this.doNext2, scope: this});
}
}

and in Ext.onReady i call my init function. It may be tricky, eg i have to load about 10 stores until i can build the complete interface, as data is dependent, so i sometimes need to build some pseudo-synchronuous loading which doesn't look nice:

myNamespace.StoreLeft.load({
scope: this,
callback: function() {
myNamespace.StoreTop.load({
scope: this,
callback: function() {
myNamespace.StoreRight.load({
scope: this,
callback: this.buildSomething
});
}
});
}
});

livinglegends
26 Sep 2010, 9:04 PM
Hi,

I got the rid of the problem but application stop to work on IE and Chrome.

What I did:
1. I am calling only config.js file which read configuration data from the database (Using AJAX) and on success of it, I am adding javascripts to header part as show below.



var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'javascriptpath/javascript.js';
head.appendChilde(script);I am adding all the js files as per the below code in head tag.

So, it has started to work in FF but stopped in IE and Chrome.

What can be the problem?

livinglegends
27 Sep 2010, 12:28 AM
No one?

ajohan75
27 Sep 2010, 1:27 AM
nice one condor. this looks like something i could use in the future. thanks for the tip.