Flex Blog

Spooky Frenzy – iPad Game

Arjan — Sun, 25 Sep 2011 11:52:28 +0000

Line Break

Author: Arjan (47 Articles) - Author Website

Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.

Hi all,

This is just a bit of shameless advertising from me. A while ago (around April). I started to learn Objective-C (iOS) development. Might seem strange as a Flex developer but it just seemed fun at the time. Shortly after that I had an idea in my head for a (iPad) game and started working with a friend to create it. He did the artwork, I did the coding stuff.
Now, after about six months of coding and drawing the game is available in the App Store.

The game is called Spooky Frenzy, and the idea is simple: fight off the Ghosts that are trying to get you. Each character requires it’s own gesture (swipe left, right, up down or pinch) to beat it. Check out the game’s website for more information. Check out the promo movie below for an impression of the game.

No related posts.

Fountain Example

Janez Feldin — Mon, 25 Jul 2011 13:31:10 +0000

Line Break

Author: Janez Feldin (6 Articles) - Author Website

Janez likes to experiment with flash in his own free time. His other hobbies are playing volleyball, listening to the music, watching movies and above all else, paragliding.

Here is another example, this one more visually appealing (I hope). I made a class, Fountain, not particulary usefull by itself, but can be used to teach some basics for handling bitmap and bitmapdata objects.

I started by creating new flex project. Normal project for web application, and than created new class. I called it Fountain and extended UIComponent. UIComponent only so that bitmap can be added to it. Here is the code for that class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255

package com.FlexBlog
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.filters.BlurFilter;
import flash.geom.Point;
import flash.utils.Timer;
import flash.utils.getTimer;

import mx.core.UIComponent;
import mx.events.FlexEvent;

public class Fountain extends UIComponent
{
/* declaration of bitmapdata which will show
our particles, and bitmap for our bitmapdata */
private var bmd:BitmapData;
private var bm:Bitmap;

/* Array of objects. In each object
we store positions, speeds,...*/
private var dp_particles:Array = new Array();

/* delay for redrawing the particles
(small number -> fast motion,
high number -> slow motion */
private var doMotionDelay:Number = 10;

/* declaration of timer which calls
continuously the function to redraw
particles to bitmapdata */
private var motion_timer:Timer;

/* some of the variables to change the
visual appearance (try experimenting a bit) */
[Bindable] public var maxParticles:int = 300;

/* defines how much particles can be created at once
(it helps that particles doesn't appear in intervals) */
[Bindable] public var maxParticlesAtOnce:Number = 15;

/* x and y position where the particles will appear */
[Bindable] public var sourcePoint:Point = new Point(350,700);

/* defines the angle at wich particles will be shot */
[Bindable] public var startAngle:Number = 0;

/* particles can be shot at 45° different angle tan start angle */
[Bindable] public var deltaAngle:Number = 45;

[Bindable] public var maxStartSpeed:Number = 7;

[Bindable] public var minStartSpeed:Number = 3;

/* if the particles are bounding they never leave the visible area,
so we need another criteria to know when to delete them.
If dampingFactor is set to 1 particles won't loose
speed when bouncing so they won't be deleted */
[Bindable] public var minEndSpeed:Number = 1;
[Bindable] public var gravityY:Number = 0.1;
[Bindable] public var gravityX:Number = 0;
[Bindable] public var blurFilter:BlurFilter = new BlurFilter(1.5,1.5,1);

/* defines how much speed each particle keeps when
bouncing of the walls (0 -> no bouncing, 1 -> continuous bouncing) */
[Bindable] public var dampingFactor:Number = 0;

/* array of colors for particles. Type color more times
if you want more particles to have that color instead
of other colors. */
public var colors:Array = [0x0000FF,0x00FF00,0xFF0000,0x00FFFF,0xFF00FF,0xFFFF00];

/* main function of the class, it gets called when
you define the class */
public function Fountain()
{
// since we extended UIComponent we need to inherit
// all the properties of new UIcomponent. We achieve
// that with calling super()
super();

// when the UIComponent initialize and is
// fully created, we call the function appComplete
this.addEventListener(FlexEvent.CREATION_COMPLETE, appComplete);
}

/* function to add bitmapdata and bitmap to stage, and
to start our drawing by starting the motion_timer */
private function appComplete(e:Event):void
{
// since we want the width and height of our fountain to
// match the width and height set in mxml (or in actionscript
// if we define new fountain with actionscript and not mxml)
// for our component, we need to define new bitmapdata in
// appComplete because before appcomplete gets called this.width
// is not yet defined!

bmd = new BitmapData(this.width,this.height,false,0x000000);

// because we cannot add bitmapdata to stage (or another visual component)
// we need to create new bitmap that holds our bitmapdata object
bm = new Bitmap(bmd);

// finnaly we can indirectly add our bitmapdata to UIComponent
this.addChild(bm);

// we create new timer, add event listener to it so we
// can continuously redraw particles
motion_timer = new Timer(doMotionDelay);
motion_timer.addEventListener(TimerEvent.TIMER, doMotion);

// after everything is set, we start the timer
motion_timer.start();

}

// function that creates new particles when dp_particles
// length is less than maxParticles
private function createParticles():void
{
// some temp variables
var i:int;
var newParticles:int;

// variable that stores tha number of particles
// that will be created
var temp_speed:Number;
var temp_angle:Number;

// if statment that checks if we can create all missing
// particles at once (because of the maxParticlesAtOnce)
// here more particles are missing, than we allow them to
// spawn at a time
if ( maxParticles-dp_particles.length > maxParticlesAtOnce )
{
// we get the random number which will define how much particles
// will be created at once, because we can't create all the missing
// particles, the random number must be lower than MaxParticlesAtOnce
newParticles = Math.ceil(Math.random()*maxParticlesAtOnce);
}
else
{
// maxParticles-dp_particles.length defines the number of missing
// particles, and also makes sure that our random number is not larger
// than this one
newParticles = Math.ceil(Math.random()*(maxParticles-dp_particles.length));
}

// for loop to create new particles
for(i=0;i<newParticles;i++)
{
// calculates random speed betwen minStartSpeed and maxStartSpeed
temp_speed = minStartSpeed + Math.random()*(maxStartSpeed-minStartSpeed);

// calculate the starting angle (example: if we have startAngle=90
// and deltaAngle 45 the starting angle can be anywhere between 45 and 135
// with Math.PI/180 transforms angle from ° to radians
temp_angle = (-90+startAngle+Math.random()*deltaAngle-deltaAngle/2)*Math.PI/180;

// adds new object (particle) to our array of particles with
// calculated starting values
// with angle we split our speed to x and y direction (easier to draw
// if we have x and y speed than speed and angle)
// for color we generate random integer between 0 and colors.length
// to randomly select color from our array of colors
dp_particles.push({x: sourcePoint.x,y: sourcePoint.y,
vx: temp_speed*Math.cos(temp_angle),
vy: temp_speed*Math.sin(temp_angle),
color: colors[Math.floor(Math.random()*colors.length)]});
}
}

// function which redraws our particles on bitmapdata
private function doMotion(e:TimerEvent):void
{
var i:int;

// temporary variable to know if the particle we are
// curently rendering was deleted
var particle_deleted:Boolean;

// we apply the filter to bitmapdata to look cooler
// also the filter is applied before the new position is calculated
// because we want to blur the trail of the particle only and not
// the particle itself
bmd.applyFilter(bmd,bmd.rect,new Point(),blurFilter);

// if statment to check if there are any particles
// missing. If there are we call createParticles() to create new ones
if ( dp_particles.length < maxParticles )
{
createParticles();
}

// for loop to go trought all particles and recalculate their new
// position, also checks if any particles are out of visible range
// and delete them
for(i=0;i<dp_particles.length;i++)
{
// we set the particle_delted to false just to make sure
// that it isn't set to true from last particle
particle_deleted = false;

// we redraw curently rendering particle, and than
// calculates new x and y position (the order could be reverse)
bmd.setPixel(dp_particles[i].x,dp_particles[i].y,dp_particles[i].color);

// for new position we only add the speed to the curent position
dp_particles[i].x = dp_particles[i].x+dp_particles[i].vx;
dp_particles[i].y = dp_particles[i].y+dp_particles[i].vy;

// two if statements to chek for bounce
if ( dp_particles[i].x <= 0 || dp_particles[i].x >= this.width )
{
// fro bounce from wall we reverse the direction
// of speed and also multiply the speed with dampingFactor
// so that we can set how particle bounce
dp_particles[i].vx = -dp_particles[i].vx * dampingFactor;
}
if ( dp_particles[i].y <= 0 || dp_particles[i].y >= this.height )
{
dp_particles[i].vy = -dp_particles[i].vy * dampingFactor;
}

// if statement to check if particle has speed low enough
// to be deleted or if it is out of visible range (actualy 5 pixels from sides,
// because particles that are bouncing will never leave the visible area)
if ( Math.abs(dp_particles[i].vx) < minEndSpeed &&
Math.abs(dp_particles[i].vy) < minEndSpeed &&
(dp_particles[i].x < 5 || dp_particles[i].x > this.width-5
|| dp_particles[i].y < 5 || dp_particles[i].y > this.height-5) )
{
// we remove the particle from out array with splice function.
// First parameter (i) is the index, the second one is the count
// of the parameters that should be deleted, and next parameters
// would be the values to be added to array (we don't need this one)
dp_particles.splice(i,1);
particle_deleted = true;
}

// we need to check that particle wasn't deleted. If the particle
// would be deleted and we still applied the gravity effect, we
// would apply the gravity effect to wrong particle or get an
// error(if the deleted particle would be the last one in our array)
if ( !particle_deleted )
{
dp_particles[i].vx += gravityX;
dp_particles[i].vy += gravityY;
}
}
}
}
}

After we have created the class we only need to add it to the stage. I did it with mxml, I also added a form which had some sliders in it to quickly change settings.
Here is the mxml code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:FlexBlog="com.FlexBlog.*"
minWidth="955" minHeight="600" xmlns:local="*">

-- we add our fountain class to stage with mxml.
Same could be achieved with actionscript by
var name_for_variable:Fountain = new Fountain()-->
<FlexBlog:Fountain id="_fountain" x="300" width="700" height="700" />

-- Some form items to set the properties of the fountain.
each form item is bind to some variable in our Fountain class
this is only for quick settings -->
<mx:Form left="10" top="10" width="280" bottom="10">
<mx:FormItem label="Max particles" width="100%">
<s:HSlider width="100%" minimum="1" maximum="1000"
value="@{_fountain.maxParticles}"/>
mx:FormItem>
<mx:FormItem label="Max new Particles" width="100%">
<s:HSlider width="100%" minimum="1" maximum="50"
value="@{_fountain.maxParticlesAtOnce}"/>
mx:FormItem>
<mx:FormItem label="Source point x" width="100%">
<s:HSlider id="slider_source_x" width="100%"
minimum="0" maximum="{_fountain.width}"
value="200"
change="_fountain.sourcePoint.x = slider_source_x.value"/>
mx:FormItem>
<mx:FormItem label="Source point y" width="100%">
<s:HSlider id="slider_source_y" width="100%"
minimum="0" maximum="{_fountain.height}"
value="200"
change="_fountain.sourcePoint.y = slider_source_y.value"/>
mx:FormItem>
<mx:FormItem label="Start angle" width="100%">
<s:HSlider width="100%" minimum="0" maximum="360"
value="@{_fountain.startAngle}"/>
mx:FormItem>
<mx:FormItem label="Delta angle" width="100%">
<s:HSlider width="100%" minimum="0" maximum="360"
value="@{_fountain.deltaAngle}"/>
mx:FormItem>
<mx:FormItem label="Gravity x" width="100%">
<s:HSlider width="100%" stepSize="0.05"
minimum="-1" maximum="1"
value="@{_fountain.gravityX}"/>
mx:FormItem>
<mx:FormItem label="Gravity y" width="100%">
<s:HSlider width="100%" stepSize="0.05"
minimum="-1" maximum="1"
value="@{_fountain.gravityY}"/>
mx:FormItem>
<mx:FormItem label="Damping factor" width="100%">
<s:HSlider width="100%" stepSize="0.1"
minimum="0" maximum="1"
value="@{_fountain.dampingFactor}"/>
mx:FormItem>
mx:Form>

s:Application>

Here is a screenshot of the fountain in action (its animating in the real example, ofcourse):

TinyURL usage with Flash Builder

Reading & Writing files in Adobe AIR

Janez Feldin — Tue, 03 May 2011 13:47:13 +0000

Line Break

Author: Janez Feldin (6 Articles) - Author Website

Janez likes to experiment with flash in his own free time. His other hobbies are playing volleyball, listening to the music, watching movies and above all else, paragliding.

This is a simple example that shows you how to create new class for reading and writing text (.txt) files in Adobe AIR.

We start of creating a new AIR project and an ActionScript Class. In my case I called the Class TextFile, but you can ofcourse name it what you like. Also note that I have put this class in com.FlexBlog.data package.

You can download my sample AIR application here (View Source is enabled), or you can see full source below.

Below is the code of my TextFile class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

package com.FlexBlog.data
{
import flash.filesystem.File;
import flash.filesystem.FileMode;
import flash.filesystem.FileStream;

public class TextFile
{
public function TextFile()
{

}

// Writes the value parameter to file and replaces everything that was already in file (if existed)
public static function write(value:String,target_url:String):void
{
//crates the new file class from string that contains target url...
var file:File = new File(target_url);
//creates the new FileStream class used to actualy write/read/... the file...
var fs:FileStream = new FileStream();
//opens the file in write method
fs.open(file,FileMode.WRITE);
//writes the text in file (UTFBytes are normal text...)
fs.writeUTFBytes(value);
//closes the file after it is done writing...
fs.close();
}

// function to read the text file starting with startIndex and ending with endIndex
public static function read(target_url:String,startIndex:int = 0,endIndex:int = int.MAX_VALUE):String
{
var resaults:String;
var file:File = new File(target_url);
var fs:FileStream = new FileStream();
//here we open the file in reading mode... you cannot write anything in the file while it is opened in this mode
fs.open(file,FileMode.READ);
//we move FileStream class to our startIndex, so that when we read something from the file it starts at startIndex and not at the begining of the file... ( if startIndex is 0 than that is the begining of the file)
fs.position = startIndex;
//we read the file and put it in resaults string...
//we have to pass how many bytes we want to read to readUTFBytes. If we pass grater number than there are avaliable bytes we will get an error. That is why we take the minimum from bytesAvaliable and diference between start and end index...
resaults = fs.readUTFBytes(Math.min(endIndex-startIndex,fs.bytesAvailable));
//after we have done everything we want we need to close the file...
fs.close();
//returns the string containing the text from startIndex to endIndex
return resaults;
}

// function used to append text to the end of text file. It is the same as write function, the only diference is that we open the file in APPEND mode and not WRITE. That means every time we write something AIR automatically writes that to the end of the file...
public static function append(value:String,target_url:String):void
{
var file:File = new File(target_url);
var fs:FileStream = new FileStream();
fs.open(file,FileMode.APPEND);
fs.writeUTFBytes(value);
fs.close();
}
// function used to add text to desired position in file. It is the same as append, the diference is that we need to open file in UPDATE mode and we need to set position of our FileStream to desired position stored in startIndex parameter
public static function update(value:String,target_url:String,startIndex:int = 0):void
{
var file:File = new File(target_url);
var fs:FileStream = new FileStream();
fs.open(file,FileMode.UPDATE);
fs.position = startIndex;
fs.writeUTFBytes(value);
fs.close();
}
}
}

And here is the application’s mxml file, where you can see the example of how to call the functions in our class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
-- Place non-visual elements (e.g., services, value objects) here -->
fx:Declarations>
<s:Button label="Write" bottom="10" left="87" click="write(event)"/>
<s:Button label="Read" left="10" bottom="10" click="read(event)"/>
<s:Button label="Update" bottom="10" left="165" click="update(event)"/>
<s:Button label="Append" left="243" bottom="10" click="append(event)"/>
<s:TextArea id="textArea" left="10" top="10" bottom="50" width="48%"/>
<mx:FileSystemTree id="file_tree" right="10" width="48%" top="10" bottom="50"/>

<fx:Script>
[CDATA[
import com.FlexBlog.data.TextFile;

import mx.utils.ObjectUtil;

private function read(e:MouseEvent):void
{
// check if we have selected any file/folder
if ( file_tree.selectedPath != null )
{
// we create new file to check if it is the txt file...
var file:File = new File(file_tree.selectedPath);
if ( file.extension == "txt" )//we check to see if file extension is txt if not we don't do anything otherwise we execute the desired action
{
textArea.text = TextFile.read(file.url);
}
}
}

private function write(e:MouseEvent):void
{
if ( file_tree.selectedPath != null )
{
var file:File = new File(file_tree.selectedPath);
if ( file.extension == "txt" )
{
TextFile.write(textArea.text,file.url);
}
}
}

private function update(e:MouseEvent):void
{
if ( file_tree.selectedPath != null )
{
var file:File = new File(file_tree.selectedPath);
if ( file.extension == "txt" )
{
//this will append in front of the file
TextFile.update(textArea.text,file.url,0);
}
}
}

private function append(e:MouseEvent):void
{
if ( file_tree.selectedPath != null )
{
var file:File = new File(file_tree.selectedPath);
if ( file.extension == "txt" )
{
TextFile.append(textArea.text,file.url);
}
}
}

]]>
fx:Script>
s:WindowedApplication>

CheckBox in List using MobileIconItemRenderer for Flex Mobile

Arjan — Tue, 29 Mar 2011 18:26:08 +0000

Line Break

Author: Arjan (47 Articles) - Author Website

In my previous post I showed you how you can set a decoratorClass of a MobileIconItemRenderer depending on the data of the list item. The example made me wonder if it was possible to display a CheckBox in a MobileIconItemRenderer. Turns out it’s pretty easy to do so.

First lets create a new Flex Mobile project, I named it CheckboxInMobileIconItemRenderer. For this example we are going to store our data in a model class. By using a model class we can retain our data when we navigate to other views, if we don’t do that, the view and any data, variables that are in the view get trashed by the runtime.

Create a new package called model. After that, create a new ActionScript class in the model package. Call it AppModel.as. To make sure the application always refers to the same model instance, we are going to simulate singleton behaviour. I’m not going to explain this here, it’s quite easy to see how this works. Basically the class keeps track of a static instance variable and only instantiates this one time. After that, it keeps returning this instance when an instance is requested by using the getInstance() method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

package model
{
[Bindable]
public class AppModel
{
import mx.collections.ArrayCollection;

private static var _instance:AppModel;

public var items:ArrayCollection;

public function AppModel()
{
}

public static function getInstance():AppModel
{
if( _instance == null )
{
_instance = new AppModel();
}
return _instance;
}
}
}

Now navigate to the Home view Flash Builder created for you in the views package, add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="Select items:" initialize="init()">
<s:layout>
<s:VerticalLayout gap="0"/>
s:layout>
<fx:Script>
[CDATA[

import model.AppModel;
import mx.collections.ArrayCollection;

[Bindable]
private var appModel:AppModel;

// Generate dummy data
private function init():void
{
// Get model instance
appModel = AppModel.getInstance();

// If items is empty, create dummy data
if(appModel.items == null)
{
appModel.items = new ArrayCollection();
var obj:Object;
for( var i:int=0; i<10; i++ )
{
obj = new Object();
obj.Name = "List item " + i;
obj.Description = "Description " + i;
obj.Status = (i % 2 == 0 ? true : false);
appModel.items.addItem(obj);
}
}
}

]]>
fx:Script>

<s:List id="myList" dataProvider="{appModel.items}" labelField="Name"
width="100%" height="100%"/>
s:View>

Create a new MXML component in the views package, name it CheckboxListItemRenderer and make sure its based on MobileIconItemRenderer. Add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<?xml version="1.0" encoding="utf-8"?>
<s:MobileIconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
messageField="Description" height="100"
initialize="init()">
<fx:Script>
[CDATA[
import mx.collections.ArrayCollection;
import spark.components.Application;
import spark.components.CheckBox;
import spark.components.List;

private var cb:CheckBox;

private function init():void
{
if( !cb )
{
cb = new CheckBox();
cb.addEventListener(MouseEvent.CLICK, handleClick);
cb.x = this.parent.width-70;
cb.y = 25;
this.addChild( cb );
}
}

private function handleClick(event:MouseEvent):void
{
super.data.Status = cb.selected;
}

override public function set data(value:Object):void
{
if(value != null)
{
super.data = value;
cb.selected = value.Status;
}
}
]]>
fx:Script>

s:MobileIconItemRenderer>

Navigate to the home view and set the itemRenderer of the List in the home view to be the one we just created:

1 2	<s:List id="myList" dataProvider="{appModel.items}" labelField="Name" width="100%" height="100%" itemRenderer="views.CheckboxListItemRenderer"/>

Test the application. You should see something like this:

Create a second view in the views package, call it SelectedItemsView. Add the following code:

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="You selected:">
<s:layout>
<s:VerticalLayout gap="0"/>
s:layout>
<s:List id="selectedItems" dataProvider="{data}"
width="100%" height="100%" labelField="Name"/>
<s:Button width="100%" label="Previous" click="navigator.popView()"/>
s:View>

Go back to the Home view and add the following button:

1	<s:Button width="100%" label="Next" click="next()"/>

Add the following method in the script section:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Navigate to Selected Items View
private function next():void
{
// Get all selected items
var selectedItems:ArrayCollection = new ArrayCollection();
for each( var obj:Object in appModel.items )
{
if( obj.Status )
{
selectedItems.addItem(obj);
}
}
// Navigate to the SelectedItemsView with selectedItems as data
navigator.pushView( SelectedItemsView, selectedItems );
}

Now you can navigate between the two views. Notice that the application “remembers” the selected items when you navigate back and forth between views. If you keep the items ArrayCollection as a variable in the view, it gets destroyed when you navigate away from the view. Screens of the finished application:

Data Dependent decoratorClass in MobileIconItemRenderer Example

Arjan — Mon, 28 Mar 2011 15:12:17 +0000

Line Break

Author: Arjan (47 Articles) - Author Website

This small example shows you how you can create a List that has uses a MobileIconItemRenderer that has a decoratorClass that depends on the data.

Create a new Mobile Flex Project, give it a name and click finish. Navigator to the default home view and add a list, dataprovider and a method that creates some dummy data:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="MobileIconItemRenderer" initialize="init()">

<fx:Script>
[CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var items:ArrayCollection;

// Generate dummy data
private function init():void
{
items = new ArrayCollection();
var obj:Object;

for( var i:int=0; i<10; i++ )
{
obj = new Object();
obj.Name = "List item " + i;
obj.Description = "Description " + i;
obj.Status = i % 3;
items.addItem(obj);
}
}

]]>
fx:Script>

<s:List id="myList" dataProvider="{items}" labelField="Name"
width="100%" height="100%" itemRenderer="views.ListItemRenderer"/>
s:View>

First create an assets package and add three icons to it, you can find the icons here.

You can see that the list uses an itemRenderer, create it by creating a new MXML component that’s based on MobileIconItemRenderer in the views package, name it ListItemRenderer. Add the following code to it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?xml version="1.0" encoding="utf-8"?>
<s:MobileIconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
messageField="Description">
<fx:Script>
[CDATA[

// Embed "Done" icon
[Embed(source="assets/done.png")]
private var iconDone:Class;

// Embed "Open" icon
[Embed(source="assets/open.png")]
private var iconOpen:Class;

// Embed "Progress" icon
[Embed(source="assets/progress.png")]
private var iconInProgress:Class;

// Set decoratorClass depending on status
override public function set data(value:Object):void
{
if(value != null)
{
super.data = value;
var status:int = value.Status;
var icon:Class;
switch(status){
case 0:
icon = iconOpen;
break;
case 1:
icon = iconInProgress;
break;
case 2:
icon = iconDone;
break;
}
this.decoratorClass = icon;
}
}
]]>
fx:Script>
s:MobileIconItemRenderer>

Now run your application. If everything is ok, you should see a different icon for each of the statusses (1,2 or 3).

Flex 4 Resize Effect Example

Roelof — Wed, 02 Mar 2011 20:04:34 +0000

Line Break

Author: Roelof (13 Articles) - Author Website

Roelof is a SAP Consultant specialized in Front-End development. In his spare free time he is either developing on the web, playing basketball, watching soccer or traveling. He is also the co-owner of Flex-Blog.com.

YH4AAZEM8PF5 This example shows you how to use the resizeEffect along with a simple fade effect to make it look smooth!

The Resize Effect is pretty straight forward, there are just a few simple rules:

Make sure the object you want to resize has a width and height of 100%.
Create enough space within your application.

Below is the example with View Source enabled:

And here is the full source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="500" height="300" viewSourceURL="srcview/index.html">
<fx:Script>
[CDATA[
import mx.events.FlexEvent;

protected function addImage(event:MouseEvent):void
{
myImage.visible = true;
myImage.includeInLayout = true;
}

protected function removeImage(event:MouseEvent):void
{
myImage.visible = false;
myImage.includeInLayout = false;
}

]]>
fx:Script>

<fx:Declarations>
<s:Fade duration="2000" alphaFrom="0" alphaTo="1" id="fadeIn" />
<s:Fade duration="100" alphaFrom="1" alphaTo="0" id="fadeOut" />
fx:Declarations>

<s:layout>
<s:HorizontalLayout horizontalAlign="center" />
s:layout>

<s:VGroup verticalAlign="middle" horizontalAlign="center" paddingTop="10">
<s:HGroup verticalAlign="middle" horizontalAlign="center" paddingLeft="10" paddingRight="10">
<s:Button label="Add image!" click="addImage(event)"/>
<s:Button label="Remove image!" click="removeImage(event)"/>
s:HGroup>
<s:HGroup verticalAlign="middle" horizontalAlign="center">
<s:Panel width="100%" height="100%" title="I'm a resizable Panel!" resizeEffect="Resize">
<mx:Image id="myImage" source="http://www.flex-blog.com/wp-content/themes/revolution_news-21/images/header.png"
visible="false" includeInLayout="false"
showEffect="{fadeIn}" hideEffect="{fadeOut}" />
s:Panel>
s:HGroup>
s:VGroup>

s:Application>

If you have a question, leave a comment or post it in our flex forum!

Jump to next field using the Focus Manager

Roelof — Mon, 28 Feb 2011 19:16:35 +0000

Line Break

Author: Roelof (13 Articles) - Author Website

The following example shows you how to use the FocusManager and how to set the focus to a TextInput using the setFocus() method.

In this example you can fill you birthday (MM/DD/YYYY) and the focus will jump to the next field automatically. (View source is enabled or scroll down for full source code.)

And here is the full source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="500" height="100">
<fx:Script>
[CDATA[
import mx.events.FlexEvent;

import spark.events.TextOperationEvent;

public function checkLengthAndFocus(event:TextOperationEvent):void
{
if( event.currentTarget.id == "month" && event.currentTarget.text.length == 2 )
{
focusManager.setFocus( day );
}
if( event.currentTarget.id == "day" && event.currentTarget.text.length == 2)
{
focusManager.setFocus( year );
}
}

]]>
fx:Script>

<s:VGroup width="100%" height="100%" horizontalAlign="center" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="20" >

<s:Label text="Fill in your birthday (MM/DD/YYYY)" />

<s:HGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">

<s:TextInput id="month" width="23" change="checkLengthAndFocus(event)" />
<s:TextInput id="day" width="23" change="checkLengthAndFocus(event)" />
<s:TextInput id="year" width="46" maxChars="4" />

s:HGroup>

s:VGroup>

s:Application>

No related posts.

Searching Data using a Class Example

Janez Feldin — Wed, 16 Feb 2011 18:50:12 +0000

Line Break

Author: Janez Feldin (6 Articles) - Author Website

Janez likes to experiment with flash in his own free time. His other hobbies are playing volleyball, listening to the music, watching movies and above all else, paragliding.

I know there are alot already written classes for data searching and sorting, but I wrote this example anyway, because if you know how things are done you can customize/change it for your needs.

The result (view source is enabled, with loads of comments!):

This is just a simple tutorial, how to make our own component that extends TextInput, for searching the data in datagrid. So to get started you need to create new flex project and after that create new Actionscript class that extends spark.components.TextInput and you are good to go.

Flex Mobile: Two finger tap gesture to toggle actionBar visibility in a View (AIR for Android)

Arjan — Thu, 25 Nov 2010 19:16:06 +0000

Line Break

Author: Arjan (47 Articles) - Author Website

Here’s a small example to show you how you can toggle the visibility of the actionBar of a View in a mobile flex application. I thought about a gesture that would be nice to use for showing and hiding the actionBar and thought that the two finger tap would be a good candidate for the job.

Basically all I did for this little example was creating a new Flex Mobile project. After that I modified the View tag of the View that’s created for you when you create a new MobileApplication project like this:

1
2
3
4
5
6

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
actionBarVisible="{actionBarVis}"
xmlns:s="library://ns.adobe.com/flex/spark" title="Home"
gestureTwoFingerTap="toggleActionBar(event)">

s:View>

As you can see I binded the actionBarVisible to a variable called actionBarVis and I put an event handler on the gestureTwoFingerTap event. The script section to facilitate this:

1
2
3
4
5
6
7
8
9
10
11
12
13

<fx:Script>
[CDATA[

[Bindable]
private var actionBarVis:Boolean = true;

// Handle gesture event
private function toggleActionBar(event:GestureEvent):void
{
actionBarVis = !actionBarVis;
}
]]>
fx:Script>

To make it a little bit more interesting I created a big label that changes color and text when the actionBar visibility changes. No need for it whatsoever but it just spices up this dull example a tiny bit.

My complete code for the View:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
actionBarVisible="{actionBarVis}"
xmlns:s="library://ns.adobe.com/flex/spark" title="Home"
gestureTwoFingerTap="toggleActionBar(event)">

<s:layout>
<s:VerticalLayout verticalAlign="middle"
horizontalAlign="center"/>
s:layout>

<fx:Script>
[CDATA[

[Bindable]
private var actionBarVis:Boolean = true;

// Handle gesture event
private function toggleActionBar(event:GestureEvent):void
{
actionBarVis = !actionBarVis;
}
]]>
fx:Script>

<s:Label text="{actionBarVis ? 'ActionBar Visible' : 'ActionBar Not Visible'}"
fontSize="40" fontWeight="bold"
color="{actionBarVis ? 0x00FF00 : 0xFF0000}"/>

s:View>

Screens:

That’s it. Now you can toggle the actionBar visibility using a two finger tap. Hopefully you can test it on your own Android 2.2 (or higher) device.

TabbedMobileApplication Example in Flex Mobile (AIR for Android)

Arjan — Wed, 24 Nov 2010 17:31:09 +0000

Line Break

Author: Arjan (47 Articles) - Author Website

So I’ve written a few post about mobile flex applications but all examples were based on a MobileApplication as a base for the application. Another option you have is a TabbedMobileApplication. This small example will show you how to use this to create your very own TabbedMobileApplication

Ok, first just create a Flex Mobile project in Flash Builder Burrito like always (I called it TabbedMobileApplicationExample). It can be based on MobileApplication. After that, change the TabbedMobileApplicationExample.mxml base tag to TabbedMobileApplication and remove the firstView property, a TabbedMobileApplication doesn’t have a firstView.

TabbedMobileApplicationExample.mxml:

1
2
3
4
5

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedMobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">

s:TabbedMobileApplication>

Now lets define the tabs we want to use. Lets say the application should have the following tabs:

Home
Details
Settings

To get these tabs, we have to create three ViewNavigators inside our TabbedMobileApplication:

1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<s:TabbedMobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">

<s:ViewNavigator label="Home" width="100%" height="100%"
firstView="views.Home"/>
<s:ViewNavigator label="Details" width="100%" height="100%"
firstView="views.DetailsHome"/>
<s:ViewNavigator label="Settings" width="100%" height="100%"
firstView="views.SettingsHome"/>

s:TabbedMobileApplication>

As you can see in the code, all ViewNavigators have a firstView property just like the MobileApplication does. Essentially, the MobileApplication is a ViewNavigator on its own. So now you basically have three navigators to worry about when you’re writing your application.

In my sample code I’m already pointing to views.Home, views.DetailsHome and views.SettingsHome. I renamed the already created view TabbedMobileApplicationExampleHome.mxml to Home.mxml and created to new views.

Also notice the label property on the ViewNavigators. This is the text that will be displayed on the tabs when you run your application.

So that’s it. Now you can work with tabs in your application. Navigation between views in every ViewNavigator works the same as explained in a previous post