Recently in tutorials Category

Yahoo Pipes + Flex Tutorial

Yahoo Pipes is a pretty nifty utility for quickly bundling data sources from the web into one neat feed. While you can do nearly everything Pipes does with ActionScript, the feeds must be cached locally for flash player to access them because of crossdomain policies. For this reason, it is nice to only have to cache one feed, instead of caching several and then piecing them all together. This also makes it easy to modify the data feed later on through the Pipes interface without having to touch ActionScript.

Building a Yahoo Pipes app

First, sign up for a Yahoo Pipes account if you haven't already: http://pipes.yahoo.com/pipes/
Next, create a simple Application. There are plenty of examples out there. You can always clone someone else's pipe, and modify it with your own favorite data sources.

For this tutorial, I have created an app that pulls feeds from Digg.com, and combines snapshots of the articles from Snap.com

The sample app can be viewed here:
http://pipes.yahoo.com/pipes/pipe.info?_id=xv9z9HSr3BG_6gN48jxBKg

Setting up PHP caching
I am using a PHP RSS caching script called RSS Fetch. It can be easily customized to cache at specified intervals, or constantly pull the newest data. I have added a line to the rsslist array for the yahoo pipes RSS source:
"Pipes" => "http://pipes.yahoo.com/pipes/pipe.run?_id=xv9z9HSr3BG_6gN48jxBKg&_render=rss"
You'll also need to create a "cache" directory for the script to write to. My example can be seen here:
http://infinitearray.com/experiments/feeder/rssfetch.php?id=Pipes&cachetime=5

Creating a Flex App
Luckily, Adobe has done most of the work here. They've open sourced a few libraries that take care of parsing RSS feeds. You'll need both the as3corelib and the as3syndicationlib. Mike Chambers has built a great demo App for working with these libraries.

View the demo

I've built a simple demo application in Flex that pushes the Yahoo Pipes RSS feed into a TileList component.

I've packaged the entire source for this application, including the external libraries.

View Source

[Flex Labs] Overlaying a tiled PNG on an application background gradient in flex.

This is quite a simple tutorial. It is more about design than programming. It will cover adding an application gradient background, and then overlaying a tiled PNG pattern on top. With a little creativity, this effect can make a nice application or website background that is not easily reproducible with html / css.

First, begin by setting up your application. First we’ll add a background gradient, and set up a few other parameters:

<?xml version=”1.0” encoding=”utf-8”?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
width=”100%” height=”100%” fontAntiAliasType=”advanced” layout=”absolute”
backgroundGradientColors=”[#535353, #2f2f2f]” horizontalScrollPolicy=”off”>

Next, we add a VBox that will take up the whole application background. The CSS class dottedBG will contain the location for the tile image:

<mx:VBox width=”100%” height=”100%”
            verticalAlign=”top” horizontalAlign=”center” verticalGap=”0”
            paddingLeft=”0” paddingRight=”0” paddingTop=”30” paddingBottom=”20”
            styleName=”dottedBG” horizontalCenter=”0”>

Finally, add the CSS class:

.dottedBG{
background-image: Embed(“dottedtile.png”);
}

I will post the source for this example soon. Feel free to post links to your own examples.

Continue reading [Flex Labs] Overlaying a tiled PNG on an application background gradient in flex..

[Flex Labs] Customizing the flex datagrid

This is a slightly advanced tutorial covering a more in depth way to customize the datagrid. Many of the style properties of the datagrid are protected, or not otherwise accessible. In order to really customize it, you will need to override specific methods related to the drawing of the component. Without knowing specifically which ones need to be adjusted, the implementation can be buggy. I have managed to go through all of the methods in the component line by line to verify which ones need to be modified. Here is a list of key methods, along with their parameters:

drawHeaderBackground(headerBG:UIComponent):void
drawRowBackgrounds():void
drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

Next, comes the actual override code. I have created an AS file named DrawListingsGrid.as in the pkg/controls/ directory of the project. I have added comments as place holders in the areas where adjustments are made.

package pkg.controls
{

import flash.display.DisplayObject;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.SpreadMethod;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.display.Shape;
import flash.geom.*;

import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.EdgeMetrics;
import mx.core.mx_internal;
import mx.core.FlexSprite;
import mx.core.FlexShape;
import mx.core.UIComponent;
import flash.display.BitmapData;
import mx.core.BitmapAsset;
import mx.controls.Image;
import mx.styles.StyleManager;

use namespace mx_internal;

public class DrawListingsGrid extends DataGrid
{

// embedding an image for the row background
[Embed(source="../assets/datagrid_row_bg.jpg")]
[Bindable]
public var rowbgCls:Class;

// embedding an image for the header background
[Embed(source="../assets/datagrid_header_bg.jpg")]
[Bindable]
public var imgCls:Class;

private var displayWidth:Number;

override protected function drawHeaderBackground(headerBG:UIComponent):void
{
var g:Graphics = headerBG.graphics;
var imgObj:BitmapAsset = new imgCls() as BitmapAsset;
g.clear();

var bm:EdgeMetrics = borderMetrics;
var adjustedWidth:Number = unscaledWidth - (bm.left + bm.right);
maskShape.width = adjustedWidth;

var hh:Number = rowInfo.length ? rowInfo[0].height : headerHeight;

var vdistance:int;
var vstart:int;
var vstartOffset:int;
var vdistanceOffset:int;

// filling in header with embedded background image
g.lineStyle(0, 0x000000, 0);
g.beginBitmapFill(imgObj.bitmapData);
g.moveTo(0, 0);
g.lineTo(adjustedWidth, 0);
g.lineTo(adjustedWidth, hh);
g.lineTo(0, hh);
g.lineStyle(0, 0x000000, 0);
g.endFill();
}

override protected function drawRowBackgrounds():void
{
if (displayWidth != unscaledWidth - viewMetrics.right - viewMetrics.left)
{
displayWidth = unscaledWidth - viewMetrics.right - viewMetrics.left;
}
var rowBGs:Sprite = Sprite(listContent.getChildByName("rowBGs"));
if (!rowBGs)
{
rowBGs = new FlexSprite();
rowBGs.mouseEnabled = false;
rowBGs.name = "rowBGs";
listContent.addChildAt(rowBGs, 0);
}

var colors:Array;

colors = getStyle("alternatingItemColors");

if (!colors || colors.length == 0)
return;

var curRow:int = 0;
curRow++;

var i:int = 0;
var actualRow:int = verticalScrollPosition;
var n:int = listItems.length;

while (curRow < n)
{
drawRowBackground(rowBGs, i++, rowInfo[curRow].y, rowInfo[curRow].height, colors[actualRow % colors.length], actualRow);
curRow++;
actualRow++;
}

while (rowBGs.numChildren > i)
{
rowBGs.removeChildAt(rowBGs.numChildren - 1);
}
}

override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void {

var background:Shape;
if (rowIndex < s.numChildren)
{
background = Shape(s.getChildAt(rowIndex));
}
else
{
background = new FlexShape();
background.name = "background";
s.addChild(background);
}

background.y = y;

var height:Number = Math.min(height, listContent.height - y);
var bm:EdgeMetrics = borderMetrics;
var adjustedWidth:Number = unscaledWidth - (bm.left + bm.right);

//fill the row background with the embedded image
var imgObj:BitmapAsset = new rowbgCls() as BitmapAsset;

var g:Graphics = background.graphics;
g.lineStyle(0, 0x000000, 0);
g.beginBitmapFill(imgObj.bitmapData);
g.moveTo(0, 0);
g.lineTo(displayWidth, 0);
g.lineTo(displayWidth, height);
g.lineTo(0, height);
g.lineStyle(0, 0x000000, 0);
g.endFill();

}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (displayWidth != unscaledWidth - viewMetrics.right - viewMetrics.left)
{
displayWidth = unscaledWidth - viewMetrics.right - viewMetrics.left;
}
}

In order to use this class, you will need to embed it as a custom component in the MXML file.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:con="pkg.controls.*">

Next, you can actually add the component to the stage, by referencing the link from the header:

<con:DrawListingsGrid width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="Column1"/>
<mx:DataGridColumn headerText="Column2"/>
</mx:columns>
</con:DrawListingsGrid>

« resources | Main Index | Archives

Recently in tutorials Category

Yahoo Pipes + Flex Tutorial

[Flex Labs] Overlaying a tiled PNG on an application background gradient in flex.

[Flex Labs] Customizing the flex datagrid

Search

About this Archive

experiments (2)

resources (3)

tutorials (3)

tutorials: Monthly Archives