• Refresh right-pane only on selection, instead of entire page. This feature improves page-load performance by implementing a right-pane only refresh on selection. This feature improves page-load times in the range of 25-50% (not available in all versions of IE).

• Improved linking to Adobe User Guides. Reorganized the See Also sections into three areas – More Examples, Learn More, and Related API Elements. This reorganization makes it easier to find examples and usage information for a class or class element. For example, see the ViewNavigator class.

• The Show Packages and Classes option is now the default to address a frequent customer request.

• Fixes for issues associated with localization and translation.

Flex36CodeExamples.zip (8.9MB)

As with the 4.5 examples, 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 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 3.x examples.

The ZIP file is organized into 4 main groups:

• devapps: Core examples including the MX component set and containers, effects, validators, and item renderers.
• buildapps: Examples that focus on topics such as logging, deploying, and optimizing apps.
• createcomps: Examples that focus on custom component development.
• datavis: Data visualization examples including the charting examples as well as the OLAPDataGrid and AdvancedDataGrid components.

NOTE: If you found this blog post but are actually looking for the Flex 4.5 examples, you can get them here:
flex45_using_examples_source (30MB)

-Matthew J. Horn
Flex docs

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

For more detail, see Erick Vera’s post on Tumblr.

-Randy

PS: We have a lot of great ActionScript usage documentation but Page View reports indicate that it is an underutilized resource. So this is just a heads-up that I’ll be blogging about ActionScript content in the coming weeks.

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

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

Observant readers will have noticed that over the last few years, we at Adobe have been working to identify and link to content that you, the community, create. Whether it’s an article, a video, a code example… whatever, we want to integrate with great community content. And I think this is a great thing for everyone:

• Viewers – From our pages on help.adobe.com, readers have easy access to useful, hand-picked content.
• You/Bloggers – Links from our pages on adobe.com boost your site’s page rank, making it even more likely that searchers will find your content in the future.
• Us/Adobe – Scanning the community for content helps us learn what’s important for customers and identify who’s who in the community.

I don’t know whether or not you’ve noticed, but lately we’ve given even more visibility to your links, moving them to the top of the page, sometimes placing the link inline, along with the related discussion. Also, we are applying some visual treatments to highlight these links:

• Byline – This icon indicates a link to customer content. See the Enable persistence in a mobile application page for an example of this.
• Adobe recommends – This treatment includes a blurb and an image (I’ve even contacted some of you for a picture or icon) to help draw attention to the link. See the About Spark layouts and Define views in a mobile application pages for examples of the “Adobe recommends” treatment.

Pages that link to your content

Here is a partial list of the authors and articles we link to:

• Jeffry Houser, Component layout in a Flex 4 application
• Tink, Carousel Layout
• Emily Kim/Trilemetry, Introducing Styling and Skinning
• Peter deHaan, many examples from flexexamples.com
• Brent Arnold (aka iBrent), Troubleshooting Android device connections on Windows
• Numerous articles from Holly Schinsky(aka devgirl), including Flash Builder 4.5 – Mobile Highlights
• Xavi Beumala, Flex 4 Accordion3D layout
• Brian Telintelo, Flex 4.5 Spark TileLayout finally pays off for multi-screen apps
• Joseph Labrecque, Building Mobile Apps with Flex 4.5
• Russ Watson, DropdownList labelDisplay tooltip
• Fabio Biondi, Mobile Flex 4.5 Demonstration
• We also link to articles and videos on adobe.com, including videos by Serge Jespers, and articles by NJ and Evtim Georgiev.

We’re always looking for articles, tutorials, and videos, so if you have something, please let us know by adding a comment to this page with your e-mail and a URL.

Thanks!

-Randy

• Joan Lafferty’s Differences between Flex 3 and Flex 4 — a nice introduction to the new components and containers as well as states and text changes (I would start here)
• Greg LaFrance’s multi-part series Migrating Flex 3 applications to Flex 4 — a very detailed tutorial that walks you through all aspects of migrating the Flex Dashboard sample application
• Mihai Corlan and Alin Achim’s Upgrading Flex 3 applications to Flex 4 SDK technical guide — very detailed description of the new APIs in Flex 4
• Renaun Erikson’s Transitioning an application from Flex 3 to Flex — another excellent tutorial that walks you through all the steps required to update a sample application
• Adam Tuttle’s A Flex 3 developer’s introduction to Flex 4.5 and Flash Builder 4.5 — an overview of Flex 4.5, with an emphasis on mobile application development, from the Flex 3 developer’s perspective
• Andrew Shorten’s Moving existing Flex projects from Flex Builder 3 to Flash Builder 4 — a quick overview of converting Flash Builder projects
• Adobe Flex 4 Features and Migration Guide (PDF) — another very detailed description of API changes between Flex 3 and 4; contains some useful sample code

-Matthew J. Horn
Flex doc team

From Flash Builder to the Amazon App store

Courtesy of: Andrew Trice

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