In order to use this library you must first download it from the official site: http://labs.adobe.com/technologies/squiggly/. The Squiggly package includes several flash libraries (swc), some dictionary files, and a few examples of the libraries integration using Flex, AIR, and actionscripts.

This post will guide you through the creation of a small Spark project that will use the  AdobeSpellingUIEx.swc file to enable spell checking on a text area component.  You should use the AdobeSpellingUI.swc library if you need to implement Squiggly for ‘mx’ components.

1. Let’s start by opening Flash Builder and creating a new Flex Project named FlashSpellCheck.
2. Add a TextArea to the main application with id=”txtArea”.

3. Copy the AdobeSpellingUIEx.swf file from the SquigglySDK\libs folder you just downloaded into your project “libs” folder.
4. Copy the dictionary files to your project. By default the dictionary files go to the root of the project. For bigger projects it’s advisable to place them somewhere else. In this case we’ll use an “assets” folder. You will need to copy the content from the SquigglySDK\src folder from the unzipped package. There should be a file called AdobeSpellingConfig.xml and a folder called dictionaries.
5. Tip 1: Squiggly looks for the dictionary config file inside your project root. Since we placed that file inside the “assets” folder, we need to let the library know about this new location by calling the spellingConfigUrl method on the CreationComplete event of the application:
   SpellUI.spellingConfigUrl = "assets/AdobeSpellingConfig.xml";
6. Tip 2: The AdobeSpellingConfig.xml also looks for the rules and dictionary files to be inside your root/dictionaries folder. Since we moved everything inside the assets package you will also need to edit this file and update the paths for the ruleFile and the dictionaryFile.

7. Tip 3: By default web servers won’t allow flash to load the ruleFile and dictionaryFiles that have extensions “aff” and “dic” respectively. In order to work around this issue without reconfiguring your server you can rename those two files and give them an “xml” extension. Remember to update the AdobeSpellingConfig.xml accordingly. In our case this file ends up looking like this:
   <LanguageResource language="English" languageCode="en_US" ruleFile="assets/dictionaries/en_US/en_US_aff.xml" dictionaryFile="assets/dictionaries/en_US/en_US_dic.xml"/>
8. Our last step consist on telling the SpellUI class which visual components will implement the spell-checking, in this case the TextArea. We also do this on the CreationComplete event:
   SpellUI.enableSpelling(txtArea, "en_US");

You can download the source code from here.  And this is the demo file we just created. Feel free to make some typos:

An RSO is an object that lives on the server. It resides in the scope of a messaging application clients connect to. More than one client can connect to an RSO and all of them will access to the data in the RSO. We used WebORB for managing the RSO and providing access to the RSO for various clients.

We came up with a small online version of the “Add a word” game that uses RSOs to build a sentence as well as manage user turns. The object of this game is to add a word to a sentence, one user at a time, and eventually come up with a very long sentence (that still makes sense).
Consider the following example:

• Two connected users begin a game of “Add a word”.
• The application assigns turns to each of the connected users.
• User 1 starts the game by typing “My”. Once User 1 submits a word, it is the next user’s turn. The application automatically disables the submit button for the first user, and enables it for the next user.
• User 2 types “house” and clicks Submit, passing control back to User 1
• User 1 types “is”, and so on.
• During the game, the RSO keeps track of the content of the sentence. At this point it will read “My house is”.

You should note that there’s no need for a server-side code to create this simple application, especially if you just want to add words to a sentence stored in the RSO. We just added a bit of complexity to the programming to showcase that either the clients (ActionScripts) and/or the server (.NET C#) can access and modify the RSO.
This simple example demonstrates how to use Remote Shared Objects and WebORB together.

You can download the code (C# and ActionScripts) from here.

This new code is available for download to anyone from the Drupal‘s website and has been sponsored by The Executive Office of the President. This code added to Drupal’s functionality in three ways:

1. Scalability: The Context HTTP Headers module allows site builders to add new metadata to the content they serve. The Akamai module allows a website to integrate with Akamai’s Content Delivery Network.
2. Communication: the GovDelivery module provides integration with the GovDelivery On-Demand Mailer service, a web service for GovDelivery customers that sends messages directly based on configured account information.
3. Accessibility: the Node Embed module allows embedding one node inside the body of another node. E.g.: it allows embedding an Image/Slideshow/Video node within the body of an Article node.

We, at Anden Solutions, think that’s really nice to see a governmental institution endorsing Drupal and also contributing code back to the community. Let’s hope for more!

1. Open the Adobe Flex Builder.
2. Select File / New / Flex Project.
3. Type the project name (e.g.: GoogleMaps), then make sure to select “Web Application” and “server type = None”.
4. Click Next, select output folder, click Next, and then click Finish.
5. Download the Google Maps library file from: http://maps.googleapis.com/maps/flash/release/sdk.zip. This file contains two library files (swc) and a complete documentation. You need to extract the swc with the “_flex” suffix in your project’s lib folder. The other swc file is for Adobe Flash CS3 projects.
6. Add the Google namespace in your application:

    xmlns:maps="com.google.maps.*"
   

7. Obtain a free Maps API Key from:  http://code.google.com/apis/maps/signup.html. You’ll need to read and agree with the terms and conditions and then enter the domain where the swf will be hosted. Important, the API key is compiled into the SWF file and must match the domain where the SWF file is hosted, otherwise the maps will throw an errow. After you select the “generate API key” button you will be asked to login to your google (gmail) account. If you don’t have one you may need to get a free one.
8. Copy your key string. It will look something like this:

   ABQIAAAAIyrI2Cef9Zj1PgunfzS-0hT5LyBjkUNHLJk6muZMm94ZR3_vGxRs7Scfdxjpq_yXsYXyX68PIc7Qjw

9. Add a map tag to your application with the following mxml tag:

   <maps:Map id="map" width="100%" height="100%"
   key="ABQIAAAAIyrI2Cef9Zj1PgunfzS-0hT5LyBjkUNHLJk6muZMm94ZR3_vGxRs7Scfdxjpq_yXsYXyX68PIc7Qjw"/>
   

   Make sure to use the key you just generated.

10. Build the application and you’ll get something like this (right click to view source):
    

Customizing your map

You can customize your map in several ways.

1. Start by adding a listener for the event mapevent_mapready on your map tag.

   <maps:Map id="map" width="100%" height="100%"  mapevent_mapready="onReadyMap()"
   key="ABQIAAAAIyrI2Cef9Zj1PgunfzS-0hT5LyBjkUNHLJk6muZMm94ZR3_vGxRs7Scfdxjpq_yXsYXyX68PIc7Qjw"/>
   

2. On the map ready event you could add different features such us:
   • Set the initial position of the map
   • Add zoom control
   • Add a marker
   • Allow scrolling using the mouse wheel

   public function onReadyMap():void
   {
   //set initial position
   map.setCenter(new LatLng(38.970353, -84.679638), 10, MapType.NORMAL_MAP_TYPE);
   
   //zoom control
   var zoom:ZoomControl = new ZoomControl()
   zoom.scaleX=1.2;
   zoom.scaleY=1.2;
   zoom.x=0;
   zoom.y=0;
   map.addControl(zoom);
   
       			//allow scroll with mouse wheel
   map.enableScrollWheelZoom();
   
   //adding a marker
   var m:Marker = new Marker(new LatLng(38.970353, -84.679638),
   new MarkerOptions({
   fillStyle: new FillStyle({alpha: 0.75,color: 0x00ff00}),
   hasShadow: true,
   radius: 10,
   strokeStyle: new StrokeStyle({alpha: 0.75,color: 0x0000ff,thickness: 1}),
   tooltip: "Anden Solutions, LLC"})
   );
   map.addOverlay(m);
   
   }

3. You can see the results in the following map:
   

For more information visit the Google Maps API.

Project Organization:
Flex best practices – Part 1: Setting up your Flex project. Posted by Sean Moore in the Adobe Developer Connections site.

Flex Naming and Coding Conventions:
Adobe Flex Coding Guidelines (English version) posted by D-Click.
Flex SDK coding conventions and best practices posted by Adobe Open Source.

Performance Guidelines
In addition to these conventions, we’ve also developed our own set of guidelines, mostly targeted to improve the performance of the Flex applications:

• Load the Flex Framework as a runtime-shared-libraries (RSLs). This will reduce the size of your applications and the time it requires to download.
• Always use strongly typed objects. E.g.: var myVariable:Number;
• Always use weak references with listeners when possible, except with anonymous functions : addEventListener(event, function, false, 0, true).
• For the cases when weak references may not be possible, remove the event listener once it’s not needed anymore using “removeListener”.
• Clear references to unused data. E.g.: myObject.myData=null;
• Cast objects using “as” instead of “(Type)” except when casting Top Level classes. E.g. myTextInput.text = myNumberData.value as String. If the casting is not allowed it will return null instead of a Run Time Error.
• Use deferred instantiation (creationPolicy=”auto”) for multiple views components such as viewstacks, accordeons, and tabnavigators. This is the default behavior of these components.
• Divide big applications into separate modules.
• Avoid using repeaters at all cost.
• Aovid using “setStyles” unless it’s performed during the object creation.
• Reduce the number of nested components. Use VBox or HBox instead of Grids. Canvas are always a good option, but you’ll need to align each component inside it.

Other Resources

• http://www.slideshare.net/dcoletta/optimizing-flex-applications/
• http://www.insideria.com/2008/04/flex-ria-performance-considera.html
• http://www.beauscott.com/2008/02/20/using-flex-modules-to-load-dynamic-applications-at-login/
• http://www.colettas.org/?p=115
• http://www.insideria.com/2009/04/51-actionscript-30-and-flex-op.html

LiveCyle Data Services comes by default with Adobe JRun. You might wonder why we didn’t user JRun. Well, first of all, JRun is only free for the developer edition while Tomcat is completely free.

Also, even though the LiveCycle and Jrun deployment was uneventful, and all the samples ran without any problem, whenever we tried to create or modify a java class we kept getting the “major.minor version50.0 error” on the JRun server. It seems that there’s some kind of incompatibility between the JRun jars and the Flex jars.

Anyway, lets go back to the process of installing and configuring the software.

1. Download and install java JDK.

• Remove older installations of the JDK or JRE from your system. You’ll need to do this from the Control Panel.
• Download the java JDK from Sun’s website. We used the version 1.6.0_04.
• Select the Download button besides JDK. Make sure you download the JDK and not just the JRE.
• Select your platform -in our case, Windows- and select the checkbox to agree with the agreement. Then select “Continue”.
• Select the file you want to download. In our case we selected “Windows Offline Installation. Make sure to select the link otherwise you’ll end up using Sun Download Managers.
• Once the file is downloaded on your computer, open it.
• Accept the License Agreement.
• Click “next” to accept the default settings.
• Click “next” to start installing Java JDK.
• Click “finish” to close the installation software and you are done with the first step.

2. Download and install Apache Tomcat.

• You’ll need to donwload the Apache Tomcat web server from the Apache’s website. We used the “Windows Service Installer” version 6 of the web server.
• Open the installation file and click “next” on the welcome window.
• Accept the license agreement by clicking the “I Agree” button.
• Click the “next” button on the choose components . You might want to install the Examples if you are interested.
• We installed the software to the C:\Tomcat folder, since the default path is too long.
• Select the http port, if you have another web server you might want to change the default port to something like 8050 or 8060. Enter a password for the admin user and click “next”.
• Select the path to the JDK you just installed. Make sure to select the jre folder inside the jdk installation folder. E.g.: C:\Program Files\Java\jdk1.6.0_04\jre. Select “next” to install.
• Click the “finish” button. Make sure that the checkbox for “Run Apache Tomcat” is selected.
• A new icon will show up in the notification area of the task bar. If everything went OK you’ll see a green arrow

3. Download and install Adobe LiveCycle ES Express

• Adobe LiveCycle Data Services is available for download from the Adobe’s web site. You will need an Adobe account to download this file. If you don’t have one you can create it in a couple of minutes.
• Select the language and platform. In our case English | Windows and then hit the “download” button.
• Open the file you just downloaded.
• Click “next” in the welcome screen.
• Accept the license and click “next” again.
• Leave the serial empty and click “next”. This will install the Express version of LCDS.
• Choose a new folder or accept the default folder. E.g.: c:\lcds and click “next”.
• Important: you have to select the second radio button that states “LifeCycle Data Services J2EE web application”. Then click “next”.
• Click the “install” button.
• Once the installation is finish click the “done” button.

4. LC data services configuration tomcat server.

• Stop the Apache Tomcat server. You can do this by right-clicking on the Apache Tomcat tray icon and selecting “stop service”.
• Copy the following Web Archive (war) files from the LCDS folder to the Tomcat\webapps folder (C:\Tomcat\webapps):
  • flex.war
  • flex-admin.war
  • samples.war
• Start the Apache Tomcat server again. You can do this by right-clicking on the Apache Tomcat tray icon and selecting “start service”.
• If you check the webapps folder you’ll see that Tomcat automatically created three new folders for the three new applications you just installed.

You are done! LiveCycle should be working now. Try opening the browser and typing: “http://localhost:8050/samples/” (Replace 8050 with the port you selected for the server). You’ll see the LiveCycle Data Services ES Samples page. Try running some of the examples and enjoy LiveCycle!