FiftyOneDegreesServlet - Version 3
This guide will cover how to setup a NetBeans webapp project and how to integrate 51Degrees into it. This guide uses the NetBeans IDE and Xampp to install TomCat server. This software is free, and can be found at:
This guide will not cover how to install or troubleshoot the above packages, you should instead see the relevant site. If you haven't already, you should also download and extract the 51Degrees Java API .
- Create a new web application project in NetBeans:
- Set your project name as 'website' and set the project location to the website directory of the 51Degrees Java archive:
- Set the server and ensure context path is set to /website. Click Next to move on.
- The WebPages and WEB-INF locations should already be in the right place, no further action is needed.
- You will now need to add some external JARs to your project. The 51Degrees download features both the source and prebuilt JARs that you'll find in the 'dist' folder. Right click the website in the project menu then select Properties. Go to the Libraries menu and select "Add JAR/Folder. You will need to add the three 51Degrees JARs from the dist directory and four other JARs from the lib/webapp directory:
- Your website should now be ready to run. Start the project and you'll see the project's index page:
web.xml Reference
A working web.xml is included in the website directory of 51Degrees Java distribution and does not need to be manually added for the above process. This is only for reference:
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xmlns:web= "http://java.sun.com/xml/ns/javaee" xmlns= "http://java.sun.com/xml/ns/javaee" xsi:schemaLocation= "http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id= "WebApp_ID" version= "3.0" > <display-name> 51Degrees </display-name> <context-param> <param-name> MEMORY_MODE </param-name> <param-value> false </param-value> </context-param> <listener> <listener-class> fiftyone.mobile.detection.webapp.FiftyOneDegreesListener </listener-class> </listener> <servlet> <description> 51Degrees Servlet </description> <display-name> FiftyOneDegreesServlet </display-name> <servlet-name> FiftyOneDegreesServlet </servlet-name> <servlet-class> fiftyone.mobile.detection.webapp.FiftyOneDegreesServlet </servlet-class> </servlet> <servlet-mapping> <servlet-name> FiftyOneDegreesServlet </servlet-name> <url-pattern> /51D/* </url-pattern> </servlet-mapping> <listener> <listener-class> fiftyone.mobile.detection.webapp.Listener </listener-class> </listener> </web-app>
Creating Mobile Aware Web Applications with Java & Netbeans - Version 2
The 51Degrees Java download features both the core detection a project that integrates the detector into a Servlet. This guide will cover how to setup a NetBeans webapp project and how to integrate 51Degrees into it.
This guide uses the NetBeans IDE and Xampp to install TomCat server. This software is free, and can be found at:
This guide will not cover how to install or troubleshoot the above packages, you should instead see the relevant site. If you haven't already, you should also download and extract the 51Degrees Java API . For this tutorial make sure you obtain the version 2 of Java detector archive as version 3 is different and covered in the tutorial above.
- Create a new web application project in NetBeans:
- Set your project name as 51DExample and choose your save location:
- Set the server and ensure context path is set to /51DExample. In this example, I have used xampp as stated in the introduction:
- You will now need to add the JARs to your solution. The 51Degrees download features both the source and prebuilt JARs that you'll find in the 'dist' folder. Within the left hand solution explorer, right click the libraries folder and select "Add JAR/Folder":
- Select 51Degrees.mobi.detection.jar from its position in your file system:
- Create a new Java source package:
- We now need to setup the listener in the web.xml
The Listener is called from the 51DServlet and is responsible for synchronising data device data between requests. You should add 'fiftyone.mobile.detection.webapp.Listener' as a listener class.
Your web.xml should look something like this:
<web-app 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_3_0.xsd" version= "3.0" > <session-config> <session-timeout> 30 </session-timeout> </session-config> <listener> <!-- 51Degrees.mobi Listener --> <listener-class> fiftyone.mobile.detection.webapp.Listener </listener-class> </listener> </web-app>
- It is now time to create your servlet. The easiest way to get 51Degrees is to extend FiftyOneServlet. If you do not wish to use FiftyOneServlet see Web Applications with a Standard Servlet
package fiftyone . mobile . servlet ; import fiftyone.mobile.detection.Components ; import fiftyone.mobile.detection.Property ; import fiftyone.mobile.detection.Value ; import fiftyone.mobile.detection.matchers.Result ; import fiftyone.mobile.detection.webapp.FiftyOneServlet ; import java.io.IOException ; import java.io.PrintWriter ; import java.util.ArrayList ; import java.util.TreeMap ; import javax.servlet.ServletException ; import javax.servlet.annotation.WebServlet ; import javax.servlet.http.HttpServletRequest ; import javax.servlet.http.HttpServletResponse ; /** * * A simple Servlet example, using 51Degrees.mobi to detect incoming devices. * * @author 51Degrees.mobi * @version 2.1.16.1 */ @WebServlet ( name = "51D" , urlPatterns = { "/" }) public class Servlet extends FiftyOneServlet {
- Properties and provider can then be accessed through the super class:
/** * Processes requests for both HTTP * <code>GET</code> and * <code>POST</code> methods. * * @param request servlet request * @param response servlet response * @throws ServletException if a servlet-specific error occurs * @throws IOException if an I/O error occurs */ protected void processRequest ( HttpServletRequest request ,
HttpServletResponse response ) throws ServletException , IOException { // Get individual properties as strings String IsMobile = super . getProperty ( request , "IsMobile" ); // or get the entire provider Provider provider = super . getProvider ();
A working example of a servlet extending FiftyOneServlet that uses properties can be seen in Servlet.java in the Examples project.
Next Steps
Now that you are able to get device information it is up to you what to do with it. One possible use is to manipulate html. This is useful for debugging, but can also be used to, for instance, change the CSS for a particular device:
protected void processRequest ( HttpServletRequest request , HttpServletResponse response ) throws ServletException , IOException { // Get individual properties as strings String IsMobile = super . getProperty ( request , "IsMobile" ); response . setContentType ( "text/html;charset=UTF-8" ); PrintWriter out = response . getWriter (); // Start writing HTML code out . println ( "<html>" ); out . println ( "<head>" ); out . println ( "<title>My Mobile Page</title>" ); if ( IsMobile == "True" ) { out . println ( "<link rel=\"stylesheet\" type=\"text/css\"href=\"Mobile.css\">" ); } else { out . println ( "<link rel=\"stylesheet\" type=\"text/css\" href=\"Desktop.css\">" ); } // the rest of your output... out . close () }
The following code will redirect a mobile device:
protected void processRequest ( HttpServletRequest request , HttpServletResponse response ) throws ServletException , IOException { // Get individual properties as strings String IsMobile = super . getProperty ( request , "IsMobile" ); if ( IsMobile == "True" ) response . sendRedirect ( "MobilePage.jsp" )
Further Reading
-
Standard Servlet
Explains how to use device detection with a standard HTTPServlet that can not inherit from 51Degrees.mobi base classes
-
Extending-BaseServlet
This page describes how to enable device detection by extending 51Degrees BaseServlet instead of the usual HttpServlet.
-
Web.xml
Explains how to set up your web.xml for 51Degrees.
