http://www.google.com/trends?q=jquery%2Cdojo%2Cmootools%2Cyui%2Cextjs&ctab=0&geo=all&date=all&sort=0

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.

This post is password protected. To view it please enter your password below:

Password:

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;

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:

• Subclassed from UIComponent, hence you can choose to use directly in markup or via “AddChild”
• Animate gradient fillColors
• Animate gradient ratios
• Animate gradient angles
• Specify gradient attributes as style attributes and/or through a metadata class
• Specify the number of tween frames to animate as “durationSteps”

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:

• Use as part of an application’s background and trigger an animation on the gradient from a UI transition
• Use as a mask for other controls. i.e. try simulating a metallic/shining effect over a Label for cool text effects

If you have any questions and/or comments, by all means, please ask away in the comments section.

Cheers and Enjoy!

]]> http://thekeunster.com/?feed=rss2&p=49 http://thekeunster.com/?p=103 http://thekeunster.com/?p=103#comments Thu, 01 Jan 2009 08:31:15 +0000 admin http://weblogs.thekeunster.com/?p=103 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 ^_^

]]> http://thekeunster.com/?feed=rss2&p=103 http://thekeunster.com/?p=43 http://thekeunster.com/?p=43#comments Mon, 29 Dec 2008 03:00:00 +0000 admin http://weblogs.thekeunster.com/?p=43 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”

]]> http://thekeunster.com/?feed=rss2&p=43 http://thekeunster.com/?p=40 http://thekeunster.com/?p=40#comments Sat, 27 Dec 2008 01:09:49 +0000 admin http://weblogs.thekeunster.com/?p=40 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>

]]> http://thekeunster.com/?feed=rss2&p=40 http://thekeunster.com/?p=32 http://thekeunster.com/?p=32#comments Fri, 26 Dec 2008 23:48:52 +0000 admin http://weblogs.thekeunster.com/?p=32 Did you know…

Event listeners and Dictionary’s support weak referencing facilities in Actionscript 3.0? Why the need for weak referencing?

• potential performance gains
• promote best practices in application cleanup strategies ( i.e. prevent memory leaks )

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:

• set the “weakReference” flag on addEventListener to “true”
• use “removeEventListener” if you are finished using an event callback and don’t plan on using it again. This means, that you also need to keep track of when of when utilize “addEventListener”. Utilize event targeting or some other means of getting a reference back to the event target so you can safely remove an even listener and do any necessary object cleanup. I generally refer to this as “targeting” when utilizing events
• make use of the “delete” keyword
• if you using a Dictionary ADT ( abstract data type ), make use of the weak reference parameter found in the constructor of the Dictionary. It is set to “false” by default. Set it to “true”
]]> http://thekeunster.com/?feed=rss2&p=32 http://thekeunster.com/?p=13 http://thekeunster.com/?p=13#comments Thu, 25 Dec 2008 12:10:02 +0000 admin http://weblogs.thekeunster.com/?p=13 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>

]]> http://thekeunster.com/?feed=rss2&p=13