Flex Flash Camp Presentation, slides on Flex 4 Skinning coming soon
My presentation on Skinning in Flex 4 from the Adobe User Group Tour & Flex / Flash Camp will be up soon. It covers the basics of what has changed for skinning and styling. The demos walk you through creating a new skin and how certain aspects affect the end result. I had a great time meeting more people from 615Flex. Matthew did an awesome job of getting the event organized and off the ground.
Special thanks to Greg Wilson from Adboe, all the attendaes & presenters.
Flash Builder 4 Beta / FB3 – “Removing compiler problem markers” error
If you’ve played with the new Flash Builder 4 Beta, you may have wanted to test out your existing projects in it. And like me, you may have just quickly pointed it to an existing workspace to import a project. If you haven’t – DON’T. Once you switch back to Flex Builder 3, you will start getting An internal error occurred during “Removing compiler problem markers…”
This is because FB4 is built on a different version of Eclipse and modifies your workspace files (not your .project files), i.e. it hoses your existing workspace. To get rid of it, just create a new workspace in FB3 and import your projects there.
1 commentHow to use a DataGrid with no column headers
This is one of those quirky things that is not all that well documented. I had a client that needed a datagrid but didn’t want the header row. It sparked the memory of struggling to find how to do this the first time I needed it. So hopefully this will help end your search for the answer
Easily Validating Dynamic Forms (or with just ‘too many’ fields)
Don’t you hate having to specify validation on each individual control in your form? Or how about when project management is continually adding new form fields to a form? “A user should have to retype an email address” or, “we need to add a billing address section.” Well now rather than having to add a new validator source or explictly call validate() for the new control, this code takes care of it all automatically. This works especially great for forms with dynamic fields.
Just add the FormItem to your form, set it to required and you’re set! Simply call
passing in any Form object and it will create an array of all the fields inside of the form. Since mostly you’ll be dealing with TextInput controls in your FormItem, that’s what this example uses. See comments in example code for more detailed information on usage.
Click to view demo app (Right click to View Source)
Sample code:
…
* Helper function that returns all the fields for a
* given form. Pass in requiredOnly = true if you only want
* the required fields.
*/
private function getFields(form:Form, requiredOnly:Boolean=false):Array
{
var a:Array = [];
// get every child of the Form
var formItems:Array = form.getChildren();
for (var i:int=0; i<formItems.length; i++)
{
// make sure it's a FormItem - if you use FormHeading or have
// items that are not wrapped in a FormItem tag then ignore those
if (formItems[i] is FormItem)
{
var formItem:FormItem = formItems[i];
// add the formItem's child to the array.
// if you only need required items, set requiredOnly = true
// Note: this assumes you only have one form field per FormItem
// You could easily add additional logic here for more
if (formItem.required || !requiredOnly)
a.push(formItem.getChildAt(0));
}
}
return a;
}
/**
* Validates all fields in a given form.
*/
private function validateForm(form:Form):Boolean
{
// reset the flag
var _isValid:Boolean = true;
// populate the fields - if your fields aren't dynamic put this in creationComplete
var fields:Array = getFields(form, true);
for each(var source:UIComponent in fields)
{
// create a simple string validator
var validator:StringValidator = new StringValidator();
validator.minLength = 2;
validator.source = source;
validator.property = "text";
var result:ValidationResultEvent;
// typical validation, but check to this checks for any different
// types of UIComponent here
if (source is TextInput)
result = validator.validate(TextInput(source).text)
else if (source is TextArea)
result = validator.validate(TextArea(source).text)
// if the source is valid, then mark the form as valid
_isValid = (result.type == ValidationResultEvent.VALID) && _isValid;
}
return _isValid;
}
…
4 commentsTitleWindow Subclass for Easily Handling Popups
Typically if you choose to use a TitleWindow, odds are you’re going to add it with the PopupManager and use the Close button. So rather than having to always set that up and add listeners for the CloseEvent, use this extended class PopupBase. It’s used the same as TitleWindow, declared in actionscript
or mxml,
but by default it:
- sets showCloseButton=true
- sets a listener for CloseEvent
- removes the popup when Close button is pressed
You can override the onClose handler to add different functionality.
{
import mx.containers.TitleWindow;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
public class PopupBase extends TitleWindow
{
public function PopupBase()
{
showCloseButton = true;
addEventListener(CloseEvent.CLOSE, onClose);
}
protected function onClose(event:CloseEvent):void
{
PopUpManager.removePopUp(this);
}
}
}
MediaCoreLib for Actionscript 3 – Play Rich-Media Content Easily
MediaCoreLib – Here’s an easy way to play rich media content (audio, video) inside Flash or Flex and manage it all in one place.
The new MediaCoreLib alpha release includes an extensive PlaylistManager as well as a merging of my FadingSound component to allow for crossfading between tracks. For a more info check out the Google code repository.
Features:
- Play
- Pause
- Stop
- Prev / Next
- Rewind / Fast-forward
- Repeat
- Preloading and Caching
- Fade In / Out
- Crossfade
- More…
Check out the testing panel to try it out yourself:
BASIC PANEL
ADVANCED PANEL
This is an effort bewtween Justin Opitz and myself and we are continuing to add features. Look for a Beta release soon!
2 commentsDynamically change asset color using ColorTransform
Usually, changing colors inside your application is easy. You can set just about everything from textColor to backgroundColor, inline (backgroundColor = “#FFFFFF”), in a stylesheet (background-color: #FFFFFF) or using the setStyle method( uic.setStyle(”borderColor”, “green”) ). But what if you are trying to change the color of an embedded asset?
Say your designer gives you an asset, like a black funky shaped blob for a logo or icon. Then, later on, your company changes the icons to white. Why wait around for 2 weeks while your designer finds time to change the graphic when you could change in the code? Or perhaps a better example would be if your application requires applying different stylesheets at run-time for users to pick custom colors and layouts.
This is where using transforms comes in handy. The ColorTransform class lets you do some cool things to set RGB and alpha offsets or multipliers as well as set the color explicitly, which is what this example does. All you do is create a new instance, set the color value and assign the instance.
ct.color = event.color;
img_funky.transform.colorTransform = ct;
This is not just limited to embedded assets. You can use transforms on almost any DisplayObject.
Example Application – Click Here
No commentsObject Translator – Normalizing Objects
This is an extension of a great blog from Justin Opitz on normalizing value objects. We were discussing the a best way to take objects that are somewhat similar in form and conform them to an interface. Normalizing objects allows you perform logic on data that is generic and more makes your code more reusable.
So imagine we have several different object types coming in, like Artist, Album, & Track objects with properties that are similar, yet unique, including “artistName”, “albumName”, “trackName”, among others. We want to put this into a VO with just “name”.
Below is a modified version of the translator. If you have several different VOs that implement an interface then you may want the ability to assign them as needed. Since it could be any one of the VOs being, we’ll pass it in as a wild card vo:*” and then return the newly assigned object. Also, if the current propety doesn’t match a pattern we’re looking for, then it assigns it as-is.
So here’s what the function will look like:
{
for (var s:String in vo)
{
//we are going to check each prop name to see if there is a match for our
//targetObject's known properties
//obvious ly this list will grow the more props you have to normalize
//however it only grows once regardless of the number of non-normalized VOs
if (s.toLowerCase().indexOf('name') != -1)
targetObject.name = String(vo[s]);
else if (s.toLowerCase().indexOf('id') != -1)
targetObject.id = int(vo[s]);
else if (s.lowerCase().indexOf('genres') != -1)
targetObject.genres = vo[s] as Array;
else
targetObject[s] = vo[s];
return vo;
}
}
Tiny Alarm
If you’re like me, and always get really wrapped up in your work, then you should check out Tiny Alarm for Mac. It’s a great little app that lives in your menu bar and is a snap to use. Just click the alarm clock to set the time and it gives you a few short beeps (or other sounds) when the time comes and subtly flashes. You can ignore it and it’ll beep again every minute. Clicking it again will turn it off or snooze depending on preference.I use it to remind myself to get up and stretch or to move on to working on something else. I just got the new version which has cool features to gives you notes on why you decided to set the alarm in the first place. Now if it only made me get up instead of ignoring it or hitting snooze 8 times….More info on Tiny Alarm here
No commentsNumber Class, IEEE 754 Math Inequality
The “Number” data type in Flex is used for floating-point numbers (i.e. decimals like 42.11). It is usually the default type when using numerical values, even though Flash Player handles int and uint more effeciently. The Number class uses the IEEE 754 standard which gives you values up to 53 bits (highest of which is approx. 1.79e+308).
When doing calculations involving Numbers, calculations are done using binary addition. This can really throw you off course in a few rare instances if you’re not careful! Take the following example:
var b:Number = a * 3; // .1 + .1 +.1
b = .3, right? Right.. only, not. The value comes out to 0.30000000000000004 instead. Ok, not too far off, but imagine making several calculations on the result and you can start to sway off course. The following example is a watered-down version of what I encountered lately. I knew about this type of discrepancy, but it took me a couple of days to figure out where things were going wrong because I didn’t assume that something was failing at such a base level; you typically expect things like subtraction to work correctly.
var b:Number = .2;
while (a > 0){
a = a - b
trace(a);
}
...
OUTPUT:
.8
0.6000000000000001
0.4000000000000001
0.2000000000000007
5.551115123125783e-17
-0.19999999999999996
Whoa. Things start getting funky (btw, in case you’re not familiar with the notation, that second to last one is 5 with 17 decimal places, “.00000000000000005″). Why the discrepancy? Again, it has to do with converting the numbers to binary and evalutating them. You can read more on the IEEE 754 standard here. This is typically not something you will have to deal with, but when you do encounter it, you can spin your wheels for a while.
Try it for yourself here.
Demo application that adds/subtracts and includes some default cases.