PDA

View Full Version : high-level app architecture one page vs. many pages



DaveC426913
15 Jul 2010, 11:18 AM
So, now that I've got one page/screen built, I want to add a second page/screen. What is best practice? Do I actually link to a new html and rebuild all my .js files? Or do I stay within index.html and destroy and rebuild?

Here is the structure I've got built so far (using the "start a whole new page" method):

index.html:


<script type="text/javascript" src="src/ext-touch-debug.js"></script>
<script type="text/javascript" src="myApp.js"></script>
<script type="text/javascript" src="myApp.Keypad.js"></script>
<script type="text/javascript" src="src/button.js"></script>
<script type="text/javascript" src="main.js"></script>


main.js:


Ext.setup({
onReady: function() {
var searchPage = new Ext.Panel({
layout: 'anchor',
items: [{
xtype: 'myapp_keyPad'
}]
});
}
});


myApp.js:


var myApp = {
};

myApp.Keypad.js:


myApp.Keypad = Ext.extend(Ext.Panel, {
entryArray: [],
defaultEntryText: "Please enter...",
initComponent: function() {
...
{
xtype: 'button',
text: 'page2',
handler: this.linkHandler,
cls: 'linkButton',
location: 'page2.html'
}
...
linkHandler: function(button,event){
location.href=button.location;
}
...

meyerovb
22 Jul 2010, 2:59 PM
From the examples I've seen, the preferred method seems to be to maintain a single html page and break individual components (index, main, keypad, etc) into seperate js files (you can use a script combiner to consolidate them in a build step). That way the user gets seemless animated 'page transitions', data is maintained within it's card without having to re-populate from any kind of view state, and the user doesn't have to wait for anything more to download. Remember, sencha is a lazy load system, so even though you're adding a bunch of buttons to a card, they aren't necessarily rendered until that card comes into play in a flow. Until then, it lives as just another javascript object with no overhead.