Flex and RIA

Flex is the application building framework from Adobe which adds a lot of value in developing application for Rich UI and better user experience. Lets begin with Rich Internet application development.

What is Rich UI?
UI looking like Windows application, Swing application with widgets like Tabbed pane etc. HTML does not provide any standard tags for these complex widgets. There are frameworks – server-side and client side which does the trick.

What are the RIA options present?
If we look into the space of RIA frameworks different names will come into pictures – AJAX frameworks, JSF, Open Lazlo, Flex, Applets.

AJAX frameworks: AJAX frameworks are java-script based frameworks – which uses some java script functions plus some Java script libraries to develop Rich UI. People with HTML/JS skill-set can work with this easily. Cross browser support for all browsers is not present in all the libraries.

JSF: Sun has put a lot thrust behind this so that this becomes a front end framework. Its server-side – which means tag library driven and its HTML. There are frameworks like Jboss seam – which tries to put together UI framework and back-end frameworks together to provide seamless integration between layers.

JSF in action: http://www.irian.at/myfaces/home.jsf

XUL – XML based UI development for Mozilla and Firefox. Do not seem fully supported by IE. IE7 has support of XAML which is Microsoft version of XUL.

Applets and applet based frameworks: There are a few Applets based RIA options like Canoo (http://www.canoo.com/ulc/). Although Applet has features to build RIA applications its biggest disadvantage continues to be the limited availability of the current version of the technology in Web browsers. Lack of Microsoft support is also part of the reason. Compared to Flex the arguments will be XML based UI development in Flex is an easier programming model than purely java code driven layout design.

Java-script Vs Flash?
Why java and .NET became popular – since its platform independent- i.e. the cost of software development goes down. Same reason applies for flash since it provides a programming model for developing web application tier which is browser independent – thus the development and testing becomes less time-consuming for developing cross browser compliant applications. For all browsers Flash players are available which allows one to develop Web applications quickly – since we testing time is less and less error prone programming model where users don’t have to choice of using browser specific java script or CSS in the first place.


Open Lazlo: Flash based. The programming model is similar to Flex (MXML/Action-script) Vs XML-Java-script. It can generate RIA in Flash as well as DHTML.
Couple of arguments which holds against Open Lazlo compared to Flex:
i) IDE support needs improvement.
ii) Flex is backed by Adobe instead of a group of developers.
iii) Flex is enterprise application framework instead of UI only framework.


Is Flex a RIA framework?

The answer is Yes and NO. Yes since it supports RIA development and No because it is much more than that. It has a set of features under data-services where it provides features like server push, polling which adds a lot of values to enterprise applications.

Is Flex free?

For RIA application development - the SDK is free. Yes, if you want to use your own editors and command line features for compiling the MXML to flash then its free.

The Flex SDK which is free and includes the Flex libraries, the compiler (mxmlc), the debugger, and the documentation.
Flex Data Services (FDS), an optional set of server-side components deployed in your J2EE application server. FDS includes a Java RPC service (sample 3), publish/subscribe messaging (samples 6 and 7), and data management services (sample 8). FDS is free for a single-CPU deployment (FDS Express), and is licensed per CPU when deployed on multiple CPUs.
FlexBuilder, an optional IDE for Flex development. Built as an Eclipse plug-in, FlexBuilder includes a design view and a code view, code hinting, visual debugging, etc. FlexBuilder is licensed on a per developer basis.
Optional charting components licensed on a per developer basis.
We can develop and deploy Flex applications entirely for free using the SDK and the IDE of our choice.

However Flex builder is what developers should adopt – for quick design, preview and compilation, debug and bunch of other features which is present. Not expensive ~ 1000$. We have licenses to be used.

The server-side components for Flex data services (in multi-CPU mode) are comparatively expensive and we have licenses for this as well.

Learning Flex: How difficult is it?

Flex is rather new but concepts are not. People with Action script or Java backgrounds with object oriented concepts seem to pick up Flex well. I hear some people say that “Client server days are back” - i.e. there is a good degree of similarity between Client server programming with VB, or Swing applications and Flex UI widgets, containers etc.


Gottcha’s

Is it all golden? Well – its not.

Few browser/platform compatibility issues: We have come across a few differences in behaviors between Safari in Mac and IE - Windows. I will say that’s just one instance. Other than that it was pretty smooth sailing as far as testing goes across browsers.

Support of Test Automation tools:

Limited. Only with QTP which is a commercial software. A lot of the tools don’t recognize the Flex objects. Few open source tools are there but quite primitive in nature.

How to work with QTP 9.1 and Flex 2.0.1?

Please note, earlier versions of Flex is not supported by QTP. Only 9.1 supports Flex automation. For QTP 9.1 and Flex 2.0.1 – here is the steps
http://weblogs.macromedia.com/lin/archives/2007/01/tips_for_config.cfm

Workaround: If not planning to buy or use trial versions for QTP - develop unit test cases for business tier. The UI widgets from Flex are well tested – and thus regression are more expected to be there in the Business Logic tier and for end to end testing we can manage by using manual testing.

Support of Performance engineering tools:

Limited. Only one which works is Silk performer – which is commercial software.
Open source tools do not work for all scenarios – reason Flex allows to communicate with back-end over many protocols - RTMP(s), AMF(s) and HTTP(s). Out of this Server push is done over RTMP and most of tools support HTTP primarily. Silk Performer supports HTTP and AMF.

Adobe lab has a tool for load testing flex applications which tests for data services. http://labs.adobe.com/wiki/index.php/Flex_Stress_Testing_Framework
As most load testing tool vendors have not yet released support for RTMP(s) or the latest version of AMF(s), the Flex Data Services Stress Testing Framework allows Flex developers to load test their applications that use RTMP and AMF3 without needing to use a commercial testing tool.

Different tool vendors are working towards adding support for Flex/Flash applications and expected to release in near future.

Workarounds: Open source tools like Jmeter provides ways for load testing web services. http://dev2dev.bea.com/pub/a/2006/08/jmeter-performance-testing.html
Thus we can expose the middle tier services as Web services and do load testing at the back end tier. Most of the UI is residing in client and don’t add a whole lot of performance overhead. So overall application performance will be – backend performance plus data transfer time.


I have AJAX enabled application – can I use it with Flex?

Flex can be adopted in pieces – Ex: If we have a real time monitoring system needed in an application we can just use Flex for that – no need to re-architect the entire application.

Yes; http://labs.adobe.com/wiki/index.php/Flex-Ajax_Bridge


What happens if I get stuck during development – can I Google and find the answer?

The community is fast growing. There are forums which help to answer questions other than a pretty well documented help documents. I would say there will be some cases we will need to rely on documentation vs quick solutions from the forums. There are code cookbooks which are being growing so overall help is there and growing.

Forums:

FlexCoder Yahoo group
Cflex.net forum
Adobe Forum on Flex – found some useful responsibility.

Flex resources:

http://www.flex.org/
http://labs.adobe.com/flexproductline/ (there is a lot of info in the community links on this page in the flex forums and MXNA aggregator links)
http://www.cflex.net/http://weblogs.macromedia.com/mc/
http://labs.adobe.com/wiki/index.php/
http://www.iterationtwo.com/frameworks.html
http://video.google.com/videoplay?docid=4762944544960468107 (Kevin Lynch's Web 2.0 Conference Presentation announcing Flex 2.0 and Flash 8.5 - Google Video)
A link from a Flex engineer on RIA design considerationshttp://kuwamoto.org/2005/06/08/seven-ideas-for-building-better-rias/These demos with source code samples may provide ideas for some of UI portions of the DAM and approvals modules that will provide views of asset and product thumbnails http://www.quietlyscheming.com/blog/components/fisheye-component/ http://www.quietlyscheming.com/blog/2006/05/09/animated-dragtile-component-01/

With the formal release of Flex 2 Adobe has launched www.flex.org as an entry point for flex resources and blogs from the engineering team. There are also archived breeze sessions from on line seminars this month at http://www.onflex.org/ted/2006/06/adobe-developer-week-sessions.php including one on FDS Flex Data Services and AS 3: ActionScript 3 for Flash Developers.

Here is an article on FDS at http://www.adobe.com/devnet/flex/articles/architecting_rias.html and some FDS messaging related posts at http://www.onflex.org/ted/2006/05/flex-data-services-part-1.php http://www.onflex.org/ted/2006/06/flex-data-services-part-2-messaging.php

Flex components available for downloading at the Adobe exchangehttp://www.adobe.com/cfusion/exchange/index.cfm?extid=1047291&view=sn610#loc=en_us&view=sn100&viewName=Adobe Exchange&extid=1047291

The newly released auto complete component looks like it could be used on form input fields: http://weblogs.macromedia.com/flexteam/

Click below for more:
http://www.adobe.com/cfusion/exchange/index.cfm?extid=1047291&view=sn610#loc=en_us&view=sn611&viewName=Flex Extension&authorid=73322349&page=0&scrollPos=0&subcatid=0&snid=sn611&itemnumber=0&extid=1047291&catid=0

These are some of the types of nice to have features with image views. http://www.richapps.de/?p=38"
Can be explored as time permits.
http://mxdj.sys-con.com/read/255823.htm">Here Here are some more articles on mixing Flash and Flex that may be useful when constructing full client in Flex


Example of using Flash for the login component:
http://flexblog.faratasystems.com/?p=88


Presentation at http://www.jessewarden.com/archives/2006/08/flash_flex_powe.html. Video link at: http://www.jessewarden.com/archives/2006/09/flex_seminar_pr.html as well as interesting blog reading on Flash designing and Flex programming

http://www.amitgupta.info/E41ST/RIA/E41ST.html">http://www.amitgupta.info/E41ST/RIA/E41ST.htmlEnter as guest and use a keyword such as "clinton" to find images of books that match the keyword.

The use of the close button for the details screen which appears after clicking an image allows for more room to view the images.

This demo has the tree component with checkboxes for multiple selection. View the demo at http://www.darronschall.com/weblog/archives/000241.cfm

http://adobedev.adobe.acrobat.com/p71169528/ This presentation is long (57 minutes) but has good tips for designing and constructing Flex apps for responsiveness. Note on slide 14 discusses a Flickr app that caused redundant measurement layout cycles for each image object.

Designing Flex 2 skins:
http://www.adobe.com/devnet/flex/articles/flex_skins.html

The internals of HTTP Session

Understanding HTTP requests:
From a browser when a request gets made the first point it hits is the DNS server where the name is resolved and the IP address is retrieved. Once this is done then IP address resolution mechanism is used to track down the server which is hosting the application. The protocol being used is HTTP which has different parts like header, request method names (GET Vs POST) etc.

Ex:GET /index.html HTTP/1.1Host: www.example.com

Response:HTTP/1.1 200 OKDate: Mon, 23 May 2005 22:38:34 GMTServer: Apache/1.3.27 (Unix) (Red-Hat/Linux)Last-Modified: Wed, 08 Jan 2003 23:11:55 GMTEtag: "3f80f-1b6-3e1cb03b"Accept-Ranges: bytesContent-Length: 438Connection: closeContent-Type: text/html; charset=UTF-8

HTTP is a stateless protocol.

What is meant by Stateless protocol?

A stateless protocol means that in this protocol when a caller makes a request and gets a response back, server do no remember who the person was. Next time the same person makes another request then it will be treated a fresh request.

But in many applications we will need the user to maintain state. Ex: User logs in, enters the user id and password. Then he visits some more pages but does not want to enter the username in all of those pages. Then the server will need to maintain the state details of the user like username and then use it for rest of the pages.

Whats the solution?

The common method for solving this problem involves the use of sending and requesting cookies. Other methods include server side sessions, hidden variables (when current page is a form), and URL encoded parameters (such as index.php?userid=3).

Server side sessions:

In J2EE this is called Http-Session. Session data is actually stored in the memory space of the web server. There are different ways session data can be stored and depends on the web server/application server implementation.

i) In Memory: This means the session will be stored in the memory space of the Web Server/App server Process.
ii) Storing session in databases.

In some cases there are services (another process) which manages the session persistence.

This means the way to store is not part of any spec or standards and is part.

Now when a request comes in from a client browser to the server cookie which contains the sessionId gets passed to the server which then server decodes and uses it for getting the session data. Session cookies are transient in nature, i.e. not stored in file system as such but can be seen using certain tools. These cookies are set to expire (be deleted) upon closing the browser. Cookies that last beyond a user's session (i.e., "Remember Me" option) are termed "persistent" cookies. Persistent cookies are usually stored on the user's hard drive. Their location is determined according to the particular operating system and browser (e.g., C:\Documents and Settings\username\Cookies for Internet Explorer on Windows 2000).

Cookie content looks like this:

JSESSIONID=1607EB0EF22CAAA1FC82056B4978F40D

In cases where browser reject cookies then one can configure the application server to use url-rewriting where URL contains the session id embedded in there.


This shows how session id is generated in the browser memory space. Cookievalue=admin@eforceglobal.com is the persistent cookie.

How different application servers maintain sessions?

Jrun: http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_18131
BEA: http://edocs.bea.com/wls/docs90/webapp/sessions.html
WAS: http://www.phptr.com/articles/article.asp?p=332851&seqNum=2&rl=1

Session replication & Clusters:

What are clusters?
For high availability we group a set of application servers where each of them is capable to handling user requests. Depending on load any given server can be used at any given point of time.

Failover & Session replication:
Now when a given server goes down then to the user it should not appear that something has gone wrong. The session data should move over to other server which can take the request processing from that point onwards. Thus in order for failover to take place session replication needs to be done – which means session data needs to be shared with other servers. If the session is stored in-memory then this needs to copied to other servers in the cluster and if its in the database then its automatically supports shared session data.

Session binding listeners:
This addresses the problem when we would like to take some action based on the event that session is created to expired. Ex: Every-time a user session gets expired we would like to perform some cleanup of the resources and user may not have clicked on Logoff button but rather just closed the window or has not accessed the system for more than session time out period. In these cases session binding come handy.

Session Hijacking will mean someone gets hold of the sessionId and the fakes the request and perform operations to the application.

Reference:
http://www.webopedia.com/TERM/S/session_cookie.html
http://java.sun.com/developer/EJTechTips/2003/tt0626.html
Analyze browser cookies: http://www.sandsprite.com/Sleuth/overviews/Sleuth1.4_overview.html
http://www.imperva.com/application_defense_center/glossary/session_hijacking.html
http://en.wikipedia.org/wiki/Session_hijacking

Have a cronjob in a application server?

Objective: The goal is to run a particualr task at regular interval. Ex: We have emails which are stored in a queue and this needs to be sent to all the recipients. There are several options which can be used to solve this problem -
a) Open source frameworks - Jcrontab. We setup the pattern of time when we would like a given task to be executed. (Pre Java 1.3 time)
b) TimerEJB : http://java.sun.com/j2ee/1.4/docs/tutorial/doc/Session5.html
c) TimerTask & Timer (Part of JDK)
http://java.sun.com/j2se/1.4.2/docs/api/java/util/Timer.html

With latest JDK's we can use TimerTask and Timer option as the most simple solution.

Sample Timer:

import java.util.Timer;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

public class EMailService extends Timer
{

private static boolean invokedOnce = false;
private static final Log log = LogFactory.getLog(EMailService.class);
private EMailService() {
}
public static synchronized void initialize(long delay, long period) {
if (!invokedOnce) {
invokedOnce = true;
EMailService mailService = new EMailService();
mailService.schedule(new SendEmail(), delay, period);
log.info("Timed EMailService has been initialized with delay: " + delay + "(ms) period: " + period + "(ms)");
}
}
}

Sample TimerTask: SendMail:

public class SendEmail extends TimerTask {

private static final Log log = LogFactory.getLog(SendEmail.class);

@Override
public void run()
{
long threadId = Thread.currentThread().getId();
...
...
}

How Timer Classes are initializd?

Typically this can be invoked from a Servlet which can be called during startup.

Validate XML constructed with DOM parser with XSD

Objective: A XML document is parsed thru DOM and needs to be validated with associated XSD for validity as per the XML schema. Following code snippet shows how:

Code:

public static List validateDOMWithXSD(File domSource, File schemaSource) {
try { // Step 1: create a DocumentBuilderFactory and configure it
DocumentBuilderFactory documentBuilderFactory = DocumentBuilderFactoryImpl .newInstance();
// Set namespaceAware to true to get a DOM Level 2 tree with nodes // containing namesapce information. This is necessary because the // default value from JAXP 1.0 was defined to be false. documentBuilderFactory.setNamespaceAware(true);
// Set the validation mode to either: no validation, DTD // validation, or XSD validation documentBuilderFactory.setValidating(true); try { documentBuilderFactory.setAttribute( JAXPConstants.JAXP_SCHEMA_LANGUAGE, JAXPConstants.W3C_XML_SCHEMA); } catch (IllegalArgumentException x) { // This can happen if the parser does not support JAXP 1.2 log .error("Error: JAXP DocumentBuilderFactory attribute not recognized: " + JAXPConstants.JAXP_SCHEMA_LANGUAGE); log.error("Check to see if parser conforms to JAXP 1.2 spec."); XMLParseError parseError = new XMLParseError(); parseError .setErrorMessage("Error: JAXP DocumentBuilderFactory attribute not recognized: " + JAXPConstants.JAXP_SCHEMA_LANGUAGE + "\n Check to see if parser conforms to JAXP 1.2 spec.");
errorList = new ArrayList(1); errorList.add(parseError); return errorList; } // Set the schema source, if any. See the JAXP 1.2 maintenance // update specification for more complex usages of this feature.
documentBuilderFactory.setAttribute( JAXPConstants.JAXP_SCHEMA_SOURCE, schemaSource);
// Optional: set various configuration options documentBuilderFactory.setIgnoringComments(false); // documentBuilderFactory.setIgnoringElementContentWhitespace(true);
// documentBuilderFactory.setCoalescing(true);
// The opposite of creating entity ref nodes is expanding them // inline // documentBuilderFactory.setExpandEntityReferences(!createEntityRefs);
// Step 2: create a DocumentBuilder that satisfies the constraints // specified by the DocumentBuilderFactory DocumentBuilder db = documentBuilderFactory.newDocumentBuilder();
// Set an ErrorHandler before parsing errorList = new ArrayList(); db.setErrorHandler(new ParseErrorHandler(errorList));
// Step 3: parse the input file db.parse(domSource);
// return the error list return errorList; } catch (SAXException exception) { return errorList; } catch (Exception exception) { exception.printStackTrace(); } }