Level 3.1 CBT course on Web 2.0 Advanced

Slide 1: 

29/02/2008 TPG Confidential 1 Technology Practices Group Java Competency Framework "Incubate, Nurture and Deploy Technology Experts Innovate, Build and Deliver Technology Solutions”

Slide 2: 

29/02/2008 TPG Confidential 2 Introduction

Slide 3: 

29/02/2008 TPG Confidential 3 Web2.0 Advanced

Slide 4: 

29/02/2008 TPG Confidential 4 What is Web 2.0 ? Web 2.0 represents a broad collection of recent trends in Internet technologies and business models.  Particular focus has been given to user-created content, lightweight technology, service-based access and shared revenue models. With Web 2.0, web sites are becoming user-driven, not owner-driven. Users can add their own content, and they can tag their own content as well as content that other people have added -- thus, the data is organized by the public's needs. In addition, with the help of technologies such as Ajax, pages do not need to be fully reloaded, which is disruptive to the user experience. Instead, information fragments are passed asynchronously behind the scenes, causing only small portions of the page to be redrawn, giving the user an experience that more closely matches that of using a desktop application.

Slide 5: 

29/02/2008 TPG Confidential 5 Moreover many recently developed concepts and technologies are seen as contributing to Web 2.0, including weblogs, linklogs, wikis, podcasts, RSS feeds and other forms of many to many publishing; social software, web APIs, web standards, online web services, and others.

Slide 6: 

29/02/2008 TPG Confidential 6 Web 2.0 characteristics: Promoting participation: blogs, wikis, and social computing Personal profiles, blogs, and wikis provide simple tools that allow people to communicate without understanding underlying Web and browser technologies. Using them, people can share their interests and expertise, and create collaborative content. By using social book marking, people share their links to content and services, making it easier for others to find them. By tagging and rating these links, the content of the Web is categorized and rated according to the interests of consumers. All of this has resulted in a richer, better-connected Internet in which individuals can meet and communicate with each other on topics of common interest more easily than through any previous medium.

Slide 7: 

29/02/2008 TPG Confidential 7 Promoting syndication and reuse: services, feeds, and widgets Syndicated news feeds —simple streams of stories and information formatted in XML according to the RSS or Atom protocols—are now widespread and enable aggregator sites to carry a vast array of content and let individuals create their own aggregations. Syndication of site content as a Web 2.0 feature, involving as it does standardized protocols, which permit end-users to make use of a site's data in another context (such as another website, a browser plugin, or a separate desktop application). Protocols which permit syndication include RSS (Really Simple Syndication — also known as "web syndication"), RDF (as in RSS 1.1), and Atom, all of them XML-based formats. Observers have started to refer to these technologies as "Web feed" as the usability of Web 2.0 evolves and the more user-friendly Feeds icon supplants the RSS icon

Slide 8: 

29/02/2008 TPG Confidential 8 Feeds are an example of services created according to RESTful principles, a set of design and implementation prescriptions that aim to result in the creation of services that are as scalable and easy to use as the Internet as a whole (REST stands for Representational State Transfer). Many Web sites make their content and functionality available as RESTful services so that they can be incorporated into other Web applications. At the same time, open standards and SOA advancements have made many services and information sources available through robust, secure Web services

Slide 9: 

29/02/2008 TPG Confidential 9 A "mashup" is a lightweight tactical integration of multi-sourced applications or content into a single offering. Because mashups leverage data and services from public Web sites and Web applications, they’re lightweight in implementation and built with a minimal amount of code. Their primary business benefit is that they can quickly meet tactical needs with reduced development costs and improved user satisfaction. Because they combine data and logic from multiple sources, they’re vulnerable to failures in any one of those sources. Frequently, such applications mix operational data with news and events, financial information, or weather. People use mashups to combine external services and information with their own data, such as their holiday plans or the customer with whom they're dealing, in an application that brings together all the information and function they need in one place. Promoting agility: situational applications and mashups

Slide 10: 

29/02/2008 TPG Confidential 10 Mashups Contd: housingmaps.com, which combines Google Maps with Craigslist apartment rental and home purchase data to create an interactive housing search tool, is the pre-eminent example of such a mashup.

Slide 11: 

29/02/2008 TPG Confidential 11 Rich interfaces: This reduces barriers to interacting with, or transacting through, computers by making their interfaces more familiar and intuitive. Rich-Internet application techniques such as AJAX, Adobe Flash, Flex, Java, Silverlight and Curl have evolved that have the potential to improve the user-experience in browser-based applications. Approaches like Asynchronous JavaScript + XML (Ajax) and supporting technologies, such as the Dojo framework, have made possible a new style of richly featured, responsive browser application that aren't tied to a pattern of requesting whole Web pages from a server. These applications use desktop-like UI features, such as drag-and-drop, behind-the-scenes server communication to retrieve data asynchronously from the server while the user is free to work elsewhere within the page, and advanced graphical techniques to present information in a more visually appealing or dynamic form

Slide 12: 

29/02/2008 TPG Confidential 12 Scripting Languages and Web 2.0 The reason why dynamic languages like Perl, Python, PHP and Groovy are so popular these days is because unlike applications from the previous paradigm where they were released in one to three year cycles, they are updated every day, sometimes every hour. Rather than being finished paintings, they are sketches, continually being redrawn in response to new data. The open source dictum, "release early and release often" in fact has morphed into an even more radical position, "the perpetual beta," in which the product is developed in the open, with new features slipstreamed in on a monthly, weekly, or even daily basis. It's no accident that services such as Gmail, Google Maps, Flickr, del.icio.us, and the like may be expected to bear a "Beta" logo for years at a time

Slide 13: 

29/02/2008 TPG Confidential 13 The major reason why scripting languages exist these days is because they are a must go for rapid application development .It is easy to develop using a scripting language . One such popular scripting language for Java Platform is Groovy which is introduced in next slides. Another language discussed for developing rich user interfaces for Web 2.0 application is Adobe Flex which is covered later

Slide 14: 

29/02/2008 TPG Confidential 14 GROOVY Introduction Groovy is an object-oriented programming language for the Java Platform as an alternative to the Java programming language. Alternative means that one can use Groovy for Java programming on the Java platform in much the same way one would use Java code

Slide 15: 

29/02/2008 TPG Confidential 15 Why GROOVY? More productive language than Java Dynamic language designed especially for Java Platform Effortless transition from Java to Groovy as Groovy is based on Java’s syntax and libraries, which are known to Java programmers. Groovy feels like Java with fewer restrictions,permits dynamic types and eases syntactical constructs Groovy code combines well with Java code when writing new applications, and can also be used to extend existing ones Provides a shell interpreter Lots of reusable Java software, components and tools

Slide 16: 

29/02/2008 TPG Confidential 16 Groovy Background First Release of Groovy 1.0 in January 2007 Groovy 1.5.6 is the latest official stable release on April 25, 2008 (supports Java 5 features and enterprise frameworks like Spring, Hibernate, Java Persistence API ) Along with new features, this new release of Groovy brings noticeable performance improvements as well as lower memory consumption, compared to previous versions .

Slide 17: 

29/02/2008 TPG Confidential 17 Features No Compilation Groovy scripts are interpreted when they are run, much like JavaScript is interpreted by the browser when a Web page is viewed. Runtime evaluation comes at a cost in terms of execution speed, which could rule out the use of scripting languages in performance intensive projects, but compilation-free coding offers tremendous advantages when it comes to the build-and-run cycle. Runtime compilation makes Groovy an ideal platform for rapid prototyping, building various utilities, and testing frameworks.

Slide 18: 

29/02/2008 TPG Confidential 18 Extremely flexible syntax Groovy greatly simplifies the core library usage and constructs of the language on which it's modeled, which in this case is the Java language. Classes Groovy defaults everything defined in a class to public, unless a specific access modifier has been defined. Moreover, dynamic typing applies to fields and methods, and return statements are not required. package org.acme.groovy class Song { def name def artist def genre }

Slide 19: 

29/02/2008 TPG Confidential 19 def repeat(val){ for(i = 0; i < 5; i++){ println val }} Ranges facilitate looping quite nicely. For instance, A range would make above for loop cleaner and nicer to read: def repeat(val){ for(i in 0..5){ println val }} Groovy supports default parameter values which allow you to specify a parameter's default value in the formal definition of a function or method. Callers to the function can opt to omit the parameter and accept the default value. Looping through Groovy

Slide 20: 

29/02/2008 TPG Confidential 20 def repeat(val, repeat=5){ for(i in 0..<repeat){ println val }} One can call the function, as follows repeat(“ Hello World", 2) repeat(“ Goodbye sunshine", 4) repeat(“ foo") Looping through Groovy (Contd..)

Slide 21: 

29/02/2008 TPG Confidential 21 Defs Groovy also lets you create first class functions, which are, in essence, objects themselves. These are declared with the def keyword and exist outside a class definition. class Song{ length name } class Book{ name author } def doSomething(thing){ println "going to do something with a thing named = " + thing.name } mySong = new Song(length:90, name:"Burning Down the House") myBook = new Book(name:"One Duck Stuck", author:"Phyllis Root") doSomething(mySong) //prints Burning Down the House doSomething(myBook) //prints One Duck Stuck anotherSomething = doSomething anotherSomething(myBook) //prints One Duck Stuck

Slide 22: 

29/02/2008 TPG Confidential 22 Because the doSomething function does not define a type for its input parameter, any object will work so long as the object contains a name property. In addition to demonstrating dynamic typing in Groovy, the above listing also reveals, in its last two lines, how easy it is to create a reference to a function.

Slide 23: 

29/02/2008 TPG Confidential 23 A closure in Groovy is an anonymous chunk of code that may take arguments return a value reference and use variables declared in its surrounding scope Closures are first class objects that are similar to anonymous inner classes found in the Java language. Closures can have names and can be assigned Looks like ordinary code blocks, but are not executed until the call() is made on the closure Closures

Slide 24: 

29/02/2008 TPG Confidential 24 def excite = { word -> return "${word}!!" } Above closure named excite takes one parameter (named word) and returns a String with the word variable along with two exclamation points. Closure parameters are listed before the -> token, like above. The -> token is optional and may be omitted if your closure definition takes fewer than two parameters. You can call closures one of two ways: either directly or via the call() method. Add the following two lines of code below the closure's definition: assert "Groovy!!" == excite ("Groovy") assert "Java!!" == excite.call ("Java") Either style of invocation works Closures (Contd..)

Slide 25: 

29/02/2008 TPG Confidential 25 Transition from Java to Groovy A Java program that checks a java.util.List for all words that contains an 'a' import java.util.*; public class AStrings { public static void main(String args[]) { List aList = new ArrayList(); aList.add("Jim"); aList.add("Joan"); aList.add("James"); List aWords = new ArrayList(); for (String item : aList) { if (item.contains("a")) { aWords.add(item); } } for (String item : aWords) { System.out.println(item); } } }

Slide 26: 

29/02/2008 TPG Confidential 26 aList = ["Jim", "Joan", "James"] aWords = aList.findAll { it.contains("a") } aWords.each { println it } The it variable inside the closure is a keyword that points to the individual value of the outside collection being invoked The block of code signified by the {} is what's known as a closure. Rather than having to obtain an Iterator and directly manipulate it, you can just iterate over a collection directly as shown A Relatively shorter Groovy Script

Slide 27: 

29/02/2008 TPG Confidential 27 Any mapping mechanism in Groovy is an instance of java.util.Map under the hood You could write a Java-based map in Groovy as def hash = [name:“ Andy", "VPN-#":45] The keys in a Groovy map don't have to be Strings. In this case, name looks like a variable, but behind the scenes Groovy will make it a String. If you want to add a new name-value pair to the map (say dob and "01/29/76") you could do it, like so: hash.dob = "01/29/76" The . notation also works for obtaining items. For instance, assert hash.dob == "01/29/76" Groovy maps

Slide 28: 

29/02/2008 TPG Confidential 28 package org.acme.groovy class Song { name artist genre } package org.thirdparty.lib import org.acme.groovy.Song class SongExample { static void main(args) { def sng = new Song (name:"Le Freak", artist:"Chic", genre:"Disco") }} Groovy defaults everything defined in a class to public, unless a specific access modifier has been defined. Moreover, dynamic typing applies to fields and methods, and return statements are not required Classes in Groovy

Slide 29: 

29/02/2008 TPG Confidential 29 Groovy automatically gives you a constructor that takes a map of name-value pairs, which correspond to class properties. This is an out-of-the-box feature of Groovy — for any properties you define in a class, Groovy permits you to pass a map full of values into a constructor. You can just as well add this code, too: def sng2 = new Song(name:"Kung Fu Fighting", genre:"Disco") You are also free to directly manipulate properties of a class, like so: def sng3 = new Song() sng3.name = "Funkytown" sng3.artist = "Lipps Inc." sng3.setGenre("Disco") assert sng3.getArtist() == "Lipps Inc." Classes in Groovy (contd..)

Slide 30: 

29/02/2008 TPG Confidential 30 Not only did Groovy create a constructor that permits passing in a map of properties and their values, but also you can semi-directly access properties via the . syntax. Moreover, Groovy also generated normal setter and getter methods. What's particularly groovy about Groovy, when it comes to property manipulation, is that setters and getters are always called — even if you access a property directly via the . syntax. Classes in Groovy (contd..)

Slide 31: 

29/02/2008 TPG Confidential 31 println sng3 All that the above statement does is print the default toString() implementation of all objects in Java, namely the class and it's hashcode. In your Song class, add the following code: String toString(){ "${name}, ${artist}, ${genre}" } Groovy lets you omit the return statement assuming that the last line in a method should be returned. So in this case, a String is returned containing the values of the class's properties Method overriding

Slide 32: 

29/02/2008 TPG Confidential 32 Groovy scripts are actually Java classes on the byte code level. As a result, you can easily compile a Groovy script using groovyc. groovyc can be utilized via the command line or Ant to produce class files for scripts. These classes can be run with the normal java command, provided that the classpath includes groovy.jar and asm.jar, which is ObjectWeb's bytecode manipulation framework Compilation

Slide 33: 

29/02/2008 TPG Confidential 33 Miscellaneous Free package Imports of java.io.*,,java.lang.*,java.math.BigDecimal,,java.math. BigInteger ,java.net.* ,java.util.*,,groovy.lang.*,groovy.util.* Semicolons and return keyword is optional Methods and classes are public by default. Inner classes are not supported at the moment. In most cases you can use closures instead. Powerful Switch statement you can embed expressions inside strings The throws clause in a method signature is not checked by the Groovy compiler, because there is no difference between checked and unchecked exceptions

Summary : 

29/02/2008 TPG Confidential 34 Summary Groovy is Java without a lot of the syntactical rules one is used to. Groovy is Java without types modifiers returns Iterators importing collections In short, Groovy is Java without a lot of the baggage that can weigh down Java projects when one really need them to fly. And yet, under the hood, Groovy is just Java.

Slide 35: 

29/02/2008 TPG Confidential 35 FLEX Introduction Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems Flex is a great solution for Java developers because it enables them to utilize the power of Java servers while creating expressive and interactive interfaces with a technology that has almost 100% deployment in browsers.

Flex ( Contd…) : 

29/02/2008 TPG Confidential 36 Flex applications are SWF files. Flex is a programmer-centric way to create Flash-based rich internet applications. Flex applications are rendered using Flash Player 9. Like all Flash RIAs(Rich Internet Applications), Flex SWF files are processed by the client, rather than the server. Flex can connect to server-based applications like ColdFusion, PHP, ASP.NET and Java. You can retrieve plain text or XML data via HTTP. You can retrieve Simple Object Access Protocol (SOAP) messages using web services. You can work with Java remote objects (POJOs, JavaBeans, EJBs and ColdFusion Components) using LiveCycle Data Services (previously Flex Data Services). Flex ( Contd…)

Components of Flex application : 

29/02/2008 TPG Confidential 37 Components of Flex application Data Rendering XML based markup language (MXML) MXML-defined user interfaces are rendered by Flash Player, providing the users with a great experience Scripting language (ActionScript) Programmatic logic to respond to the user interactions with your application by coding event handlers Data Services Flex data services ES It enables RIAs to talk to back-end data and business logic in a faster, more efficient operating model Flex Messaging Flex Messaging adds realtime data push and publish/subscribe Flex Remoting Flex Remoting provides ActionScript Message Format (AMF) to provide a fast, efficient means of transporting data to your RIA which accelerates application performance

Case Study : 

29/02/2008 TPG Confidential 38 Case Study Here is an example of a login application

Case Study (Contd…) : 

29/02/2008 TPG Confidential 39 Case Study (Contd…) The login application consists of Login.mxml Login.html ControllerServlet.java POJO LoginDAO.java ResponseFormatter.java Home.html Home.mxml

Case Study (Contd…) : 

29/02/2008 TPG Confidential 40 Case Study (Contd…) Login.mxml Once the mxml is compiled and executed using Flex builder it generates Login.html Login-debug.html Login-debug.swf Login.swf playerProductInstall.swf

Case Study (Contd…) : 

29/02/2008 TPG Confidential 41 Case Study (Contd…) The login.html is a wrapper to the existing login.mxml and would have an embed tag for the login.swf as below:

Slide 42: 

29/02/2008 TPG Confidential 42 <embed src="Login.swf" quality="high" bgcolor="#869ca7" width="100%" height="100%" name="Login" align="middle“ play="true“ loop="false" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"> </embed> </object> </noscript> Case Study (Contd…)

Case Study (Contd…) : 

29/02/2008 TPG Confidential 43 Case Study (Contd…) The ControllerServlet.java is a normal java HTTPServlet which gets the user details from the request parameters The user details (login userid and password) are mapped into a POJO using accessor methods The servlet through delegators (java class) invokes LoginDAO.java LoginDAO.java connects to the database and checks for authorization and authenticity of the user and sends a positive/error response back to the controllerservlet. The ResponseFormatter formats the response from the DAO into xml The ControllerServlet checks for the response If it is an error, the user is directed to the Home.mxml with an error message If the response is positive (i.e., if the user is valid) the user is directed to Home.mxml with data being populated in it.

Case Study (Contd…) : 

29/02/2008 TPG Confidential 44 Home.mxml would display the response Case Study (Contd…)

Communication : 

29/02/2008 TPG Confidential 45 Flex is an extensible RIA framework that provides several ways to communicate with your J2EE components. Flex offers HTTP communication Web service communication Macromedia's proprietary AMF (ActionScript Messaging Format) gateway. Flex offers MXML tags for each of these communication protocols, which significantly reduces the coding complexities. Furthermore, Flex allows you to invoke remote calls to your business tier in either an asynchronous or synchronous manner Communication

HTTP communication : 

29/02/2008 TPG Confidential 46 The HTTPService class makes HTTP(S) requests (mostly GET or POST) which may transport various content types, from simple URLencoded variables to more complex data like XML. Basically, this is the choice for Representational State Transfer (REST) web services architecture. Most of the time, an HTTPService object is used to communicate with a simple script or page like a JSP page, an ASP page or a PHP script. Obviously, the value of the HTTPService url property is the URL of this page. HTTP communication

HTTP communication (Contd…) : 

29/02/2008 TPG Confidential 47 The transported data is sent and received as plain text, meaning that you'll have to map the received data to the corresponding ActionScript data type on the Flex side, and to the corresponding server-side technology data type on the server side. HTTP communication (Contd…)

Web service communication : 

29/02/2008 TPG Confidential 48 The WebService class sends and receives SOAP messages over HTTP. This is what you'll use to communicate with SOAP WebServices. To connect to this WebService and call its operations (i.e. its methods), you'll have to hook this object to the WebService's Web Service Definition Language (WSDL) by setting its URI as the wsdl property value. All ActionScript primitive types and some built-in ActionScript complex types are automatically mapped from and to SOAP/XMLschema data. This process is handled on the Flex side, by the WebService class. However, you'll still have to implement your own mapping procedure for custom classes. Web service communication

RemoteObjects : 

29/02/2008 TPG Confidential 49 The RemoteObject class is responsible for sending and receiving ActionScript Message Format (AMF) data. This technique is also called Remoting. AMF is not a transfer protocol: it is binary ActionScript. AMF3 is the binary format for AS3.In this case, AMF is transported over HTTP, but it can also be transported over real time communication protocols. Exchanging data using AMF is dramatically faster than any other mean of communication. Besides, it allows the Flex client to send and receive ActionScript strongly typed objects. With Remoting, the ActionScript serialization/deserialization process takes place on the server side. You'll have to have a server side tool that enables this AMF serialization/ deserialization : this is what we call an AMF Gateway (or Remoting Gateway). With Remoting, you can transport built-in primitive and complex data (as with a WebService) but also custom typed objects. This way, you're able to automatically map a server side Value Object to and from an ActionScript Value Object. To do so, you simply have to add a RemoteClass Meta data to your ActionScript ValueObject Class Definition. RemoteObjects

RemoteObjects(Contd…) : 

29/02/2008 TPG Confidential 50 RemoteObjects(Contd…)

Case Study (Contd…) : 

29/02/2008 TPG Confidential 51 A few sample commonly used UI components Mx:Application Used when a particular MXML needs to be made the main page of the application Mx:Canvas Container which can contain any of flex components having “absolute” layout Mx:HBox Container which defines only horizontal layout for the components that get added to it Mx:VBox Container which defines only vertical layout for the components that get added to it Case Study (Contd…)

Case Study (Contd…) : 

29/02/2008 TPG Confidential 52 Mx:TextField Textfield which has a provision to enter/display data like in HTML Mx:Label Label which is used to display data on the screen Mx:Button Defines the button component Mx:Datagrid Defines a table which can hold data which can be edited/displayed with the help of datagrid columns. The data is populated through itemRenderers. There are many more such components like “accordian” used to provide enhanced look and feel and provide better features than the regular HTML. Action script functions enable the user to interact with the application. Case Study (Contd…)