Application - Source

Step 2: Implementing Bezier Curve over the Application Background Skin
Now that you have your application background working, we can work on adding a layer on top of this. We will be adding a shape with a Cubic Bezier curve for a bottom border on top of the background creating a banner. To ensure that our Bezier curve is visible, we need to place it on top of the background (beneath the Rectangle in our code). s:Path is used to be given data to create a shape. Inside of the data property is where we define our shape. First off we have to set the data cursor to start at the X and Y values of 0,0 which would be the top left of the application. Now we make a line from 0,0 to 600,0 by using “l 600,0”. “l” stands for line. It is important to remember that these coordinates are based off of 0,0 being the last coordinates you left off on, not 0,0 being the top left of the application. Next, we need to create the rightmost border of our shape using 0,100. Again, think of this as saying, move horizontally from this location 0 pixels, move vertically from this location 100 pixels.

Now we are to the cubic Bezier curve. This part is a little tricky. To create a cubic Bezier curve and utilize control points, we use “c”. This takes 6 parameters, but you need to think of them as pairs, so three pairs of xy values. The last pair is the destination, so that part is easy. We will want our curve to reach the left side of the application, so the x value is -800, but we want our curve to end up a little lower on the left side, so we will give it a value of 50. The first two pairs are control points. Remember that our cursor is currently at the bottom right of our shape (800,100 in relation to the application). We now need to draw our curving line 300 pixels to the left, but up about 25 pixels. We do this by making our first control point -300, -25. Next we would like to draw our curving line 300 pixels to the left, but up about 50 pixels. We do this by making our other control point -300, 50. We already have our last coordinates set at -800,50. Our finished code for our cubic Bezier curve is, c -300 -25 -300 50 -800 50. To close up the left border of our shape all we have to do is use z which closes our path.

Finally, now that we have our shape, all we have to do is fill it. Just like the last step, we use s:Fill and inside of that we use s:RadialGradient to specify how to fill and s:GradientEntry to specify the colors.

Application - Source

I’m writing this post in regards to skinning in Flex 4 for people who are just starting Flex 4. Skinning is a very important part of Flex 4 and it will come up in pretty much every project that you make.

Step 1: Creating an Application Background Skin
First, you need to create the component. I like to put all of my skins in the same folder, so I created a skins folder. Right click on your folder and select New – MXML Skin. Name your skin, and make sure to specify the host component. In our case it will be “spark.components.Application”. Hit Finish, and this will give you the bare bones of your skin and include the states based on your host component. Since our host component is an Application, the only states we are given are disabled and normal. If we had specified our host component to Button, for example, we would be given the disabled, down, over, and up states.

Next we will be creating the first layer of our skin. It is important to remember that skins are based on layers and each layer you create will cover the one before it (the layer at the bottom of your code is the top layer). We will be using to cover the entire background which is a rectangle. Inside of this, we will use to fill the rectangle. Inside of the fill, we specify how we would like to fill the rectangle. In our example we are using a radial (circular) gradient, but we also could have used a linear gradient, solid color, etc. Inside of we specify the which are the two colors that are blended together. The first gradient entry is the color inside the radial, and the second gradient entry is outside.
Now that we have the Application Background Skin, we have to refer to it inside of our application declaration. You do this by using “skinClass” and referring to the skin file. Ex: skinClass=”com.skins.ApplicationBackgroundSkin”. Now you have a skin for the background of your application.

Application - Source

http://theresaneil.wordpress.com/2009/04/22/40_custom_flex_controls/

Its funny when you deal with graphic designers, and the hell they tend to put you through to make your application look good… but in the end it always gives me something to write about and keeps me working so its all good…

Flex 4, I’ve heard fixes the MultiLine Button issue fairly easily (I’ve heard) but I ran into the issue where the button not only needed to be multiline but also needed to be different font styles within the text…

The easiest way I could imagine would be to use the htmlText property of the flex 3, so after reading up on flex 4 and the changes to some of the base text classes, I decided to use the RichText component in flex.  That way I can use the new text stuff they added.

Here is my example, and please don’t hesitate to call me stupid… Flex 4 just got released, and I took no time to mess with the beta (busy working) and so now I get to write up on the stuff I encounter.

Application – Source

I would like to give a shout out to John Yanarella, he and I have been working on a project, and he wrote the skin, and then I adapted it to be able to pass custom styles in via a stylesheet.

Application - Source

So the reason I wanted to cover this is because I find myself creating degrafa skins, and then creating them over and over and over to change things just SLIGHTLY, like corner radius, or a stroke here, or a border there, or different highlight colors, but in general the style is the same… and before I know it, I end up with 3 different variations of classes that are relatively simple…

Like flex by default, I would like to pass in styles via mxml or a stylesheet and have it pass through to the degrafa skin… Thats what this post shows you how to do…

lets say you create a style called “customFillColors”

assets/style/styles.css
.myStyledButton
{
customFillColors: #FFFFFF,#0000FF;
}

and you want that to flow into your skin, what you can do is, in your Degrafa skin you have to override updateDisplayList, and get the style in actionscript, and then change the colors accordingly from the style.

override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void
{
super.updateDisplayList( unscaledWidth, unscaledHeight );

var fillColors:Array = getStyle( "customFillColors" );

if ( ( fillColors != null ) && ( fillColors.length == 2 ) )
{
topFillColor = fillColors[ 0 ];
bottomFillColor = fillColors[ 1 ];
}
}

Here is the application, and you can right click to view source

Application - Source

This post is to show how to use custom degrafa states in non button classes… say you want up, down, over states in a class… a button already does that for you, so in degrafa you just use the GraphicBorderSkin and create different states within it… very simple… and a lot of examples out there of how to do…  here are a couple of links to some blog posts that show how to do this.

Vixiom Post (actionscript example)

James Whittacker (mxml post)

What this post will show you how to do is, get those states in non button classes, like a canvas… say you want a canvas to have different states when you rollover and such… maybe you want to use it as a renderer…

I’m going to give credit where credit is due… all this codes is credited to my friend and co worker John Yanarella, he doesnt have a blog yet, and he just did this awesome stuff, and I wanted to be able to remember it… so I’m blogging on it… I fully asked his permission, and made sure he’s getting the credit… I didnt want to put the time into fixing the issue… so my round about solution was to put the degrafa right into the renderer instead of making it extend GraphicBorderSkin… his solution is far cleaner, and much more elegant than mine…

The key thing to look at is in the BoxItemRenderer, or CanvasItemRenderer, in updateDisplayList is setting the currentState to whatever it needs to be…

here is the code, and example

Application - Source

I tried to find all sorts of google searches on the headerRenderer for the Datagrid, and couldn’t find anything… so here is my two cents.

I was tasked with a simple datagrid header, one that didn’t have the default skin, but just had some link button type look to the headers…

You have to use the headerRenderer attribute of the DataGridColumn, and you can’t pass a button into it, that causes a run time error, so you have to hand it a container.

The next trick is to override set date(value:Object):void in the renderer, and invalidateProperties(), when you do that, the component will call commitProperties() and there you can access your button, wthout it being null.

Please check out the app to see the reference.

Application – Source

have a tight deadline by the 15th of Jan. then a release in the beginning of feb.

email me at jensen (dot) axel (at) yahoo.com

1. horizontalScrollPolicy=’on’
2. verticalScrollPolicy=’on’
3. set the width to the parent components width (width=”{myParentContainer.width})
4. set lockedColumnCount=”3″

Application - Source

Application - Source

About six months ago we had some convoluted way of doing something on the backend (PHP), and in order to get something back I was give an single object with a ton of properties and I had to loop over them. For the life of me I couldn’t find any snippets of code that let me loop through an objects properties and get the actual key names… its very simple to loop through an object and get the values, thats cake…. but I was like… hmmm how do I get the key names?

So I came across Dictionary, which I always thought was just an expansion of Object, and I could never really figure out what it did that object didn’t except for the fact that as3coreLib has a Dictionary Utility class that makes it so you can loop over an object and get the keys, and its a light weight .swc file, so I used it up, and started using dictionaries for that reason, and haven’t used Generic Objects ever since, because I figured they did the same thing except Dictionary classes gave me the ability to loop through them and get the keys….

The other day I ran across some code, and thought to myself, so I use a DictionaryUtility class, why didn’t I ever think to even look through the ObjectUtil class in as3… so anyway…. there is a function in that class called getClassInfo, that will give you an array of the properties back… I felt pretty stupid after that, but needless to say I found another way to make my life easier coding….

here is a really small snippet.

var classInfoProperties:Array = ObjectUtil.getClassInfo(a[0]).properties as Array;

This blog post got moved to adobe!!! boo yah!!

John wrote up, and used screen shots, and outlined the application better than I did, but I built it, but he’s the one with the contacts at adobe that wanted the example apps of sfdc… glad I could be a part of it.

To view my running application click here to view the source click here

The Video

(it takes a minute to load)

This blog post has been moved to ADOBE! boo yah!

John’s the one who wrote the documentation and took the screen shots and got the deal with adobe to get the project and example put on adobe.com, so they wanted him to be the author.

but here is the video

To view my running application click here to view the source click here

The Video

(it takes a minute to load)

We have a product right now that has a basic shopping cart in it… and one of the options is to save the cart and view it as a pdf… so we send the request to the server, and return a link back with a link to the pdf, and
because we may have many messages come back from this one service we just use a simple alert box to show the user the feedback and that the application has saved successfully… if we need to put a link in there, the user must copy and paste the link in order to use it… WELLL, the small challenge was to make that a clickable link, and in the least amount of time possible… (15 minutes, rather than 2 hours for styling and the component itself) (it actually took longer to write the blog post, and put up the example than it did to fix the issue)

I was asked to create a component that allows for htmlText to be added to it, and the component has to have all the functionality of an Alert box… so why not extend the alert box, and make something like a BaseAlert.as file that extends Alert…

because you still have to use Alert.show in your application to use it… so rather than going to all the work of creating a way to popup the popup from anywhere in the app, and making sure it dispatches CloseEvents like the original Alert box does, I did some digging and found a forum list that gave the greatest tip EVER! I never really use mx_internal… frankly it confuses me a little bit… the syntax is a little wonkey to me… I’ve never used the whole “::” thing and don’t really understand what it does… someone care to explain?

anyway, I thought this persons simple code was absolutely great!

var a:Alert=Alert.show("dump text");
a.mx_internal::alertForm.mx_internal::textField.htmlText =
some HTMl text goes here;

here is a link to the message post

They do neglect to mention that you have to import the internal namespace though, so in my example thats included. This is a very quick and cheap solution to the problem and just provides a way to fancy up the alert box a little bit by adding the “limited” html text that the flash platform supports… maybe flash 10 will add better htmlText support…. I would assume so with all of the text changes to the platform… but I havent looked into it so don’t quote me…

Application – Source

When you have a project that requires a dynamic interface, and you are adding and removing tabs, lets say you need to reset the selectedIndex of the TabNavigator back to 0, because you may be adding tabs that are not relevant to what you originally had on the screen… when you simply do a “tabNav.removeAllChildren()” on the TabNavigator, and change the selectedIndex in the same function, it just simply doesnt work… there is a bug for it… http://bugs.adobe.com/jira/browse/SDK-14157

So the more elegant solution that also pays attention to the flex framework is by using commitProperties() when you use commitProperties it guarantees that things will be done after the initialization is done in the component, it also is guarantees things will only run once per frame I believe… (don’t quote me on that, i’m just to lazy to look up where I read that, because I’ve got to get back to work)

anyway… when you use invalidateProperties() when you want to remove the children, you would simply set the selectedIndex before you invalidate, and then do the work in commitProperties… and it should just work because of the way commitProperties is supposed to work…

when in reality, it doesnt work either…

so what you end up having to do is use callLater( commitProperties )

private var _tabNavChanged:Boolean = false;
public function resetTabNav():void
{
tabNav.selectedIndex = 0;

_tabNavChanged = true;
callLater( commitProperties )
}

_tabNavChanged = false;
}


}//end function

Hope this helps someone… didn’t really take long i suppose I’m just used to using commitProperties

Application – Source

When you use an itemRenderer in your TileList, as well with any of the listBase components, it reuses renderers, there are tons and tons of posts a lot from a colleague Ben Clinkenbeard on renderer issues with data, and one of the things I do normally is override the data setter in the renderer, and bind to a value object…

The problem I recently came across using the TileList, was that we were using the TileList to display a list of products, and there could be a lot… hundrends… when you use the TileList, and you scroll, it reuses the renderer for efficiency… 

I liked that it was fairly efficient and wanted to keep it that way… some of the other options would be to use a repeater, but that’s not a very good option anyway… especially if you are going to filter data… 

Because I was binding to a vo, (or the data object) in my renderer, when you scroll the data setter gets called over and over, and the renderer pretty much stays the same, and it just changes the data…. so the tilelist really just fakes you out by putting a scroll bar there… at least somewhat anyway…

so when you scroll, and you are binding to the source of the image like so: <mx:Image source=”{data.imageURL}”/>

the imageURL constantly gets changed when you scroll… so when you scroll it causes the image to be redownloaded… 

I want the image to be downloaded only ONCE! so what I’m doing now just for this project (there probably is no need to do this if your tilelist all fits on one page, or has pagination) is using a ImageMap class, that is dynamic and when the image comeback for the first time it is stored in that class, and whenever the data changes in the renderer, it checks to see in that file if it has the image it needs, and then uses that one rather than downloading another one, and it does it fairly efficiently.  Check out the example app, you can right click to view source.

Application – Source

so I simply passed the number in with a .toString()
as
//mySSN is a number
ssnV.validate(mySSN.toString() );

mxml:
<mx:SocialSecurityValidator
id = "ssnV"
/>

<mx:TextInput restrict="[A-Z]" />

simple stuff.