Home >
Hacking Ribbit
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.
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.
<?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>
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;
}
}
}
service.messageManager.createMessage();
service.messageManager.addEventListener(MessageEvent.CREATED, messageCreated);
service.messageManager.addEventListener(MessageEvent.STATE_CHANGE, messageStateChanged);
service.messageManager.addEventListener(MessageEvent.STATUS_ERROR, messageStatusChanged);
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);
}
<?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>
...
<mx:Button id="recordButton" />
<mx:Button id="sendMessageButton" />
...
...
recordButton.label = "Start Recording";
sendMessageButton.label = "Send Message";
...
...
recordButton.addEventListener(MouseEvent.CLICK, startRecordMessage);
recordButton.enabled = false;
...
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;
}
}
<?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>
sendMessageButton.addEventListener(MouseEvent.CLICK, sendMessage);
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);
}
<?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>




Facebook Application Development
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