What's My Title Today?

Posts

Showing posts from 2008

Add and remove lineseries - Flex LineChart

- December 11, 2008

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="upda

Publishing source code in Blogger

- December 11, 2008

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.

Publish Source code in Blogger??

- December 11, 2008

testing testing one two three... <html> </html>

Flex Advanced Data Grid helpful link

- December 05, 2008

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

- November 27, 2008

// 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 &nbsp{ 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")

Flex 3 AdvancedDataGrid dataTipFunction mess

- November 25, 2008

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

embed an image

- November 17, 2008

...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

- November 17, 2008

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

- October 21, 2008

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 imp

iPod touch

- September 02, 2008

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

Using html links in flex with xml data

- August 26, 2008

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://ww

the almighty Google looses a round?

- August 14, 2008

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.

cool iPhone buttons

- July 17, 2008

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 brightne

The "IT" pigeon hole

- July 10, 2008

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?

- July 09, 2008

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?