AJAX (Asynchronous JavaScript and XML) is now widely known as a technique used in client-side interactions. However, AJAX requires special coding for asynchronous requests and for server-side programming. This article proposes a new AJAX approach that executes the process definition on the client. It allows you to orchestrate services synchronously and apply the MVC (Model View Controller) pattern, so you will find coding similar to server-side programming. Before discussing the new approach, let's take a look at the problems with AJAX currently. |
SAN FRANCISCO (08/06/2007) - Rich Internet applications, or RIAs, comprise a spectrum of application types and technologies. The lightweight end of the spectrum is anchored by AJAX (Asynchronous JavaScript and XML) or Web 2.0 applications, which add richness and responsiveness to standard Web sites with asynchronous JavaScript libraries: that's the "AJA" part of "AJAX." The "X" stands for "XML," but these days XML is not the only data format used by such libraries; it's also common to see asynchronous data exchange in JSON, HTML, and plain text formats. At this point, many people have stopped treating "AJAX" as a specific acronym and talk instead about the generic "Ajax" class of applications. Ajax is powered by several technologies. One key piece is Dynamic HTML, a browser feature that allows JavaScript libraries to manipulate the contents of a page on the client, even after it has been initially displayed. Another key piece is XMLHttpRequest, which is a lightweight back channel to the server that JavaScript can call from the client. Ajax is used to extend a wide variety of Web server application technologies. You can, of course, use it to enhance otherwise static HTML pages with data-driven content, but it's more customary to couple Ajax on the client with scripted Web servers. Ruby on Rails makes adding Ajax features especially easy. Microsoft ASP.Net AJAX, as the name implies, enhances ASP.Net sites with Ajax features, and includes Visual Studio integration; the Microsoft AJAX Library can also be used with other types of sites. Integrating Ajax libraries with Java/JSEE sites can be done manually with some effort, but tools and libraries such as the Google Web Toolkit, TIBCO General Interface, and ThinkCAP JX make it much simpler. The heavyweight end of the RIA spectrum is shared by .Net Smart Client applications and Java Applets deployed over the Web. In both cases, the client computer needs to have a fairly large (more than 10MB) runtime engine installed before it can meaningfully download the RIA. The middle of the RIA spectrum is occupied by runtime engines, development tools, and libraries that do more on the client than simple Ajax, and do it more quickly, but don't have the overhead of the .Net Framework or the Java JRE. Adobe Flash, Flex, and Shockwave are midsized RIA engines. Curl falls in this category, as does OpenLaszlo, although OpenLaszlo can generate both Ajax and Flash applications. Several technologies are under development in the midrange. Microsoft Silverlight 1.0 incorporates a subset of the .Net Framework and supports JavaScript; Microsoft Silverlight 1.1 incorporates a larger subset of the .Net Framework and supports JIT-compiled C#, Visual Basic .Net, IronPython, and (eventually) IronRuby as well. Adobe Flex 3.0 promises much faster runtimes than Flex 2.0, and Adobe AIR promises a cross-operating system runtime that allows developers to use their existing Web development skills to build and deploy rich Internet applications to the desktop. Meanwhile, Google Gears gives you a LocalServer, a Database, and a WorkerPool so that you can make Web applications run on the desktop. InfoWorld has reviewed a number of RIA toolkits and frameworks, including open source AJAX packages Dojo, Google Web Toolkit, Microsoft Axis (now ASP.Net AJAX), OpenRico/Prototype, Yahoo AJAX Library, and Zimbra's Kabuki AJAX Toolkit; enterprise AJAX tools Backbase, Bindows, JackBe, and TIBCO General Interface; Adobe Flex 2.0; and Curl 5.0. Many of these reviews include links to recorded screencast demos that show just what the tools can do. Finally, see InfoWorld RIA TechIndex for additional coverage. |
As Java-based Web developers have learned to take JavaScript seriously, the rush is on for tools that enrich the Ajax-development experience. In this JavaWorld podcast, Foundations of Ajax co-author Nate Shutta talks with Andrew Glover about the component libraries, debuggers, and frameworks he uses for Ajax. Nate also discusses projects and trends that reveal new directions for Ajax as a foundation technology for Web 2.0. |
I start with an overview of client-based asynchronous message handling and message streaming, and then begin demonstrating the many uses of asynchronous HTTP on the server side. I explain the role and current limitations of the Java Servlet API 2.5, and demonstrate the use of the xSocket-http library to work around some of these limitations. The article concludes with a look at a dynamic Web application that leverages the two techniques associated with Comet architectures: long polling and streaming. I also show how this application could be implemented on Jetty and Tomcat, respectively. |
This article presents an AJAX (Asynchronous Java and XML) project done with straight AJAX. That means this application will not be using any library or toolkit—it will just be you and JavaScript! Here we'll build ourselves a nice little multiuser, multiroom chat application, much like the Yahoo! chat rooms. Even better, we'll build this application using Struts on the server to make it that much more interesting! |
In this article, I will design and implement two custom JSP tags that will allow JSP developers to work with JMS in the form that they are most comfortable with -- tags. Plus, since all the JMS programming logic is buried deep within the custom tags, JSP developers do not need to learn JMS. That's what I call killing two birds with one stone. |
Jeff Friesen's Beginning Java SE 6 Platform: From Novice to Professional is out now from Apress. In this article Jeff introduces you to his new book by presenting excerpts from its chapter on the Java Scripting API (JSR 223). You'll learn some of the fundamentals of the Java Scripting API, such as how to obtain a script engine, get the script engine to evaluate scripts, and communicate with scripts via script variables. You'll also have the chance to apply what you've learned to a project involving the XMLHttpRequest object used in Ajax programming. |
|
While Ajax commonly is spelled out as Asynchronous JavaScript and XML, the full name is not entirely appropriate because it oversimplifies the history of the technology and the implementation options at its heart. More exactly, Ajax encompasses the idea that Web applications can be built to opt out of the typical post-wait-repeat cycle used in server-side Web applications. Ajax lets Web applications move to a more responsive, continuous, but incremental style of updating. Ajax provides users a richer, more interactive way of experiencing the underlying Web application. This goodness for the user might mean that more monitoring and security oversight might be required of network professionals, as well as, potentially, server and network alterations. |
But the opening keynote pitted desktop technologies including Swing against AJAX (Asynchronous JavaScript and XML), the popular technique for building Web applications. Speakers included Ben Galbraith and Dion Almaer, who are cofounders of ajaxian.com and producers of the Desktop Matters conference. |
As a result of such varied technologies and the highly coupled client and server environments, AJAX demands a new type of developer. AJAX developers must understand the traditional Model-View-Controller (MVC) architecture, where strict boundaries exist between application layers. At the same time, these developers must continue to think outside the client-server box and use AJAX techniques to reshape MVC boundaries to their will. Most importantly, AJAX developers must stop thinking about Web applications as collections of pages and rather as a single page. The once obvious sharp and marked distinction between user interface designers and server architects has been blurred by AJAX; developers with new and varied skill sets are required. |
I start with an overview of client-based asynchronous message handling and message streaming, and then begin demonstrating the many uses of asynchronous HTTP on the server side. I explain the role and current limitations of the Java Servlet API 2.5, and demonstrate the use of the xSocket-http library to work around some of these limitations. The article concludes with a look at a dynamic Web application that leverages the two techniques associated with Comet architectures: long polling and streaming. I also show how this application could be implemented on Jetty and Tomcat, respectively. |
In my previous article, "Put on a Happy MyFace" (July 2006), I showed how to use the JavaServer Faces (JSF) MyFaces component-based framework to create an employee header/detail use-case. Other functionality needs to be added to this application, such as the ability to add or delete an employee. In this article, I not only introduce these new functions, but also demonstrate how to use AJAX (Asynchronous JavaScript and XML) to improve the JSF Web application user experience. AJAX is an old technology with a new life. One of the biggest advantages of AJAX is that it improves the user's experience. In traditional Web applications, the entire Web content is rendered for every HTTP request every time. With AJAX, only a portion of content is rendered. Put simply, users can have a similar or the same experience working with a Web application as they have when working with a Windows-based application. JSF and AJAX are a perfect match when it comes to building a so-called RIA (rich Internet application). You want to know how? Just follow me. |
Sun Java Studio Creator 2 is positioned as Sun's easy-to-use tool for Java development; it is geared toward corporate developers and Visual Basic developers. Looking to enable development of richer Internet applications, Version 2 features a set of JavaServer Faces components and code clips for building Ajax-style applications. |
Any time there are multiple threads of program logic that access the same data, and execute at the same time, problems arise. Programs normally assume that the data with which they are interacting is not changing underneath them. The portions of code that access these shared data structures are known as critical sections, and the practice of only letting one run at a time is known as mutual exclusion. This situation arises in AJAX applications when the code, asynchronously handling the reply from an XMLHttpRequest, manipulates data that is also being used by the user interface code. This common data could be JavaScript variables implementing an MVC data model and/or the DOM of the web page itself. The logic of each will break if either is making uncoordinated changes to shared data. |
Dividing the codebase into three discrete layers using MVC makes the JavaScript code in an Ajax application more ordered and maintainable, but it also results in a certain amount of overhead of communication between the tiers. In this installation, we look at a way of reducing this overhead by generating the View layer automatically from the Model. |
We are proud to provide this patterns/strategies repository to the community. Feel free to post any useful design tips you know! |
Back in late 2001, at the start of development of JSF 1.0, the Sun implementation team decided to use Test Driven Development for the entire implementation. We surveyed the state of the art of dollar cost free automated testing tools and chose JUnit, Cactus, and HtmlUnit to help us do TDD. We quickly ran up against the limitations of the JavaScript support in HtmlUnit and had to employ some ugly workarounds to get the job done. At the time, we thought, "I wish there was a better way," but since we were really busy with the implementation we just continued with our workaround. We're still using those workarounds today! There still isn't a better way... Until now. |
In chapter 10 of this book, titled "AJAX Warrior: Back to the Future in a Fun Way!", Zammetti walks through his final Ajax project, a game. With this example application Zammetti covers "naked" Ajax (not using a library or toolkit), JSON, and CSS and DOM scripting techniques. Associative arrays and a new server-side framework are also discussed. After walking through planning, design and implementation stages, readers can see the fruits of their labor firsthand, and play the game. |
Building an enterprise application is never an easy task, not to mention enriching its user experience at the same time; Direct Ajax is designed to help developers deliver the project on time without working over-time. Here are the five reasons you should use Direct Ajax. |
Eric Pascarello graduated from Penn State University in 2002 with a B.S. in Mechanical Engineering. Since then Eric has been employed as a Senior Developer working with enterprise level applications in ASP.NET. Eric has also written "JavaScript: Your visual blueprint for dynamic Web pages (2nd ed)". Eric volunteers his free time as a moderator of the HTML and JavaScript forum at www.JavaRanch.com, a friendly online community dedicated to helping people learn Java and other web technologies. He lives in Laurel, MD. |
The Process Framework presented here offers one the ability to create asynchronous, long-lived, stoppable processes modeled as finite state machines. The framework allows for "pluggable" transaction management and persistence schemes and plays very nicely with two of the most popular solutions: Spring and Hibernate. |
In this article you will learn how to create a new Ajax RIA front end to an existing Apache Struts2 .jsp application using TIBCO General Interface (GI), an open source Ajax toolkit with a MVC architecture similar to that of Java Swing. GI is optimized for creating business productivity applications and communicating with XML, SOAP, JSON and other types of services in a SOA. |
In this article, I will show how to configure GMaps4JSF with Ajax4JSF, and will give a brief summary about the Ajax4JSF PUSH component, and finally will illustrate a weather application that uses GMaps4JSF with Ajax4JSF push component. |
The title says this pattern is "almost" CPU-free. "Almost" because RAJAX will implement it entirely on the client browser, so no CPU is used on the server for that computation. There are six classes available to the developer (Figure 1). |
AJAX is the latest revolution in web development circles, allowing rich dynamic interfaces deployed within a normal web browser. Struts has been one of the de facto standards for Java-Web development for a number of years, with a large number of applications already deployed. This article will show you how to combine the richness of an AJAX user interface with your existing Struts applications. |
Two relatively recent technologies, Google Maps and Ajax, can make life considerably easier in this area. In this article, we will discuss how you can easily implement dynamic interactive maps on your Java web application, using the Google Maps API for the web interface, and Ajax to provide real-time interaction with the server. This article is designed to give you a rapid introduction to both Google Maps and Ajax, and to let you get your own interactive maps up and running quickly and easily. |
Hopefully, this article offered you some insight on how to make file uploads more user-friendly, and on the possibilities of combining AJAX and JavaServer Faces for advanced user interface components. The solution in this article is by no means exhaustive and could probably be further improved. I would encourage you to look at the complete source code to gain a deeper understanding of the concepts discussed here. |
Given that web service invocations are always remote across the internet, developing rigorous and responsive web service client applications has always been a challenge for architects and developers working with SOA. JAX-WS 2.0 comes with one effective solution to this problem: asynchronous web service invocation, with which a web service client may interact with a web service in a non-blocking, asynchronous approach. In this article, we will provide an exposition of this technology with examples built upon the reference implementation. |
Any Java developer who has already worked with Java Server Faces has undoubtedly come across the need for a custom component. Most components in JSF implementations are rudimentary and don't really address real-world situations--if data-entry solutions for all problem domains were as simple as a login form, then JSF would be just the right tool out of the box. The saving grace of the framework is the ability to create and extend custom components, and if you couple that with the power and versatility of Ajax, you really start to reap the benefits of the modern Model-View-Controller architecture. |
30. Log4Ajax today.java.netJoshua Gitlin's article "Errors and AJAX" details an error-handling system for transmitting JavaScript errors to the server and will ease some of the pain you'll experience while working with AJAX. While a step in the right direction, his solution is concerned only with improving error handling. By using Mr. Gitlin's concept as a foundation and expanding the scope of the problem, a client- and server-side logging solution can be developed. By using this solution, all of the advantages and benefits of traditional logging systems, including improved error handling, become available to AJAX applications. Because the system I describe relies on the use of AJAX and Log4j, I have given it the name Log4Ajax. |
As a developer, you have a variety of options in building Ajax into a web application. These options range from a complete "do-it-yourself" strategy, where you do all the Ajax coding, to strategies that take advantage of libraries and frameworks that provide some or all of the Ajax coding for you. And you can combine multiple strategies. For example, you might use a client-server framework based on JavaServer Faces technology in combination with a client-side JavaScript technology library such as a library in the Dojo toolkit. |
In the form below enter a user id. By default the user ids "greg", "duke" and "ねこ" are taken. If you attempt to enter a user id that has been taken an error message will be displayed next to the form field and the "Create Account" button will be disabled. After entering a valid user id and selecting the "Create Account" button that user id will be added to the list of user ids that are taken. |
In the do-it-yourself approach to Ajax described here, you must provide a cascading style sheet (.css file) that describes the appearance of the pop-up balloon. In this project, the popup.css file describes the layout for the balloon, including its fonts, colors, and dimensions. The bookcatalog.jsp file uses these descriptions to build the pop-up balloon as it inserts content. |
In the form below, enter a U.S. address. Two of the fields, city and state, offer auto completion from data residing on the server. Both fields are using the custom component. |
A second JavaServer Faces component approach, for convenience CompB, uses a phase listener to serve the component's static resources. As an option, you can use the phase listener to intercept and fulfill the client component's Ajax requests. The phase listener can delegate responsibility to a managed bean's method or again use the legacy servlet. The client component's resources, such as the JavaScript file and CSS, are accessed through the phase listener. The phase listener approach takes advantage of more of the power of JavaServer Faces technology, and is described in the final article in this Ajax series, Creating an Ajax-Enabled Application, a Phase Listener Approach. |
This article assumes that you have downloaded and installed the latest NetBeans IDE and the example application that forms the basis of discussion. If you have not done so, refer to the first article in the series, Creating an Ajax-Enabled Application, a Do-It-Yourself Approach, and download the necessary tools now. |
This is the second in a series of articles that describe ways to introduce Ajax functionality into an existing web application developed with the NetBeans IDE. Readers are encouraged to read the first article in the series, Creating an Ajax-Enabled Application, a Do-It-Yourself Approach, before reading this one. At a minimum, install the example project, the NetBeans 5.5 IDE, and the GlassFish server, as described in Downloading and Installing the Tools. |
Using JavaScript technology, an HTML page can asynchronously make calls to the server from which it was loaded and fetch content that may be formatted as XML documents, HTML content, plain text, or JavaScript Object Notation (JSON). The JavaScript technology may then use the content to update or modify the Document Object Model (DOM) of the HTML page. The term Asynchronous JavaScript Technology and XML (Ajax) has emerged recently to describe this interaction model. |
Ajax has different implications for developers working in different roles. For example, component developers creating custom components for web applications build Ajax functionality into the design. Page authors use these Ajax components, along with widgets, JavaScript technology, and other techniques, to incorporate Ajax functionality into their web applications. Ajax impacts other roles too. For example, enterprise application developers need to add logic in server-side components to handle Ajax-related requests directed to the server. |
This article shows how to use Project Dynamic Faces, included in the new Sun Web Developer Pack, to add first-class Ajax support to your JavaServer Faces technology-based application. |
In this roundtable, we talk with three of Sun's leaders about (Ajax), the JavaScript language, and Sun's initiatives to enrich the web experience. |
The Java BluePrints Solutions Catalog's Ajax FileUpload component shows how to use the default JavaServer Faces renderers when creating a custom component. The FileUpload component was designed to add (Ajax) functionality to the JavaServer Faces technology's javax.faces.component.UIForm component. Because the markup to be rendered for the FileUpload component would be the same as the UIForm with some default attributes set, coding the renderer from scratch would not make sense. With the javax.faces.component.UIForm component as a guide, you can use either of two methods to render the component's markup using base renderer functionality: |
Using Asynchronous JavaScript and XML (Ajax) interactions, data may be validated in near real-time as the user types the data in an HTML form. In this case, form data is validated asynchronously, which allows the HTML page to continue processing events while the form data is being validated by a server-side component in the background. If the form data does not match what is required by the server-side logic, the user knows immediately and can change it without having to refresh the HTML page. |
A common way of restricting access to resources is through HTTP basic authentication or HTTP digest authentication. The servlet API provides built-in support for securing your services or other web resources through these authentication approaches. For more details on setting up HTTP basic and digest authentication, see the section Declaring Security Requirements in a Deployment Descriptor in the Java EE 5 Tutorial. |
The foundation that makes AJAX possible is the communication layer with the server. The most complete option for performing this communication is the JavaScript XMLHttpRequest object. If XMLHttpRequest is not suitable to you, hidden IFrames and cookies can also be used. We will examine both options later in this chapter. |
One solution to the issue is caching requests for specific amounts of time. In this article, I’ll show you how to implement a PHP object that caches requests to the server for a specified amount of time. Each time a user comes to the site and makes a request, the server-side object will check for a cached version, decipher what time it was created, and either return it (if the specified time limit hasn’t elapsed) or update it and return fresh data from the database. The final sample project is an application that allows users to add, edit, and delete messages. You can download the source code for the project here. The source code is necessary to complete the project because I won’t cover every line of code in this article; rather, I’ll give you a high-level overview of the project and how caching relates to it. Let’s get started by taking a look at the client side. |
With all of the new AJAX effects frameworks popping up on the Web, have you ever wondered just how they do it? This article sheds some light on this question by showing how to create a custom AJAX effects object and apply custom fade functionality to it. This functionality allows you to fade any HTML elements within the page that you’re developing. Take a look at the sample and download the source code to follow along. |
In this chapter, we will learn how to create a custom Ajax-enabled accordion component. An Ajax-enabled accordion can lend itself to many unique situations. For example, you can connect the component to live XML data from a database via a server-side language, which can send and receive XML or any other format that you prefer. The accordion component can be the graphical user interface for a custom web mail application that displays threads in different panels. The server can push new data to the component when mail has been updated, deleted, or added to the database, and the accordion can parse it to update, delete, or add new panels to the thread. This is a perfect example of providing access to massive amounts of content without scaring away the users of the application. It is also a great way to organize the content so that the application is ultimately more usable and purposeful. |
Many well-designed web sites contain significant amounts of navigational information together with the actual content. The HTML markup used for navigation can impact your search engine ranking as well as increase the page download time experienced by your visitors. In this article, you'll see how you can use AJAX to create more focused, faster-loading web pages. |
Asynchronous integration occurs when a number of processes integrate but do not lock for the time of the transaction on which they are integrated. In general, a caller makes a request of a server and then goes away and does its own thing. When the server finishes its part of the process, it sends the results back to the caller via a callback. This involves the caller and the server keeping information about each other in what is usually referred to as a session. It involves overhead on both sides, and as such, in large scale systems it requires careful design and usage. |
When integrated with a database, AJAX can accomplish some extremely powerful interactions that are unique to the set of languages it encompasses. "With great power comes great responsibility," however, and database-integrated AJAX is no exception to this rule. To protect our database from unwanted requests, we need to have an interaction model that verifies the source of the request based on a password. In this article, we’ll cover how to create a password-protected AJAX request from the client side that’s verified on the server side before any database interactions occur. We’ll use PHP to create our unique passwords on the client side and also to verify them on the server when the AJAX requests are made. |
While an application’s architecture can dictate much of its scalability, some general coding practices can help keep smaller pieces of the application from growing sluggish under more demanding circumstances. If developers do not make an effort at the coding level to make the application scalable, unscalable functionality will mar the architectural scalability of the application. The users care only about the overall experience of the application, not at which point it fails. |
Sams Teach Yourself PHP and MySQL: Video Learning Starter Kit February 2009 Four hours of video learning and lessons to get anyone just starting with PHP and MySQL up and running. |
RSS aggregators are not very hard to come by these days, but finding a good one can be quite difficult. On the other hand, creating a custom aggregator isn’t very difficult and can provide you with an interface of your own choosing. RSS aggregation presents the kind of data that’s perfect for being consumed by an AJAX application because of the simple fact that it’s XML, and AJAX can gracefully display new feeds without refreshing the page. The issue has always been that cross-domain AJAX requests are impossible with a standard AJAX engine. In this article, I’ll show you how to leverage a very simple PHP function to bridge the gap between the AJAX engine and the remote content, which in this case will be RSS feeds. |
First, we’ll cover how to make sure that your AJAX requests are not cached by the browser. Next, we’ll explore a great tool for debugging AJAX applications in Firefox. Finally, I’ll show you a basic database-connection tip for responding to an AJAX request with valid XML from the server. |
As technologies such as AJAX evolve and are adopted in large scale on the web, Web 2.0 techniques are quickly becoming the expected user experience for the web. Mainstream examples of AJAX include the Google-based applications, such as Google’s Maps, Docs, and Calendar, as well as Microsoft-based applications, such as Hotmail, and Windows Live-based applications. As users start utilizing these types of applications in their everyday lives, they will come to expect the same type of functionality in the applications you develop. |
When you first think about designing a form, it probably doesn’t seem very glamorous. But when you consider all of the possibilities for user feedback, things get a little more interesting. Forms are usually very important, especially when dealing with web applications—this is where users register, login, provide useful data, or even pay you for a service. These important processes may be difficult for a user. That’s why it’s essential to streamline such processes and provide direct and useful information for user interactions. |
One of the truly killer applications of Ajax is real-time user input validation, which means that data entered by the user is checked for validity as the user enters it. This can dramatically improve the efficiency of user interfaces because errors are caught as they are made, thus eliminating the need to submit an entire form to find out whether a problem exists. Additionally, applications just feel smarter when they give immediate feedback to the user regarding data entry. As it turns out, Ajax isn't technically required for a lot of real-time validation tricks, but it still does play a role in some instances when it is necessary to load data from a server as part of the validation. |
Since JSF components encapsulate their behavior, component vendors are free to provide highly interactive components, often with very complex internal implementation. Component interactivity is frequently achieved by vendors relying on sophisticated Ajax interaction when communicating between a component's rendered state in the browser and the component's server-side representation. The result is that JSF has become a vehicle for providing interactive Ajax user interfaces, without developers having to know much Ajax at all. |
Dojo is a set of client-side JavaScript tools that help you build better web applications. Dojo blurs the line between local, native applications and browser-based applications; the browser becomes the user interface platform. |
When you look at the Web today, it's pretty much based on a synchronous interaction model: The user interacts with the application, and the application responds with some updates. When you move into the asynchronous Web, you have the ability for the application to deliver state changes to the client, without the user necessarily having to initiate those updates. In effect, you can push updates to the client running inside the browser. |
The JSF specification, as it is, never addressed Ajax interaction within the framework. As you use different technologies, and use different techniques to make Ajax work within JSF, you're almost certainly are going to run into issues, whether they be at the framework level or at the component level. There will be concerns of either JavaScript collisions, or framework collisions, because the implementations are using different techniques. |
JavaFX was heavily spotlighted at this year's JavaOne conference and it's clearly Sun and the Java community's most current entry to the RIA competition. JavaFX is actually intended to be a family of products initially comprised of JavaFX Script and JavaFX Mobile. JavaFX Script (JavaFX for short) is a scripting language meant to provide rich user interfaces using syntax that resembles JavaScript and Scalar Vector Graphics (SVG). As its name implies, JavaFX Mobile is intended for use on mobile platforms. |
First of all, you have to control the HTML produced by your framework and be able to adapt the Web components for your application if you want to implement conventions that minimize configuration. There are highly customizable Web frameworks, such as JavaServer Faces (JSF), but their components are not always easy to customize. For example, if you want to change the HTML produced by a JSF component, you normally have to recode the component's renderer and implement a new custom tag. It would be much simpler if you just had to change the HTML in a JSP file. This article shows that it is possible to let the developer be in charge of the framework by creating JSP-based components. |
Ajax, or Asynchronous JavaScript and XML, is an approach to Web application development that uses client-side scripting to exchange data with the Web server. As a result, Web pages are dynamically updated without a full page refresh interrupting the interaction flow. With Ajax, you can create richer, more dynamic Web application user interfaces that approach the immediacy and usability of native desktop applications. |
JSON does have its drawbacks. Using the JSON approach illustrated here, there's no way to tailor objects' serialization on a per-request basis, so unneeded fields may often be sent across the network. Additionally, adding toJSONObject() methods to each JavaBean does not scale well, although it would be fairly straightforward to write a generic JavaBean to a JSON serializer using introspection and annotations. Finally, if your server-side code is service oriented and not tailored solely to handling requests from an Ajax client, XML is a better choice because of its ubiquitous support. |
Most code examples you will encounter of asynchronous Ajax polling with XMLHttpRequest() check only for receiving a 200 OK status code. I would recommend enhancing these checks to include several other possible statuses, as well as a "pseudo-status" for outright timeouts. In a recent developerWorks tip of mine, "Avoid unnecessary Ajax traffic with session state" (see Resources for a link), I gave an example of utilizing the 304 status code, which continues to be a good idea in general. |
The previous two Crossing borders articles (see Resources) walked you through Streamlined, a Rails add-on that makes effective use of scaffolding to generate simple, Ajax-enabled user interfaces quickly. Unless you've been hiding under a rock, you recognize Ajax as a programming technique that uses XML, JavaScript, and Web standards to create highly interactive Web pages, such as those you'll find at Google Maps and hundreds of other sites. Several readers of the Streamlined articles asked me to describe the way Ajax works on Ruby on Rails. This article walks through a couple of simple Ajax examples and, along the way, shows you what makes the Ruby/Ajax combination so successful. In the next article in this series, I'll dig into JavaScript as a programming language. |
Contrary to what you might expect, GWT applications are remarkably un-Weblike. GWT essentially exploits the browser as a run-time environment for lightweight GUI applications, and the result is much closer to what you might develop with Morfik, OpenLaszlo, or even Flash, than to normal Web applications. Accordingly, GWT is best suited to Web applications that can exist as a rich Ajax GUI on a single page. It's probably no coincidence that this characterizes some of Google's recent beta releases, such as its Calendar and Spreadsheets applications. These are great applications, but you can't solve all business scenarios using this approach. The majority of Web applications fit quite comfortably into the page-centric model, and Ajax lets richer interaction paradigms be employed where needed. GWT does not play nicely with traditional page-centric applications. Although it's possible to combine GWT widgets with normal HTML form inputs, the state of a GWT widget is fenced off from the rest of the page. For example, there's no straightforward way to submit the selected value from a GWT Tree widget as part of a regular form. |
In the simplest terms, DWR is an engine that exposes methods of server-side Java objects to JavaScript code. Effectively, with DWR, you can eliminate all of the machinery of the Ajax request-response cycle from your application code. This means your client-side code never has to deal with an XMLHttpRequest object directly, or with the server's response. You don't need to write object serialization code or use third-party tools to turn your objects into XML. You don't even need to write servlet code to mediate Ajax requests into calls on your Java domain objects. |
In this article, you'll install and configure your database -- the back end of your Web application -- create a database schema, and learn about some simple tools for populating it with data. The database you'll be using is Apache Derby, a 100% pure Java? relational database that was originally developed under the name Cloudscape ?. Eventually, the Cloudscape code was acquired by IBM®, which donated an open source version of it to the Apache project. The same project is also distributed by Sun Microsystems under the name JavaDB, which is not at all confusing. |
When it comes to Ajax, the reality is that it involves a lot of technologies -- to get beyond the basics, you need to drill down into several different technologies (which is why I'll spend the first several articles in this series breaking apart each one of them). The good news is that you might already know a decent bit about many of these technologies -- better yet, most of these individual technologies are easy to learn -- certainly not as difficult as an entire programming language like Java or Ruby. |
Asynchronous JavaScript and XML (Ajax) is a new way to build rich Web applications using native browser technology. For developers coding complex applications that require some type of "alive" user interface, JavaScript has been the way to go. However, JavaScript is difficult to code, debug, make portable, and maintain. Using an Ajax toolkit can help minimize many of the common issues with JavaScript and Ajax. Good Ajax toolkits provide a set of reusable widgets, a framework for extending and creating widgets, an event system, JavaScript utilities, and enhanced asynchronous server invocation support. In this paper, we'll talk about using the Dojo toolkit for building enterprise SOA clients for Java EE applications. We'll also use JSON (JavaScript Object Notation)–RPC to invoke the server-side Java objects. |
In these examples we start off with using E4X on a command-line with Rhino, and then we move to using it inside a browser with Mozilla, demonstrating the AJAX model. In the second paper, we will show you how you can use E4X inside a server by embedding Rhino inside the Apache Axis Web services engine. But before we move on to Web services, we will show you the basics of XML programming in E4X. |
In this installment of Considering Ajax, I discussed the hype that currently surrounds this technology. You also saw that reliable frameworks are still under construction, and that you should worry about navigation history, bookmarkability, feedback, persistence, concurrency, and security. |
Going back to the Amazon.com example, imagine that you click a link to view information about a book on design patterns. In Amazon.com's current application, the link click action sends a variety of information identifying the requested resource. It also sends various session-state artifacts that let the server create a new page that includes prior session state (such as recently viewed items), personalization information (such as "you purchased this book in 1999"), and the actual business resource itself. The application is very dynamic and highly personalized -- but not cacheable and not natural scalable (though as Amazon demonstrates, these architectural problems can be overcome with millions of dollars of infrastructure engineering). Now consider this action in the (imaginary) Ajax version of the application. No processing needs to occur with regard to "recently viewed items." This is simply information already present in the page that won't go away when you click on a link. Two requests will likely be related to the design patterns book: |
In the last article in this series, I provided a solid introduction to the XMLHttpRequest object, the centerpiece of an Ajax application that handles requests to a server-side application or script, and also deals with return data from that server-side component. Every Ajax application uses the XMLHttpRequest object, so you'll want to be intimately familiar with it to make your Ajax applications perform and perform well. |
Abstract: Many-to-many (m:m) relationships can be tricky to deal with in a Web application. In this installment of Mastering Grails , Scott Davis shows you how to implement m:m relationships in Grails successfully. See how they're handled by the Grails Object Relational Mapping (GORM) API and the back-end database. Also find out how a bit of Ajax (Asynchronous JavaScript + XML) can streamline the user interface. |
Notice that this file is an empty interface at the moment, but Cypal Studio has created a utility object for returning a fully GWT-certified instance suitable for your remote calls. "Build an Ajax application using Google Web Toolkit, Apache Derby, and Eclipse, Part 3" contains similar code, along with the suggestion that it might be useful to create a common method for the boilerplate code. |
Form auto-saving should not interfere with the functionality of the application. This means no JavaBean properties should be set and no action method should be invoked when the form is submitted with Ajax for auto-saving purposes. In addition, no HTML response should be generated after an auto-save because the browser doesn't need any refresh. Therefore, the application needs to control the JSF request processing life cycle, which can be easily done by implementing a PhaseListener. In the sample application included with this article, the JSF listener class is named AutoSaveListener and is configured in the faces-config.xml file (see Listing 11): |
For years, the goal of creating a truly responsive Web application was hampered by one simple fact of Web development: To change the information on part of a page, a user must reload the entire page. Not anymore. Thanks to asynchronous JavaScript and XML (Ajax), we can now request new content from the server and change just part of a page. This tutorial explains how to use Ajax with PHP and introduces the Simple Ajax Toolkit (Sajax), a tool written in PHP that lets you integrate server-side PHP with JavaScript that makes this work. |
To make all this flash and wonder actually happen, you need to become intimately familiar with a JavaScript object called XMLHttpRequest. This little object -- which has actually been around in several browsers for quite a while -- is the key to Web 2.0, Ajax, and pretty much everything else you learn about in this column for the next several months. To give you a really quick overview, these are just a few of the methods and properties you'll use on this object: |
Abstract: You might get a thrill out of writing Ajax applications, but unit testing them is surely painful. In this article, Andrew Glover takes on the downside of Ajax (one of them, anyway), which is the inherent challenge of unit testing asynchronous Web applications. Fortunately, he finds it easier than expected to tame this particular code quality dragon, with the help of the Google Web Toolkit. |
The key difference between an Asynchronous JavaScript + XML (Ajax)-enabled Web application and a traditional Web application is the A in Ajax: asynchronous. An Ajax application allows the browser to update a specific part of the page without having to completely refresh the entire page. This simple trick enables a much more interactive user experience, as a simple Web page now behaves much more like a desktop application. |
The Plants by WebSphere application is just one example of how you can apply the IBM Feature Pack for Web 2.0 to create Ajax-style architectures for existing J2EE applications. The Feature Pack ships with a variety of client-side and server-side technologies that you can deploy together or independently with your Web application. Additional information is available with the Feature Pack download (see the Resources section for information). |
In the first two installments of this five-part tutorial series you explored JavaServer? Faces (JSF) -- a new Java-based framework that makes it easier to build graphical user interfaces (GUIs) for Java? Platform, Enterprise Edition (Java EE) applications -- built and successfully deployed a simple JSF application on Apache Geronimo, and learned how to integrate Apache Tomahawk -- which provides several custom, 100% JSF-compatible components -- with your application to improve the interface. In this tutorial, Part 3, you'll get familiar with the Sun Ajax4jsf open source framework, which adds Asynchronous JavaScript? + XML (Ajax) capabilities to JSF applications without having to write any JavaScript code. You'll use Ajax4jsf to enhance your example application and create an Ajax-enabled front end. |
Throughout this series, you learned how to simplify Ajax and Java development, using JSP tag files, JSP EL, JSTL, dynamic attributes, code generators, conventions, and JavaScript object hierarchies. In this final part of the series, you learned how to use deferred values and deferred methods in custom JSP tags to create JSF-like components. |
The newness of the Ajax/REST architectural style presents challenges to organizations that have traditionally used the server-side Web application style. Though Ajax has several compelling architectural advantages over the traditional model, an immediate and total transition to a pure Ajax/REST architecture isn't realistic for all organizations. Those that lack Ajax development skills can begin their Ajax exploration by incrementally adding Ajax functionality to existing server-side Web architectures. As these organizations begin to gain experience with Ajax/REST, they can confidently attempt more interesting and ambitious projects. |
GWT makes building a rich Ajax browser client interface even easier than building traditional Java GUI interfaces. As fabulous as GWT is, however, it can't create an entire Web application by itself. You must still have a data store on the server and some kind of framework for converting that data into Java objects that GWT can pass from the server to its client. In this series of articles, you'll use Apache Derby, a 100% pure Java database that you can embed in the same Java Virtual Machine (JVM) as the rest of your server-side code. |
This article (the third and final part of the series) modifies the SupportForm.jsp page so that its data can be restored after the user closes and reopens the browser. The ViewRestorer class provides JSF listener methods that handle the restore requests. You might experience difficulties in understanding the sample code of Part 3 if you aren't familiar with the JSF request processing life cycle. Part 1 contains a brief overview of this JSF mechanism and all articles of the series provide as many details as possible about the used JSF features. You can also find a full description of the request processing life cycle in the JSF specification. |
More recently, Asynchronous JavaScript and XML (AJAX, known as Ajax) has become very popular, because it can greatly enhance the user experience of Web-based applications. However, it is difficult to develop Ajax applications without using an Ajax framework. Fortunately, JWL, which is available in IBM® Rational® Software Architect Version 7.0, provides Ajax functionality through JSF components. This JWL support makes it easier to develop Ajax-supported JSF components. |
Within the article, I show how to build a cascading drop-down control that dynamically populates values in an HTML SELECT control based on other form field values. I also describe how to build an auto-complete control, similar to Google Suggest, that displays a suggestion list that is updated in real time as a user types. You'll build the controls by integrating JSON, JavaScript, CSS, HTML, and Java EE technologies. |
However, there are times when you'll use JavaScript as more than just a format language. In these cases, you're actually using objects in the JavaScript language to represent data, and going beyond just shuttling data from Web forms into requests. In these situations, it's more work to extract data from the objects in JavaScript and then stuff that data into name/value pairs or XML. This is where JSON shines: It allows you to easily turn JavaScript objects into data that can be sent as part of a request (synchronous or asynchronous). |
This first article in the four-part series presents a JSP-based technique for generating JavaScript code, significantly reducing the amount of code you have to write manually. The sample application shows how to generate JavaScript functions for sending Ajax requests and processing Ajax responses. You can use the simple techniques discussed here in a real application if you want to be able to change the Ajax code easily. The broader goal of this article is to demonstrate how to use JSP tag files to produce JavaScript code for any purpose, not just Ajax routines. |
Why not generate the Web presentation layer to create, add, list, delete, and search these elements from the annotated beans? And why not make this presentation a friendly Ajax experience? These are the main goals of the jpa2web tool, which has the following process flow: |
When you use Ajax in Java Web development, it is important to understand fully the difference between the synchronous and asynchronous communication models (see Resources). Lack of support for the asynchronous communication model can have an impact on client-side development, integration with Web frameworks, use of tag libraries, IDE use, and threading behavior. |
Over the course of this article series on GWT, you've built a simple Web application that demonstrates how you can use GWT with a database back end to create a robust Web application with rich client behavior. Even after four articles, you've only scratched the surface of what GWT has to offer. Powerful features -- such as JUnit test integration, using other Web services through JavaScript Serialized Object Notation (JSON) data exchange, and the new GWT internationalization features -- are well worth your time to check out. GWT development continues to grow, and new features and add-on tools are being added all the time. I hope that you'll be able to take a look around and find the tools you need to build the application you want. |
You might want to use AjaxTags in a number of typical situations where you not only want to make things easier for yourself as a developer but also improve the user experience for those using your application. Some of these use cases include: |
In this article, you'll learn how to build a thread-safe data repository for keeping auto-saved form data. You'll see how to choose data structures, how to populate them with the form data extracted from the JSF component tree, how to restore the state of the JSF components, how to limit the memory resources of the data repository, and how to implement its persistence. You'll also learn several Web techniques, such as using filters and browser ID cookies. |
Abstract: This first article in a series on overhauling existing sites with Asynchronous JavaScript + XML (Ajax) shows you how to eliminate pop-up windows and navigational dead-ends with simple modal windows. |
Most automated screen testing tools explicitly state that they do not support DHTML. With dynamic HTML that moves things around and dynamically changes the DOM structure, automated testing tools have no chance to make sense of what the UI looks like, and, more importantly, how they can drive it. Consider a site like Start.com and imagine how you would test it. I have no idea how you'd go about doing this, other than by hiring low-wage testing drones. |
This article discusses Grails support for the complementary technologies JSON and Ajax. After playing supporting roles in previous Mastering Grails articles, this time they take center stage. You will make an Ajax request using the included Prototype library as well as the Grails tag. You'll also see examples of both serving up local JSON and dynamically pulling in remote JSON from across the Web. |
If a Web page has unique styles, you can define style rules within the |