Control a Web Page Look and Feel Flow/Logic with JSON

Discussions

Web tier: servlets, JSP, Web frameworks: Control a Web Page Look and Feel Flow/Logic with JSON

  1. Many a times I've had to create a UI which has a logical flow e.g. show section-1 if option-1 is selected, show section-2 if option-2 is selected etc. This logic could be complex based on dynamic content including AJAX. For such scenarios JSON can prove a very useful tool.

    Static Data - If the data being used to make these decision loops is available at the time of page creation, this logic can be wiredin through simple javascript

    var whatif = document.getElementById("Option").value;
    if (whatif == 'option-1') {
      document.getElementById("Section-1").style.display='table';
    } else {
      document.getElementById("Section-1").style.display='none';
    }

    Dynamic Data (JSP) - What about dynamic data? JSP pages which are generated on the fly that have data refreshed from the database... the java script can work if it is working on the data fetched at the time the page is generated. Another class of applications using dynamic data are AJAX based calls...

    Dynamic Data (using DoJo) - The most popular approach with DoJo, and the one I am referring to here, uses DoJo to replace the innerHTML of a HTML element.

            dojo.byId(idname).innerHTML='Loading....';
              var ajaxArgs = {
                   url: urlstrdojo+"&getBy="+getBy,
                   error: function(type, data, evt){ .. },
                   load: function(type, data, evt){
                       dojo.byId(idname).innerHTML=data;
                   },
                   mimetype: "text/plain", preventCache: true
              };
            dojo.io.bind(ajaxArgs);

    Scenario - In a typical MVC application, the DoJo could be called to render a part of the web page. The resulting JSP returned by the action class would have an HTML which will replace a screen element/tag e.g. a Div. What about a case where you want to want to act on the data which was put in this element?
          > Page.onLoad does not work since we're using DoJo
          > We could force a script to run but that again is clumsy

    Example - The user selects a hyperlink on the screen. The hyperlink has a DoJo call to fetch some data. Then based on the data fetched, the user should be alerted or warned and some fields pre-populated. If you return a JSP with HTML in DoJo you can update a table but not get more fine grained than that - elegantly!

    Using JSON - I think this is where JSON comes to the rescue. The DoJo call can return a JSON object which can be parsed very elegantly..

    In your JSP
    <%
       response.setContentType("application/json");
       response.setHeader("Content-Disposition", "inline");
    %>

    {"option1":"<%=Var1%>", "option2":"<%=Var2%>", "aError":"<%=errorStr%>",  "aWarn":"<%=warnStr%>"}


    In your DoJo script
     load: function(type, data, evt){
       var jsonData = JSON.parse(data);
       var aError = jsonData.aError;
       var aWarn = jsonData.aWarn;
       
        // Return on Error etc
        if (aError != '' ) { alert (ERROR); return; }
       
        // Else other processing
    }


    Note that JSON can be included through JSON or DoJo libraries.

    Conclusion
    Having the JSON data allows trapping an error/warning and branching in script as requried. One can return finer data and update a part of DOM also.

    Threaded Messages (2)

  2. Why not GSON[ Go to top ]

    I am very new with advance java. Sorry if my question is not up to the mark. But why are you using Json if we are having Gson also?

  3. Why not GSON[ Go to top ]

    I am new with advance java. Sorry if my question is not up to the marks. Why are you using Json if we are having Gson also?