Click here to close now.




















Welcome!

Java IoT Authors: Samuel Scott, Dana Gardner, Elizabeth White, Liz McMillan, SmartBear Blog

Related Topics: Java IoT, Linux Containers, Open Source Cloud, Eclipse

Java IoT: Tutorial

Using Ext JS, Servlets, JSON, MySQL and Tomcat on Fedora

A simple how to

Java Developer Magazine on Ulitzer

These days the popularity of Ext JS (a JavaScript library) is gaining momentum. One of the most popular widgets within Ext JS is the DataGrid. The reason - displaying data from a database is one of the most common tasks of a web application. "Out of the box" the DataGrid has functionality (for instance, ascending or descending sorting and reordering of columns by dragging it) that otherwise would require some effort from developers. Another attractive feature of the DataGrid is that it can use JSON (JavaScript Object Notation), which allows you to reduce traffic in comparison with full Swing HTML or XML formatting on the server.

Examples from Ext JS site [1] and Ext JS books such as Learning Ext JS.Packt Publishing [2] are focused on PHP in conjunction with Ext JS.

However, what if your organization already uses servlets for web applications?

Googling the problem will lead to a number of "spotted" solutions in which key details are often missed. Besides, there is no "out of the box" JSON support in Java. Sure, you can do it manually but why reinvent the wheel?

This article will show you how to build a servlet-based web application with Ext JS from scratch, and will save you a lot of time on configuration issues that are usually hard to fix.

Example: Phone Book
The following describes how a phone book will be used within this article as it is usually easy to learn by example.

Suppose you need to create a web application to read a phone book for your organization.

As your clients and/or customers can be located all over the world, you need to have a "country" column within a database table in which the phone book is stored. Also suppose it's required to have a First Name, Last Name, Middle Name, Phone Number, Type of phone (home, office, etc.), Description (in here some useful information about a phone can be placed). Foreign names and phones (as dialed from the U.S.) can be long, so it's reasonable to store said information in lengthy enough fields.

For production, the possible length of fields should be researched carefully, but for our example let's assume it will be 250 characters. Of course, you will be able to easily change it if necessary. All names, companies and phones used in this example are entirely fictional. Any possible coincident with reality is by accident only. Data for the example will be stored in a table called phone1 of the MySQL phonebook database.

MySQL and Fedora
MySQL is a popular free open source database for Internet applications. At the time of writing the possible future of MySQL within Oracle was widely discussed (please see for example [3]). However, consider a big installation base and the fact that MySQL packages can be found for most Linux distributions, it will be safe to assume that MySQL will be used at least in the short term.

As an example of Linux, the popular Fedora distribution will be used within the article. With minimal effort, results can be reproduced in other distributions such as Ubuntu.

Configuration in which methods from this article were developed includes a virtual machine with Fedora on a Windows host. Please see my articles [4, 5] on how to use it effectively.

The installation procedure for MySQL on Fedora with yum is described in [6]. If you don't want to start MySQL each time you start Fedora, you may want to create a launcher with the following command:

service mysqld start

and place it, for instance, on your GNOME desktop.

Another useful script given below will allow you to easily start the mysql command within your terminal window

mysql -u <yourUserName> -p<yourPassword>

in the above script <yourUserName> and <yourPassword> should be substituted with your user name and password, respectively. Please note that there is a blank between -u and <yourUserName> but there is no blank between -p and <yourPassword>. You may want to place the script under some directory from your path. If you want a GUI tool for MySQL, it is recommended that you use Oracle SQL developer [7] rather than native MySQL GUI tools. The reason is the flexibility of Oracle SQL developer (for instance you can use it both with MySQL 5.x and Oracle 11g). Download the latest release of Oracle SQL developer  from [7]. At the time of writing Linux RPM of the release is sqldeveloper-1.5.4.59.40-1.noarch.rpm.

Installation can be performed by running the following command:

rpm -Uhv sqldeveloper-1.5.4.59.40-1.noarch.rpm

within the Fedora terminal window.

After that SQL Developer can be found under Applications | Programming of the GNOME menu. From here SQL Developer launchers can be added to the desktop or panel by right-clicking and making a corresponding choice.

The only additional thing that you will need to use is the JDBC driver for MySQL. At the time of writing it is recommended you select from the Oracle SQL developer menu Help | Check for updates, click Next. Than select Third-Party Extensions, click Next and select MySQL JDBC driver (assuming that your computer is connected to Internet). Please visit [7] for latest updates on Oracle SQL developer. Both mysql command, Oracle SQL developer and described below Ganymede Data Source Explorer can be used together as convenient.

Tomcat 6, MySQL and Dolphin
It is assumed within the article that Java SDK from Sun is used rather than the native Java that comes with Fedora. At the time of writing it was possible to use http://www.mjmwired.net/resources and select your Fedora release (say Fedora 10) for a "how to" on this subject. If this resource will not be available, you may want to Google for "Personal Fedora <your release number here> installation guide".

The easiest way to install Tomcat 6 on Fedora is to issue the following command within terminal window:

yum install tomcat6

The above command will install Tomcat 6 as a service. Assuming that you don't want to run Tomcat 6 each time you start Fedora, use the following commands within the terminal window. To start Tomcat 6 use:

service tomcat6 start

To stop Tomcat 6 use:

service tomcat6 stop

You may want to create launchers with these commands to conveniently start and stop Tomcat 6.

Web applications by default are located under /var/lib/tomcat6/webapps. Tomcat 6 libraries are located under /usr/share/tomcat6/lib. To work with MySQL you will need to download MySQL Connector/J tarball from the appropriate mirror mentioned here.

At the time of writing, a file with the latest connector is mysql-connector-java-5.1.7-bin.jar (tarball file name is mysql-connector-java-5.1.7.tar.gz). Check the site in question for updates.

It's convenient to use Dolphin (a file manager for KDE) to extract files from a tarball. Dolphin can be used under GNOME as well. You can start a Dolphin, navigate to the location of a tarball and double-click on the tarball. Dolphin will open the tarball just like a regular folder. Then you may locate the needed file, files or folders, select them (if the entire contents of a certain folder is needed, just select the folder or open the folder and press CTRL+A) and press CTRL + C. Then navigate to your destination and press CTRL + V to copy files selected from a tarball. That's it.

This way you can copy mysql-connector-java-5.1.7-bin.jar from the tarball to /usr/share/tomcat6/lib.

Ganymede
It's convenient to use an IDE to develop servlets. One of the most popular is Eclipse. The latest release of Eclipse at the time of writing is Ganymede, which can be downloaded from http://www.eclipse.org/downloads/. It's recommended to use at least the Eclipse IDE for Java EE Developers distribution of Ganymede. To install Ganymede just open Ganymede tarball (which is eclipse-jee-ganymede-SR2-linux-gtk.tar.gz at the time of writing) with Dolphin and copy the Eclipse folder under the desired location. A detailed description of Ganymede options is far beyond the scope of this article. However, one of them, namely the GUI, for work in particular with databases (in Ganymede terms it is Data Source Explorer) will be described.

  • To get to the Data Source Explorer select Window | Show View | Data Source Explorer from the Ganymede menu. Within Data Source Explorer navigate to Data Base Connections.
  • Once in here right-click and select New.
  • Select MySQL from a drop-down list and click Next.
  • Click the New Driver Definition button, which is a little circle with lines in it.
  • Select the MySQL JDBC driver MySQL 5.1.
  • Click the Jar List tab. Click Add Jar/Zip button.
  • Browse to /usr/share/tomcat6/lib/mysql-connector-java-5.1.7-bin.jar and select it.
  • Click Remove Jar/Zip button to remove mysql-connector-java-5.1.0-bin.jar, which is the Ganymede default.
  • Click the Properties tab to set up the correct connection URL, database name, password and user ID.

In Ganymede terms, the previously described operation is known as a connection profile creation.

  • Within the Data Source Explorer window click on the triangle that is located left of Data Base Connection folder. The name of your database will appear under your connection.
  • Click on a triangle left of the name. Authorization IDs and Schemas folders will appear.
  • Click on a triangle left of the Schemas folder. A representation of the schema of your database will appear.
  • Click on a triangle left of it. Folders named Dependencies, Stored Procedures and Tables will appear among others. Click on a triangle left of Tables. A list of tables from your database will appear. Select the needed table.
  • Right-click on it and select Data | Edit from the pop-up menu.

That's it. From this point you will be able to view and edit data directly from your table within the window named after the table in question. There is no Save button within said window so how do you save your work? Suppose you edited data, clicked on a row next to one in which data was changed, and after that attempted to close said window. In this case a Save Resource window will appear. You will be offered three options: Yes, No and Cancel. If you select Yes, said data will be saved. In this case Ganymede will generate and execute a corresponding SQL Update command for you. Ganymede will also report on results of the execution.

MySQL Stored Procedure for the Example
Usage of stored procedures rather than direct SQL statements in JDBC is highly recommended. The reasons are high execution speed, reduction of traffic (only needed parameters are transferred to a database, not a whole SQL statement) and improvements in security. The creation of stored procedures within MySQL is simple. Just set the delimiter to some symbol that you will not use in your procedure (say to "|"). In this simple example we will just select data from phone1 table. The reaction of our stored procedure within the MySQL command is shown below:

mysql> delimiter | ;
mysql> create procedure read_phonebook()
-> begin
-> select * from phone1;
-> end;
-> |

After that a delimiter can be set back to ";" and a procedure checked for accuracy by using

call read_phonebook();
statement.

Servlet with JSON-type Response
The source code of the servlet is given in Listing 1. Here are some comments for your convenience.

To bring JSON-type results to the HTML page with Ext JS one can use:

res.setContentType("text/html");

In the previous sentence res is an instance of HttpServletResponse. The result set using stored procedure described in the previous section can be obtained as follows:

CallableStatement stExtJS = connExtJS.prepareCall("{call read_phonebook()}");
stExtJS.execute();
ResultSet rsExtJS = stExtJS.getResultSet();

Please note that the datasource used in Listing 1 should be described within META-INF/context.xml

To interact with Ext JS we need to put "[" at the beginning  and "]" at the end of the information produced by the servlet.

Java (and specifically servlets) do not support JSON notation "out of the box." Rather than develop a "homemade" solution, it is recommended you use the free open source library, which is proven to be effective. For our example, json_simple-1.1.jar is chosen for its simplicity and effectiveness. The file can be obtained from this at the time of writing. Please contact me, if this resource is not available. You will need to include this file both in Build Path for your Ganymede project and in WEB-INF/lib for the servlet.

json_simple-1.1 automatically encloses the appropriate data with curly brackets; however, it is your job to put a comma (",") between said data (please see Listing 1 for more details on this).

Please note that of course json_simple-1.1 is not a "silver bullet." You need to research other libraries that implement JSON on Java to see what will fit your needs (for instance google-gson from http://code.google.com/p/google-gson/).

Putting It All Together: Ext JS, JSON, Tomcat
As a standalone, Tomcat is used both as a web server and a sevlet/JSP container, you may want to place your HTML page (or pages) for Ext JS under /var/lib/tomcat6/webapps/<YourApplicationName>. Replace <YourApplicationName> from previous sentence with the needed name of your application.

In the same directory, the corresponding war file or META-INF, WEB-INF for the servlet in question as well as extjs (a folder with Ext JS distribution that you downloaded from [1] and unzipped) and  JavaScript file(s) that will be used by the page(s) will be located.

In this case, the necessary HTML link elements for Ext JS components will be made like this one:

<link rel="stylesheet" href="extjs/resources/css/ext-all.css" />

Please note that path starts with extjs. Using the given link element as an example, you can easily write similar ones for ext-base.js and ext-all.js.

For our example, the name of the page is phone_book.html. This page uses phonebook.js JavaScript file, which in turn works with Ext JS and the servlet in question. Page and JavaScript file do not use any complicated constructions and are very much self-explanatory (please see Listing 2 and Listing 3 for details). It should be mentioned, however, that instead of the traditional PHP scripts, a reference to the URL for the servlet from the previous section (as it is described in web.xml) is used within the JavaScript file. Said reference has the following form:

url: '<nameOfTheServletAsItDescribedInWebXML>'.

Replace  < nameOfTheServletAsItDescribedInWebXML > from the previous sentence with the needed name.

What Do We Have?
Now when all the groundwork is done, what do we get in exchange?

With Ext JS a user can drag and drop columns, sort columns in the desired order and decide which columns to display as shown in Figure 1. Note that only checked columns from Figure 1 are displayed. If, for instance, we uncheck some of the columns, the result will be given in Figure 2.

Without writing any additional code that handles drag-and-drop, sorting, and partial displaying logic, we obtained the mentioned functionality by using simple methods described in this article together with Ext JS JSON, MySQL, Tomcat, and Fedora.

Resources

  1. Ext JS site
  2. Frederic S., Ramsay C. and Blades S.'C'. Learning Ext JS.Packt Publishing. 2008. ISBN-10: 1847195148.
  3. Schutzberg A. Oracle Buys Sun: What Happens to MySQL?
  4. Krivitsky A. Running Fedora Core 5 Under Windows XP - Tips and Tricks, LinuxWorld magazine, vol.4, issue 5, 2006, pp. 28 - 30
  5. Krivitsky A. The 'Best of Both Worlds': Running Fedora 8 on Legacy Windows XP.
  6. Negus C. Fedora 9 and Red Hat Enterprise Linux Bible. Wiley Publishing Inc. 2008. ISBN: 978-0-470-37362-0
  7. Oracle SQL Developer

More Stories By Anatoly Krivitsky

Anatoly Krivitsky has a PhD in computer science and has more than 24 years of working experience in the IT field. He's the author of 20 published papers and books and five patents. For more information, please visit http://www.myjavaserver.com/~akrivitsky/index.html.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@ThingsExpo Stories
While many app developers are comfortable building apps for the smartphone, there is a whole new world out there. In his session at @ThingsExpo, Narayan Sainaney, Co-founder and CTO of Mojio, will discuss how the business case for connected car apps is growing and, with open platform companies having already done the heavy lifting, there really is no barrier to entry.
As more intelligent IoT applications shift into gear, they’re merging into the ever-increasing traffic flow of the Internet. It won’t be long before we experience bottlenecks, as IoT traffic peaks during rush hours. Organizations that are unprepared will find themselves by the side of the road unable to cross back into the fast lane. As billions of new devices begin to communicate and exchange data – will your infrastructure be scalable enough to handle this new interconnected world?
SYS-CON Events announced today that Micron Technology, Inc., a global leader in advanced semiconductor systems, will exhibit at the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. Micron’s broad portfolio of high-performance memory technologies – including DRAM, NAND and NOR Flash – is the basis for solid state drives, modules, multichip packages and other system solutions. Backed by more than 35 years of technology leadership, Micron's memory solutions enable the world's most innovative computing, consumer,...
SYS-CON Events announced today that Pythian, a global IT services company specializing in helping companies leverage disruptive technologies to optimize revenue-generating systems, has been named “Bronze Sponsor” of SYS-CON's 17th Cloud Expo, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. Founded in 1997, Pythian is a global IT services company that helps companies compete by adopting disruptive technologies such as cloud, Big Data, advanced analytics, and DevOps to advance innovation and increase agility. Specializing in designing, imple...
SYS-CON Events announced today that HPM Networks will exhibit at the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. For 20 years, HPM Networks has been integrating technology solutions that solve complex business challenges. HPM Networks has designed solutions for both SMB and enterprise customers throughout the San Francisco Bay Area.
Consumer IoT applications provide data about the user that just doesn’t exist in traditional PC or mobile web applications. This rich data, or “context,” enables the highly personalized consumer experiences that characterize many consumer IoT apps. This same data is also providing brands with unprecedented insight into how their connected products are being used, while, at the same time, powering highly targeted engagement and marketing opportunities. In his session at @ThingsExpo, Nathan Treloar, President and COO of Bebaio, will explore examples of brands transforming their businesses by t...
Through WebRTC, audio and video communications are being embedded more easily than ever into applications, helping carriers, enterprises and independent software vendors deliver greater functionality to their end users. With today’s business world increasingly focused on outcomes, users’ growing calls for ease of use, and businesses craving smarter, tighter integration, what’s the next step in delivering a richer, more immersive experience? That richer, more fully integrated experience comes about through a Communications Platform as a Service which allows for messaging, screen sharing, video...
With the proliferation of connected devices underpinning new Internet of Things systems, Brandon Schulz, Director of Luxoft IoT – Retail, will be looking at the transformation of the retail customer experience in brick and mortar stores in his session at @ThingsExpo. Questions he will address include: Will beacons drop to the wayside like QR codes, or be a proximity-based profit driver? How will the customer experience change in stores of all types when everything can be instrumented and analyzed? As an area of investment, how might a retail company move towards an innovation methodolo...
The Internet of Things (IoT) is about the digitization of physical assets including sensors, devices, machines, gateways, and the network. It creates possibilities for significant value creation and new revenue generating business models via data democratization and ubiquitous analytics across IoT networks. The explosion of data in all forms in IoT requires a more robust and broader lens in order to enable smarter timely actions and better outcomes. Business operations become the key driver of IoT applications and projects. Business operations, IT, and data scientists need advanced analytics t...
A producer of the first smartphones and tablets, presenter Lee M. Williams will talk about how he is now applying his experience in mobile technology to the design and development of the next generation of Environmental and Sustainability Services at ETwater. In his session at @ThingsExpo, Lee Williams, COO of ETwater, will talk about how he is now applying his experience in mobile technology to the design and development of the next generation of Environmental and Sustainability Services at ETwater.
WebRTC has had a real tough three or four years, and so have those working with it. Only a few short years ago, the development world were excited about WebRTC and proclaiming how awesome it was. You might have played with the technology a couple of years ago, only to find the extra infrastructure requirements were painful to implement and poorly documented. This probably left a bitter taste in your mouth, especially when things went wrong.
SYS-CON Events announced today that IceWarp will exhibit at the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. IceWarp, the leader of cloud and on-premise messaging, delivers secured email, chat, documents, conferencing and collaboration to today's mobile workforce, all in one unified interface
As more and more data is generated from a variety of connected devices, the need to get insights from this data and predict future behavior and trends is increasingly essential for businesses. Real-time stream processing is needed in a variety of different industries such as Manufacturing, Oil and Gas, Automobile, Finance, Online Retail, Smart Grids, and Healthcare. Azure Stream Analytics is a fully managed distributed stream computation service that provides low latency, scalable processing of streaming data in the cloud with an enterprise grade SLA. It features built-in integration with Azur...
Too often with compelling new technologies market participants become overly enamored with that attractiveness of the technology and neglect underlying business drivers. This tendency, what some call the “newest shiny object syndrome,” is understandable given that virtually all of us are heavily engaged in technology. But it is also mistaken. Without concrete business cases driving its deployment, IoT, like many other technologies before it, will fade into obscurity.
Akana has announced the availability of the new Akana Healthcare Solution. The API-driven solution helps healthcare organizations accelerate their transition to being secure, digitally interoperable businesses. It leverages the Health Level Seven International Fast Healthcare Interoperability Resources (HL7 FHIR) standard to enable broader business use of medical data. Akana developed the Healthcare Solution in response to healthcare businesses that want to increase electronic, multi-device access to health records while reducing operating costs and complying with government regulations.
For IoT to grow as quickly as analyst firms’ project, a lot is going to fall on developers to quickly bring applications to market. But the lack of a standard development platform threatens to slow growth and make application development more time consuming and costly, much like we’ve seen in the mobile space. In his session at @ThingsExpo, Mike Weiner, Product Manager of the Omega DevCloud with KORE Telematics Inc., discussed the evolving requirements for developers as IoT matures and conducted a live demonstration of how quickly application development can happen when the need to comply wit...
The Internet of Everything (IoE) brings together people, process, data and things to make networked connections more relevant and valuable than ever before – transforming information into knowledge and knowledge into wisdom. IoE creates new capabilities, richer experiences, and unprecedented opportunities to improve business and government operations, decision making and mission support capabilities.
Explosive growth in connected devices. Enormous amounts of data for collection and analysis. Critical use of data for split-second decision making and actionable information. All three are factors in making the Internet of Things a reality. Yet, any one factor would have an IT organization pondering its infrastructure strategy. How should your organization enhance its IT framework to enable an Internet of Things implementation? In his session at @ThingsExpo, James Kirkland, Red Hat's Chief Architect for the Internet of Things and Intelligent Systems, described how to revolutionize your archit...
MuleSoft has announced the findings of its 2015 Connectivity Benchmark Report on the adoption and business impact of APIs. The findings suggest traditional businesses are quickly evolving into "composable enterprises" built out of hundreds of connected software services, applications and devices. Most are embracing the Internet of Things (IoT) and microservices technologies like Docker. A majority are integrating wearables, like smart watches, and more than half plan to generate revenue with APIs within the next year.
Growth hacking is common for startups to make unheard-of progress in building their business. Career Hacks can help Geek Girls and those who support them (yes, that's you too, Dad!) to excel in this typically male-dominated world. Get ready to learn the facts: Is there a bias against women in the tech / developer communities? Why are women 50% of the workforce, but hold only 24% of the STEM or IT positions? Some beginnings of what to do about it! In her Opening Keynote at 16th Cloud Expo, Sandy Carter, IBM General Manager Cloud Ecosystem and Developers, and a Social Business Evangelist, d...