Wednesday, July 29, 2009

Extending Flex buttons... can you help me?

**Edit - this has been solved thanks to the help of Marcus: view the entry here**

I never claimed to be a Flex expert... and this only proves why.

Back story: I am trying to extend a Flex button to be something I'm calling a legend button. Essentially it is a button that also doubles as a legend. When the toggle is on that line is on the chart, when the toggle is off that line is removed from the chart. The button 'color' and the line color have to match.

What I am currently trying to do: I am trying to extend the button component and add a Box (10pxx10px). What is happening however, is the box is showing up underneath the button itself, so when the button alpha is 100% (i.e. when toggle is on) you can't see the box.

Here's the code:

package com.view
{
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import flash.text.TextLineMetrics;

import mx.containers.Box;
import mx.controls.Button;
import mx.core.UITextField;

public class LegendButton extends Button
{
[Bindable] public var legendColor:uint;
private var legendIcon:Box;

public function LegendButton()
{
super();
}

override protected function createChildren():void
{
if (!legendIcon)
{
legendIcon = new Box;
legendIcon.styleName = this;
legendIcon.setStyle('backgroundColor',legendColor);
legendIcon.width = 10;
legendIcon.height = 10;
addChild(legendIcon);
}

if (!textField)
{
textField = new UITextField();
textField.styleName = this;
addChild(flash.display.DisplayObject(textField));
}

super.createChildren();
}

protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
this.setStyle('paddingLeft',15);
this.setStyle('paddingRight',5);

legendIcon.move(5,5);

super.updateDisplayList(unscaledWidth,unscaledHeight);
}

override protected function measure():void
{
if (!isNaN(explicitWidth))
{
var w:Number = explicitWidth;
w -= getStyle('horizontalGap') + getStyle('paddingLeft') + getStyle('paddingRight');
textField.width = w;
}
super.measure();
}

override public function measureText(s:String):TextLineMetrics
{
textField.text = s;
var lineMetrics:TextLineMetrics = textField.getLineMetrics(0);
lineMetrics.width = textField.textWidth + 4;
lineMetrics.height = textField.textHeight + 4;
return lineMetrics;
}

}
}


Here's what they look like. Sad isn't it? :(

Tuesday, July 28, 2009

Flex line charts: baseAtZero

baseAtZero... this little property helped save me a lot of code. The client didn't like that the charts were sometimes so squished because the charts always started at 0 but none of the data was close to the zero range. I was going to loop through the data in each chart and set the min and max... but then I discovered this property.


<mx:verticalAxis>
<mx:LinearAxis id="vaxis" baseAtZero="false"/>
</mx:verticalAxis>


All it does basically is stop the chart from forcing the vertical axis start at 0, and therefore starts it based on the data.

Wednesday, July 22, 2009

Flex slidding panels showing off screen

So in the current project I'm working on I have a lot of Panels that slide on and off the screen. The problem I keep having is the Panels are still visible when their x value is set to the width of the container (meaning they are outside of the container but you can still see the edge of the Panel). I was messing around with clip content, etc, and nothing seemed to be working. Eventually I did the following combination and it worked (but still doesn't make much sense to me).

Set the container holding the sliding Panel to includeInLayout = false
Set the sliding panel to clipContent = true (and includeInLayout = true - the default)

Weird, but it works.

Tuesday, July 7, 2009

Adobe Contribute and CSS layouts

One of the charity sites that I designed and built (using divs with CSS layout) want to use Adobe Contribute to manage the site, since they have high volunteer turnover, and it's too much to try to train each one in HTML. Makes total sense right?

So the manager tells me that the menu (which is a absolute positioned div with the highest z-index) is covering up the editable content region.

I've never used Contribute myself, so I downloaded the trial so I could see what she was talking about.

Now in my head I'm thinking, well the menu isn't editable so it shouldn't be showing up in Contribute edit mode at all... but it does... and it does indeed overlap the editable region, which makes it pretty damn difficult to edit! Completely annoying.

But wait... there is more frustration to come.

I start googling, and at first I can't find anything! Eventually I start finding questions on forums like mine, but unfortunitely no one has answered them.

I finally found an ok solution. Hide the CSS in edit/design mode. You can do this through Dreamweaver. The catch? You have to do this step to every html file you have that you want to be able to edit with Contribute.


  1. Open your site in Dreamweaver.

  2. Open one of the html files you want to be able to edit in Contribute.

  3. In the CSS panel menu choose "Design-time..."


  4. Add your stylesheet to the "Hide at Design Time" box.


  5. Save your html file (you'll have to do a small edit like add a space or something to enable save)



In Dreamweaver you can hide the AP "layer", if only it were that easy with Contribute.

If it just looks totally awful, you can create a CSS file that you only show at design time. Just follow the steps above, but add it to the show only at design time box.

If anyone has found a better solution I'd love to know! Please comment here.

Thursday, July 2, 2009

Flex Datagrids and datatips

So you think when you set the showDataTips property on the DataGridColumn to true that that will make the datatip show... WRONG... you also need to set the dataTipField property to your dataField.

So simple... yet this took me half an hour to figure out.