How content dynamically updated in flex - apache-flex

i need your help about below purposes.
problem-1:In php we can easily move one page to another and easily use different type of function from those pages.In flex3 how i can use different type of .mxml pages like php. Please guide me with tutorials.It will really helpful for me.
problem-2: In same page some content dynamically updated its resource by done one task.How can i do that please guide me.

Rather than treating your Flex application as a series of pages, you may want to consider an all-in-one SWF instead. This greatly reduces navigation time, at the cost of a longer initial download. You can switch among different views using tab pages or view stacks. As far as keeping your functions for each page separate, you can do this by implementing each logical "page" as a separate MXML component. Your top-level application MXML would look something like this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:my="com.mycompany.myapp"
>
<mx:ViewStack id="pageViewStack" width="100%" height="100%">
<my:MyComponent1 width="100%" height="100%"/>
<my:MyComponent2 width="100%" height="100%"/>
</mx:ViewStack>
</mx:Application>

For your second problem I have 2 files
imageResize.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var _imageHolderWidth:Number = 500;
private var _imageHolderHeight:Number = 500;
[Bindable]
private var imageArrayCollection:ArrayCollection = new ArrayCollection();
private function changeSize():void{
this.imageHolder.width = this._imageHolderWidth *(this.widthSlider.value * 0.01);
this.imageHolder.height = this.imageHolder.width;
}
private function addToTileList():void{
var bitmapData : BitmapData = new BitmapData(this.imageHolder.width, this.imageHolder.height );
var m : Matrix = new Matrix();
bitmapData.draw( this.imageHolder, m );
this.imageArrayCollection.addItem({bitmapData: bitmapData, width: this.imageHolder.width, height: this.imageHolder.height});
}
]]>
</mx:Script>
<mx:Image id="imageHolder" source="#Embed('fx.png')" />
<mx:HSlider id="widthSlider" width="400" y="520" maximum="100" value="100" minimum="1" labels="[1%, 50%, 100%]" snapInterval="1" change="{changeSize();}" liveDragging="true" />
<mx:Button label="add to tile" click="{this.addToTileList();}"/>
<mx:TileList x="520" dataProvider="{this.imageArrayCollection}" itemRenderer="TileListRenderer" />
</mx:Application>
second file TileListRenderer.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="140">
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
override public function set data(value:Object):void
{
super.data = value;
}
]]>
</mx:Script>
<mx:VBox horizontalAlign="center">
<mx:Image id="thumbHolder" source="{new Bitmap(data.bitmapData)}" maxWidth="100" maxHeight="100" />
<mx:Label text="{data.width}x{data.height}" />
</mx:VBox>
</mx:Canvas>
Because it is easier to see it with working source (right mouse button to see the source):
blog.arnomanders.nl/upload/imageResize/imageResize.html

Related

How do I use data from the main window in a sub-window?

I've just started working on a photo viewer type desktop AIR app with Flex. From the main window I can launch sub-windows, but in these sub-windows I can't seem to access the data I collected in the main window.
How can I access this data?
Or, how can I send this data to the sub-window on creation? It doesn't need to be dynamically linked.
myMain.mxml
<?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"
width="260" height="200"
title="myMain">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
public function openWin():void {
new myWindow().open();
}
public var myData:Array = new Array('The Eiffel Tower','Paris','John Doe');
]]>
</fx:Script>
<s:Button x="10" y="10" width="240" label="open a sub-window" click="openWin();"/>
</s:WindowedApplication>
myWindow.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Window name="myWindow"
title="myWindow"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="640" height="360">
<mx:Script>
<![CDATA[
]]>
</mx:Script>
<mx:Label id="comment" x="10" y="10" text=""/>
<mx:Label id="location" x="10" y="30" text=""/>
<mx:Label id="author" x="10" y="50" text=""/>
</mx:Window>
I realize this might be a very easy question but I have searched the web, read and watched tutorials on random AIR subjects for a few days and couldn't find it. The risk of looking like a fool is worth it now, I want to get on with my first app!
You could add an attribute to your window class, and pass the data from the application.
With an attribute and a setter function :
myWindow.mxml :
<![CDATA[
private var _data : Array;
public function set data(data : Array) : void {
this._data = data;
}
]]>
main
<![CDATA[
public function openWin():void {
var w : myWindow = new myWindow();
w.data = myData;
w.open();
}
public var myData:Array = new Array('The Eiffel Tower',
'Paris','John Doe');
]]>
You could also do it by adding a constructor parameter to your window, but you will have to write your Window component in ActionScript.
(Also : you might want to use MyWindow for the name of your component instead of myWindow, but that's just conventionnal nitpicking).
Also, note that there is a singleton variable Application.application that is accessible to all classes in an Application ; however I don't know if this applies to a WindowedApplication, and either way it is not the recommended approach.

child elements of MXML class not appearing

I'm working on a simple task/calendar tool where tasks can be added dynamically to a canvas. Here is the main application as defined in Main.mxml, which is essentially just a Canvas and a button for adding a task:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas id="MainCanvas" borderStyle="solid" width="300" height="300">
<mx:Button click="CreateTask();" label="create task" />
</mx:Canvas>
<mx:Script>
<![CDATA[
import Task;
private function CreateTask( ) : void
{
// create the task object
var thisTask:Task = new Task();
// add the task to the canvas
var taskUI : DisplayObject = MainCanvas.addChild( thisTask );
// position the task ui
taskUI.y = 50;
}
]]>
</mx:Script>
</mx:Application>
I want my tasks to be BorderContainers with a label and a button, defined in an external mxml, that can simply be instantiated and added to the canvas in Main.mxml. Here is Tasks.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:s="library://ns.adobe.com/flex/spark" cornerRadius="10">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Label id="NameLabel" text="task name" />
<s:Button label="Button 1"/>
</s:BorderContainer>
The problem is that when I add a Task instance to the Canvas, the children (the button and label) don't appear. I tried setting creationPolicy="all" on both the Canvas and the BorderContainer, but it still didn't work. I've read a bunch of posts about people having issues accessing members of their class before the class is fully loading, but all I want to do is SEE that Label and Button show up inside the BorderContainer.
Thanks.
You need to move off of the flex 3 mx namespace to the newer namespace if you want to mix mx and spark controls together.
Here's your main.mxml with the new mx namespace (library://ns.adobe.com/flex/mx), and the fx namespace added to handle the script block:
<?xml version="1.0" encoding="utf-8"?>
<mx: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" >
<fx:Script>
<![CDATA[
import Task;
private function CreateTask( ) : void
{
// create the task object
var thisTask:Task = new Task();
// add the task to the canvas
var taskUI : DisplayObject = MainCanvas.addChild( thisTask );
// position the task ui
taskUI.y = 50;
}
]]>
</fx:Script>
<mx:Canvas id="MainCanvas" borderStyle="solid" width="300" height="300">
<mx:Button click="CreateTask();" label="create task" />
</mx:Canvas>
</mx:Application>
Although as other people have commented, you could just move everything over to spark - if you do that, be sure to change the addChild call to addElement.
It appears that adding spark component to an mx:canvas never triggers the code necessary to create the spark component's children. Here is a workaround for you:
<?xml version = "1.0" encoding = "utf-8"?>
<s:BorderContainer
xmlns:mx = "http://www.adobe.com/2006/mxml"
xmlns:s = "library://ns.adobe.com/flex/spark"
cornerRadius = "10"
creationComplete = "{addElement(poorUseOfContainers)}">
<s:HGroup id = "poorUseOfContainers"
width = "100%" height = "100%">
<s:Label id = "NameLabel"
text = "task name" />
<s:Button label = "Button 1" />
</s:HGroup>
</s:BorderContainer>

Setting up content children for custom mxml component

I am trying to develop a custom component to act as a divider.
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas id="left"/>
<mx:Canvas id="right"/>
</mx:HBox>
I would like to use this component to assign objects like this:
<Divider>
<left>
<mx:label text="Stuff I want to put in the left canvas"/>
<mx:label text="etc..."/>
<mx:label text="etc..."/>
</left>
<right>
<mx:label text="Stuff I want to put in the right canvas"/>
<mx:label text="etc..."/>
<mx:label text="etc..."/>
</right >
</Divider>
Unfortunately, this does not work. I get a compiler error saying :
In initializer for 'left': multiple initializer values for target type mx.containers.Canvas.
What am I missing ?
I ended up finding the solution reading the following from the Adobe website.
Using the technique described as template component, you can specify an array of a certain type of objects. I ended up rewriting my component as follow:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">
<mx:Script>
<![CDATA[
[ArrayElementType("mx.core.UIComponent")]
public var right:Array;
[ArrayElementType("mx.core.UIComponent")]
public var left:Array;
protected function init():void
{
var i:int;
for (i = 0; i < left.length; i++)
leftCanvas.addChild(left[i]);
for (i = 0; i < right.length; i++)
rightCanvas.addChild(right[i]);
}
]]>
</mx:Script>
<mx:Canvas id="rightCanvas"/>
<mx:Canvas id="leftCanvas"/>
</mx:HBox>
It now works as intended.

Working on a Global Search tool - Just like on MAC

Hi I am working on a search tool for my website in Flex. I want it to work exactly like the "Spotlight" tool on MAC desktop. "http://www.recipester.org/images/6/66/How_to_Use_Spotlight_to_Search_on_Mac_OS_X_42.png" The link is to an image of spotlight.
I want to create almost the same thing in FLEX.
What I currently have is a "Autocomplete" box, and I get all the data I want in it. Code for the autocomplete is below:
<auto:AutoComplete borderStyle="none" id="txt_friends_search"
textAlign="left" prompt="Search Friends" dataProvider="{all_friends_list}"
allowEditingNewValues="true" allowMultipleSelection="true" allowNewValues="true"
backspaceAction="remove" labelField="label"
autoSelectEnabled="false" matchType="anyPart"
height="23" right="400" top="1" dropDownItemRenderer="{new ClassFactory(weather.index_cloud_global_search_item_renderer)}" />
And my ItemRenderer looks like :
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
verticalGap="0" horizontalGap="0"
creationComplete="init()"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
verticalAlign="middle">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import com.hillelcoren.utils.StringUtils;
import mx.utils.StringUtil;
import mx.events.FlexEvent;
import mx.controls.List;
public function init():void
{
}
]]>
</mx:Script>
<mx:HBox width="100%" verticalGap="0" horizontalGap="0">
<mx:HBox borderThickness="1" width="75" borderStyle="solid" horizontalAlign="left" horizontalScrollPolicy="off">
<mx:Label id="type" text="{data.type}" fontSize="12"/>
</mx:HBox>
<mx:HBox borderThickness="1" width="75" borderStyle="solid" horizontalAlign="left" horizontalScrollPolicy="off">
<!--mx:Label id="nameLabel" text="{data.label}" fontSize="12"/-->
<mx:List id="names" dataProvider="{all}"
</mx:HBox>
</mx:HBox>
<!--mx:Box id="colorBox" borderStyle="solid" width="50" height="25"/-->
<mx:Spacer width="15"/>
This shows the type and label of everything, example:
Friends ABC
Friends XYZ
Messages This is the message
Messages example for messages
Files filename1
Files filename123
I believe you get my point there.
But what I want to create is something like:
Friends ABC
XYZ
Messages This is the message
example for messages
Files filename1
filename123
MoreFiles
Can someone plz help me in this.
I actually have no idea how to move forward in this.
Let me know if you want more clarification on anything.
Regards
Zeeshan
Since you're offering a bounty, I'll submit a different answer (as the previous one is technically valid).
Step #1: Download the Adobe Autocomplete Component integrate the class into your project.
Step #2: Create a new component that is derived from AutoComplete (I called mine SpotlightField.mxml)
<?xml version="1.0" encoding="utf-8"?>
<AutoComplete
xmlns="com.adobe.flex.extras.controls.*"
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()"
labelField="value"
itemRenderer="SpotlightFieldRenderer">
<mx:Script>
<![CDATA[
private function init() : void
{
this.filterFunction = substringFilterFunction;
}
private function substringFilterFunction(element:*, text:String):Boolean
{
var label:String = this.itemToLabel(element);
return(label.toLowerCase().indexOf(text.toLowerCase())!=-1);
}
]]>
</mx:Script>
</AutoComplete>
Step #3: Create the ItemRenderer you want to apply to this new component (I called mine SpotlightFieldRenderer.mxml). Note that the code is the same as the previous example, but I'll post it again for completeness.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
]]>
</mx:Script>
<mx:HBox width="100%">
<mx:Label width="100" text="{data.type}" />
<mx:Label text="{data.value}" />
</mx:HBox>
</mx:Canvas>
Step #4: Update the AutoComplete.as class as follows:
/**
* #private
* Updates the dataProvider used for showing suggestions
*/
private function updateDataProvider():void
{
dataProvider = tempCollection;
collection.filterFunction = templateFilterFunction;
collection.refresh();
sort_and_filter(collection);
//In case there are no suggestions, check there is something in the localHistory
if(collection.length==0 && keepLocalHistory)
{
var so:SharedObject = SharedObject.getLocal("AutoCompleteData");
usingLocalHistory = true;
dataProvider = so.data.suggestions;
usingLocalHistory = false;
collection.filterFunction = templateFilterFunction;
collection.refresh();
}
}
private function sort_and_filter(source:Object):Object
{
if (source && source.length > 1) {
trace (source.length);
source.sortOn('type', Array.CASEINSENSITIVE);
var last:String = "";
for each(var entry:Object in source) {
var current:String = entry.type;
if (current != last)
last = current
else
entry.type = "";
last = entry.type;
}
}
return source;
}
You'll notice that the sort_and_filter function is defined, and called on the collection within updateDataProvider. The app now looks like this:
That's it. The sample application now looks like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
<![CDATA[
[Bindable]
private var items:Array = [
{ type:'friends', value:'abc' },
{ type:'friends', value:'xyz' },
{ type:'messages', value:'this is the message' },
{ type:'messages', value:'example for messages' },
{ type:'files', value:'filename1' },
{ type:'files', value:'filename123' },
];
]]>
</mx:Script>
<local:SpotlightField dataProvider="{items}" width="400" />
</mx:Application>
Let me know if you have any further questions. There is still a bit of work to do depending on how you want to display the results, but this should get you 95% of the way there ;)
You may want to try something like this. This is just a sample I whipped up, but the basics are there for you to apply to your solution. What this is doing is creating a custom item render (as you've already done), but the container that it's rendering, it adjusts the data set slightly within set dataProvider so that it sorts and filters.
Obviously, you can expand upon this even further to add common icons, formatted text ... etc. The renderer has an explicit width set for the first "column" text. This is to better align results, but should probably be done while the list is being built (based on the string lengths of the values in the result set). Cheers ;)
Application.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:Script>
<![CDATA[
[Bindable]
private var items:Array = [
{ type:'friends', value:'abc' },
{ type:'friends', value:'xyz' },
{ type:'messages', value:'this is the message' },
{ type:'messages', value:'example for messages' },
{ type:'files', value:'filename1' },
{ type:'files', value:'filename123' },
];
]]>
</mx:Script>
<local:SpotlightComboBox
dataProvider="{items}"
width="400" />
</mx:Application>
SpotlightComboBox.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox
xmlns:mx="http://www.adobe.com/2006/mxml"
itemRenderer="SpotlightComboBoxItemRenderer">
<mx:Script>
<![CDATA[
override public function set dataProvider(value:Object):void
{
super.dataProvider = sort_and_filter(value as Array);
}
private function sort_and_filter(source:Array):Array
{
if (source && source.length > 1) {
source.sortOn('type', Array.CASEINSENSITIVE);
var last:String = "";
for each(var entry:Object in source) {
var current:String = entry.type;
if (current != last)
last = current
else
entry.type = "";
last = entry.type;
}
}
return source;
}
]]>
</mx:Script>
</mx:ComboBox>
SpotlightComboBoxItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
]]>
</mx:Script>
<mx:HBox width="100%">
<mx:Label width="100" text="{data.type}" />
<mx:Label text="{data.value}" />
</mx:HBox>
</mx:Canvas>

How can I drag and drop canvases within a Vbox to re-order?

I'm getting up to speed with Flex and I am looking for any example of implementing a drag and drop re-sort within a vbox container. Basically I have a Vbox that contains a number of canvas's that are full width and 35px high. I want to be able to drag and drop them to re-order within the vbox.
Any help is greatly appreciated - thanks,
b
Have you tried using a mx:List - drag and drop support is already built in and very easy to use - i threw together a sample for you using the dimensions you mentioned:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var _source:ArrayCollection = new ArrayCollection();
private function init():void{
var n:int = 10;
for(var i:int = 0; i < n; i++){ _source.addItem({value:Math.random()}); }
}
private function handleReorder(event:DragEvent):void{
Alert.show("A change was made!");
}
]]>
</mx:Script>
<mx:List dataProvider="{_source}" width="250" height="500" dragMoveEnabled="true"
dragEnabled="true" dropEnabled="true" dragDrop="handleReorder(event)">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas width="100%" height="35">
<mx:Text text="{data.value}" width="100%" height="100%" selectable="false" />
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:List>
</mx:Application>
And there is of course more info here: http://livedocs.adobe.com/flex/3/langref/mx/controls/List.html
good luck!
If I were you, I'd first check the Flex documentation available online. There's this example. You will have to customize this for your list control's itemeditor. There's another example which you should take a look at. If you have a problem let us know.

Resources