Farata Systems      

Recently I started to see more and more cases when people have to abandon strongly typed classes but want to keep an ability to keep binding working. Here is a brief recap of typical problem/solution.

Flex Framework usage of binding is one of the most important productivity features. Ability to declaratively define reaction to the changes in the data or components state greatly simplifies programming and reduces errors related to low-level coding.

In order for binding to work you need to make sure changes to the data are known to the framework. Unlike most of dynamic languages implementations, ActionScript 3 is built for speed and heavily utilizes direct access to the properties and methods. In this situation the only way for data to notify the world about the changes is to embed the code to fire chamge events.

Flex compiler helps in a big way by introducing [Bindable] and [Managed] tags. If you prefix your variable with [Bindable] tag, compiler does the following:
1. Inspects every public property and setter of you variables class and generates wrapper getters/setters that adds event notification.
2. Every time “bindable” property is being used, compiler references these getters/setters instead of original properties

Obviously it does not work too well with dynamic data of type “Object” coming from server. The problem is alleviated a bit by the fact that Flex would automatically wrap the Object in the ObjectProxy if default value of “makeObjectBindable=true” of the service is not modified. However, it will wrap only the top level and not the individual array members making changes to those undetectable. For example, if you are passing set of the objects from assembler, and the members can have arrays, the changes to the rows are not going to fire change events unless you explicitly wrap every array element in the object proxy.

Here is an example:
private function onResult(r:ResultEvent) : void {
var quotes:ArrayCollection = r.result.quotes;
var wrappedQuotes = new ArrayCollection();
for each (var quote in quotes)
wrappedQuotes.addItem(new ObjectProxy(quote))
view.dataProvider = wrappedQuotes;
}

ObjectProxy is very expensive and should not be used with large amount of data. For large datasets please consider strongly typed classes that will support [Bindable] on members level.

Two full days of hands-on training for $200 is a bargain sponsored by Farata Systems. This training is targeted for people who’d like to get up to speed with Adobe Flex but can’t afford to take time off work. We’ll run this training in New Jersey. Details and registration at this URL.

See you in class.

Yakov Fain.

Our company provides various types of Flex training, and based on the calls we are getting, it seems that people are confused by the word “certified” in the name of this particular program. So I’ll try to give you some clarification here. But let me start with explaining what the title Adobe Certified Flex Instructor means. I’ll start with my own story.

In the Summer of 2006 I’ve been working with Flex at full speed. In addition to this, I’ve been writing technical articles and was a co-author of an advanced book on real-world programming with Flex and Java. Since I always enjoyed teaching programming, I decided to start teaching Flex. And when you teach any programming language, you need a good text book or courseware. I decided to purchase Flex courseware from Adobe, complete all the labs and start teaching Flex to the masses.

When I contacted Adobe, they’ve answered that the courseware is available only for certified instructors. This sounded reasonable, and my next question was, “How do I get certified?”

Since I was an early Flex adopter, has published numerous articles, worked on the Flex book, knew people on the Flex team, has Java medals all over my chest, and was teaching programming at NYU, I was expecting the following answer from Adobe:

”Dear Yakov, we are so happy that you’ve decided to become a certified Flex instructor! We’ll overnight you the diploma, and please start teaching Flex now.”

The real answer was a little different:
”Yakov, get your butt on the plane and fly to Seattle next month. Sit through the five-day train-the-trainer Flex class, then prepare and teach one hour training session in front of the audience using our courseware, and if we like it, you’ll become Adobe Certified Flex Instructor”. Well, the wording was more polite, but the meaning was the same.

And I did exactly this – took a week off at work, purchased the air tickets, booked the hotel, and sat through a very involved class at Adobe. I had a great instructor, Matt Boles, one of the original authors of Flex courseware. At the end of the class I ran a short class covering various units using the original courseware, and passed the test.
Since then, I periodically teach Adobe Certified training for our corporate clients and for general public (my next public training is on the week after Thanksgiving in New York City).

A colleague of mine became certified Flex instructor this year, and requirements were even more stringent – he had to become certified Flex developer first , which is now a pre-requisite for becoming certified Flex instructor.

So when you see an ad about Adobe Certified Flex training, this means that the class will be taught by a person who knows Flex, went through the certification process and knows how to teach Flex using a very well done courseware right from the source.

The word certified here does not mean that you will become a certified Flex developer after attending this class, but it does mean that you can expect a high quality training that will help you not only in passing certification exam if you choose to, but will also leave you with a very good understanding of how to create rich Internet applications with Adobe Flex. The market for Flex developers is extremely hot, so do not miss your opportunity. Find the Flex class near you, or get your butt on the plane…Well, you know the drill.

It’s hard to overestimate the importance of having good logging facility when you develop distributed applications. Did the client’s request reached the server side component? What did the server sent back? Add to this inability of using debuggers while processing GUI events like focus change, and you may need to spend hours if not days trying to spot some sophisticated errors. That’s why commercial-grade logger is a must if you work with an application that is spread over the network and is written in different languages such as Adobe Flex and Java.

Log4Fx is an advanced yet very simple to use logger component for Adobe Flex applications that use Java application servers. You can set up the logging on the client or server sides, and you can redirect the output of the log messages to local log windows or make the log output easily available to the production support teams located remotely. Think of a production situation when a particular client complains that the application runs slow. Log4Fx allows you to turn on the logging just for this client and you can do it remotely with Web-browser access to the log output.

Log4Fx comes with several convenient and easy to use display panels with log messages. This manual also covers techniques of logging mixed Flex/Java projects with or without Flex Builder.

USING LOG4FX

If you’ve been using other loggers like log4j, you’ll be pleasantly surprised seeing how Log4Fx automatically inserts required logging code in your existing Flex project. It comes down to memorizing a couple of keystroke combinations as explained below. But first, you need to install Log4Fx, and then add it to your Flex project.
Just right-click on your Flex Project, select Log4Fx > Add Dependency Files from the popup menu.This action will add several new artifacts to your project:

• A new Flex component Log4FxLoggingTarget.mxml, will be automatically added to your project directory
• An extra tag <Log4FxLoggingTarget xmlns=”*”> will be added at the end of the source code of your default Flex application
• A new application RemoteLogReceiver.mxml is added to the project to provide remote access to the log messages
• The Log4Fx.swc is added to your project’s build path
• A small file log4flex.jar is added to the your Java server’s lib folder

Now you can use the hot keys to add required log lines to your application code. You can see the list of available hot keys by pressing CTRL + R.

For example, let’s say you are considering adding a line to the application called MyStockProtflio:

trace(“Entered the method getPriceQuotes”);

Just press the cursor in the script section of your application and press Ctrl+R followed by M, which will insert the following lines in your program:

import mx.logging.Log;
import mx.logging.ILogger;
private var logger:ILogger = Log.getLogger(“MyStockPortfolio”);

Now place the cursor, say in the function getPriceQuotes() and press Ctrl+R followed by D and the following line will be added at your cursor location:

if (Log.isDebug()) logger.debug(“”);

Enter the text between the double quotes, and if you’ll set the level of logging to Debug, this message will be sent to the specified destination selected with the Logging Manager as explained below.
If you need to write a log message that will deliver fatal errors, press Ctrl+R, F , and you’ll see a new line in your code:

if (Log.isFatal()) logger.fatal(“”);

Just enter appropriate error information inside the quotes, and Log4Fx will send the information of this error to the selected log target.
Here’s a code of the HelloWorld application with highlighted inserts from Log4Fx:

<?xml version=”1.0″ encoding=”UTF-8″?><mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:Grid>
<mx:GridRow>
<mx:GridItem>
<mx:LinkButton label=”Hello world!”
click=”logger.warn(‘Warning’);”/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:LinkButton label=”Hello world again!”
click=”logger.info(‘Info’);”/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
<mx:Script>
<![CDATA[
import mx.logging.Log;
import mx.logging.ILogger;
private var logger:ILogger = Log.getLogger("com.farata.samples");
]]>
</mx:Script>

<Log4FlexLoggingTarget xmlns=”*”/>
</mx:Application>

You still need to take care of two more items:

1. Define the destination of log messages by specifying the logging target.
2. Using Logging Manager, define the properties for various logging categories, set the default logging level et al.

Using Logging Manager

The logging manager is a part of Log4Fx, and it allows you to change the logging settings on the fly while debugging the application is in progress. During the lifespan of the application, you may need to be able to redirect the log messages to a different target(s). This functionality is implemented in Logging Manager, which is a UI component that supports interactive control levels, categories, and targets. This is what you can do with the Logging Manager on the client side:
• Automatically discover and list logging categories, and allow changing of the logging level for each logical category or a package.
• List registered targets/destinations, and set default logging level and other common parameters.
• Store the logging settings on the client’s computer.

To see this panel, start the application that uses Log4Fx and press CTRL+SHIFT+BACKSPACE – the logging manager will pop-up on top of your application window. The following screenshot shows the logging manager panel on top of the HelloWorld application after the user pressed CTRL+SHIFT+BACKSPACE.

You can change the logging level at any time while your application is running. This feature is crucial for mission-critical production applications, where you can’t ask the user to stop the application (i.e. financial trading systems), but need to obtain the logging information to help the customer on the live system.
Even if the user is not an IT professional, s/he can do this by following directions of the production support engineer.
You can also change the default log level by selecting the required log level from the dropdown box. The destination (target) of your log messages can be selected from another dropdown as described in the section Working with Log targets.

WORKING WITH LOG TARGETS

Trace
If you set the target Trace on the Logging Manager panel, all program messages will be output using the class from Flex framework called TraceTarget as if you’ve been using the function trace().

Socket
Setting the target to Socket will engage SocketTarget class for logging your program messages via HTTP connection.

If your Flex project was configured to work with Java Servlet container, i.e. Apache Tomcat, adding Log4Fx dependency files creates a small file on the server side log4flex.jar, which contains two Java classes – FlexLoggerServlet and ServerFlexLogger. The file web.xml will be automatically modified to add a section that maps the requests that contain the url-pattern “logging” to FlexLoggerServlet.

You can also use this reference implementation if you decide to customize the logger to utilize non-Java Web servers, i.e. PHP or .Net.

Server
This option can be used by applications that utilize Flex remoting via LiveCycle Data Services ES (LCDS), OpenAMF, or any other remoting transport. If you want to send the log output to the server, create a Java class that will support logging on the server side. Here’s the sample version of a class that uses popular Log4J component:

package com.theriabook.logging;
import org.apache.log4j.Logger;
import org.apache.log4j.Level;

public class ServerFlexLogger {

static public void log(String levelStr, String message)
{
logger.log(Level.toLevel(levelStr), message);
}
static Logger logger;
static
{
logger = Logger.getLogger(“MyFlexLogger”);
logger.setLevel(Level.ALL);
}
}

In Logging Manager, as soon as you select Server as target, a text field will be shown where you need to enter the name of the server side destination that is mapped to the class com.theriabook.logging.ServerFlexLogger.

Now the log messages from your Flex programs will be sent to the server destination ServerFlexLogger and logged there. The section 5.4 shows an example of how such communication could have been programmed manually, but Log4Fx spares you from this. Just configure the Flex remoting destination and enter its name in the Destination field as shown above.

Local Panel

Flex developers who spend most of the time “inside” Eclipse IDE send the log output to the local panel, which is nothing else but yet another Eclipse View.
Right-click on your Flex Project, select Log4Fx > Show Workbench Viewer from the popup menu. You’ll see a new view panel in your Eclipse workbench:

Select Local Panel as target, and now you can your log messages will be sent to a new Farata Logger View:

The push buttons on the toolbar allow you to turn on/off the output of debug, info, warning, fatal and error messages. You can also sort the messages by level, time, category, and message text.

XPanel

The XPanel target allows to trace Flex/Flash applications interactively in a separate window. It also gives you native platform features like ability to save log to a file, keep the log window always on top and redirect the output to platform-specific debugging API. XPanel runs on Windows 95/98/Me, NT/2000/XP/Vista. To configure output to the external XPanel, just right-click on your Flex Project, and select Log4Fx > Show External Viewer from the popup menu. You’ll see an empty XPanel window will be displayed. Ensure that the target on the Logging Monitor is set to XPanel. Now your log messages will be streamed to an external XPanel window:

XPanel’s toolbar provides quick access to Exit, Save Log, Start/Stop Logging, Clear Log, independent logging levels, Text/DataGrid Mode and “About” menu options.

Log4FlexLoggingTarget Explained

When you first added the Log4Fx dependency files , the file Log4FlexLoggingTarget.mxml was automatically added to your application project. It allows setting default targets for Log4Fx. In this section we’ll discuss code of the Log4FlexLoggingTarget.mxml:

<fx:LoggingTarget
xmlns:fx=”http://www.faratasystems.com/2006/components”
xmlns:mx=”http://www.adobe.com/2006/mxml”
defaultLoggerLevel=”{LogEventLevel.INFO}”>

<mx:Script>
import mx.logging.LogEventLevel;
</mx:Script>

<!– Setting default output to XPanel –>
<fx:XPanelLogOutput
fieldSeparator=” -> ” />
<!– Setting special popup window for filtering –>
<fx:adjustmentManager>
<fx:LoggingAdjustmentManager
keyCode=”{Keyboard.BACKSPACE}”
shiftKey=”true”
ctrlKey=”true”>
<mx:Array>
<!– List of available outputs (with their own settings) –>
<fx:XPanelOutputDescription />
<fx:TraceOutputDescription
fieldSeparator=” -> ”
includeCategory=”true”
includeDate=”true”
includeLevel=”true”
includeTime=”true” />
<fx:SocketOutputDescription />
<fx:ServerOutputDescription/>
<fx:LocalConnectionOutputDescription/>
<fx:RemoteOutputDescription/>
</mx:Array>
</fx:LoggingAdjustmentManager>
</fx:adjustmentManager>
</fx:LoggingTarget>
This code performs the following actions:
1. Set the default logger level. You can change it by modifying the value of the property defaultLoggerLevel, which has a default value of LogEventLevel.INFO, and we’ve included this code for illustration purposes.
2. Set the destination of the default output of the logger. By default, the log info goes to XPanel. You can change the default value either by assigning appropriate value to XPanelLogOutput, (for example, LocalConnectionOutput) or by using Logging Manager. You can also specify additional parameters for targets, for example, fieldSeparator, which denotes the field delimiter to be used in log files. All available parameters are listed in Eclipse Help (see, com.theriabook.util.XPanelTarget or other targets). The next section of this document describes how to set such parameters.
3. You can redefine the hot keys that bring up the Logging Settings panel by changing the values of the properties keyCode, shiftKey and/or ctrlKey. For example, if you use the combination keyCode=“{Keyboard.ESCAPE}”, ctrlKey=”false” and shiftKey=”true” in the code, pressing SHIFT + ESC will open the Logging Monitor window. If none of these properties are set, you can open the Logging Monitor by pressing F12.
4. In the code section “List of available outputs” you can change the list of available logging targets in the Logging Manager panel. By default, it shows XPanelOutput, TraceOutput, SocketOutput, ServerOutput, LocalConnectionOutput ? RemoteOutput, which were described above. If you do not need all targets, remove some of the available outputs from Log4FlexLoggingTarget.mxml.
You can set the default logging level is defined in the file Log4FlexLoggingTarget.mxml and in the Logging Manager panel. The latter has higher priority over the settings specified in Log4FlexLoggingTarget.mxml. For example, after adding Log4Fx to your project, you can specify LogEventLevel.WARN as the default logger level that will take effect on the application startup. But if you change this level to ERROR using the Logging Manager panel, it’ll remember the ERROR level till the next start of your application despite the fact that the file Log4FlexLoggingTarget.mxml still has the WARN level. To remove all logger settings made from the panel, press the button Clear Local Storage on the Logging Manager panel. After that, the settings from the file Log4FlexLoggingTarget.mxml will be in effect again.

Remote Logging

Adding dependency file described above created a new application in your project – RemoteLogReceiver.mxml, which can be used by a remote production support crew.
Let’s say the user’s application is deployed at the following URL:

http://230.123.12.10:8080/myapplication.html

By pressing the CTRL-SHIFT-BACKSPACE, the user brings the Logging Manager and selects the target Remote Logging.

The destination RemoteLogging is selected automatically, and the user needs to input a password, which he will share with the production support engineer.
Since the RemoteLogReceiver.mxml is also an application that is sitting right next to your main application in Flex Builder’s project, it’ll also will get compiled into an SWF file, the html wrapper will be generated too, and it will be deployed in the Web server of your choice too. The end users will never use it, and they won’t even know that it exists. But production engineer can enter its URL in his browser when needed:

http://230.123.12.10:8080/RemoteLogReceiver.html

Think of an undercover informant who just lives in the neighborhood, but when engaged, it immediately starts sending the information out.
After entering the password provided by the user and pressing the button Connect, he’ll start receiving Log messages sent by the user’s application.

The buttons on the toolbar allow selective output of log messages – it works the same way as with XPanel.

If you use Adobe Flex Web applications that connect to Plain Old Java Objects on the server side, the chances are that you use popular, robust, and freely available server called Apache Tomcat. If you use Eclipse-based Flex Builder, you can smoothly debug both Flex and Java code without leaving Eclipse. Flex Builder debugger does not need any special configuration. But we need to add a couple of parameters to the startup routine of Tomcat so it‘ll engage Java Platform Debugger Architecture (JPDA), which will allow other application attach to JVM that runs Tomcat and debug deployed Java classes remotely.

You just need to add a couple of options to the JVM that starts Tomcat. In this short article I’ll explain how to do this if you install Tomcat using Windows Service Installer and run Apache Tomcat as a service under Microsoft Windows. But even if you start Tomcat using command files, JVM parameters remain pretty much the same (see http://tomcat.apache.org/faq/development.html ).

Open the menu Program Files, Apache Tomcat 6.0 and start Apache Monitor Tomcat. In the right corner of Windows toolbar, you’ll see a small icon with a little red square. Open it up, select the Java tab and add the following two options lines in the Java Options field:

-Xdebug
-Xrunjdwp:transport=dt_socket,address=8000,server=y,suspend=n

This screen may look as shown below:

Press OK – your Tomcat will allow other clients to connect and get debug information through the port 8000. Now go to Eclipse and open Java perspective that contains the source code of the Java program that is deployed under Tomcat and needs to be debugged.

The next step is to configure parameters of the remote debug session. Select the Java program and then click on the menu Run | Debug, and then right-click on the option Remote Java Application on the left side of the window shown below. Select New from the menu and fill out the rest of the fields in this Window.

Note. The connection properties of Eclipse debug session should be configured to connect to the same port 8000, where Tomcat is publishing its debug information.

Close the debug configuration window, highlight the name of your Java class and press the button Debug, and it’ll start the debug session on this port. You can also start this debug session by right-clicking on your Java program name and pressing the button Debug.

The rest is simple – set a breakpoint in your Java program, and when this code will be executed, Eclipse brings the Java debugger and stops there. If you hit a breakpoint set in your ActionScript code, Flex Builder debugger will pop up.

Note. If you see an error message, the chances are that you’ve are trying to start the debug session on port 8000 more than once, which is not allowed.

This is not the only way to debug your Java code deployed under J2EE application server. For more debug options see Chapter 12 of the book Rich Internet Applications with Adobe Flex and Java.
Happy coding and debugging with Flex and Java!

Yakov Fain

Adobe has launched a new Web site: Education Developers Center. This new site should become a one stop shopping point for college professors, full or part-time students, and everyone who is studying or teaching Adobe Flex, AIR and related products.

First, there is a registration link where students and faculty can get their free copy of Flex Builder.
Second, it provides links to various Flex tutorials that will make your immersion into flex as smooth as possible.
Third, it has a motivational article of yours truly, which was written by myself while being in a good mental health. The article was written for free and under no pressure of any kind or form. Why? Because while Flex still has a room for improvement, today it has no competition in the market of rich Internet application development tools. If the balance on this market will change one way or the other, I’ll be the first one to admit it. But as of November of 2007 I suggest you to start getting your hands dirty with Flex.

Now students have no excuses like “We do not have money for beer. Ain’t gonna buy no Flex Builder”. Now you can have both: the beer (I recommend Leffe Blonde) and Flex Builder. Drink and program responsibly.

Disclaimer for professors. It’s not either Flex or Java. It’s Flex in addition to Java.

If you’d like to speed up your immersion into Flex, you may consider enrolling into Adobe Certified public training class that I’ll be teaching in New York City on the week of November 25. Students and faculty will get 40% off the tuition.

Your truly (this time wearing a hat of adjunct professor at NYU)
Yakov Fain

If you are attending EclipseWorld 2007 conference next week, I’d like to invite you to attend my class called “Rapid Application Development of Rich Internet Applications With Eclipse Plugins”.

Eclipse can help tremendously in development of rich Internet applications—especially if you have the right plugins. In the first part of this two-and-a-half hour class we’ll discuss modern techniques and technologies used for development of rich Internet clients. You’ll learn how to create a new front end for your JSP or POJO-based server side applications using Eclipse-based Flex Builder.

In Part 2, we’ll work through a live scenario, using several Eclipse plugins to create a rich create-read-update-delete application, where the front end will run in Flash Player, while the back end will use Java to work with the database. All artifacts (Java, XML, ActionScript and more) will be automatically generated, deployed and tested by the Clear Data Builder plug-in. In less than an hour, we’ll develop a typical CRUD business application with rich Web reporting integrated with Java EE and database tiers. Several Eclipse plugins used for reporting, logging, deployment automation and documentation will be included in this application.

Hope to see you in Reston, VA on Wednesday.

If you can’t make it to VA, but would like to get a fundamental Flex training and a bunch of productivity plugins, I’ll be running a week of Adobe Certified training in New York City right after Thanksgiving.
Can’t take time off work and want a cost-effective solution? Enroll into our weekend class in December. We run a holiday special deal in New Jersey.
Yakov Fain