By Request: Recompile RoloTab Using Flex sdk 4.5.1

I had a request to recompile the RoloTab control using Flex 4.5.1 sdk. Keep in mind this is still Flex 3 code so it is a bit old school now. It is still using canvas objects for the tabs. All I did here was recompile the library, I made no code changes. Apparently the lib was causing some styling issues when used in a Flex 4.5.1 project. I do not know if this will fix the problem, but it’s all I have time for right now. This new library did work properly in my RoloTab Sample webapp.

Here is a link to the recompiled lib using Flex sdk 4.5.1:
KarnLib (Contains the RoloTab control)

Sláinte

Flex 4.6 sdk available at midnight!

The Flex 4.6 sdk download link should be available tonight at midnight PST time. Apparently the last version straight from Adobe. I’m hopeful it will be kept alive as Apache open source.

Flex 4.6 sdk

By Request: Rolotab scrollbar styling

I had a request to show how the RoloTab control did the styling for the left hand scrollbar. Keep in mind this is Flex 3 code so it is a bit old school now. I’ve been too busy with some Flex mobile development to clean up the Rolotab code and release it, but I thought I would take care of this simpler request since it is quick.

Anyway, there are two parts that make up the scrollbar styling. The first is the having the scrollbar show up on the left side of the panel instead of the right. The second is simply changing the graphics used for the scrollbar elements.

Here is the css used to set up the new scrollbar elements:

.MyScrollBar {
up-arrow-skin: ClassReference(null);
down-arrow-skin: ClassReference(null);
trackSkin: Embed(source="assets/ScrollBarTrack.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");


thumbUpSkin: Embed(source="assets/ScrollBarThumb_up.gif", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");


thumbOverSkin: Embed(source="assets/ScrollBarThumb_over.gif", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");


thumbDownSkin: Embed(source="assets/ScrollBarThumb_down.gif", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
}


To use your new scrollbar style you set this property on your control:
verticalScrollBarStyleName="MyScrollBar"

Here is a link to the asset images I used for the above css:
Scrollbar CSS Assets

To do this we must extend the control we want to change. In this case it is a mx:Canvas control.
We simply need to override validateDisplayList() and set the vertical scrollbar x position to be 0 (i.e. the left side of the control).

Here is the extended canvas control:

import mx.containers.Canvas;

public class CanvasEx extends Canvas
{
  public function CanvasEx() {
    super();
  }

  public override function validateDisplayList():void {
    super.validateDisplayList();

    if (verticalScrollBar && verticalScrollBar.visible) {
      verticalScrollBar.x = 0;
    }
  }
}

There you have it. Not all that difficult.

RoloTab Control: Now on “Tour de Flex”

The RoloTab component I posted here recently is now available on “Tour De Flex” under “Other Components –> Containers –> RoloTab Control”.

You can get to the web and/or AIR versions of “Tour de Flex” on Adobe’s website here.

RoloTab: New custom Flex component

I’ve had this Flex control that works like a tabbed address book more or less finished for some time now. I finally got around to cleaning it up a bit and creating some demo projects for this post. The basic idea of this control comes from those old personal phone books with the little tabs for each letter in the alphabet. You would use the tab to flip to the letter closest to the name you were looking for. Who still uses those? I dunno, but I would guess fewer people do with the proliferation of powerful smart phones. Anyway, I thought it would be a nice UI paradigm to organize electronic data as well. I’ve dubbed it the RoloTab control.

The RoloTab control user interface can be compared to the Flex TabBar user interface. Both components are simple strips of tabs. It is up to the particular application to decide how to make use of these tab strips. Unlike the TabBar tabs, which are horizontal, the RoloTab tabs are vertical. The RoloTab also has quite a bit of intelligence built into it. You typically don’t manually add and remove tabs directly on the RoloTab. Instead you give the RoloTab a dataProvider (ArrayCollection). Next you tell the RoloTab control the name of the String property (of the dataProvider objects in the ArrayCollection) to use in creating the RoloTab tabs. The RoloTab control will dynamically watch the dataProvider and automatically add, remove, and update the tabs based on CollectionChangeEvents from the dataProvider. In addition you can update the name of the String property on the fly and the RoloTab control will rebuild its tabs accordingly. This can sound a little complicated, so I’ve put together a simple demo Flex app to demonstrate how easily is works.

The demo app below is a bare bones demonstration so you can see exactly what user interface the RoloTab provides. Initially you will see a strip of buttons at the top and a dark line down the middle of the app. The dark line is the RoloTab control. Like the tab strip there is not much to it when no data is present. I’ll let you play with the demo, below the demo I will explain exactly what the controls are doing.

AddA - This button populates an ArrayCollection with a set of data and sets this array as the dataProvider on the RoloTab control. This means the data will completely replace any data in the RoloTab control and since all the data is given to the control in one shot, the resulting tabs are added in one shot.

AddS - This buttons adds a set of data sequentially, one at a time, to the existing RoloTab dataProvider. This does not replace and existing data. Since the data is added one at a time, any necessary tabs are animated in sequentially as well.

Add - This button opens a dialog so that you can manually enter a new contact into the RoloTab dataProvider. This should give you a better idea of what data entries cause what reactions from the RoloTab control.

Clear - This removes all data from the RoloTab dataProvider and thus removes any existing tabs.

Organize By Combo - The data objects being used in this demo contain four string variables (Last Name, First Name, Job Title, and Notes). This combo box controls which of these four variables the RoloTab uses to build its tab list. This exercises the RoloTab API for setting this controlling variable name.

Sel button and textfield - In this text field you can type the letter of the tab you want to programatically select and click the “Sel” button. You will see the appropriate tab, if it exists, select in the RoloTab control.

Selected tab from event label - This label displays the currently selected tab. The RoloTab control fires tab change events so that the application can react appropriately. This label is being populated by a tab change event handler listening to the RoloTab control.

The above demo defines no CSS the tab user interface and instead accepts the default. Below is another more fleshed out demo with its own CSS to override the look and feel of the RoloTab tabs. This demo should give a better understanding on how the RoloTab control can be used in a real world application. I’ll explain below the demo how it works.

The strip of control across the top of this demo are not something that you would put in an actual application. This strip of controls is carried over from the first demo to make it easier to add bulk data. All the controls in the top strip work exactly the same as they did in the top demo.

In this demo I’ve crudely styled the app to look like a book and I’ve placed the RoloTab control along the ledt side of the book so that it appears attached, and more or less like one big UI piece. Inside the book is a top row of buttons and a list control beneath. The row of buttons allows you to “Add”, “Edit”, “Delete”, and “Select All” contacts. The list uses a ListCollectionView as its dataProvider. The ListCollectionView is a filtered list of data available in the RoloTab dataProvider. Using the selected tab event from the RoloTab the demo can filter the ListCollectionView appropriately so that only data matching the selected RoloTab gets displayed in the list control.

Both of these application have “view source” enabled, so feel free to poke around with the code and see just how easy it is to use the RoloTab control.

Auto Localizer - Now with a Trusted Certificate

The Auto Localizer, an AIR application I wrote that uses the Google Translate service to auto translate properties files, is now signed with a trusted certificate on the Adobe AIR marketplace. Many thanks to Adobe for generously providing the certificate.

Auto Localizer blog post

Auto Localizer on the Adobe AIR marketplace

Auto Localizer - FREE on Adobe AIR Marketplace

The Auto Localizer, an AIR application I wrote that uses the Google Translate service to auto translate properties files, is now available free on the Adobe AIR marketplace.

Auto Localizer blog post

Auto Localizer on the Adobe AIR marketplace

Auto Localizer - A Language Translation AIR Application

Auto Localizer is an AIR application I wrote that uses the Google Translate service to auto translate properties files. I deal with localization in enterprise applications every day. My company spends a good amount of money to outsource the localization of our enterprise applications. While Google Translate is not robust enough for an enterprise application it can definitely be useful for small budget, open source, and pet project applications.

I did not spend a whole lot of time polishing the UI for this application as it is really just a utility for developers. I already know of a few places that can use some more development to increase usability, so I went ahead and used the AIR update APIs to check for and install any updates I make to this application. Feel free to let me know what you think and what improvements can be made. Of course I cannot improve the quality of the translations that come from the Google Translate service, but everything else is fair game.

Install the Auto Localizer application.

Instructions on using the Auto Localizer application.

Flash on the iPhone…sorta

Enterprise Flex: Modules - Using Intefaces to Communicate

My last post involved turning an existing sample application into a module. Let’s build a little bit upon that example. Its nice to now have a module that I can load inside another Flex application, but what if we want the application to be able to communicate with this loaded module? We also don’t want to have a hard dependency between our application and the module since we want our module to have the ability to work inside any Flex application.

The answer is Interfaces. By defining a common interface for our modules and using it in both our application and our module we can easily allow our application to use any module methods exposed by the interface and avoid tight coupling.

Once again I will borrow from my previous post and add an interface to my FirstTry Application. Below is the interface I will be using (filename “IModule.as”):
package modules
{
import flash.events.IEventDispatcher;
public interface IModule extends IEventDispatcher
{
//expand the app (same as mouse over)
function expand():void;
//collapse the app
function collapse():void;
//click CRT button
function showCRT():void;
//click Flat panel button
function showFlatPanel():void;
//click Rear Proj button
function showRearProjection():void;
//click Front Proj button
function showFrontProjection():void;
//Pass in a yes/no question for the module to ask with an Alert.
//The alert will call back into your provided function
function askQuestion(question:String, alertCloseListener:Function):void;
}
}

In the module we need to implement this interface. To do that we add an implements tag at the top of the module like so:
<mx:Module xmlns:mx=”http://www.adobe.com/2006/mxml”
implements=”modules.IModule” >
</mx:Module>

At this point you would get compile errors telling you that the functions in the IModule interface do not have implementation methods. I won’t go into the individual method implementations here but you can refer to the complete source to see them in the sample project below.

Once the IModule implementation methods are done we are finished with the module and can move on to the Application that will be calling into the module.

In your application you first need to import the IModule interface:
import modules.IModule;

Once you have your module loaded you can test to see if it implements the module interface:
module = info.factory.create() as UIComponent;
if (module != null) {
//If the loaded module implements the known interface we can make calls into this module.
if (module is IModule) {
IModule(module).expand();
}
}

As you can see using interfaces with modules is pretty simple once you understand how it works. I’ll leave it to you to browse the source to see the various interface calls in action. Below is the updated Module Loader application with source enabled.