Cookbooks @ Adobe

Adobe has rolled out the next generation of it’s development recipes portal: Adobe Cookbooks

There are two major stories delivered with this new version:

1. Contributing has become a lot easier.
2. The prominence and recognition for community members who actively participate in Cookbooks was increased.

In detail, there is a set of new features that are making the experience more enjoyable and productive.

• Support for “topics” and “tags”.
• 17 technologies & products, including non-Adobe ones: AIR, Flash Professional, ColdFusion, LiveCycle, Dreamweaver, Flash Catalyst, ActionScript, Mobile and Devices, Video, PHP  and more.
• Improved content discoverability:
  • Search engine optimization
  • Ability to drill-down by tag, or do a full-text search
  • “data visualizer” – the Flash widget you see on the homepage, which is a fun way to explore the content and the community behind it.
  • Related articles recommended for each recipe.
  • Leader board featuring the most active and the most recent contributors, including integration with Community Help profiles.
  • A new way to pull in new recipes, called “recipe requests”: users can ask for a help on a task or topic, and receive solutions from the other members of the community.
  • Slicker design, improved performance, etc.

Adobe Developer Day in Romania

Adobe Romania is organizing a developer day in Bucharest on 19th May. More information can be found on Adobe Romania site. It is about Flex, Flash, AIR, web technologies, RIA, ColdFusion and a lot more.

You will have the chance to meet with Ben Forta – Senior Evangelist, Digby Horner – SVP Emerging Markets and lots of Adobe Romania people.

replace vs. split and join performance in ActionScript 3

In the previous article inside the source code for the regular expression tester you can find the following line:

var htmlString:String = string.split("\n").join("<br />");

I have found this in an ActionScript 3 example at one time and I remembered this as it is a nice construct. However there is another, more common way to write this:

var htmlString:String = string.replace(/\n/g, "<br />");

So I start questioning myself, which one is faster?

After running some tests the results are: split and join ~ 1100ms, replace ~ 800ms. The test was run on a generated string of 16 mil. characters. So, unless you are planning to do this operation on a large data set the difference is not that big and it does not matter which one you will use. For 100k characters both score around 15ms.

Flex Regular Expression Tester – source code

There are a lot of improvements that can be made to this piece of code and when I will get some time I will move forward with the changes. Until then I will post here the source code as it is still small and developers new to the world of regular expressions may learn something from it.

BTW, I have used Flex 4

(updated on 04.15.2009)

   1:  <?xml version="1.0" encoding="utf-8"?>

   2:  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

   3:      xmlns:s="library://ns.adobe.com/flex/spark" pageTitle="Flex Regular Expressions" 

   4:      xmlns:mx="library://ns.adobe.com/flex/halo" height="400" 

   5:      viewSourceURL="srcview/index.html" creationComplete="init()">

   6:      

   7:      <s:layout>

   8:          <s:BasicLayout/>

   9:      </s:layout>

  10:      

  11:      <fx:Script>

  12:          <![CDATA[

  13:          import mx.skins.spark.ButtonSkin;

  14:          private var error:String;

  15:      

  16:          protected function test_btn_clickHandler(event:MouseEvent):void

  17:          {

  18:              var restr:String = regexpInput.text;

  19:              var input:String = textInput.text;

  20:              var igstr:String = modifInput.text;

  21:              

  22:              this.error = null;

  23:              

  24:              if(restr != null && restr != '' && input != null && input != '') {

  25:                  var myPattern:RegExp = new RegExp(restr, igstr);

  26:   

  27:                  var result:Object = myPattern.exec(input);

  28:                  

  29:                  var a:String = '';

  30:                  var b:String = '<br />';

  31:                  var index:int = 0;

  32:   

  33:                  while (result != null) {

  34:                      // copy string from last match

  35:                      a += '<span>' + encode(input.substring(index, result.index)) + '</span>';

  36:                      index = result.index;

  37:                      

  38:                      // copy the matching parts

  39:                      a += '<span color="#339933">' + encode(result[0]) + '</span>'

  40:                      index += result[0].length;                

  41:   

  42:                      // create the trace string

  43:                      b += '<br /> ' + result.index + '\t'; 

  44:                      for(var i:int = 0; i<result.length; i++) {

  45:                          b += result[i] + ',';

  46:                      }

  47:                      

  48:                      if(igstr.indexOf('g') == -1) {

  49:                          a+= input.substr(index);

  50:                          break;

  51:                      }

  52:                      result = myPattern.exec(input);

  53:                  }

  54:                              

  55:                  a += '';

  56:                  resultText.content = a + b;

  57:              }

  58:          }

  59:                      

  60:          protected function encode(string:String):String {

  61:              var htmlString:String = string.replace(/\n/g, "<br />");

  62:   

  63:              return htmlString;

  64:          }

  65:          ]]>

  66:      </fx:Script>

  67:   

  68:      <s:Panel id="contentPane" width="100%" height="100%" left="0" 

  69:          title="Flex Regular Expressions" >

  70:          

  71:          <s:TextArea left="10" right="10" height="150" top="10" 

  72:              text="She sells seashells by the seashore" id="textInput" />

  73:          <s:TextInput text="(\w*)sh(\w*)" id="regexpInput" left="10" top="168" right="175"/>

  74:          <s:TextInput id="modifInput" text="ig" right="85" top="168" width="78"/>

  75:          <s:Button label="test" id="test_btn" right="10" top="168" 

  76:              click="test_btn_clickHandler(event)"/>

  77:          <s:TextArea id="resultText" left="10" right="10" top="198" bottom="10"/>

  78:      </s:Panel>

  79:      

  80:  </s:Application>

Flex Regular Expressions Tester – a new version

Some time ago I have created a Flex regular expressions tester. When I have moved my site to ICE I have decided to improve a little bit this tester and right now there is a new small Flex application that can be used to play around with some neat symbols

http://www.stratulat.com/Regular_Expressions_Flex.html

"Bended" Spaz – a practical application for Pixel Bender

I have written before about Spaz – the Twitter client I use.

Because it is written in AIR and because is open source and AIR 1.5 just got out with new interesting features, I thought, why not “bend” a little Spaz, just for fun.

I say just for fun because it was not something done after a careful consideration of the usefulness of adding this effect in Spaz.

I have used as a starting point the BlaskBookSafe application described in my previous post. The changes made in Spaz were as follows:

1. I have updated spaz/assets/air/AIRAliases.js with the last one provided by Adobe AIR SDK 1.5
2. I have copied the bender folder from BlackBookSafe into spaz
3. I have copied BenderEffect.js and Tween.js from BBS to spaz/assets/lib folder
4. I have added some small pieces of code in spaz/index.html and spaz/assets/assets/spaz.prefs.js

The added code in index.html was of course importing those two scripts added in the lib folder. We need them in order to create the effect and also to “tween” it, to transform the bend into an animation.

The code from spaz.prefs.js is a little more complicated and it creates the bend effect and starts the tween:

   1:  'window-alpha': {

   2:      setUI: function(value) {

   3:          $('#window-alpha').val(parseInt(value));

   4:      },

   5:      onChange: function(value) {

   6:          //alert(percentage+"%");

   7:          percentage = parseInt(value);

   8:          if (isNaN(percentage)) {

   9:              percentage = 100;

  10:          }

  11:          if (percentage < 25) {

  12:              percentage = 25;

  13:          }

  14:          var val = parseInt(percentage) / 100;

  15:          if (isNaN(val)) {

  16:              val = 1;

  17:          } else if (val >= 1) {

  18:              val = 1;

  19:          } else if (val <= 0) {

  20:              val = 1;

  21:          }

  22:   

  23:          /*  the bending code */

  24:          BlenderEffect.get('app:/bender/page.pbj', function(shader){

  25:              var tween = BlenderEffect.createShaderTransition(window.htmlLoader, 

  26:                  shader , 1200, Tween.effects.elasticEase);

  27:              tween.hideOnFinish = false; 

  28:              tween.start(true);

  29:          });

  30:   

  31:          window.htmlLoader.alpha = val;

  32:      },

  33:      check: function() {

  34:  .....

  35:  }

The addition was inside the onChange method for the window-alpha setting.

The reason I choose this method was to have a visual indication for changing the alpha setting from preferences. With all this in place, when changing the alpha setting for Spaz a nice effect will warp a little bit the window. I will let you to discover this as an image will not do it.

In the mean time I will send an email to Funkatron, maybe they will be interested in incorporating this in a more useful way .

Adobe AIR 1.5 is out, now we can bend some pixels.

The last version of Adobe AIR is 1.5 and brings a lot new features especially through integrating Flash Player 10 and updating the included WebKit. More about this can be read on Adobe AIR team blog.

What I want to talk about is a new sample made specially to show the new capabilities of this release, BlackBookSafe. It is an HTML/JavaScript application using jQuery framework and leveraging the encrypted local database, 3d transformations and Pixel Bender effects. Indeed, with the new AIR you can “bend pixels” .

BlackBookSafe screen

BlackBookSafe bended screen

The effect was created using the Adobe Pixel Bender available in Flash Player. And yes, I said that BlackBookSafe was created using HTML and JavaScript. You want to find out how was it done? Mihai Corlan, an Adobe Platform Evangelist wrote an article detailing exactly how this application was created in BlackBookSafe: Anatomy of an AIR 1.5 application.

Twitter client in AIR

I am not a big user of Twitter, however I wanted to have a Twitter client installed on my laptop, just in case. And, of course , I searched for an AIR one. What I found was Spaz, a Twitter client written in JavaScript as an AIR application.

Spaz is a Twitter client for users who value free, open-source software, attractive design, and customizability.

Update your JavaScript AIR application with ease.

Web application = instant update

One of the most powerful features of a web application is instant update. Your client doesn’t need to do anything when you fix some bugs in your web application. The next time he accesses the site the user will have the latest version of your application.

Update a desktop application

Creating an AIR application means creating a desktop one. It comes with all the benefits of this type of application but also with some of the drawbacks. And one of them is the challenge of updating the application to the most recent version.

Of course this is not a new subject and a lot of applications have their own method of doing updates and upgrades. Adobe AIR has now the Update Framework, a Flex library that helps you update any AIR application non intrusively, similar to any web application.

Adobe AIR Update Framework

Now, I talked at the beginning about updating a JavaScript AIR application and just above I mentioned that the update framework is a Flex component. That is true and it is very easy to use this component even without any Flex knowledge. To demonstrate this technology I will use the microlink application that I wrote recently.

First, copy the applicationupdater_ui.swf found in the update framework into your project. (You can download the update framework from here). Because I am using Flex Builder 3 to develop this application the updater component will be placed under the src folder inside my project.

Next, create the update descriptor file. This is a small XML file that contains all the information needed by the updater. This includes the version number, the application location on your server and a description where details about the improvements in the new version can be written.

<?xml version=“1.0″ encoding=“utf-8″?>
<update xmlns=“http://ns.adobe.com/air/framework/update/description/1.0″>
    <version>0.3</version>
    <url>http://localhost:8080/releases/MyAirApp.air</url>
    <description><![CDATA[
Version 0.3 of this application includes the updateing framework.
  ]]></description>
</update>

I will name this file update.xml and this will go on the web server. I placed it in the same location as my AIR application so it is reachable from http://localhost:8080/releases/update.xml.

We will want to check for updates each time the application is started. Of course we can also choose to create a menu item or a button to let the user explicitly request a check for updates. In either case, we have to write some JavaScript code to wire things together. JavaScript code in AIR applications can use classes defined in SWF files.

In the HTML file that will use the update framework (in our case index.html) we have to include a script tag that loads the framework.

<script src="ApplicationUpdater_UI.swf" type="application/x-shockwave-flash"/>

After we include the update framework in our application we have to use it. The instantiation and configuration of this is described inside the comments in the next piece of code, from index.html

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My first AIR application</title>
        <link rel="stylesheet" href="microlink.css" type="text/css" />
        <script type="text/javascript" src="lib/AIRIntrospector.js"></script>
        <script src="applicationupdater_UI.swf" type="application/x-shockwave-flash"/>

        <script src="lib/jquery-1.2.6.js"></script>
        <script src="microlink.js"></script>
        <script>
        // instantiate an updater object
           var appUpdater = new runtime.air.update.ApplicationUpdaterUI();

        function load() {
            // ApplicationUpdaterUI can be configured via a configuration file 
            // delivered with the application or via JavaScript in the application.
            appUpdater.configurationFile =
                new runtime.flash.filesystem.File("app:/config/updateConfig.xml");

            // setting the event handler for INITIALIZED
            appUpdater.addEventListener(runtime.air.update.events.UpdateEvent.INITIALIZED,
                onUpdate);

            // It initializes the update framework, silently installing synchronously 
            // any pending updates. It is required to call this method during application
            // startup because it may restart the application when it is called.
            appUpdater.initialize();
        }

        function onUpdate(event) {
            //starts the update process
            appUpdater.checkNow();
        }

        </script>

    </head>
    <body onload="load()">

    <h1>this is my first AIR app.</h1>

    <a id="microlink_a" href="http://www.stratulat.com/blog/feed" class="button"
        onClick="onClickMicroLink(this); return false;">the microlink</a>

    </body>
</html>

The updateConfig.xml file can set up a lot of parameters for the application updater, most of them related to the behavior of the UI. Only one, however required for the updater to perform well and that is the URL to the update.xml on the server.

I configured updateConfig.xml so that at startup the application first asks if the user wants to check for updates. If so, because I have set up my application version as being 0.2 and inside the update.xml as 0.3, the application displays the update available UI, which shows all the information I’ve set up in the update.xml file on the server.

In this short demo on how to use the Update Framework I showed all the required steps in order to use it. There is one thing however that was not covered and that is error handling.

I have exported my project from Flex Builder 3 and you can download it from here: MyAirApp.zip.

Adobe AIR Update Framework – Flex

I was inspired in this article by the one written by Mihai Corlan on his blog: How to easily and seamlessly update an AIR application. The article discusses exactly the same topic but from the Flex perspective.

JavaScript AIR application – microlink

I wrote about how Flex Builder 3 can be used to create a JavaScript AIR application, how to set up the environment and how to debug a JavaScript AIR application. It is now time to actually create one that does something more than just displaying "Hello world". For that, I returned to an article written by me a about an Ajax pattern called microlink.

A microlink is a link that opens up content below it. It is a way to improve the ordinary link using Ajax.

In the original article I have used prototype.js and scriptaculous to implement this. Now I am using jquery because it is AIR-ready. That means it works off the shelf in AIR.

If we look into the Flex Navigator view we can see some new resources that are used in order to make the application. Let’s explain each of them one by one.

microlink.css is the stylesheet and is actually optional so I will not talk about this too much. I have used it in order to make the link more visible.

   1:  .button {

   2:     color: #003399;

   3:   }

   4:   

   5:  .button:hover {

   6:     text-decoration: none;

   7:       color: #66ffcc;

   8:       background-color: #003399;

   9:   }

  10:   

  11:  .button:active {

  12:     color: #ffffff;

  13:     background-color: #0099cc;

  14:   }

  15:   

  16:  .microdiv {

  17:      background-color: #ccccff;

  18:      border: 1px solid #9999cc;

  19:  }

microlink.js is the actual JavaScript piece of code that makes a regular link into a microlink. It contains just one function to handle the click event.

   1:  /**

   2:   * Function called when the microlink is called to update 

   3:   * the div with remote content.

   4:   * 

   5:   * @param {element} e the element that fired the event.

   6:   */

   7:  function onClickMicroLink(e)  {

   8:      var elID = e.id;

   9:      var divID = elID.substr(0, elID.length-2); // remove trailing '_a'

  10:      

  11:      $('#'+elID).after(' <div id="'+ divID +'" class="microdiv" ' +

  12:              'style="display:none"></div>');

  13:              

  14:      // Performs an AJAX request and updates a container's contents 

  15:      // based on the response text.

  16:      // @see http://docs.jquery.com/Ajax

  17:      $.ajax({

  18:          url: e.href,

  19:          dataType: 'text',

  20:          cache: false,

  21:          success: function(text){

  22:              $('#'+divID).append(text);

  23:              $('#'+divID).fadeIn("slow");

  24:          }

  25:      });

  26:  } 

Inside the index.html I have added just one more line (aside from including the jquery library):

   1:  <a id="microlink_a" 

   2:       href="http://www.stratulat.com/blog/feed" 

   3:       class="button" 

   4:       onClick="onClickMicroLink(this); return false;">the microlink</a>

Now running the application will show a link. When you click this link an Ajax call will be made to the feeds page of this site. The response is treated as text and it will be injected as the contend of the div created on line 11. Of course, the real use of this is to replace the href of this link with something that is indeed valuable for your application.

This small example covers more than just creating a microlink. It also shows how to make an Ajax call from an AIR application and how to use the response which is done in just the same way as in a browser.