My first Red5 experience

I've worked with both Chris Allen and John Grden on some projects for my employer. During that time, I can't count the number of times I heard about Red5, but I never got a chance to try it out.

This past week I caught Chris' "Building Red5 Applications" session at FlashForward. I finally got up the motivation to download and try it out.

Here's my experience. It's my first time playing with Red5 (but I have plenty of java & eclipse experience) so it's almost guaranteed I'm not doing everything the "right way". But this way worked for me, maybe it'll help someone else. If it does help you, please leave a comment. Writing this up takes a while and I'm not going to bother in the future for other things if nobody gets value out of it.


Attempt #1
I wanted to try out the .tar.gz package so I would know how to deal with it on Linux as well as Windows. That way I'd be able to deploy anything I built on my webhost fairly easily.

I unpacked it, ran ant, and let it all build. So far so good.

Then I ran the red5.bat file. Lots of exceptions. Like millions, maybe billions, I lost track. Seems my sample applications weren't found. I poked around a bit, but no good. Screw this.

Attempt #2
I went for the windows installation package. That unpacked everything and the server ran fine. I could open up a web browser to http://localhost:5080/ and view the demos, admin panel, etc.

Note: The default admin username/password is admin/admin. You can change that in conf/tomcat-users.xml I'd suggest changing it.

Eclipse

So now I want to get it rocking with eclipse. I launch eclipse (I'm lazy and like things easy so I use easy eclipse.)

I select File->Import->Existing project, then pick my Red5 project. Bamn, I got an eclipse project set up.

But there's compile errors.

Severity and Description Path Resource Location Creation Time Id
Project red5_server is missing required source folder: 'test' red5_server Build path 1190574481375 173990
The project cannot be built until build path errors are resolved red5_server Unknown 1190574530687 173992

So I closed the red5 eclipse project, fired up a text editor, and looked in my .classpath file inside the red5 folder. It had the offending entry.

<classpathentry kind="src" path="test"/>

Note... I delete this line later on:
<classpathentry kind="con" path="org.jayasoft.ivyde.eclipse.cpcontainer.IVYDE_CONTAINER/ivy.xml/test,"/>
You might as well do it now since you're in there.


So I removed it, and repopened eclipse.

A quick Project->Clean and...
3656 Errors

Ok, seems it doesn't see some libraries. Right click on my project, select properties. Go into "Java Build Path", select the "Libraries" tab, click the "Add Jars..." button, and add all of the .jar files in the lib directory.

A quick Project->Clean and...
0 Errors

WOOT

Running it from Eclipse

Now I go into src/org/red5/server, find the StandAlone.java, right click it, and select "Run as..."->"Java Application".

I check my eclipse console panel and get a bunch of lines the last one being:

[INFO] 2007-09-23 15:14:20,875 main:( org.red5.server.Standalone.main ) Startup done in: 5875 ms

Nice.

I point a web browser at: http://localhost:5080/ and see that the red5 server is indeed running. I launch the ball demo and push the connect button. Then I make a new browser window and launch the demo again. When I move the red5 logo in one window, it moves in the other. That means it's all working.

Eclipse also helpfully added an entry to my run button (the green circle with the play button) in my toolbar so I don't have to find the StandAlone.java file again.

I want a quick launch button for debugging too, so I kill the server (click the red square on the console panel) and right click the StandAlone.java and select "Debug as java application". The server starts in debug mode, and eclipse adds it to my debug button on the toolbar. (the green beetle button)

Making something

Now, I want to make something. But first, I want to get rid of the samples. So I kill the server, close the eclipse project, and edit the .classpath file again. I know there's a way to do this through eclipse, but I find editing the file quicker.

I get rid of these entries:
<classpathentry excluding=".svn/*" kind="src" path="webapps/echo/WEB-INF/src"/>
<classpathentry excluding=".svn/*" kind="src" path="webapps/tutorial/WEB-INF/src"/>
<classpathentry excluding=".svn/*" kind="src" path="webapps/fitcDemo/WEB-INF/src"/>
<classpathentry excluding=".svn/*" kind="src" path="webapps/oflaDemo/WEB-INF/src"/>
<classpathentry excluding=".svn/*" kind="src" path="conf"/>
<classpathentry excluding=".svn/*" kind="src" path="webapps/test/WEB-INF/src"/>
<classpathentry excluding=".svn/*" kind="src" path="webapps/midiDemo/WEB-INF/src"/>
<classpathentry excluding=".svn/*" kind="src" path="webapps/agile/WEB-INF/src"/>

And I add one for my project, I'm going to work on something for AgileAgenda, so I'll call it agile.

<classpathentry excluding=".svn/*" kind="src" path="webapps/agile/WEB-INF/src"/>

Then I go rename the "echo" example to "agile", and delete all the other samples (I deleted admin too, not sure if that was a good idea or not)

Open up the project in Eclipse again.

And I don't see my agile webapp. WTF? Oh yeah... Eclipse is retarded. Right Click->Refresh and it shows up.

I want to rename the Application class in my webapps folder (see the picture).



Luckily, Eclipse rocks Java more than it rocks Flex, so I can just right click, select refactor, and pick move. Then I click "Create Package" enter in com.agileagenda.services and click ok a bunch of times.



I delete the rest of the webapp echo source tree.

A project->Clean and...



I think I broke something. Oh well.

Project->Properties->Builders and remove the invalid entry.



Project->Clean and build successful.

I hit the debug button, and search the console output. No errors reported and:

[INFO] 2007-09-23 15:44:45,375 main:( /agile.invoke0 ) Initializing Spring root WebApplicationContext

So I guess it found my new app. Yay!

Kill the server.

So I go back to my Application class and make a new method.

public function login(username:String, password:String) : Boolean
{
return true;
}

Then I remember that this is Java and not Actionscript so I rewrite it...

public boolean login(String username, String password)
{
return true;
}

I go to my project menu and turn on "Build Automatically" and get...

Severity and Description Path Resource Location Creation Time Id
Unbound classpath container: 'org.jayasoft.ivyde.eclipse.cpcontainer.IVYDE_CONTAINER/ivy.xml/test,' in project red5_server red5_server Build path 1190576857156 182811


WTF?

Close the project, open my .classpath file, remove the offending line:
<classpathentry kind="con" path="org.jayasoft.ivyde.eclipse.cpcontainer.IVYDE_CONTAINER/ivy.xml/test,"/>

Open the project, Project->Clean, build success.

I have no idea why that didn't bite me earlier.

I press the debug button. The red5 server launches.
[INFO] 2007-09-23 15:51:26,062 main:( org.red5.server.Standalone.main ) Startup done in: 4937 ms

Yay.

Writing some actionscript

Now that I have a (dumb) login method, I want to try it out in Flex.

I have a "Sandbox" AIR application set up in Eclipse that I use when I want to quickly play with something. I highly suggest everyone do that. So I open my sandbox, open the MXML and create a quick login form.

<mx:Label x="26" y="43" text="Username:"/>
<mx:TextInput x="101" y="41" id="txtUsername"/>
<mx:TextInput x="101" y="71" id="txtPassword" displayAsPassword="true"/>
<mx:Label x="26" y="73" text="Password"/>
<mx:Button x="196" y="101" label="Login" click="onLoginClick()"/>
<mx:Label x="58" y="148" text="Label" id="lblResult" width="281"/>

And then add in some code (remembering that this is Actionscript!)...

private var netConn:NetConnection;

protected function onLoginClick() : void
{
NetConnection.defaultObjectEncoding = flash.net.ObjectEncoding.AMF0;
SharedObject.defaultObjectEncoding = flash.net.ObjectEncoding.AMF0;

netConn = new NetConnection();
netConn.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus );
netConn.addEventListener( SecurityErrorEvent.SECURITY_ERROR, errorHandler );
netConn.addEventListener( AsyncErrorEvent.ASYNC_ERROR, errorHandler );
netConn.addEventListener( IOErrorEvent.IO_ERROR, errorHandler );

netConn.connect("rtmp://localhost/agile");

}

protected function sendLogin() : void
{
var responder:Responder = new Responder( onLoginResult );
netConn.call("login",responder,txtUsername.text, txtPassword.text);
}

protected function onLoginResult( result:Boolean ) : void
{
lblResult.text = result ? "Login Success!" : "Login Fail!?!";
}

protected function onNetStatus(event:NetStatusEvent) : void
{
switch( event.info.code )
{
case "NetConnection.Connect.Success":
lblResult.text = "Connected, sending login";
sendLogin();
break;

default:
lblResult.text = "ERROR!! " + event.toString();
break;
}

}

protected function errorHandler(event:Event) : void
{
lblResult.text = "ERROR! " + event.toString();
}


I start the server, run my sandbox app, click the login button, and get a connection error. Something went wrong somewhere.

I bet it's a configuration problem. I open webapps/agile/WEB-INF and notice 3 config files.

in web.xml I make this change:

<context-param>
<param-name>webAppRootKey</param-name>
<param-value>/agile</param-value>
</context-param>

In red5-web.xml I make this change:

<bean id="web.handler"
class="com.agileagenda.services.Application"
singleton="true" />

In red5-web.properties, I make this change:

webapp.contextPath=/agile

Kill the server, restart it (debug mode), try my app again. "Login Sucess" YES!

Now I head into the java class and put a breakpoint on the "return true;" line. I hit the button on my AIR app and Eclipse correctly breaks on the line. Yay!

I inspect the username and password parameters, and the values I had filled into the AIR app are present. Yay!

I'm now to the point where I can start actually writing my application.

What's the right amount of copy protection?

I'm currently working on a piece of commercial software that will be available through a download and will use a license key to activate it. The software is aimed at helping people schedule projects and will be targeted mostly to corporate users.

With the recent Windows Vista black screen of death, it got me thinking about what sort of measures I should go through to prevent unauthorized users from using the software.

While I don't wish to burden legitimate users, I do want to prevent most piracy. How much copy protection is appropriate?

Is it acceptable for the software to phone home? If so, what data is appropriate to report on? The license key? Software version? What about a unique installation ID?

Should I disable license keys for small amounts of piracy, like when there's 3 active installations of the software? What about widespread piracy where we detect dozens or hundreds of uses of the same license key? Would a simple message stating the software may be pirated with instructions on how to purchase a valid license be sufficient?

As a more general question, what licensing schemes have you seen that work the best?

ObjectHandles now has mouse cursor support.

ObjectHandles, the easy way to add user resizing & movement of objects to your flex application, has been updated.

Now, when mousing over the component or the various handles an appropriate mouse cursor will be displayed.

There's been a lot of interest from people about this component. It's seen over 400 downloads and I've received quite a few emails about it. If you interested in following this project more closely, I've set up a google-group where I plan to announce new versions and people can ask questions. To join, go over to:
http://groups.google.com/group/objecthandles

Downloads, examples, etc can be found on the project page:
http://www.rogue-development.com/objectHandles.xml

If the example on the project page seems out of date, you may have to clear your cache. I've found some browsers don't refresh i-frames like they should.

Log Viewer

I've started a new project to make a flex component to quickly display largish amounts of text. It's main purpose is to display logging information on screen. It's uses a semi-intelligent algorithm to re-use on screen components and batch UI updates in groups.


http://www.rogue-development.com/logViewer.xml

First look at a Flex Component to resize on screen objects.

I've been spending some time working on a flex component to add "handles" to an on screen object to allow an end-user to resize and move it. It's exactly the same type of functionality when you're using design mode of Flex Builder.

Below is the first look at the current progress I've had.



As you might have noticed it has a few bugs and is far from done feature-wise. It you'd like to keep up on it, take a look at the project page.

If anyone knows of a project doing this same type of functionality, please let me know. I hate to duplicate efforts.

Programatically add constraints through Actionscript

Flex Builder has that great "Constraints" UI that allows you to anchor components to their parent that I'm sure everyone has used.


But what happens if you create an object in actionscript and then you want add constraints to it? There is no "top" property you can set to anchor the component to the top. It turns out the constraint system is entirely based on Flex's style system and can be used as follows:

var someComponent:SomeComponent = new SomeComponent();
var style:CSSStyleDeclaration = new CSSStyleDeclaration();
style.setStyle("top", 0);
style.setStyle("horizontalCenter", 0);
someComponent.styleDeclaration = style;

And BAMN, someComponent will be anchored to the top, center of it's parent (assuming it's parent is a container that supports anchors.) Available style selectors are:

1. top
2. left
3. right
4. bottom
5. horizontalCenter
6. verticalCenter

You could also specify the styles in a css sheet, or by adding them to an already existing style.

Edit...

As a commenter has posted you can also use the setStyle method in addition to the various other methods I mentioned. So the following would also work:

someComponent.setStyle("top",0);

Automated website testing

There's some really expensive packages out there for automated website testing. These things cost thousands of dollars, usually only run on windows, and are huge bloated software packages. There great for your average QA person to quickly "record" a web session and play it back later.

But developers have different needs than QA folk, and we'd like to do automated tests as well. My requirements are as follows:

1) Cross platform (windows, osx, linux, more is nice)
2) Allows me to simulate all types of requests to a web server / service.
3) Can be integrated into ant for completely hands-off testing.
4) Can verify any element of a page.

The package I've been using for this is called Hatatap.

It allows you to construct o-xml programs that easily fulfill all of my requirements. o-xml is an object orientated programing language that's written entirely in XML. If you have a good XML editor that understands XML schemas, than you get all the nice context sensitive completion you expect from a modern development environment.

Website updates

Last night I spent some time updating my long-neglected personal websites.

Rogue Development - The "dumping ground" for any interesting projects I work on.
http://www.rogue-development.com/

This site is kind of neat. It consists solely of XML and XSLT documents. The XML is transformed by the XSLT on the client side (so it only works in semi-modern browsers) and is formatted by a css stylesheet. If I had cared about supporting more browsers, I could have done the XSLT conversion on the server side, but I don't. You can view-source on any page to see the XML, and you can check out these links for the XSLT and css pages:

CSS
XSLT

You're free to use them, modify them, etc on your site if you wish, just drop me a note letting me know. I like to see what other people do.

Someday, I might write a Flex interface for reading the XML content. Or even better, I wonder if it's relatively easy to create a flex app to author the XSLT documents.

Marc-Hughes.com - My personal "fun" website.
http://www.marc-hughes.com/

The front page is flash, but the rest of the site is the same XSLT as rogue-development with a different css sheet to format it.

Using Flex Builder 2 with Perforce

Here are some directions I made to get a developer set up with the perforce plugin in Flex Builder. It then shows how to do a couple common tasks. I usually submit through the p4win client, so that's the work-flow I show, even though you can do it directly from Flex Builder if you wish.

It assumes:

1) You have Flex Builder 2 and Perforce installed and working.
2) The project you have is from perforce, and you've already opened it in Flex Builder

Enjoy:
http://rogue-development.com/SetUpPerforce.swf

Warning: Movie is amateur hour stuff. It's only my second time using wink, and I didn't want to spend a lot of time on it.

I've also gone through some work to figure out how to share a Flex project among multiple developers. I'll make another post at some point explaining that. Unfortunately, I probably wont be able to post that movie since it does show some proprietary company information.

SWC Refreshing

So I got the ant build for the library working with my code-behind thing from yesterday. Unfortunately it has the same results as building the library in a separate project. It seems Flex Builder won't refresh it's SWC's until you either open the config dialog or restart.

Has anyone else found a way to compile a SWC, and have those results immediately apparent in the design-mode view of an app?

Code in front

I'm new to the whole Flex world. One of my first questions was to figure out how to link the components that I laid out in the mxml editor with the classes I created to control those components.

I googled around and found the way most people advocated to do it is with code behind. It consists of creating a base class in actionscript, then extending that class with mxml. This immediately struck me as an odd way of doing it, but I pushed on. It works pretty well.

But I've had this nagging feeling that it's doing things backwards. I have a component that I want to extend the functionality of through code. Why am I doing that inheritance in the opposite direction?

Trolltech makes a great development framework that I'm far more familiar with. They have a .ui format that generates c++ code in exactly the same way that flex has an .mxml format that generates actionscript code. But I think the Trolltech guys got it right just a little more than the Adobe guys. Their .ui generates the base class for you to extend.

So I put my "nagging feeling" and my experience with QT together and have come up with what I will call "Code in Front".

Code in Front Step 1
Create your component in mxml. Here's my example:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Label text="Hello World" id="mLabel"/>
<mx:Button label="Goodbye" id="mButton"/>
</mx:VBox>

Save this file as "TestComponentBase.mxml". This way, a class named "TestComponentBase" will automatically be generated during compile time. We're going to extend that class in the next step, hence the term: "code in front"

Code in Front Step 2
Create your actionscript class by extending the mxml class. Mine looks something like this:
package
{
import mx.events.FlexEvent;
import flash.events.MouseEvent;

public class TestComponent extends TestComponentBase
{
public function TestComponent()
{
super();
addEventListener(FlexEvent.CREATION_COMPLETE, init);
}

protected function init(event:FlexEvent) : void
{
mButton.addEventListener(MouseEvent.CLICK, onButtonClick );
}

protected function onButtonClick(event:MouseEvent) : void
{
mLabel.text = "Goodbye World!!!!";
}

}
}

Code behind step 3:
Use your new component in your application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" xmlns:ns1="*" width="423" height="400">
<ns1:TestComponent />
<ns1:TestComponent />
<ns1:TestComponent />
</mx:Application>

And that's all there is to it. Easy, elegant, makes sense to me.

But there is one huge downfall to this. When using flex builder in design mode to lay out your controls in your app, this is all you see for the above mxml:



That's losing way too much of the functionality of the tools for most people and I agree. Luckily, there is a way to fix this. First, create a new project based on a Flex Library. Then, inside that project create a new directory from the flex ide. Call that directory "src" and click the "advanced" button. Link that directory to your source directory from your "main" project. You should see something like this:



From this newly created project, right click your component class (TestComponent.as in my example) and select "Include class in library". Assuming "Build Automatically" is checked off in your project menu, you will shortly get a brand new .swc inside your bin directory.

Now, go back to your "main" project. Right click the project, go to properties. Select "Flex build path" on the left. Select the "Library path" tab on the right. Click the "add swc" button and add that swc we just made in the above step.




Now, go back to your application mxml, go into design mode, click the refresh button, and bamn:



You can now edit the actionscript all you like without problems.

But now a new problem arises. If you edit the mxml base component, and then go back to your application mxml, those custom components are just blank boxes again. Relaunching flex builder fixes this. Going to the properties of your project (not changing anything) and clicking "ok" also fixes it. But that's a big inconvenience and is something worth investigating to fix.

I'm pretty sure I can replace the whole second-project thing with an ant build task and make that automatically build by installing ant into flex builder. That will most likely fix the problem.

For the record, I'm not claiming to have come up with some novel way of doing things. This idea is so obvious that it's very likely that someone somewhere else has had it before.