Archive for January, 2010

Generate PDF’s from Flex/AIR – Code Sample using AlivePDF ActionScript 3.0 Library

Posted in Flex/AIR on January 26, 2010 by devgirl

Awhile back I posted about an API called AlivePDF written by Thibault Imbert. I created a sample with it for Tour de Flex today to show how it can be used. The sample shows a use case illustrating how to add an image, a static text field, multi-line text and a text note to your PDF. AlivePDF is super easy to use and works great. There are different ways to save the PDF depending on the target environment. The sample contains code to save a PDF from a Flex application assuming a Flash Player minimum version of 10. If assuming a target Flash Player minimum less than version 10, you will need to call a server-side script to generate the PDF content. A sample of what this would look like is included in the sample code comments, as well as below. The Flash Player 10 release included a FileReference object that can now be used to avoid that server-side script and is the suggested use. The code to be used for saving a PDF from an AIR application is also included in the Tour de Flex sample and below.

Here are the code snippets for the three save options:

// HERE IS HOW TO SAVE FROM FLASH PLAYER 10 OR ABOVE
var bytes:ByteArray = claimPDF.save(Method.LOCAL);
var f:FileReference = new FileReference();
f.save(bytes,"tourdeflex-pdf-sample.pdf");
// HERE IS HOW TO SAVE FROM A FLEX APP RUNNING FLASH PLAYER < 10
 claimPDF.save( ethod.REMOTE, "http://alivepdf.bytearray.org/wp-content/demos/create.php", "tourdeflex-pdf-sample.pdf");
// HERE IS HOW TO SAVE FROM AN AIR APP
var fs:FileStream = new FileStream();
var file: File = File.desktopDirectory.resolvePath("tourdeflex-pdf-sample.pdf");
fs.open(file, FileMode.WRITE);
var pdfBytes:ByteArray = claimPDF.savePDF(Method.LOCAL);
fs.writeBytes(pdfBytes);
fs.close();

More information on server-side scripts for those running < version 10 on Flash Player can be found in the links below:

More AlivePDF sample code and general information can be found at these links:

Flex YouTube API and Player Samples

Posted in ActionScript, Adobe Flex, Flex/AIR, Tour de Flex with tags , , , , , on January 25, 2010 by devgirl

Over the weekend I worked on some samples for Tour de Flex to show how you can interface with the YouTube APIs using Flex and ActionScript. I created four samples showing different ways to do this that you can see in tabs across the top of the YouTube sample in Tour de Flex. The details for these samples are listed below:

  1. Simple Service – this is a basic sample that shows how you can use to query the YouTube API available on Google Code. The results are returned in JSON format and deserialized using the as3corelib.swc available here. The as3corelib.swc is also included in the downloaded code from Tour de Flex. Feel free to play around with changing the HTTPService URL to another type of query with other parameters based on what is listed in the Google Code API reference to get back various types of data including user profile data, categories of videos, comments etc.

    Note: The next 3 samples used an ActionScript API to wrap the YouTube requests/responses and make them easier to work with. That API was written by Martin Legris and includes iterators for all of the different objects that might be returned (categories, authors, comments, links, etc…). I recommend checking out his blog as well, there’s a lot of useful information and resources there.

  2. Video Comments – this sample shows how you can interface with YouTube and get the comments for a selected video. Simply click an item in the grid and hit Show Comments to view the comments for that particular video. Double clicking the video will bring it up in the YouTube website.
  3. Search Favorites – this sample allows you to search the favorites of a given userid. Once the favorites are shown, you can then also view the comments for that particular video in the same way as above. Note: certain userid’s may have privacy settings that will block the call and not return any results.
  4. Embed Player – this sample shows how you can not only search YouTube, but also embed their video player in you code and interact with it to do things like set the quality of the video, cue a video, play, pause, stop etc. Once you search for a video, click it to see the player show within the sample. For more information about this player API, go here.

These samples are now available in Tour de Flex under the Cloud APIs folder so definitely check them out! It was quite fun to play around with these :). If you have any questions or issues let me know and I’ll see what I can do to help!

Flex 4 Sample Themes

Posted in Adobe Flex, Flex 4, Flex/AIR with tags , , , , on January 6, 2010 by devgirl

One of the more recent downloads of the Flex 4 Nightly builds contains some new Flex 4 Sample Themes. As a non-designer, I find these invaluable in helping me make my applications more appealing. Since the source is provided, I’m given an instant base to work with and can modify to my liking rather than starting from scratch.

These sample themes are located in the Flex 4 SDK zip under …/samples/themes. To apply one to your application, you simply go into your project properties (either right click on your app folder in Flash Builder and select Properties from the context menu or go to File | Properties while your project folder is selected) and select ‘Flex Theme’. Then click the ‘Import Theme’ button and find the location of the theme that you want to use in your …/samples/themes directory of your Flex 4 SDK and type in a name for it or accept the default name it creates. Once you see that it has been added to your choices (probably under category ‘Other’), then you can select it and your project will use it the next time it’s run.

In this post I’m going to show a preview of a very simple app with some of these sample themes. I’m using the Flex 4 States and Transitions Tour de Flex sample as the simple app that is showing the different previews. The source code for that sample can be found here.

Default Spark Theme

Arcade Theme

Cobalt Theme

Graphite Theme

Zen Theme

The following set of themes are simply the default Spark theme with some CSS color properties changed to illustrate how you can use plain CSS to make some dramatic changes quickly. The CSS for these themes is also included in the samples/themes directory under the given theme.

Spark-Cobalt Theme

Spark-Desert Theme

Spark-Graphite Theme

Spark-Sage Theme

Spark-Sky Theme

If you don’t see the …/samples/themes directory in your Flex 4 SDK version then get a more recent one from here. I noticed the themes available sometime around the beginning of December, so if you’re SDK is more recent than that, you’ll likely have to get a more recent version.

Also, for all of you creative ones out there that are building really cool themes in Flex 4, I encourage you to submit your themes for the rest of us to use :).