Posts in Category "Uncategorized"

Create a mobile Facebook Flex application in Flash Builder 4.5 (Part 2)

In last week’s post, I introduced Part 1 of Create a mobile Facebook Flex application in Flash Builder 4.5. Let’s now complete the application by introducing how you retrieve user information, post status updates, and skin buttons. Similar to Part 1, I’ll be referencing the original tutorial throughout this tutorial and only point out differences in programming syntax. I will also explain details of the functions and data structures that are used in this tutorial.

Understanding the Graph API

This tutorial uses the Graph API, so I’ll start by giving an introduction and overview. The Graph API is a social graph that holds all the information within the Facebook platform that is connected within a user account. Through the Graph API, developers can tap into any information that’s available to them (such as profile information, videos, photos, events, pages, notes, etc). Making calls to the Graph API will return a XML-like data structure where array-like syntax can be used to manipulate data (as you will see later in this tutorial).

Here’s an example of a returned API call for a coca cola page:  https://graph.facebook.com/cocacola

As shown in the example, the Graph API returned various raw information about Coca Cola’s Facebook page. For the most part, you can retrieve data from the API call such as id, name, picture, category and everything else that’s available. The Facebook documentation lists many more examples of what Graph API can do.

The best way to really understand Graph API is to see it in action through the Graph API explorer. In the input text box next to the GET button, you will see https://graph.facebook.com/xxxx where the xxxx is a Facebook ID number (most likely your own). When you first log in, the Graph API explorer shows the data structure of the user profile. From here, you can explore your various connections such as activities, albums, events, feed and everything else that is connected within.

Here’s an example of what the Graph API explorer looks like:

The Graph API explorer is a valuable tool for understanding how the Facebook data structure works and how you can make calls to retrieve different types of data. For the purpose of this tutorial, I’ll explain the data structures you will need as you go along.

Get and display Facebook user info

In this section, you’ll lay out components in which you display user profile information.

 Display basic user profile info, Display a user’s profile picture, & Display info that requires extended permissions

  1. Follow the instructions in Display basic user profile info, Display a user’s profile picture, and Display info that requires extended permissions.

As discussed in the original tutorial, permissions is an important topic to be taken with great consideration when developing Facebook applications (with or without Flex). Because its encapsulated nature, Facebook only allows you to see user information with public permission settings (unless set otherwise). While developing your Facebook app, consider what types of data you want to access. You can read the permissions documentation on the Facebook site for more information.

 Get and post Facebook status messages

Pay extra attention to status messages. Reading and posting status messages requires a slightly different and more sophisticated workflow, as the data itself is more dynamic than static data (such as retrieving your name, picture, or birthday date).

Update your status on Facebook.com & Look up info in developer documentation

  1. Follow the the instructions in Update your status on facebook.com & Look up info in developer documentation.
  2. Be sure to remember to put FacebookMobile when coding your login and getImageUrl() calls.

 Get and display user status messages

  1. Continue to follow the instructions in Get and display user status messages.
  2. In step 2, remember to put FacebookMobile when writing your api call.

The api call for FacebookMobile.api("/me/statuses", getStatusHandler) returns a list of status message objects posted by the user’s profile. You can view the actual data structure of your status messages by going to the Graph API explorer and in the input box https://graph.facebook.com/me/statuses. You will see that the returned list of status message objects contains detailed information about each status update, including status IDs, name, user ID, message, updated time, people who have liked your post, etc.

In this particular API function, the result handler getStatusHandler passes the list via a result object that contains the same data structure as returned by the Graph API explorer. As in step 19 in Get and display user status messages, the result Object can be handled like an array and use array-like syntax, such as statusLbl.text=result[0].message. This gets the first item in the array and retrieves the message. You can also retrieve other status information (not included in this tutorial) with calls like result[0].from.name as shown in the example.

 Request permission to post messages

  1. Follow the tutorial in Request permission to post messages. Be sure to continue using FacebookMobile instead of FacebookDesktop for any login or submit calls to the Facebook API.

Pay extra attention to step 12 regarding submitting your posts. You will be sending your status update through the API call by setting the message variable to the text input value at statusInput.text. Also note that you will specify the request type as “POST” (not the default “GET” value). Your FacebookMobile api method call will take the message written in the text input box, pass it into your “/me/feed” and the submitPostHandler will clear the input text box and also update your status. The code will look something like:

FacebookMobile.api("/me/feed", submitPostHandler, {message:statusInput.text}, "post").

Your script code should look something like the following:

Skin the login and logout buttons

You can choose to to follow the original tutorial’s section on Skin the login and logout buttons, which uses design mode. I prefer to manually program the buttons, although both ways will produce the same result.

  1. Go to New > MXML Skin
  2. In package, type “skins”. In Name, type “FBLoginButtonSkin“. In Host component, type “spark.components.Button”.
  3. Click Finish.
  4. Open FBLoginButtonSkin.mxml and go to source view.
  5. Under the <s:states> tags, type "<s:BitmapImage source="@Embed('images/fblogin.gif')"/>.
  6. Save the file.
  7. Go to FacebookUserStatusAirMobile.mxml and switch to source view.
  8. In the loginoutBtn tag, add the following within the opening Button tag:
    skinClass.loggedout="skins.FBLoginButtonSkin"
  9. Repeat steps 1-8 using the name “FBLogoutButtonSkin” and changing the image to “images/fblogout.gif“.
  10. Run your app and you should see your  new login and logout buttons skinned with a Facebook-like button.

The end product of this simple mobile Facebook application should look something like this:

Where to go from here

Continue to develop this app! This will hopefully give you some foundation into some very basic Facebook properties. Continue to look through the Facebook Developer documentation page, check out the Adobe Developer Connection facebook development website, and use the Graph API explorer to get a better understanding of the Facebook data structure.

Also please note that these tutorials are applicable to both smart phone and tablet platforms (Android, iOS, and Blackberry).

Next week, I’ll introduce my next tutorial that will showcase more sophisticated capabilities of developing mobile Flex applications and more thorough coverage of data manipulation with Facebook data. Please stay tuned!

I hope this has been helpful!

Justin

Create a mobile Facebook Flex application in Flash Builder 4.5 (Part 1)

Over the last few weeks, I’ve been working on mobile Facebook apps with ActionScript and Flex to create tutorials that help developers understand the workflow and data structure of the Facebook platform. In the next couple weeks, I’ll be posting several posts discussing different aspects of the Facebook/ActionScript/Flex/mobile platforms as well as a few new and exciting Facebook apps!

For my first project, I took one of the Adobe Developer Center articles (Create your first Flex and Facebook application) and ported it to a mobile application. The workflow and structure is relatively the same between mobile and desktop, although there are several changes that I will call out as they occur throughout this tutorial.

This tutorial follows a slightly modified set of instructions, so please be aware of the subtle differences and explanations. For this mobile tutorial, I’ll be breaking up the original tutorial into two parts: part 1 will cover the login/logout functionality and part 2 will cover displaying user data and understanding the Facebook data structure. I strongly recommend that you first  run through the desktop tutorial before pursuing this tutorial, as I make frequent reference to the original tutorial. This tutorial also expects you to be familiar with the Facebook SDK, Flash Builder, and Flex. You can download the completed project tutorial FacebookUserStatusAirMobile.

Register an application with Facebook

Sign up with Facebook & Create a new Facebook application 

  1.  Follow the entire sections of Sign up with Facebook and Create a new Facebook application if you haven’t done so already. The workflow and instructions in the original are identical to this tutorial.

Create a simple Flex mobile application

Create a Flash Builder project

Create your mobile project and project settings.

  1. Open Flash Builder.
  2. Select File > New > Flex Mobile Project.
  3. In the Create a Flex Mobile Air project dialog box, enter FacebookUserAirMobile as the project name.
  4. In the mobile settings, select your application template to be blank. Let the rest of the settings default and click Finish.  

Add a login button and create login and logout states

  1. Follow the Add a login button and Create login and logout states instructions specified in the original tutorial. Note: When in Design view, be sure to specify the mobile device type (for example HTC Evo or Apple iPad) so you can lay out components that match the mobile device’s real estate

Add Facebook login and logout

To communicate with Facebook you use classes  in the Adobe ActionScript SDK for Facebook Platform.

Add the Adobe ActionScript 3 SDK for Facebook Platform to your project

The first step is to download the Adobe ActionScript 3 SDK for Facebook to make its classes available to your project.

  1. Navigate to the Google repository for the Adobe ActionScript 3 SDK for Facebook Platform.
  2. Go to the Downloads tab and download the GraphAPI_Mobile_1_8.swc file and save the file to your computer.
  3. Drag this SWC file and drop it in the libs folder of the Package Explorer for your FacebookUserStatusAirMobile Flex project.

Initialize the application

With any Facebook & Flex application you make, the first step is to make calls to Facebook to create a session that authorizes this instance of your application with Facebook for a specific user. You will use the init() and login() methods of the FacebookMobile class.

  1. Return to FacebookUserStatusAirMobile.mxml and switch to Source Mode.
  2. First, notice the Application tag versus the WindowedApplication tag you did in the desktop tutorial even though they use the Application tag.
  3. Register to listen for the Application’s creationComplete event and generate an event handler using the Content Assist.
  4. Inside the function, call the static init() method of the FacebookMobile class. Force code-hinting to appear by pressing Ctrl+Spacebar and select FacebookMobile from the pop-up menu so that the import is written for you and the compiler can locate the class.
  5. The init() method checks to see if there is a shared object for this application and if there is retrieves it. If it does not exist, it creates it.
  6. You will notice in the code-hinting and the FacebookMobile documentation for the init() method that it has two required arguments. You must pass an application ID and a callback function.
  7. Follow the rest of Initialize the application section in the original tutorial starting at step 8. Add your application ID and create your callback function.

Add login functionality

The first time a user accesses the application, a shared object and an access token do not exist and they will need to login to Facebook. To accomplish this, you use the FacebookMobile login() method, which displays the Facebook login page.

Note: As of SDK verion 1.8, there is no support for Single-Sign-On (SSO), so mobile login will appear as a web login.

  1. Proceed to follow steps 1 and 2 of Add login functionality section in the original tutorial to create your login functionality.
  2. After you have modified your login button and created your login() function. Go to the SDK documentation and review the login() method.
    There is a significant difference between the parameters of the mobile and desktop login. Mobile login requires your callback function, stageRef, extendedPermissions, and StageWebView. Note:The documentation describes the permissions and StageWebView as optional parameters, however this is incorrect and these are in fact required in order for Flash Builder to compile correctly.
  3. Create your permissions array by setting a public variable array to store your application’s set of permissions of Facebook data. For this project, below your set of import statements, write:
    public var permissions:Array = ["user_birthday", "read_stream", "publish_stream"]
    For any application you develop for Facebook, you will be required to specify the permissions you need in order to access particular data. This data can include your own profile or your friend’s information (for example birthday, name, status, etc.). Because Facebook is so insulated from the Internet, it’s important to scope and think about what type of data access you might need. You can read more about user and friend permissions here.
  4. Create a StageWebView since it is one of the parameters required in FacebookMobile.login(). Within your login() function, write:
    var facebookWebView:StageWebView = new StageWebView()
    The StageWebView lets you display HTML content within our AIR Facebook application, in this case, our login function. Because there is no native login support or Single-Sign-On (SSO) functionality, logging into Facebook through this mobile app requires a web login. You can read more about StageWebView in Sunil Bhaskaran’s article and you can read more about Single Sign-On on the Facebook Developer site.
  5. On the next line, we define our StageWebView through a viewPort. Using the following code:
    facebookWebView.viewPort = new Rectangle (0,0, stage.width, stage.height-100)
  6. Finally on the next line, we add the actual FacebookMobile API login function:
    FacebookMobile.login(onLogin, this.stage, permissions, facebookWebView)
    The onLogin method is a callback that the original tutorial had you write.Your code should look something like this:
  7. Try running your application by going to Run > Run Configurations. Be sure to have your project selected, your Target platform (Android, Blackberry or iOS) and the device you want to emulate (or your actual device). If this is your first time running this app, click on the Login button  and you should see a Facebook login window that asks you to enter Facebook account information. Upon successfully logging in, you might encounter a runtime error, which is normal because we haven’t written any code for the callback function. Your login screen should look something like this:

Look at the data returned from Facebook

You can use these instructions to look through variables and analyze the data structure of the returned Facebook data.

  1. Follow all the steps of Look at the data returned from Facebook from the original tutorial.Learning and understanding Facebook’s data structure is especially important, and using the debugger tool can be really useful. Another very useful tool for understanding the Facebook data structure is the Graph API Explorer.

Add logout functionality

  1. Add logout functionality. Remember to code the FacebookMobile.logout() method and not FacebookDesktop.logout().

We will end this tutorial here. My apologies for leaving you in a cliff hanger, but I will continue this tutorial and finish it in next week’s post. Or better yet, I encourage you to explore and try coding the rest of the original tutorial in a mobile environment.

UPDATE: Part 2 has been posted, please check it out here!

Justin

Facebook & Flex News

For the last couple weeks, I’ve been working with the ActionScript-Facebook API to get a better understanding of creating a RIA (or Rich Internet Application) on the Facebook platform. So in case you missed it, I’d like to give folks a friendly reminder that on October 1, Facebook and Adobe released the latest ActionScript 3 SDK for Facebook Platform (version 1.8). This update integrates the latest OAuth 2.0. You can download the latest SDK here and learn more about OAuth 2.0 here.

With this new development, we’ve updated the Facebook sample files with several bug fixes, improvements (including readme files with installation and configuration instructions), and upgraded login to OAuth 2.0 standards. If you haven’t tried these sample files, they are very useful resources for learning more about creating your Facebook-integrated application. I’m currently working on a mobile Facebook example and hope to blog about it in the next few weeks, so stay tuned!

Justin

Migrating from Flex 3 to Flex 4/4.5

There are lots of benefits to be had from migrating from Flex 3 to Flex 4.5, but it can be a pretty daunting task if you have a large or complicated application. We’ve collected a list of good resources that can help you:

-Matthew J. Horn
Flex doc team

From Flash Builder to the Amazon App store

Adobe evangelist, Andrew Trice posted a great tutorial on getting your Flex/AIR applications onto the Amazon App store. This tutorial gives a detailed workflow on getting your APK file on Flash Builder into the Amazon App store.

From Flash Builder to the Amazon App store

Courtesy of: Andrew Trice

Improving Flash Builder’s performance

For those of you who are having performance issues with Flash Builder, it could be that the Java heap-size settings are too low. Here is a quick and easy fix, which should make Flash Builder easier to use. People on Twitter who have tried this modification report better leverage of their hardware and overall improved performance.

For Windows:

  1. Navigate to your FlashBuilder folder – C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.5\
  2. In a text editor, open FlashBuilder.ini (for Windows) and Adobe Flash Builder 4.5.ini within Contents/MacOS/folder (for Mac OSX) .
  3. Find the lines that says “Xms40m” and “Xmx512m” (Please note: the numbers may already be configured).
  4. Replace these two lines with “Xms256m” and “Xmx512m” respectively.
  5.  Save the file and restart FlashBuilder.

For Mac OSX:

  1. Open a Terminal window
  2. Navigate to Applications/Adobe Flash Builder 4.5/Adobe Flash Builder 4.5.app/Contents/MacOS (you may need to enclose these folder names in quotes).
  3. In a text editor, such as vi or emacs, open Adobe Flash Builder 4.5.ini.
  4. Find the lines that says “Xms40m” and “Xmx512m” (Please note: the numbers may already be configured).
  5. Replace these two lines with “Xms256m” and “Xmx512m” respectively.
  6.  Save the file and restart FlashBuilder.

 

Hope that helps,

Justin

Courtesy of: polygeek and dougrdotnet

 

 

Workaround for Flash Builder & Zend installation problems (for Windows 7 64-bit edition)

Very recently, I was reviewing a tutorial for a Flex and PHP integration and ran into an issue in Flash Builder that got me stuck for a little while. I first installed Flash Builder for PHP and Zend (with phpMyAdmin) and load Zend with a sample database. I then created a Flex server (PHP) project and make a connection on my file with a PHP data service (select Data–> Connect to PHP from the menu bar). Going through the PHP service configuration wizard, I didn’t have an existing PHP class and asked Flash Builder to generate one instead. Using the login information from phpMyAdmin, I encounter the following error:

Click to enlarge

The error is currently reported as a bug: http://bugs.adobe.com/jira/browse/FB-31693.  This issue only occurs in Windows 7 64-bit edition because under the C drive, Windows contains two program file folders: “Program Files” and “Program Files (x86)”. Since Windows sets the default installation path for non-64-bit programs to be “C:\Program Files (x86)\”. Zend returns an error when it encounters the ” ( ” in the directory.

If you’re currently running into this issue, please uninstall Zend from your computer completely and follow the steps below.

  1. Install the latest version of Zend (currently version 5.5).
  2. In the installation wizard and when selecting a web server, be sure to specify your destination folder to be outside of “Program Files (x86)”. i.e. “C:\”.
  3. After installation, Flash Builder should be able to interact with Zend without any further issues.

Thiis issue has a number of variations, so please feel free to ask questions about this workaround.

Justin

Adobe Cookbooks – Recipe Request Challenge

Write some Flex code and get a chance to win a Samsung 10.1 tablet.

With the help of the user community and several Adobe employees, we have identified a list of recipe requests that we feel would be valuable contributions to the Adobe Cookbooks as well as for the larger Adobe community.  All that these requests need now are answers…and that’s where the challenge comes in!

For every recipe request below, the community member who provides the solution will receive:

  1. An Adobe Developer Connection t-shirt
  2. A chance at a Samsung 10.1 tablet

Adobe Cookbook recipes are snippets of code that are shared by community members to assist fellow developers in overcoming specific development issues; example here.  If a developer cannot locate a recipe to solve their issue they may submit a recipe request, where they outline the issue they are having in the hopes that someone else in the community may have a code snippet to share.  When a recipe request gets answered, it gets published as a regular recipe, same as the example linked above.

See this page for more information: Adobe Cookbooks – Recipe Request Challenge

 

Stephen Gilson
Flex Doc Team

Flex 4.5 Example Source Code

Below is a link to a ZIP file that contains all the source code and assets for the Flex 4.5 examples that are used in the core documentation. This includes the *.mxml and *.as files, as well as the stylesheets, images, videos, audio files, and other assets that they use. This ZIP file also includes the mobile examples. It does not include the compiled SWF files for these examples, but it should be useful to you if you like to search for and look at source code for the Flex 4.5 examples.

The ZIP file is organized roughly by topic. For example, the Spark DataGrid examples are in the code\dpcontrols\sparkdpcontrols\ directory of the ZIP file. The mobile skinning examples are in code\mobile_skins.

flex45_using_examples_source (30MB)

Optimizing FXG

FXG is a popular declarative XML syntax for defining vector graphics in applications built with Flex. FXG can also be used as an interchange format with other Adobe tools such as Illustrator or Photoshop. Here are some techniques for improving the quality of your FXG graphics and making working with FXG easier.

Composite path versus rounded rectangle
Composite paths create a cleaner look because there are no extra pixels inside the corners. Rounded rectangles, on the other hand, have extra pixels due to anti-aliasing. Rounded rectangles convert to a <Rect> element in FXG, which is preferable because a <Rect> element is easier to manipulate than a compex path.

Move alpha values from the element to the fill or stroke
When exporting FXG files from a graphics editor, the alpha property is sometimes placed on the graphic element tag. If you convert the FXG to MXML, this element uses its own DisplayObject, which can be computationally expensive. To avoid this, move any alpha properties from the element tag down to the stroke or fill. If both the stroke/fill and the element have alpha values, multiply the stroke and fill alpha values by the element’s alpha value. For example, if the stroke and element alpha values are both .5, then remove the element’s alpha property and set the stroke’s alpha to .25 (.5 x .5).

Round alpha values to 2 decimal places
Exported FXG files sometimes use percentage values for alpha values. The visual difference between an alpha value with two decimal places and a rounded alpha value is negligible. To make your code more readable, round off alpha values to 2 decimal places. For example, round an alpha value of 0.05882352941176471 to 0.06.

Remove blendMode=”normal”
By default on graphic elements, the blendMode is “auto”. When the blendMode property is “auto”, Flash Player correctly determines whether the element needs to use the “layer” blendMode based on the alpha value.

Identifying elements of an FXG file
Sometimes it can be hard to look at FXG tags and determine what that element looks like. An easy way to do this is to copy your FXG into a <s:Group> tag in an MXML application. Then, change the x values of each element so that they no longer overlap. For example, if your skin is 45 pixels wide and is comprised of three <Rect> elements, increase the x value of the second <Rect> by 50 and the third <Rect> by 100. When you compile and run the application, you can see each layer spread separately.
An alternative is to toggle the visible property of different elements so that you can isolate a particular element.

Reduce anti-aliasing due to stage quality
AIR applications are currently limited to using StageQuality.MEDIUM. When designing skins using FXG and/or programmatic graphics, watch for anti-aliasing artifacts in rounded corners.

To create the appearance of a rounded rectangle at a 1px stroke in Fireworks:

  1. Draw a filled rounded rectangle.
  2. Copy the rectangle, position it 1px down and to the left of the original rectangle and reduce its width and height by 2px.
  3. Select both rectangles, right click and choose Combine Path > Punch.

Use 45 degree angles
Try to keep all angles at 45 degrees. This helps to reduce the visual artifacts from anti-aliasing.

For more information
For more information on using FXG in your Flex applications, see Using FXG.