The recordings of my presentations don’t seem to be available yet on Adobe TV, but here is the content, as promised. I spoke at MAX this year on “Multi Device Best Practices using Flex & AIR for Mobile”, and “Create beautiful, immersive content and applications with HTML5 and CSS3″, and the content from these presentations is below.
Multi Device Best Practices using Flex & AIR for Mobile
In the multi-device best practices session I covered the basics for building a multi-device/multi-form-factor application that conforms to device constraints (phone and tablet), using a single codebase that is able to detect device dimensions and orientation. This was followed by online/offline detection for occasionally-connected applications, and then followed by device-specific layout using CSS media queries and MultiDPIBitmapSource images. The presentation slides are below.
Create beautiful, immersive content and applications with HTML5 and CSS3
In this session, I gave a “crash course” in developing rich content experiences with HTML5 and CSS3. I started with a general overview presentation, followed by diving directly into code. I covered <video>, <audio>, dynamic graphics with <canvas>, <svg>, HTML5 Form elements, CSS3 Web Fonts, Visual Styles (shadows, corners), CSS3 Color spaces (RGBA, HSLA), graidents, transforms, animations, and media queries. In the presentation, I also discussed the necessity of client-side solution accelerator frameowrks (jQuery or other JS framework), in addition to graceful degradation and HTML5 feature detection using Modernizr. The presentation slides are below:
Although there were no official announcements around Flex, Flash & AIR (other than the release of FP11 & AIR3), don’t think that the platform is going away or becoming stale… In fact, it is quite the opposite. The Flash Platform will continue to thrive and innovate, providing outstanding solutions that set the pace for other technologies to follow. In case you missed the session, here is the “Flash Platform Roadmap”, provided by Scott Castle, Adam Lehman, and Raghu Thricovil, Product Managers for Flash Platform tooling:
If that wasn’t enough, did you see the new “Monocle” tool, shown by Deepa Subramaniam? Monocle is the new realtime profiling tool for Flash-based content which will provide additional insight into what’s happening at runtime, and how you can optimize your applications.
Did you also see the latest demos showing the Epic Games & the Unreal engine running INSIDE of the Flash Player?
Yes, this is really the Flash Player. You can read more here.
Here’s a quick tip for detecting device form factor (tablet vs phone) within your Flex mobile applications. First, get the stage dimensions for the screen size in pixels, then divide that by the applicationDPI (screen pixel density). This will give you the approximate size in inches of the device’s screen. I say “approximate” because the pixel densities are rounded to 160, 240, or 320, depending on the device. In my code, I make the assumption that if the landscape width is greater than or equal to 5 inches, then its a tablet. I used view states, but you can also layout components manually.
Check out the code below:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:views="views.*"
resize="view1_resizeHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.events.ResizeEvent;
protected function view1_resizeHandler(event:ResizeEvent):void
{
var _width : Number = Math.max( stage.stageWidth, stage.stageHeight );
var _height : Number = Math.min( stage.stageWidth, stage.stageHeight );
_width = _width / FlexGlobals.topLevelApplication.applicationDPI;
_height = _height / FlexGlobals.topLevelApplication.applicationDPI;
//this will resolve to the physical size in inches...
//if greater than 5 inches, assume its a tablet
if ( _width >= 5 )
currentState = "tablet";
else
currentState = "phone";
}
]]>
</fx:Script>
<s:states>
<s:State name="tablet" />
<s:State name="phone" />
</s:states>
<views:PhoneView includeIn="phone"
width="100%" height="100%" />
<views:TabletView includeIn="tablet"
width="100%" height="100%" />
</s:View>
My recent Developer Deep Dive webinar “Visualizing Complex Enterprise Data in a Tablet World” is now available on the Adobe Enterprise Developers Portal. In this webinar, I walk through the fundamentals of a rich, enterprise-data driven mobile experience, powered by Flex, AIR, LCDS, & LCCS.
Take a look at this short clip to get a feel for what’s covered in this webinar…
Not only were Flash Player 11 & Air 3 announced yesterday, but also the arrival of Flex & Flash Buidler 4.6. Flex & Flash Buidler 4.6 bring forth a new benchmark in performance, as well as a new & enhanced set of tools for developing mobile, desktop, and web applications. Bonus!!! – Flash Builder 4.6 will be a FREE update to all Flash Builder 4.5 customers.
Adobe remains focused on performance and in Flex 4.6 we’ve made considerable improvements. Many key performance optimizations were introduced, giving mobile applications the native feel you expect. Simply repackaging, an existing Flex mobile application with Flex 4.6 can yield up to a 50% performance gain. Creating a new application in Flex 4.6 will deliver near-native performance with the superior customization you expect from Flex.
If that wasn’t reason enough alone, let’s talk about the framework:
SplitViewNavigator – A new top-level application component specifically designed for the tablet experience. With only a few lines of code, manage the layout of multiple views and have them adapt automatically based on device orientation.
CallOutButton – A versatile component that pops over existing content and can contain text, components or even entire views.
SpinnerList – This popular tablet component is an adaption of the existing List component. It not only has a new look, but also gives options like recirculating content and a position based selection model.
DateSpinner – A highly flexible component that is not only locale-aware, but provides multiple out-of-the-box configurations to fit most date/time entry needs.
Text Enhancements – Flex 4.6 solves the problem of cross-device text input. Flex exposes the native text-editing controls on EVERY platform—this enables the developer to customize the keyboard and the user to experience the native UI of common operations like selection, copy/paste and spelling checking.
ToggleSwitch -
This simple and much-requested control is now available in Flex 4.6.
Can you feel the excitement?!?!?! Adobe has just announced the availability of AIR 3 and Flash Player 11 for early October! This release will bring a wave of change to the Internet and development tooling as you know them. From console-quality hardware accelerated 3D, to AIR captive runtime, to native extensions… Adobe tools will enable the next wave of innovation in games, rich media, and multi-device applications. In this release there are a lot of new features to get excited about.
Flash Player 11 and AIR 3 will be publicly available in early October. Flash Builder and Flex will offer support for the new features in an upcoming release before the end of the year. We’ll have a lot of news and new content at MAX, and in the meantime, you can download the Flash Player and AIR betas on Labs, and start checking out some of the amazing content that’s already been built by developers!
Here’s a post that I originally wrote way back in 2006, when Flex 2 was all the rage. No, seriously, Flex 2 was awesome – it is the base of today’s Flex framework, helped to revolutionize applications on the web, and heralded the “RIA” frenzy. The best part is that this post is still very relevant with Flex, AIR & ActionScript for mobile/web/desktop, so I decided to resurrect it from the old blog archive. Enjoy…
I’ve been asked several times, why would you use get/set functions instead of public variables in your flex components and classes? Well, there are some great things you can do with getters and setters that you can’t do with public variables. On the other hand, there are cases where public variables may be an easy choice. When using these functions and/or public variables, the code for the caller will be the same:
mycomponent.myValue = 1;
First, lets look at public variables…
[Bindable]
public var myValue : Number
Public variables are useful when there are no addional actions that need to take place when the value has been changed. If you change the value of “myValue”, the bindings will update and everything will be handled accordingly. The value will change, and anything bound to that value will change. In this case, there is no need to use getter/setter methods, keeping code simple and easy to implement.
Now, on to getters and setters…
[Bindable(event="myValueUpdated")]
public function set myValue (value:Number):void
{
_myValue = value;
dispatchEvent( new FlexEvent( "myValueUpdated" ) );
}
public function get myValue ():Number
{
return _myValue ;
}
private var _myValue : Number;
First I’ll explain the [Bindable(event="myValueUpdated")] statement: This indicates that the data binding to the getter’s value should be updated when the event of type “myValueUpdated” is dispatched.
You’ll notice that when the value is set, this event is dispatched, which would notify and components that are bound to this value. Using a binding event isn’t required for all getters and setters, however this approach can allow you to invoke binding events on the “getter” even if you don’t access the “setter” method.
Now, the rest… The code that I showed above is consumed in exactly the same way as a public property, but requires more code. The benefits of getter and setter functions are that they enable sequential code execution when the value is changed, and also enable inheritance in getter/setter methods.
This means that you can create your components so that specific functions are executed any time that the value is accessed using get and/or set functions.
Here’s an example:
[Bindable(event="myValueUpdated")]
public function set myValue (value:Number):void
{
_myValue = value;
numSets ++;
myFunction();
dispatchEvent( new FlexEvent( "myValueUpdated" ) );
}
public function get myValue ():Number
{
numGets ++;
myOtherFunction();
return _myValue ;
}
private var _myValue : Number;
private var numGets : Number = 0;
private var numSets : Number = 0;
In this example, every time the value is set, the numSets Number is incremented, and the myFunction() function is executed. Likewise, every time the value is accessed using the “get” method, the numGets Number is incremented, and the myOtherFunction() function is executed. There is no limit to what kind of code you can execute here. You can have it dispatch custom events, change styles, create new components, etc… This turns out to be very handy when creating custom Flex components.
As I mentioned earlier, getter/setter accessors also enable inheritance on “properties” of an object. This means that you can change the behavior of a getter/setter in descendant classes, while usage remains the same. A great example of this are the “get data” and “set data” accessor methods used throughout the Flex framework (and part of the IDataRenderer interface). You can override “get data” or “set data” methods to modify behaviors and/or return values, without changing how those methods are used.
In this series, I’d like to highlight Adobe’s mobile offerings, and the variety of platforms that can be supported from a single codebase. I wrote a simple URL Monitoring utility application that will check the status of various HTTP endpoints using the AIR URLMonitor class. I now have that application running on 3 OS platforms, in 4 ecosystems (5th coming soon), supporting phone and tablet interfaces, and all with a single codebase
Many Apps, One Platform
Here’s the official app description that I’ve been using:
URL Monitor is a simple diagnostic application that will allow you to quickly and easily monitor the status of various URL endpoints. Simply enter a URL into the text box and add it to the list. A polling HTTP request will be made every 10 seconds to determine the availability of a given endpoint. HTTP codes 200, 202, 204, 205 and 206 will be identified as a success with a green check. All other HTTP codes will indicate a problem as a red ‘X’. To remove a listing, simply perform a horizontal swipe on a given row to reveal a delete button. All monitoring is paused when the application is in the background.
This application is currently available in the following ecosystems:
You may be wondering, “How did you get a single codebase into so many markets?”… Well, you’re in luck. Here’s detailed instructions how to get from Flash Builder into each Ecosystem:
Flex/AIR on Devices: From Flash Builder to BlackBerry App World (coming soon)
What’s really interesting about this is the activity that I have seen on each market. The application is free on each market, and became available over the last few weeks. I have done absolutely no promotion of it… This is the first announcement that I have made.
As of 9/15/2011, the application has been live in Apple’s store for 3 weeks, and has had 554 downloads; it has been live in the Google Android Market for 3 weeks, and has had 20 installes (only 11 active); it has been in the Amazon market for 2 weeks, with 0 installs (yes, that is a zero); and surprisingly, it has been on the Nook store since Sept 1, and has had 816 downloads! Now, that was unexpected.
With the default settings, the Flash Builder (and the Android SDK) will not be able to detect you nook device as an Android tablet. In order to be able to deploy via USB, you must first register as a nook developer at https://nookdeveloper.barnesandnoble.com/, and also be sure to download the Android SDK from http://developer.android.com/sdk/index.html.
Once you are a registered developer, you will have access to tools that enable you to put your apps onto a nook device. First, you must download and install the Nook SDK add-on to the Android SDK.
Nook SDK Setup
This will download and install the Nook SDK. Once installed, the installation process will need to restart ADB. Click “YES” and allow it to proceed through the restart process.
Nook SDK Setup - Complete
Once you are a registered developer, you will have tools accessible to enable “Developer Mode” on your device, which allows you to provision the device for development. Go to the “Developer Mode” section of the nook developer portal and enter the device names and serial numbers for your dev devices. From here you will be able to download a provisioning file.
Nook Developer Provisioning
The provisioning file will allow you to deploy applications directly to the nook via USB. Attach the Nook Color device to your computer via a USB connection. The Nook Color device will show up as a device in Finder. Copy the provision.cmd file that you downloaded from the “Developer Mode” provisioning portal directly into the root of the Nook Color device.
Nook Provisioning File
Next, eject/unmount the Nook Color device. Now, use the tools within the Android SDK to restart ADB (Android Debug Bridge):
./adb kill-server
./adb start-server
Once ADB has restarted, use the “adb devices” command to list all connected Android devices (The Nook Color device must still be connect via USB, even though it has been unmounted).
./adb devices
You should see your device listed in the output:
ADB - View Device
Now that you are able to view your Nook Color device using ADB, Flash Builder will also be able to deploy to it. You will be able to Run/Debug directly from Flash Builder and launch applications on the Nook Color device. This follows the normal Flash Builder debug process.
However, there is one trick… you may notice that if you go to the “apps” menu on the Nook color, you won’t see any of your applications deployed via USB. Don’t fret… they actually are on your device. There is just a trick to view them. From the “apps” menu, click on the “archived” button. A popup will be displayed here. Now, press and hold the “volume up” button. When the speaker appears on the screen (continue holding the volume button), tap on the speaker. When you tap on the speaker, the “extras” screen is displayed. (You can release the volume button now.) The “extras” screen will list all of your manually installed applications, and you will be able to re-launch your installed apps.
From here, you can generate your release-build APK as you normally would from Flash Builder. Once you have your APK generated and tested, you’re ready to prepare it for the Nook Store. Sign into the Nook Developer Portal, and go to the “Applications” section. Click on the “Add New Application” button.
First, you will need to enter the primary metadata for the application (name, type, price, version, etc…).
Nook Portal - New Application
Once you have completed the basic information, click on “Save and Continue”, and you will be redirected to the “Description & EULA” tab. Enter an application description and an optional license agreement (I left this blank b/c I do not have any special terms for my app).
Nook Portal - App Description
When ready, click “Save and Continue” to enter the “Keywords and Category” tab. On this screen, enter descriptive keywords and categories to help categorize your application within the Nook store.
Nook Portal - Keywords & Category
When you have your categorical information all set, click “Save and Continue” to proceed to the “Icons & Screenshots” screen. Here you will need to set the application icon and add application screenshots.
Nook Portal - Media & Images
Now this is where the application approval process is a little different from other app stores. You need to click “Send for Application Approval”, and the application metadata must be approved before you can upload a binary APK file.
Once the application metadata is approved (this took about a week for my app), you will be able to upload the APK binary.
Nook Portal - Upload Binary
After you have uploaded and submitted the binary APK file, the binary file will need to be approved before it is actually available within the Nook store. The binary approval took another week+, so the overall approval process took over 2 weeks. Once approved, your application will appear in the nook store, and will be ready for public consumption!
First, navigate to https://developer.amazon.com/ and click on the “Amazon Appstore for Android” link. Once there, you will need to walk through the full registration process to create your account.
Amazon Appstore Landing Page
Once you click on the “Get Started” button, you will be guided through the Appstore registration process. Once that is complete, you will be directed to the Appstore developer portal home page. From here, just click on “Add a New App”.
Amazon Appstore Home
Next, you will being the App upload wizard. First, you will need to enter primary metadata for the application, including a title, form factor, supported languages, and contact information. Once you have entered this information, click on the “Save” button.
Amazon Appstore App Metadata
Next, you need to enter merchandising information. This includes the app category, keywords, a description, price, and release/availability dates. Once you have completed all of your merchandising information, click on the “Save” button to proceed.
Amazon Appstore App Merchandising Info
Next, you will have to specify content rating information. Just fill out the information about your content, and click on the “Save” button to proceed. I didn’t run into any content rating issues in the Amazon Appstore, like I did with the iOS App Store.
Amazon Appstore App Content Ratings
Next, upload multimedia that will be associated with the application. This includes application icons (note: they must match, event though this screenshot doesn’t show it – I was rejected b/c of this), and actual screenshots of the application.
Amazon Appstore App Multimedia
Scroll down to see more of the “Multimedia Content” form. You will also be able to enter promotional images and promotional video assets for your application. Once you have uploaded all necessary multimedia, click the “Done” button.
Amazon Appstore App Promotional Media
Now you are ready to upload your APK Binary. Follow the instructions for uploading an APK file. Once it is uploaded you will see information about the file that was uploaded.
Amazon Appstore App Binary
Finally, click on the “Submit App” button to submit your application for approval. There is an approval process for the Amazon Appstore similar to Apple’s, and my application was live in less than a week from submission.
Recent Comments