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

Flex 4 Sample Application using a Java Back-End, BlazeDS 4 and Flash Builder 4 Data Wizards

I put together a new Test Drive environment to allow you to explore the development of Flex 4 applications with a Java back-end using the new “Data-Centric Development” features of Flash Builder 4. These features include service introspection, value object and service stub generation, etc. This Test Drive is still work in progress: it currently consists of a single application called InSync (a complete Flex 4 rewrite of my contact management sample application), but I think it’s already valuable to understand the impact of the new Flash Builder 4 data features. Insync also demonstrates some of the new features of Flex 4: skinning, skinnable components, layout managers, etc.

Watch the video below to get familiar with the Test Drive environment and the sample application:

Installation Instructions

  1. Download flex-java-testdrive.zip, and unzip the file in your root directory.
  2. Open a Command Window or Shell, navigate to /flex-java-testdrive/tomcat/bin, and start Tomcat (for instance: catalina run).
  3. Open a browser and access http://localhost:8400/testdrive/InSync/InSync.html.

Importing the projects in Flash Builder 4

  1. In Flash Builder 4, click File > Import > General > Existing Projects into Workspace.
  2. Specify flex-java-testdrive/projects as the root directory and click finish.
  3. Explore the projects: InSync is the Flex project and java-testdrive is the Java project for the server-side classes.

In the InSync project, the classes in the services and valueObjects packages have been generated automatically by Flash Builder 4. My next blog post will show you how to generate these classes based on existing Java services deployed in BlazeDS.

NOTE: Because BlazeDS 4 hasn’t yet been released, this version of the Test Drive uses a nightly build of BlazeDS 4.

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

New Flex 4 / Spring Integration Article

Along with the new Spring / BlazeDS Test Drive, I also updated my Flex / Spring integration article for Flex 4. It also reflects the changes in the latest version of the Spring / BlazeDS Integration Project (version 1.0.3).

The article is available here. Check it out… Flex + Spring is really a great platform to build Rich Internet Applications.

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

New Spring / BlazeDS Test Drive Available: Flex 4, BlazeDS 4, and Spring / BlazeDS Integration 1.0.3

For the Flex 4 launch, I created a new version of the Spring / BlazeDS Test Drive. All the sample applications are now built with Flex 4.

By popular demand, I also recreated an out-of-the-box “Test Drive Server”. This new Test Drive Server consists of a minimal version of Tomcat with BlazeDS 4 and the “Spring / BlazeDS integration 1.03” preconfigured and ready to use. It also includes a series of samples running “out-of-the-box” that should allow you to get up and running integrating Flex with Spring in minutes.

The Test Drive Server is using BlazeDS 4 because BlazeDS 4 allows you to use the new data centric development features of Flash Builder 4. Specifically, Flash Builder 4 can introspect Java remote destinations configured in BlazeDS 4 and generate corresponding ActionScript value objects and service stubs. I’ll blog more about this soon. Since BlazeDS 4 hasn’t yet been released, this version of the Test Drive uses a nightly build of BlazeDS 4.

You can access the Test Drive here. All the Flash Builder 4 projects are provided.

To learn more about the Spring / BlazeDS Integration project, visit the project home page on springsource.org.

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

Flex 4 and Flash Builder 4 Released!

Flex 4 and Flash Builder (previously known as Flex Builder) 4 have been released.

You can download the products here.

Also check out the brand new flex.org, and the reorganized Tour de Flex with a lot of new Flex 4 samples.

In addition to the new Spark component model which enables a new level of collaboration between Designers and Developers, there are many other new features worth exploring. For example, the data-centric development features – including services introspection, value objects and service stubs generation – are really compelling. There is a lot of great content on DevNet to learn more about this exciting release.

Enjoy!

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

FlexStore Revisited: Building an Animated Spark Layout

Six years ago, I wrote the FlexStore sample application for Flex 1.0 (code name Royale at the time). The original version is still running here and shows the progress we have made in six years! Two years later, I rewrote the application for Flex 2. One major difference in the Flex 2 version was that the product Tile List was animated to visually represent the items being filtered out or filtered back in. The animations were helpful, but I was never too happy with the code: the layout animation logic was tightly coupled to the container logic and therefore wasn’t very reusable.

In Flex 4, the new Spark component architecture cleanly separates containers from their layouts: You declare a container and plug a layout into it. You can use existing Layout classes (VerticalLayout, HorizontalLayout, TileLayout, LayoutBase), or create your own custom layout classes. So, I thought it would be nice to revisit the AnimatedList component I had written for the FlexStore 2 and take advantage of this new architecture. I created a custom layout class called “FilteredTileLayout” that you can plug in Flex 4 list classes. i.e. List or DataGroup.

Read More »

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

More Flex 4 / Spark ItemRenderer Samples

Here are a few additional examples of Flex 4 / Spark ItemRenderers. They are similar to the examples I provided in my previous post with a different set of items.

Read More »

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

Cool ItemRenderers Made Easy in Flex 4

Flex 4 makes a lot of things a lot easier to build. After looking at custom components and skins in my previous post, here are a couple of samples focusing on ItemRenderers, States, and Animations.

In this first example, I use the new “depth” attribute together with the new States syntax to make sure that the hovered ItemRenderer is always on top of the other ones. I also use a PostLayoutTransform to “zoom” the hovered ItemRenderer without any impact on the position of the other ItemRenderers in this TileLayout.

Read More »

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

Creating a Custom Component and Skins in Flex 4

The basic idea behind the Spark component model in Flex 4 is to entirely decouple the behavior of a component from its visual representation. You code the behavior of a component in one class and its visual representation in interchangeable MXML skin classes. This new architecture leads to lighter weight and easier to customize components.

As a simple example, I created a Spark version of the PhotoInput component I built for some of my Flex 3 samples (Salesbuilder and inSync). The PhotoInput component allows the user to take pictures using the webcam.

Read More »

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

Tampa Bay Adobe Developer Event this Thursday

I’ll be in Tampa with James Ward and Greg Wilson this week, and we thought it would be great to put together an informal event for the local Tampa bay developer community. The details below are from Greg’s original post.

When: Thursday, Jan 21 6:30pm-8:30pm
Location: Taverna Opa Tampa – Channelside – next to Splitsville – http://tavernaopatampa.com/info.html
Map: http://bit.ly/5kF4aR (Google Maps)

No slides and no presentations – just informal chat/Q&A

IMPORTANT PART –> Beer is on James, Christophe and me for the first hour! How can you resist now?!

Between the 3 of us and some of our local friends, we can answer questions on a wide variety of topics:

  • General questions about Flex, AIR, LiveCycle Data Services, BlazeDS, ColdFusion and more
  • Connecting applications built on the flash platform (Flex, AIR, etc.) to backend systems such as .NET, Java, PHP, ColdFusion, etc.
  • What’s new in LiveCycle data services 3.0
  • What’s new in ColdFusion 9 and ColdFusion Builder
  • What’s coming in Flex 4, AIR 2.0 and Flash Player 10.1
  • Everything you wanted to know about Augmented Reality
  • How to compute the volume of a cone and other mathematical puzzles (just making sure you are still reading)
  • What’s the deal with the announcement last October about Flash and iPhone?
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DZone
  • LinkedIn
  • StumbleUpon
  • Twitter
Posted in Flex | 2 Comments

AIR 2.0 Web Server using the New Server Socket API

After exploring Java integration using the new Native Process API (here and here), Excel integration using the new file.openWithDefaultApplication(), and the new Microphone API, here is another application I wrote, this time to explore the new Adobe AIR 2.0 Server Socket API.

The “Mini AIR Web Server” is a simplistic implementation of an HTTPServer. Needless to say that it is far from being a production quality Web Server. The goal here is simply to use the well understood mechanics of a web server to learn how to use server sockets in AIR 2.0.

Installation Instructions

  1. Download the AIR 2.0 beta runtime here.
  2. Download MiniAIRWebServer.air here.
  3. Double-click MiniAIRWebServer.air in Explorer or Finder to start the installation process.

To test the application, open a browser and test the sample HTML pages provided with the application:

NOTE: You may have to change the port number in these URLs depending on the port number you enter in the application.

Read More »

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