12 Dec 2007 4:09 AM #1
Application architecture like API Viewer (2.0)
Its been awhile since my last post on these forums. I'm raising a question to which i haven't found an answer on the forums yet.
Looking on the API viewer for the ext 2.0 i would like to know if there is a way to make the a web application using Ext to behave like the API viewer.
When I say "behave like the API viewer", i mean no use of iframes in the center region and the content of the tabs to be fetched using Ajax.
Inside the tabs I would like to have complex functionalities, like grids, forms, other (inner) layouts, all with their particular business logic. In a way something similar with the API viewer, or yahoo mail beta but a but more complex.
What would be the best practice to implement something like this?
- no iframes for the tabs
- tab content is dynamic, i.e. there could be grids forms, and distinct business logic in each tab
- response to ajax calls to contain raw HTML and script, then script to be evaluated and to work with the new added raw html
12 Dec 2007 3:29 PM #2
This is what I do.
I have a tree on the left region to be used as a menu. The tree is built based on a JSON object. Each node has some configuration info to be used to decide what to do when the user clicks it (actually is a key to index a configuration structure). The normal behaviour in response to a tree click is adding a tab to the center region and loading an HTML fragment into it. The fragment is always like this:
<style>/* optional style */</style> <div class="fragment" id="fragment-whatever"> <!-- some stuff here --> </div>
One thing you may want to consider is a naming scheme for your tag ids and CSS selectors so that different fragment do not interfere with each other. Sometime I get a reference to a DOM element in the fragment selecting by class name, but usually I assign to every fragment a unique prefix that I use for all the ids of that fragment. This however has to be tweaked a little if you have multiple copies of the same fragment loaded in different tabs at the same time.
Anyway the Ext 2.0 API application, has already much of this code.
13 Dec 2007 1:00 AM #4
Depending on the number of links in your left nav, couldn't your main page become quite large by maintaining each link's content in DIVs on the main page? What about autoLoad'ing a separate HTML file into the content panel?
13 Dec 2007 1:20 AM #5
For a medium size project i think your approach is the best one so far. However I believe that its possible to avoid sending raw HTML code and script in the ajax response. of course this depends on the particularities of the project but in principle this can be avoided.
Lets presume we have a medium size project and in this project we have to manage the Northwind business. For those who dont know, Northwind is a demo db which comes with the Sql server. In Northwing we have to manage Products, Customers, Order, Shippers, Suppliers, Employees etc. In total we can have around 15 business objects.
For each BO (Business Object) we have a List and Detail.
The List is basically a grid where all the objects of a certain type are listed. The grig could have a toolbar which could contain a filter and other controls.
The Detail is a form which can be used to add/edit the details of the BO.
The size of this custom code could not be so big, compared with the size of the Ext itself. So there can be no issue to load this code at the beginning.
The base classes could contain the html code as a template and when an entry in the left tree navigation is clicked then a new instance is created, initial data can be loaded after an ajax call. All you have to do is to manage intances of certain BOs.
13 Dec 2007 1:22 AM #6
13 Dec 2007 2:31 AM #7
13 Dec 2007 2:40 AM #8
Anyway, I have users with a 56K modem connection that do not complain. I have no idea how it is possible. Maybe nowadays all intenet contents is so bloated that they are accustomed to be waiting.
13 Dec 2007 2:47 AM #9
13 Dec 2007 3:10 AM #10
Of course my users are regular people, not some web dev freaks who clean their cache every 5 minutes