Hi, I'm a developer and these are my notes. This website is the by-product of my continuing experiment with hypertext. It's ultimate aim is to be the online equivalent of a crumpled up notebook.

I also have a generic personal blog called Concentric Circles where I write about technology.

Random quote1:

The things that will destroy us are:
politics without principle; pleasure without conscience;
wealth without work; knowledge without character;
business without morality; science without humanity;
and worship without sacrifice.

- Mahatma Gandhi

Categories:

FlexCPPBridge(1) Flex(33) AIR(9) FrndNet(2) SQL(1) CGI(1) SSH(1) Java(1) Win32(1) Latex(2) Emacs(6) Javascript(2) Notes(3) Gnus(1) CSS(2) Rant(5) C++(2) Linux(6) EmacsWiki(4) Web(4) C(5) Programming(12) General(6)

Total Posts: 110

anirudhsasikumar.net uses valid XHTML2, valid CSS and valid RSS.


[1] Chosen at publish time from QuotePage.
[2] Though the pages are served as text/html.

Notes

Using the new AIR 3 APIs with an old Flex 4 SDK

December 16, 2011 11:56 AM
Once you manually overlay a new AIR SDK over a Flex SDK, there are a couple of things that you need to do to use the new APIs. Flex 4.5 has a compiler option known as swf-version which is required to be set if you want to use new AIR/Player APIs in addition to bumping the namespace version in your application descriptor. What if you wanted to use the new AIR 3 APIs with an SDK older than 4.5? In my case, I wanted to move to native JSON decoding in a project that uses the Flex 4.0 SDK.

It is really simple, just use -target-version=13 in the additional compiler arguments. Use -swf-version if you are on Flex SDK 4.5 or higher.

Step by Step

Once you overlay the new AIR 3 SDK over the Flex 4 SDK:

1) Update your application descriptor file to the new version:

<application xmlns="http://ns.adobe.com/air/application/3.0">

2) Set target player in additional compiler arguments:

-target-player=13

This compiler option basically changes the data written to the SWF file (the first few bytes of a SWF). Both the namespace version and swf version in the file is checked before allowing new APIs to be used.

The symptoms you see when you try to use the new APIs without changing the descriptor version and target-version are not directly linked to the problem: You get a runtime Verify Error and the compiler not detecting this at compile-time just adds to the worry.

Useful Hint

If you use TLF, updating your namespace to 3.0 gives your fonts a much better look.

CategoryFlex


Reverse Debugging with Causal Analysis

December 15, 2011 4:39 PM
Incremental innovation is hard, not impossible. I think I've come up with something that is both useful and not already implemented elsewhere1. The Internet might prove me otherwise, but I'm personally incredibly excited about this since I've always wanted to do something that is non-trivial and useful for developers.

Imagine you're debugging and a breakpoint hits. Instead of stepping forward, you can step backward. You can position your cursor at a line of code and see how you reached that line. This is more than a stack trace; it is a causal analysis report listing only lines of code that played a part in execution reaching that point (lines of code with if, switch, break, continue, method call and event handling statements2 that affected control flow).

Looking at the list in the report, you can quickly spot an item that shouldn't be on it to determine where your control flow logic went wrong.

The second part: you can highlight a variable in the editor and see all lines of code where the variable was modified till the breakpoint was hit. I suspect this part is not that unique.

There's a video further down that should help clarify what I mean.

Before that, let me tell you what this is not:

I demoed this on stage at MAX 2011 where I had Rainn Wilson constantly try to faze me (all in good faith3):

Reverse Debugging with Causal Analysis

Apart from causal analysis, one more piece was shown at MAX (and in the video above):

  • Generate a trace dump which can then be used to do post-mortem analysis (reverse debugging and all that jazz) of the application. This is exactly like Visual Studio's Intellitrace or Historical debugging.

What I'm excited about is the causal analysis and the variable modification analysis (though implementing the other bits was also fascinating).

Developer Reaction

I was floored by the reception this received, the party after MAX Sneak Peek was amazing to say the least. It was hard to be the only code related demo among magical photoshop and 3D video demos. Cheers to all the Flex and Flash developers who congratulated me personally and to all those were curious enough to ask me how it was done (even though I might not have answered your question, trust me when I tell you, I wanted to). I appreciate it.

Meta (or How I came up with this)

My work at Adobe as a developer gives me access to the source code of an IDE with code completion and refactoring support (Flash Builder) and a virtual machine (AVM) with debugging capability, the flash player. I work on the debugger, so I'm always looking out in this area. I started doing this in my spare time, when I was not working on bugs or a feature.

I initially implemented reverse debugging in Flash Builder/flash player just because I was frustrated with having to reset breakpoints and restart if a breakpoint was set too far ahead. I had read the original gdb article via slashdot long ago so I knew it should be possible. Implementing it was a challenge, time was always against me.

Seeing Reverse debugging work, the other pieces just sort of came to me while I was trying to sleep that night. I was awake up all night thinking if I would be able to do it or not and if I'm crazy to be so excited about it. From the next day on, I worked continuously to get a prototype up. It is hard to work on something when you're not really sure if it will work or not, but the feeling you get when it finally starts working is inexplicable.

When is it shipping?

I'm glad that you're interested, I can't disclose anything about that now.

Why are you writing this?

Several reasons:

  • Maybe this will help someone get an idea like I got this one. Whatever it is, go do it even if it looks impossible. Like I said, incremental innovation is hard. But not impossible.
  • There have been only very few times4 when I've actually come up with something worthy of being posted on Hacker news.

Discuss this on Hacker News

CategoryProgramming


[1] I know for sure that I thought up of this by myself, but the world being a big place, it might be more than possible that someone either already thought about it or implemented it.

[2] There are way more cases than what is listed being considered. That said, the report is always not perfect.

[3] He was nothing compared to the developer from the audience who shouted that he got a boner. That is when I'm going "Dude!" in the video.

[4] First time I considered it was when I worked on the seamless client server debugging and automatic async/sync conversion pieces (with other extremely talented engineers) demoed at MAX 2009 Sneak peeks. The second time was when I came up with Readefine and the third time was when I built visual conditional breakpoints with a live design view demoed at MAX 2010 Sneak peeks.


Speaking at Adobe MAX 2011

September 23, 2011 2:47 PM
I'm really excited to be speaking at Adobe MAX 2011 about Flash Builder Tips and Tricks. Drop in for an in-depth look at getting the maximum out of Flash Builder. As a developer1 on the Builder team who uses Builder quite a bit2, I'm hoping that I will be able to show you useful stuff that can help you become more productive while understanding what is going on under the hood of the tool.

MAX Speaker

Of course, I also happen to sit next to and work with other brilliant engineers in the Builder team. Couple this with stalking a lot on forums and you might get what I'm hoping is a good collection of tips.

Some other great Flex and Flash Builder related sessions to check out at MAX:

  • Developing Flex Mobile Applications by Serge Jespers.
  • Flash Platform Roadmap: Flex, Flash Builder, Flash Player, AIR by Scott Castle and Andrew Shorten.
  • What's new in Flash Builder 4.5 and later by Adam Lehman.
  • How to Extend Your Mobile AIR Applications Using Native Extensions by Oliver Goldman.
  • Working with AIR Native Extensions by Brijesh Patel.
  • Flash Builder and Flash Catalyst Sitting in a Tree by Jacob Surber.

See you there!

CategoryFlex Comment(s)


[1] I've worked mostly on debugging, compiler integration, Eclipse integration.
[2] Readefine is topping the download.com Newsreaders and RSS readers category.


Magazine Layout and Mark these as Read

July 26, 2011 8:07 PM
Stranded in office late night due to heavy rain, I got bored and wrote a new layout for Readefine. Multiple articles show up in a grid, but there are articles that drop vertically to span across and articles that grow wide to two columns or more. Articles that are small may take up only the necessary space. Empty space should be minimal. This layout was not very hard to do, but getting the right performance was not easy. But it was gratifying to see the same app up and running on a tablet with no code changes.

Readefine Magazine Layout

I finished the layout that night, but took around four days to tune performance. The good thing about this is that I know more1 about TextLine and Flash Text Engine now. The bad thing is that I went home at midnight that day.

Try it out by downloading Readefine Desktop 2.0.

Mark these as Read

There's a very nifty feature in the Android Google Reader app. If you scroll through headings of your articles, a "Mark these as Read" button appears allowing you to mark all articles till the current one read.

I loved this feature. But as usual, scrolling is not my thing, so implemented the same concept in Readefine but with pagination. A page with multiple articles is shown. If interested, you can read an article in depth. Or you can "Mark these articles" as read and move to the next set. Just tap Space.

Tablet trials

I re-packaged the SWF as is for Android and tried it out on a Motorola Xoom tablet. Magazine layout took around 30 - 50 seconds to lay out.

I tweaked with the amount of data I pre-fetch, process and cache. Layout time came down to 10 seconds. This is for around 8 - 10 articles being displayed with a total of 15 articles processed and ready for layout all in Actionscript.

That was impressive. Minimal code changes (constants in my singleton class) and I'm up and running on an Android tablet.

Of course, I need to make a lot of design changes for the Tablet form factor, but this was very encouraging for about an hour of effort.

I'm not releasing the tablet version till I add some touch functionality and get the experience right.

Future of magazine layout

Tablet. Performance. And better elimination of empty space. Since this is a hobby, expect random infrequent updates.

CategoryFlex Comment(s)


[1] Caching TextFlow objects when you have custom text containers is not very straight-forward. Neither is TextLine recycling.


Faster Flex Compilation with Flash Builder 4.5

June 2, 2011 11:06 AM
The Flex 4.5 SDK compiler is slightly faster and more conservative about memory compared to its previous version. There are a couple of small changes that a developer can make to speed up compilation. One of them involves a new compiler option and others are related to organizing code in your project and can be leveraged by customers on the 4.0 SDK as well.

The New Compress Option (non-mobile projects only)

SWF files can be compressed or uncompressed. SDK 4.5 exposes a compiler option to control whether the output SWF is compressed or uncompressed. Try setting -compress=false in Project properties -> Flex Compiler -> Additional Compiler arguments.

Using the compress compiler argument

Before you go ahead and set this, note the caveats:

  1. Flash Builder automatically sets this option for Mobile projects (and removes it on an Export Release build).
  2. If you set the option, you'll have to remove the option before exporting a release build unless you are fine with 2x - 10x increase in SWF size.
  3. Strangely, we found Flex runtime performance implications when an uncompressed SWF was generated. This requires more investigation, but it is something that must be kept in the back of your mind and the reason why this is not the default behavior.

The numbers: 2239ms before and 1734ms after (On a large customer project when making an incremental change of width in MXML). That is roughly 22%, but your mileage will vary depending upon the actual contents of your project. Normal projects are unlikely to give this drastic an improvement in compilation speed.

Move Embedded Assets into a Library Project

This is very important especially if you use embedded fonts. This will save a lot of time and reduce your overall heap memory consumption. Here's how:

1) Create a library project in Flash Builder.

2) Create an Actionscript class in this project and put your embedded font and image declarations there:

package
{
  public class TestProjectAssets
  {
    [Embed(source="fonts/MySuperDuperFont.otf",
                    fontFamily="SuperDuperFont",
                    mimeType="application/x-font",
                    embedAsCFF="true")]
    private const SuperDuperFont:Class;

    [Embed(source="assets/mainMenu.png")]
    public static const mainMenuImg:Class;
  }

}

3) Copy over the fonts and assets into the src directory.

4) In your main project, add the library project you created as a reference in Project Properties -> Flex Build Path -> Add Project.

5) In the main MXML file of your project, declare an instance of the class you created in the library project. This is so that the class is linked in to your project and fonts and assets are available for use in your main project:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 
  xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx">
  <fx:Script>
    <![CDATA[
      import TestProjectAssets;
      
      private var projectAssets:TestProjectAssets;
    ]]>
  </fx:Script>
  <fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    
    global
    {
      font-family: SuperDuperFont;
      color: white;
      fontAntiAliasType: advanced;
    }
  </fx:Style>
</s:WindowedApplication>

Image instances in TestProjectAssets are static so that you can easily refer to them from any MXML file.

The numbers: 1368ms before and 1255ms after (on change of width in a test project). That is about 8.26%, but the improvement will increase proportionally with the amount of embedded assets and fonts.

Moving your CSS file to a Library Project

Okay, I'm stretching facts a bit here. This doesn't save you a lot of compilation time. But it is nevertheless a neat thing to do. The biggest advantage is that CSS files are separated out.

Here's how you do it:

  1. Create a library project.
  2. Create a CSS file named defaults.css in the src directory.
  3. Go to Project Properties -> Flex Library Build Path -> Assets. Expand src and check defaults.css.
  4. In your main project, add the library project you created as a reference in Project Properties -> Flex Build Path -> Add Project.

Now defaults.css will be automatically applied to your main project without having to add any fx:Style tags to your application MXML file.

You can combine this with the second approach mentioned above though keep in mind that embedding fonts via font-face will not work if you declare that in defaults.css. Similarly if you use the background-image style in defaults.css, you won't get as much performance boost compared to moving it an Actionscript class.

Note on the Numbers

Numbers reflect the time taken for incremental compile only. A simple MXML attribute like width is changed and numbers are recorded by repeating this five times.

CategoryFlex Comment(s)


Debugging Flex or Flash applications running on Google Chrome and Firefox 4

May 17, 2011 12:30 PM
Google Chrome bundles a version of the Flash player plug-in that it keeps up-to-date. Firefox 4's plugin hang detector stops flash player when it detects inactivity1. Read on to see how these challenges can be overcome when debugging flex/flash applications with Flash Builder.

Google Chrome

  • Release version of the player is bundled and that gets priority over the debug player.

Disable the bundled flash player by following the instructions at the official Chrome help forum or polygeek.com.

  • Plug-in hang detector kicks in and asks if you want to stop flash player when at a breakpoint in Flash Builder.

This is how you can disable the hang monitor:

  1. In Flash Builder, open Window -> Preferences -> General -> Web Browser.
  2. Hit "New", type in Chrome, point to the location of Google Chrome2 and add --disable-hang-monitor in the "Parameters" field.
  3. Set the newly created Chrome as your browser. Note that this only applies to Chrome starting up when no chrome windows are already running.
Flash Builder Google Chrome

Mozilla Firefox

  • Firefox 3.6.6+ stops flash player after a short duration when at a breakpoint.

Disable the Firefox hang monitor by following these steps:

  1. Type in about:config in the address bar and hit enter.
  2. Agree that you'll be careful.
  3. Type in dom.ipc.plugins.timeoutSecs. Change the value to -1.
  4. Restart Firefox.

CategoryFlex Comment(s)


[1] Without offering a choice to the user unlike Google Chrome.
[2] This may be harder than it sounds. On the Mac, you cannot use the Browse button and point to the app. Instead, you have to type in the path to the actual binary - /Applications/Google Chrome.app/Contents/MacOS/Google Chrome. On Windows, the location of the binary can be deduced by looking at the properties of the Google Chrome shortcut.


A Year on the Flash Builder Team

May 16, 2011 4:46 PM
Last year, I moved into the Flash Builder engineering team as a developer. Working on a developer tool is fun and satisfying. Especially when the work you do helps developers code faster and easily build mobile apps. For example, take some of the coding productivity features baked in Flash Builder 4.5, there are some killer time-savers present in there1.

Looking back, some events clearly stand out: seeing Flex mobile come alive with our one-click debug workflow, experiencing first-hand the coding productivity features we built, presenting a sneak peek at Adobe MAX 2010 and most exciting of all, to see Flex 4.5 and Flash Builder ship.

Sneak Peek

Last October, I flew to Los Angeles to attend Adobe MAX. This was my first MAX and I was completely blown away by the scale and most importantly, by the passion people had for Adobe's products. The Flex community is vibrant, alive and filled with talented people.

It was amazing to be given the opportunity to demo my prototype at the MAX Sneak Peek3 to a crowd of over four-thousand people at Adobe MAX 2010, Los Angeles. A recording of the demo is up on Youtube:

This is the biggest audience I've ever presented to and it was nerve-wracking backstage especially after hearing the crowd roar for the preceding sneaks: Flash to HTML5 and Pixel bender 3D. I almost had a heart-attack when the application failed to launch at the end. Control + Z to undo my mistyping saved the demo.

The Future

Looks incredibly exciting. Expect useful posts4 about Flex and Flash Builder in the near term.

CategoryFlex Comment(s)


[1] Code templates2! With dynamic variable support! You can find the complete list of new features in Flash Builder 4.5 at this devnet page.
[2] This makes my hoard of MXML/AS yasnippet templates obsolete.
[3] For the un-initiated, a Sneak peek showcases technology with no guarantees that it will make it into a product. Think of it as ten engineers showing cool demos one after the other.
[4] Unlike this post which talks about something personal that happened a long time ago.


Flex 4 Wizard Component with Progress Indication and Move Effects

December 10, 2009 6:08 PM
I love the Insuricorp demo. The wizard in that has two distinguishing features. A subtle animated progress indication that not only denotes the current step, but also the fact that you are progressing. And the other thing - a neat move effect between each step so that it looks like the next step is sliding in from the right. I built a Flex 4 component that does exactly this. Use it similar to our good old Flex 3 view stack and voila!

Wizard Component

Only a demo (view source enabled) can do it justice. Click the image below to try it out:

Flex 4 Wizard Component

You can also download the FXP. The source is licensed under MPL 1.1.

Try clicking next and previous pretty fast. The move effects play in parallel so that there is a kinetic feel to it.

Usage

First, declare the step names:

[Bindable] 
private var wizardViews:ArrayCollection = new ArrayCollection(
 [new WizardStepVO({name:"PICK PLAYLIST", state: "selected"}), 
 new WizardStepVO({name: "SOURCE", state: "normal"}), 
 new WizardStepVO({name: "DESTINATION", state: "normal"})
 ]);

Now declare the view elements of the wizard as a child to the WizardPanel tag:

<wizard:WizardPanel id="wizard"    
     change="trace('step: ' + wizard.currentStepTitle)"
     wizardViews="{wizardViews}">
  <steps:PickPlaylist width="100%" top="40" bottom="30" />
  <steps:PickSource width="100%" top="40" bottom="30" />
  <steps:PickDestination width="100%" top="40" bottom="30" />
  <steps:Finish width="100%" top="40" bottom="34"  />
</wizard:WizardPanel>

The only difference from a view stack is that since GraphicElements do not have a "label" property, you have to provide the step name via a wizardViews property. Internally, the children passed to the component gets added to a Group and its visibility is toggled based on the current step.

Effects

Pressing "Next" causes the next step to slide in and the current step to slide out. Then the progress indicator grows to cover the new step while the color of the indicator changes from white to blue. I used the new Flex 4 AnimateColor effect for this.

The move effects work in parallel so that multiple next / previous does not cause abrupt changes.

Conclusion

This was my first Flex 4 component. I had forgotten about it till I was cleaning up my Eclipse workspace. Let me know if you guys find it useful.

CategoryFlex Comment(s)


Flex 4 Component: Navbar with Scoped Search, Vimeo Style

December 9, 2009 11:29 PM
I came across this great post by Theresa Neil: 30 essential controls for RIA design. I liked control twenty-three in particular: Scoped Search. So I cooked up a Flex 4 navigation bar (vimeo style) that has scoped search and is completely data-driven and customizable via CSS. It does not use any images; everything is drawn. Along the way, I built some potentially re-usable things like a dotted line graphic element and a vertical separator layout.

Inspiration

Vimeo.com is beautifully designed. I noticed the beautiful top navigation header only when it was referenced from Theresa's article. The blended curves are beautiful. It is the "Scoped Search" part that drove me to build this component.

What is Scoped Search?

Flex 4 Scoped Search

According to Theresa:

Scoped search like ITunes, allows for the optional selection
of a category before entering free form search text...

Demo

Click the image below to run the demo (view source enabled, the source is under MPL 1.1):

Flex 4 Navbar with Scoped Search Vimeo Style

You can also download the FXP or look a the code at github.

The demo lets you change any color at runtime. These colors are passed in via CSS. In a real use-case, you could also change the data displayed at runtime.

On mouseover over a top level item, a popup menu is displayed. This menu stays open in the case of scoped search to allow changing the selected item in the list while displaying a changing prompt text if the user has not entered anything.

Events dispatched are shown in the bottom.

Using Navbar

To get started, declare the data to be set:

[Bindable]
private var navData:ArrayList = new ArrayList(
[{label: "Log In"}, {label: "Explore", menu: explorePopup},
{label: "Help", menu: popupData2}]);

private var explorePopup:ArrayList = new ArrayList(
    ["Categories", "Groups", "Channels",
     "Toys"]);

[Bindable]
private var searchCategories:ArrayList = new ArrayList(
    ["Search Videos", "Search People", "Search Channels",
     "Search Forums"]);

Assign them via the dataProvider and searchDataProvider attributes:

<!-- to change style of brand label, see scopednav.css -->
<!-- to add a brand image rather than text, change NavContainerSkin -->
<controls:MainNavigation top="0" right="150" 							 
  brand="foobar"
  dataProvider="{navData}"
  searchDataProvider="{searchCategories}"
  search="trace('searching for ' + event.searchText+' in '+event.selectedItem)"
  navselect="trace('selected ' + event.selectedItem)"
  />

The search event is fired when a scoped search is performed (by clicking on the magnifying glass or pressing enter). navselect is fired when a menu item is clicked.

Components that come along with Navbar

1) There is a new GraphicElement, DottedLine, which you can use in Flex 4 the same way as Line, Rect, etc. DottedLine uses a bitmap fill to draw the dots (thanks to warm forest).

2) VerticalSeparatorLayout: If you notice the List in the popup menu, the separator (dotted line) is not drawn for the last element. This is done via a custom layout1 that makes the separator of the last item in the List invisible.

3) ScopedDropDown: This is used to popup the menu (List). It is a customized DropDownList which can stay open till it is notified that it can be closed.

4) Magnifying Glass: Not exactly a component, but an ellipse and a line that looks a lot like a search magnifying glass2.

Flex 4 Observations

Some points3 I noted while developing the component:

Rect

The Rect primitive can support setting a corner radius X, Y property on an individual corner via: bottomLeftRadiusX, bottomRightRadiusX, topLeftRadiusX, topLeftRadiusY, etc.

That said, for the blended look in the popup list, I had to cheat and draw two rectangles: one normal and another filled with background color and set with corner radius. Maybe there is a blend mode that can erase whatever is underneath it of a particular color?

CSS

In CSS, you use namespace|component. This is expanded to the fully qualified name of the component. This is important to know if you want to modify a style declaration at runtime (like in the demo). For example, if you wanted to change navFill defined in the CSS declaration container|NavContainer:

StyleManager.getStyleDeclaration('net.anirudh.container.NavContainer').
    setStyle('navFill', navfill.selectedColor);

The syntax in Flex 4 for CSS is incredibly powerful. For example, this is how the brand label is changed via CSS:

/* In NavContainer change Label with id brandLabel */
container|NavContainer s|Label#brandLabel
{
  fontSize: 18;
}

Skin

Any style defined for the component is available in the skin. GraphicElement's don't support CSS, so you could bind properties via getStyle() calls.

Override updateDisplayList() if you want to check a CSS property and do something like make a Rect invisible in the skin.

GraphicElement

When you are building your own GraphicElement, you can access the Graphics object via:

//The base GraphicElement class has cleared the graphics for us. 
(drawnDisplayObject as Sprite).graphics

Conclusion

Developing with Flex 4 is sweet, sweet bliss. In my opinion, this is the most well architected GUI framework out there.

CategoryFlex Comment(s)


[1] I'm certain this was never considered as a reason why people would customize a layout. Nevertheless, it works beautifully with minimal code.
[2] Yes, I know should have used an icon. But I wanted to be able to change its color.
[3] Please do not consider any of these as hard and stead-fast rules. These are simply my own observations.


Black Glass - Flex 4 Theme

November 25, 2009 5:56 PM
I took a leap of faith. I tried it out. I built a black Flex 4 theme using Flash Catalyst alone. Last week, I watched Harish build a Flex 4 theme using Catalyst. Leaning over his shoulder, I gaped on while he effortlessly moved rectangles and ellipses around to build a dialog window that looks fantastically close to the "Display Properties" dialog on the Mac. I was so impressed (anyone who has watched Harish demo Catalyst will be) that I took a leap of faith. Read on for the details and some Catalyst tips.

Black Glass

Black Glass Flex 4 Theme

Click here to try it out.

You can download the code (FXP) here. This was tested with Flash Builder 4 Beta 2 using the Flex 4 Beta 2 SDK.

Design

First a disclaimer: I'm not a designer or a UI expert; feel free to bash me for my poor choice of colors. Doomed it may be, but I will build an app using this theme.

I've always wanted some Flex theme to have that blue color along with black. My fetish for the blue and black is evident in Deskworld:

Deskworld Desktop

I started working on the theme with only a simple concept, inspired by the highlight part of a Button skin in Flex 4:

A line with 0xcccccc color, 0.25 alpha at the top that leaves some gap on both sides, another line below it with the same color but 0.07 alpha extending fully along the side. Similar setup below, but visible only on mouse over. There's also two blue lines on the left and right with 0.07 alpha. The bottom two lines turn blue on mouse down.

Flash Catalyst Tips

Amazing tool. All Flex developers should try it out to instantly see how changes to properties and styles affect components without the compile cycle in Flash Builder.

For example, a gradient stroke on an ellipse with the stop point set at around 0.36 with alpha 0 is used to draw the highlight on top of the thumb in the slider. This would have been hard to preview and tweak around with in FB's design view1.

Generated Code

There's some tweaking2 you have to do to Catalyst generated code so that the components resize properly. Basically, take note of hard-coded width or height numbers and convert them to use constraints (left, right, top, bottom). This becomes painful when you have items under a Group. So, you may want to "Ungroup" before importing the FXP in Flash Builder 4.

CSS

A practice I've found useful: Strip out the properties applied to individual components like focusColor and skinClass into a CSS file. This way, a person will be able to use your skins just by dropping in your CSS file.

For example, this is a portion of the CSS file I created for Black Glass:

s|Button
{
	focusColor: #0d103f;
	skinClass: ClassReference("components.Button2");
	fontFamily: "Inconsolata";
}

You can choose to use my theme by simply putting in a Style tag:

  <!-- apply our theme -->
  <fx:Style source="blackglass.css"/>

Conclusion

Try out Catalyst. Flex 4 rocks.

CategoryFlex Comment(s)


[1] Normally, I would have used AS3 for this.
[2] Maybe, it is a beta thing?


Copyright © 2004-2011 Anirudh Sasikumar. All rights reserved.
Last Updated: January 16, 2012 12:24 PM