Posts in Category "Flex 4.5"

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

How we use your content in Flex and Flash Builder documentation

This post is intended for those of you who create articles, tutorials, and videos related to Flex and Flash Builder (although it will be useful to everyone). Apologies in advance for the bland title, but try as I might, I couldn’t think of a snappy one…


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:

Pages that link to your content

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

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

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

What’s not to like?

About 8 months ago, we added a pair of radio buttons to all the Flex 4.5 doc and ActionScript language reference pages that asks you is the content was helpful:

What we were hoping for was a large amount of data, good or bad, that would tell us where weaknesses and strengths exist in the documentation. This would give us much more insight into the efficacy of individual pages, or into groups of pages. It would also help us decide where to put our resources when updating the documentation. Unfortunately, the number of ratings has been extremely low. Like lower than many banner ad click through rates. Like lower than my Angry Birds score kind-of-low.

So, why aren’t you rating the pages?

Are you too busy as a developer to rate the page?
Maybe you’ve got a lot on your mind when you end up at a Flex doc page, and don’t want to distract from your thought process, especially if you’re copying/pasting a code example or trying to grok something.

Are you worried about privacy?
There is absolutely no way for us to track your rating or any comments you add with that rating. It is completely anonymous.

Is the location of the rating “widget” inconvenient?
The widget currently appears at the top of the page. But Flex doc pages tend to be long and dense with material, so maybe you see it and then just forget about it. We’ve thought about moving the widget to the bottom of the page, or adding it multiple times to the pages, but we don’t want to get in your way, either.

Do you think we ignore this data?
We don’t. We look at it very closely, and even read the comments.

We’d love to get your feedback (here, and, of course, on the help pages)!

-Matthew J. Horn
Flex doc team

Add Chrome Search Extension for the ActionScript® 3.0 API Reference (ASDoc)

Use the ActionScript® 3.0 Reference as the API reference for many Adobe products, including Flash Player, AIR, Flex, and LiveCycle. To improve searching of the reference in Chrome, install the “ActionScript 3.0 Search” extension:

ActionScript 3.0 Search

 

Stephen Gilson
Flex Doc Team

New Features Added to Adobe ActionScript API Reference (ASDoc)

Use the ActionScript® 3.0 Reference for the Adobe® Flash® Platform as the API reference for many Adobe products, including Flash Player, AIR, and Flex. The new release of the ActionScript Reference (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/) contains several new features:

  • Support for a quick search added to the Packages and Classes lists.The quick search lets you filter the content of the Packages and Classes lists as you type. This feature is not supported on IE 7 and IE 8.
  • When displaying all classes in the Classes list, selecting a class name in the list continues to display all classes.In the previous release, selecting a class name in the Classes list while displaying all classes changed the Classes list to display only the classes in the package of the selected class.
  • Added a Home link to the top of all pages.The Home link lets you navigate back to the index.html page from anywhere in the reference.
  • Fixes for issues associated with localization and translation.

 

Stephen Gilson
Flex Doc Team

Tips for creating mobile applications

Adobe evangelist Mike Jones posted some advice for creating mobile applications with the mobile workflow in Flash Builder 4.5. These are a great collection of tips that come from someone who has hands-on experience developing real-world applications.

My 10 Tips When Developing For Multiple Devices

I suggest you check them out before you start your next project!

-Matthew J. Horn
Flex doc team

Handle hardware keyboard events in a Flex mobile application

In a mobile application built in Flex, you can detect when the user presses a hardware key on a mobile device. For example, on an Android device you can detect when the user presses the Home button, Back button, or Menu button.

To detect when the user presses a hardware key, create an event handlers for the KEY_UP or KEY_DOWN event. Typically, you attach the event handlers to the application object as defined by the Application, ViewNavigatorApplication, or TabbedViewNavigatorApplication containers.

The Stage object defines the drawing area of a Flex application. Each application has one Stage object. Therefore, an application container is actually a child container of the Stage object.

The Stage.focus property specifies the component that currently has keyboard focus, or contains null if no component has focus. The component with keyboard focus is the one that receives event notification when the user interacts with the keyboard. Therefore, if Stage.focus is set to the application object, the application object’s event handlers are invoked.

On a mobile device, your application can be interrupted by another application. For example, the mobile device can receive a phone call while your application is running, or the user can switch to a different application.  When the user switches back to your application, the Stage.focus property is set to null. Therefore, event handlers assigned to the application object do not respond to the keyboard.

Because the Stage.focus property can be null on a mobile application, listen for keyboard events on the Stage object itself to guarantee that your application recognizes the event. The following example assigns keyboard event handlers to the Stage object:

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.View1"
    applicationComplete="appCompleteHandler(event);">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            // Add the hardware key event handlers to the stage.
            protected function appCompleteHandler(event:FlexEvent):void {
                stage.addEventListener("keyDown", handleButtons, false,1);
                stage.addEventListener("keyUp", handleButtons, false, 1);
            }

            // Event handler to handle hardware keyboard keys.
            protected function handleButtons(event:KeyboardEvent):void
            {
                if (event.keyCode == Keyboard.HOME) {
                    // Handle Home button.
                }
                else if (event.keyCode == Keyboard.BACK) {
                    // Hanlde back button.
                }
            }
        ]]>
    </fx:Script>
</s:ViewNavigatorApplication>

 

Stephen Gilson
Flex Doc Team

A great resource for Flex, Flash Builder, and Flash Platform content

Hi all,
Last Summer, Brian Rinaldi joined our group as Web Community Manager for the Flash Platform. This covers a lot of ground, but Brian has done a great job, and one of his biggest contributions is a weekly list of blog posts and other news related to the Flash Platform. So if you haven’t already, visit http://www.remotesynthesis.com/ and read through his “Cool stuff…” posts.

He posts pretty much every week, so I recommend you bookmark this URL and visit it often!
Randy

Getting Started Resources for Flex 4.5, Flash Builder 4.5, and Flex Mobile

The Flex 4.5 release introduced many new features, including support for mobile devices and tablets. The following links will help you get started with the Flex 4.5 release:

And don’t forget about the Flex documentation at http://www.adobe.com/devnet/flex/documentation.html. In particular, there is new content that focuses on mobile app development with Flex

 

Stephen Gilson
Flex Doc Team