A Few Changes
Made some changes, mainly that I changed the title to reflect that there will be code other than Flex here.
Stay tuned 
Solution to an ArrayCollection problem
I have been working on a small Flex app for use at work, and ran into a problem and a solution to it that I thought some of you might find valuable.
As part of the app, I am getting a list of user names and displaying them in a datagrid, I also have a textfield for doing a search, and have the results display in the datagrid. The search worked fine, as long as there was more than 1 result to display, it there was only 1 result, it would not display in the datagrid. after doing some digging I found that if there was only one result, instead of being returned as an arraycollection of 1 item, it was being returned as an objectproxy, since my app was expecting an arraycollection to be returned, it had nothing to display. So after some digging I found a nice little way to check the returned result and convert to an array collection if needed. Here is the code:
import mx.utils.ArrayUtil;
if (event.result.rows.row is ArrayCollection) {
theArray = event.result.response.data.row;
} else if (event.result.response.data.row is ObjectProxy) {
theArray = new ArrayCollection(ArrayUtil.toArray(event.result.response.data.row));
}
if (event.result.rows.row is ArrayCollection) {
theArray = event.result.response.data.row;
} else if (event.result.response.data.row is ObjectProxy) {
theArray = new ArrayCollection(ArrayUtil.toArray(event.result.response.data.row));
}
Obviously you will need to make changes to your event.results.. path to work with your project. Hope it helps.
10 September 2008 in Flex No comments
RejawFlex part4-creating and validating session
It is time to get to the fun stuff, and get a session created and authenticated so we can start posting shouts on Rejaw, and also see all the shouts from people we are following.
First lets take a look at what we have to do according to the api. First we have so send a session create request, which looks like this:
http://api.rejaw.com/v1/session/create?api_key=[YOUR_API_KEY]
This call will return either and error, with an error message, or an ok, with your session id. so we need to create the function, I am going to call mine getSession. The only param to send is your api key, and then you need to set your AsyncToken. Here is my function:
private function getSession():void
{
var params:Object = {api_key:apiKey};
methodType="session/create";
var token:AsyncToken = myRejawService.send(params);
token.action = "createSession";
{
var params:Object = {api_key:apiKey};
methodType="session/create";
var token:AsyncToken = myRejawService.send(params);
token.action = "createSession";
}
That will send our HTTPService request, and then we need to see what the result is and act on that. So in my resultHandler function, I am going to add a new case statement called createSession. I also need to do a little error catching, in case there is a problem with the request, so I create an if statement to catch if the response has an error, and if so pop up an alertbox with the error message. If the response returns ok, then I need to catch the session id, and store it in a variable, because I will need it for other calls to the service. Once I have stored the key, then I need to authenticate the session, that will be done in another function, but I will need to call it. Here is my case statement:
case "createSession":
myData=event.result.response as ObjectProxy;
if (myData.status=="fail"){
var sessionError:String=myData.error.message;
Alert.show(sessionError,"Error Creating Session");
}else {
sessionKey=myData.session;
authenticate();}
break;
myData=event.result.response as ObjectProxy;
if (myData.status=="fail"){
var sessionError:String=myData.error.message;
Alert.show(sessionError,"Error Creating Session");
}else {
sessionKey=myData.session;
authenticate();}
break;
Now that I have my session id, time to authenticate. According to the api docs, this is the call for that:
http://api.rejaw.com/v1/auth/signin?session=[session id]&email=[YOUR_EMAIL]&password=[YOUR_PASSWORD]
So I need a function to authenticate, it will have 3 params, session id, my username, and my password. I know the api says, my email, but you can use either, email or username, but they are moving to using the username, so am just going to use it.
Here is the authenticate function:
private function authenticate():void
{
userName=rejawUserName.text;
password=rejawPassword.text;
var params:Object ={session:sessionKey, username:userName, password:password};
methodType="auth/signin";
var token:AsyncToken = myRejawService.send(params);
token.action = "authenticate";
}
{
userName=rejawUserName.text;
password=rejawPassword.text;
var params:Object ={session:sessionKey, username:userName, password:password};
methodType="auth/signin";
var token:AsyncToken = myRejawService.send(params);
token.action = "authenticate";
}
Time for a new case statement in my resultHandler, I will also add a little error catching in case my login credentials are no good. Here is the case statement:
case "authenticate":
myData=event.result.response as ObjectProxy;
if (myData.status!="ok"){
Alert.show("Invalid Login", "Login Error")
}
break;
myData=event.result.response as ObjectProxy;
if (myData.status!="ok"){
Alert.show("Invalid Login", "Login Error")
}
break;
So the code is in place, I need to add a field to get the users password, and another button to to start the whole session create/authenticate.
just to see what is going on I am also going to add a couple textfields, one to show me the call status, and set it to myData.status, and another to show me the session id and set that field to myData.session. So here is what my app looks like at this point:
You will need a Rejaw account to test the authenticate fully. If you enter your Username and password then press the Authenticate button, if it succeeded, you will get a small ‘ok’ to the right of the password textfield, and your username will populate the UserName textfield under the buttons, it does not authenticate you will get the pop up telling you.
So in the next post, I will be setting things up to send a shout to Rejaw.
RejawFlex part3
Well lets see, on the last post I have included a working version of where I was up to that point. I have made a few changes to make things a little easier for myself down the road, so lets get into what I did and how I got to that point.
First I figured out I can use the same HTTPService for all my calls with the +methodType variable I added, so I changed my HTTPService id to myRejawService. I changed the fucntion call from getTest to getProfile, in keeping with the long view of the project. I also need to be able to deal with the returned results in diffrent ways depending on what call I make, so I have added an AsyncToken to let me know the type of call I made, so my resultHandler function knows how to respond. Here is the new code for the function with the AsyncToken added and also my resultHandler function
private function getProfile():void
{
userName=rejawUserName.text;
var params:Object ={api_key:apiKey, username:userName};
methodType="user/get_profile";
var token:AsyncToken = myRejawService.send(params);
token.action = "getProfile";
}
{
userName=rejawUserName.text;
var params:Object ={api_key:apiKey, username:userName};
methodType="user/get_profile";
var token:AsyncToken = myRejawService.send(params);
token.action = "getProfile";
}
private function resultHandler(event:ResultEvent):void
{
var token:AsyncToken = event.token;
switch (token.action)
{
case "getProfile":
myData=event.result.response.user as ObjectProxy;
break;
}
}
{
var token:AsyncToken = event.token;
switch (token.action)
{
case "getProfile":
myData=event.result.response.user as ObjectProxy;
break;
}
}
OK, so I am making my HTTPService call, getting the result, now to put what was sent back on the screen. You saw my interface, as basic as it is in the previous post, here is the mxml for it, with a few minor changes.
<mx:Label text="User Name" x="175" y="12" width="71"/>
<mx:TextInput id="rejawUserName" text="User Name" x="246" y="10"/>
<mx:Button label="Get Profile" click="getProfile()" x="227" y="68"/>
<mx:Label x="191" y="98" text="Username:" fontFamily="Georgia" fontSize="12"/>
<mx:Text text="{myData.username}" color="#000000" x="261.5" y="98" fontFamily="Georgia" fontSize="12"/>
<mx:Label x="191" y="127" text="Full Name:" fontFamily="Georgia" fontSize="12"/>
<mx:Text text="{myData.fullname}" x="264" y="127" fontFamily="Georgia" fontSize="12"/>
<mx:Label x="75" y="146" text="About:" fontFamily="Georgia" fontSize="12"/>
<mx:TextArea text="{myData.blurb}" x="75" y="175" fontFamily="Georgia" fontSize="12" backgroundColor="#FFFFFF" width="500" height="400"/>
<mx:Image x="146" y="103" source="{myData.image_url}" scaleContent="false" id="userImage"/>
<mx:TextInput id="rejawUserName" text="User Name" x="246" y="10"/>
<mx:Button label="Get Profile" click="getProfile()" x="227" y="68"/>
<mx:Label x="191" y="98" text="Username:" fontFamily="Georgia" fontSize="12"/>
<mx:Text text="{myData.username}" color="#000000" x="261.5" y="98" fontFamily="Georgia" fontSize="12"/>
<mx:Label x="191" y="127" text="Full Name:" fontFamily="Georgia" fontSize="12"/>
<mx:Text text="{myData.fullname}" x="264" y="127" fontFamily="Georgia" fontSize="12"/>
<mx:Label x="75" y="146" text="About:" fontFamily="Georgia" fontSize="12"/>
<mx:TextArea text="{myData.blurb}" x="75" y="175" fontFamily="Georgia" fontSize="12" backgroundColor="#FFFFFF" width="500" height="400"/>
<mx:Image x="146" y="103" source="{myData.image_url}" scaleContent="false" id="userImage"/>
So I have a textinput for the user name, a button to call the function getProfile, two text fields to display the Username and the FullName, an image field to display the image that reply sends us a link to, and a textarea to disply the about blurb. This gets you to where I was on the previous post.
Yes, there were some things I skipped over, but this is a general overview of what I am doing, not a full tutorial. If you want me to go into more detail about what I am doing please let me know.
So next step in my process is to create a session and authenticate with the Rejaw api…That will be in the next post.
RejawFlex Test1
In case you have been wondering what it is I have been working on, I decided to upload my RejawFlex project as it is right now so you can see where I am at right now. So far all I am doing is making a call to user.get_profile method. There is no authentication, that comes next, it is just a call, that returns the profile info for the user name that is entered in the text input box. I am outputting the Username, Full Name, the Users Avitar pic, and the about me blurb. To test it out you can use my username..DesertWolf, also some of the developers on the project..cboone, dburkes, and kenn.
Like I said nothing fancy, very basic, but it is a start. In my next post I will explain what I did to get to this point.
Starting my Flex-Rejaw project
OK, so I was trying to think of what to do as my first exploratory project, something a little different than most of the tutorials that are all ready out there. I have been getting into Rejaw lately, and took a look at their api and played with it a bit, and thought, what the hell, it covers all the things I want to try, remote calls, using api’s, sending and receiving data, and even has authentication, and sessions. Now granted, I really don’t have much experience with all this, pretty much everything I have done so far is standard database calls, whether it was on and intranet or on a website.
So, first things first, lets get a project setup, and then try and connect with Rejaw. First off I have to go get my API Key, pretty simple, then I am just going to make an unvalidated call to the api, to retrieve user info. So using the info from the API Tutorial, this is the call for that;
http://api.rejaw.com/v1/user/get_profile?api_key=[YOUR_API_KEY]&username=[YOUR_USERNAME]
This returns something similar to this:
OK, so i have a good idea about what is going to be sent to me. So how do I get?
Well I am going to be expanding this to eventually grab shouts and post them, and reply to them, and also get the persons image, so I need to make my HTTPService Request pretty flexible, because of how the api calls are structured from Rejaw.
You have the base url of the call:
http://api.rejaw.com/v1/
Then depending on on what method you want to call you can have ….
- Session
- Authentication
- User
- Conversation
- Subscription
- Event
- Timeline
So in the above example , I am using the user.get_profile method. Which makes..
http://api.rejaw.com/v1/user/get_profile
So here is what I did to make the HTTPService Request flexible:
mx:HTTPService id="myRejawUser"
url="{'http://api.rejaw.com/v1/'+methodType}"
result="resultHandler(event)"
url="{'http://api.rejaw.com/v1/'+methodType}"
result="resultHandler(event)"
And an example function call to this HTTPService Request looks like this:
private function getTest():void
{
userName=rejawUserName.text;
var params:Object ={api_key:apiKey, username:userName};
methodType="user/get_profile";
myRejawUser.send(params);
}
{
userName=rejawUserName.text;
var params:Object ={api_key:apiKey, username:userName};
methodType="user/get_profile";
myRejawUser.send(params);
}
Now at this point some of you might be saying “how did you get to this point? didn’t you skip some things?” Yes, I jumped over some things, but this is not meant to be a tutorial, just an explanation of the key elements in my process. If there are requests for a full tutorial I will consider it.
I think this is a good stopping point for now. Next time I will create the UI I will use to test the API call.
Why Flex?
Image via Wikipedia Over the years I have programmed in Java, C++, PHP, Visual Basic, C#, and ASP.NET, so why go to Flex? Well for the last 5 years I have worked for an adoption agency, mainly working on their intranet, with a few minor projects on their websites. When I graduated, I had wanted to get into web design & development, but I took the position at the agency, not expecting to be there as long as I have been. Lately I have really been interested in Web 2.0 & RIA and wanting to get into developing some of my own. I had looked at Flex back when it first came out, but back then it was prohibitively expensive for a small company..around $10,000.00 per server.
In the last few months I have been doing alot more website work at my job, most of it in PHP/mySQL, but my interest in RIA’s and Web 2.0 is still there. So I decided it was time to learn a web language in depth, but which one? I wanted something that would be around for a while, and that was already in use, so I looked at Ruby/Rails, Python/Django, and came back across Flex, well it was no longer as expensive as it was. So I did some more digging, and liked what I was finding, so I decided to dive in.
Over the last couple weeks I have been going over tutorials, and doing some reading, and the more I found, the more I liked. So the choice has been made, I am going to go with Flex, The question now is where to start? Actually while playing around I had already started. While playing I had used the Create Project from Database wizard on a database I am using in my website project for work, and ended up using the web service that was created, with a few modifications. It actually allowed us to jump ahead an let us integrate web services sooner than I had planned.
For a side project I am playing with Flex and the Rejaw api, i will post my first post on that later today, or tomorrow..
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=4b4b01e1-6b24-42f7-94ae-630740ba36a0)
Some background..
When ever a blog is started the first thing that is asked is “Why?”. Well in this case it is for a few reasons..
- Trace my progress while diving into Flex programming.
- Give me a handy place to keep Flex related links.
- Possibly help other like me, just starting out with hints and posts about things I find and things I am doing.
Nothing monumental, earth shattering, or extreame, just something for me, if other benifit from it, all the better.
24 August 2008 in General No comments