If you are aware of the news on the Adobe labs you may know about a new tool called Flex PMD. This tool will help you improving the quality of our code and at the same time you’ll learn about “best practices” developing with Flex. This tool studies the code of an application and generates a XML report which, for better understanding, you’ll see it on any Flex PMD report viewer. You’ll find a list of possible viewers on the FlexPMD webpage.

Inside the downloads site you can access to a violations viewer made for the same labs. I just downloaded the swf for local use.

OSX setup ( once downloaded ):

To install FlexPMD on mac you can do it like this:

1- Working with the terminal, adding the downloaded library to the system path ( or executing it locally ), editing ./profile and following the instructions on the web ( this is How I do it and works pretty fine )

2- Using Automator ( I didn’t try it )

3- Using Ant ( I didn’t try it either )

Related posts:

1. Flex swf optimization ( I )
2. Tools every flex developer should know ( My TOP 10 )
3. Compile CSS to SWF memory bottleneck

*little decompilation challenge

SWF file

Related posts:

1. New Tool: Flex PMD

So you are desperate looking for that all snippet for centering things? I’ve been looking during hours until I found the solution

In Flex 3 you may use this to center elements on a container:

width=”100%” height=”100%“ horizontalAlign=”center” verticalAlign=”middle“ >

But with Spark things has changed and now you need to write a little more code

width=”100%” height=”100%“>

columnAlign=”justifyUsingWidth” rowAlign=”justifyUsingHeight” horizontalAlign=”center” verticalAlign=”middle” requestedColumnCount=”1” requestedRowCount=”1” />

/>

I don’t know if this is the best way to do that, but is the only one I found so far…

I hope this snippet help you!!!!

No related posts.

If you work with Flex and Skins you may use the option “Compile CSS to SWF”, this is a good solution but I recently found that as you add more resources to the CSS file, Eclipse may suffer a memory bottleneck while compiling it.

To solve that problem I just decided to compile the CSS directly with mxmlc, and disable “Compile CSS to SWF” option. This will recover the compiling time for the application and it shouldn’t crash again.

The only thing you need to do that is to have mxmlc on the path and write this instruction on the shell / terminal:

mxmlc [path/to/file]/file_name.css

This should generate a file_name.swf on the same folder.

The only problem of this solution is to not forgot to compile the file every time you make some change!

Related posts:

1. Flex swf optimization ( I )
2. New Tool: Flex PMD
3. Hiding the Secret API Key with Flex using Alchemy

Update: I just found this

air application for link report visualization

If you are an experienced Flex user you’ll know many ways to reduce the size of your compiled code. Using Modules, RSL, etc… But there’s nothing else you can do?

The trick I will show you do not necessarily reduce the size of your application, but you’ll get a complete list of all the classes on your project with the size it takes.

To do so you only must use this instruction:

–link-report=report.xml

for the compiler. This will generate an xml file with all the information of your project, with dependencies, sizes, etc… You’ll find this file inside your bin-debug folder

I hope you find this trick useful!

Related posts:

1. Compile CSS to SWF memory bottleneck
2. New Tool: Flex PMD
3. Flex 3, e4x, xml and filtering using Regular expressions (regExp)

Update: Seems not be working on the web, sure it’s some crossdomain issue so I’ll try to access to a budget ( since you cannot put a crossdomain.xml policy file on your Amazon’s root folder ) and I’ll update this post then

Static and dynamic website objects ( SWF, mp3, images, etc…) are high bandwith consumers, especially dynamic ones liek SWFs due to development issues. If our bandwidth gets collapsed people will take a long time to see our website or even do not come to see it.

One solution to this problem is to move all these items to Amazon S3 which provides a very good service at low cost.

There is a library in google code (as3awss3lib) I could not get to run, probably because they need the AIR libraries and my intention was to use the core Flex libraries only. So I decided to investigate how the Amazon S3 API works, and then tried to access this API using HttpService. If you have tried the same thing you’ve found that not HttpService do not allow custom headers (even if AIR lets you), so I tried to find other ways to put my own headers in httpService, My attempt was to create a connection with the Socket object but soon I found this library (as3httpclientlib) on google code work done and I only had to worry about the connection.

Here is an example of a simple application ( Having some Security Sandbox Issues, I’ll check the policies but totally works on local ):

[SWF]wp-blogfiles/Flex_Amazon.swf, 512, 335[/SWF]

And the code (to compile this code you will need these libraries: as3httpclientlib and as3crypto):

MXML source

Related posts:

1. New Tool: Flex PMD

Hello People!

It has been a long time since my last post so I’ve decided to post something found interesting. Long ago, seeking a faster way to create my websites I found CMS called Drupal, this CMS provides a lot of very important aspects of a web, such as content creation, scalability and robustness. But as you know this blog is basically based on the Flash platform technologies, not Drupal, But I was interested in joining the two sides and make a login.

To follow this tutorial is recommended that you have some knowledge of Drupal and Flex

Requirements

Have a server ( local or remote ) with Drupal

Note:

This tutorial was mad with Drupal 6.x but I think you can do it perfectly with the previous version 5.x

To complete this tutorial you will need some modules that do not come with the core ( amfphp and services ) as well as the amfphp server. To install the modules simply unzip them inside drupal_folder/modules but i recommend creating a folder drupal_folder/sites/all/modules and copy them inside. Then it¡s imperative you download the amfphp server and copy the the folder inside the amfphp. ( You should have something like this drupal_folder/modules/amfphp/amfphp, the first amfphp is the module logic and the second is the server.

Now we must activate some options of the modules we just install

- In Services activate Services ( it’s the only option, you can fail here xD )
- In Services – servers activate AMFPHP
- In Services – services activate System Service and User Service

You can go to the Drupal Services option and click on the AMFPHP server, you would see a default message from the server, if you can’t see it you may missed something.

One more thing before view the Actionscript code, in the Drupal Services menu, inside the Settings Tab, disable the “Use Keys” option which is used to provide security when we connect from external applications, and althought this tutorial might be used to create an external login too, we won’t use keys to simplify the tutorial ( maybe in a next post ) however we will leave the “Use sessid” active.

Once you have activate that options ( remember to save once you’ve activated ) we need to give permissions for anyone to access the services, if not an anonymous user couldn’t login because it couldn’t access them. Now we can begin to create our AS3

Before giving the Actionscript code I would like to discuss some aspects of the code:

While creating remoteObjects is easier in mxml I always prefer to avoid it using Actionscript but this meant more time until I found the way to communicate Flex with Drupal because I couldn’t how I could pass parameters to Drupal, if you’ve encountered the same problem, I hope this tutorial help.

Note:
Before communicating with any other service you must have your sessid, you’ll do that connecting with the system.connect service, which will return you an object containing the sessid. If you do not know if your services are working correctly because of your code or because of Drupal, you can execute them directly from the Drupal Services menu, there you can find all the parameters you need to execute any service.

Using MXML remoteObject is implemented like this ( using user.get as example ) :
id=”test”
endpoint=”http://localhost/drupal/services/amfphp”
destination=”amfphp”
source=”user”
result=”handler_drupalResult( event )”
fault=”handler_drupalFault( event )”>

sessid
1

This service is used to get the information about the user with a certain uid ( user id ). In order to do that you must be logged in.

In Actionscript should be something like this:

drupal.source = “user”
var params:Object = new Object();
params.sessid = sessid;
params.uid = 1
Operation(drupal.getOperation( “get” )).argumentNames = ["sessid","uid"]
drupal.getOperation( “get” ).arguments = params;
drupal.getOperation( “get” ).send();

The lined marked in bold is the one I was searching during hours, this is automatically implemented in the mxml component, if you don’t put it Drupal will always return “Missing Arguments”

Finally, the code:

I hope you find this usefull!!

Related posts:

1. Creating your first BlazeDS project
2. Flex, Amazon S3 and custom headers
3. Flex swf optimization ( I )

Now we’ve got Adobe Flex configured to work with BlazeDS let’s start with our first project.

We will do this:

We will create the front-end logic in Actionscript and MXML.

We will create the back-end logic in JAVA

We will create the needed config files to establish a bridge or a connection between the front-end and the back-end.

So let’s start creating a new project, this time we want to use a Server technology. Here we must select J2EE because tomcat / BlazeDS uses this language / technology and we won’t touch anything

you can see the results in the next image:

At the bottom of the image you’ll see a check box with this text: Create combined Java / Flex project using WTP. In the java source folder will be placed all the raw java files, the logic of the back-end, once you execute the project this logic will be compiled and placed to the server automatically, don’t worry about that.

Next we must configure the J2EE settings, the target runtime will be BlazeDS we created in the last post. I always put the same in the Context root and the Content folder, the project name, but in this example I will put context_root and content_folder to show you how the folders and files are created. The project is structured like this:

Inside the content_folder to folders has been created: META-INF, and WEB-INF ( this is the important one now… )

inside WEB-INF we’ve got 4 folders:

classes: This is the back-end compiled logic created inside the src folder, every time you run the project the JAVA files will be recompiled ( if needed ) and updated inside this folder.

flex: Here is the messaging configuration you will see 4 files inside this folder but you only need services-config.xml the other files are automatically created for order purposes, if you delete them you will get some errors because you must edit services-config.xml. This file includes the other three, if you delete this inclusions, you can delete the files… ( of course this files are useful to mantain the messaging structure clean but this is a beginner tutorial!! )

lib: Some libraries, don’t need to look here…

src: Don’t need to look here either…

web.xml configuration file, we won’t edit this.

OK.

Now we’ve got our structure created the first thing we must do is add our project to our server, this will create a new folder inside the backend with the name of the project and this will contain a copy of our recently created content_folder.

Now we will delete all the files inside content_folder -> WEB-INF -> flex except for services-config.xml, and we will edit the services node like this:

 	            	com.ncatstudios.remoting.Test

The important parts of this piece of XML are the destination and the source. The destination is like the address of the wharehouse where to fetch the data. We must call somewhere from flex to access the data, this name must be the same both sides. The source is the name of the JAVA class ( package doted format ) where we will call the methods.

Finally here is the code to run the application:

and the JAVA logic:

package com.ncatstudios.remoting;

public class Test {

	public String sayHelloTo(String who)
	{
		return "Hello " + who;
	}

}

Now you can run the application to test it.

Possible error / bug: I found that sometimes my application doesn’t run as it should.

If you open the project properties, inside the Flex Server section just delete the folder of the root URL, leave it to http://localhost:8080, you probably won’t need to edit this for rest of the life of this project.

Related posts:

1. Setting up your BlazeDS (tomcat) server on Eclipse ( local )
2. Flex & Drupal login ( Actionscript remoteObjects )

One of the best improvements of AS3 is the inclusion of native support for parsing xml with e4x. E4X give us the possibility of parsing xml data as objects.

You can access the information using “dot” notation ie node_name.node_child_node_child…

As any technology there are advantatges and disadvantatges:

Advantatges:

This technology is fast to write, very intuitive and saves a lot of typing.

Disadvantatges:

You must be careful about what are you filtering, large xml means an increasing of flash player time to parse the file, which is stored in memory temporarely, and this is a quite important performance issue.

In the next example you can find how can you filter a xml file using this technique:

[SWF]wp-blogfiles/bin-release/regex.swf, 500, 576[/SWF]

And here some code:

private var _xml:XML;		

private function init():void
{
        loadXML("../assets/XML/texts.xml");
}

private function loadXML(xml:String):void
{
        var loader:URLLoader = new URLLoader();
	loader.addEventListener(Event.COMPLETE, handler_xmlIsLoadedCorrectly);
	loader.dataFormat = "e4x"
	loader.load(new URLRequest(xml));
}

private function handler_xmlIsLoadedCorrectly(event:Event):void
{
	_xml = new XML(event.target.data);
	TA_Xml.text = _xml.toString()
}

private function handler_searchStringIsChanged(event:Event):void
{
	var reg:RegExp = new RegExp(TI_SearchString.text);
	TI_Results.text = _xml..item.(reg.test(text)).@id
}

I hope you find it useful!

Related posts:

1. Flex swf optimization ( I )
2. Flex, Amazon S3 and custom headers
3. Compile CSS to SWF memory bottleneck

BlazeDS is a “server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time“, in other words if you want to write chat applications, or maybe optimize the communications between front-end and back-end this is a great OPEN SOURCE option.

There’s the enterprise version called LCDS ( Livecycle Data Services ) which offers some more features like Data-Synchronization, Offline applications, RIA-PDF generation, etc…

You can find a comparison between the features of BlazeDS and LCDS here:

Requeriments:

- You must download and install JDK ( Java Development Kit )

- You must download and copy BlazeDS ( Copy to the folder you wish, for example C:\Program files\BlazeDS, this is the folder I’ll be using all the tutorial )

- Obviously you must have installed Eclipse or Flex Builder

- You must must/have install/ed the plugin for Java Development on Eclipse / Flex Builder ( Help -> Software Updates )

1. Create an environment variable called JAVA_HOME pointing to the JDK installation.

To create this environment variable you can right-click on MyPC and follow this images ( Remember to change the folder if necessary ):

Now you must restart in order that changes take effect.

1,5. Showing Servers tab

You may want to view the servers tab in order to run it from any perspective.

In this case:

from Flex Builder go to Window -> Other Views… -> Server -> Servers

from Eclipse go to Window -> Show View -> Other… -> Server -> Servers

You will see in your bottom view a new tab called Servers.

2. Create a new server in Eclipse / Flex Builder.

Right click in the Servers view and select New… or New -> Other -> Server -> Server

This window will appear:

We’ll let Server’s host name to localhost and will call this new Server BlazeDS.

Click next.

Now we will point this new server to the tomcat’s folder in our BlazeDS installation. Be aware to change the path if needed.

Click Next.

We won’t add any project for the moment:

OK. We’ve just created a new server.

You can run it to test it, but it won’t work until we configure it correctly, how? keep reading!!!! XD

3. Configuring correctly the server.

Right click on your brand new server in the Servers view and select Open…

This image should appear:

Here you must change two values under Server location:

1. On the first radiobuttons select the second one ( Use tomcat installation )

2. Chage Deploy path from wtpwebapps to webapps or your full path to webapps folder.

4. Test the server.

Now you can Restart the server and Test it going to this address in your internet browser http://localhost:8400

A welcome screen will appear with a short many of your options.

Note: In order to get the examples working you must run the file C:\Program Files\BlazeDS\sampledb\startdb.bat ( Change path if needed )

5. That’s all folks

That’s all!!!  I’ll post how to connect your AIR / Flex project with this server very soon!!!!

Happy Xmas

Related posts:

1. Creating your first BlazeDS project
2. Flex & Drupal login ( Actionscript remoteObjects )
3. Compile CSS to SWF memory bottleneck