JDesconectado Ria y un poco más

Using Embed Jetty and BlazeDS Remoting with Adobe AIR

2011-10-03T12:27:00.000-07:00

When we need to communicate with server side data from an Adobe AIR application we usually use HTTP services, Web Services or Remoting this works great, but what happens when we need to create an standalone application? We have options like merapi, flerry and transmission...

I want to show you how to embed Jetty Server in an Adobe Air application and use BlazeDS for communication. The use case is simple access a MySQL server directly from Adobe AIR but with this option you might experiment and create better use cases for this.

We need to download the following:

Jetty library (i use jetty-all-7.4.0.RC0.jar)
Servlet api (i use servlet-api-2.5.jar)
Mysql Connector
BlazeDS 4

Let's coding:

First we create a simple table for sample purposes:

Java side:

First we create a simple Java Project and add the 2 jars in the classpath.

Product.java

Here i use plain JDBC but you can use JPA, Hibernate, etc.

ProductDAO.java

ProductServices.java

This is a very important class, here we are going to create the Server instance and start it.

Note: I assume that you know something about embedding servers, if you want some background here you can find a great resource.

BlazeDSServer.java

Now we need to extract the BlazeDS.war content. create a folder called webapp inside your src folder with this content, your project structure should look like this.

The last thing you need to do is declare a remote destination on your services-config.xml

Now we code the Air side:

Fist create an asset folder inside your air src folder and copy all the bin folder from your java project

As you can see i made the same copy into the bin-debug folder, i don't know why it doesn't export all the files to the bin-debug.

Now let's code the application, first in the descriptor file enable the extended desktop profile so you can use Native Process

Now the code:

EmbedJetty.mxml

Now let's take a more closer view to the code:

First the executable file will be the Java path so it depends on your machine.
I use NativeProcess to start the embed Jetty instance and a socket to shutdown the embed jetty instance.
The arguments for the NativeProcessStartupInfo are the necessary classes to make the Java desktop app run. In the application:

args.push("-classpath");

args.push(".;lib/jetty-all-7.4.0.RC0.jar;lib/servlet-api-2.5.jar;lib/mysql-connector.jar");

args.push("BlazeDSServer");

Once it connects you can use RemoteObjects to make rpc call to your Java code.

You can use messaging too.

Before you run check your ip match with the socket connection ip, and verify the JDBC setting in the Java code.

When you click the start server button, in the text area you see the log comming from the server.

Now click the Get Data button and in my case the screen will be the following:

Stop the server by clicking the Stop Server button.

And that's all, hope this will help you, any question or bug please let me know.
Here is the source code for the Java Project
Here is the Source code for the Flex Project

Using BlazeDS Remote Object and Java to Upload and get Files

2011-08-26T00:37:00.000-07:00

In a Java/Flex project i have been working on we need to upload and download images, simply task no? Yes... is simple we use the FileReference class and point this to a servlet then simply use the upload method.

Really easy when you run in your local machine but what happens when we run this in a remote machine... let me think... ah! yes the lovely Flash Player Sandbox Security Exception... ok! we can handle it, just use crossdomain.xml file and run your application again and... Flash Player Sandbox Security Exception again (dear this is becoming my best friend), then i read, to upload a file Flash player uses the socket api and now we need a socket policy file... so i give up and try to do it in another way.

Today i show you how you can do a kind of "upload" and "show" a remote file using Remote Objects and the lovely BlazeDS. So let's start

We use a Java class (not servlet) to manage the upload and the get of a file.

In the Java side we have two methods uploadFile and getFile, the first one uses the name, the directory and the content as an byte array to write a file in the disk using the FileOutputStream class. For the second method we need the full file name (directory + file name) and use the FileInputStream to read it and put the data in a byte array and the send it to Flex.

FileUtils.java

Don't forget to change your remoting-config.xml :-)

And in the flex side we still use the FileReference but this time only for load the file, and then we use remote objects to send the chunk of data, the file name and the directory to the upload method, for getting the file the java side just send the chunk of data and we manage it with a ByteArray and show it.

That's all now you can upload a file using a remote object and show this file with this two methods, and remember to secure your endpoints and externalize your server configuration. Any question or mistakes just let me know. Thanks for reading.

Creating Dynamic Remote Destinations with BlazeDS

2011-05-15T20:38:00.000-07:00

Doing remoting with Flex and BlazeDS is great, you set up your remoting-config.xml with your destinations and them consume this destination with your Flex client, that's good if you have your destinations hardcoded in your xml file, but there are times when you want to create your remoting destinations dynamically, taking this post as a base i will show you how to do this with BlazeDS in a simple example.

First we create a class called DestinationHelper this will contain all the classes you want to create at run time, read the comments so you know exactly what are you doing for a deeper explanation please read this post.

I take the great explanations of Nick Kwiatkowski and change a little so this can match the example, please all the credits go to him.

The first thing we do is call the createDestination() function on the remoting-service and cast this to a RemotingDestination. This will pass back a reference to the new destination that was created for us with the name we passed in. Next, we set the source property. Since we are working within Java, this could be the dot-path-name of the Java class we are working with, or * to allow our dynamic destination to talk to ANY Java Class.

The next thing we do is set up the Adapter. The adapter is what actually processes the requests from our connected Flex client and sends it over to Java to be worked on. In our case, I am having a Java Adapter do the processing, so I went with the “java-object” adapter. There are a variety of adapters available, and depending on your situation, you may want to choose from a list of adapters, or use the getDefaultAdapter() method to find out what is the default for the service you are working on. Creating an instance of the adapter involves calling the createAdapter() method on the destination. What is returned to you is a reference to the adapter that isn’t initialized yet. When diving through the source code — this is what screwed me up the most, as I was under the impression that the createAdapter() was all I had to call to get things working. If that is all you do, you will get NullPointerException errors when you try to pass data to the destination.

In order to initialize the adapter, you need to pass in a property with the type of a ConfigMap. The ConfigMap holds the configuration properties that the adapter is expecting. There are lots of properties that could be set (and if you want to get a general idea of what they are, take a look at the XML config). In theory, you should be able to pass in an empty ConfigMap to the initialize method and it will take all the defaults (which work in my case), but there is a bug in the JavaAdapter (Yes in the Java adapter too) that requires to you set the use-mappings and method-access-level properties to something or you can’t send any data to the destination. These two properties are within a ConfigMap named “access” (again, take a look at the XML in the remoting-config.xml to see how this translates). Finally, in order to initialize the adapter, we pass in the ConfigMap we just setup to the initialize() method and we are set.

Our final steps include binding our newly created adapter instance to the destination by using the setAdapter() method, and setting the channel that the destination will bind to. If I wasn’t making the assumption that the channel “my-amf” already exists, I could call the getChannels() method on the Message Broker to verify that it is one of the ones available. If the channel wasn’t available, I could create using a similar method as above. And finally, we need to start the instance. Call the start() method to start it. If everything is set up right, you should be able to send data to your new destination!

Realtime Data Synchronization between Flex and Air for Android using Red5

2011-02-03T22:17:00.000-08:00

After a January break, i going to write more about Air for Android specifically targeting to Realtime data synchronization, in this post i'm going to show you how you can synchronize Adobe Air with Adobe Air for Android in true realtime using Red5 RTMP.

Requirements:

Adobe Flash Builder Burrito Preview.
Flex 4.5 "Hero" (Comes with Flash Builder Burrito)
Red5 Server.
Eclipse 3.4+ with Red5 Plugin installed. If you don't know how to install here is a little tutorial.
Some basic AS3 knowledge is recommended.

Hardware:

Toshiba dualcore laptop 6gb ram running windows 7.
Google Nexus S smartphone with Air for Android installed.

So let's code.

Server Side:
If you successfully install Red5 plugin into eclipse, this part will be straightforward. Create a new Dynamic Web Application and call it MoveServer, set the Target Runtime to Red5, in Configuration click the Modify button and make sure that Red5 Application Generation is Selected.

Now click finish and the Red5 Plugin will generate two Projects a Java Dynamic Web Application and a Flex application, delete the flex application. Now one more change, go to the red5-web.properties located in under WebContent/Web-INF and add the ip of your machine in your virtualHosts. You might wondering why do this since there is a localhost well when you try to connect from your phone it will try to connect to localhost and since there is no localhost in the phone it will not work.

red5-web.properties
webapp.contextPath=/MoveServer
webapp.virtualHosts=localhost, 127.0.0.1, 192.168.1.2,

Thats all for the server side. Now let's continue with the client side: The application that i will build is pretty simple an image in the screen that uses the phone accelerometer to move around the screen and for the desktop version instead of the accelerometer y use mouse events to move the image this to applications will be synchronize in real time.

Client Side:
In Flash Builder Burrito create a new Flex Mobile Project call this BallMovementMobile and Select Hero has your Flex SDK.

Next target to Google Android, select Blank as the application template and finally uncheck Automatically Reorient, you don't need any server settings so hit finish.

Now search for any image and use it, i use a soccer ball. Put the image in a assets folder under the src folder

Now add and image component to your mxml file:

BallMovementMobile.mxml

Now let check if our phone has accelerator and add the event listeners so we can use the accelerometer events, add an creation complete event in your main application tag and add the following:

BallMovementMobile.mxml

The next step is add a net connection and a shared object to out application:

BallMovementMobile.mxml

Some words about the code above:

I put the accelerometer.setRequestUpdateInterval to 50 so i can get a faster update from the accelerometer, here you can play with the values to preserve your battery life.
In the SharedObject getRemote method i named it "victor" you can put any value you want.
The Sync event is where all the magic happens, here all the clients are notified that something has change and they must synchronize with that changes.

Now let's add the code for sync and accelerometer update events:

BallMovementMobile.mxml

Some words about the code:

In the accelerometerUpdate handler i calculate the upper bound and the lower bound for the width and height, then get the x and y values given by the accelerometer, check if the value is not greater than the upper bound or lower than the lower bound and update the image x and y has necessary.
When i update the shared object i call it "ballCoordinates" again you can use any word here.
In the sync event i get the shared object data and update the image x and y.
Finally i add and native deactivate event so the application will not run in the background, again this is for cpu saving. (You can read more Air for Android tips here)

The final step for the mobile application, change the application descriptor properties as follows:

Now create an Air application (not mobile) use the same image and add the following code:

There are a little code differences but it's almost the same application.

Now run both applications and move your phone and the two screens will be synchronized in realtime.

That's all here is the source code for the mobile the desktop and the server application. Here is a quick demo of the application:

Recommendation: When you use the source code please make sure you change the parameters according to your system.

If you have any question or found a mistake or bug please let me know. Thanks

Install Blackberry PlayBook Simulator in Ubuntu 10.10

2010-12-18T22:15:00.000-08:00

Today we are going to install the Blackberry Playbook Simulator, so you can create and test applications for this awesome device before running on the real device. This device is awesome, the specifications are very impressive, check all in the blackberry - playbook web page http://us.blackberry.com/playbook-tablet/, and like blackberry always say this device is Enterprise Ready :D.

The good news with the last update of the Blackberry Playbook site is the linux release of both products: the simulator and the sdk (i have been waiting for this!!!). So let's install the Blackberry Playbook Simulator in Ubuntu 10.10.

Requirements:

Blackberry Playbook Simulator.
VMware Player 3.1.3. If you have problems installing VMware Player in Ubuntu 10.10 check this.

The machine that i use for this installation has Ubuntu 10.10 - 64bits installed.

The first we need is to install the Simulator, open the terminal change the directory where you download your installer and run the following command:

chmod +x BlackBerryPlayBookSimulator-Installer-Linux.bin

This command will give execute permissions to our installer. Now execute the installer:

./BlackBerryPlayBookSimulator-Installer-Linux.bin

Now you get the installer interface:

Click next and read the License Agreement, click in the I accept radio button and then click next, the next screen is very important:

Select in which folder do you want to install the Simulator, well the only thing you will get is the image for the simulator, click next and review the Pre-Installation Summary.

Click install, once the installer finish click the Done button, now go to folder where you just install the Simulator, in this folder find the BlackBerryPlayBookSimulator.iso, now we start our VMware Player.

Now create a new virtual machine click the Create a New Virtual Machine button this will show the new Virtual Machine Wizard, click Next and this will bring the following screen:

Select the Installer from iso and then click Browse and select the BlackBerryPlayBookSimulator.iso image, this will display an alert we fix this later. Now click Next and the following screen appear:

Take care about the Operating System and Version options both must be Other and Other then hit Next.

In this screen you have to specify the name and the location of the virtual machine then click next.

Here specify the disk size and the type of virtual disk, make sure you select the single file virtual disk and click next.

In this screen click the Customize Hardware button.

Here there are some settings you must check in your virtual machine:

At least 1 Gb of Ram is recommended.

In the Display category check the Accelerate 3D graphics.

Then click Save and Finish the installation, during the installation a new screen appeared, just say yes:

Now wait a moment.... and the Blackberry PlayBook simulator will be running in your VMware Player :D.

In my next post i will show you how to install the Blackberry PlayBook SDK and create your first application for this simulator of course in Linux and specifically in Ubuntu. If you have any question about this tutorial let me know.

Java AMF Client: Using AMF with JSP

2010-12-14T14:09:00.000-08:00

In this post i will be posting how to get the efficient AMF connection to work with a Java client specifically JSP, you can use any other java client but for this port i will use JSP.

There are times when you want an efficient protocol to transport data, ok you can use AMF but what about the client... most of people think that since AMF is a protocol created by Adobe you should use a Flash Player client to get this work, the true is that you could use another type of client like Java for example, so let see how can we use this.

BlazeDS has a class called AMFConnection this will help us to get the work done so let get stated:

Requirements:

Eclipse IDE
BlazeDS: You must have some knowledge in setup BlazeDS, if not check my tutorial About Connect BlazeDS with Java (Spanish) or you can check this good tutorial of Technical Evangelist Sujit Reddy - Setting up BlazeDS.
MySQL and Mysql Driver.

So first create a database, call it test_db and a table called person, this table has the following columns:

Now populate the table with some data, if you work with little amount of data you can't see the real power of AMF, but for this example some records will be enough, here there is a small Sql script for doing that.

In the Eclipse IDE, we need to import our BlazeDS war file and add the Mysql driver, i call the project AMF_Client, the project should look like this.

Now we create a package hierarchy for our project:

In the dto package create a Person class and add the following:

Person.java

package dto;

public class Person {

private int id_person;

private String first_name;

private String last_name;

private double salary;

public int getId_person() {

return id_person;

}

public void setId_person(int idPerson) {

id_person = idPerson;

}

public String getFirst_name() {

return first_name;

}

public void setFirst_name(String firstName) {

first_name = firstName;

}

public String getLast_name() {

return last_name;

}

public void setLast_name(String lastName) {

last_name = lastName;

}

public double getSalary() {

return salary;

}

public void setSalary(double salary) {

this.salary = salary;

}

In our dao package create a DBHelper class for the connection, an interface PersonDAO and a class PersonDAOImp for the implementation.

DBHelper.java // There will be a lot of ways to do a database connection but i prefer this.

package dao;

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.SQLException;

import com.mysql.jdbc.Driver;

public class DBHelper {

private static Connection conexion;

private DBHelper(){

}

public static Connection getConnection() throws SQLException{

Class driver = Driver.class;

if(conexion == null){

try{

conexion = DriverManager.getConnection("jdbc:mysql://localhost:3306/test_db","","");

}catch(SQLException ex){

throw new SQLException(ex.getMessage());

}

return conexion;

}

PersonDAO.java

package dao;

import java.sql.SQLException;

import java.util.List;

import dto.Person;

public interface PersonDAO {

public List getPeople() throws SQLException;

}

PersonDAOImp.java

package dao;

import java.sql.Connection;

import java.sql.PreparedStatement;

import java.sql.ResultSet;

import java.sql.SQLException;

import java.util.ArrayList;

import java.util.List;

import dto.Person;

public class PersonDAOImp implements PersonDAO{

private Connection conexion;

@Override

public List getPeople() throws SQLException {

List people = new ArrayList();

try{

conexion = DBHelper.getConnection();

PreparedStatement pstmt = conexion.prepareStatement("SELECT * FROM person");

ResultSet rs = pstmt.executeQuery();

while(rs.next()){

Person person = new Person();

person.setId_person(rs.getInt(1));

person.setFirst_name(rs.getString(2));

person.setLast_name(rs.getString(3));

person.setSalary(rs.getDouble(4));

people.add(person);

}

}catch(SQLException ex){

throw new SQLException(ex.getMessage());

}

return people;

}

Now create another class in the package services call this PersonService and put the following.

PersonService.java

package services;

import java.sql.SQLException;

import java.util.ArrayList;

import java.util.List;

import dao.PersonDAO;

import dao.PersonDAOImp;

import dto.Person;

public class PersonService {

private PersonDAO personDAO = new PersonDAOImp();

public List getPeople() throws SQLException {

List people = new ArrayList();

try{

people = personDAO.getPeople();

}catch(SQLException ex){

throw new SQLException(ex.getMessage());

}

return people;

}

We need to configure BlazeDS so we can use the Java AMF Client in our JSP page, open the remoting-config.xml located in WebContent/WEB-INF/flex add the following:

remoting-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<service id="remoting-service"
   class="flex.messaging.services.RemotingService">
   <adapters>
   <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
   </adapters>
   <default-channels>
   <channel ref="my-amf"/>
   </default-channels>
<destination id="PersonService">
<properties>
<source>services.PersonService</source>
</properties>
</destination>
</service>

Now we are going to create a JSP page for handling the PersonService result.

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="flex.messaging.io.amf.client.AMFConnection"%>

<%@page import="flex.messaging.io.amf.client.exceptions.ClientStatusException"%>

<%@page import="java.util.List"%>

<%@page import="dto.Person"%>

<%@page import="java.util.ArrayList"%>

<%@page import="flex.messaging.io.amf.client.exceptions.ServerStatusException"%><html>

<head>

<title>Java AMF Client</title>

</head>

<body>

AMFConnection amfConexion = new AMFConnection();

String amfUrl = "http://localhost:8080/AMF_Client/messagebroker/amf";

try{

//Make the conexion

amfConexion.connect(amfUrl);

}catch(ClientStatusException ex){

out.write("An error has ocurred");

}

//Make the remote call to out service

List<Person> people = new ArrayList<Person>();

try{

people = ((ArrayList<Person>)amfConexion.call("PersonService.getPeople"));

}catch(ClientStatusException ex){

out.write("An error has ocurred");

}catch(ServerStatusException ex){

out.write("An error has ocurred");

}

<tr>

<td>First Name</td>

<td>Salary</td>

</tr>

for(Person p : people){

<tr>

</tr>

}

</table>

</body>

</html>

Now your run the project and you should have something like this:

That's all you have running a project with Java AMF Client, remember the true power of AMF comes when you deal with large amounts of data, this tutorial only explains the basics with few rows.

Here is the complete source code of the Project, any trouble or suggestion let me know.

Red5 + BlazeDS = Realtime Video Chat Tutorial Part 4: BlazeDS chat.

2010-12-04T19:34:00.001-08:00

This is the last part of the Series Red5 + BlazeDS = Realtime Video Chat. In this part we are going to build a normal chat with BlazeDS so users can chat with al the people connected on the application. To accomplish this we need explore the messaging features in BlazeDS and also see a little about Consumer / Producer in Flex.

First in our server side open the services-config.xml and add the following channel:

services-config.xml

        <channel-definition id="my-streaming-amf" class="mx.messaging.channels.StreamingAMFChannel">
        <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/streamingamf"
                class="flex.messaging.endpoints.StreamingAMFEndpoint"/>
               <properties>
                   <idle-timeout-minutes>0</idle-timeout-minutes>
                   <max-streaming-clients>10</max-streaming-clients>
                   <server-to-client-heartbeat-millis>5000</server-to-client-heartbeat-millis>
               </properties>
        </channel-definition>

In the code above we define a new StreamingAMF channel called my-streaming-channel now we need to specify that we are going to use this channel in our chat, now open the messaging-config.xml and add:

We are creating a destination for out chat and specify that our chat will use a Streaming channel. That’s all in our server side, now let’s make an interface for out chat.

Open Red5_BlazeDS_Flex.mxml and add a TextArea and a TextInput inside a form like this:

<s:states>
        <s:State name="login"/>
        <s:State name="main"/>
    </s:states>
    <fx:Declarations>
        
    </fx:Declarations>
    <s:Group verticalCenter="0" horizontalCenter="0" includeIn="login">
        <s:Form>
            <s:FormItem label="Username">
                <s:HGroup>
                    <s:TextInput id="txtUsername"/>
                    <s:Button id="btnConnect" label="Login" click="btnConnect_clickHandler(event)"/>
                </s:HGroup>
            </s:FormItem>
        </s:Form>
    </s:Group>
    <s:HGroup width="100%" height="100%" includeIn="main">
        <s:VGroup width="30%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10"
                  paddingTop="10">
            <s:Form width="100%">
                <s:FormItem label="Broadcast">
                    <s:HGroup>
                        <s:TextInput id="txtBroadcast"/>
                        <s:Button id="btnBroadcast" label="Broadcast" click="btnBroadcast_clickHandler(event)"/>
                    </s:HGroup>
                </s:FormItem>
            </s:Form>
            <mx:UIComponent id="outVideoWrapper" width="300" height="200"/>
            <s:Form>
                <s:FormItem label="Subscribe">
                    <s:HGroup>
                        <s:TextInput id="txtSubscribe"/>
                        <s:Button id="btnSubscribe" label="Subscribe" click="btnSubscribe_clickHandler(event)"/>
                    </s:HGroup>
                </s:FormItem>
            </s:Form>
            <mx:UIComponent id="inVideoWrapper" width="300" height="200"/>
        </s:VGroup>
        <s:VGroup width="100%" height="80%" paddingBottom="10" paddingLeft="10" paddingTop="10" paddingRight="10">
            <mx:Form width="100%" height="100%">
                <mx:FormItem width="100%" height="100%">
                    <s:TextArea id="txtConversation" width="100%" height="100%" editable="false"/>
                </mx:FormItem>
                <mx:FormItem width="100%">
                    <s:TextInput id="txtChat" width="100%" enter="txtChat_enterHandler(event)"/>
                    <s:Button id="btnSend" label="Send" click="btnSend_clickHandler(event)"/>
                </mx:FormItem>
            </mx:Form>
        </s:VGroup>
    </s:HGroup>
    <s:TextArea id="txtLog" width="100%" height="100" color="red" bottom="0"
                editable="false" includeIn="main"/>

Now we must add the chat logic as follows:

Add a Producer and Consumer in the declarations tags:

   <fx:Declarations>
        <s:Producer id="producer" destination="chat"/>
        <s:Consumer id="consumer" destination="chat" message="consumer_messageHandler(event)" fault="consumer_faultHandler(event)"/>
        <mx:DateFormatter id="hourFormatter" formatString="KK:NN:SS"/>
    </fx:Declarations>

Create the events handlers for txtChat enter event and for btnSend click event:

           protected function btnSend_clickHandler(event:MouseEvent):void
            {
                var message:AsyncMessage = new AsyncMessage();
                message.body = txtChat.text;
                message.headers.user = txtUsername.text;
                producer.send(message);
                txtChat.text = "";
            }

            protected function consumer_messageHandler(event:MessageEvent):void
            {
                var hora:Date = new Date();
                var message:String = event.message.body as String;
                var usuario:String = event.message.headers.user as String;
                txtConversation.text += "[" + hourFormatter.format(hora) + "]" + usuario + " says: " + message + "\n";
            }

            protected function txtChat_enterHandler(event:FlexEvent):void
            {
                var message:AsyncMessage = new AsyncMessage();
                message.headers.user = txtUsername.text;
                message.body = txtChat.text;
                producer.send(message);
                txtChat.text = "";
            }

            protected function consumer_faultHandler(event:MessageFaultEvent):void
            {
                txtLog.text += event.faultString + "\n";
            }

Now test your application and your application should look like this:

Here is the complete Source code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               creationComplete="initApp()" width="100%" height="100%">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.managers.PopUpManager;
            import mx.messaging.events.MessageEvent;
            import mx.messaging.events.MessageFaultEvent;
            import mx.messaging.messages.AsyncMessage;
            import mx.rpc.events.FaultEvent;

            private var connection:NetConnection;
            private var userWindow:UsersWindow;
            private var timer:Timer;
            //Streams
            private var inStream:NetStream;
            private var outStream:NetStream;
            //Devices
            private var camera:Camera;
            private var microphone:Microphone;
            //Video
            private var inVideo:Video;
            private var outVideo:Video;

            private function initApp():void {
                this.systemManager.stage.scaleMode = StageScaleMode.NO_SCALE;

            }
            protected function btnConnect_clickHandler(event:MouseEvent):void
            {
                if(txtUsername.text.length >= 3){
                    producer.connect();
                    consumer.subscribe();
                    userWindow = new UsersWindow();
                    timer = new Timer(2000);
                    timer.start();
                    timer.addEventListener(TimerEvent.TIMER, onTimerEvent);
                    currentState = "main";
                    connection = new NetConnection();
                    connection.connect("rtmp://localhost/Red5_BlazeDS_Java", txtUsername.text);
                    connection.addEventListener(NetStatusEvent.NET_STATUS, onConnectionStatus);
                    connection.client = this;
                }else{
                    txtUsername.errorString = "Enter a valid name";
                }
            }
            protected function onTimerEvent(event:TimerEvent):void {
                connection.call("getConnectedClients", new Responder(onResult, onFault));
            }
            protected function onResult(obj:Object):void {
                userWindow.setUsers(new ArrayCollection(obj as Array));
            }
            protected function onFault(obj:Object):void {
                txtLog.text += "Error " + obj.fault.message + "\n";
             }
            protected function onConnectionStatus(event:NetStatusEvent):void {
                if(event.info.code == "NetConnection.Connect.Success"){
                    txtLog.text += "Connection to RTMP successfully established\n";
                    connection.call("getConnectedClients", new Responder(onResult, onFault));
                    userWindow = UsersWindow(PopUpManager.createPopUp(this, UsersWindow, false));
                    PopUpManager.centerPopUp(userWindow);
                    userWindow.usuarioActual = txtUsername.text;
                }else{
                    txtLog.text += "Connection to RTMP fail\n";
                }
            }

            protected function btnBroadcast_clickHandler(event:MouseEvent):void
            {
                if(txtBroadcast.text.length > 3){
                    txtBroadcast.errorString = "";
                    //setup devices
                    camera = Camera.getCamera();
                    microphone = Microphone.getMicrophone();
                    //setup the streams
                    outStream = new NetStream(connection);
                    outStream.attachAudio(microphone);
                    outStream.attachCamera(camera);
                    outStream.publish(txtBroadcast.text);
                    //setup out video
                    outVideo = new Video(300,200);
                    outVideo.attachCamera(camera);
                    outVideoWrapper.addChild(outVideo)
                }else{
                    txtBroadcast.errorString = "Put a valid broadcast name";
                }
            }

            protected function btnSubscribe_clickHandler(event:MouseEvent):void
            {
                if(txtSubscribe.text.length > 3){
                    inStream = new NetStream(connection);
                    inStream.play(txtSubscribe.text);
                    inVideo = new Video(300,200);
                    inVideo.attachNetStream(inStream);
                    inVideoWrapper.addChild(inVideo);
                }
            }

            protected function consumer_faultHandler(event:MessageFaultEvent):void
            {
                txtLog.text += event.faultString + "\n";
            }

        ]]>
    </fx:Script>
    <s:states>
        <s:State name="login"/>
        <s:State name="main"/>
    </s:states>
    <fx:Declarations>
        <s:Producer id="producer" destination="chat"/>
        <s:Consumer id="consumer" destination="chat" message="consumer_messageHandler(event)" fault="consumer_faultHandler(event)"/>
        <mx:DateFormatter id="hourFormatter" formatString="KK:NN:SS"/>
    </fx:Declarations>
    <s:Group verticalCenter="0" horizontalCenter="0" includeIn="login">
        <s:Form>
            <s:FormItem label="Username">
                <s:HGroup>
                    <s:TextInput id="txtUsername"/>
                    <s:Button id="btnConnect" label="Login" click="btnConnect_clickHandler(event)"/>
                </s:HGroup>
            </s:FormItem>
        </s:Form>
    </s:Group>
    <s:HGroup width="100%" height="100%" includeIn="main">
        <s:VGroup width="30%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10"
                  paddingTop="10">
            <s:Form width="100%">
                <s:FormItem label="Broadcast">
                    <s:HGroup>
                        <s:TextInput id="txtBroadcast"/>
                        <s:Button id="btnBroadcast" label="Broadcast" click="btnBroadcast_clickHandler(event)"/>
                    </s:HGroup>
                </s:FormItem>
            </s:Form>
            <mx:UIComponent id="outVideoWrapper" width="300" height="200"/>
            <s:Form>
                <s:FormItem label="Subscribe">
                    <s:HGroup>
                        <s:TextInput id="txtSubscribe"/>
                        <s:Button id="btnSubscribe" label="Subscribe" click="btnSubscribe_clickHandler(event)"/>
                    </s:HGroup>
                </s:FormItem>
            </s:Form>
            <mx:UIComponent id="inVideoWrapper" width="300" height="200"/>
        </s:VGroup>
        <s:VGroup width="100%" height="80%" paddingBottom="10" paddingLeft="10" paddingTop="10" paddingRight="10">
            <mx:Form width="100%" height="100%">
                <mx:FormItem width="100%" height="100%">
                    <s:TextArea id="txtConversation" width="100%" height="100%" editable="false"/>
                </mx:FormItem>
                <mx:FormItem width="100%" direction="horizontal">
                    <s:TextInput id="txtChat" width="100%" enter="txtChat_enterHandler(event)" />
                    <s:Button id="btnSend" label="Send" click="btnSend_clickHandler(event)"/>
                </mx:FormItem>
            </mx:Form>
        </s:VGroup>
    </s:HGroup>
    <s:TextArea id="txtLog" width="100%" height="100" color="red" bottom="0"
                editable="false" includeIn="main"/>
</s:Application>

Here is the complete project and the other project that I show in the video demo.

So that’s all, this is my first series and I don’t want to be the last. If you found any error or have any suggestion, please let me know. Thanks

Red5 + BlazeDS = Realtime Video Chat Tutorial Part 3: Red5 video streaming

2010-12-04T14:33:00.000-08:00

Hi, today i will show you how to enhance the application that we build in Tutorial part 1 and part 2, let add some video and voice to make things a little bit interesting. This tutorial continues part 1 and part 2 so take this parts first before reading this part.

So let's continue...

First we need to know a little about NetConnection and how to attach video and audio to the RTMP connection that we made in the last part of this tutorial. NetConnection comunicates with the server establishing a full duplex open connection in both the server and the client so it's perfect for use with the RTMP protocol.

Let's make some changes in the UI so we can add our camera, open Red5_BlazeDS_Flex.mxml and change the following (some update are made so we can use Flex 4.5 new components)

Red5_BlazeDS_Flex.mxml

<s:states>
        <s:State name="login"/>
        <s:State name="main"/>
    </s:states>
    <fx:Declarations>
        
    </fx:Declarations>
    <s:Group verticalCenter="0" horizontalCenter="0" includeIn="login">
        <s:Form>
            <s:FormItem label="Username">
                <s:HGroup>
                    <s:TextInput id="txtUsername"/>
                    <s:Button id="btnConnect" label="Login" click="btnConnect_clickHandler(event)"/>
                </s:HGroup>
            </s:FormItem>
        </s:Form>
    </s:Group>
    <s:HGroup width="100%" height="100%" includeIn="main">
        <s:VGroup width="30%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10"
                  paddingTop="10">
            <s:Form width="100%">
                <s:FormItem label="Broadcast" >
                    <s:HGroup>
                        <s:TextInput id="txtBroadcast"/>
                        <s:Button id="btnBroadcast" label="Broadcast" click="btnBroadcast_clickHandler(event)"/>
                    </s:HGroup>
                </s:FormItem>
            </s:Form>
            <mx:UIComponent id="outVideoWrapper" width="300" height="200"/>
            <s:Form>
                <s:FormItem label="Subscribe">
                    <s:HGroup>
                        <s:TextInput id="txtSubscribe"/>
                        <s:Button id="btnSubscribe" label="Subscribe"/>
                    </s:HGroup>
                </s:FormItem>
            </s:Form>
            <mx:UIComponent id="inVideoWrapper" width="300" height="200"/>
        </s:VGroup>
    </s:HGroup>
    <s:TextArea id="txtLog" width="100%" height="100" color="red" bottom="0"
                editable="false" includeIn="main"/>

This code add to our user interface 2 UIComponent this components will be the video wrappers in our application.

Now let’s attach the video, for make this possible we must do some steps:

Make the connection (done in the last step)
Create the streams in/out
Setup the devices
Create the video.

First we declare the variables:

In our Red5_BlazeDS_Flex.mxml in after the <s:Script>:

            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.managers.PopUpManager;
private var connection:NetConnection;
private var userWindow:UsersWindow;
private var timer:Timer;
//Streams
private var inStream:NetStream;
private var outStream:NetStream;
//Devices
private var camera:Camera;
private var microphone:Microphone;
//Video
private var inVideo:Video;
private var outVideo:Video;

Then we need to add click event to our Broadcast button and then write a click handler function has follow:

           protected function btnBroadcast_clickHandler(event:MouseEvent):void {
if(txtBroadcast.text.length > 3){
txtBroadcast.errorString = "";
//setup devices
camera = Camera.getCamera();
microphone = Microphone.getMicrophone();
//setup the streams
outStream = new NetStream(connection);
outStream.attachAudio(microphone);
outStream.attachCamera(camera);
outStream.publish(txtBroadcast.text);
//setup out video
outVideo = new Video(300,200);
outVideo.attachCamera(camera);
outVideoWrapper.addChild(outVideo)
}else{
txtBroadcast.errorString = "Put a valid broadcast name";
}
}

Now add click event to our Subscribe button and then write a click handler function has follow:

           protected function btnSubscribe_clickHandler(event:MouseEvent):void
            {
if(txtSubscribe.text.length > 3){
inStream = new NetStream(connection);
inStream.play(txtSubscribe.text);
inVideo = new Video(300,200);
inVideo.attachNetStream(inStream);
inVideoWrapper.addChild(inVideo);
}
}

Now run your application, write a text to Broadcast and then test this in a different browser client open the same application put in the subscribe textinput the name of your broadcast and voila!! you will have the following:

That's all and of course here is the complete code, If you found any error or have any suggestion, please let me know.

Red5 + BlazeDS = Realtime Video Chat Tutorial Part 2: Tracking all the current users.

2010-11-08T16:19:00.000-08:00

Ok so here is the second part of the tutorial, I made some changes when I stared to create this tutorial I write this in Ubuntu now because I’m writing my flex thesis and using flash builder burrito I’m using Windows 7 . Ok ok back to the tutorial we are going to keep track of all the current users in our application. This tutorial continues the Tutorial Part 1.

So let’s continue:

First in our java side we need to create a class called ClientManager this class will allow us to use SharedObject and use the actual scope of the application for keep track of the current users. The code is commented to read it carefully to understand what each of this classes are doing.

ClientManager.java

package com.jdesconectado;
import org.red5.server.api.IScope;
import org.red5.server.api.ScopeUtils;
import org.red5.server.api.so.ISharedObject;
import org.red5.server.api.so.ISharedObjectService;
public class ClientManager {
    /** Stores the name of the SharedObject to use. */
    private String name;
    /** Should the SharedObject be persistent? */
    private boolean persistent;
    /**
     * Create a new instance of the client manager.
     *
     * @param name
     *             name of the shared object to use
     * @param persistent
     *             should the shared object be persistent
     */
    public ClientManager(String name, boolean persistent) {
        this.name = name;
        this.persistent = persistent;
    }
    /**
     * Return the shared object to use for the given scope.
     *
     * @param scope
     *             the scope to return the shared object for
     * @return the shared object to use
     */
    private ISharedObject getSharedObject(IScope scope) {
        ISharedObjectService service = (ISharedObjectService) ScopeUtils
                .getScopeService(scope,
                        ISharedObjectService.class,
                        false);
        return service.getSharedObject(scope, name, persistent);
    }
    /**
     * A new client connected. This adds the username to
     * the shared object of the passed scope.
     *
     * @param scope
     *             scope the client connected to
     * @param username
     *             name of the user that connected
     * @param uid
     *             the unique id of the user that connected
     */
    public void addClient(IScope scope, String username, String uid) {
        ISharedObject so = getSharedObject(scope);
        so.setAttribute(uid, username);
    }
    /**
     * A client disconnected. This removes the username from
     * the shared object of the passed scope.
     *
     * @param scope
     *             scope the client disconnected from
     * @param uid
     *             unique id of the user that disconnected
     * @return the username of the disconnected user
     */
    public String removeClient(IScope scope, String uid) {
        ISharedObject so = getSharedObject(scope);
        if (!so.hasAttribute(uid)) {
            // SharedObject is empty. This happes when the last client
            // disconnects.
            return null;
        }
        String username = so.getStringAttribute(uid);
        so.removeAttribute(uid);
        return username;
    }
}

And in our Application.java class we made some changes. Basically we need a collection to keep the users and instantiate the ClientManager.

Application.java:

package com.jdesconectado;
import java.util.ArrayList;
import org.red5.server.adapter.ApplicationAdapter;
import org.red5.server.api.IConnection;
import org.red5.server.api.IScope;

public class Application extends ApplicationAdapter{
    private ClientManager clientManager = new ClientManager("userList", false);
    private ArrayList<String> connectedClients = new ArrayList<String>();
    @Override
    public synchronized boolean connect(IConnection conn, IScope scope,
            Object[] params) {
        //Verify is username is in params
        if(params == null || params.length == 0){
            rejectClient("No username was provided");
        }
        if(!super.connect(conn, scope, params)){
            return false;
        }
        String username = params[0].toString();
        String uid = conn.getClient().getId();
        //add the usename to the collection
        connectedClients.add(username);
        clientManager.addClient(scope, username, uid);
        return true;
    }

    @Override
    public synchronized void disconnect(IConnection conn, IScope scope) {
        String uid = conn.getClient().getId();
        String username = clientManager.removeClient(scope, uid);
        connectedClients.remove(username);
        super.disconnect(conn, scope);
    }
    //Get the current connected clients
    public ArrayList<String> getConnectedClients(){
        return connectedClients;
    }
}

This is all we need in our server side. The server side should look like this:

In the client side we need to made some changes to the UI so we can made use of our recently changed server side. First we need a custom component to show the current connected users, we call it UsersWindow.mxml and it will be based on a TitleWindow.

In our custom component UsersWindow we write this code, only a Label and List is all we need.

UsersWindow.mxml

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            public function setUsers(users:ArrayCollection):void {
                this.users = users;
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:ArrayCollection id="users"/>
    </fx:Declarations>
    <s:Label text="There is {users.length} users connected"/>
    <s:List id="lstUsers" dataProvider="{users}"/>
</s:TitleWindow>

Now in our file Red5_BlazeDS_Flex.mxml we change some parts:

Red5_BlazeDS_Flex.mxml

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.managers.PopUpManager;

            private var connection:NetConnection;
            private var userWindow:UsersWindow;

            protected function btnConnect_clickHandler(event:MouseEvent):void
            {
                if(txtUsername.text.length >= 3){
                    userWindow = new UsersWindow();
                    currentState = "main";
                    connection = new NetConnection();
                    connection.connect("rtmp://localhost/Red5_BlazeDS_Java", txtUsername.text);
                    connection.addEventListener(NetStatusEvent.NET_STATUS, onConnectionStatus);
                    connection.client = this;
                }else{
                    txtUsername.errorString = "Enter a valid name";
                }
            }
            protected function onResult(obj:Object):void {
                userWindow.setUsers(new ArrayCollection(obj as Array));
            }
            protected function onFault(obj:Object):void {
                txtLog.text += "Error " + obj.fault.message + "\n";
             }
            protected function onConnectionStatus(event:NetStatusEvent):void {
                if(event.info.code == "NetConnection.Connect.Success"){
                    txtLog.text += "Connection to RTMP successfully established\n";
                    connection.call("getConnectedClients", new Responder(onResult, onFault));
                    userWindow = UsersWindow(PopUpManager.createPopUp(this, UsersWindow, false));
                    userWindow.usuarioActual = txtUsername.text;
                }else{
                    txtLog.text += "Connection to RTMP fail\n";
                }
            }
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="login"/>
        <s:State name="main"/>
    </s:states>
    <fx:Declarations>
        
    </fx:Declarations>
    <s:Group verticalCenter="0" horizontalCenter="0" includeIn="login">
        <s:Form>
            <s:FormItem name="Username" direction="ltr">
                <s:TextInput id="txtUsername"/>
                <s:Button id="btnConnect" label="Login" click="btnConnect_clickHandler(event)"/>
            </s:FormItem>
        </s:Form>
    </s:Group>
    <s:TextArea id="txtLog" width="100%" height="100" color="red" bottom="0"
                editable="false" includeIn="main"/>
</s:Application>

We create two states one login this will handle the username and in the line:

connection.connect("rtmp://localhost/Red5_BlazeDS_Java", txtUsername.text);

we are passing the user name as a param for our server. Then we simply create a instance of out UserWindow class so we can see all the users available in the chat. There is only one thing to add to our program we need a timer. This timer will allow us to update the connected users in all the clients.

Red5_BlazeDS_Flex.mxml

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.managers.PopUpManager;

            private var connection:NetConnection;
            private var userWindow:UsersWindow;
            private var timer:Timer;

            protected function btnConnect_clickHandler(event:MouseEvent):void
            {
                if(txtUsername.text.length >= 3){
                    userWindow = new UsersWindow();
                    timer = new Timer(2000);
                    timer.start();
                    timer.addEventListener(TimerEvent.TIMER, onTimerEvent);
                    currentState = "main";
                    connection = new NetConnection();
                    connection.connect("rtmp://localhost/Red5_BlazeDS_Java", txtUsername.text);
                    connection.addEventListener(NetStatusEvent.NET_STATUS, onConnectionStatus);
                    connection.client = this;
                }else{
                    txtUsername.errorString = "Enter a valid name";
                }
            }
            protected function onTimerEvent(event:TimerEvent):void {
                connection.call("getConnectedClients", new Responder(onResult, onFault));
            }
            protected function onResult(obj:Object):void {
                userWindow.setUsers(new ArrayCollection(obj as Array));
            }
            protected function onFault(obj:Object):void {
                txtLog.text += "Error " + obj.fault.message + "\n";
             }
            protected function onConnectionStatus(event:NetStatusEvent):void {
                if(event.info.code == "NetConnection.Connect.Success"){
                    txtLog.text += "Connection to RTMP successfully established\n";
                    connection.call("getConnectedClients", new Responder(onResult, onFault));
                    userWindow = UsersWindow(PopUpManager.createPopUp(this, UsersWindow, false));
                    userWindow.usuarioActual = txtUsername.text;
                }else{
                    txtLog.text += "Connection to RTMP fail\n";
                }
            }
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="login"/>
        <s:State name="main"/>
    </s:states>
    <fx:Declarations>
        
    </fx:Declarations>
    <s:Group verticalCenter="0" horizontalCenter="0" includeIn="login">
        <s:Form>
            <s:FormItem name="Username" direction="ltr">
                <s:TextInput id="txtUsername"/>
                <s:Button id="btnConnect" label="Login" click="btnConnect_clickHandler(event)"/>
            </s:FormItem>
        </s:Form>
    </s:Group>
    <s:TextArea id="txtLog" width="100%" height="100" color="red" bottom="0"
                editable="false" includeIn="main"/>
</s:Application>

The timer is set to 2 seconds, every 2 seconds the application will ask the server who is connected and get it.

Finally run the application in two different browsers and the result must match this:

That’s all and of course here is the complete code, If you found any error or have any suggestion, please let me know.

Why teachers drink (español)

2010-11-07T21:45:00.000-08:00

El día de hoy me llego un tweet de Tom krcha @tomkrcha, con un post muy divertido el título lo dice todo Why Teachers drink esta en inglés y me pareció buena idea compartir la versión en español así que a disfrutar.

Red5 + BlazeDS = Realtime Video Chat Tutorial Part 1: Setting up the environment and making the connection.

2010-10-09T20:21:00.001-07:00

Hi, in this tutorial i will build a complete real time video chat using BlazeDS and Red 5, so i will split this tutorial in 4 parts each of this are:

Setting up the environment and making the connection.
Tracking all the current users.
Red5 video streaming.
BlazeDS chat.

So let's start.

Requirements:

BlazeDS
Flash Builder 4, in this tutorial i use the eclipse plug-in version.
Red5 server.
Red5 eclipse plug-in.
Previous Java and Flex knowledge.

If you want to know more about BlazeDS and Red5 please read the manuals :D

Setting up the environment and making the connection:To get started you need to download and install red5 and the red5 plug-in, for make things easy i found two well explained tutorials:

Install red5 server http://code.google.com/p/red5/ (Here are the installers for your specific platform it's very easy just download and install)

Install red5 plug-in http://red5.org/wiki/Red5Plugin

Once you have red5 and red5 plug-in installed, download BlazeDS.
Note: If you are not very familiar with BlazeDS read my post Connect BlazeDS with Java (spanish)

In FlashBuilder 4, we need to setup Red5 Server for doing this go to Window -> Preferences go to Server and finally to Server Runtime Environments, click Add and if your installation of Red5 plug-in is ok, your screen should be like this:

Select Red 5 Server Runtime and hit Next >

In Runtime Directory select the place where you installed red5 server, click Finish.

Now go to File Import... then under Web select WAR file, click next.

In WAR file -> Select your blazeds.war library
Web project -> Put he name of your Project.
Target Runtime -> Don't forget to select Red5 Server Runtime.
Click finish, this finish the Java side.

Now let's setup the Flex Side.
Create a new Flex Project, with this settings:

The click Next, now we are going to configure J2EE Server:

Be careful when put the values, in Root folder you must specify the WebContent folder of the Java project you just made in the last step. In Root Url the port must be 5080 (default port of red5), and specify the context name of the Java project in this case Red5_BlazeDS_Java, in the context root put the same context root of the Java application Red5_BlazeDS_Java, click validate and then click finish.

The result will be this:

Now we must setup the configuration files for Red5, in the Java project under the WEB-INF folder create a new File called red5-web.properties put in this file.

webapp.contextPath=/Red5_BlazeDS_Java
webapp.virtualHosts=localhost, 127.0.0.1

Create another file now call this red5-web.xml put in this file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd">
<beans>

    <bean id="placeholderConfig" class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">
        <property name="location" value="/WEB-INF/red5-web.properties" />
    </bean>

    <bean id="web.context" class="org.red5.server.Context"
        autowire="byType" />

    <bean id="web.scope" class="org.red5.server.WebScope"
         init-method="register">
        <property name="server" ref="red5.server" />
        <property name="parent" ref="global.scope" />
        <property name="context" ref="web.context" />
        <property name="handler" ref="web.handler" />
        <property name="contextPath" value="${webapp.contextPath}" />
        <property name="virtualHosts" value="${webapp.virtualHosts}" />
    </bean>

    
    <bean id="web.handler"
        class="com.jdesconectado.Application"
        singleton="true" />
</beans>
In the last part of the document we specify were is the endpoint for the application.

Now we must add some content in out web.xml, note that we have the default web.xml for BlazeDS
the only thing we have to do is add some red5 specific lines of code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
    <display-name>BlazeDS</display-name>
    <description>BlazeDS Application</description>

    <context-param>
        <param-name>webAppRootKey</param-name>
        <param-value>/Red5_BlazeDS_Java</param-value>
    </context-param>
    
    <listener>
        <listener-class>flex.messaging.HttpFlexSession</listener-class>
    </listener>

    
    <servlet>
        <servlet-name>MessageBrokerServlet</servlet-name>
        <display-name>MessageBrokerServlet</display-name>
        <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
        <init-param>
            <param-name>services.configuration.file</param-name>
            <param-value>/WEB-INF/flex/services-config.xml</param-value>
       </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet>

        <servlet-name>gateway</servlet-name>
        <servlet-class>
            org.red5.server.net.servlet.AMFGatewayServlet
        </servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>gateway</servlet-name>
        <url-pattern>/gateway</url-pattern>
    </servlet-mapping>

    <servlet-mapping>
        <servlet-name>MessageBrokerServlet</servlet-name>
        <url-pattern>/messagebroker/*</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.htm</welcome-file>
    </welcome-file-list>

    <security-constraint>
        <web-resource-collection>
            <web-resource-name>Forbidden</web-resource-name>
            <url-pattern>/streams/*</url-pattern>
        </web-resource-collection>
        <auth-constraint/>
    </security-constraint>
</web-app>
That's all the configuration you need. Now let's code a little.

First create a package in out Java src folder: in my case it will be com.jdesconectado, next create a class called Application.

Now in this file put the following:

package com.jdesconectado;

import org.red5.server.adapter.ApplicationAdapter;
import org.red5.server.api.IConnection;
import org.red5.server.api.IScope;

public class Application extends ApplicationAdapter{
    @Override
    public synchronized boolean connect(IConnection conn, IScope scope,
            Object[] params) {
        // TODO Auto-generated method stub
        return super.connect(conn, scope, params);
    }
    @Override
    public synchronized void disconnect(IConnection conn, IScope scope) {
        // TODO Auto-generated method stub
        super.disconnect(conn, scope);
    }
}

That's all for the server side now let's make the client part.

In the flex project add to the Red5_BlazeDS_Flex.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private var connection:NetConnection;

            protected function btnConnect_clickHandler(event:MouseEvent):void
            {
                connection = new NetConnection();
                connection.connect("rtmp://localhost/Red5_BlazeDS_Java");
                connection.addEventListener(NetStatusEvent.NET_STATUS, onConnectionStatus);
                connection.client = this;
            }
            protected function onConnectionStatus(event:NetStatusEvent):void {
                if(event.info.code == "NetConnection.Connect.Success"){
                    Alert.show("Connection is successfully established");
                }else{
                    Alert.show("Connection fail");
                }
            }
        ]]>
    </fx:Script>
    <s:Button id="btnConnect" label="Connect" click="btnConnect_clickHandler(event)"/>
</s:Application>

Now run the application and hit the button, your application must display the following:

Congratulations you have configure and run your first Red5 + BlazeDS application. In the next part i will show you how to track the current users in your application.

Here are the complete files for the tutorial, if you are going to use this files, setup it correctly first.
Complete source code.

If you found any error or have any suggestion, please let me know.

Red5 + BlazeDS = Realtime video chat application

2010-10-07T22:44:00.001-07:00

Hi, 4 days ago i saw a very interesting application made by Adobe Platform Evangeist Michaël Chaize, he uses LCCS and in 10 minutes (wow!!!) he have great and complete application, so i just wondering if i could build part of the functionality of this application using open source products.

So, for made this possible i used Red5 and BlazeDS. I used Red5 RTMP protocol for video streaming and BlazeDS Streaming Channel for the chat, i know that i could use Red5 for the chat too but i feel more comfortable with BlazeDS messaging features, it not takes 5 minutes and of course take a lot more code but it's ok.

I think that use LCCS is the way to go, because it allow you to use Adobe RTMFP and other cool stuff, if you want to know more about LCCS you can go here.

Here is the demo, the next post i will try to made a tutorial.

PS: Sorry english is not my native language, i try to do my best.

PackagerUbuntu v0.2 released

2010-09-24T07:48:00.000-07:00

Hi i just finish PackagerUbuntu v0.2, there are some features and minor bug changes. Some of this are:

Now verify if the user password match the user certificate.
Some changes in the UI.
You can store the adt path for later use.
Some minor bugs were changed.
Use localization for language problems, spanish and english are available.

The application was tested in Ubuntu 10.10 64 bits, please any bug or idea of how to improve this tool, let me know.

You may download the application here.

Real Time Data Collaboration between Flex - AIR and Android with BlazeDS

2010-09-17T00:44:00.000-07:00

Hi to all, today i want to show you a litle demo that i build, this demo shows the collaborations features available with BlazeDS, but i use diferents clients applications: Flex Web , AIR desktop and Android phone.
For this demo i use

BlazeDS
Tomcat
Adobe AIR 2.0 for the Desktop client.
Adobe AIR 2.5 for the Android client.
Android Emulator.
PackagerUbuntu for package my Air applications for native Desktop and Android Emulator

Here is the demo

Package your Air 2 Applications for Android in Ubuntu

2010-09-16T01:12:00.000-07:00

I talked about PackagerUbuntu here, and today i want to show you the other feature of PackageUbuntu, this feature allow us to generate an Android apk file from an Air 2.5 application.

So watch the demo:

If you use this application let me know and if you have ideas of how to improve it, i really want to know.

Here is the file:
PackagerUbuntu

Update:
Just finish PackagerUbuntu v0.2 you can see the post here.

Package your Air 2 Applications for Ubuntu

2010-09-15T23:44:00.000-07:00

Update: UbuntuPackager v0.2 is out take a look here
When we develop AIR applications, we see that is very easy to deploy the same application in windows, mac and linux, the only thing we have to do is run the air application. But when air 2 was introduced there were some new features these includes the ability to launch or interact to native process.

You can build native installers with the comand line is not hard but some time you can mess up your installer with wrong arguments and other things. Inspired in Serge Jespers Package Assistant Pro, i develop a litle air 2 application that generates a native .deb installer for debian based systems and an .apk for android phones with air 2.5 installed.

So watch the demo:

Some considerations:

This software is still in alpha, but for the most of the cases works.
It actually work with pkcs12 certificates.
It works with android too, but i use the -debug flag to it can work in emulators and devices (Sorry but in Peru there is no phone with android 2.2)

Here is the file

Packager Ubuntu

Tell me if this works for you.

Sorry for my english is not my native language.

JInput, usa tus controles de juego en Java. Parte I Detectar los controles

2010-07-30T12:42:00.001-07:00

Cuantas veces cuando creamos un juego o alguna aplicación en Java en la cual interactúe el usuario, nos vemos en la necesidad de agregar soporte para un control, para dejar de lado el aburrido teclado :).

El problema es que nos encontramos con que hay opciones especificas a una plataforma, normalmente a Windows usando DirectX. Como usuario de Linux busque una opción que se adecuara a mis necesidades, así encontré JInput para definirlo usare la misma información que se encuentra en la pagina:

"The JInput Project hosts an implementation of an API for game controller discovery and polled input. It is part of a suite of open-source technologies initiated by the Game Technology Group at Sun Microsystems with intention of making the development of high performance games in Java a reality.

The API itself is pure Java and presents a platform-neutral completely portable model of controller discovery and polling. It can handle arbitrary controllers and returns both human and machine understandable descriptions of the inputs available."

Bueno lo interesante aqui es que es neutral a la plataforma a la que se use para esto usa plugins especificos al Sistema Operativos, sin mas que hablar vamos a ver como funciona:

Requerimientos:

Se necesita un conocimiento básico de Java.

Una vez descargado JInput tendremos una serie de archivos así como se ve en la figura:

De todos estos archivos solo nos interesa jinput.jar y las librerias nativas de acuerdo al SO y a la arquitectura del computador que se este usando, en mi caso uso Ubuntu 10.4 de 64 bits asi que usare libjinput-linux64.so si tienes una distribucion de linux de 32 bits usaras libjinput-linux.so

Vamos a crear un nuevo proyecto en eclipse nos vemos a File >> New >> Java Project, colocamos el nombre de JInputTest a nuetro proyecto, clic en siguiente, ahora vamos a agregar la libreria jinput.jar y libjinput-linux64.so, para esto hacemos clic en la pestaña Libraries, clic en add jar y seleccionamos jinput.jar, luego expandimos la libreria JRE System Library dentro de el encontramos un item que dice Native Library Location, hacemos double clic y colocamos la ruta la carpeta donde se encuentra la libreria libjinput-linux64.so.

Una vez preparado el proyecto vamos a proceder a crear la clase de prueba, la llamaremos JInputTest.java

JInputTest.java

import net.java.games.input.Controller;
import net.java.games.input.ControllerEnvironment;

public class JInputTest {
    public static void main(String[] args){
        //Obtenermos los controles que detecta nuestra computadora
        Controller[] controllers = ControllerEnvironment.getDefaultEnvironment().getControllers();
        for(Controller c : controllers){
            System.out.println("Encontrado el control " + c.getName() + " que es un " + c.getType());
        }
    }
}

El método getControllers() se encargara de detectar todos los controles que tengamos conectados a nuestra PC, con getName() obtenemos el nombre comercial del control y getType() nos dirá que tipo de control es.

La salida del programa dependerá del control que tengan:

Encontrado el control DragonRise Inc. Generic USB Joystick que es un Stick

Ahora que sabemos cual es nuestro control vamos a ver que componentes tenemos, para esto agregamos:

JInputTest.java

import net.java.games.input.Component;
import net.java.games.input.Controller;
import net.java.games.input.ControllerEnvironment;

public class JInputTest {
    public static void main(String[] args){
        //Obtenermos los controles que detecta nuestra computadora
        Controller[] controles = ControllerEnvironment.getDefaultEnvironment().getControllers();
        for(Controller c : controles){
            System.out.println("Encontrado el control " + c.getName() + " que es un " + c.getType());
        }
        //Obtenemos nuestro control
        Controller controlActual = controles[0];
        //Obtenemos los componentes del control
        Component[] componentes = controlActual.getComponents();
        int i = 0;
        for(Component c : componentes){
            System.out.println("Componente " + i + " :" +c.getName());
            i++;
        }
    }
}

Ejecutamos y tendremos los componentes de nuestro control.

Componente 0 :Trigger
Componente 1 :Thumb
Componente 2 :Thumb 2
Componente 3 :Top
Componente 4 :Top 2
Componente 5 :Pinkie
Componente 6 :Base
Componente 7 :Base 2
Componente 8 :Base 3
Componente 9 :Base 4
Componente 10 :Base 5
Componente 11 :Base 6
Componente 12 :x
Componente 13 :y
Componente 14 :z
Componente 15 :rx
Componente 16 :rz
Componente 17 :pov

Por el momento eso es todo, en la segunda parte de este tutorial veremos como interactuar con nuestro control.

Data Centric Features en FlashBuilder 4

2010-07-22T10:47:00.001-07:00

Hola hoy les mostrare un video que realice hace ya algún tiempo para un concurso en RIAgora, en este muestro una de las características de FlashBuilder 4: Data Centric Features.

Espero sea de su agrado.
DCF Flash Builder 4

Conectar BlazeDS con Java

2010-07-19T20:19:00.001-07:00

Hola hoy día les voy a presentar un pequeño tutorial sobre como conectar BlazeDS con Java.

Para las personas que usan Adobe flex como front-end y Java como back-end surge la necesidad comunicar estas tecnologías, existen varias opciones entre estas esta usar servicios HTTP, servicios Web u objetos remotos. Todas estas son buenas opciones y cada una de ellas tiene sus pros, sus contras y una forma especial de implementación.

BlazeDS surgio como una alternativa muy potente para comunicar Java y Adobe Flex desde que Adobe decidió liberarlo en el 2007 junto con la especificación de AMF, siendo este una de las mas grandes noticias para los desarrolladores de Flex y Java. Bueno sin mas preámbulos vamos a desarrollar el tutorial.

REQUERIMIENTOS:

BlazeDS
Java JDK 5+
FlashBuilder 4 de preferencia usar la versión plugin, pueden usar el trial de 60 dias.

No se necesita grandes conocimientos en Java o Flex solo conocimientos básicos, manos a la obra.

Primero vamos a configurar la parte de Java:
En Java importamos el war que se encuentra dentro de distribucion BlazeDS:

Luego especificamos la ruta en la cual se encuentra el war de BlazeDS y hacemos clic en Terminar:

Una vez que tenemos la configuración de Java creamos un paquete llamado prueba y dentro de el una clase PruebaBlaze.java y escribimos el siguiente método.

PruebaBlaze.java

package prueba;

public class PruebaBlaze {
    public String saludar(String texto){
        return "Hola " + texto + " desde Java";
    }
}

Luego tenemos que decirle a BlazeDS que exponga nuestro método para que pueda ser consumido por Flex, para eso vamos al archivo remoting-config.xml
dentro de la carpeta WebContent/WEB-INF/flex, la estructura de nuestro proyecto quedaría así:

remoting-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<service id="remoting-service"
    class="flex.messaging.services.RemotingService">

    <adapters>
        <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
    </adapters>

    <default-channels>
        <channel ref="my-amf"/>
    </default-channels>

    <destination id="miServicio">
       <properties>
           <source>prueba.PruebaBlaze</source>
       </properties>
    </destination>

</service>

El destino viene a ser el nombre con el cual se expondrá nuestra clase, la cual se encuentra dentro de la etiqueta source. Luego agregamos nuestro proyecto BlazeDS_Java a nuestro servidor de aplicaciones.

Con este paso finalizamos la parte de Java, ahora vamos por el cliente Flex.

Configuración de la parte Flex:
Al usar FlashBuilder 4 la configuración usando ya sea el sdk flex 3 o sdk flex 4 debe de ser la misma. Creamos un nuevo proyecto de Flex con el nombre de BlazeDS_Flex, seleccionamos el tipo de aplicación Web y Servidor J2EE y BlazeDS como se ve en la imagen:

Presionamos siguiente y configuramos las siguientes opciones:

En el root folder especificamos la ruta del WebContent de nuestro proyecto BlazeDS_Java.
En root URL agregamos la dirección de nuestro servidor de aplicaciones y agregamos el context root del proyecto BlazeDS_Java.
En context root el context root del proyecto BlazeDS_Java.

Finalizamos y agregamos el siguiente codigo:

BlazeDS_Flex.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;

            protected function ServicioRO_faultHandler(event:FaultEvent):void
            {
                txtError.text = event.fault.message;
            }

            protected function ServicioCR_resultHandler(event:ResultEvent):void
            {
                Alert.show(event.result as String);
            }

            protected function btnInvocar_clickHandler(event:MouseEvent):void
            {
                ServicioCR.token = ServicioRO.saludar(txtNombre.text);
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <mx:RemoteObject id="ServicioRO" destination="miServicio" fault="ServicioRO_faultHandler(event)"/>
        <mx:CallResponder id="ServicioCR" result="ServicioCR_resultHandler(event)" fault="ServicioRO_faultHandler(event)"/>
    </fx:Declarations>
    <s:layout>
        <s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"/>
    </s:layout>
    <mx:Form>
        <mx:FormItem label="Nombre">
            <s:TextInput id="txtNombre"/>
        </mx:FormItem>
        <mx:FormItem>
            <s:Button id="btnInvocar" label="Invocar Metodo Java" click="btnInvocar_clickHandler(event)"/>
        </mx:FormItem>
        <mx:FormItem label="Error">
            <s:TextInput id="txtError" width="100%" color="red"/>
        </mx:FormItem>
    </mx:Form>
</s:Application>

Algunas cosas que remarcar:
RemoteObject: Es la clase que nos permite usar objetos remotos dentro de esta tenemos el destino el cual debemos de apuntar a nuestro servicio expuesto en el archivo remoting-config.xml recuerdan?

CallResponder: Nos permite manejar los resultados de llamadas asíncronas hechas de servicio basados en RPC.

Luego ejecutamos nuestra clase en flex y si no sucede ningún problema o error saldria lo siguiente en nuestro navegador

Colocamos nuestro nombre y hacemos clic en el botón y voila:

Eso es todo amigos, espero sus sugerencias.

!Bienvenido!

2010-07-18T12:05:00.000-07:00

Hola soy Victor y les doy la bienvenida a mi blog, aquí pretenderé crear un espacio de discusión para los diferentes temas que tengan relación con las tecnologías RIA, programación, base de datos, opensource, etc.

Espero que lo que veas aquí sea les sea de ayuda y de su agrado.