PDA

View Full Version : Which Application design sould I choose?



pestilencia
10 Apr 2010, 4:33 AM
Hello Guys,

First of all, I should say I'm very well familiar with using Ext as basic as :


Ext.onReady({
// Do something here
});

and have started to playing around with OO designing with Ext as :


var myPanel = Ext.extend(Ext.Panel, {
initComponent:function() {
// Do something here
}
});

Now, for an Application which I'm faced with, I've modified Ext Desktop sample a little bit to meet my criteria. The application has almost 120 different forms (Ext.Window). The first approach came to my mind is:


Ext.onReady({
...
var win = new Ext.Window({
autoLoad: {
url: 'http://localhost:8080/myapp/foo/bar/page?ln=en_US,
scripts: true,
scope: this
},
...
})
...
});

which the foo/bar/page is something like this:


<%@ page contentType="text/html; charset=utf-8" language="java" import="java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page import="javax.naming.Context"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%@ taglib prefix="i18n" uri="i18nDictionary"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var modulePanel = new Ext.Panel({
frame: true,
layout: 'border',
renderTo: 'modulePanel',
...

items: [{
...
}]
});
</script>
<script type="text/javascript">
Ext.Erpc.JSONLanguage = '${ui.i18n}';
Ext.Erpc.JSONLanguage = Ext.Erpc.JSONLanguage.replace(/APOSTCHAR/g, "\'");
</script>
</head>

<body>
<div id="modulePanel"></div>
</body>
</html>


I should say that, the application is multi-lingual, and on every request we generate the Language Items for the corresponding page.

But there's another approach available too:


Ext.onReady({
...
var module = new Ext.Erpc.Foo.Bar();
var win = new Ext.Window({
items: {
xtype: 'foobar'
},
...
})
...
});

where for each page


Ext.namespace('Ext.Erpc.Foo.Bar');

Ext.Erpc.Foo.Bar = Ext.extend(Ext.Panel, {
initComponent:function() {
// Do something here
}
...
});
Ext.reg('foobar', Ext.Erpc.Foo.Bar);


Now, the question is which one should I stick with? Or even none?
Which one suits better for use if we intend to have and Air version too?

Regards,
Khosrow

Animal
10 Apr 2010, 11:47 PM
Go for the pure JSON version.

I strongly deprecate the old autoLoad functionality which uses regexps to pull scripts out of HTML, and then throws innerHTML into a Panel.

You need to be loading pure JSON through Ajax, and then adding that to a Container. The JSON could contain an xtype to set its created type, but also (as long as you don't use strict JSON) it could contain embedded methods to perform that component's functionality.

pestilencia
12 Apr 2010, 9:31 AM
Hello Animal,
Thank you for your comment.

I've done some working and here it is:



...
createWindow: function(config) {
...
if ( !win ) {
this.scriptLoader('http://localhost:8080/myapp/script/' + config.url);
win = desktop.createWindow({
...
items: {
xtype: config.xtype
},
...
});
}
},

scriptLoader: function(url) {
var id = url;

if ( !document.getElementById(id) ) {
var content = ; // Getting Javascript content through AJAX

var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");

script.text = content;

script.setAttribute("type", "text/javascript");
script.setAttribute("id", id);
head.appendChild(script);
}

return true;
}


Is this what you meant?
Am I on the right track?

Regards,
Khosrow

Animal
12 Apr 2010, 12:21 PM
Well, you could load script through a script tag. I'd just do it through Ajax and use eval()

pestilencia
15 Apr 2010, 1:51 PM
Well, you could load script through a script tag. I'd just do it through Ajax and use eval()

Yes, I've tried Ajax-loading at first, but what about using it inside Ext.Air Application? As far as I've googled about it I can not use eval() within Air.