Flex Printing

7 12 2009

You’ve worked for months on your shiny new flex app. It has all the bells and whistles. Incredible data visualization that in just a few clicks delivers interactive graphs allowing the user to navigate to information they never thought possible. The customer is absolutely blown away. Then your phone rings a few days later. There is a problem, your flex app doesn’t print! “Print”, you say, “why on Earth would you want to do that?”

The customer now has a beautiful app that either prints out extremely pixelated and ugly or more often, not at all. And you are left scrambling trying to work around Flex’s Achilles heel, printing. Read the rest of this entry »

Advertisements




XPath style filtering in E4X

15 10 2009

One area of Flex/ActionScript that seems under documented is how to do XPath style filtering with E4X. It works pretty much the same way. But with a syntax is just different enough that I’m left looking back thru my code every time I need to do it. Now I’ll look here instead 🙂


-- E4X
root.foo.(@attribute == 'bar').baz
-- XPath
/root/foo[@attribute == 'bar']/baz





Flex Gantt Charts

31 07 2009

There are a few examples of Gantt charts in Flex out there. And Doug McCune has a pretty good article on the topic.

But none of the existing implementations really met my needs (I’m picky). Most seemed more like bar charts than gantt charts and I wanted something specifically time based. So I spent the afternoon creating my own.

My design goals were to have a component:

  • That could be used stand alone or as and itemRenderer in DataGrid
  • Could be used in an appointment scheduling app, so clicking on an event should fire an event that lets me know exactly what was clicked and clicking on the time line should let me know at exactly what time (on the timeline) the user clicked.
  • Provided the user with feedback about where they were on the timeline. So tick marks and tooltips were essential.
  • Could be used to display ranges from seconds to years.
  • Was configurable and stylable.

So here is what I came up with. I created an actionscript class that extended the UIComponent class and implemented IListItemRenderer and IDataRenderer (so it could be used as an item renderer).

The component creates two layers then. The _bg layer for all of the tick marks and the _fg layer to display all of the events.  Drawing the _fg layer, adding the rectangles for each event and adding tooltips and click event handlers to each was pretty straight forward and you can check it out in the source code. I did want to show what I did when creating the background layer.

private function drawBackground():void
{
  _bg.graphics.clear();
  while(_bg.numChildren > 0) {
    _bg.removeChildAt(0);
  }
  if(_startDt != null && _endDt != null) {
    var range:Number = (_endDt.time - _startDt.time) / 1000;
    var tickSize:Number = calcTickSize(range);
    var tickCnt:int = width / tickSize;
    var dt:Date;
    var tickColor:Number = getStyle('tickColor');
    var tickAlpha:Number = getStyle('tickAlpha');

    _bg.graphics.lineStyle(1, tickColor, tickAlpha);

    var tooltipBox:UIComponent = new UIComponent();
    tooltipBox.graphics.beginFill(0xFFFFFF, 0.0); //clear
    tooltipBox.graphics.drawRect(this.width - (tickSize / 4),0, tickSize / 4, this.height);
    tooltipBox.toolTip = DateUtils.format(_endDt, _endpointFmt);
    tooltipBox.graphics.endFill();
    _bg.addChild(tooltipBox);

    for( var i:int=0; i<tickCnt; i++ ) {
      tooltipBox = new UIComponent();
      tooltipBox.graphics.beginFill(0xFFFFFF, 0.0); //clear
      tooltipBox.graphics.drawRect(tickSize * i - tickSize / 4, 0, tickSize / 2, this.height);
      dt = new Date(_startDt.time + (_secondsPerTick * i * 1000));
      tooltipBox.toolTip = (i==0) ? DateUtils.format(dt, _endpointFmt)
        : DateUtils.format(dt, _tickFmt);
      tooltipBox.graphics.endFill();
    if (i > 0) {
      // draw tick mark
      tooltipBox.graphics.lineStyle(1, tickColor, tickAlpha);
      tooltipBox.graphics.moveTo(tickSize * i, 0);
      tooltipBox.graphics.lineTo(tickSize * i, height);
    }
    _bg.addChild(tooltipBox);
  }
}
}

So lets step through it. The first thing we have to do is clear out anything that is already in the bg layer so we don’t draw over top of it. Next we get the range (in seconds) of our timeline, and call the calcTickSize() function. This just analyzes the range and decides how far apart the tick marks should be and the display format for the tooltip display.

After when know how many tick marks we need, we loop through adding a tick mark surounded by a  transparent box so when the user mouses over a tick mark they can see what time it represents. And a clear box at each end of the chart displays a detailed date/time for that end.


Gantt Charts in Adobe Flex

Gantt Charts in Adobe Flex

Click image to load Flex app.





Adobe Flex TimeInput Control

19 06 2009

So in a previous article I explained why working with time is difficult in Flex (but you probably already know that if you Googled your way here), and we created a helper class to make working with dates and times in Flex easier.

Now we will make a custom input control so time input and validation can be as slick as date entry. To do this we will extend the TextInput class to do the following:

  • restrict the input so that it will only accept characters found in time strings
  • add a value_commit handler so that it parses the text input after it has been changed
  • add a key_down handler so that we can increment and decrement the time when the directional arrows are pressed
  • format the time once it has been parsed
  • behave properly when used as an itemRenderer or itemEditor
Custom TimeInput control

Custom TimeInput control

Click on image to launch the Flex application. View source is enabled.





Web Developer’s Date/Time Cheatsheet

2 06 2009

If you work in more than one database or  programming language, it is almost impossible to keep all of the different date/time formats straight. As a developer, I found myself going back to the manuals for date/time formats more than anything else.

Here’s a web developer’s date/time cheatsheet. It covers the Oracle, Postgres, MySQL and MS SQL databases; and Java, PHP, Python, Ruby and Flex/ActionScript3 programming languages.

download





XML in Postgres – The Game Changer

1 06 2009

About the time that Postgres 8.3 came out, Adobe decided to open-source something called Flex. Up to that point, I had a non-committal relationship with Postgres. Meaning that I didn’t have a real strong preference between Postgres vs MySQL, and I didn’t participate in either community. I had heard some really good things about Adobe Flex, but I never had much interest in it until it was open-sourced. But when the two came together… it was like the Reese’s Penut Butter Cup commercials from the 80’s or 90’s. Or the KY his and her’s commercials of late… but maybe not quite that good 🙂 Read the rest of this entry »





Parsing dates and times in Flex / AS3

28 05 2009

I’m in the process of writing my fourth employee time tracking and scheduling system.  And while the business logic of this app is more complicated than ever before, coding the client side has never been so easy. Because this time I am coding the client in Flex.

I am an absolute convert to Adobe Flex. I never again want to code a user interface only to find out that this Javascript or that CSS is totally broken on a particular browser/platform (typically IE).  I’m convinced that if you are going to write a GUI application, there is no better tool anywhere than Adobe Flex/Air.

And yet even on Flex, working with date/time is problematic. Flex gives us a nice DateField control, has a nice DateFormatter class and does a reasonable job parsing dates. But if you want to work with time instead of dates, you are on your own. Well you used to be.  Here’s how to make it easy. Read the rest of this entry »