Today, I released little private project “PlayBook Device Simulation” that allows to use PlayBook specific API when develop with the AIR Debug Launcher (ADL). The solution consists of two parts: an ActionScript3 Library (PlayBook Device Simulation) and an AIR application (PlayBook Device Simulator).
I ported some of the classes of the QNX AIR Library, so that the classes have some functions and variables (1:1). Currently supported classes and features: AudioManager, Device, MediaServiceConnection and QNXApplication. My solutions supports features, which can’t be test with the VMware Image of the PlayBook Device Simulator, like Power Management (Battery). Another reason to test the solution is that won’t get any error messages (VerifyError: Error #1014: Class qnx.pps::PPSChannel could not be found) when using any of the supported classes.
Technically, I’m using the ServerSocket API of Adobe AIR to connect the Mobile AIR Application with the PlayBook Device Simulator. This allows a two communication between the Mobile AIR Application and the simulator.
The Playbook SDK of Blackberry provides additional libraries to use device capabilities which aren’t available in the standard Flex Hero SDK. These Blackberry specific libraries provide access to the controls of the device and contain the QNX specific UI Controls, MediaPlayer/MediaServiceConnection and Pop Dialogs. Blackberry (or QNX) realized the integration using the messaging system of QNX, called PPS Service (QNX Persistent Publish/Subscribe). You can find additional information about PPS here.
AudioManager (qnx.system.AudioManager)
Provides access to the Audio Controls of the Playbook.
Allows the communication between application and the music controller in the upper controlbar of the Playbook.
Device (qnx.system.Device)
Device specific information and allow the application to monitor the battery state of the device.
QNXApplication (qnx.system.QNXApplication)
Allow the application to monitor if the device runs out memory or if the user makes a Swipe Down Interaction.
MediaPlayer (qnx.media.MediaPlayer)
Build-in MediaPlayer of the BlackBerry Playbook
Dialogs (qnx.dialog.*)
The dialogs are native QNX OS dialogs and using PPS to communicate with your AIR application.
TextInput (qnx.ui.text.TextInput)
Provides the option to define which Keyboard layout will used by defining the type using the parameter “keyboardType”. The image below shows all the available keyboard types.
ADL throws an error when using Playbook specific stuff
If your application is using any of these class above and you try to run your application use ADL (AIR Debug Launcher), the ADL will throw an error (VerifyError: Error #1014: Class qnx.pps::PPSChannel could not be found.) that compiler can’t find the PPS specific class qnx.pps.PPS or qnx.pps.PPSChannel. This error will thrown because these classes are only available on the device or emulator.
I’m personally prefer to develop using the ADL and only do my final tests using the device or emulator. So I found two solutions to avoid that ADL is throwing the error described above.
1.Solution: Monkey Patch the class PPSChannel
This solution works for the QNX TextInput. Monkey Patch describes the overlaying the original class by adding a modified class with the same name and package into your project.
Open the Library Path in Project Properties
(File -> Properties -> Flex Build Path -> Library Path)
Selected the qnx-air.swc and change the Link Type from External to Merge into Code
Create a package called qnx.pps in your project and add a new class PPSChannel into the created package. Use a simple file (File -> New -> File) , otherwhise Flash Builder 4 will not create the class when using ActionScript class.
The class PPSChannel should look like the code below
package qnx.pps
{
public class PPSChannel
{
public function PPSChannel(){
}
}
}
Recreate the project!
Run the application using ADL
You can download a Flex Project with this solution here.
PS: Don’t forget to remove the class and switch back the Link Type to External when running the application on the emulator or device!
2.Solution: Conditional Compilation
This solutions works perfect when using any of the device integration like AudioManager, MediaServiceConnection, Device or QNXApplication. Because these things can’t be used without running the application on the device or emulator, it makes sense to them off while developing with ADL.
Conditional Compilation allows to include or exclude code based on constants added to the compiler arguments in Flash Builder or using MXMLC.
The constants of the conditional compilation should look like line below.
-define+=CONFIG::device,true
In the source code of the application, you have to add the constant above the functions and attributes of the class which should be included or excludes by compilation.
CONFIG::device
public var audioManager:AudioManager;
CONFIG::device
public function init():void
{
CONFIG::device
{
try{
audioManager = AudioManager.audioManager;
audioManager.addEventListener(AudioManagerEvent.OUTPUT_LEVEL_CHANGED, handleOutputLevelChanged);
audioManager.addEventListener(AudioManagerEvent.OUTPUT_MUTE_CHANGED, handleOutputMuteChanged);
}
catch(error:Error)
{}
}
}
Set the parameter to “false” running the application with ADL or to “true” using the emulator or device.
The second solution helps also if you develop a multi device/screen application and you need a deep integration into the device without creating an extra project for each platform. The developer has only to change the parameter before exporting/building for a specific device or screen.
Stay tuned! At the moment, I’m working on a Flex library and AIR client which allow to trigger all the Playbook device events.
I’m working on a Playbook application and wanted to recreate the VolumeSlider provided by the QNX ActionScript Library with Flex.
When I tried to convert my Illustrator into Skin for a HSlider in Adobe Flash Catalyst, noticed that the Spark Slider has no Track Highlight. The old MX Slider contains an optional Track Highlight, which can be switched on/off with the parameter “showTrackHighlight”. It was also possible to change color and skin of the Track Highlight on the MX Slider
I extended the original Spark Slider to add a Track Highlight using the Spark Skinning Architecture. At the moment ,I’m working to support the toggling of the visiblity based on the parameter “showTrackHighlight” and the possiblity to change the color of the highlight.
The source code of the sliders is available on GitHub.
With a little bit of modification on the skins, my slider could look like the screenshot below.
Update: 27.04.2011
The latest version supports the toggling of the Track Highlight visiblity using the property showTrackHighlight and changing the Track Highlight color using the property accentColor. The default color of the Track Highlight using the themeColor. Everything works like the old MX Slider. Also I fixed the problem with the clicking the Track Highlight.
When I joined the private prerelease of Adobe for the current the Open Source Media Framework last year, the code name of the project was Strobe and was changed after a while by the Adobe Marketing into the current name. My confusion was perfect as the Strobe Media Playback entered the stage and reused the code name …… Now Adobe provides also the Flash Media Playback.
So I decided to blog about Adobe’s current Video Player projects, because there are at the moment different projects for Video and Media Player provided by Adobe. This post should clearify the difference between all the projects.
Open Source Media Framework (OSMF)
The Open Source Media Framework is open source project developed by Adobe and their partners like Akamai. The frameworks should easy the development of custom Flash based Media or Video Players and should solve general problems and topic of the development of Video Players. The main goal of the project is to provide the code base for a players so that developers have only to focus on the integration with the site and user experience instead of write the basic logic of a player from scratch.
The framework provides the logic to play videos and audio (progressive download, DVR, RTMP or HTTP streaming) or display other media objects like SWF and images, the creation of playlists (sequenctial or parallel) and handles the DRM based on Flash Access 2.0.
Additionally, the Open Source Media Framework can be extended by using one or more of the existing plugins for Advertising, Analytics and Qualtity Service, Content Delivery and writing your own plugin to integrate the video player with backend.
The source code of OSMF also contains plugins for VAST 1 and VAST2 standard of the IAB (Interactive Advertising Bureau), which will be used by almost all major advertising companies.
Adobe hosts a special Market Place for OSMF, which provides a couple of plugins for OSMF.
The solution targets developers who want to write their own video players based on ActionScript or Flex and provides the basic logic to play videos.
Strobe Media Playback (Strobe)
The Strobe Media Playback is open source Media Player on top of the Open Source Media Framework. It’s sample implementation of an OSMF based video player and is available as compiled SWF or you can download source code and then start modifying the video player based on your needs. The Strobe Media Playback is an only ActionScript an can directly loaded by the Flash Builder.
The UI of the Strobe Media Playback provide the basic functions to start/pause videos, toggle full screen, change volume and change position of video playback.
Adobe is working also on a HTML5 version of the Strobe Media Playback, which can used as fallback solution for iOS devices or devices without Flash Player for example.
The solution targets persons/developers who need a basic video player and maybe change the visual appearance of the player to their custom chrome of their website. The Strobe Media Playback can also be used as an starting point for developement of your own video player be extending the Strobe with your logic.
Flash Media Playback
The Flash Media Playback is a hosted version of the Strobe Media Playback which will provided by Adobe . The Media Playback will be integrated into your website by copying and pasting the an Embed Code into your site. Adobe provides a configurator, which allows the creation of the Embed Code. This solution targets persons or organisation, who can’t/won’t develop or host their own video player, but need a video player to publish their video content.
At the moment, I’m working on project where we are using SOAP Webservices to connect the SAP Backend with the Flex Frontend. Before I joined the project, they used a e4x to parse the SOAP Webservice responses. I switched the implementation to use as reponse type object instead of E4X or XML. This switch brings advantages and disadvantages.
Out of the box the Flex soap decoder can handle all objects which are of any type defined be the XSD Schema( string, date, int, boolean…). If your webservice contains ComplexType Objects, you have to define a mapping between the XML structure coming back from the webservice and corresponding ActionScript3 Object. This can be done by using the SchemaTypeRegistry, where you have register your custom classes and collections.
I recommand to add this stuff to SchemaTypeRegistry after the WSDL of webservice was loaded.
Sometimes registration solves not all the decoding problems, that can happen if the WSDL contains Message Parts. In this case, the top level/root object of webservice response will not decoded properly and returns an untype object. To solve this issue, you have to change some parameters of the interface ISOAPDecoder, which is implemented by the decoder of the webservice operation.
var searchResponseMessage:WSDLMessage=new WSDLMessage("itemSearchResponse");
searchResponseMessage.addPart(new WSDLMessagePart(new QName("http://www.example.com", "itemSearchResponse"), null, new QName("http://www.example.com", "ItemSearchResponse")));
searchResponseMessage.encoding=new WSDLEncoding();
searchResponseMessage.encoding.namespaceURI="http://www.example.com";
searchResponseMessage.encoding.useStyle="literal";
var searchOperation:Operation=myWebservice.getOperation("FindItem") as Operation;
searchOperation.decoder.wsdlOperation.outputMessage=searchResponseMessage;
searchOperation.decoder.resultFormat="object";
searchOperation.decoder.headerFormat="object";
searchOperation.decoder.multiplePartsFormat="object";
searchOperation.decoder.forcePartArrays=false;
This can changes can only applied when the WSDL was successful loaded, otherwhise the step will fail with a NullPointerException.
To get all the necessary information to apply this changes is a little bit tricky if you want to do it manually. I’m using the “Import Web Service (WSDL)” function of Flex Builder 3 to get the information and simply copy and paste them into my project. If your webservice has the name “SearchService” then the importer generates an ActionScript File with the name “BaseSearchService”. You can find all information for your changes in that file.
An other benefit of the importer is the generation of the corresponding ActionScript Class, which speeds up the development of the Flex application when you’re using webservice. Replacing of an complete webservice can be done in a couple minutes.
Now, you asking yourself why I’m not directly using the generated service and classes of the importer. This is a good question. I’m not really liking the code of the generated classes, it creates a wrapper based on an AbstractedWebservice and it isn’t as easy to apply any changes on it. Also if you are working with MVC frameworks like Cairngorm or PureMVC, the wrapper isn’t a valid solution. These frameworks are using Responders and AsyncTokens to handle server responses, but the wrappers are only providing EventListeners and that fits not really together.
The disadvantage of using SchemaType mapping to decode your webservice calls is speed of the decoding. The decoding via SchemaType can take multiple seconds whereas the parsing of the webservice response via E4X or XML needs only a few milliseconds.
James Ward from Adobe provides a small application, which visualize the speed difference between E4X and SchemaType.
My recommandation is to use SchemaType mapping in the early stage of the project or in projects where the webservice will be changed a lot during the development. It’s easier to update the SchemaType mapping and you can’t forgot to map something like you will do if you create your custom mapping with E4X, trust me. 😉
Development Speed vs. Application Speed
Now, you only have decide if you want to exchange the parsing of your webservice before releasing your application. The parsing of the webservice response with a custom mapping based on EX4 is lot faster than SchemaType and users hate nothing more than applications that are slow.
Adobe released new version of Tour de LiveCycle for ES2. It’s a seperate installation and isn’t replacing the Tour de LiveCycle. That means you have to install the Tour de LiveCycle for ES2 to get ES2 specific content.
The next version of Adobe LiveCycle will shipped soon and Adobe presented some of the new feature and applications at Adobe MAX in Los Angeles. Adobe presented a LiveCycle Workspace Mobile, a mobile version of Workspace for the Apple iPhone, BlackBerry RIM and Windows Mobile. The iPhone application of Adobe Workspace is now available at the Apple iTunes. The mobile clients will only work together with the upcoming version of LiveCycle ES.
LiveCycle LaunchPad is an other new client, which will be available with LiveCycle ES 2. LaunchPad is a desktop application based on Adobe AIR and enables the user to create PDF or secure documents via Drag and Drop. Developers can easly extend LauchPad with their own processes.
An other new feature of LiveCycle ES 2 is LiveCycle Mosaic. LiveCycle Mosaic is a framework, which let you build rich internet applications based on existing entreprise applications. The information of a existing application will presented as a “Tile” in Mosiac and the different tiles can interaction to exchange information and trigger actions. You can use Flex and HTML to build the tiles.
Adobe is working on a version of the Flex framework for mobile application, Codemane Slider. When I watched the video about the Slider Preview at Max presentation by Ely Greenfield (Adobe), I was totally impressed about the ideas behind Slider. I like the idea how to solve the to integrate into multiple plattforms and Cross Platform developement based on Conditions and Style/Skins. If you want to now what I’m talking about, check the video below. Adobe provides also a white paper at Adobe Labs.
Comments Off on Flex Framework for mobile applications
Adobe announced Flash applications for the iPhone at the keynote of Adobe Max 2009. With the upcoming version of Flash Professional (CS5), Adobe provides the possiblity to export Flash applications as native iPhone applications. Flash CS5 converts the ActionScript3 projects and creates ipa files, which can submitted to Apple iPhone AppStore. Six Flash based samples apps are already available at the AppStore, more details can found here. So, this solution let you build iPhone application with your existing skills and tool set, no Xcode or Objective-C needed.
Furthermore, their is no Flash Plugin for the Browser Safari available. Since yesterday, Adobe had also set up a new website, when you try to install Flash player on the iPhone. Adobe get it to the point why it’s not available 😉 Check out the link.
This is the MystHackers video from the Adobe Max Keynote with Kevin Lynch (CTO) and Johnny Loiacono (SVP Creative Suite Unit) test possiblities how to get Flash on the iPhone.
An other interesting fact about this soultion is that you need no Mac computer anymore to build iPhone applicatons.
More information about Flash apps for iPhone can founded on:
