What's My Title Today?

2011-09-28T13:02:00.001-03:00

Great example on creating and positioning TitleWindows.

http://www.mxml.it/index.php/2008/06/18/positioning-popups/

Paper Prototyping

2011-06-23T09:40:00.003-03:00

I've been pretty far down in the trenches the last couple months, hence my lack of posting. It's good to be busy, and working on what I love the most, visual designs.

A fun thing happened while on the client site last week, and I thought I'd quickly post about it.

I was there to present my visual designs and get feedback before the requirements doc was finalized. I had suggested to the client previously, with the recommendation of my company's UX Director, that I try some paper prototyping with some real users. They liked the idea, but didn't really speak of it much since. So there I was, on the client site, working away at some suggested changes made by the BAs in our morning session, and here comes a BA with a user. "Do you want to try some paper prototyping?" I was a little stunned, but luckily had my visuals previously printed (all be it in black and white). I took the user into a meeting room. Now this isn't something I had ever done before, I read a couple articles, looked at some examples online, but that was the extent of my knowledge. What the heck, right? No better way to learn. Jump in the deep end.

By the end I had some great feedback and a bunch of marked up papers all over the place in no logical order. You know what? It was fun. It was great to have a one-on-one session with a user. There was no one else there to basis him, or explain how something should work, or guide him into the right place. It was just me, my mock ups, and the user. That's real research.

I got to do it once more while there, and it looks like I will be making a trip back specifically for the purpose of paper prototyping.

So I've now convinced my client to let me do contextual research and paper prototyping. Hooray for advocating the value of user experience research!

Default Flex DateChooser to tomorrow

2010-11-23T11:31:00.006-04:00

I have a DateChooser control and I was trying to default it to have tomorrow's date selected. This is actually really easy to do, but it took me a fair amount of time to figure it out, so I thought I'd post this just in case anyone else has some trouble.

Create a variable for today's date:
[Bindable] private var today:Date = new Date();

Then set the selected date of the DateChooser. You may also want to set showToday to false so that today's date isn't highlighted.

<mx:DateChooser selectedDate="{new Date(today.fullYear,today.month,today.date+1)}" showToday="false"/>

The selectedDate property only understands straight dates with no time, which is why I had to assign it this way. If you're at the end of the month/year Flex is smart enough to know that date + 1 should take you to the next month/year.

Here is a sample with view source enabled.

Word wrap in AdvancedDataGrid

2010-11-19T12:20:00.004-04:00

So getting a column field to wrap in an AdvancedDataGrid isn't as easy as just setting the "wordWrap" property to true. Maybe it should be, but it isn't.

First thing's first. Do you have an itemRenderer on the column you're trying to wrap. If the answer is yes you have to make sure that itemRenderer is based on a wrappable component. For argument's sake, lets say you have a Label itemRenderer, well you're going to have to change that to be based on Text, and you're going to have to give it a width to give it the capability to wrap (percentWidth = 100 works nicely).

Then set your wrap-able column to wordWrap = true.

Finally set your AdvancedDataGrid to have property variableRowHeight = true.

Here is a link to an example with the view source enabled.

My first experience doing contextual research

2010-11-09T15:24:00.002-04:00

For some back story – I’ve been on this project for 2 years now. I’ve helped design and build two dashboards and have never had the opportunity to meet or talk with a user until now and I am no expert in the client's line of business.

I met with 7 users from 3 different user groups; 1 group per day; 30-45 minutes with each user, followed by an hour group session discussing the observations. A lot of them have similar issues. Issues within groups of users seem to be pretty much the same.

I found myself getting frustrated and having to consciously calm myself down while meeting with the users. Seeing the roundabout way some of them had to work just to use the system drove me crazy. If I had only been involved from the beginning in this capacity, and with the requirements gathering for each release, these poor users wouldn't have to deal with a system that really doesn't meet their needs. But hey, better late than never I suppose. That is the story of my life... the story of UX.

I had some follow up meetings with some managers and I could feel the overall manager not taking all of the feedback seriously. His job is to get things done quickly and at the lowest cost... and lets face it, UX takes time and money, and when done in the beginning will save so much time and money in the end. What I basically want is a redesign of a two year old system. That's a hard sell. But, being an outside consultant, I can push for my cause a little more than the average employee. That is why they hire us, after all.

I typed up all my observations and recommendations and sent them off to my manager. I broke them out into three categories; 1 – quick fixes, 2 – can be done leaving the main system as is, 3 – needing a total redesign.

Our plan of attack is to pull out the major changes and estimate how much time each one will save each user, and then do the math. Time equals money, and if the changes save enough money, we can go after some funding to make the system better. If nothing else, we can at least implement the quick fixes over the next couple months.

All in all, it was a very positive experience for me. I thought I would have been more uncomfortable with it all, being that I’ve never done contextual research before, but it was all very natural once I got there and was sitting with the users.

Spark Icon button

2010-06-30T14:39:00.002-03:00

So the Spark button doesn't have the icon property... which to be honest annoys me a little, but I do understand that they want the skin to be separate from the code.

Anyway, I made an icon button based on some other examples I've looked over.

To see the working example with view source enabled click here.

Spark ComboBox vs DropDownList

2010-06-30T08:25:00.004-03:00

I discovered yesterday that with the new Spark components there was no "editable" property on the ComboBox component.

I realized that the Spark ComboBox is always editable by default, and with no way to turn that off I was confused. Did a little research and found that to have what would have been ComboBox editable="false" in Halo is now simply DropDownList. Two different components.

I think it makes sense to have these separate.

Spark image button

2010-06-22T09:26:00.014-03:00

So skinning spark buttons with images isn't the same as skinning halo (mx) buttons with images.

It's a 3 part process.

components.ImageButton.as


package components
{
 import spark.components.Button;
 
 [Style(name="imageSkin",type="*")]
 [Style(name="imageSkinDisabled",type="*")]
 [Style(name="imageSkinDown",type="*")]
 [Style(name="imageSkinOver",type="*")]
 
 public class ImageButton extends Button
 {
  public function ImageButton()
  {
   super();
  }
 }
}

Script block


[Embed('assets/images/btnGoUp.png')]
[Bindable]
public var btnGo:Class;
  
[Embed('assets/images/btnGoOver.png')]
[Bindable]
public var btnGoOver:Class;
  
[Embed('assets/images/btnGoDisabled.png')]
[Bindable]
public var btnGoDisabled:Class;

MXML block


<components:ImageButton buttonMode="true"
   imageSkin="{btnGo}" imageSkinDisabled="{btnGoDisabled}"
   imageSkinDown="{btnGoOver}" imageSkinOver="{btnGoOver}"
   skinClass="assets.skins.ImageButtonSkin"/>

Here's a sample with the view source enabled.

What is a UX specialist?

2010-06-15T21:16:00.004-03:00

A UX specialist is the best thing your company never knew it needed.

Remember the day you got your first microwave? Your first cell phone? Your first smart phone? Your first DVR? Remember life before these devices? Can you imagine going back to that? What these devices do for your life, is what a UX specialist can do for your development company.

A UX specialist can make things run more smoothly. A UX specialist will always make a product better, and will make a client happier. They may need some time up front, kind of like how you need to spend time learning and setting up your smart phone when you first get it, but more often than not, the total time spent on the project will be less because all those bumps and kinks get sorted out right up front. Because of this, a UX specialist will make your other team members happier because their job will be easier and there will be less rework.

If you're running your TV without a DVR, you're missing out. If your development company is operating without a UX specialist, they're missing out. You may think everything is fine the way it is, but once you have UX, you never go back.

iPhone & iPad design PS goodies

2010-06-09T16:01:00.004-03:00

I have to very quickly come up with a design for an existing application for the iPad and the iPhone. No real time to learn some cool new tools (unfortunately). I am most comfortable in Photoshop so that's what I went hunting for for tools...

These are just awesome and so helpful...

iPhone: http://www.teehanlax.com/blog/2009/06/18/iphone-gui-psd-30/

iPad: http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/

Flex 3 & Flex 4 Frankenstein

2010-05-26T15:02:00.002-03:00

So we have a large dashboard application built in Flex 3.5 SDK. Anyway, making it work with the Flex 4 SDK was annoying and took nearly a week.

So the client doesn't want to give me the time to rewrite the UI in the new spark stuff BUT instead slowly convert it over time. So I started to try that... doesn't seem possible. Spark components don't work with the "Use Flex 3 compatibility mode" box checked. When I uncheck that box my whole project blows up and looks totally messed up.

So my ultimate conclusion is that a Flex 3 Flex 4 Frankenstein is not really possible.

Flex 4 SDK - backwards compatible?

2010-05-17T15:57:00.003-03:00

So for the last few weeks I have been trying to get our current Flex 3.5 SDK to the new Flex 4 SDK. Wow. Backwards compatible? Not really.

After much annoyance and code changes, I finally got it working and running without run time errors. Now there are lots of things wrong visually mostly with the fonts.

What I am discovering is that the CSS inheritance seems to be lost. For example, if I have a VBox that has its color style set to white, its children are not white. Not sure what is up with that. So in my Application style tag I had the font family set... but it's not picking up on all the components inside the application, which means there are lots of problems with labels being too large and not fitting properly.

So now I am messing with the CSS files and the component files.

So far my take on the backwards compatibility? It's barely there. I mean everything functions okay (once you get all the initial errors and warnings cleaned up) but there is going to be a lot of work visually.

Looking for a website?

2010-05-12T14:35:00.003-03:00

I'm looking for some freelance work if anyone knows of someone needing a website.

I'm done my latest side project and usually like to have one on the go at a time.

You can see samples of my work here: angelaportfolio.com

East Coast German Shepherd Rescue

2010-05-07T09:00:00.004-03:00

Yesterday I put up the newly redesigned and rebuilt East Coast German Shepherd Rescue website.

We adopted our German Shepherd, Keely, from this rescue. Since then I have chatted off and on with the founder of the rescue, and have gained the up-most respect for her and what she does. I wanted to help, but wasn't sure how. One day she mentioned how difficult it has been to get updates to her website, and new dogs that come into her care can't get adopted if no one knows about them.

And so I began a mission to design a better website.

How it is currently is only the first round. I need to learn more about PHP and different content management systems. The ultimate goal is to enable her the ability to update the website easily herself. I also have several ideas to make the site better, more interesting, and to get more funding.

Here's a link to the site (iteration 1)
http://www.ecgsrescue.com

Learning Flex 4

2010-05-04T11:21:00.004-03:00

I am watching a few videos on Flash Builder 4 (or Flex 4) from Adobe's site.

http://www.adobe.com/devnet/flex/videotraining/

This is my first taste of the Spark components, and let me tell you, they are so much better and easier to customize. They haven't transfered all the components over to spark yet, so we'll still have to use some MX components, but they have done a lot of them already, and are continuing to work to get them all converted.

I haven't tried to actually do any real work with this yet, but so far it has my vote.

VSS plugin for Flash Builder 4

2010-05-04T09:40:00.003-03:00

So the new "Flex Builder", now called Flash Builder, is out. I have recently installed it... all was fine until I tried to use the VSS plugin. It wasn't being recgonized.

Now I know you need the Java Development Tools plugin for it to work... but I couldn't find that either. They really changed the whole install new features thing in Flash Builder 4.

So I hunted on Google for a while and found my solution, install it manually:

http://renaun.com/blog/2010/03/31/416/

Thanks Renaun!!

PHP photo viewer script

2010-04-23T15:59:00.001-03:00

Very cool and very simple PHP/Javascript photo viewer script.

http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm

Perfect for handing off to a client that doesn't know how to code html but that is computer savvy enough to drop images in a ftp directory.

Dreamweaver

2010-04-23T14:33:00.003-03:00

So I never really truly appreciated Dreamweaver until recently.

I had never really used the ftp function of Dreamweaver (insane I know). I'd use it to write html and css code, then I'd just put the updated files on the server using a generic ftp client.

Now that I am maintaining several sites that got tiring, so I looked into and started using the built in Dreamweaver ftp functionality. What a difference! Just a right click away from putting changes up on the server. It's quite wonderful actually.

I always knew it existed, I just never bothered to use it.

Just goes to show... just because you do things a certain way and it works fine, doesn't mean it's not worth learning a new way.

Simplistic web design

2010-04-06T19:42:00.002-03:00

So I am kind of digging this whole move toward more simplistic, minimalistic web (and other app) design. I like the feel of space. I like that there isn't lots of distracting chrome and boarders. It's all about the content, it's all about getting what you were trying to get done, and that's the whole point isn't it?

Now don't get me wrong, I love color and added interest. - I am a bit of a color nut to be honest. Whenever I check out http://colorschemedesigner.com/ (aka my most favorite place to get a new color scheme) I always pick the tetrad first. - I just think there are better ways of adding those things than a lot of what we have been doing. Clean and simple. That's the new way to go.

http://sixrevisions.com/design-showcase-inspiration/40-beautiful-examples-of-minimalism-in-web-design/

Publishing this blog on another website

2010-03-03T09:52:00.003-04:00

So I am working on a new portfolio site and I wanted this blog to be featured on that site. I didn't want to show a link or just a feed digest, I wanted the entries in FULL shown on the website. Well... little did I know it was so easy. I spent hours looking for a solution that was built right into something I already subscribed to! Feedburner that is.

I found the info I was looking for here:
http://www.tipandtrick.net/2008/display-and-show-feed-on-html-website-with-feedburner-buzzboost/

You can subscribe to Feedburner very easily if you already have a Google account. Then you can burn the feed by just putting in your feed address.

Then click the Publicize tab. Click BuzzBoost. Fill out the form and choose FULL HTML. Once you're done it will give you a script to put into your website. So easy and so very awesome. You can also style it to look however you like using CSS. Perfect.

Using Flex's default cursors

2010-01-28T13:22:00.008-04:00

So I made my own component, and I wanted the default move cursor that Flex has built in to appear on the mouse over of my component. I thought this would be an easy task - oh how wrong I was.

An hour of researching later I was no further ahead, besides discovering that mx.skins.cursor.moveCursor was in fact a style and the image was in Assets.css (from this helpful webpage here: http://www.loscavio.com/downloads/blog/flex3_css_list/flex3_css_list.htm). It occurred to me that I know how to get a value out of a CSS file, and therein lied the solution.

[Bindable]
public var myCursor:Class;

//Called on creation complete
public function complete():void
{
myCursor = mx.styles.StyleManager.getStyleDeclaration('DragManager').getStyle('moveCursor');
}

//Called on mouseover of the component
protected function mouseOverWindow(evt:MouseEvent):void
{
CursorManager.setCursor(myCursor);
}

//Called on mouseout of the component
protected function mouseOutWindow(evt:MouseEvent):void
{
CursorManager.removeCursor(CursorManager.currentCursorID);
}

Getting a value out of CSS file

2010-01-28T11:47:00.006-04:00

I keep forgetting how to do this:

mx.styles.StyleManager.getStyleDeclaration('.styleclassname').getStyle('style')

This gets a value out of the CSS. So for example if you had a .lineStroke style with a style property of color and you wanted to use that for a stroke declared in MXML you could do this:

<mx:Stroke id="myStroke"
weight="1" color="{mx.styles.StyleManager.getStyleDeclaration('.lineStroke').getStyle('color')}"/>

Useful UX article

2009-09-25T10:04:00.001-03:00

Excellent article:
10 Useful Usability Findings and Guidelines
http://www.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/

Thanks @jeswinlopez

Flex Legend Button: Solved!

2009-08-27T09:38:00.011-03:00

Thanks to Marcus and his amazing code I can share with you a soultion for my legend button problem.

This is more than I asked for. Make sure if you use this, you credit and thank Marcus for his amazing work!

Sample with view source enabled

Flex DataGrid sorts

2009-08-26T11:39:00.002-03:00

Sometimes your data is in a specific order, but not ordered on anything you can really sort by via a data grid. So sometimes you apply a sort with the data grid (or advanced data grid), which is great and everything, but what do you do when you want to reset the data back to the original order?

this.mydatagrid.dataProvider.sort = null;
this.mydatagrid.dataProvider.refresh();

Done!

Flex Image Map

2009-08-24T10:54:00.003-03:00

I thought since I mentioned it way back when in a tweet, I should post the code for my selectable map component.

I thought this was going to be super tough, but once I found the ImageMap component in flexlib it wasn't bad at all.

Here is the example with view source enabled.

This example also shows how to create a custom event, which I also mentioned in a previous post.

Flex adding an event to call to the parent

2009-08-12T14:57:00.010-03:00

So I always have this problem where I'll have a component inside a component, and the parent component needs to do something based on some sort of trigger from the inside component. Using Parent or Application is a big no no, or so my Architect friend tells me ;). They way to do this is create an Event on the inside component. This is pretty easy to do, but I always seem to miss a step and get all frustrated and not understand why it's not working. And in these hot lazy days of summer, it's really not a good motivator. :D

So here are the steps so I can look this up if I forget. I am just going to use a button click as an example, if you need something more intense you'll need to make a custom event.

So... ComponentB is inside ComponentA.

In the actionscript of ComponentB do:

Just below the imports - [Event (name="myEvent", type="flash.events.Event")]

Create a function that dispatches that event:
protected function myFunction():void
{
dispatchEvent(new Event('myEvent'));
}

In the MXML of ComponetB call the function:

<Button id="myButton" click="myFunction()"/>

In the actionscript of ComponentA create a fucntion for what you want the trigger to do:
protected function buttonBClick():void
{
Alert.show("Button in the Panel has been clicked");
}

In the MXML of CompoentA, where you add ComponentB call the event you made:
<ComponentB id="componentB"
myEvent="buttonBClick()"/>

Volia!

Confused? Yeah me too. Here's an example.

Extending Flex buttons... can you help me?

2009-07-29T10:30:00.010-03:00

**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? :(

Flex line charts: baseAtZero

2009-07-28T12:03:00.004-03:00

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.

Flex slidding panels showing off screen

2009-07-22T11:07:00.003-03:00

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.

Adobe Contribute and CSS layouts

2009-07-07T15:11:00.007-03:00

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.

Open your site in Dreamweaver.

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

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

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

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.

Flex Datagrids and datatips

2009-07-02T11:44:00.004-03:00

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.

Flex AdvancedDataGrid Header bug?

2009-06-11T13:22:00.004-03:00

I was building an AdvancedDataGrid today, and the 2nd header was supposed to be a date. Easy enough right? Not so much...

I put it as a String, as a Date, as a formatted Date... and every time the last character was begging cut off. No reason why. I tried putting the Date in a String variable... still cut the last character off... but ONLY when it was in the format 5/11/09 or similar... any other string worked fine.

I eventually had to use the headerRenderer... all the renderer (extends Text) does is override the updateDisplayList with this.text = data.headerText.toString();. Works like a charm. What a messed up bug...

Flex - Hide and show tab in tabnavigator

2009-06-09T14:35:00.006-03:00

I'm not sure why I didn't think of this myself...

http://techmytongue.blogspot.com/2008/11/hide-show-tab-on-tab-navigator.html

This becomes very important if you want to hide tabs in a tab navigator but you don't want to remove them from the interface completely. In my situation I wanted to hide tabs in a tab navigator based on what the user had selected in a data grid. If the user selected another row in the grid I may need to show a tab that I had previously hidden.

tabNav.getTabAt(1).visible = false;

Now to elaborate on Venkatesh's post...

To remove the tab stop, also disable it:
tabNav.getTabAt(1).enabled = false;

Now if you are hiding a tab before another tab (that is not hidden) there will be an empty gap where your tab should be. To fix this:
tabNav.getTabAt(1).includeInLayout = false;

And one final thing. If you're hiding your default tab (i.e. tab index 0) you will also need to set the selected index of the tabNav or else you will still see the contents of the default tab.
tabNav.selectedIndex = 2; //If you were hiding the first 2 tabs (tab 0 and tab 1)

Here is a code snip. In this example there are 3 tabs. Based on the user selection you hide/show the first 2 tabs.


if ( userSelection == "showTabs" )
{          
   tabNav.getTabAt(0).visible = true;
   tabNav.getTabAt(1).visible = true;
   tabNav.getTabAt(0).enabled = true;
   tabNav.getTabAt(1).enabled = true;
   tabNav.getTabAt(0).includeInLayout = true;
   tabNav.getTabAt(1).includeInLayout = true;
   tabNav.selectedIndex = 0;
}
else if ( userSelection == "hideTabs" )
{
   tabNav.getTabAt(0).visible = false;
   tabNav.getTabAt(1).visible = false;
   tabNav.getTabAt(0).enabled = false;
   tabNav.getTabAt(1).enabled = false;
   tabNav.getTabAt(0).includeInLayout = false;
   tabNav.getTabAt(1).includeInLayout = false;
   tabNav.selectedIndex = 2;
}

Digital Imaging

2009-06-03T18:42:00.007-03:00

What I learned so far in my Digital Imaging course (besides a bunch of theory and PhotoShop shortcuts).

Before

After

This took me maybe a minute and a half to do. I am guessing that after doing it for a while and getting a better eye I could do something like this even faster and make it look even better.

HTML - rounded div corners with CSS (no images)

2009-06-03T07:39:00.006-03:00

I am doing an html website and the design I came up with has one rounded corner. I come from way back when we used to use tables and use images to get rounded corners. Although I haven't worked much in HTML in a while, I know the norm now is to use divs instead of tables... so I did some digging and found this:

http://www.html.it/articoli/nifty/index.html

Using stripes with different margins to get a rounded corner look. So clever! It makes total sense, but I would have never thought to do this. To get my ONE rounded corner I had to make some slight modifications. A code snip is below.



<style type="text/css"> 
   body{background-color: #FFF;
   margin-right:0; padding-right:0;
   margin-left:0; padding-left:0;
     font: 100.01% Verdana,Arial,sans-serif}
   p{margin: 0 10px}
   div#nifty{ margin-left:300px; margin-top:35px; background: #FF0000;}
   b.rtop, b.rbottom{display:block;background: #FFF}
   b.rtop b, b.rbottom b{display:block;height: 1px;
     overflow: hidden; background: #FF0000}
   b.r1{margin-left: 5px; margin-top: 0;}
   b.r2{margin-left: 3px; margin-top: 0;}
   b.r3{margin-left: 2px; margin-top: 0;}
   b.rtop b.r4, b.rbottom b.r4{margin-top:0; margin-left:1px; height:2px}
</style> 
</head> 

<body> 

<div id="nifty"> 
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> 

<div style="height:200px"/>
 
</div> 
  
</body>

Flex Column Chart

2009-04-21T11:20:00.004-03:00

I need a Column chart that would get both negative and positive numbers, easy enough. The catch is that the negative "columns" are to be red and the positive "columns" are to be green.

Well it wasn't too much fuss to get this figured out, but I thought I would post my code in case it would help anyone else out. Who knew that ColumnSeries had itemRenderers!


<mx:ColumnSeries 
   xField="Month" 
   yField="Profit" 
   displayName="Profit"
   itemRenderer="ColorNegativeBarRenderer"
/>

Here's a sample with view source enabled so you can see the item renderer code.

Here's where I found the info I needed:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=2021

Removing column header separator lines (flex)

2009-04-02T15:37:00.009-03:00

This took me a while to figure out so I thought I would post it on here just in case someone else is having the same problem.

I have an Advanced Data Grid, but I don't want any separator lines between the headers. There are 2 styles and 1 property you need to set in an AdvancedDataGrid to make this happen.

The styles are:
header-separator-skin
header-sort-separator-skin

The property is:
sortExpertMode

I figured setting the styles to "null" would work, but it doesn't.

Here is what you need to do:


headerSortSeparatorSkin="mx.skins.ProgrammaticSkin"
headerSeparatorSkin="mx.skins.ProgrammaticSkin"
sortExpertMode="true"

Or if you'd rather set the styles in CSS:


header-separator-skin: ClassReference("mx.skins.ProgrammaticSkin");
header-sort-separator-skin: ClassReference("mx.skins.ProgrammaticSkin");

Sample with source

Thanks to http://theflexguy.com/index.php?option=com_idoblog&task=viewpost&id=104&Itemid=54 for your post on this!

Sixth Sense

2009-03-20T10:10:00.000-03:00

Unveiling the "Sixth Sense"

http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html

Very very cool stuff.

Flex TabNavigator - tab click event?

2009-03-10T09:55:00.009-03:00

So there doesn't seem to be any item click or tab click event on the tab navigator in Flex. I find this sort of annoying, I mean surely this would be useful and should be included? When searching all I could find was people saying to either use the change event on the tab navigator, (which didn't help me because I wanted my method to run even if you clicked on the currently selected tab) or to use a tab bar instead (which also didn't help me because I am using the SuperTabNavigator from flexlib).

What I am doing is basically maximizing the tab when it is clicked, and minimizing it if it is clicked again.

I found a solution.
http://www.actionscript.org/forums/showthread.php3?t=135539 (post by stburns).

You basically get the tab's button. It sounds weird, here's the code to how it works.


private function creationComplete():void
   {
      for (var i:int=0; i<myTabNav.getChildren().length; i++)
      {
         var tab:Button = myTabNav.getTabAt(i);
         tab.addEventListener(FlexEvent.BUTTON_DOWN,tabClickHandler);
      }
   }

   private function tabClickHandler(event):void
   {
      if (myTabNav.height <= 25)
      {
         maxTabNav();
      } else {
         restoreTabNav();
      }
   }

I really need to start serving these little examples somewhere, it would be way easier for people to understand if they could see it working. I will, I promise. I have just finished the NS SPCA website redesign, so I should have some time.

Also, if you have any worthy causes that need help with their website let me know! I like to keep one charity project on the go.

**EDIT**
Here we go... my first sample with view source!
See sample (right click to view source)

Flex ToggleButtonBar with icons

2009-03-04T15:20:00.005-04:00

I had a toggle button bar but I wanted to have the buttons have labels AND icons. Knowing and working with Flex for a few years I thought "oh God, how hard is this going to be". It was actually very simple!


<mx:Array id="dp">
   <mx:Object label="One" icon="@Embed(source='assets/iconOne.png')"/>
   <mx:Object label="Two" icon="@Embed(source='assets/iconTwo.png')"/>
   <mx:Object label="Three" icon="@Embed(source='assets/iconThree.png')"/>
</mx:Array>

<mx:ToggleButtonBar id="myBar" dataProvider="{dp}"/>

Flex Checkbox as Grid item editor and renderer

2009-02-23T11:33:00.005-04:00

I have a dataGrid with a few columns that are simply check boxes. The kicker is I want the user to be able to edit those check boxes. So I knew the first step, using the renderer to have the data from the data provider show up in a check box, but I had to do some research for the editor part.

Here is the code snip of the DataGridColumn that should help you out if you were trying to do that same thing. (Warning: the textAlign property may only work in Flex 3).


<mx:DataGridColumn 
   dataField="isOpen"
   headerText="Open"
   editable="true"
   textAlign="center"
   itemEditor="mx.controls.CheckBox"
   editorDataField="selected"
   itemRenderer="mx.controls.CheckBox"/>

The important part to this that I was missing is:
editorDataField="selected"

This returns the value of the 'selected' property to the data provider, otherwise, by default it looks to return the "text" property, which a check box does not have.

Hope that helps someone.

Flex Advanced Data Grid remove item

2009-02-18T13:41:00.004-04:00

This shouldn't have taken me this long to figure this out... it is really quite simple actually.

I have an AdvancedDataGrid with a Hierarchical data provider. I have a delete button. The behavior I want is when the user clicks the delete button whatever row is highlighted (selected) in the ADG is removed.

To do this you need to use two methods.

The first is the removeChild method. Use this on the dataprovider of the ADG. It takes two arguments, the parent node, and the object to be removed. IF you're object is at the top mode, pass null for the parent node argument.

removeChild(parent,object)

The second is the getParentItem method. This method, you guessed it, returns the parent of the item passed to it.

getParentItem(Object);

Use them together to remove the selected item in your ADG.

myADG.dataProvider.removeChild( myADG.dataProvider.getParentItem(myADG.selectedItem), myADG.selectedItem );

Note, make sure your data provider is bound to the ADG.

Flex Advanced Data Grid - header properties to know

2009-02-09T10:38:00.005-04:00

I'm working with another advanced data grid. The grid has a lot of columns and fitting it on one screen without a horizontal scroll is proving challenging. Here are a couple properties regarding headers that I found helpful:

sortExpertMode - Setting this property to true removes that little vertical bar next to your header text. That frees up some horizontal space.

headerWordWrap - Setting this property to true allows multi-line headers. You will need to set the Column width to force the text to wrap, and you'll probably need to set the header height since the default isn't tall enough to fit two lines of text.

folderClosedIcon & folderOpenIcon - Setting these properties to {null} will remove the little folder icon next to the grouped item. You can also use these properties to show a custom icon.

No more ImageReady

2009-02-05T13:03:00.005-04:00

Does anyone else find it annoying that ImageReady was discontinued? Right now I am trying to edit an animated gif, which I would always do in ImageReady, but now that it's not there I'm not sure what to do. When I open an animated gif file Photoshop looses all the data so you can only see the first frame (even tho the animation timeline feature was added to Photoshop CS3??? Can I say... WTF?) The solution they're purposing is to open the gif in Fireworks. Oh, that's great... if you HAVE Fireworks. I have the Adobe Design Premium package - and that doesn't include Fireworks. UGH. I can open it in Flash, but the editing tools in Flash suck. Man oh man... sorry for the vent!

Edit...

My solution for this is as follows:

Open the animated gif in Flash. Then export the movie as MOV file. Open Photoshop CS3. Choose File - Import - Video Frames to Layers...

Window - Animation will show you the animation time line frames thingy.

Again, does anyone else find it ridiculous that a program that can create animated gifs can't open them??? Also sorry that my solution requires Flash.

Metro SPCA

2009-02-03T08:32:00.004-04:00

Thanks to the people at the SPCA for sending me a thank you gift. It feels great to be appreciated. The NS SPCA gave me an honorary membership, a tote bag, and a certificate of appreciation.

Here is what I did for them:
http://www.metro.spcans.ca/

Flex Advanced Data Grid collapses on refresh

2009-01-26T14:26:00.007-04:00

I was having this problem with my Advanced Data Grid. Every time the data refreshed the whole thing collapsed, which isn't a good thing when users have drilled down 3 levels.

I know this is probably a bad way of doing this, but it is the only way I could get to work. All the examples I've seen of this say to just assign the saved openNodes Object to the openNodes property, like this...


myOpenNodes = new Object();
myOpenNodes = IHierarchicalCollectionView(myADG.dataProvider).openNodes

//refresh here

IHierarchicalCollectionView(myADG.dataProvider).openNodes = myOpenNodes;

but that doesn't work!!

Here is what I did:

On the refresh method set the following variables (these variables need to be accessible from all methods inside the component, so put them in your model or make them global, whatever). These variables hold the state of the ADG before the refresh.


//Object holding all currently open nodes
myOpenNodes = new Object();
myOpenNodes = IHierarchicalCollectionView(myADG.dataProvider).openNodes

lastSelectedItem = myADG.selectedItem;

lastScrollPosition = myADG.verticalScrollPosition;

This method loops through every item in the advanced data grid up to the depth you provide (here it is to the depth of 4). Then any time it finds an object that is also in the myOpenNodes object it adds to to an array that then is assigned to the ADG.openNodes property. In this example the property of the grid item I am using to compare is called "Group".


private function selectLastADGItem(evt:Event):void
{
   //Array to assign to openNodes property
   var savedNodesArray:Array = [];
      
   for(var i:int=1; i<4; i++)
   {
      var dataCursor:IHierarchicalCollectionViewCursor = myADG.dataProvider.createCursor();
      
      while (dataCursor.current)
      {
      
  for each ( var item:Object in myOpenNodes )
  {
     //Check if current item is in openNodes object
            if ( item.Group == dataCursor.current.Group )
     {
        savedNodesArray.push(dataCursor.current);
     }
     
            //Check if current item is the last selected item
            if ( item.Group == dataCursor.current.Group )
     {
        myADG.selectedItem = dataCursor.current;
     }
  }
       
  dataCursor.moveNext();
      }

      myADG.validateNow();

      //Assign new array to openNodes property                    IHierarchicalCollectionView(myADG.dataProvider).openNodes = savedNodesArray;
     
      myADG.dataProvider.refresh();
   }
    
   //Move vertical scrollbar to last position
   myADG.verticalScrollPosition = lastScrollPosition;

}

flex: Dictionary Class

2009-01-21T15:00:00.009-04:00

Today I was introduced to Dictionaries. No, not the kind that you look up the definitions of words, the Flex code kind. The Class. I was having trouble with this Grid that I am working on, the labels are hard coded in the grid (because of formatting and ordering requirements), and there could be anywhere from 1 to 8 data values that go along with that label. At first I had ArrayCollections with a name property (the label) and the values of each data point, and then I was using methods with return values to get the value I wanted back by looping through the ArrayCollection and looking for the name. This seemed really heavy. I asked a co-worker who is more versed in ActionScript than I am, and he told me about dictionaries. With these you can look up an object via another object rather than an index.

Here are some code snips!

First declare your dictionary object!


private var myDict:Dictionary = new Dictionary();

Then, in a method or event somewhere, populate the Dictionary object with the data. (note - if you're populating the data in the same place, then do it on a preInitialize method).


private function preInit():void
{
   myDict["banana"] = {w:2.5, h:8, color:'yellow'};
   myDict["apple"] = {w:3.5, h:3.5, color:'red'};
   myDict["orange"] = {w:3, h:3, color:'orange'};
}

And to use it.


trace( myDict["apple"].color );
//This will output: red

Flex PieChart - fill colors

2009-01-20T14:00:00.009-04:00

I think this may only work in Flex 3.

My goal was to get the pie charts and line charts on this one view of the dashboard all to sync up color-wise. (The line chart stuff can be found in an earlier post.)

This will also only work if you know what you'll be getting back so far as items.

Lets say I know I will be getting back the following and I know that I want each slice to have a specific coordinating color.

Hearts - Red
Spades - Blue
Clovers - Green
Stars - Yellow

I would create something called a Fill Function. This is called in the PieSeries tag. Your fill function would consist of a switch statement checking the current item, and assigning its fill. In my example code below I use a Radial Gradient, but you can use SolidColor as well.


private function myFillFunction(item:ChartItem, index:Number):IFill
{
   var curItem:PieSeriesItem = PieSeriesItem(item);
   var fill:RadialGradient = new RadialGradient();
   var g1:GradientEntry = new GradientEntry();
   var g2:GradientEntry = new GradientEntry();
   g1.alpha = 1.0;
   g2.alpha = 1.0;

   switch ( curItem.item.yourProperty )
   {
      case "Hearts":
         //Choose uint color values eg: 0xFFFFFF for white etc.
         g1.color = LightRed;
         g2.color = DarkRed;
         break;
      case "Spades":
         g1.color = LightBlue;
         g2.color = DarkBlue;
         break;
      case "Clovers":
         g1.color = LightGreen;
         g2.color = DarkGreen;
         break;
      case "Stars":
         g1.color = LightYellow;
         g2.color = DarkYellow;
         break;
      default:
         g1.color = LightGray;
         g2.color = DarkGray;
         break;
   }
   
   fill.entries = [g1,g2];
   return fill;
}

...
<mx:PieSeries
   fillFunction="myFillFunction">
...

Flex Super Tab Navigator

2009-01-15T11:15:00.016-04:00

So I have this dashboard project I'm working on. What I am trying to do is have a TabNavigator that is about half the screen, but give it a maximize button, so that if clicked it fills the whole screen. Sounds easy enough, I've done it with a Panel, but unfortunately it seemed a little too tricky for me and my high design : moderate coding skills. So to Google I went.

You know what annoys me? People who blog about this kind of thing, show the awesome component they created, and don't share even a bit of code. That's what I found. Ugh. I did however discover that flexLib has something called a SuperTabNavigator. The SuperTabNavigator has a close button on each tab, so I figured, maybe I can extend this, better than starting from scratch. It wasn't even as difficult as extending it. It is actually pretty easy to customize. Yay for flexLib.

Here are some actual CODE EXAMPLES of what I did.

First you need the flexLib library. http://code.google.com/p/flexlib/downloads/list, add it by referencing the swc file in your project's library path, like you would Cairngorm.

First here's the SuperTabNavigator, which I placed inside a Canvas.


...
   <code:SuperTabNavigator id="mySuperTabNav"
      width="100%" height="50%"
      y={this.height/2}
      popUpButtonPolicy="off"
      closePolicy="close_always"
      tabClose="maxClick(event)">
      <mx:VBox label="testing"/>
   </code:SuperTabNavigator>
...

Here is the code for the maxClick method.


...
   private function maxClick(event:SuperTabEvent):void
   {
      //This stops the default close action from happening
      event.preventDefault();
      //Make sure the tab that was clicked is the one that is selected
      event.currentTarget.selectedIndex = event.tabIndex;
      
      //Put your max/restore tab code here! 
      /*example: mySuperTabNav.y = 0;
        mySuperTabNav.percentHeight = 100;*/
   }
...

Now... it wouldn't be very user friendly if clicking a close button maximizes the tab navigator, now would it? So through CSS we need to change the icon/button on the tab. Now this is kind of odd, I found this here: http://groups.google.com/group/flexlib/browse_thread/thread/d94196bc6510c49c

.
...
   SuperTabNavigator
   {
      tab-style-name: customTabMax;
   }
   .customTabMax
   {
      tab-close-button-style-name: maxIconButton;
   }
   .maxIconButton
   {
      upSkin:Embed(source="this/is/image/path.png");
      overSkin:Embed(source="this/is/image/path.png");
      downSkin:Embed(source="this/is/image/path.png");
      disabled-skin:Embed(source="this/is/image/path.png");
   }
...

Here's a link to the documentation:
http://flexlib.googlecode.com/svn/trunk/docs/flexlib/containers/SuperTabNavigator.html

See my Sample (right click to view source)

datatipfunction in a linechart

2009-01-05T13:47:00.004-04:00

To customize the datatip in a linechart in flex you need to use the datatipfunction property that refers to a function. This function must return a string and take a parameter of type HitData. To get the current VALUE of the line point you're mousing over you need to use LineSeriesItem(hitData.chartItem).yValue - I found this difficult to find out at first.

Here's an example:


private function lcDataTipFunction(hitData:HitData):String
{
   var s:String;
   s = LineSeries(hitData.element).displayName + "\n";
   s += LineSeriesItem(hitData.chartItem).yValue + "\n";
   s += hitData.item.Day + " at " + hitData.item.Time;
   return s;
}

Add and remove lineseries - Flex LineChart

2008-12-11T16:27:00.014-04:00

This took me some time to figure out so I thought I would post about it.

Main objective is to toggle on and off lineseries based on user input. Usually this would mean editing the dataprovider, tricky thing here is that I need the color of each line to always be the same based on data, so instead I leave the dataprovider alone and actually add and remove LineSeries to/from the LineChart. This probably isn't the best way to do this, but hey, it works, and it may help someone else out.

Here we go...

First lets start with the MXML:
Here I have a Panel with a LineChart and a Legend inside it, as well as 3 Toggle Buttons. You will notice that there are no series inside the LineChart.


<mx:Panel title="LineChart Example" height="500" width="100%" layout="vertical">
        
<mx:HBox id="choices" horizontalGap="0">
     <mx:Button id="Profit" label="Profit" toggle="true" click="updateChart(event)"/>
     <mx:Button id="Expenses" label="Expenses" toggle="true" click="updateChart(event)"/>
     <mx:Button id="Amount" label="Amount" toggle="true" click="updateChart(event)"/>
</mx:HBox>
 
<mx:LineChart id="linechart" height="80%" width="100%" showDataTips="true" dataProvider="{expensesAC}" creationComplete="init()">
             
     <mx:horizontalAxis>
         <mx:CategoryAxis categoryField="Month"/>
     </mx:horizontalAxis>

</mx:LineChart>
     
<mx:Legend dataProvider="{linechart}" labelPlacement="right" verticalGap="2" direction="vertical"/>
        
</mx:Panel>

And here is the DataProvider:


[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
{ Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
{ Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);

For ActionScript, lets start with the UpdateChart method:

This method looks to see if the button you just pressed is selected (toggle on) or not. If the toggle is on that means the user is adding the line, if the toggle is off that means the user is removing the line, and this method calls the appropriate method.


private function updateChart(evt:Event):void
{
 if ( evt.currentTarget.selected == true )
 {
  addToChart(evt.currentTarget.label);
 } else {
  removeFromChart(evt.currentTarget.label);
 }
}

Here is the addToChart method. This method creates a new LineSeries and adds it to the chart. Note that the LineSeries DataProvider is the same of the LineChart and the data you're referring to (yField) should already be present in the DataProvider.


private function addToChart(item:String):void
{
 var newLS:LineSeries = new LineSeries();
 var newStroke:Stroke = new Stroke();
 newStroke.color = strokeColor(item);
    
 newLS.yField = item;
 newLS.displayName = item;
 newLS.setStyle('form','curve');
 newLS.dataProvider = expensesAC;
 newLS.setStyle('lineStroke',newStroke);
 var tmp:Array = linechart.series; 
 tmp.push(newLS);
 linechart.series = tmp; 
 linechart.invalidateSeriesStyles(); 
}

You may have noticed the line newLS.setStyle('lineStroke',newStroke);. This refers to the following method, all it does is assigns a color based on the button selected.


private function strokeColor(item:String):uint
{
  switch (item)
  {
     case 'Amount':
       return 0x0000FF;
       break;
     case 'Profit':
       return 0xFF0000;
       break;
     case 'Expenses':
       return 0x00FF00;
       break;
     default:
       return 0x000000;
       break;
  }
}

And finally here is the remove method.


private function removeFromChart(item:String):void
{
  var objToRemoveIndex:int;
  for ( var i:int = 0; i < linechart.series.length; i++ )
  {
 if ( linechart.series[i].yField == item )
 {
  objToRemoveIndex = i;
 }
  }
    
  var tmp:Array = linechart.series; 
  tmp.splice(objToRemoveIndex,1);
  linechart.series = tmp; 
  linechart.invalidateSeriesStyles();    
}

The default series gets added with the CreationComplete method:


private function init():void
{
 addToChart('Amount');
 Amount.selected = true;
}

Anyway, I hope that wasn't too confusing. I should really start hosting these little examples somewhere with the ViewSorce available. If you need more clarification just gimmie a comment here.

Publishing source code in Blogger

2008-12-11T16:15:00.006-04:00

Wow it worked! Sucks I still have to escape all my > and < s but way better than what I was doing before (manual formatting).

So this took me a while to figure out... maybe I can do a step-by-step to help someone else out there out... there are a lot of pages on how to do this, I needed to combine them to make it work.

K... so... inside your blogger Dashboard go Layout - Edit HTML.

Paste this just before the </head> tag:


<link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>

Then paste this just before the </body> tag


<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>  
  
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js'/>  
  
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'/>  
  
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js'/>  
  
<script class='javascript'>  
//<![CDATA[ 
function FindTagsByName(container, name, Tag) 
{ 
var elements = document.getElementsByTagName(Tag); 
for (var i = 0; i < elements.length; i++) 
{ 
if (elements[i].getAttribute("name") == name) 
 { 
  container.push(elements[i]); 
 } 
} 
} 
 
var elements = []; 
FindTagsByName(elements, "code", "pre"); 
FindTagsByName(elements, "code", "textarea"); 
 
for(var i=0; i < elements.length; i++) { 
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") { 
var childNode = elements[i].childNodes[0]; 
var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n')); 
 elements[i].replaceChild(newNode, childNode); 
} 
else if(elements[i].nodeName.toUpperCase() == "PRE") { 
 brs = elements[i].getElementsByTagName("br"); 
 for(var j = 0, brLength = brs.length; j < brLength; j++) { 
  var newNode = document.createTextNode("\n"); 
  elements[i].replaceChild(newNode, brs[0]); 
 } 
} 
} 
 
//clipboard does not work well, no line breaks 
//dp.SyntaxHighlighter.ClipboardSwf = "http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/clipboard.swf"; 
dp.SyntaxHighlighter.HighlightAll("code"); 
//]]>  
</script>

Save your template.

Then to test it out create a new post and put some sample code between two PRE tags, like this:

<pre name="code" class="html">

</pre>

BUT you have to use escape characters for html
Here's a link to a site to help you do that quickly:
http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php

And here are the links to the posts that helped me figure this out:
http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/
http://azowebsphere.blogspot.com/2008/08/how-to-post-code-snippets-in-blogger.html

Publish Source code in Blogger??

2008-12-11T15:40:00.009-04:00

testing testing one two three...



<html>
</html>

Flex Advanced Data Grid helpful link

2008-12-05T14:15:00.003-04:00

http://livedocs.adobe.com/flex/3/html/help.html?content=advdatagrid_06.html

I keep going back here for info... so I am guessing I should make a note of it.

Flex embed an image as a Class

2008-11-27T14:15:00.011-04:00

// Embed the image once and refer to the Class
[Bindable]
[Embed(source="../assets/images/myImageFile.png")]
public var myImage:Class;

This is helpful if you're using the same image in several places, this way you only have to embed it once, and if you change the image file name you only have to change it in one place.

You can also create a Class that holds all the images and you can get an instance of that Class to refer to your images.

For example:

package com.view
{
import mx.binding.utils.BindingUtils;

[Bindable]
public class AssetImporter
{

  private static var instance : AssetImporter;

  //return singleton instance of AssetImporter

  public static function getInstance() : AssetImporter
  {
   if (instance == null)
   instance = new AssetImporter();
   return instance;
  }

  //put your images here
  //One
  [Embed(source="/assets/images/myImages.swf#one")]
  public var imgOne:Class;

  //Two
  [Embed(source="/assets/images/two.png")]
  public var twoLarge:Class;
}
}

Then in your mxml script use the following lines

import assets.AssetImporter;
[Bindable] private var assetImporter:AssetImporter = AssetImporter.getInstance();

then to call an image simply refer to the instance

<mx:Image source="{assetImporter.imgOne}"/>

Here is an example of an AssetImporter with view source enabled.

Flex 3 AdvancedDataGrid dataTipFunction mess

2008-11-25T13:56:00.021-04:00

Well Flex 3 with it's fancy AdvancedDataGrids is proving to be a little more than frustrating. All I wanted to do was show a dataTip on a hover on the datagrid row. It took me hours of research to figure out that there is a "bug":

http://bugs.adobe.com/jira/browse/FLEXDMV-1789

So if you have an Advanced Data Grid and you want to show a custom data tip on hover of a row this is basically how you should do it.

private function testTip(item:Object):String
{
if (item is AdvancedDataGridColumn)
return "This is a header tip"
else
return "This is a data tip";
}

OH yes... that's right. It calls this beauty twice. If you don't have the if statement it will error out and your ap won't run. Sweet eh?

<mx:AdvancedDataGrid
id="mainADG"
width="100%" height="100%"
dataTipFunction="testTip">
[...]
<mx:AdvancedDataGridColumn
  dataField="Name"
  headerText="Name"
  itemRenderer="com.view.renderers.myRenderer"
  showDataTips="true"
/>
[...]

NOW.. if you're like me, you might be using an itemRenderer on that column. You try out the datatip stuff above and curse me because it doesn't work. Yeah. I know.

Inside your item renderer you're going to have to set the tooltip (that is if what you're extending has a tooltip). I usually extend label, so it works fine.

package com.view.renderers
{
import mx.controls.Label;

public class MyRenderer extends Label
{
  override protected function updateDisplayList(unscaledWidth:Number,   unscaledHeight:Number):void
  {
   super.updateDisplayList(unscaledWidth, unscaledHeight);

   //Set the font color based on the item number.
   setStyle("color", (data.myNumber<= 0) ? 'red' : 'green');
   this.toolTip = "Here is my custom data/tool tip!";
  }
}
}

embed an image

2008-11-17T14:02:00.004-04:00

...also of note...

a Flex embed statement in css looks like this
upSkin: Embed("images/buttonUp.png");

a Flex embed statement inline looks like this
icon="@Embed('images/add.png')"

a chart gutter

2008-11-17T13:57:00.005-04:00

Note to self... you've seen this before, stop forgetting it...

The area around a Flex chart where the axis lives is called the "gutter". There are 4 properties that control this:

gutterLeft

gutterRight

gutterTop

gutterBottom

https://www.adobe.com/livedocs/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=charts_formatting_110_11.html

Here is an example using chart gutters.

Today I'm a developer

2008-10-21T11:09:00.010-03:00

For the last few weeks I have been a Flex developer, and I've learned about something really helpful.

Flex value objects.

Well these little AS classes have saved me some heartache and headaches. I was dumping everything into an xmlListCollection and then creating ArrayCollections of display objects with the data from the xmlListCollection. It started to get messy. No more! Value objects are way easier to manage.

Here’s an example of how to create one in case you’ve never done it before. (ps this is using the Cairngorm framework).

Okay first things first. What are you going to pull from your xml? In my example I am pulling a "Section" and each Section has a "SubSection". In this case I'd need two value objects. One for my Section and one for my SubSection. Stick them in a folder called vo.

Here is my SectionVO.as:

package com.vo
{
import com.adobe.cairngorm.vo.ValueObject;
import mx.collections.ArrayCollection;

[Bindable]
public class SectionVO implements ValueObject
{
public var title:String = "NA";
public var subsections:ArrayCollection = new ArrayCollection();
}
}

Each Section has a title and a bunch of subsections. So I have a String and an ArrayCollection.

Here is my SubSectionVO.as:

package com.vo
{
import com.adobe.cairngorm.vo.ValueObject;

[Bindable]
public class SubSectionVO implements ValueObject
{
public var title:String = "NA";
public var header:String = "NA";
public var body:String = "NA";
}
}

Each SubSection has a title, a header, and a body. So I have 3 public String vars.

Inside your main Application mxml file call the HTTP service and use the data to populate the value objects.

Here is the result handler. It gets your XML and puts it inside an XMLList. Then it calls the method that populates the value objects. Once that’s done it adds the initial “View” object (i.e. everything you see on the screen when the Application loads).

// Result handler - gets called after RSS is loaded.
private function contentResultHandler(event:ResultEvent):void
{
// Get sections from XML
var xmlList:XMLList = XML(event.result).sections.section;
fillSections( xmlList );

// Add child to show view now that all content is loaded
var view:View = new View();
view.id="view";
this.addChild(view)
}

This method populates the value objects and then adds each Section to an ArrayCollection inside the ModelLocator that will be used throughout the rest of the application.

// Populate Section VOs with data and add to ML.allsectionsac
public function fillSections( xmlList:XMLList ):void
{
// For each section in the data
for each ( var sectionData:XML in xmlList )
{

// Populate the Section data
var sectionVO:SectionVO = new SectionVO();
sectionVO.title = sectionData.title;

// For each sub-section in the section
for each ( var subSectionData:XML in sectionData.subsections.subsection )
{
// Populate the SubSection
var subsectionVO:SubSectionVO = new SubSectionVO();
subsectionVO.title = subSectionData.title;
subsectionVO.header = subSectionData.header;
subsectionVO.body = subSectionData.body;

// Add SubSectionVO to the SectionVO
sectionVO.subsections.addItem(subsectionVO);
}

// Add section VOs to ModelLocator array collection
ML.allSectionsac.addItem(sectionVO);
}
}

And of course, you're going to need your fault handler in case the Application can't find your xml data in the first place.

// Fault handler - displays the error.
private function contentFaultHandler(event:FaultEvent):void
{
Alert.show(event.fault.message, "Could not load content feed");
}

Inside your MXML create the HTTPService object.

<HTTPService
id="contentService"
url="assets/xml/content.xml"
resultformat="e4x"
result="contentResultHandler(event)"
fault="contentFaultHandler(event)">
</mx:httpservice>

And that’s it! Now all your data from the xml is easily accessible inside your application.

Now all you do is use your ArrayCollection inside your ModelLocator. You will probably have to create a Display Object component as well. Your Display Object would have one Bindable public var of type your value object (i.e. [Bindable] public var sectionObj:SectionVO; ). In my example below I also refer to a SubSection object, which just be something simlar to this section object but with text objects getting their data from the SubSectionVO.

The Section Display Object component may look something like this:

Section.mxml

<mx:VBox
mx="http://www.adobe.com/2006/mxml"
com="com.*">

<mx:script>
<![CDATA[
import com.vo.SubSectionVO;
import com.vo.SectionVO;

import model.ModelLocator;
[Bindable] private var ML:ModelLocator = ModelLocator.getInstance();

[Bindable] public var sectionObj:SectionVO;

public function init():void
{
getSubSections();
}

// Get all sub-sections and add them to section
public function getSubSections():void
{
for ( var n:int=0; n < sectionObj.subsections.length; n++ )
{
var subSectionView:SubSection = new SubSection();
subSectionView.subSectionObj = SubSectionVO(sectionObj.subsections.getItemAt(n));
this.addChild(subSectionView);
}
}
]]>
</mx:Script>

<mx:Label text="{sectionObj.title}" />

</mx:VBox>

Hope that was SOMEWHAT clear. Hope that helps someone out someday. I am sure I’ll be looking back on this post when I forget how to do this!

iPod touch

2008-09-02T22:03:00.001-03:00

My first post from my new iPod touch. Yeah, I'm totally just showing off.

Using html links in flex with xml data

2008-08-26T16:48:00.007-03:00

So I'm not sure why this took me so long to figure out since it's actually quite simple...

I have a flex application that is pulling all its data from an xml file. I wanted to add links to certain pieces of text. I finally figured out a way to make it work... if this is the best way or not, I do not know, but it works! (This is why I'm not a programmer... haha).

Use a combination of xml file with node wrapped in the ![CDATA[ tag, Text component, and the htmlText property.

Example:

MXML snip:

<mx:HTTPService
id="contentService"
url="assets/xml/content.xml"
resultFormat="e4x"
result="contentResultHandler(event)"
fault="contentFaultHandler(event)"/ >

ActionScript:

iText = new Text();
iText.htmlText = xmlListColl.getItemAt(n).writeup;

XML snip:

<section>
<title>my writeup </title >
<writeup>
<![CDATA[Here is a <font style="color:'#0000FF';"> <a href="'http://www.mylinkaddress.com'" target="'_blank'">LINK </a > </font > that shows up blue and is clickable and opens the link in a new browser window.]] >
</writeup >
</section >

YAY :)

the almighty Google looses a round?

2008-08-14T14:18:00.003-03:00

Over the past month or so I have been working with an IA and some developers to create a proof of concept desktop widget. After the IA did some research and we decided on some wireframes, I did the visual and interaction design, sent the developers my mock ups and assets and let them go. The point of the exercise was to mainly get a sales tool, but also to discover the limitations between platforms.

The three that have been created so far have been a Google Gadget, a Yahoo Widget, and an Adobe Air application. According to the developer working on the Google Gadget it is a nightmare. It came out looking the least like my mock ups that's for sure. The Yahoo one looks pretty nice, but it doesn't do any of the cool transitions and stuff I asked for. The Air, well, I guess I'm an Adobe lover anyway, but it came out the best by far. I think that maybe what we were trying to create may have been a bit beyond Google and even Yahoo’s capabilities.

I wish I could show you, but yeah... company policy and all that.

And I know, I know. I need to design my own damn background for this blog. I’ll get around to it eventually... maybe...

cool iPhone buttons

2008-07-17T16:20:00.007-03:00

The last few days I have been working on designing a widget for my company along with an information acritect. It's going pretty well. My inital design looked like an iPhone, and then we moded it form there until we came up with a simple yet cool design (something like 10 mock ups later, lol). My buttons look like iPhone buttons, which I love (I wish I actually had an iPhone, but they're too expensive to own in Canada). On the over state I increased the brightness by 30, suble but nice, and on the down they look depressed.

Here's a sample for fun. :)

The awesome tutorial to do the buttons I found here - http://blog.jotlet.net/2007/07/05/iphone-style-icon-tutorial/ .

To do the over and down effects I came up with all you need to do is the following:

The "down style" layer is just a copy of the color layer with an inner shadow:

I also nudged the icon down 1px and right 1px.

The "over style" is just an adjustment brightness/contrast layer with the brightness +30.

The "IT" pigeon hole

2008-07-10T15:31:00.001-03:00

Does it count that I don’t want to be put in the "IT" box? That I think design is about everything from a cell phone interface to the way your local grocery store is laid out? Does it matter that some day I want to use my skills to change the devices I use daily that drive me nuts – like my oven?

"Some of what good interaction designers do is make the world better by removing those little irritants in life, some of which we don't know exist until they are gone." - Dan Saffer from his book Designing for Interaction

What's my title today?

2008-07-09T15:08:00.000-03:00

This blog is named such because depending on the day I have a different job to do.

Yesterday I was a visual designer.

Today I am a technical writer.

Next week I expect I will be an interaction designer.

When it all comes down to it, I may be a generalist, but if there were such thing as a generalist that focused on the end user I suppose that would be me.

Problem solver and user empathizer extraordinaire.

With an educational background in web design and development, and years of experience coding, I decided to leave the code behind (without any tears) and pursue what I actually cared about; the experience. UI professionals may all agree that we are underappreciated but necessary and often overlooked until the last second of any project. I want to help change that, in my own company, and in the industry as a whole.

Just yet another IT professional blog to crowd the already overcrowded web space.

But hey, who’s listening?