ben.bishop's blog

Problem:

You want to be able to apply a stylesheet to a text component.

Solution:

To solve this problem, we are going to extend the Text component with our own custom text component called "StyleText:"

public class StyleText extends Text
{

private var _styleSheet:StyleSheet = new StyleSheet();

public function get styleSheet():StyleSheet{

return _styleSheet;

}
public function set styleSheet(s:StyleSheet):void{

_styleSheet = s;
this.textField.styleSheet = s;

}

public function StyleText()
{

super();

}

}

Touchwood is proud to present its new website at http://www.touchwoodcreative.com. The site was developed almost exclusively with the Flex framework as an exercise and proof of concept that developers using Flex can not only build a stable application but can also provide a rich visual experience to the user.

Flex's transitions, parallels, and effects were used extensively to add the more polished elements to the presentation of the agency's capabilities and past work.

Also used was Flex's ability to take XML, parse it, and update the UI according to the XML file's contents. This allows Touchwood to update the site quickly and frequently with cool new client projects. So be sure to check it out frequently!

Problem:

You want to "link" mutliple MXML files to each other via buttons.

Note: For new Flex developers, it is sometimes easier to think of "linking" MXML files together. Also note, because of Flashplayer's garbage collection issues this may not be the most ideal solution for very big applications and a ViewStack may indeed work better.

Solution:

Create a ScreenManager singleton class that clears and creates fresh new instances of MXML components for the application.

Note: You can also use a ViewStack to manage mutliple screens and have navigation devices such as buttons just change the selected index of the ViewStack. However, for this scenaro, let's say we want fresh new screens. (ViewStacks maintain its children's states. So, for example,if you have a form and navigate away from it, if you were to return all of the values would still be there.)

Implementation:

Problem:

You want the links in the LinkBar component to be the same width.

Solution:

Extend the LinkBar component to have a property called "linkWidth."

Override the createChildren method. In this method bind the new "linkWidth" property to each child's width.

To Implement:

<components:UniformLinkBar linkWidth="100">


Attached is the library project.

Problem:

You need to display superscripts and subscripts in a TextArea.

Solution:

Embed super and sub script fonts and extend the TextArea component to automatically  update the stylesheet object to apply the font to "sup" and "sub" tags. For extra convenience make this a component that can be reused easily.

I came across this thread post by blu3 on the FlashKit forums and thought it was too handy to not share on here.

I managed to pull this off and and here comes the solution. First i
declared cleanUp() function in Flex which does the dirty work and
cleans user's leftovers. Then i use ExternalInterface for registering
my cleanUp() function so that i can access it using JavaScript from
.html wrapper:

Touchwood is proud to present UI Marker Beta 1. UI Marker is a Flex component that allows users to draw squares, lines, and notes on an AIR application's UI and save the screenshot as a PNG. This tool is valuable for design reviews and/or client input and feedback.

How to implement:

Let's say you want to setup your app to where a user can click F12 and make notations. Here's how you do it.

Problem:

You want to draw a square programmatically using Actionscript's drawing API.

Problem:

How can an AIR application detect if a link or an image has been clicked inside an HTMLControl?

Solution:

Create an app to loop through all images and links in the web page's DOM and attach click listeners to them.

Here's a simple helper function to determine where a point in 2D space ends up after a rotation around a specified origin.


public function rotatePoint(p:Point, o:Point, d:Number):Point{


var np:Point = new Point();
p.x += (0 - o.x);
p.y += (0 - o.y);
np.x = (p.x * Math.cos(d * (Math.PI/180))) - (p.y * Math.sin(d * (Math.PI/180)));
np.y = Math.sin(d * (Math.PI/180)) * p.x + Math.cos(d * (Math.PI/180)) * p.y;
np.x += (0 + o.x);
np.y += (0 + o.y)

return np;

}

This function takes the point you want to rotate(p), the origin or point you want to rotate around(o), and the degrees(d) of the rotation. After translating the origin and point to reflect an origin of (0,0), converting the degrees into radians, applying some simple trigonometry, and then moving point back you get the new location of your point.

This function is handy for when you are trying to find a point on a polygon or shape after it has been rotated.