Add array to URL string - apache-flex

I know this questions is going to have an easy obvious answer but i have spent over two days now trying to do it with no luck (I am a Flex newbie)
Basically i am trying to open a webView that will open google maps to the location in an array
The location comes from data in an array taken from facebook events (that works fine and will display the data) but i am struggling with passing this information to the webView.loadURL string
The data i want in the array is 'data.location' (the code i am having issues with is in the itemrenderer towards the bottom of the code snippet)
I have tried so many different options i am now stuck
<?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="Home" creationComplete="onLoad()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var facebookEvents:ArrayCollection;
import com.facebook.graph.FacebookMobile;
private function onLoad():void
{
if(FacebookMobile.getSession() != null) {
getEvents()
} else {
eventsDataGrid.visible=false
NotLogin.visible=true
}
}
private function getEvents():void {
var fql:String = "select name, location, pic, start_time from event where creator = 148839887036 and eid in (select eid from event_member where uid=148839887036)";
FacebookMobile.fqlQuery(fql, handleGetEventsResponse);
}
private function handleGetEventsResponse(events:Object, fail:Object):void {
if (events != null)
facebookEvents = new ArrayCollection(events as Array);
//else
//status = "Error";
}
]]>
</fx:Script>
<s:List id="eventsDataGrid" width="100%" height="100%" dataProvider="{facebookEvents}">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<fx:Script>
<![CDATA[
import com.facebook.graph.utils.FacebookDataUtils;
var webView:StageWebView = new StageWebView
var mapURL:String = ('http://maps.google.com/maps?f=d&hl=en&saddr='+ "{data.location}")
private function time2DateStr(time:String):String {
return FacebookDataUtils.stringToDate(time).toLocaleString();
}
protected function getDirections_clickHandler(event:MouseEvent):void
{
webView.stage = this.stage;
webView.viewPort = new Rectangle(0, 100, stage.stageWidth, stage.stageHeight);
webView.loadURL(mapURL);
}
]]>
</fx:Script>
<s:HGroup paddingBottom="10" paddingTop="10">
<s:Image source="{data.pic}"/>
<s:VGroup width="100%">
<s:Label text="{data.name}" fontWeight="bold" width="100%"/>
<s:Label text="Where: {data.location}"/>
<s:Label text="When: {time2DateStr(data.start_time)}"/>
<s:Label text="Get Directions" click="getDirections_clickHandler(event)" id="getDirections"/>
</s:VGroup>
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
<s:Label visible="false" x="6" id="NotLogin" width="463" height="78" styleName="text"
text="Sorry You Need To Be Logged In Via Facebook, Please Go Back and Log In, THANK YOU"/>

all i needed to do was to add the data into the brackets (dont know the offical name) here it is
protected function directions_click (location:String):void
{
navigateToURL(new URLRequest('http://maps.google.co.uk/maps?q=' + location));
}
and for the button/ label
<s:Label text="Get Directions" fontFamily="lucida grande" fontSize="14" color="#3b5998" click="directions_click(data.location)"/>

Related

How to Push a View Based on a selected Array Collection? (Flash Builder 4.6 , Flex)

I have an application that has an Array Collection of calculator names. Upon selection I would like to push the actual view of the calculator for that item.
Here is my code could someone help me write a function that will allow me to do this ?
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
title="iCalculate"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="creationCompleted(event)"
width="100%" height="100%">
<s:layout>
<s:VerticalLayout paddingTop="10"/>
</s:layout>
<fx:Script>
<![CDATA[
import com.Watts.collections.filter.Evaluator;
import com.Watts.demo.Album;
import mx.collections.ArrayCollection;
import mx.events.CollectionEvent;
import mx.events.FlexEvent;
import mx.rpc.http.Operation;
import spark.components.Image;
import spark.components.ViewMenu;
import spark.components.gridClasses.GridColumn;
import spark.events.IndexChangeEvent;
import spark.events.TextOperationEvent;
// Everything Below this line holds information specifically relating to Beta 2
// Below this line is the coding for the search bar or filter bar
private var _collection:ArrayCollection;
private var _evaluator:Evaluator = new Evaluator();
private function creationCompleted(event:FlexEvent):void
{
_collection = Album.collection;
_collection.filterFunction = filterCollection;
_evaluator.synonyms["four"] = new ArrayCollection(["4"]);
grid.dataProvider = _collection;
}
private function filterChanged(event:Event):void
{
update();
}
private function update():void
{
_evaluator.prepare(filter.text);
_collection.refresh();
formula.text = (_evaluator.tree) ? _evaluator.tree.toString() : "";
}
private function filterCollection(data:Object):Boolean
{
var labels:ArrayCollection = new ArrayCollection();
for (var i:int; i < grid.columns.length; i++)
{
labels.addItem((grid.columns.getItemAt(i) as GridColumn).itemToLabel(data));
}
return _evaluator.evaluate(labels);
}
]]>
</fx:Script>
<s:VGroup left="5" right="-9" top="5" bottom="5" width="100%" height="100%" textAlign="center">
<s:TextInput id="filter" width="100%" change="filterChanged(event)"/>
<s:DataGrid id="grid" width="100%" height="100%" textAlign="left">
</s:DataGrid>
<s:Label id="formula" />
</s:VGroup>
<s:Label id="lblWattsMessage" click="navigator.pushView(views.CompanyDetail)" color="#1021C7"
fontFamily="_typewriter" fontSize="12" text="Powered by WATTS Professionals"
textAlign="center" verticalAlign="middle"/>
</s:View>
Here is the code that I used to fix this issue. Inside the flex application there is a navigator.pushView component that can be used. The issue I had was that I did not assign view ID's to each of the calculators. This must be done in the ArrayCollection container.
navigator.pushview(ViewID)

How to detect whether a list is scrolling or not?

Is there any way to detect whether a list is scrolling or not,likelist.isScrolling
So, #Khaled showed a way to do it with the MX component. If you are using the Spark component, that event doesn't work. Instead, you can listen to changes on myList.scroller.viewport.verticalScrollPosition or horizontalScrollPosition.
<fx:Declarations>
<fx:int id="scrollingCount" />
</fx:Declarations>
<s:initialize>
BindingUtils.bindSetter(function(x:*):void { scrollingCount++; }, myList.scroller.viewport, "verticalScrollPosition");
</s:initialize>
<s:VGroup>
<s:Label text="Scrolling: {scrollingCount}" />
<s:List id="myList" height="200" dataProvider="{myData}" />
</s:VGroup>
In neither of these cases do you get to know when the list stops getting scrolled (I'm not sure if you want it or not). You might have to set a timer and any time the timer goes off without any scrolling events, you are no longer scrolling?
Unfortunately, you haven't explained what you are trying to accomplish, wo we can't adequately answer your question.
Or you can do somme thing like this in a list itemrenderer :
import spark.components.List;
[Bindable]
private var calcWidth:Number=195;
private var listVerticalScroll:Boolean;
private var listHorizontalScroll:Boolean;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
var ownerVerticalScroll:Boolean=List(owner).scroller.verticalScrollBar.visible;
var ownerHorizontalScroll:Boolean=List(owner).scroller.horizontalScrollBar.visible;
if(ownerVerticalScroll!=listVerticalScroll){
listVerticalScroll=ownerVerticalScroll;
scrollBarChange()
}
super.updateDisplayList(unscaledWidth,unscaledHeight);
}
private function scrollBarChange():void {
if(listVerticalScroll){
var newWidth:Number=195-(listVerticalScroll?15:0);
calcWidth=newWidth;
}
}
you can use the ScrollEvent.SCROLL :
import mx.events.ScrollEvent
myList.addEventListener(ScrollEvent.SCROLL, scrollHandler);
function scrollHandler(e:ScrollEvent):void
{
//myList is scrolling
}
Or you can do it like this for spark component!
http://blog.flexexamples.com/2009/05/31/detecting-when-the-vertical-scroll-bar-is-scrolled-on-a-spark-list-control-in-flex-4/ -->
<fx:Script>
<![CDATA[
import spark.components.VScrollBar;
private function init():void {
list.scroller.verticalScrollBar.addEventListener(Event.CHANGE, list_verticalScrollBar_change);
}
private function list_verticalScrollBar_change(evt:Event):void {
var vsb:VScrollBar = evt.currentTarget as VScrollBar;
var obj:Object = {};
obj.type = evt.type;
obj.val = vsb.value;
obj.max = vsb.maximum;
arrColl.addItem(obj);
callLater(dgScroll);
}
private function dgScroll():void {
dataGrid.verticalScrollPosition = dataGrid.maxVerticalScrollPosition;
}
]]>
</fx:Script>
<fx:Declarations>
<mx:ArrayCollection id="arrColl" />
</fx:Declarations>
<s:HGroup horizontalCenter="0" verticalCenter="0">
<s:List id="list"
creationComplete="init();">
<s:layout>
<s:VerticalLayout gap="0"
horizontalAlign="contentJustify"
requestedRowCount="4" />
</s:layout>
<s:dataProvider>
<s:ArrayList>
<fx:String>The</fx:String>
<fx:String>Quick</fx:String>
<fx:String>Brown</fx:String>
<fx:String>Fox</fx:String>
<fx:String>Jumps</fx:String>
<fx:String>Over</fx:String>
<fx:String>The</fx:String>
<fx:String>Lazy</fx:String>
<fx:String>Dog</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:List>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
width="200"
verticalScrollPolicy="on">
<mx:columns>
<mx:DataGridColumn dataField="type" />
<mx:DataGridColumn dataField="val" />
<mx:DataGridColumn dataField="max" />
</mx:columns>
</mx:DataGrid>
</s:HGroup>
</s:Application>

Flex item renderer- don't include element if null?

I have item renderer code like this:
<s:HGroup>
<s:Label text="{data.DateTime}"/>
<s:VGroup>
<s:Label text="{data.Description}"/>
<s:Label text="{data.Amount}"/>
</s:VGroup>
</s:HGroup>
Description is an optional field.. I would like if the Description field is null for the Amount field to move up, but right now there is just an empty space. Is there any way to achieve this in mxml? I want them in separate fields because I plan to make the Description editable, but the Amount fixed.
I wrote simple application that simulates a behaviour of Item renderer.
The trick is to use visible and includeInLayout properties:
<?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" minWidth="955" minHeight="600"
creationComplete="application1_creationCompleteHandler(event)"
>
<fx:Script>
<![CDATA[
import mx.charts.DateTimeAxis;
import mx.events.FlexEvent;
[Bindable]
private var data:Object;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
var newData:Object = new Object();
newData.DateTime = new Date();
newData.Description = "Description";
newData.Amount = 12345;
data = newData;
}
protected function setNull_clickHandler(event:MouseEvent):void
{
var newData:Object = new Object();
newData.DateTime = new Date();
newData.Description = null;
newData.Amount = 12345;
data = newData;
}
protected function setValue_clickHandler(event:MouseEvent):void
{
var newData:Object = new Object();
newData.DateTime = new Date();
newData.Description = "Description";
newData.Amount = 12345;
data = newData;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VGroup>
<s:HGroup>
<s:Button id="setNull" label="Set Null" click="setNull_clickHandler(event)"/>
<s:Button id="setValue" label="Set Description" click="setValue_clickHandler(event)"/>
</s:HGroup>
<s:Label text="Renderer"/>
<s:HGroup>
<s:Label text="{data.DateTime}"/>
<s:VGroup>
<s:Label text="{data.Description}"
visible="{data.Description != null}"
includeInLayout="{data.Description != null}"
/>
<s:Label text="{data.Amount}" />
</s:VGroup>
</s:HGroup>
</s:VGroup>
</s:Application>

Get updated array length

I am trying to get the length of an array through mxml (not actionscript). I have the following:
<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"
>
<fx:Script>
<![CDATA[
[Bindable]
public var rivers:Array = ["Nile", "Amazon", "Yangtze", "Mississippi"];
protected function remove(event:MouseEvent):void
{
rivers.pop();
test2.text = String( rivers.length );
}
]]>
</fx:Script>
<s:VGroup>
<mx:Text id="test1" text="{rivers.length}" color="red"/>
<mx:LinkButton label="remove Item" click="remove(event)" />
<mx:Text id="test2" color="blue"/>
</s:VGroup>
</s:Application>
Why does test2 show the correct array length but test1 is stale?
You use bindings to display rivers length property in test1.
The thing is your collection is an Array.
Array doesn't dispatch events when it changes that's why the binding is never trigged.
Use a ArrayCollection instance instead.
Try something like this:
[Bindable]
var len:String = "0";
[Bindable]
public var rivers:ArrayCollection = ["Nile", "Amazon", "Yangtze", "Mississippi"];
<mx:Script>
<![CDATA[
protected function remove(event:MouseEvent):void {
rivers.removeItemAt(0);
len = String( rivers.length );
}
]]>
</mx:Script>
<mx:Text id="test1" text="{len}" color="red"/>
<mx:LinkButton label="remove Item" click="remove(event)" />
<mx:Text id="test2" color="blue"/>

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>

Resources