Menu

Controller for Multiple Device Support

Developers
2006-09-22
2013-04-23
  • Shamsul Bahrin Abd Mutalib

    The portal should support multiple device.  For now, I limit the devices
    into two types - the desktop computers (including laptop) and mobile handphones.

    Therefore, there are two controllers (as servlets) that represent these two
    devices.  I've created to servlets as follows:

    mecca.portal.DesktopController
    mecca.portal.MobileController

    Where both extends the mecca.portal.velocity.VServlet

    There are one more Controller Servlet that will act as an interceptor,
    and I simply named it mecca.portal.InterceptorServlet.

    The InterceptorServlet contains userAgent checking, and will do the
    requestdispatcher forward method, to forward the URL to the appropriate
    controller servlet based on the type of the device that fetching the portal's page.

    All these servlets are defined in the web.xml as follows:

        <servlet>
            <servlet-name>interceptor</servlet-name>
            <servlet-class>mecca.portal.InterceptorServlet</servlet-class>
            <init-param>
            <param-name>properties</param-name>
            <param-value>/velocity.properties</param-value>
            </init-param>       
        </servlet>   
       
        <servlet>
            <servlet-name>desktop</servlet-name>
            <servlet-class>mecca.portal.DesktopController</servlet-class>
            <init-param>
            <param-name>properties</param-name>
            <param-value>/velocity.properties</param-value>
            </init-param>       
        </servlet>    
       
        <servlet>
            <servlet-name>mobile</servlet-name>
            <servlet-class>mecca.portal.MobileController</servlet-class>
            <init-param>
            <param-name>properties</param-name>
            <param-value>/velocity.properties</param-value>
            </init-param>       
        </servlet>    

      <servlet-mapping>
        <servlet-name>interceptor</servlet-name>
        <url-pattern>/c/*</url-pattern>
      </servlet-mapping>  
     
      <servlet-mapping>
        <servlet-name>desktop</servlet-name>
        <url-pattern>/desktop/*</url-pattern>
      </servlet-mapping>  
     
      <servlet-mapping>
        <servlet-name>mobile</servlet-name>
        <url-pattern>/mobile/*</url-pattern>
      </servlet-mapping>   
     

     
    • Shamsul Bahrin Abd Mutalib

      The markup language to display content can be either WML or XHTML.  I have decided to use only XHTML for this development, for one good reason – it is more like HTML so our web master should be easy to catch up with the development.  Other reason is “XHTML MP (XHTML Mobile Profile) is the markup language of the most recent WAP 2.0 standard. It is a simplified version of XHTML used on the web. The major advantage of XHTML MP over WML is that XHTML MP supports the use of cascading style sheets, which enables the separation of the presentation from the content. “.

      Read the XHTML tutorial for Mobile here:

      http://www.developershome.com/wap/xhtmlmp/

       
    • Shamsul Bahrin Abd Mutalib

      We can use phone simulator to do testing for Mobile application.  I am using Openwave phone simulator, download it here:

      http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/

      Other phone simulator that we can try is from Nokia, here the url:

      http://www.forum.nokia.com/main/resources/technologies/browsing/nokia_mobile_internet_toolkit.html

       
    • Shamsul Bahrin Abd Mutalib

      An interface named DeviceHandler has been created in the package mecca.portal.handler.  Each named device must have it's own DeviceHandler object defined. 

      For example, if the device is a cell phone, which “MMP” is as part within the user agent's string, we can create a class named MMPHandler which implements the DeviceHandler interface, and write our codes in the process() method that is implemented from the interface.  In the process codes, a request dispatcher must be added at the end of the codes, which will forward the request to the appropriate controller servlet.

      To avoid hard coded, each device string and it's appropriate handler class is defined in the web.xml as <init-param> elements under the the Interceptor <servlet> elements.

      Example:

          <servlet>
              <servlet-name>interceptor</servlet-name>
              <servlet-class>mecca.portal.InterceptorServlet</servlet-class>
              <init-param>
                <param-name>MMP</param-name>
                <param-value>mecca.portal.handler.MMPHandler</param-value>
              </init-param>
              <init-param>
                <param-name>MIDP</param-name>
                <param-value>mecca.portal.handler.MIDPHandler</param-value>
              </init-param>
              <init-param>
                <param-name>DESKTOP</param-name>
                <param-value>mecca.portal.handler.DesktopHandler</param-value>
              </init-param>
              <init-param>
                <param-name>3G</param-name>
                <param-value>mecca.portal.handler.3GHandler</param-value>
              </init-param>                               
          </servlet>   

      As been said above, each device need to have it's own DeviceHandler object (but sharing can be done off course!).  Therefore, if you found a new device, for example, “NokiaBrowser”, then you can create a class named NokiaBroser device which implement the DeviceHandler, and write the codes in the process() method.  Then, put this new device definition as <init-param> within the <servlet> definition for interceptor servlet.

      <init-param>NokiaBrowser</init-param>
      <param-value>mecca.portal.handler.NokiaBrowserHandler</param-value>

      Restart the application context for this new addition to be initialized by the servlet.  Now, when you browse the portal using you Nokia browser device, it will forward to the controller servlet that you have defined in the process method of the NokiaBrowserHandler.

       

Log in to post a comment.