Wednesday, December 29, 2010

SmartFoxServer Tutorial: Simple Buddylist Tutorial

Hello everyone.

In this tutorial, we are going to make a very simple buddy list. That's all we will be doing in this tutorial. So, with that being said, let's begin.

To begin with, I'm using SmartFoxServer's avatarChat example file. What I do in this tutorial, you should be able to just copy and paste all the coding to your Flash file, and it should work just fine. Anyway, let's do all the coding first, then go back and setup the Stage.

The first line of coding you need to add is this:

var bListLoaded = false;
Add that line of coding somewhere near to the place I added mine in the picture below, or in the same exact spot if you want.



Next, you have to add something to the onJoinRoom handler, so the buddylist loads when you enter the room. This is where the variable above comes in. Add this coding somewhere in the onJoinRoom handler:

if (!bListLoaded) {
bListLoaded = true;
_root.smartfox.loadBuddyList();
}
I added it to the end of the onJoinRoom handler after the avatar is setup. Here is a picture of where I added the coding:



After you add that coding, you have to create a new handler. By that I mean add more coding. Anyway, what I did here was add some coding under the onJoin Room handler. Here is the coding you need to add:

smartfox.onBuddyList = function(bList:Array) {
theBList.removeAll();
for (var i in bList) {
var buddyName = bList[i].name + " (" + (bList[i].isOnline ? "Online" : "Offline") + ")";
theBList.addItem(buddyName, bList[i]);
}
theBList.sortItemsBy(buddyName, "ASC");
}

I added that coding right under the onJoinRoom handler, as shown in the picture below.



Now, we only have two more handlers to create. The two more handlers are onBuddyListUpdate and onBuddyListError. After that, it is just simple coding. Anyway, here is the coding for the onBuddyListUpdate handler:

smartfox.onBuddyListUpdate = function(b:Object) {
var buddyName = b[i].name + " (" + (b[i].isOnline ? "Online" : "Offline") + ")";
for (var i:Number = 0; i < theBList.getLength(); i++) {
var item = theBList.getItemAt(i);
if (item.data.name == b.name) {
theBList.replaceItemAt(i, buddyName, b);
break;
}
}
}

I added that handler under the onBuddyList handler, as in the picture below.



Now, the last handler you have to add, and the simplest in my own opinion, is the onBuddyListError handler. For this tutorial, I'm not going to get much into this handler because it is a very simple handler. All I do in this handler, at this time, is just setup a trace command, so that if an error occurs in the buddylist, it traces it to the output panel. Here is the coding for the onBuddyListError handler:

smartfox.onBuddyListError = function(theError:String) {
trace("Buddylist Error: " + theError);
}

I added that handler under the onBuddyListUpdate handler, as shown in the picture below.



Those are all the handlers you need to setup, but that's not all the coding. Now, we move onto functions. The functions we are going to add in this tutorial are addBuddy and removeBuddy. First, I'll make the addBuddy function.

Just to make the file look "cleaner" in coding, I add all my functions at the end of the Flash movie. So, I'm skipping all the way down and I'm going to add this coding:

function addBuddy() {
var user = userList_lb.getSelectedItem().label;
if (user != _global.myName) {
if (user != undefined) {
_root.smartfox.addBuddy(user);
}
}
}

Here is a picture of where I added the coding:



(I know the image isn't the correct coding as it has ...getSelectedItem().data.label; - Take out the ".data" part and it should work fine.)

Now, I skipped down two more lines after adding that coding, and I then added the removeBuddy function, which contains this coding:

function removeBuddy() {
var user = theBList.getSelectedItem().data.name;
if (user != _global.myName) {
if (user != undefined) {
_root.smartfox.removeBuddy(user);
}
}
}

Here is a picture of where I added that coding as well:



(I know the image isn't the correct coding as it has ...getSelectedItem().label; - Take out the ".label" part and add ".name" instead, then it should work fine.)

Now, after you do all that above, it is now time to setup the Stage. By the way, all the coding above these words go on the chat frame of the avatarChat.

To setup the Stage, all you have to do is click Window from the menu bar at the top of Flash, then click on the Components option. The components window should then open. Look through the components window until you find the component called "List." Drag it to the Stage and give it an instance name of theBList.

Now make two buttons and put them somewhere on the Stage, give them any instance name you want. For the button that will be used to add the buddy, add this coding to the button:

on (release) {
_root.addBuddy();
}

Now, for the button that will be used to remove the buddy from your buddylist, use this coding:

on (release) {
_root.removeBuddy();
}

That's all for this tutorial!

If you have any problems or errors, or any questions on this tutorial, please leave a comment on this post and I will reply to it soon.

NOTE: Due to the coding I used in this tutorial, you will need to open the SWF file two times to test it, as if you try to test it with yourself by attempting to add yourself onto your own buddylist, it won't work.

7 comments:

  1. Nothing happens? I click the other player and press add, but nothing happens... Where does it show your buddys?

    ReplyDelete
  2. Tree Line 1: It should show your buddies inside the list component. Is the list component's instance name "theBList?"

    ReplyDelete
  3. The list component? Is that like the user list?

    ReplyDelete
  4. Tree Line 1: In a way, yes. Here is a selection copied from the post above:

    "To setup the Stage, all you have to do is click Window from the menu bar at the top of Flash, then click on the Components option. The components window should then open. Look through the components window until you find the component called "List." Drag it to the Stage and give it an instance name of theBList."

    Follow those instructions to setup the actual list to hold all the user's buddies.

    ReplyDelete
  5. Thank you CoolBoy this is the most easiest tutorial ever!

    ReplyDelete
  6. This tutorial is a win o_o

    ReplyDelete