Home  >  

Hacking Ribbit

Author photo
AddThis Social Bookmark Button

Ribbit has been around for a while and beside Lee Brimelow's great introduction tutorial on gotoandlearn.com, I did some experimenting in order to achieve results needed for my application. Because I live in Bosnia and Herzegowina, it was a bit difficult to work on the calling feature. My ambitions were not to call ordinary phones using Ribbit. The feature that excited me even more was the VoiceMail feature. Finally there was a technology that was able to record and manage voice mails directly from the web site. A great feature with millions of possible implementation scenarios. Unfortunately this tutorial will be able to show only one.



img1.jpg

So, in this tutorial we will use Ribbit and Flex to create a small web client that will be able to create, record and send voicemails to the owner of the website. Let's call it a small blog phone. The whole tutorial will consist of 3 parts:

  • Setting up Ribbit (account, components download etc.)
  • Creating the interface in Flex
  • Testing and having fun online

Before we start, here is a sample image of what we are going to create.


img2.jpg
Two buttons on the interface, nothing more! Yes, it looks a bit scarce, but it really has all the functions we need.
There is an old qoute that says „Perfections is not achieved when there is nothing more to add, but when there is nothing more to remove“. The same applies for this small app that we are going to create. With the idea of a small voicemail client of the web, we immediately have lots of other ideas of how this could be implemented immediately on the web. We could add background graphics, labels, different fonts etc. Well, forget about it now, let's complete this small app that we see on the image above. After that everybody has the freedom to implement any features.
Setting up Ribbit (account, components download etc.)
First thing we need to do is to go to the Ribbit home page (http://www.ribbit.com/).
Ok, then we need to click on the tab that says „Ribbit for Developers“.

img3.jpg

We will immediately land in the Ribbit developer center.


img4.jpg

In order to start developing using Ribbit services, we need to sign up as Ribbit developer.


img5.jpg

After the sign up process, we should sign in and start an application:


img6.jpg

Here is how I filled it out:


img7.jpg

We should select the private domain and as the project app name, please select a different name because every app name needs to be unique. Add the primary contact details and press submit. We should receive the following data about the newly created app:


img8.jpg

We got the application id, the consumer key, the secret key and the domain. Not all of those parameters will be required for our application to run. Well, before we move on, it should be mentioned that by default Ribbit gives you 5 free voice mail boxes that you can use. For every other a fee needs to be paid. This means you can bound 5 email adresses to 5 voice mail boxes.
Go to the Flash center and download the Flash SDK.


img10.jpg

Ok, when dowloaded, when we extract the zip file we get the fancy SWC file:


img11.jpg

All the magic is containted inside the small SWC file, how cool! This swc file can be imported into any editor, Flex Buidler, Flash CS4 and Flash Develop. There is no separate SWC file for each IDE and this makes the life for us developers much easier, yeah! Copy the SWC to your project folder and get ready for development since we are diving into the coding adventures.
This way, we prepared all the necessary elements on the main Ribbit website. We can leave the website but save the parameters above somewhere in a text document to have it ready because we will need it later in the code.
Creating the interface
Since we have all the params, let's move on to the development of the interface. We can work either in Flex, FlashDevelop or the standalone MXMLC compiler. In my case I will use Flex and create a new project:

img12.jpg
Now, the next thing we need to do, is to make the necessary imports of libraries. I will just import the Ribbit library to the project tree.

img13.jpg
As we can see the bottom, the ribbit library is imported. If you are using the Flash IDE on your side, you can import the swc into the library and drag it on the stage as this will make the ribbit api available the the flash document. Now we will simply run the basic SWF to make sure everything is ok, you should see the typical Flex blank screen.
If we don't get any errors then this means that we can move on to coding. Now that we have all the parameters setup on the Ribbit website, we need to make sure that we connect to the Ribbit site from our SWC. I think this is the most important part in coding, once we master it, we can connect to Ribbit and not only create VoiceMail applications, but any other apps capable to use the Ribbit services such as phone calling etc.
Here is the code complete code to connect:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	
	<mx:Script>
		<![CDATA[
			
			
		
		import flash.events.Event;
		import flash.events.MouseEvent;
		import flash.media.SoundTransform;
		import flash.net.NetStream;
		import mx.collections.ArrayCollection;
		import mx.events.StateChangeEvent;
		import mx.events.IndexChangedEvent;
		import com.ribbit.api.events.AuthenticationEvent;
		import com.ribbit.api.objects.MessageState;
		import com.ribbit.api.objects.CallType;
		import com.ribbit.api.objects.ContactField;
		import com.ribbit.api.interfaces.ICallLogMessage;
		import com.ribbit.api.interfaces.IMessageManager;
		import com.ribbit.api.kernal.v25.model.CallLogList;
		import com.ribbit.api.events.MessageEvent;
		import com.ribbit.api.events.CallLogEvent;
		import com.ribbit.api.*;
		import com.ribbit.api.interfaces.*;
		// import fl.controls.*;
		

		private var service:RibbitServices = new RibbitServices();
		
		private var currentMessage:ICallLog;
		
		
		
		public function Main():void {
 			
 			if (stage) init();
 				else 
 			addEventListener(Event.ADDED_TO_STAGE, init);
 			
 		}
		
		private function init():void {
 			
 			// removeEventListener(Event.ADDED_TO_STAGE, init);
 			
 			// entry point
 			
 			
 			// this.addChild(recordButton);
 			// this.addChild(sendMessageButton);
 			
 			recordButton.label = "Start Recording";
 			sendMessageButton.label = "Send Message";
 			createMessageButton.label = "Create Message";
 			playMessageButton.label = "Play Message";
 			
 			// recordButton.x = recordButton.y = 10;
 			// sendMessageButton.y = 10;
 			// sendMessageButton.x = recordButton.x + recordButton.width + 10;
 			
 			//sendMessageButton.x = recordButton.width;
 			
 			//recordButton.addEventListener(MouseEvent.CLICK, startRecordMessage);
 			recordButton.enabled = false;
 			
 			//sendMessageButton.addEventListener(MouseEvent.CLICK, sendMessage);
 			sendMessageButton.enabled = false;
 			
 			//createMessageButton.addEventListener(MouseEvent.CLICK, messageCreate);
 			createMessageButton.enabled = false;
 			
 			//playMessageButton.addEventListener(MouseEvent.CLICK, messagePlay);
 			playMessageButton.enabled = false;
 			
 			service.authenticationManager.loginParam.username = "mirzahat@gmail.com";
 			service.authenticationManager.loginParam.password = "***";
 			service.authenticationManager.loginParam.appID = "mirzahat_TestInsideRIA";
 			service.authenticationManager.loginParam.domain = "mirzahat@gmail.com";
 			service.authenticationManager.addEventListener(AuthenticationEvent.LOGGED_IN, loggedIn);
 			//service.authenticationManager.addEventListener(AuthenticationEvent.ERROR, loginError);
 			service.authenticationManager.login(true, true);
 			
 			
 		}	
		
		private function loggedIn(e:AuthenticationEvent):void {
 			
 			switch(e.type) {
  				
  				case AuthenticationEvent.LOGGED_IN: {
   					
   					createMessageButton.enabled = true;
   					
   					// service.messageManager.createMessage();
   					// service.messageManager.addEventListener(MessageEvent.CREATED, messageCreated);
   					// service.messageManager.addEventListener(MessageEvent.STATE_CHANGE, messageStateChanged);
   					// service.messageManager.addEventListener(MessageEvent.STATUS_ERROR, messageStatusError);
   					
   					
   					break;
   					
   				}
  				
  				case AuthenticationEvent.LOGGED_OUT:{
   					break;
   				}
  				
  			}
 			
 		}
		
		/*
		private function loginError(e:AuthenticationEvent):void {
			trace("Error: " + e.fault);
		}
		
		
		public function messageCreate(e:MouseEvent):void {
			service.messageManager.createMessage();
			service.messageManager.addEventListener(MessageEvent.CREATED, messageCreated);
			service.messageManager.addEventListener(MessageEvent.STATE_CHANGE, messageStateChanged);
			service.messageManager.addEventListener(MessageEvent.STATUS_ERROR, messageStatusError);
		}
		
		
		public function messageCreated(event:MessageEvent):void {
			
			currentMessage = event.getValue("message") as ICallLog;
			recordButton.enabled = true;
			createMessageButton.enabled = false;
			
			trace("Message is created...");
			
		}
		
		
		public function startRecordMessage(e:MouseEvent):void {
			
			if (currentMessage != null) {
				
				service.messageManager.startRecordMessage(currentMessage);
				recordButton.label = "Stop recording...";
				recordButton.removeEventListener(MouseEvent.CLICK, startRecordMessage);
				recordButton.addEventListener(MouseEvent.CLICK, stopRecordMessage);
				
			}
			
		}

		public function stopRecordMessage(e:MouseEvent):void {
			
			trace("currentMessage: " + currentMessage);
			
			if (currentMessage != null) {
				
				service.messageManager.stopRecordMessage(currentMessage);
				recordButton.label = "Start recording...";
				recordButton.enabled = false;
				recordButton.removeEventListener(MouseEvent.CLICK, stopRecordMessage);
				recordButton.addEventListener(MouseEvent.CLICK, startRecordMessage);
				createMessageButton.enabled = true;
				
			}
			
		}
		
		
		
		public function messageStateChanged(e:MessageEvent):void {
			
			trace("Current message state:" + e.newState);
			
			if (e.newState.toString() == "Ready") {
				playMessageButton.enabled = true;
				// service.messageManager.startPlayMessage(currentMessage);
				sendMessageButton.enabled = true;
				
							
			}
			
		}
		
		public function messagePlay(e:MouseEvent):void {
			service.messageManager.startPlayMessage(currentMessage);
		}
		
		
		public function sendMessage(e:MouseEvent):void {
			var callLogMessage:ICallLogMessage = currentMessage.message;
			callLogMessage.setNotes("Some note");
			callLogMessage.setTitle("Some title");
			service.messageManager.sendMessage(currentMessage, "mirzahat@gmail.com", false, false);
		}
		
		public function messageStatusError(e:MessageEvent):void {
			
			trace("Message error: " + e.fault);
			
		}
		*/

			
			
		]]>
	</mx:Script>
	
	<mx:HBox>
		<mx:Button id="createMessageButton" />
		<mx:Button id="recordButton" />
		<mx:Button id="playMessageButton" />
		<mx:Button id="sendMessageButton" />
	</mx:HBox>
	
	
	
	
</mx:Application>
So, how does it look like? Can we connect? Here is the result from my client:

img2.jpg
Finally, when the button for message creating is enabled, we finally got a connection to Ribbit :-) Cool!
Once we connect to ribbit from the client SWF, we can continue the other part of the story. We need to make sure the voice message is created, recorded and tested before the application saves it to the voice mail box. This is there the MessageManager comes to play. This is a handly class that, as you can assume from the name of the class, handles all the important stuff related to recoreded messages such as recording, playing back, sending messages to emails etc.
The message manager needs to be instaniated right after the login procedure has succeeded.


private function loggedIn(e:AuthenticationEvent):void {
 			
 			switch(e.type) {
  				
  				case AuthenticationEvent.LOGGED_IN: {
   					
   					createMessageButton.enabled = true;
   					
   					service.messageManager.createMessage();
   					service.messageManager.addEventListener(MessageEvent.CREATED, messageCreated);
   					service.messageManager.addEventListener(MessageEvent.STATE_CHANGE, messageStateChanged);
   					service.messageManager.addEventListener(MessageEvent.STATUS_ERROR, messageStatusError);
   					
   					
   					break;
   					
   				}
  				
  				case AuthenticationEvent.LOGGED_OUT:{
   					break;
   				}
  				
  			}
 			
 		}
As you can see, we start using the message manager just after the login to Ribbit.


service.messageManager.createMessage();
service.messageManager.addEventListener(MessageEvent.CREATED, messageCreated);
service.messageManager.addEventListener(MessageEvent.STATE_CHANGE, messageStateChanged);
service.messageManager.addEventListener(MessageEvent.STATUS_ERROR, messageStatusChanged);
The message manager can be found as the property of the main Ribbit service class that was instantiated at the beginning of the code. In the first line, we call the createMessage() method, the we register the listeners for the upcoming events. When the message is created and ready to be recorded, the CREATED event is fired, the other two events are similar. Now what we need to do is to create function that will handle all those events:


public function messageCreated(event:MessageEvent):void {
 			
 trace("Message is created...");
 			
}
		
public function messageStateChanged(e:MessageEvent):void {
 			
 trace("Current message state:" + e.newState);
 
}
		
public function messageStatusError(e:MessageEvent):void {
 			
 trace("Message error: " + e.fault);
 			
}
In the hole package the code looks like this:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	
	<mx:Script>
		<![CDATA[
			
			
		
		import flash.events.Event;
		import flash.events.MouseEvent;
		import flash.media.SoundTransform;
		import flash.net.NetStream;
		import mx.collections.ArrayCollection;
		import mx.events.StateChangeEvent;
		import mx.events.IndexChangedEvent;
		import com.ribbit.api.events.AuthenticationEvent;
		import com.ribbit.api.objects.MessageState;
		import com.ribbit.api.objects.CallType;
		import com.ribbit.api.objects.ContactField;
		import com.ribbit.api.interfaces.ICallLogMessage;
		import com.ribbit.api.interfaces.IMessageManager;
		import com.ribbit.api.kernal.v25.model.CallLogList;
		import com.ribbit.api.events.MessageEvent;
		import com.ribbit.api.events.CallLogEvent;
		import com.ribbit.api.*;
		import com.ribbit.api.interfaces.*;
		// import fl.controls.*;
		

		private var service:RibbitServices = new RibbitServices();
		
		private var currentMessage:ICallLog;
		
		
		
		public function Main():void {
 			
 			if (stage) init();
 				else 
 			addEventListener(Event.ADDED_TO_STAGE, init);
 			
 		}
		
		private function init():void {
 			
 			// removeEventListener(Event.ADDED_TO_STAGE, init);
 			
 			// entry point
 			
 			
 			// this.addChild(recordButton);
 			// this.addChild(sendMessageButton);
 			
 			recordButton.label = "Start Recording";
 			sendMessageButton.label = "Send Message";
 			createMessageButton.label = "Create Message";
 			playMessageButton.label = "Play Message";
 			
 			// recordButton.x = recordButton.y = 10;
 			// sendMessageButton.y = 10;
 			// sendMessageButton.x = recordButton.x + recordButton.width + 10;
 			
 			//sendMessageButton.x = recordButton.width;
 			
 			//recordButton.addEventListener(MouseEvent.CLICK, startRecordMessage);
 			recordButton.enabled = false;
 			
 			//sendMessageButton.addEventListener(MouseEvent.CLICK, sendMessage);
 			sendMessageButton.enabled = false;
 			
 			//createMessageButton.addEventListener(MouseEvent.CLICK, messageCreate);
 			createMessageButton.enabled = false;
 			
 			//playMessageButton.addEventListener(MouseEvent.CLICK, messagePlay);
 			playMessageButton.enabled = false;
 			
 			service.authenticationManager.loginParam.username = "***";
 			service.authenticationManager.loginParam.password = "***";
 			service.authenticationManager.loginParam.appID = "***";
 			service.authenticationManager.loginParam.domain = "***";
 			service.authenticationManager.addEventListener(AuthenticationEvent.LOGGED_IN, loggedIn);
 			//service.authenticationManager.addEventListener(AuthenticationEvent.ERROR, loginError);
 			service.authenticationManager.login(true, true);
 			
 			
 		}	
		
		private function loggedIn(e:AuthenticationEvent):void {
 			
 			switch(e.type) {
  				
  				case AuthenticationEvent.LOGGED_IN: {
   					
   					createMessageButton.enabled = true;
   					
   					
   					
   					break;
   					
   				}
  				
  				case AuthenticationEvent.LOGGED_OUT:{
   					break;
   				}
  				
  			}
 			
 		}
		
		
		
		public function messageCreated(event:MessageEvent):void {
 			
 trace("Message is created...");
 			
}
		
public function messageStateChanged(e:MessageEvent):void {
 			
 trace("Current message state:" + e.newState);
 
}
		
public function messageStatusError(e:MessageEvent):void {
 			
 trace("Message error: " + e.fault);
 			
}

		
		]]>
	</mx:Script>
	
	<mx:HBox>
		<mx:Button id="createMessageButton" />
		<mx:Button id="recordButton" />
		<mx:Button id="playMessageButton" />
		<mx:Button id="sendMessageButton" />
	</mx:HBox>
	
	
	
	
</mx:Application>
When we run the SWF we will not see any changes but we made already 50% of the tutorial.
Recording and playback
Now we need to record the actual message. For this to happen we need buttons that will trigger those events. Like you can see on the image above, there will be just two buttons, to simplify the whole scenario. One button that will handle the Start Recording / Stop Recording events and the other one that will take care of sending messages to out email address. I hope you have a microphone and any kind of speakers ready to record the voicemail, if not, please stop reading here and make sure they work. Here is how it looks like:

img00.jpg
So, once the message is created, the record button is enabled, we click on it, start recording the message. Then we stop recording and after the message is ready and the send button is enabled, this means that the user is ready to send the message. This is the basic idea of the application, to put the SWF somewhere on the web, on a blog etc. Somebody will be able to put send voice mails directly through the web site to your email, and this is the basic thought of it.
So we declare the the two buttons on stage:

...
<mx:Button id="recordButton" />
<mx:Button id="sendMessageButton" />
...
We add it the labels:


...
			
recordButton.label = "Start Recording";
sendMessageButton.label = "Send Message";
		
...
Disable and register it on stage:

...
recordButton.addEventListener(MouseEvent.CLICK, startRecordMessage);
recordButton.enabled = false;
...
And here are the finally the two methods that make the actual recording of messages:

public function startRecordMessage(e:MouseEvent):void {
 			
 			if (currentMessage != null) {
  				
  				service.messageManager.startRecordMessage(currentMessage);
  				recordButton.label = "Stop recording...";
  				recordButton.removeEventListener(MouseEvent.CLICK, startRecordMessage);
  				recordButton.addEventListener(MouseEvent.CLICK, stopRecordMessage);
  				
  			}
 			
 		}

		public function stopRecordMessage(e:MouseEvent):void {
 			
 			trace("currentMessage: " + currentMessage);
 			
 			if (currentMessage != null) {
  				
  				service.messageManager.stopRecordMessage(currentMessage);
  				recordButton.label = "Start recording...";
  				recordButton.enabled = false;
  				recordButton.removeEventListener(MouseEvent.CLICK, stopRecordMessage);
  				recordButton.addEventListener(MouseEvent.CLICK, startRecordMessage);
  				createMessageButton.enabled = true;
  				
  			}
 			
 		}
Let's test the code.

img00.jpg
By clicking on the Start Recoring button, the following prompt should pop up:

img17.jpg
Because Ribbit makes use of our mic, the Flash Player kindly asks us if we really want to allow the SF to access our hardware. Click on allow.
By clicking on „Allow“, we confirm and we can talk. Adter we have finished our cool voice message, we can click on „Stop recording“ and wait a few moments until our message is prepared and ready for sending. Before we can send it, the swf should play back the recorded message and we should hear your voice.
Again here is the code so far :
 
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	
	<mx:Script>
		<![CDATA[
			
			
		
		import flash.events.Event;
		import flash.events.MouseEvent;
		import flash.media.SoundTransform;
		import flash.net.NetStream;
		import mx.collections.ArrayCollection;
		import mx.events.StateChangeEvent;
		import mx.events.IndexChangedEvent;
		import com.ribbit.api.events.AuthenticationEvent;
		import com.ribbit.api.objects.MessageState;
		import com.ribbit.api.objects.CallType;
		import com.ribbit.api.objects.ContactField;
		import com.ribbit.api.interfaces.ICallLogMessage;
		import com.ribbit.api.interfaces.IMessageManager;
		import com.ribbit.api.kernal.v25.model.CallLogList;
		import com.ribbit.api.events.MessageEvent;
		import com.ribbit.api.events.CallLogEvent;
		import com.ribbit.api.*;
		import com.ribbit.api.interfaces.*;
		// import fl.controls.*;
		

		private var service:RibbitServices = new RibbitServices();
		
		private var currentMessage:ICallLog;
		
		
		
		public function Main():void {
 			
 			if (stage) init();
 				else 
 			addEventListener(Event.ADDED_TO_STAGE, init);
 			
 		}
		
		private function init():void {
 			
 			// removeEventListener(Event.ADDED_TO_STAGE, init);
 			
 			// entry point
 			
 			
 			// this.addChild(recordButton);
 			// this.addChild(sendMessageButton);
 			
 			recordButton.label = "Start Recording";
 			sendMessageButton.label = "Send Message";
 			createMessageButton.label = "Create Message";
 			playMessageButton.label = "Play Message";
 			
 			// recordButton.x = recordButton.y = 10;
 			// sendMessageButton.y = 10;
 			// sendMessageButton.x = recordButton.x + recordButton.width + 10;
 			
 			//sendMessageButton.x = recordButton.width;
 			
 			recordButton.addEventListener(MouseEvent.CLICK, startRecordMessage);
 			recordButton.enabled = false;
 			
 			//sendMessageButton.addEventListener(MouseEvent.CLICK, sendMessage);
 			sendMessageButton.enabled = false;
 			
 			createMessageButton.addEventListener(MouseEvent.CLICK, messageCreate);
 			createMessageButton.enabled = false;
 			
 			playMessageButton.addEventListener(MouseEvent.CLICK, messagePlay);
 			playMessageButton.enabled = false;
 			
 			service.authenticationManager.loginParam.username = "mirzahat@gmail.com";
 			service.authenticationManager.loginParam.password = "***";
 			service.authenticationManager.loginParam.appID = "mirzahat_TestInsideRIA";
 			service.authenticationManager.loginParam.domain = "mirzahat@gmail.com";
 			service.authenticationManager.addEventListener(AuthenticationEvent.LOGGED_IN, loggedIn);
 			//service.authenticationManager.addEventListener(AuthenticationEvent.ERROR, loginError);
 			service.authenticationManager.login(true, true);
 			
 			
 		}	
		
		private function loggedIn(e:AuthenticationEvent):void {
 			
 			switch(e.type) {
  				
  				case AuthenticationEvent.LOGGED_IN: {
   					
   					createMessageButton.enabled = true;
   					
   					
   					break;
   					
   				}
  				
  				case AuthenticationEvent.LOGGED_OUT:{
   					break;
   				}
  				
  			}
 			
 		}
		
		
		private function loginError(e:AuthenticationEvent):void {
 			trace("Error: " + e.fault);
 		}
		
		public function messageCreated(event:MessageEvent):void {
 			
 			currentMessage = event.getValue("message") as ICallLog;
 			recordButton.enabled = true;
 			createMessageButton.enabled = false;
 			
 			trace("Message is created...");
 			
 		}
		
		public function startRecordMessage(e:MouseEvent):void {
 			
 			if (currentMessage != null) {
  				
  				service.messageManager.startRecordMessage(currentMessage);
  				recordButton.label = "Stop recording...";
  				recordButton.removeEventListener(MouseEvent.CLICK, startRecordMessage);
  				recordButton.addEventListener(MouseEvent.CLICK, stopRecordMessage);
  				
  			}
 			
 		}

		public function stopRecordMessage(e:MouseEvent):void {
 			
 			trace("currentMessage: " + currentMessage);
 			
 			if (currentMessage != null) {
  				
  				service.messageManager.stopRecordMessage(currentMessage);
  				recordButton.label = "Start recording...";
  				recordButton.enabled = false;
  				recordButton.removeEventListener(MouseEvent.CLICK, stopRecordMessage);
  				recordButton.addEventListener(MouseEvent.CLICK, startRecordMessage);
  				createMessageButton.enabled = true;
  				
  			}
 			
 		}
		
		public function messageCreate(e:MouseEvent):void{
 		
 			service.messageManager.createMessage();
 			service.messageManager.addEventListener(MessageEvent.CREATED, messageCreated);
 			service.messageManager.addEventListener(MessageEvent.STATE_CHANGE, messageStateChanged);
 			service.messageManager.addEventListener(MessageEvent.STATUS_ERROR, messageStatusError);
 
 		
 		}
		
		
		
		public function messageStateChanged(e:MessageEvent):void {
 			
 			trace("Current message state:" + e.newState);
 			
 			if (e.newState.toString() == "Ready") {
  				playMessageButton.enabled = true;
  				// service.messageManager.startPlayMessage(currentMessage);
  				sendMessageButton.enabled = true;
  				
  							
  			}
 			
 		}
		
		public function messagePlay(e:MouseEvent):void {
 			service.messageManager.startPlayMessage(currentMessage);
 		}
		
		
		public function sendMessage(e:MouseEvent):void {
 			var callLogMessage:ICallLogMessage = currentMessage.message;
 			callLogMessage.setNotes("Some note");
 			callLogMessage.setTitle("Some title");
 			service.messageManager.sendMessage(currentMessage, "mirzahat@gmail.com", false, false);
 		}
		
		public function messageStatusError(e:MessageEvent):void {
 			
 			trace("Message error: " + e.fault);
 			
 		}
		

			
			
		]]>
	</mx:Script>
	
	<mx:HBox>
		<mx:Button id="createMessageButton"/>
		<mx:Button id="recordButton" />
		<mx:Button id="playMessageButton" />
		<mx:Button id="sendMessageButton" />
	</mx:HBox>
	
</mx:Application>
Sending of messages
Finally, we can add the functionality to enable sending of messages.Here is the listener registration:


sendMessageButton.addEventListener(MouseEvent.CLICK, sendMessage);
And here is the actual function that is called on click:


public function sendMessage(e:MouseEvent):void {
 			var callLogMessage:ICallLogMessage = currentMessage.message;
 			callLogMessage.setNotes("Some note");
 			callLogMessage.setTitle("Some title");
 			service.messageManager.sendMessage(currentMessage, "youremail@server.com", false, false);
 		}	
This means that when we click on the button, the message is sent to the specified email adress!
Here is the complete code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	
	<mx:Script>
		<![CDATA[
			
			
		
		import flash.events.Event;
		import flash.events.MouseEvent;
		import flash.media.SoundTransform;
		import flash.net.NetStream;
		import mx.collections.ArrayCollection;
		import mx.events.StateChangeEvent;
		import mx.events.IndexChangedEvent;
		import com.ribbit.api.events.AuthenticationEvent;
		import com.ribbit.api.objects.MessageState;
		import com.ribbit.api.objects.CallType;
		import com.ribbit.api.objects.ContactField;
		import com.ribbit.api.interfaces.ICallLogMessage;
		import com.ribbit.api.interfaces.IMessageManager;
		import com.ribbit.api.kernal.v25.model.CallLogList;
		import com.ribbit.api.events.MessageEvent;
		import com.ribbit.api.events.CallLogEvent;
		import com.ribbit.api.*;
		import com.ribbit.api.interfaces.*;
		// import fl.controls.*;
		

		private var service:RibbitServices = new RibbitServices();
		
		private var currentMessage:ICallLog;
		
		
		
		public function Main():void {
 			
 			if (stage) init();
 				else 
 			addEventListener(Event.ADDED_TO_STAGE, init);
 			
 		}
		
		private function init():void {
 			
 			// removeEventListener(Event.ADDED_TO_STAGE, init);
 			
 			// entry point
 			
 			
 			// this.addChild(recordButton);
 			// this.addChild(sendMessageButton);
 			
 			recordButton.label = "Start Recording";
 			sendMessageButton.label = "Send Message";
 			createMessageButton.label = "Create Message";
 			playMessageButton.label = "Play Message";
 			
 			// recordButton.x = recordButton.y = 10;
 			// sendMessageButton.y = 10;
 			// sendMessageButton.x = recordButton.x + recordButton.width + 10;
 			
 			//sendMessageButton.x = recordButton.width;
 			
 			recordButton.addEventListener(MouseEvent.CLICK, startRecordMessage);
 			recordButton.enabled = false;
 			
 			sendMessageButton.addEventListener(MouseEvent.CLICK, sendMessage);
 			sendMessageButton.enabled = false;
 			
 			createMessageButton.addEventListener(MouseEvent.CLICK, messageCreate);
 			createMessageButton.enabled = false;
 			
 			playMessageButton.addEventListener(MouseEvent.CLICK, messagePlay);
 			playMessageButton.enabled = false;
 			
 			service.authenticationManager.loginParam.username = "***";
 			service.authenticationManager.loginParam.password = "***";
 			service.authenticationManager.loginParam.appID = "***";
 			service.authenticationManager.loginParam.domain = "***";
 			service.authenticationManager.addEventListener(AuthenticationEvent.LOGGED_IN, loggedIn);
 			service.authenticationManager.addEventListener(AuthenticationEvent.ERROR, loginError);
 			service.authenticationManager.login(true, true);
 			
 			
 		}	
		
		private function loggedIn(e:AuthenticationEvent):void {
 			
 			switch(e.type) {
  				
  				case AuthenticationEvent.LOGGED_IN: {
   					
   					createMessageButton.enabled = true;
   					
   					
   					break;
   					
   				}
  				
  				case AuthenticationEvent.LOGGED_OUT:{
   					break;
   				}
  				
  			}
 			
 		}
		
		
		private function loginError(e:AuthenticationEvent):void {
 			trace("Error: " + e.fault);
 		}
		
		public function messageCreated(event:MessageEvent):void {
 			
 			currentMessage = event.getValue("message") as ICallLog;
 			recordButton.enabled = true;
 			createMessageButton.enabled = false;
 			
 			trace("Message is created...");
 			
 		}
		
		public function startRecordMessage(e:MouseEvent):void {
 			
 			if (currentMessage != null) {
  				
  				service.messageManager.startRecordMessage(currentMessage);
  				recordButton.label = "Stop recording...";
  				recordButton.removeEventListener(MouseEvent.CLICK, startRecordMessage);
  				recordButton.addEventListener(MouseEvent.CLICK, stopRecordMessage);
  				
  			}
 			
 		}

		public function stopRecordMessage(e:MouseEvent):void {
 			
 			trace("currentMessage: " + currentMessage);
 			
 			if (currentMessage != null) {
  				
  				service.messageManager.stopRecordMessage(currentMessage);
  				recordButton.label = "Start recording...";
  				recordButton.enabled = false;
  				recordButton.removeEventListener(MouseEvent.CLICK, stopRecordMessage);
  				recordButton.addEventListener(MouseEvent.CLICK, startRecordMessage);
  				createMessageButton.enabled = true;
  				
  			}
 			
 		}
		
		public function messageCreate(e:MouseEvent):void{
 		
 			service.messageManager.createMessage();
 			service.messageManager.addEventListener(MessageEvent.CREATED, messageCreated);
 			service.messageManager.addEventListener(MessageEvent.STATE_CHANGE, messageStateChanged);
 			service.messageManager.addEventListener(MessageEvent.STATUS_ERROR, messageStatusError);
 
 		
 		}
		
		
		
		public function messageStateChanged(e:MessageEvent):void {
 			
 			trace("Current message state:" + e.newState);
 			
 			if (e.newState.toString() == "Ready") {
  				playMessageButton.enabled = true;
  				// service.messageManager.startPlayMessage(currentMessage);
  				sendMessageButton.enabled = true;
  				
  							
  			}
 			
 		}
		
		public function messagePlay(e:MouseEvent):void {
 			service.messageManager.startPlayMessage(currentMessage);
 		}
		
		
		public function sendMessage(e:MouseEvent):void {
 			var callLogMessage:ICallLogMessage = currentMessage.message;
 			callLogMessage.setNotes("Some note");
 			callLogMessage.setTitle("Some title");
 			service.messageManager.sendMessage(currentMessage, "your@email.com", false, false);
 		}
		
		public function messageStatusError(e:MessageEvent):void {
 			
 			trace("Message error: " + e.fault);
 			
 		}
		

			
			
		]]>
	</mx:Script>
	
	<mx:HBox>
		<mx:Button id="createMessageButton"/>
		<mx:Button id="recordButton" />
		<mx:Button id="playMessageButton" />
		<mx:Button id="sendMessageButton" />
	</mx:HBox>
	
	
	
	
</mx:Application>

Read more from Mirza Hatipovic. Mirza Hatipovic's Atom feed mirzahat on Twitter

Comments

1 Comments

kushagra said:

Hi,

When i try to login to RIbbit site using login() I get an error : sandbox security violation.

What should I do ?

I m using Flex builder 3 and have tried both 2.6 and 2.7 ribbit SDK versions.

thanx

Leave a comment


Type the characters you see in the picture above.


Tag Cloud

Technical Speakers

Who is the best technical speaker you have seen?

Answer

Latest Features

Recommended for You

@InsideRIA on Twitter

Archives

  • Or, visit our complete archive.  

About This Site

Welcome to the premiere community site for all things RIA sponsored by O'Reilly Media and Adobe Systems Incorporated.