1. #1
    Ext User hcristea's Avatar
    Join Date
    Mar 2007
    Posts
    31
    Vote Rating
    0
    hcristea is on a distinguished road

      0  

    Default Application architecture like API Viewer (2.0)

    Application architecture like API Viewer (2.0)


    Hello everybody,
    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.

    I've be studying Marketo architecture a little bit and I've noticed that when a new tab is created the response for the ajax included data (json), raw html, and some javascript.

    What would be the best practice to implement something like this?
    1. no iframes for the tabs
    2. tab content is dynamic, i.e. there could be grids forms, and distinct business logic in each tab
    3. custom javascript code for business logic to be loaded on demand
    4. response to ajax calls to contain raw HTML and script, then script to be evaluated and to work with the new added raw html

  2. #2
    Sencha User
    Join Date
    Jul 2007
    Location
    Italy
    Posts
    134
    Vote Rating
    0
    fermo111 is on a distinguished road

      0  

    Default


    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:
    Code:
    <style>/* optional style */</style>
    <div class="fragment" id="fragment-whatever">
       <!-- some stuff here -->
    </div>
    I do not load any javascript code with the fragment. All my code is loaded at startup time in a single javascript file. Every HTML fragment has an associated javascript class. After the fragment is loaded into the tab, I instantiate an object of the associated class. The configuration structure maintains the url of the fragment, the layout of the panel to create, the javascript class name associated, and other informations.

    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.

    Luca

  3. #3
    Sencha User fangzhouxing's Avatar
    Join Date
    Mar 2007
    Posts
    466
    Vote Rating
    1
    fangzhouxing is on a distinguished road

      0  

    Default


    All my code is loaded at startup time in a single javascript file
    That will slow down dev process! I loaded all js files on demand in my project.

  4. #4
    Ext User
    Join Date
    Nov 2007
    Posts
    42
    Vote Rating
    0
    Ephicient is on a distinguished road

      0  

    Default


    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?

  5. #5
    Ext User hcristea's Avatar
    Join Date
    Mar 2007
    Posts
    31
    Vote Rating
    0
    hcristea is on a distinguished road

      0  

    Default Possible solution

    Possible solution


    Quote Originally Posted by fermo111 View Post
    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.
    Hi Luca.
    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.

    So this is in principle the basics. The List and the detail can be abstractized into javascript classes. So for 15 BO we could have 30 javascript classes like: ProductList, ProductDetail. For the list and details classes we could implement 2 base classes like BaseList, BaseDetails, and those 2 classes can be inherited by the particular classes. The code in the base classes could contain all the main logic and in the derived classes probably the code can be resumed to just a simple configuration description.

    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.

  6. #6
    Ext User hcristea's Avatar
    Join Date
    Mar 2007
    Posts
    31
    Vote Rating
    0
    hcristea is on a distinguished road

      0  

    Default


    Quote Originally Posted by fangzhouxing View Post
    That will slow down dev process! I loaded all js files on demand in my project.
    How could this slow down the dev process (as in Development Process)? Do you mean slowing down the loading of the pages?

    How do you load the js on demand?

  7. #7
    Sencha User
    Join Date
    Jul 2007
    Location
    Italy
    Posts
    134
    Vote Rating
    0
    fermo111 is on a distinguished road

      0  

    Default


    Quote Originally Posted by Ephicient View Post
    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?
    Actually I do both. Depending on the fragment that is asked, this can be loaded in its own tab or in a "global" tab (replacing the previous content). This is specified in the config structure.

  8. #8
    Sencha User
    Join Date
    Jul 2007
    Location
    Italy
    Posts
    134
    Vote Rating
    0
    fermo111 is on a distinguished road

      0  

    Default


    Quote Originally Posted by fangzhouxing View Post
    That will slow down dev process! I loaded all js files on demand in my project.
    As hcristea pointed out, this depends on the size of the application, or better, the relative size compared to Ext itself. It also depends if this is a long lived application and the network speed. And then it also depends how often you clean your cache .

    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.

  9. #9
    Sencha User
    Join Date
    Jul 2007
    Location
    Italy
    Posts
    134
    Vote Rating
    0
    fermo111 is on a distinguished road

      0  

    Default


    Quote Originally Posted by hcristea View Post
    How do you load the js on demand?
    You use the "scripts: true" configuration parameter in the load() method of the panel.
    It evaluates (using javascript eval() function) the javascript code inside the loaded fragment.

  10. #10
    Ext User hcristea's Avatar
    Join Date
    Mar 2007
    Posts
    31
    Vote Rating
    0
    hcristea is on a distinguished road

      0  

    Default


    Quote Originally Posted by fermo111 View Post
    Anyway, I have users with a 56K modem connection that do not complain. I have no idea how it is possible.
    Probably they dont complain because the scripts are loaded from cache. I have an online web application using ext-js 0.33 and nobody compains about the speed. It takes awhile when i change the version and the scrips reload from the server but after that they are cached and the loading time is actually pretty fast.

    Of course my users are regular people, not some web dev freaks who clean their cache every 5 minutes

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi