Java EE and HTML5 Enterprise Application Developmentb (2014)
CHAPTER
1
Introduction to Java EE and HTML5 Enterprise Development
There have been many changes taking place in the area of enterprise software development in recent years. Two of the largest changes are the trend toward Software as a Service (SaaS) and the use of HTML5 to provide a pure client-side user interface.
In this chapter, you will be introduced to the main topics that will be covered throughout the book: NetBeans IDE, Java EE 7, and HTML5. You will be presented with information about how to obtain the applications and samples that will help you as you work your way through the coming chapters. Using this combination of IDE, platform, and HTML5 technology, you will soon be building powerful, dynamic enterprise applications.
Development Tools
Three main development tools are used throughout this book: NetBeans IDE, Java EE 7, and HTML5. You will learn how to use the combination of these tools to build powerful, modern enterprise applications. Before you begin building applications, it is important to first make sure you have a solid understanding of the basics of each of these technologies.
NetBeans
NetBeans IDE is the development tool you will use throughout this book. It provides features such as editors, templates, and code generators that make it a perfect fit for creating applications that use Java EE 7 and HTML5. Starting with NetBeans IDE 7.3, new features have been introduced to support and enhance the development experience with client-side web applications that utilize the HTML5 family of technologies. You can use this IDE to rapidly and intuitively create rich web applications that support the responsive web design paradigm targeting desktop and mobile platforms simultaneously. In addition, from NetBeans IDE 7.4 onward, you can use HTML5 technologies within Java EE and PHP applications.
The NetBeans story begins in 1996, when a group of students at Charles University in Prague attempted to write a Delphi-like Java IDE in Java. Originally called Xelfi, the student project delved into what was then the uncharted territory of Java IDEs. Xelfi generated enough interest in the developer community that, after they graduated, the students decided to put their new product on the market. In 1997, they formed a company and changed the name of the IDE to NetBeans.
It wasn’t long before Sun Microsystems became interested in NetBeans as Sun began searching for Java development tools. In 1999, Sun acquired NetBeans and made the NetBeans IDE the flagship toolset for Java. At the time, Sun made another critical decision: to establish NetBeans IDE as an open source project—free to anyone who wanted to use it. Over the years, the NetBeans IDE has become a fully featured, cross-platform IDE, supporting all aspects of Java application development.
When Oracle acquired Sun in 2010, NetBeans IDE became part of Oracle, and Oracle made the commitment to continue to support it. Today, more people are using NetBeans IDE than ever before. By 2010, the one million active user mark was reached, and the NetBeans IDE community continues to innovate and grow.
You can download NetBeans IDE from the Oracle NetBeans website. Visit http://netbeans.org/downloads for an overview of the available distributions and to find the corresponding download links. You need to have either the “Java EE” or “All” distribution of NetBeans IDE to be able to follow the instructions in this book. The instructions and code samples have been created in NetBeans IDE 7.4, the latest version at the time of writing. Subsequently released versions of NetBeans IDE should work just as well, though if you encounter problems when using a later version, you are recommended to switch to NetBeans IDE 7.4.
Having just the Java Runtime Environment (JRE) installed on your system is not sufficient for running NetBeans IDE. You need to have the Java Development Kit (JDK), which includes a copy of the JRE. The IDE relies on development tools and sources provided by the JDK. You can go to http://oracle.com/technetwork/java/index.html to find and download the latest version of the JDK.
Java EE 7
Java Platform, Enterprise Edition (Java EE) provides a standards-based platform for developing web and enterprise applications. The platform consists of multiple components that enable developers to build these applications. Each component is defined using a formal specification that describes the proposed component and its features. The platform is also accompanied by an application programming interface (API) described using Javadoc. This API is then used to build the application. The platform also provides some additional services, such as naming, injection, and resource management, that span across the platform. These applications are then deployed in Java EE 7 containers, such as GlassFish, that provide the runtime support.
There are 33 components defined in the Java EE 7 platform. The ones that are pertinent to the content of this book are described in this section. For a full list of the components, refer to The Java EE 7 Technologies list (www.oracle.com/technetwork/java/javaee/tech/index.html).
One of the major themes for the Java EE 7 platform is to simplify development of HTML5 applications, especially the services that are needed on the server side. To enable that, Java API for RESTful Web Services (JAX-RS) is a component in the platform that defines how to develop, deploy, and invoke RESTful Web Services. A Plain Old Java Object (POJO) can be easily published as a Representational State Transfer (REST) endpoint by specifying an annotation. Regular methods can be easily invoked when the resource is accessed using standard HTTP verbs. A standard Java API to invoke these REST endpoints is also available. Server-Sent Events (SSE), a key part of the HTML5 specification, is used to asynchronously push data from the server to the client. Even though SSE is not part of the platform yet, the JAX-RS implementation provides support for SSE.
WebSocket provides a full-duplex, bidirectional communication channel over a single TCP connection and significantly improves the latency for modern web applications. A new API was added to the Java EE 7 platform for building WebSocket applications. Just like JAX-RS, adding an annotation on a POJO converts it into a WebSocket endpoint. With all the excitement around WebSocket and a simplified API, Java EE 7 is the best platform for building your HTML5 applications.
JavaScript Object Notation (JSON) is a key technology for data transfer within HTML5 applications, and certainly a lingua franca of the Web. Java EE 7 adds new APIs to enable the parsing and generation of JSON text and objects using JSON-P 1.0. The API allows parsing or generating the entire JSON text using only the API. Alternatively, the document may be structured one item at a time.
Any web application typically requires information to be persisted in a permanent data store. The Java Persistence API (JPA) defines an API for the management of persistence and object-relational mapping using a Java domain model. Consistent with the overarching theme of a simplified programming model, adding an annotation allows a POJO to be mapped to a database table. There are reasonable defaults that can be overridden using annotations. The POJOs can also be used to generate the database tables, or even table-generation scripts. Developers can write string-based or type-safe queries to operate on the Java data model.
In addition, the information from this data store needs to be stored and retrieved to preserve the ACID (atomicity, consistency, isolation, durability) properties. This can be achieved using Enterprise JavaBeans (EJB) or the newly introduced @Transactional annotation. EJBs provide convenient container-managed transactions. They also come in different flavors: stateless (where there is no state on the server), stateful (state is stored on the server), and singleton (single instance per application per JVM).
The newly added @Transactional annotation can be specified on a POJO to provide container-managed transactions outside of Enterprise JavaBeans. Annotating a class means all methods of the class are going to run inside a container-managed transaction. Alternatively, this annotation may be specified on a method to limit the scope of transaction.
This book will cover all of these topics in detail using extensive code samples.
In addition, the Java EE 7 platform provides several other components:
Batch Applications for the Java Platform Allows noninteractive, bulk-oriented, and long-running tasks to be easily defined and executed. It allows item-oriented processing style, aka Chunk, and task-oriented processing style, aka Batchlet. Chunk, the primary and recommended processing style, reads, processes, and aggregates for writing a “chunk” number of items at a time. Each chunk is written in a container-managed transaction and also provides checkpoints. Batchlet is a roll-your-own batch pattern. It is a task-oriented processing style where a task is invoked once, runs to completion, and returns an exit status.
Java Message Service (JMS) Provides a message-oriented middleware that allows sending and receiving messages between distributed systems. It provides a point-to-point messaging model, where a publisher sends a message to a specific destination, called a queue, targeted to a subscriber. Alternatively, JMS provides a publish-subscribe messaging model where multiple publishers can publish a message to a destination, called a topic, which can then be subscribed to by multiple subscribers. In both cases, publisher and subscriber are loosely coupled from each other. They only need to know the destination and message format.
Contexts and Dependency Injection (CDI) Provides a type-safe dependency injection mechanism. A bean is “strongly typed” as it only defines the type and semantics of other beans it depends upon, without a string name and using the type information available in the Java type system. It provides “loose coupling” as the injection request need not be aware of the actual life cycle, concrete implementation, threading model, or other clients of the bean.
Concurrency Utilities Allows adding concurrency design principles for existing Java EE applications. It allows an application to create user threads that are managed by the container. The usual classloading context, Java Naming and Directory Interface (JNDI) context, and security context are propagated to these threads.
JavaServer Faces (JSF) Provides the server-side user interface (UI) framework. It allows creation of web pages with a set of reusable UI components following the Model-View-Controller (MVC) design pattern. The components are bound to a server-side model that enables two-way migration of application data with the UI. JSF also defines page navigation, manages UI component state across server requests, and can be easily used to build and reuse custom components.
Java Servlet Technology Allows a web client to interact using a request/response pattern and generates dynamic content. The container is responsible for the life cycle of the servlet, receives requests and sends responses, and performs any other encoding/decoding required as part of that function.
Refer to The Java EE 7 Tutorial (http://docs.oracle.com/javaee/7/tutorial/doc/home.htm) for more details on the complete set of Java EE 7 technologies.
HTML5
While most people believe HTML5 is relatively new, it has actually been in development since 2004. The World Wide Web Consortium (W3C) designed the original specification to address what it observed as common uses of HTML and XHTML across the Internet at the time. Other considerations the W3C addressed as it drafted the new specification were the trend toward incorporating multimedia into web pages and the need to consolidate various specifications that had become commonly used during the years that the HTML 4.01 specification had been in use. This consolidation included not only upgrading to the HTML 4 specification, but also combining the XHTML 1 and DOM Level 2 HTML specifications into one.
HTML5 Specification Reaches Feature Complete
What has brought HTML5 to the forefront the most over the past year is that on December 17, 2012, the W3C announced that the HTML5 specification was feature complete. By labeling the specification as a “Candidate Recommendation,” the W3C gave businesses and developers a stable specification that they could start working with.
One major issue that you need to take into consideration when working with HTML5 as your client-side application framework is that, while it has reached a stable, feature-complete status, it has not been approved as a completed standard yet. The largest ramification of this is that there are still different implementations of what was a draft specification being used. Now that the specification is feature complete, the major browser vendors and user agent developers should be able to converge on implementations that come closer to meeting the specification. This will take time though, and you will need to make sure you test all of your HTML5 code on the browsers and user agents that you expect your customers to be using.
In its press release announcing the completed definition of the HTML5 specification (www.w3.org/2012/12/html5-cr.html.en), the W3C describes as follows what the next phase of the specification process will involve:
During this stage, the W3C HTML Working Group will conduct a variety of activities to ensure that the specifications may be implemented compatibly across browsers, authoring tools, email clients, servers, content management systems, and other Web tools. The group will analyze current HTML5 implementations, establish priorities for test development, and work with the community to develop those tests. The HTML Working Group has planned for this implementation phase to last into mid-2014, after which W3C expects to publish the final HTML5 Recommendation, available Royalty-Free to implementers under the W3C Patent Policy.
The implementation of the HTML5 specification so far has been done against a moving target, so to speak. Different vendors support the specification in different ways, or may not support certain parts of the specification at all. This poses a problem for application developers, who have to develop for a customer base that could be using a wide variety of device and browser combinations. Thankfully, several websites have been created to help developers navigate this tricky area of developing HTML applications. Two of the more popular sites are
HTML5 Test http://html5test.com/
Can I Use http://caniuse.com/
The HTML5 Test website will allow you to see how well a specific version or brand of browser implements the whole of the HTML5 specification. This is very useful when you are trying to decide what kind of browser or device support matrix your application will provide.
The Can I Use website goes into more detail and allows you to look at a specific HTML element or attribute and see which browser vendors have implemented it and in which versions of their browsers.
Use of Mobile Devices
Probably the second largest reason for HTML5’s recent rise in visibility is the increase in the availability of smartphones, tablets, and other types of mobile and embedded devices with Internet access (such as Internet-ready TVs, game consoles, and Blu-ray players, to name just a few). The reason that the rise in the availability of these devices has brought HTML5 to prominence is that all of them are being developed with browsers that already support HTML5 to some degree. Unlike on desktop operating systems, the developers of the browsers for these devices didn’t have to consider any issues of backward compatibility with existing browser implementations. Everything is new on these types of devices, and the manufacturers started with the latest HTML specifications in anticipation of it becoming the standard in the near future.
This rise in accessing the Internet via mobile devices is also one of the factors that has enticed enterprise developers to look more closely at HTML5. The traditional website layout does not comfortably scale down for viewing on a smaller device like a smartphone or tablet. The existing methods of producing a completely different version of the website to display when the client is detected to be a mobile device have proven to be fraught with maintenance problems and inefficient to scale.
New HTML5 Features
One of the major new features of HTML5 is the inclusion of new semantic elements (see Table 1-1) to help developers manage the layout of the HTML page and its content so that it scales flawlessly for viewing on smaller devices. You can now lay out your HTML content using tags such as <header>, <footer>, <section>, <article>, <aside>, <nav>, and many others.
TABLE 1-1. Semantic Elements
Along with the new semantic elements in the HTML5 specification, there are also new syntactic elements, as listed in Table 1-2, that are meant to remove the need to install proprietary plug-ins. These include elements such as <canvas>, <video>, <audio>, and <svg>. These features are designed to make it easier to work with multimedia and graphics.
TABLE 1-2. Syntactic Elements
Lastly, the HTML5 specification brings new attributes to some of the existing elements. The most notable of these are the new values for the type attributes of the <input> element (see Table 1-3). These are primarily used for forms. While all of these new type values are now part of the finalized HTML5 specification, each browser vendor can, and has, implemented how they behave when they are rendered. It is the intent of the specification that the vendor will be able to provide a user interface for better integration with each of these input types. For instance, if a browser renders an input field with the type set to "date", the end user would see a date picker displayed to help select the date that they wish to enter. Unfortunately, this is one of the areas in which browser vendors currently have the largest separation in functionality. On mobile devices, the experience is better. You will often find that when you click or touch in an input field that has the type set to "number", you will get a number pad instead of the normal keyboard, or a different type of keyboard will be displayed if the input field is set to something like "url".
TABLE 1-3. Form Input Type Attributes
Parts of an HTML5 Application
One of the most common misconceptions about HTML5 applications is that they are composed of HTML5 only. In fact, in almost all cases the application is actually made up of at least three different components: HTML5, JavaScript, and Cascading Style Sheets (CSS). By combining all of the new HTML5 elements and attributes with the new media query feature of CSS version 3 (CSS3), you can display the same content with different layouts for different device sizes. This method of modifying the content to respond to the device’s available display size is called responsive design; the layout responds to the display size that it is rendered in.
There are a few important caveats to note about responsive design. First, although it does allow you to create a website that will have the same look and feel across multiple device sizes, the HTML5 application is still a web page that is being viewed in a web browser on a smaller device such as a smartphone or tablet. The application will not have a true “native” look and feel like an application that is written and compiled for a specific type of mobile device. Second, HTML5 and responsive design may not be the answer for developers who want their application to have access to specific mobile features such as the camera, contact list, and calendar. Because the application is running in a web browser, you can only program your application to use what the browser allows you to interact with.
As previously mentioned, the third component commonly used in HTML5 applications is JavaScript. The introduction of JavaScript architectural libraries has been a big factor in making it more acceptable to enterprise developers.
Developing an application in an enterprise environment often means the separation of development tasks, with designers and UI teams working on the front end or view layer, while other teams are working on the data and controller layers. This type of separation between application layers is referred to as a Model-View-Controller (MVC) architectural pattern. Over the past few years, JavaScript libraries have been developed to introduce a similar architecture, called Model-View-ViewModel (MVVM).
MVVM was originally developed by Microsoft in 2005 as part of its Windows Presentation Foundation (WPF). A JavaScript implementation of this architectural pattern was introduced as an open source project in 2010 by Steve Sanderson. It was released under the name of Knockout.js (http://knockoutjs.com/) and has quickly gained popularity among JavaScript developers who are already familiar with the MVC architectural development practices. While a deep understanding of MVVM, and more specifically Knockout.js, is beyond the scope of this book, you will use Knockout.js in Chapter 5 when creating an HTML5 application that will consume and interact with web services such as REST, WebSockets, and Server-Sent Events (SSE).
Summary
You’ve learned what’s new in the Java EE 7 specification in the area of web services that are used for developing the specific services that an HTML5 application will need. You’ve also been shown some of the new features in the HTML5 specification and the specific technologies that are required to develop a client-side HTML5 application. This introduction to the current state of development tools will help you throughout the rest of this book as you work with the coding concepts and samples.
As you can see, both Java EE web development and HTML web development have matured over the past few years toward the common trend of providing Software as a Service. In keeping with this development trend, tools such as NetBeans IDE have evolved to provide features that make it easier than ever to combine these two types of technologies.
In the next chapter, you will dive into the Java EE 7 Persistence API to learn how to create and maintain a data store for your HTML5 application.
