Christophe Coenraets | Rich Internet Applications, Flex, AIR, Java, Android | Page 4

MAX Frameworks Session: One Application, Four Implementations (Code Available)

This year at MAX, I organized a “Flex Frameworks” session called “Using Flex Frameworks to build Data Driven Applications”. I wanted to stay away from a high level / rhetorical debate or panel. I also did not want a session aimed at proclaiming a (subjective) winner. What I had in mind was a pragmatic session that would provide developers with the information they need to make their own decision based on their background, the type of applications they build, and their own style and preferences.

To achieve this goal, I thought it would be interesting for the audience to look at the exact same application built with four different frameworks. And to avoid any misrepresentation of the frameworks, I asked the framework creators to build their own version of the application. Laura Arguello (Mate), Chris Scott (Swiz), Alex Uhlmann (Cairngorm), and Javier Julio (PureMVC, standing in for Cliff Hall) accepted to take part in the experiment and implemented their own version of the “framework-less” application I provided them with. (Many thanks to all of them for the time and energy they put in the project!)

The end result was a three hours session where each of them presented their version. The session format wasn’t perfect: Three hours was too short to get the attendees to actually build the application using four different frameworks, but it was probably also a little too long to look at and decipher code written by someone else. But in the end I think the information that was provided and the applications the attendees left with were really useful for anybody looking at making a framework decision.

Download

I thought these applications would also be helpful to you if you didn’t attend the session…You can download the code here and read the Getting Started instructions here.

Notes:

  • The “plain” project is the framework-less version of the application.
  • Do not unzip flex-frameworks-max.zip in a directory path that includes white spaces.
  • You will notice that there may be different projects for a single framework. This is because there is sometimes a conflict between apparent simplicity and real abstraction, and I wanted to make sure the framework creators would be able to show different ways to use their framework.

What’s wrong with the plain version?

The implementation of the plain (framework-less) version is intentionally simplistic. Components are tightly coupled (for example, views are tightly coupled to specific types of services); the responsibility of components overlap (poor implementation of the “separation of concerns” concept); the configuration/initialization of components is not externalized; there is no clear messaging scheme in the application, which in turns leads to tight coupling, etc. These are some of the things to look at, when you examine a specific framework implementation of the application.

More Information

Laura posted her presentation here.
Javier posted his presentation here.

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • LinkedIn
  • StumbleUpon
  • Twitter
Posted in Flex, Frameworks | 7 Comments

My MAX session video posted: “Model Driven Development with Flex 4 and LCDS3″

Videos for 250+ hours of MAX sessions have already been posted here (free and without geographical restrictions). Another easy way to find a specific video is to use the MAX session locator and click the “movie” icon that now appears next to the session title. The video of my “Model Driven Development with Flash Builder 4 and LCDS3″ is among the videos available, and I also embed it below. There is a short slides introduction. If you want to go straight to the 45 minutes of demo go to 14:00 (also go full screen for a better experience).

The demonstration covers topics I hadn’t demonstrated before such as paging and custom templates, as well as starting from the model and database creation from the model.

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • LinkedIn
  • StumbleUpon
  • Twitter
Posted in Flex | 12 Comments

Only 25 seats left in the “Flex Frameworks” session at MAX

MAX is only 10 days away… If you are interested in Flex Frameworks (Mate, Swiz, PureMVC, Cairngorm), you don’t want to miss the “Using Flex Frameworks to Build Data Driven Applications” session where framework creators/experts (Laura Arguello, Chris Scott, Alex Uhlmann, Javier Julio) will walk you through the architecture and the code of the same application built with their framework.

However as of today (9/23 at 10AM EST), there are only 25 seats left. So, if you want to be part of the action, check out the session in the MAX scheduler and sign up as soon as possible.

There are two instances of that session:
Tuesday, October 6th at 1:00 PM (SOLD OUT)
Wednesday, October 7th at 1:30 PM (25 seats left as of today)

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • LinkedIn
  • StumbleUpon
  • Twitter
Posted in Flex | 5 Comments

Model Driven Development with Flex 4 and LCDS 3 Screencast

I recently presented a new “Model Driven Development with Flex 4″ session at a few conferences and Flash Camps, so I figured I would record a screencast of the demo app for people who did not attend. If you saw a previous version of this demo, this screencast is still worth watching because I’m using the latest daily builds of Flash Builder 4 and LCDS 3 and we made really good progress!

You can watch it in the player below, however I recommend you click here to watch it in HD (go full screen for a better viewing experience. Also make sure HD is on).

A few things I’m not mentioning in the demo:

  • Value objects and service stubs are automatically generated based on the model
  • Data persistence occurs through JPA/Hibernate, but you don’t have to know that if you just want it to work
  • Code generation of form is template-based (you can modify the existing template or create new ones)
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • LinkedIn
  • StumbleUpon
  • Twitter
Posted in Flex, Flex4, LCDS, MDD | 21 Comments

Don’t miss the “Flex Frameworks” session at MAX

I’ve been working on putting together what should be a fun and informative session at MAX this year. The session is called: “Using Flex Frameworks to Build Data-Driven Applications”.

This is a 3 hour BYOL (Bring Your Own Laptop) session. The idea is to look at four versions of the exact same application: each version built with a different framework by a framework founder or expert: Laura Arguello for Mate, Chris Scott for Swiz, Javier Julio for PureMVC, and Alex Uhlmann for Cairngorm.

Each of them will have 45 minutes to walk you through the code and highlight the details of their implementation. The goal of the session is not to declare a winner, but rather to compare different solutions to the same problem, and for you to identify the framework that fits your application requirements and your style.

The session is described here in the Adobe MAX session catalog.

I hope to see you there. This should be a great session!

Parsley 2 was released too late to make the initial line up, but I’m trying to find a way to include a Parsley version of the application in the session materials as well.

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • LinkedIn
  • StumbleUpon
  • Twitter
Posted in Flex, Frameworks, MAX2009 | 6 Comments

AIR-based Mortgage Calculator Desktop Widget (with ILOG Gauges)

Here is a simple example of using a chromeless, transparent window in AIR to build a widget-type application. I know: yet another mortgage application… but to make things more interesting, I used the cool ILOG Elixir gauges to display and enter the principal, monthly payment, rate, and term. No rocket science here, but a nice reminder of what you can do in less than a hundred lines of code.

Click the badge below to install the application:

Please upgrade your Flash Player This is the content that would be shown if the user does not have Flash Player 9.0.115 or higher installed.

Instructions:

  • Move the needle with your mouse to specify the principal, monthly payment, rate, and term.
    If you change the principal, the monthly payment is automatically recalculated.
    If you change the monthly payment, the principal is automatically recalculated to show what that monthly payment can buy you.
  • You can move the widget by dragging the upper area of the top gauges border.
  • You can minimize the widget by double-clicking the upper area of the top gauges border.
  • You can close the widget by right-clicking the application in the task bar or in the dock.

View Source is enabled (right click the application to view and download the source code. You will need to add the ILOG Elixir SWCs to your build path to compile).

Here is also a live browser version… (the AIR version is a lot cooler).

View Source is enabled (right click the application to view and download the source code. You will need to add the ILOG Elixir SWCs to your build path to compile).

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • LinkedIn
  • StumbleUpon
  • Twitter
Posted in Air, Flex, ilog | 21 Comments

Building a Flex Application with the Parsley Framework

After my recent explorations of “Swiz”, and “Spring ActionScript” (1,2,3), I decided to take the new version of the Parsley framework for a test drive, and build the Parsley version of inSync: the simple Contact Management application I often use to try out and demonstrate different features and techniques in Flex and Adobe AIR.

Parsley is primarily a Dependency Injection framework. It also offers a very interesting messaging infrastructure. I won’t get into the details of dependency injection here: My previous Swiz and Spring ActionScript articles provide some background information, and there are also plenty of detailed resources out there.

If you just want to run the application and dive into the code, here are the links:

  • Click here to run the application.
  • Click here to view the source code.

Object Configuration

Parsley allows you to configure the core objects of your application (the objects other components depend on) in MXML (like Swiz), in XML (like Spring ActionScript), in ActionScript, or using any combination of these approaches. You can also extend the framework and create your own configuration mechanism.

For the inSync application, I used a simple MXML configuration (Config.mxml) defined as follows:

<?xml version="1.0" encoding="utf-8"?>
<Object xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:services="insync.parsley.services.*">

    <mx:RemoteObject
            id="contactRO"
            destination="contacts"
            endpoint="http://localhost:8400/samples/messagebroker/amf"
            showBusyCursor="true" />

    <services:ContactService />

</Object>

Note: In a real life application, you would not want to hardcode the endpoints of your services in your source code. You could use the XML configuration option to configure your endpoints in a more “externalized” fashion. More on this topic here.

Framework Initialization

You initialize the Parsley framework using the ContextBuilder class corresponding to the configuration approach you chose. Here is the main application file for the inSync application. Parsley is initialized in the preinitialize event of the application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:views="insync.parsley.views.*"
	paddingTop="0" paddingLeft="0" paddingRight="0" paddingBottom="0"
	preinitialize="FlexContextBuilder.build(Config)">

	<mx:Script>
		<![CDATA[
			import org.spicefactory.parsley.flex.FlexContextBuilder;
		]]>
	</mx:Script>

	<mx:Style source="styles.css" />

	<views:MainView />

</mx:Application>

Read More »

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • LinkedIn
  • StumbleUpon
  • Twitter
Posted in Flex, Frameworks, Parsley | 20 Comments

Building the Server-Side of the “Tour de Flex” Real-Time Dashboard

Greg Wilson and Damien Mandrioli are also blogging about the new Tour de Flex real time dashboard today. Greg is the inspiration behind everything “Tour de Flex”, including the idea of the dashboard. He has the story behind the genesis of this project on his blog. Damien (from IBM/ILOG) did a fantastic job at building the client-side of the dashboard using the very cool ILOG Elixir components, and he walks you through the details on his blog.

My contribution to the project is the “real-time messaging” infrastructure. I provide the details below.

First the overall workflow…

The reason we are combining PHP and Java in this workflow is mostly historical. In the initial version of Tour de Flex, there was no Java involved: Greg was persisting loaded samples data (sample id and timestamp) directly from his PHP page. We later added LiveCycle Data Services to the picture to support the data push requirement of the dashboard, and we took the opportunity to move some code (such as the database persistence) from PHP to Java. Note that we are using LCDS for the performance and scalability of its high-end channels, but the application could also be deployed on BlazeDS.

A more straightforward architecture would be for the client to communicate directly with LCDS. For example, the client could invoke a remote object that would directly publish the loaded sample data (sample id and geolocation of the client) to the message destination. Alternatively, the client could use a Producer object to directly publish the message to the destination. Because some logic (such as geolocating the IP address and persisting the data) has to be executed at the server-side before routing the messages to the subscribed clients, you would have to write a custom message adapter if you used this approach.

We will probably streamline the workflow with one of these two approaches in the future, but in the meantime here is the source code for the servlet (logging and non-essential code removed for brevity):

package com.adobe.tdf;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.maxmind.geoip.Location;
import com.maxmind.geoip.LookupService;

import flex.messaging.MessageBroker;
import flex.messaging.messages.AsyncMessage;
import flex.messaging.util.UUIDUtils;

public class TDFServlet extends HttpServlet {

	// Unique clientID for the message service
	private String clientID = UUIDUtils.createUUID();

	// The geocoding service
	protected LookupService lookupService;

	// A DAO to store sample requests in a database
	protected SampleRequestDAO dao = new SampleRequestDAO();

	// The LCDS message broker
	protected MessageBroker messageBroker;

	// The LCDS messaging destination where real time sample requests information is pushed
	protected String destination; 

	public void init() throws ServletException {

		ServletConfig config = getServletConfig();
		destination = config.getInitParameter("messaging.destination.name");
		String path = config.getInitParameter("geocoding.database.path");
		try {
			// Load the geocoding database in init() to make sure we load it only once
			lookupService = new LookupService(path, LookupService.GEOIP_MEMORY_CACHE);
		} catch (IOException e) {
			// We swallow the exception here. If the database is not available, the feed
			// will still work but won't provide the location info.
		}
	}

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		if (messageBroker == null)
		{
			messageBroker = MessageBroker.getMessageBroker(null);
		}

		SampleRequest sampleRequest = new SampleRequest();

		try {
			sampleRequest.setSampleId(Integer.parseInt(request.getParameter("sampleId")));
		} catch (Exception e) {
			String message = "A valid sampleId is required to process this request";
			throw new RuntimeException(message);
		}

		sampleRequest.setTimestamp(new Date());

		String ipAddress = request.getParameter("ipAddress");

		// Geolocate the IP address and add the info to the message
		if (lookupService != null && ipAddress != null)
		{
	                Location location = lookupService.getLocation(ipAddress);
			if (location != null)
			{
				sampleRequest.setLatitude(location.latitude);
				sampleRequest.setLongitude(location.longitude);
				sampleRequest.setCountry(location.countryCode);
				sampleRequest.setCity(location.city);
			}
		}

		try {
			dao.create(sampleRequest, ipAddress);
		} catch (RuntimeException e) {

		}

		String subtopic = request.getParameter("subtopic");
		if (subtopic == null) subtopic = "flex";

		// Publish the message to specified destination and subtopic.
		AsyncMessage msg = new AsyncMessage();
		msg.setDestination(destination);
		msg.setHeader("DSSubtopic", subtopic);
		msg.setClientId(clientID);
		msg.setMessageId(UUIDUtils.createUUID());
		msg.setTimestamp(System.currentTimeMillis());
		msg.setBody(sampleRequest);
		messageBroker.routeMessageToService(msg, null);

		PrintWriter out = response.getWriter();
	        out.println("<html><body>ok</body></html>");

	}

}

The servlet is responsible for three things:

  1. Geolocate the IP address of the client requesting the sample. We currently use the MaxMind Geolocation API. The API is straightforward and the results seem pretty accurate.
  2. Save the information about the loaded sample in a database. We keep track of historical data to be able to support future data visualization projects.
  3. Publish the data about the loaded sample to a message destination. The servlet uses the Message Service Java API to directly push messages to the Flex destination (lines 97 to 104). Note that the same API exists for ColdFusion, so CF developers could use a CF page instead of this servlet to push messages to the client.

Channels

The messaging destination is set up to support different communication channels: RTMP, long polling, and regular polling. The client-side developer can decide which channel to use to communicate with the server. For example, if you wanted to use RTMP as the primary channel, fall back to long polling if the RTMP connection fails, and fall back to regular polling if the long polling connection fails you could set up your client-side ChannelSet as follows:

<mx:ChannelSet id="channelSet">
	<mx:RTMPChannel id="rtmp" url="rtmp://hostname:2037"/>
	<mx:AMFChannel url="http://hostname/context/messagebroker/amflongpolling"/>
	<mx:AMFChannel url="http://hostname/context/messagebroker/amfpolling"/>
</mx:ChannelSet>
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • LinkedIn
  • StumbleUpon
  • Twitter
Posted in BlazeDS, Flex, Java, LCDS | 52 Comments

“Model Driven Development with Flash Builder 4 and LCDS 3” at Flex 360 Indianapolis

I’ll be presenting two sessions at Flex 360 Indianapolis next week.

In the “Flex / BlazeDS Integration Project” session (Monday), I’ll provide a brief introduction of the Spring framework and the “Dependency Injection” pattern, followed by a deep dive into the brand new “Spring / BlazeDS integration project”.

My second session (on Wednesday) is “Model Driven Development with Flash Builder 4 and LCDS 3”. (The next version of Flex Builder will be named Flash Builder 4. The name of the Flex framework and the Flex SDK doesn’t change: it’s still Flex). In this session I will present a new and exciting feature in Flash Builder 4 and LiveCycle Data Services 3. Using the combination of these two products, you can build data-driven applications using a Model-Driven Development approach. In other words, you don’t have to write any server-side code: the data access logic is derived from a simple data model that is easily created and updated using new tooling in Flash Builder 4. This solution is designed to work for simple and very complex applications. I presented a sneak peek of this new feature at MAX last year, and we made a lot of progress since then.

I hope to see you there.

Christophe

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • LinkedIn
  • StumbleUpon
  • Twitter
Posted in Flex | 14 Comments

New Update to the Spring BlazeDS Integration Test Drive

I made some additional changes to the Spring BlazeDS Integration (RC1) Test Drive:

  • The Test Drive now includes an annotation-based configuration sample (the Company Manager sample). Spring annotations such as @Service, @RemotingDestination, @Autowired, @RemotingInclude, and @RemotingExclude make it really easy to configure your beans and make them available through Remoting. As an example, here is the source code for the CompanyDAO class:

    package flex.spring.samples.company;
    
    import java.sql.ResultSet;
    import java.sql.SQLException;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import javax.sql.DataSource;
    
    import org.springframework.flex.remoting.RemotingDestination;
    import org.springframework.flex.remoting.RemotingExclude;
    import org.springframework.flex.remoting.RemotingInclude;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    import org.springframework.jdbc.core.simple.ParameterizedRowMapper;
    import org.springframework.jdbc.core.simple.SimpleJdbcInsert;
    import org.springframework.jdbc.core.simple.SimpleJdbcTemplate;
    
    import flex.spring.samples.industry.IIndustryDAO;
    
    @Service("companyService")
    @RemotingDestination(channels={"my-amf"})
    public class CompanyDAO implements ICompanyDAO {
    
    	private final SimpleJdbcTemplate template;
    	private final SimpleJdbcInsert insertCompany;
    
    	private IIndustryDAO industryDAO;
    
    	private final ParameterizedRowMapper<Company> rowMapper = new ParameterizedRowMapper<Company>(){
    		public Company mapRow(ResultSet rs, int rowNum) throws SQLException {
    			Company company = new Company();
    			company.setId(rs.getInt("id"));
    			company.setName(rs.getString("name"));
    			company.setAddress(rs.getString("address"));
    			company.setCity(rs.getString("city"));
    			company.setState(rs.getString("state"));
    			company.setZip(rs.getString("zip"));
    			company.setPhone(rs.getString("phone"));
    			company.setIndustry(industryDAO.findById(rs.getInt("industry_id")));
    			return company;
    		}
    	};
    
    	@Autowired
    	public CompanyDAO(DataSource dataSource, IIndustryDAO industryDAO) {
    		template = new SimpleJdbcTemplate(dataSource);
    		insertCompany = new SimpleJdbcInsert(dataSource).withTableName("COMPANY").usingGeneratedKeyColumns("ID");
    		this.industryDAO = industryDAO;
    	}
    
    	@RemotingInclude
    	public Company findById(int id) {
    		return template.queryForObject("SELECT * FROM company WHERE id=?", rowMapper, id);
    	}
    
    	@RemotingInclude
    	public List<Company> findAll() {
    		return template.query("SELECT * FROM company ORDER BY name", rowMapper);
    	}
    
    	@RemotingInclude
    	public List<Company> findByName(String name) {
    		return template.query("SELECT * FROM company WHERE UPPER(name) LIKE ? ORDER BY name",
    				rowMapper,
    				"%" + name.toUpperCase() + "%");
    	}
    
    	@RemotingInclude
    	public Company create(Company company) {
    		Map<String, Object> parameters = new HashMap<String, Object>();
            parameters.put("name", company.getName());
            parameters.put("address", company.getAddress());
            parameters.put("city", company.getCity());
            parameters.put("state", company.getState());
            parameters.put("zip", company.getZip());
            parameters.put("phone", company.getPhone());
            parameters.put("industry_id", company.getIndustry().getId());
            Number id = insertCompany.executeAndReturnKey(parameters);
    		company.setId(id.intValue());
    		return company;
    	}
    
    	@RemotingInclude
    	public boolean update(Company company) {
            int count = template.update("UPDATE company SET name=?, address=?, city=?, state=?, zip=?, phone=?, industry_id=? WHERE id=?",
    				company.getName(),
    				company.getAddress(),
    				company.getCity(),
    				company.getState(),
    				company.getZip(),
    				company.getPhone(),
    				company.getIndustry().getId(),
    				company.getId());
    		return (count == 1);
    	}
    
    	@RemotingExclude
    	public boolean remove(Company company) {
    		int count = template.update("DELETE FROM company WHERE id=?", company.getId());
    		return (count == 1);
    	}
    
    }
    

  • The Test Drive is now using the M3 build of Spring 3 (as opposed to M2 in the previous builds of the Test Drive).
  • I modified the configuration of the long polling channel to support more persistent connections per domain based on the browser capabilities.
  • And of course compared to the M2 build, this version of the Test Drive includes a number of Messaging samples.

    Using the Messaging integration, setting up a destination can be as easy as:

    <flex:message-destination id="chat" />
    

    And here is how you configure a destination mapped to a JMS topic:

    <flex:jms-message-destination id="jms-chat" jms-destination="chatTopic" />
    

Installation Instructions:

  1. Download the Spring / Flex TestDrive here: http://coenraets.org/downloads/spring-flex-testdrive-RC1v2.zip
  2. Unzip it in your root directory
  3. Navigate to /spring-flex-testdrive/tomcat/bin and start Tomcat (for instance: catalina run)
  4. Open a browser and access http://localhost:8080
  5. Follow the instructions

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • LinkedIn
  • StumbleUpon
  • Twitter
Posted in BlazeDS, Flex, Java, Spring | 27 Comments