We are staying in the same building, just moving down one floor and gaining a ton of square footage that should hopefully last us a long while. Well, it will as long as we quit pouring water on the marketing people...

The new space required a bunch of build outs, so our office move is set in stages. Engineering and Support teams moved first, about two weeks ago, and the rest of us will be joining them this coming week. Hopefully, all construction will be done the week after, or the contractor may not be able to find his hammer(s) one morning...

-----

Traveling Geeks Converge on BT
A group of Silicon Valley geeks headed to London this past week to participate in Innovation UK, and stopped in at BT to see what our parent company has been up to.

Ted Griggs, Crick Waters and Don Thorson from Ribbit joined BT's JP Rangaswami to host a dinner and several events with the geeks where they shared BT's mobile and broadband initiatives as well as the Ribbit story and what it means to the world of telephony.

Waiting for Ted, Crick and Don's return to get the full debrief, but it sounds like everyone had a good time and they gave the geeks some good bits to chew on.

-----

Flex Examples: Adding Contacts and List/Search Contacts
Chuck continues his Tips and Tricks series and kicked out two great Flex examples this week, focusing on the Ribbit address book:

• Adding contact to your Ribbit Address Book
• Listing and Searching Ribbit Contacts with mxDataGrid

No related posts.

Welcome to our 4th Tips & Tricks post. With each post, we'll take an example of a common use of Ribbit and explore how we can make the code more efficient, stylish, and a better experience for the user.

Situation: Now that we've added contacts, let's get those contacts loaded up in a DataGrid for you and your users to view. We'll also add a search field so you can rifle through those contacts as if they were sitting in a rolodex on your desk!

Requirements: You'll need a Ribbit username/password and a version of Flexbuilder.

The Code:

(1) Start with the full Authentication code sample, and add the following block just below where you import classes:

 
import com.ribbit.api.interfaces.IContactManager;
import com.ribbit.api.interfaces.IContactList;
import com.ribbit.api.events.ContactEventKind;
import com.ribbit.api.objects.ContactField;
import com.ribbit.api.events.ContactEvent;
import com.ribbit.api.interfaces.IContact;
import mx.collections.ArrayCollection;
 
import mx.events.ListEvent;
 

(2) Now add the following code just after where you declare variables:

 
[Bindable]
private var loggedIn:Boolean;
private var contactMgr:IContactManager;
[Bindable]
private var contactList:ArrayCollection;
[Bindable]
private var filterContactList:ArrayCollection;
[Bindable]
private var selectedContactFieldList:ArrayCollection;
private var contact:IContact;
 

(3) Next, replace the init() function, with this revised code which instantiates the contact manager:

 
private function init():void
{
	request = new RibbitServices();
	authMgr = request.authenticationManager;
	authMgr.addEventListener(AuthenticationEvent.LOGGED_IN, onLoggedIn);
	authMgr.addEventListener(AuthenticationEvent.LOGGED_OUT, onLoggedOut);	
 
	contactMgr = request.contactManager;
	contactMgr.addEventListener(ContactEvent.LIST_CHANGE, handleListChange);
 
	contactList = new ArrayCollection();
	filterContactList = new ArrayCollection();
}
 

(4) Next, add these functions at the bottom of your mx:Script block, after the onLoggedOut eventhandler:

 
//Populates list with loaded contacts
public function handleListChange(event:ContactEvent):void
{
	switch(event.kind)
	{
		//contact list updated
		case ContactEventKind.LOADED:
		case ContactEventKind.REFRESH:
		case ContactEventKind.UPDATE:
		{
			contactList = new ArrayCollection(contactMgr.contacts.toArray());
			//... clear filter collection
			filterContactList = new ArrayCollection();
			break;
		}
	}
}		
 
//Returns phone number string inside contact list
protected function getPhoneNumber(item:Object, column:DataGridColumn):String
{
	var contact:IContact = item as IContact;
	var phoneNumber:ContactField = contact.getField(ContactField.FIELD_OTHERPHONE);
	return phoneNumber.toString();
}
 
//Allows searching of contacts
protected function search(keyword:String):void
{
	if (keyword == "" || keyword == null)
	{
		contactGrid.dataProvider = contactList;
		return;
	}
 
	var results:IContactList = contactMgr.search(keyword);
 
	if (results != null)
	{
    	filterContactList = new ArrayCollection(results.toArray());
    	contactGrid.dataProvider = 	filterContactList;
    }
}
 

(5) Finally, add this block of MXML layout code just above the closing tag.

 
<mx:Panel id="contactPanel" width="500" y="150" title="Add Contact">
	<mx:Form id="searchForm">
		<mx:FormItem direction="horizontal">
			<mx:Label text="Filter: " id="filterLabel"/>
			<mx:TextInput id="typeForwardSearch" text="" width="{contactGrid.width - filterLabel.width - 75}"/>
			<mx:Button id="btn_search" label="Search" click="search(typeForwardSearch.text)" width="75"/>
		</mx:FormItem>
		<mx:FormItem label="">
		<mx:DataGrid id="contactGrid" dataProvider="{contactList}" width="325" height="245">
			<mx:columns>
				<mx:DataGridColumn dataField="id" headerText="ID" width="50" resizable="true"/>
				<mx:DataGridColumn dataField="firstName" headerText="First Name" resizable="true"/>
				<mx:DataGridColumn dataField="lastName" headerText="Last Name"  resizable="true"/>
				<mx:DataGridColumn headerText="Phone Number" labelFunction="getPhoneNumber" resizable="true"/>
			</mx:columns>
		</mx:DataGrid>
		</mx:FormItem>
		<mx:FormItem label="" horizontalAlign="center" width="100%">
			<mx:Button id="refreshContactList" click="contactMgr.loadContactList();" label="Refresh Contact List" />
		</mx:FormItem>
	</mx:Form>
</mx:Panel>
 

Summary: Listing and searching contacts kind of a fun exercise. It opens a lot of possibilities for your application, like displaying contact/user photos and associating each contact with other fields of data in your app.

A few things to note in step (4). We're using the same handleListChange eventhandler as in the Add Contact example. This time, the method will refresh our list arrays, which will also refresh the DataGrid displaying the contacts. Also, to reach into the contact object and get the contact's phone number, we're using getPhoneNumber as a labelfunction. Note how we cast the DataGrid row object as an IContact and then fish out the FIELD_OTHERPHONE property.

Next Post: Now that we're listing contacts, we have a few things left. Updating and deleting contacts are easy tasks and we'll explore those next!

No related posts.

Welcome to our 3rd Tips & Tricks post. With each post, we'll take an example of a common use of Ribbit and explore how we can make the code more efficient, stylish, and a better experience for the user.

Situation: Address book management is a cool and often unsung feature of the Ribbit Flex SDK SWC. This feature allows your users to maintain a collection of contacts/friends/buddies inside any Flash Platform or AIR application. It pairs nicely with Ribbit since you can keep phone numbers, associated with contact name, photo and address, on Ribbit's remote service.

Requirements: You'll need a Ribbit username/password and a version of Flexbuilder.

The Code:

(1) Start with the full Authentication code sample, and add the following block just below where you import classes:

 
import com.ribbit.api.interfaces.IContactManager;
import com.ribbit.api.events.ContactEventKind;
import com.ribbit.api.objects.ContactField;
import com.ribbit.api.events.ContactEvent;
import com.ribbit.api.interfaces.IContact;
 
import mx.controls.Alert;
 

(2) Now add the following code just after where you declare variables:

 
[Bindable]
private var loggedIn:Boolean;
private var contactMgr:IContactManager;
private var newContact:IContact;
 

(3) Next, replace the init() function, with this revised code which instantiates the contact manager:

 
private function init():void
{
	request = new RibbitServices();
	authMgr = request.authenticationManager;
	authMgr.addEventListener(AuthenticationEvent.LOGGED_IN, onLoggedIn);
	authMgr.addEventListener(AuthenticationEvent.LOGGED_OUT, onLoggedOut);	
 
	contactMgr = request.contactManager;
	contactMgr.addEventListener(ContactEvent.LIST_CHANGE, handleListChange);
}
 

(4) Next, add these functions at the bottom of your mx:Script block:

 
public function contactAdd():void
{
	newContact = contactMgr.getContactObject();
	newContact.firstName = firstName.text;
	newContact.lastName = lastName.text;
	newContact.emailAddress = email.text;
        newContact.jobTitle = jobTitle.text;
	newContact.companyName = companyName.text;
        newContact.setField(ContactField.FIELD_PERSONALMOBILEPHONE, phoneNumber.text);
	contactMgr.addContact(newContact);
}
 
public function handleListChange(event:ContactEvent):void
{
	switch(event.kind)
	{
		//contact added to list
		case ContactEventKind.ADD:
		{
			Alert.show("Your new contact was added!", "Contact Added", Alert.OK);
			break;
		}
	}
}
 

(5) Finally, add this block of MXML layout code just above the closing tag.

 
<mx:Panel id="contactPanel" width="500" y="150" title="Add Contact">
	<mx:Form id="contactForm" borderThickness="3" width="100%">
		<mx:FormItem label="First Name: ">
			<mx:TextInput id="firstName" />
		</mx:FormItem>
		<mx:FormItem label="Last Name: ">
			<mx:TextInput id="lastName" />
		</mx:FormItem>
		<mx:FormItem label="Email: ">
			<mx:TextInput id="email" />
		</mx:FormItem>
		<mx:FormItem label="Phone: ">
			 <mx:TextInput id="phoneNumber" />
		</mx:FormItem>
		<mx:FormItem label="Job Title: ">
			<mx:TextInput id="jobTitle" />
		</mx:FormItem>
		<mx:FormItem label="Company : ">
			<mx:TextInput id="companyName" />
		</mx:FormItem>
		<mx:FormItem label="" direction="horizontal" horizontalAlign="center" width="100%">
			<mx:Button id="btn_addContact" label="Add" click="contactAdd()" enabled="{loggedIn}" width="75"/>
		</mx:FormItem>
	</mx:Form>
</mx:Panel>
 

Summary: As you can see, we can add contacts through our app very easily. There are many additional fields available to store relative contact information. A few things to note in step (4). To add a contact, we're creating a new IContact object and populating it with values from our form. Then, to confirm the contact has been added, we handle the ContactEvent.LIST_CHANGE event with handleListChange. Once we get this confirmation, we display an mx.controls.Alert with a confirmation message.

Next Post: Now that we've added a contact, I'll explore the code to list, update and search your address book as well.

No related posts.

• SimplePhone
  SimplePhone is a desktop-based Adobe Air phone application integrated with Ribbit that allows callers to place voice calls using a computer microphone, SimplePhone integrates with Broadsoft’s globally-recognized VOIP platform for carriers, and will be offered as an add-on service to SimpleSignal customers nationwide this summer.
• Rocketvox
  Rocketvox used the Ribbit API to create a universal inbox that collects all your voicemail, email, text, fax, and instant messages in a single place will help people more efficiently manage their digital lives.

To dig a little deeper into their stories, please visit the Ribbit website (just scroll down to the Developer Applications section) and read away.

Have you been working on something you would like to share with the Ribbit community? We would love to hear it. Shoot an email to kristie [at] ribbit [dot] com, give us the 411 and we'll get it out there.

-----

The Flash Microphone Wants to Record. It Does, Really.
Chuck Freedman and Brendan Lee launched the Get Microphone website with a goal to "get Microphone" data access in Flash and draw attention to the creative things you can do with voice.

During FITC Toronto 2009, Chuck shared two great examples in using  the Flash Microphone - the first is using Merapi, to capture Microphone, store it in a local file, and play it back. He also showcased Red5 where you can stream Microphone data to a remote server, record the stream and play it back. Awesomesauce.

-----

Tips and Tricks
Chuck unleashes his latest Flash example as he tinkers away on Ribbit Auth using simple Actionscript 3.  TextInput and Button controls in da hizzy.

-----

Happy 50th, Happy 4th.
Hard to believe...but this issue of the Ribbit News Splash is #50. Wow. We hope you have found some good bits over the past issues, and looking forward to expanding it a lot more as we go towards #100. We plan to include a lot more code, and more stories of people doing cool things. Shoot, we might even throw in a contest or two! The world is our oyster baby!

We also release this issue as we head into the 4th of July holiday here in the United States, and would like to wish you all a wonderful weekend surrounded by friends and family, good eats and fireworks to!

No related posts.

Welcome to our 2nd Tips & Tricks post. With each post, we'll take an example of a common use of Ribbit and explore how we can make the code more efficient, stylish, and a better experience for the user.

Situation: Similar to the last post, we'll take a look at the simple task of logging into the Ribbit service. This time, we'll use Flash Professional via the Ribbit Flash Toolkit. This example will achieve login, once again, using one button that will conditionally toggle between login/logout functionality based on your loggedIn status. This time, instead of leveraging the Flex framework and being dependent on MXML and components, we'll use more Actionscript 3 and a few Flash UI Controls.

Requirements: You'll need a Ribbit username/password and a CS3 or greater version of Flash Professional.

The Code:

 
package
{
	//import Ribbit API classes from Library (SWC) and Flash
	import com.ribbit.api.RibbitServices;
	import com.ribbit.api.interfaces.IAuthenticationManager;
	import com.ribbit.api.events.AuthenticationEvent;
	import flash.events.MouseEvent;
	import fl.controls.Label;
	import fl.controls.Button;
	import fl.controls.TextInput;
	import flash.display.Sprite;
 
	public class RibbitAuth extends Sprite
	{
		//declare vars
		private var request:RibbitServices;
		private var authMgr:IAuthenticationManager;
		private var appID:String = "";
		private var devID:String = "";
		private var loggedIn:Boolean;
		private var _username:TextInput;
		private var _password:TextInput;
		private var _loginButton:Button;		
 
		//class constructor, add components to layout
		public function RibbitAuth():void
		{
			_username = new TextInput();
			_username.text = "username";
			addChild(_username);
			_password = new TextInput();
			_password.text = "password";
			_password.y = 25;
			addChild(_password);
			_loginButton = new Button();
			_loginButton.y = 50;
			_loginButton.label = "Login";
			_loginButton.addEventListener(MouseEvent.CLICK, loginButtonClick);
			addChild(_loginButton);
			init();
		}
 
		//init called from constructor
		private function init():void
		{
			request = new RibbitServices();
			authMgr = request.authenticationManager;
			authMgr.addEventListener(AuthenticationEvent.LOGGED_IN, onLoggedIn);
			authMgr.addEventListener(AuthenticationEvent.LOGGED_OUT, onLoggedOut);
		}			
 
		//click handler, logs in or logs out based on loggedIn value
		private function loginButtonClick(event:MouseEvent):void
		{
			_loginButton.enabled = false;
			if (!loggedIn) {
				trace(_username.text + ", " + _password.text);
				authMgr.login(_username.text, _password.text, appID, devID);
			} else {
				authMgr.logout();
			}
		}	
 
		//Ribbit event handler when logged in
		private function onLoggedIn(event:AuthenticationEvent):void
		{
			loggedIn = true;
			_loginButton.enabled = true;
			_loginButton.label = "Logout";
		}		
 
		//Ribbit event handler when logged out
		private function onLoggedOut(event:AuthenticationEvent):void
		{
			loggedIn = false;
			_loginButton.enabled = true;
			_loginButton.label = "Login";
		}
 
	}
}
 

Summary: Instead of doing layout with Flex MXML, we're adding TextInput and Button controls. After that, the Actionscript 3 code used is almost identical. Note that in Flash Professional you could easily drag and drop these controls on the stage and refer to their instance names in the code. Also note that you could draw your own text fields and buttons with code. However, since we have to include the Flash Toolkit in our Library, we might as well use some of the canned UI controls as well in this example.

Next Post: I'll be moving away from login and into some of the other cooler aspects of the platform next. Stay tuned.

No related posts.

At the CaT conference in New York, we announced a new program for agencies to bring voice, messaging, and rich communications to their client's campaigns.

We started with the standard banner ad. Then added a little Ribbit flavor:

We provided a handful of sample banners to get their creative juices flowing and have several running (as in: live) on Creativity Online right now. Why don't you pop on over to Creativity Online, check them out, and maybe even make a call...

-----

Road Tripping
We have locked in a few events for the Fall, and plan to add to the the list shortly so stay tuned! As you can see, we loves the Flash.

• Flash on the Beach: September 20-23, 2009 in Brighton, UK
• LAFlashapaloozastock IV: October 3, 2009 in Venice Beach, CA
• FITC Un-conference at MAX: October 4-7, 2009 in Los Angeles, CA
  FITC Edmonton: October 17-18, 2009 in Edmonton, AB Canada

No related posts.

We had a very cool discussion yesterday about how Ribbit will thrive in the online gaming and virtual world space. Demand is brewing to bring Ribbit's communications platform to enhance the experience of millions of online users.

I've been chatting about this with developers as far back as September of last year, when I spoke at MIT's Emerging Technology conference. Innovative business leaders and business graduate students were exploring ways to bring Ribbit into their gaming applications. A popular and practical use case was using Ribbit to bridge the virtual experience with the real world experience by integrating Ribbit into a game or virtual world to enable users IN THE GAME to call out to friends/buddies/teammates in the REAL WORLD and invite them in.

Fundamentally, game developers could leverage both the Calling and Address Book features of the Flash Platform API to let users manage a list of contact phone numbers, and associate that with the user's in game contact list. If the user logs in and find their friends not online, they could click their friend's avatar and dial out to them -- all via Ribbit's platform.

Of course, with the ability to dial out, comes the ability to receive phone calls in the game. Other features and possibilities we discussed included voice morphing and in game voice messaging.

As other server side developer technologies are made available by Ribbit later this year, games and virtual worlds built on 'virtually' anything can begin to include Ribbit services.

Interested in talking to Ribbit about this service and more? Talk to us and visit developer.ribbit.com for more information.

No related posts.

I personally feel this is a great use of Social Media by the administration. I think this is a huge step forward in trying to engage the public, and applaud them for their efforts.  The only down side is that I found out about the chat AFTER the chat was over - so I would like to see them take it a step further on the next one and bring a deeper comms layer to their platforms to help keep me better informed.

I have several ideas, all Ribbit-related of course (SMS to let me know about the next event, call in to leave messages that are then transcribed and posted to the Facebook wall, etc.), but I wonder what YOU would recommend the White House do to bring integration of voice to the forefront of their IT plan?

-----

Tips and Tricks and Maybe a Code Haiku or Two Thrown in the Mix
With the click of a button yesterday, Chuck kicked off a series of Tips and Tricks posts where he is going to rip some of the Ribbit code apart and put it back together with a focus on bettering the experience for the user.

He has made his list of topics, he has checked it twice, he will be jumping between Flash and Flex just to be nice.

The list is not set in stone, however, so we wondered if there was something you would like to see him tear into?

-----

Ribbit on the Road
We have matched the Red Sox calendar to several 'absolutely must attend' upcoming conference and events (nicely done team, I might add - ha!). We've locked in several Adobe User Group visits.  We are working on Spawn events too.  But we have cabin fever. We need to get out (more). We want to beef up our Summer and Fall event schedule and we're really looking for an excuse to get out and socialize with you all. Help?

No related posts.

This is the first in what I plan to be an inspiring series of Tips & Tricks posts. With each post, we'll take an example of a common use of Ribbit and explore how we can make the code more efficient, stylish, and a better experience for the user.

Situation: Let's look at the simple task of logging into the Ribbit service via the Ribbit Flex SDK SWC. Instead of commonly using a separate login and logout button, we'll use MXML to use one button that will conditionally toggle between login/logout functionality based on your loggedIn status.

Requirements: You'll need a Ribbit username/password and a version of Flexbuilder.

The 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 Ribbit API classes from Library (SWC)
			import com.ribbit.api.RibbitServices;
			import com.ribbit.api.interfaces.IAuthenticationManager;
			import com.ribbit.api.events.AuthenticationEvent;
 
			//declare vars
			private var request:RibbitServices;
			public var authMgr:IAuthenticationManager;
			public var appID:String = "";
			public var devID:String = "";
			private var loggedIn:Boolean;
 
			//init called on creationComplete event from mx:Application
			private function init():void
			{
				request = new RibbitServices();
				authMgr = request.authenticationManager;
				authMgr.addEventListener(AuthenticationEvent.LOGGED_IN, onLoggedIn);
				authMgr.addEventListener(AuthenticationEvent.LOGGED_OUT, onLoggedOut);
			}			
 
			//click handler, logs in or logs out based on loggedIn value
			private function loginButtonClick():void
			{
				loginButton.enabled = false;
				if (!loggedIn) {
					authMgr.login(username.text, password.text, appID, devID);
				} else {
					authMgr.logout();
				}
			}	
 
			//Ribbit event handler when logged in
			private function onLoggedIn(event:AuthenticationEvent):void
			{
				loggedIn = true;
				loginButton.enabled = true;
				loginButton.label = "Logout";
				accountInfo.height = 0;
			}		
 
			//Ribbit event handler when logged out
			private function onLoggedOut(event:AuthenticationEvent):void
			{
				loggedIn = false;
				loginButton.enabled = true;
				loginButton.label = "Login";
				accountInfo.height = 80;
			}
		]]>
	</mx:Script>
 
	<mx:Panel id="loginPanel" width="300" height="150" title="Authentication">
		<mx:Form id="accountInfo" height="80" horizontalScrollPolicy="off" verticalScrollPolicy="off">
			<mx:FormItem label="Username">
				<mx:TextInput id="username"/>
			</mx:FormItem>
			<mx:FormItem label="Password">
				<mx:TextInput id="password" displayAsPassword="true"/>
			</mx:FormItem>
		</mx:Form>
		<mx:Button id="loginButton" label="Login" click="loginButtonClick()" />
	</mx:Panel>
</mx:Application>
 

Summary: The trick here is established at line 30, where we conditionally call either login() or logout() based on the value of loggedIn. We can then change the state of the UI based on the onLoggedIn and onLoggedOut events.

Next Post: I'm just now putting together a list. Feel free to reply in comments with your suggestions.

No related posts.

@leedryburgh: But we will <always> be your favorite, right? #

RT @joseeight: @jonbcampos - @SlideRocket is also integrating @Ribbit in its available tools, so more to love #

Powered by Twitter Tools.

No related posts.