Announcement Announcement Module
Collapse
No announcement yet.
Using Spring / DWR Revers Ajax functionality to display dynamic changes to table data Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • Using Spring / DWR Revers Ajax functionality to display dynamic changes to table data

    In my current Spring/JSF project I need integrate a method to push server side updates (Preferably as they happen) to the web based GUI to be displayed to the clients.

    So to get started with things, I am working on this small application to get a feel of how DWR works.Basically, I've developed two variations to implement the server side push.

    In the first approach, when the "find button" is pressed the back end updates are properly displayed.This makes a calls the findInstrumentSymbols() method in the InstrumentManager and returns the output as a List<Instrument> Objects throught DWR.

    In the second approach I attempted to implement the reverse ajax approach suggested in the DWR webs site.(http://directwebremoting.org/dwr-dem...opleTable.html)

    How can make this functionality available as the default functionality every time a page loads without having to specifically activate it through a button?

    In this implementation I was unable to return the output as a List<Instrument> Objects through DWR as in the first approach and had to be sent as a string array.I see that the new results are not populated properly as in the first approach and it tends to looses the new data when the "Disable button" is pressed.How can this required reverse server push functionality be properly achived using DWR?

    I have listed the code fragments below.I Would really appreciate any pointers on getting the revers Ajax functionality to operational.

    I have used polling as as described in earlier DWR releases.What method would be most ideal to implement reverse Ajax functionality if switching to DWR3 is the way forward ?

    **Web.xml**
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <web-app id="WebApp_ID" version="2.5"
    	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    
    	<display-name>AdminConsole</display-name>
    	<context-param>
    		<param-name>contextConfigLocation</param-name>
    		<param-value>/WEB-INF/application-context.xml
            /WEB-INF/application-security-context.xml</param-value>
    	</context-param>
    
    	<listener>
    		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    	</listener>
    
    	<servlet>
    		<display-name>DWR Servlet</display-name>
    		<servlet-name>dwr-invoker</servlet-name>
    		<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
    		<init-param>
    			<param-name>debug</param-name>
    			<param-value>true</param-value>
    		</init-param>
    		<init-param>
    			<param-name>activeReverseAjaxEnabled</param-name>
    			<param-value>true</param-value>
    		</init-param>
    		<init-param>
    			<param-name>org.directwebremoting.extend.ServerLoadMonitor</param-name>
    			<param-value>org.directwebremoting.impl.PollingServerLoadMonitor</param-value>
    		</init-param>
    		<init-param>
    			<param-name>timeToNextPoll</param-name>
    			<param-value>5000</param-value>
    		</init-param>
    		<load-on-startup>1</load-on-startup>
    	</servlet>
    	<servlet-mapping>
    		<servlet-name>dwr-invoker</servlet-name>
    		<url-pattern>/dwr/*</url-pattern>
    	</servlet-mapping>
    	.......
    </web-app>
    **DWR.XML**

    Code:
     <?xml version="1.0" encoding="UTF-8"?>
        <DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://directwebremoting.org/schema/dwr30.dtd">
        
        <dwr>
          <allow>
            <convert converter="bean" match="com.stocktrade.admin.entity.*"/>
            <create creator="spring" javascript="InstrumentManager">
              <param name="beanName" value="instrumentManager"/>
            </create>   
          </allow>
        </dwr>
    **application-context.xml**

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
        <beans xmlns="http://www.springframework.org/schema/beans"
        	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
        	xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
        	xmlns:jee="http://www.springframework.org/schema/jee" xmlns:p="http://www.springframework.org/schema/p"
        	xmlns:dwr="http://www.directwebremoting.org/schema/spring-dwr"
        	xsi:schemaLocation="http://www.springframework.org/schema/beans
               http://www.springframework.org/schema/beans/spring-beans.xsd
               http://www.springframework.org/schema/context
               http://www.springframework.org/schema/context/spring- context.xsd                       
               http://www.directwebremoting.org/schema/spring-dwr
               http://www.directwebremoting.org/schema/spring-dwr-3.0.xsd">
        
               .....
        
        	<!-- bean for Instrument class -->
        	<bean id="instrumentManager"  class="com.stocktrade.admin.instrument.InstrumentManagerImpl">
        		<property name="instrumentDAO" ref="instrumentDAO"></property>
        		<property name="userManager" ref="userManager"></property>
        		<property name="accountManager" ref="accountManager"></property>
        		<property name="portfolioManager" ref="portfolioManager"></property>
        	</bean>
         
              ......
        </beans>
    (Please refer to comment for more relavant code regarding this problem)
    Last edited by section8; Jan 25th, 2012, 12:29 AM.

  • #2
    More: Spring / DWR Revers Ajax functionality to display dynamic changes to table data

    (Given below is the rest of the code related to the above problem.)

    **InstrumentManagerImpl Class**

    Code:
    package com.xxxxx.admin.instrument;
       
        import java.math.BigDecimal;
        import java.util.List;
        import java.util.ArrayList;
        import java.util.Collection;
       
        import com.xxxxx.admin.account.AccountManager;
        import com.xxxxx.admin.dao.InstrumentDAO;
        import com.xxxxx.admin.entity.Instrument;
        import com.xxxxx.admin.entity.Account;
        import com.xxxxx.admin.entity.Portfolio;
        import com.xxxxx.admin.entity.Users;
        import com.xxxxx.admin.portfolio.PortfolioManager;
        import com.xxxxx.admin.user.UserManager;
       
        import org.directwebremoting.WebContext;
        import org.directwebremoting.WebContextFactory;
        import org.directwebremoting.util.Logger;
        import org.directwebremoting.ScriptSession;
        import org.directwebremoting.ScriptSessionFilter;
        import org.directwebremoting.Browser;
        import org.directwebremoting.ServerContextFactory;
        import org.directwebremoting.impl.DaemonThreadFactory;
        import org.directwebremoting.ui.dwr.Util;
       
        import java.util.concurrent.ScheduledThreadPoolExecutor;
        import java.util.concurrent.TimeUnit;
       
        public class InstrumentManagerImpl implements InstrumentManager,Runnable {
       
        private final static String SCRIPT_SESSION_ATTR = "SCRIPT_SESSION_ATTR";
        public static String getScriptSessionAttr() {
        return SCRIPT_SESSION_ATTR;
        }
       
        private UserManager userManager;
        public UserManager getUserManager() {
        return userManager;
        }
        public void setUserManager(UserManager userManager) {
        this.userManager = userManager;
        }
       
        private InstrumentDAO instrumentDAO;
        public InstrumentDAO getInstrumentDAO() {
        return instrumentDAO;
        }
        public void setInstrumentDAO(InstrumentDAO instrumentDAO) {
        this.instrumentDAO = instrumentDAO;
        }
       
        public InstrumentManagerImpl() {
        ScheduledThreadPoolExecutor executor = new ScheduledThreadPoolExecutor(1, new DaemonThreadFactory());
                executor.scheduleAtFixedRate(this, 1, 10, TimeUnit.SECONDS);
        }
       
        /* (non-Javadoc)
             * @see java.lang.Runnable#run()
             */
            @Override
            public void run()
            {
            SendInstrumentSymbols();
            }
                /*used to implement the find() functionality*/
        @Override
        public List<Instrument> findInstrumentSymbols() {
        return instrumentDAO.findInstrumentSymbols();
        }
        /*used to implement the reverse ajax functionality*/
        public void SendInstrumentSymbols() {
        // Get the current page.
                String page = ServerContextFactory.get().getContextPath() + "/faces/gehan.xhtml";
                // Create a new AttributeScriptSessionFilter which will look for an attribute on the ScriptSession
                ScriptSessionFilter attributeFilter = new AttributeScriptSessionFilter(SCRIPT_SESSION_ATTR);
                // Update the page, filters ScriptSessions using attributeFilter.  If the SCRIPT_SESSION_ATTR
                // has not been set on the ScriptSession the page in question will not receive updates.
                Browser.withPageFiltered(page, attributeFilter, new Runnable()
                {
                    @Override
                    public void run()
                    {
                    List<Instrument> InstrumentList = new ArrayList<Instrument>();
                    InstrumentList = findInstrumentSymbols() ;
                    //Creates a multi-dimensional array, containing a row and the rows column data.
                    //Added the First Element of the List returned - values are converted to String
                        String[][] data = {
                            {InstrumentList.get(0).getSymbolName().toString(), InstrumentList.get(0).getName().toString(), String.valueOf(InstrumentList.get(0).getQuantity()), InstrumentList.get(0).getPrice().toString(), String.valueOf(InstrumentList.get(0).getMarketMakingLimit())}};
       
           // Call DWR's util which adds rows into a table.peopleTable is the id of the tbody and
              data contains the row/column data.  
                        Util.addRows("MMTable", data);
                    }
                });
        }
       
        /**
        * Called from the client to add an attribute on the ScriptSession.  This
        * attribute will be used so that only pages (ScriptSessions) that have
        * set this attribute will be updated.
        */
            public void addAttributeToScriptSession() {
                ScriptSession scriptSession = WebContextFactory.get().getScriptSession();
                scriptSession.setAttribute(SCRIPT_SESSION_ATTR, true);
            }
           
        /**
        * Called from the client to remove an attribute from the ScriptSession.  
        * When called from a client that client will no longer receive updates
                 * (unless addAttributeToScriptSession)
        * is called again.
        */
            public void removeAttributeToScriptSession() {
                ScriptSession scriptSession = WebContextFactory.get().getScriptSession();
                scriptSession.removeAttribute(SCRIPT_SESSION_ATTR);
            }
           
           /**
             * This is the ScriptSessionFilter that will be used to filter out all ScriptSessions
             * unless they contain the SCRIPT_SESSION_ATTR attribute.
             */
            protected class AttributeScriptSessionFilter implements ScriptSessionFilter
            {
            private final String attributeName;
           
            public AttributeScriptSessionFilter(String attributeName)
                {
                    this.attributeName = attributeName;
                }
       
                @Override
                public boolean match(ScriptSession session)
                {
                    Object check = session.getAttribute(attributeName);
                    return (check != null && check.equals(Boolean.TRUE));
                }
            }
           
        }

    Comment


    • #3
      More: Spring / DWR Revers Ajax functionality to display dynamic changes to table data

      updateMMStatus.xhtml

      HTML Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" 
            xmlns:ui="http://java.sun.com/jsf/facelets" 
            xmlns:h="http://java.sun.com/jsf/html" 
            xmlns:f="http://java.sun.com/jsf/core">
            <h:head>
            <title>Reverse Ajax Table Update</title>
            <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
            <script type='text/javascript' src='/AdminConsole/dwr/engine.js'></script>
            <script type='text/javascript' src='/AdminConsole/dwr/util.js'></script>
            <script type='text/javascript' src='/AdminConsole/dwr/interface/InstrumentManager.js'></script>
      
            <script type="text/javascript">
                  window.onload=function()
                  {
                                  // Initiate reverse ajax polling
                      dwr.engine.setActiveReverseAjax(true);
                                  // Called when a call and all retry attempts fail 
                      dwr.engine.setErrorHandler(errorHandler);
                                  // Optional function to call when the reverse ajax status changes (e.g. online to offline) 
                      dwr.engine.setPollStatusHandler(updatePollStatus);
                                  // Optional - We are online right now!  Until DWR determines we are not! 
                      updatePollStatus(true);
                                  //Optional - When the page is unloaded, remove this ScriptSession. 
                      dwr.engine.setNotifyServerOnPageUnload(true);
                                  // Initialize the tabs for this display         
                      Tabs.init('tabList', 'tabContents'); 
                                  // Make a call to the server to begin updating the table!   
                      InstrumentManager.SendInstrumentSymbols();
                                  //Make a remote call to the server to add an attribute onto the ScriptSession 
                                  //which will be used in determining what pages receive updates! 
                      addAttributeToScriptSession(); 
                  }
                      function errorHandler(message, ex) {
                          dwr.util.setValue("error", "Cannot connect to server. Initializing retry logic.", {escapeHtml:false});
                          setTimeout(function() { dwr.util.setValue("error", ""); }, 5000)
                      }
      
                      function updatePollStatus(pollStatus) {
                          dwr.util.setValue("pollStatus", pollStatus ? "Online" : "Offline", {escapeHtml:false});
                      }
      
                      // Make a remote call to add an attribute on the ScriptSession.
                      // Only clients that have this attribute set will receive updates.    
                      function addAttributeToScriptSession() {
                          InstrumentManager.addAttributeToScriptSession();
                      }
      
                      // Make a remote call to remove an attribute from the ScriptSession.
                      // Clients that call this will no longer receive updates (unless addAttributeToScriptSession is called again).        
                      function removeAttributeToScriptSession() {
                          InstrumentManager.removeAttributeToScriptSession();
                      }
            </script>
          /*Java script to updated instrument table related changes when the "find" Button is pressed */
          function find() {
            <script type="text/javascript">
            function find() {
              InstrumentManager.findInstrumentSymbols();
            }
          </script>
          </h:head>
          <h:body onload="dwr.engine.setActiveReverseAjax(true);">
      
          <input type="button" value="Enable page updates" onclick="addAttributeToScriptSession();"/>
          <input type="button" value="Disable page updates" onclick="removeAttributeToScriptSession();"/>
      
              <h:messages styleClass="error" />
              <div class="data_header">Current Symbols in the System</div>
              <h:dataTable rowClasses="odd,even" id="MMTable"
                  value="#{updateMMStausBean.instrumentsList}" var="insList"
                  rendered="#{updateMMStausBean.instrumentsList != null}"
                  headerClass="tableHeader" styleClass="table">
                  <h:column>
                      <f:facet name="header">
                          <h:outputText value="Symbol" />
                      </f:facet>
                      <div align="left">
                          <h:outputText value="#{insList.symbolName}" />
                      </div>
                  </h:column>
                  <h:column>
                      <f:facet name="header">
                          <h:outputText value="Name" />
                      </f:facet>
                      <div align="left">
                          <h:outputText value="#{insList.name}" />
                      </div>
                  </h:column>
                  <h:column>
                      <f:facet name="header">
                          <h:outputText value="Quantity" />
                      </f:facet>
                      <div align="center">
                          <h:outputText value="#{insList.quantity}" />
                      </div>
                  </h:column>
                  <h:column>
                      <f:facet name="header">
                          <h:outputText value="Price($)" />
                      </f:facet>
                      <div align="right">
                          <h:outputText value="#{insList.price}" />
                      </div>
                  </h:column>
                  <h:column>
                      <f:facet name="header">
                          <h:outputText value="Limit" />
                      </f:facet>
                      <div align="right">
                          <h:outputText value="#{insList.mMLimit}" />
                      </div>
                  </h:column>
              </h:dataTable>
      
              <div id="container">    
          <h:panelGrid columns="2" cellpadding="6">
          <h:form id="authenticate1">
          <h:commandButton action="#{updateMMStausBean.ActivateAllMMOrdrerOn()}" value="Activate all Orders">
          </h:commandButton>
          </h:form>
      
          <h:form id="authenticate2">
          <h:commandButton action="#{updateMMStausBean.DeactivateAllMMOrdrerOn()}" value="Deactivate all Orders">
          </h:commandButton>
          </h:form>
      
              /*  Java script to updated instrument table related changes when the "find" Button is pressed */
          <h:form id="authenticate3">
          <h:commandButton value="Find" onclick="find()">
          </h:commandButton>
          </h:form>  
          </h:panelGrid>
      </div>
      
            </h:body>
      
      </html>

      Comment


      • #4
        Updates:Using Spring / DWR Revers Ajax functionality to display dynamic changes

        Sorted out one part of the problem but I have had no luck withe the passing a java List using server side push as yet.

        I have been studying the peopleTable demo application and similar applications based on the web to come up with a solution for my problem. Most of these applications pass String or String arrays.

        >>> This makes a calls the findInstrumentSymbols() method in the InstrumentManager and returns the output as a Object through DWR.

        One thing I noticed in DWR was that when a DWR java script is called linked to a GUI operation such as Onclick (E.g.find button), Object or collection type data can be passed smoothly.I believe a JSON object is returned on this instance.

        The findInstuments methods JSON output as displayed in the program and can be easily integrated into the web page.

        >>>But when you try to pass data to the webpage using server push operation,I was unable to return the output as before through DWR as in the first approach.It had to be sent as a string array.(based on the information I came across)

        I based the server Push sample code on a variation of the peopleTable demo.It seems DWR provides little facility to send Collection or Objects to the GUI, though it is easily available when linked to a user operation where JSON objects are passed.(It seems to offers support for String /String arrays and String based collections or that is what I gathered :|)

        The related code sample related to this description is listed below.(for the full code refer the original post)

        Code:
        public void SendInstrumentSymbols() {
        		// Get the current page.
                String page = ServerContextFactory.get().getContextPath() + "/faces/Instruments.xhtml";
                // Create a new AttributeScriptSessionFilter which will look for an attribute on the ScriptSession
                ScriptSessionFilter attributeFilter = new AttributeScriptSessionFilter(SCRIPT_SESSION_ATTR);
                // Update the page, filters ScriptSessions using attributeFilter.  If the SCRIPT_SESSION_ATTR
                // has not been set on the ScriptSession the page in question will not receive updates.
                Collection sessions = ServerContextFactory.get().getScriptSessionsByPage(page);
                Browser.withPageFiltered(page, attributeFilter, new Runnable()
                {
                   @Override
                    public void run()
                    {
                        // Creates a new Person bean.
                    	List<Instrument> InstrumentList = new ArrayList<Instrument>();
                    	InstrumentList = findInstrumentSymbols() ;
        
        		/*This seems to be the trick y part - Sending the List<Instrument> to the server end.*/
        
                        // Creates a multi-dimensional array, containing a row and the rows column data.
                        String[][] data = {
                            {InstrumentList.get(0).getSymbolName().toString(), InstrumentList.get(0).getName().toString(), String.valueOf(InstrumentList.get(0).getQuantity()), InstrumentList.get(0).getPrice().toString(), String.valueOf(InstrumentList.get(0).getMarketMakingLimit()),String.valueOf(InstrumentList.get(0).isBuyOrderMarketMakingOn()),String.valueOf(InstrumentList.get(0).isSellOrderMarketMakingOn())}};
                        // Call DWR's util which adds rows into a table.  instrumentTable is the id of the tbody and 
                        // data contains the row/column data.  
                        Util.addRows("instrumentTable", data);
                    }
                };
        	}
        When you try to alter this functionality to support other data types such List<Instrument> I couldn't find a Clean method as in the first instance where a Json object was passed - which was effortless.(I hope i haven't missed out something obvious :| )

        Is there a better method that could be devised to transfer objects when using server push using this method ? (Resorting to String conversion seemed to be the method suggested in most of the web examples.)

        Can data be exchanged as JSON Objects when server side push is performed without a GUI trigger to meet the same requirements?
        Is so what additional configuration changes and Updates would be required?

        If a JSON based data transfer is possible for server side Push, could you please give some heads up on some document, site or sample code that may be of any assistance.Any such lead would be much appreciated for I have found nothing concrete on this topic

        Thanks In Advance

        Comment

        Working...
        X