Entrepreneur, IPhone Developer Extraordinaire, Adobe Flex Wizkid
Something the to keep in mind with the slew of javascript frameworks out there in the wild.
http://www.google.com/trends?q=jquery%2Cdojo%2Cmootools%2Cyui%2Cextjs&ctab=0&geo=all&date=all&sort=0
Did you know…
You can persist application data using NSUserDefaults in your iPhone application? What are we referring to when we mention “persistence”? Basically, we mean that we’re going to allow your app to save data locally onto your iPhone and then later recall that saved data when your application requests that data.
Here’s the pertinent code you’ll need to familiarize self in order to use NSUserDefaults
These values are stored/recalled as key-value pairs. When you store a value using NSUserDefaults, you can recall a value even after shutting down and restarting an application.
This is one way of saving application related data, however, for data intensive applications, you may decide to offload that using sqlite or a combination of that and utilizing a backend service tier.
Did you know…
You can extract the alpha, red, blue, and green channels of a hexadecimal color with simple bit shift and logical AND operations? Below are the operations to extract these channels from RGB and ARGB color formats.
RGB Channel Extraction - 24 bits
// 24 bit color
var color : uint = 0xff0000;
var R : Number = color >> 16;
var G : Number = ( color >> 8 ) & 0xff;
var B : Number = color & 0xff;
ARBG Channel Extraction - 32 bits
// 32 bit color with alpha channel
var color : uint = 0xffc7c8c9;
var A : Number = ( color >> 24 ) & 0xff;
var R : Number = ( color >> 16 ) & 0xff;
var G : Number = ( color >> 8 ) & 0xff;
var B : Number = color & 0xff;
Hello there! Welcome to our first exciting issue of Show and Tell!
First things first, I credit inspiration for the creation of this article to our fellow blogger of the community at www.somerandomdude.net ( google-cached link here). This particular article provided a great means for expediting the process of what I am currently working on. Before stumbling upon this, I had thought at first to maybe tackle this as an Effect and EffectInstance class pair. However, the more I thought about this, it started to make more sense to me to create as a stand alone UIComponent.
In return, I’ve been meaning to do a “Show and Tell” for taking this Animated Gradient control a little further and so here it is ^_^
Here are the following features that are offered in this package:
Click here to open in a new window.
Click here to download the source code.
Here are few suggestions you might want to try this against:
If you have any questions and/or comments, by all means, please ask away in the comments section.
Cheers and Enjoy!
Back in the hey-days of childhood, I remember something in the classroom called “Show and Tell”. It’s a simple concept. I “show” you something of possible interest and “tell” you about it. Simple.
Here, “Show and Tell” is intended for the community and is presented to you in the form of an article focused around application development. In each upcoming article, you can expect a bit more substance than what we get from our standard QueueTip. Each article will be geared towards providing you with something that you may add to your own arsenal, at your own discretion, that is.
These are contributions to the community, and will ,in most cases, remain open source. Watch out for content coming this way soon.
Peace and a Happy New Year to all ^_^
Did you know…
In one line of code in conjunction with the Math.random() method, you can generate a ranged random number as illustrated below:
Math.random() * ( max - min ) + min;
This will generate a random float between the values “min” and “max”
Did you know…
You can achieve binding programmatically with the “ChangeWatcher”? The following example illustrates various methods for achieving binding.
The first method simply binds the labels text property to the text property of the text input. This is probably the most straightforward method for achieving binding.
The second method binds via the ChangeWatcher. Using the change watcher, you need to explicitly specify the target and target’s property that you want to bind on as well as the action that you’d like to take place in the form of an event handler. You achieve binding by calling the “watch” method of the ChangeWatcher. You can also choose to remove bindings by calling “unwatch”. For this example, we could’ve utilized the TextInputs “change” event to establish the same intent.
The third method binds via the BindingUtils facility, which is available right out of the box. BindingUtils essentially utilizes the ChangeWatcher under the hood to achieve binding. If you look at the return value of the method “bindProperty” on BindingUtils, you’ll see that it’s return type is of a ChangeWatcher.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="{ onCreationComplete( event ) }">
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.binding.utils.ChangeWatcher;
private function onCreationComplete( event : Event ) : void
{
// utilizing the watch method of the ChangeWatcher to illustrate programmatic binding
ChangeWatcher.watch( txtInput2, "text", onInputChange );
// utilizing the bindProperty method of the BindingUtils facility to illustration binding
// if you look at the return type of "bindProperty", you'll see that it also returns an
// instance of a ChangeWatcher
BindingUtils.bindProperty( lblBinding3, "text", txtInput3, "text" );
// Notes: if you want to unbind on the ChangeWatcher, utilize the "unwatch" method of the ChangeWatcher
}
private function onInputChange( event : Event ) : void
{
var txtInputTarget : TextInput = event.currentTarget as TextInput;
lblBinding2.text = txtInputTarget.text;
}
]]>
</mx:Script>
<mx:VBox left="10" right="10" bottom="10" top="10">
<mx:Form>
<mx:FormHeading label="Non Programmatic Binding" />
<mx:FormItem label="Input:">
<mx:TextInput id="txtInput1" />
</mx:FormItem>
<mx:FormItem label="Binding On Text:">
<mx:Label id="lblBinding1" text="{ txtInput1.text }" />
</mx:FormItem>
</mx:Form>
<mx:Form>
<mx:FormHeading label="Programmatic Binding via Change Watcher" />
<mx:FormItem label="Input:">
<mx:TextInput id="txtInput2" />
</mx:FormItem>
<mx:FormItem label="Binding On Text:">
<mx:Label id="lblBinding2" />
</mx:FormItem>
</mx:Form>
<mx:Form>
<mx:FormHeading label="Programmatic Binding via BindingUtils.bindProperty()" />
<mx:FormItem label="Input:">
<mx:TextInput id="txtInput3" />
</mx:FormItem>
<mx:FormItem label="Binding On Text:">
<mx:Label id="lblBinding3" />
</mx:FormItem>
</mx:Form>
</mx:VBox>
</mx:Application>
Did you know…
Event listeners and Dictionary’s support weak referencing facilities in Actionscript 3.0? Why the need for weak referencing?
Utilizing weak references does not necessarily mean that your application will be free from memory leaks. You, as the developer, are still in charge of cleanup tasks. Weak referencing, merely promotes objects to be garbage collected, when all references to that object no longer exist. As long as the objects in your code still maintain an object reference, the memory lifespan of that object will continue to persist in your application. So it is still up to you to make sure the preparations for cleanup are there and have been acted upon. Think of it as putting the trash outside on the curb for the garbage-men to pick up ( it’s not going to get picked up if you don’t put in the work to set it aside for the pickup ) ^_^
Strategies which supplement good clean up tasks:
Did you know…
You can dynamically change a display elements style and attributes by utilizing custom style tags in conjunction with the setStyle/GetStyle methods of the component to which the style is applied to? Let’s walk through a simple example to illustrate.
A simple gradient border skin as illustrated below.
package com.thekeunster.skins
{
import flash.display.Graphics;
import flash.geom.Matrix;
import mx.core.EdgeMetrics;
import mx.skins.halo.HaloBorder;
[Style(name="fillColors", type="Array", inherit="no")]
public class SimpleGradientSkin extends HaloBorder
{
private var fillColors:Array;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
fillColors = getStyle("fillColors") as Array;
if (!fillColors) fillColors = [0xFFFFFF, 0xFFFFFF];
var g:Graphics = graphics;
var b:EdgeMetrics = borderMetrics;
var w:Number = unscaledWidth - b.left - b.right;
var h:Number = unscaledHeight - b.top - b.bottom;
var m:Matrix = verticalGradientMatrix(0, 0, w, h);
g.clear();
g.beginGradientFill("linear", fillColors, [1, 1], [0, 255], m);
g.drawRect(0,0,w,h);
g.endFill();
}
}
}
Then applying that border skin to a canvas, as illustrated below. W/in the “switchGradient” method, you’ll notice that we’re switching out the gradient’s fillColors dynamically via “setStyle”. In the borderSkin, we reference the fill colors via “getStyle”.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
.simpleBorderSkin
{
fillColors : #ff0000, #0000ff;
borderSkin : ClassReference('com.thekeunster.skins.SimpleGradientSkin');
}
</mx:Style>
<mx:Script>
<![CDATA[
private function switchGradient( event : Event ) : void
{
// dynamically switch the border skins gradient fillColor with random color values
content.setStyle( "fillColors", [ Math.random() * 0xff0000, Math.random() * 0x00ff00 ] );
}
]]>
</mx:Script>
<mx:Button label="Switch Gradient" click="{ switchGradient( event ) }" />
<mx:Canvas styleName="simpleBorderSkin" id="content" left="30" right="30" bottom="30" top="30" />
</mx:Application>