Archive for the ‘Flex’ Category

Open Source Media Framework vs. Strobe Media Playback vs. Flash Media Playback

Thursday, November 18th, 2010

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.

Basically, the Strobe Media Playback is an replacement of the old FLVPlayback of Flash, which provides the latest features of the Flash Media Server Product Family.

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.

Tips and Tricks to use SOAP Webservice with Flex

Thursday, August 12th, 2010

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.

SchemaTypeRegistry.getInstance().registerClass(new QName("http://www.example.com","MyClass"),com.example.MyClass);
SchemaTypeRegistry.getInstance().registerCollectionClass(new QName("http://www.example.com","MyCollection"),com.example.MyCollection);

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.

LiveCycle Mosaic, Livecycle LaunchPad and LiveCycle Workspace Mobile for LiveCycle ES 2

Thursday, October 8th, 2009

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.

More information about all the new stuff of LiveCycle can found the Adobe website or watch the Adobe MAX keynote.

Flex Framework for mobile applications

Thursday, October 8th, 2009

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.

New beta versions of Flash Builder 4, Flex SDK 4 and Flash Catalyst

Tuesday, October 6th, 2009

Adobe released at Max 2009 the second beta versions of Flash Builder and Flash Catalyst. The beta versions provides a huge set of new features.

Here some of the new top features of Flash Builder 4 Beta 2 and Flash Catalyst Beta 2:

Flash Builder 4:

  • Improved Flash Catalyst to Flash Builder workflow
  • LiveCycle Data Service ES 2 and Fiber integration
  • Advanced data management features (CreateReadUpdateDelete)
  • SWFObject as Flash Player detection toolkit
  • Project convertion (Flex2AIR & AIR2Flex)

Flash Catalyst:

  • More Spark components: Checkbox, Radio Button, Toggle Button, Horizontal Slider, and Vertical Slider
  • Better text support
  • Video support
  • Optimize graphics workflow
  • Filters and Motion Easing
  • AIR Export

Additonal Information about the Flash Builder 4, Flex 4 and Flash Catalyst:

Flash Builder 4 at Adobe Labs
Updated Articles for Flex 4 beta 2 on Adobe DevNet
Flash Catalyst at Adobe Labs

Spring BlazeDS Integration 1.0 is available

Thursday, June 11th, 2009

The final version of Spring BlazeDS Integration 1.0 is available now. Since RC2, SpringSource enhanced the documentation and made some improvements on the messaging adapter. More information about the final version are available on the blog of SpringSource and in the offical annoucement.

You can download the BlazeDS Integration here and the documentation can found here.

Actionscript3 based Google Analytics Solution for Flash and Flex

Thursday, June 11th, 2009

If you wanted to track a Flash or Flex based application with  Google Analytics, you had to use the ExternalInterface to call the function of the JavaScript library. While search for a solution which isn’t using JavaScript, I found out that Google now provides some ActionScript3 libraries for Google Analytics.

You can find the documentation here and the libraries here.

The nice thing about the library is that you have the choice whether you want to use a ActionScript-Only solution or combine JavaScript and ActionScript. The only difference between both solutions is one parameter when calling of constructor of the tracker.

Using annotated RemoteServices with the Spring BlazeDS Integration

Saturday, May 16th, 2009

On Wednesday, I found the time to test the annotation based configuration of the Spring BlazeDS Integration. Because it isn’t as easy as I thought, I wrote this little guide with all necessary configurations. You can download the sample project here.

First you have to create a new Flex Project in Flex Builder, select as Application server type “J2EE” and use LiveCycle Data Service as Remoting. Click the button “Next”.

annotated_spring_blazeds_step1

Now you have to select the BlazeDS WAR file and click the button “Finish”.

annotated_spring_blazeds_step2

Under Project > Properties > Flex Compiler you have add -services and behind the path to the services-config.xml (Screenhot), like in all other BlazeDS oder LiveCycle DS Applications. During the compile process the compiler creates an Actionscript class with the information of this file. The services-config.xml can found under the WEB-INF/flex. This file contains the definition of the MessageBroker and references to the messaging-config.xml and the remoting-config.xml. In the remoting-config.xml, you can find the definitions of the RemoteObjects and in the messaging-config.xml all messaging configurations.

services-config-xml

You can delete these two files because the RemoteObjects and Messaging will now defined in your Spring application. You must also delete the references to these files in the services-config.xml. The content of the services-config.xml should now look like this.




    
        

        
           
        

    


    
        
        

        
    

    

        
            
        

        
            
            
                false
            
        

        
            
            
                true
                4
            
        
        
	
		
		
			true
			5
			60000
			1
			200
                	
				
				
				
				
				 
				
				
				
				  
				
				
				
				
				
				  
				
				
				
                	
		
	        

        
            
        

        
    

    
        
            
                [BlazeDS] 
                false
                false
                false
                false
            
            
                Endpoint.*
                Service.*
                Configuration
            
        
    

    
        
            false
            
        
    


Now you have to configurate the Dispatcher Servlet, which get the information from the Flex application. Normally, you can find the definition of the MessageBroker Servlet in the web.xml. The Spring BlazeDS integration defines the MessageBroker in applicationContext.xml and uses a Dispatcher Servlet to transfer the Flex request to the MessageBroker. So, you have to replace the Flex related configuration in the web.xml. The file should now look like this:



	AnnotatedService

	
		contextConfigLocation
		
			/WEB-INF/config/web-application-config.xml
		
	
	
	
	
		org.springframework.web.context.ContextLoaderListener
	
	
	
		dispatcherServlet
		org.springframework.web.servlet.DispatcherServlet
		1
	

	
    	dispatcherServlet
    	/messagebroker/*
 	

     
		main.html
	

Now, you need a configuration file for the DispatcherServlet. Because I named the DispatcherServlet instance “dispatcherServlet”, I have to create a file with the name “dispatcherServlet-servlet.xml” in the folder WEB-INF.





The next step is to configurate the MessageBroker in applicationContext.xml. Till now, you can use also for not annotated configuration of Spring BlazeDS integration.

	
		
	

A annotated configuration needs some additional lines to scan the source for the spring annotations. The base-package specifies where Spring should start to search for annotations.

	
	

The applicationContext.xml should look like this:




	
	
 
	
		
	


The last step is to add the annotation in the Java class. You have to add the @Services, the @RemoteDestintion and the protocol you will use for the transfer above the class definition. When a method should be accessable via BlazeDS, you have to add above this method @RemoteInclude annotation otherwhise the @RemoteExclude annotation.

package test;

import org.springframework.flex.remoting.RemotingDestination;
import org.springframework.flex.remoting.RemotingExclude;
import org.springframework.flex.remoting.RemotingInclude;
import org.springframework.stereotype.Service;

@Service
@RemotingDestination(channels={"my-amf","my-secure-amf"})
public class SampleService {

	// accessable via BlazeDS
	@RemotingInclude
	public String getMessage(String name){
		return "Hello "+name;
	}

	// not accessable via BlazeDS
	@RemotingExclude
	public String getMessage2(String name){
		return "Hello "+name;
	}
}

The name of the RemoteObject is same as Java class name but with the first letter is a lowercase. In my example the name of the RemoteObject is “sampleService”.



	
	
		
	
	
	

I hope this guide helps setting up a Spring BlazeDS application using annotations.

Next Flex Builder renamed to Flash Builder

Saturday, May 16th, 2009

Yesterday Ted Patrick officially announced that the upcoming version of Flex Builder will renamed to Flash Builder via Twitter. The last months Adobe forced to speak about the Flash Platform, the new interaction design tool for Flex application was called Flash Catalyst and now the next foreseeable step comes: Flex Builder becomes Flash Builder.

I’m not really sure, what I should think about the hole renaming. From the stand point of Product Marketing, it’s clear. The end result of all IDEs is a SWF running in the Flash Player. In the entreprise world, Flash has no good reputation. This is cause the millions of bad animations and ad banner produced with Flash in the last years. I don’t think the renaming of the product makes it easier to convince decision maker to use Flex for their applications. If Flash hadn’t this negative connotation this renaming wouldn’t be as critical as it is. It looks like we must start talking about the Flex Framework instead of Flex.

More information about the renaming can found on the blogs of the Adobe evangelists: Duane Nickull, Lee Brimelow and Serge Jespers.

PS: Ted Patrick, who announced the renaming changed the name of his blog from “Ted on Flex” (onflex.org) to “Ted on Flash” (onflash.org) about 3 months ago.

PSS: SAP calls it Flex based solutions also Flash Islands and not Flex Islands.

Spring BlazeDS Integration 1.0.0.RC1 Released

Thursday, May 7th, 2009

Today, Spring published the first Release Candiate of the Spring BlazeDS Integration. http://www.springsource.org/spring-flex

One of the new features is the annotation-based configuration of Remote Desitinations. You can include and exclude function, which should publish as Remote Objects. The annotation-based configuration really simplifies the configuration of BlazeDS, if you have a big and complex application. Loving it.
An other feature of this release is the full integration of the BlazeDS Message Service.

Next Thursday, Adobe and SpringSource having a Connect Session/eSemiar about the Spring BlazeDS Integration.

Registration: http://www.adobe.com/cfusion/event/i…2539&loc=en_us