I found an application that read the information about you webcam.
The thing is that when the application start you need to click on it to view your stats.
I have now connected the application to a button that animate the mx:list i created, But anyhow I need to fist click on the list to generate the output on a mx:label.
Any Ideas how I should do to just click on my show button to autorun camera stats.
Thanks
<?xml version="1.0"?>
<!-- behaviors\CompositeEffects.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.utils.ObjectUtil;
private var camera:Camera;
private function list_change(evt:ListEvent):void {
var tList:List = evt.currentTarget as List;
var cameraName:String = tList.selectedIndex.toString();
camera = Camera.getCamera(cameraName);
textArea.text = ObjectUtil.toString(camera);
}
]]>
</mx:Script>
<mx:Parallel id="ZoomRotateShow">
<mx:Zoom id="myZoomShow"
zoomHeightFrom="0.0"
zoomWidthFrom="0.0"
zoomHeightTo="1.0"
zoomWidthTo="1.0"
/>
<mx:Rotate id="myRotateShow"/>
</mx:Parallel>
<mx:Sequence id="ZoomRotateHide">
<mx:Rotate id="myRotateHide"/>
<mx:Zoom id="myZoomHide"
zoomHeightFrom="1.0"
zoomWidthFrom="1.0"
zoomHeightTo="0.0"
zoomWidthTo="0.0"
/>
</mx:Sequence>
<mx:List id="list"
dataProvider="{Camera.names}"
width="200"
change="list_change(event);"
hideEffect="{ZoomRotateHide}"
showEffect="{ZoomRotateShow}" visible="false"
/>
<mx:Label id="textArea" height="185" x="674" y="228" dataChange="{Camera.names}" />
<mx:Button id="myButton1"
label="Show!"
click="list.visible=true;"
/>
<mx:Button id="myButton2"
label="Hide!"
click="list.visible=false;"
/>
</mx:Application>
First, I split your function in two:
private function list_change(evt:ListEvent):void {
var tList:List = evt.currentTarget as List;
populateCameraInfo(tList.selectedIndex.toString());
}
private function populateCameraInfo(cameraName:String):void {
camera = Camera.getCamera(cameraName);
textArea.text = ObjectUtil.toString(camera);
}
Next (and I'm assuming you want the list to be visible to start with):
<mx:List id="list"
dataProvider="{Camera.names}"
width="200"
change="list_change(event);"
hideEffect="{ZoomRotateHide}"
showEffect="{ZoomRotateShow}"
selectedIndex="0"
creationComplete="populateCameraInfo('0')"
/>
So that way the first item is always selected.
Related
So I have a requirement to display dynamically generated data in the view.
For this, my idea was to create a mxml file and then use it as an object. Fill the data in the ibject and then use addChild to display it. But even after adding all the data. The dynamically generated mxml file doesn't gets displayed.
Code
BuyTogetherGrid.MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="80" height="60" xmlns:image="org.commodity.detail.image.*">
<mx:HBox>
<image:ImageBox id="buyTogetherImg"></image:ImageBox>
<mx:VBox id="textInfo">
<mx:Box id="commonNameBox">
<mx:Label id="commonName">
</mx:Label>
</mx:Box>
<mx:Box id="commonPriceBox">
<mx:Label id="commonPrice">
</mx:Label>
</mx:Box>
</mx:VBox>
</mx:HBox>
<mx:Script>
<![CDATA[
public function createGrid():void{
this.buyTogetherImg = new ImageBox();
this.commonName = new Label();
this.commonPrice = new Label();
}
]]>
</mx:Script>
</mx:Box>
This is my MXMl File. My idea was to create an object of this mxml object. Add data to buyTogetherImg, CommonName, CommonPrice and then use addChild
Part where I set the data
<mx:HBox id="buyTogetherBox" width="100%" borderColor="black">
</mx:HBox>
The upper HBox is the container where I will keep all my generated object
var buyTogetherBox : BuyTogetherGrid = new BuyTogetherGrid();
buyTogetherBox.createGrid();
for each(var item:cmListItem in commod.items){
if(item.dataFormat == 2){
buyTogetherBox.buyTogetherImg.imgData = item.value as ImageData;
} else if(item.dataFormat == 0){
buyTogetherBox.commonName.text = item.value.toString();
} else if(item.dataFormat == 3){
buyTogetherBox.commonPrice.text = StringUtil.numToStrPrice(item.value as Number);
}
}
this.buyTogetherBox.addChild(buyTogetherBox);
}
The code check some conditions and add the data. However the buyTogetherBox is not visible. But if I try something like
this.buyTogetherBox.addChild(buyTogetherBox.buyTogetherImg);
then i can see the image in the H:Box.
I am pretty new to Flex. so may be I would have missed something
You are leaving the statically created instances of the label and image control unused and creating new instances instead. Basically, the entire createGrid() function is unnecessary. You already have the controls created in MXML. Just use them with creating new instances.
var grid:BuyTogetherGrid = new BuyTogetherGrid();
grid.addEventListener(FlexEvent.CREATION_COMPLETE, this.grid_creationCompleteHandler);
Elsewhere in the same class...
private function grid_creationCompleteHandler(event:FlexEvent):void
{
// Set your properties here
}
As Pranav said it takes some time to create MXML components and if you try to assess them immediately you will get a null pointer exception because they don't exist yet. A quick and dirty solution is to make public variables in your BuyTogetherGrid.MXML and then bind the text properties to these variables, like
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="80" height="60" xmlns:image="org.commodity.detail.image.*">
<fx:Script>
<![CDATA[
[Bindable] public var imageData:ImageData;
[Bindable] public var name:String;
[Bindable] public var price:String;
]]>
</fx:Script>
<mx:HBox>
<image:ImageBox id="buyTogetherImg" imgData={imageData}/>
<mx:VBox id="textInfo">
<mx:Box id="commonNameBox">
<mx:Label id="commonName" text="{name}">
</mx:Label>
</mx:Box>
<mx:Box id="commonPriceBox">
<mx:Label id="commonPrice" text="{price}">
</mx:Label>
</mx:Box>
</mx:VBox>
and then you do
buyTogetherBox.imageData = yourImageData;
buyTogetherBox.name = "Your Name";
buyTogetherBox.imageData = "Your price";
and yes, remove the unnecessary createGrid() method
I have a custom external itemRenderer which I use to display items in a mx:List. The dataProvider is an Array that contains 4 attributes per element. It seems as if the itemRenderer is, in fact, getting the Array because it displays 4 items(the amount of items in the Array) but the items are displayed as "[object Object]".
Here is my itemRenderer...
<mx:Metadata>
[Event(type="classes.events.RemoveEntryEvent", name="removeProject")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import classes.events.RemoveEntryEvent;
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.events.FlexEvent;
override public function set data (value:Object):void{
super.data = value;
//Alert.show(value.toString());
}
public function button_clickHandler():void {
var alertListener:Function = function(closeEvent:CloseEvent):void{
if (closeEvent.detail == Alert.YES){
//dispatchEvent(new RemoveEntryEvent(RemoveEntryEvent.REMOVE_PROJECT, true, false, data));
}
}
var myAlert:Alert = Alert.show("Are you sure you want to remove yourself from this project?",
"Remove Project",
(Alert.YES | Alert.CANCEL),
null, alertListener);
myAlert;
}
private function text_clickHandler():void{
Alert.show("inside text_clickHandler()");
}
]]>
</mx:Script>
<!-- The mx:Text should display a hand maybe when rolledOver: !buttonMode, -->
<mx:Text id="text" width="85%" text="{data}" fontThickness="5" click="text_clickHandler()"/>
<mx:Button id="removeButton" label="Remove" fontSize="9" width="63" verticalCenter="0" fontWeight="normal" x="329"
height="17" click="button_clickHandler()"></mx:Button>
</mx:Canvas>
When I step through the set data function, the 'value:Object' is null! But again, it is displaying the correct amount of items.
Here is my mxml code in which my mx:List is contained...
<mx:TitleWindow y="10" width="550" height="342" layout="absolute" title="LIST OF PROJECTS" cornerRadius="4" id="listOfProjects_panel" horizontalCenter="0">
<mx:List alternatingItemColors="{altColors}" x="65.5" y="30" width="399" height="232" backgroundColor="#F8F8F8" fontSize="12" dataProvider="{xmlSimpleArray}"
id="list_of_projects_master" initialize="listInitializer()" useRollOver="false" selectable="false">
</mx:List>
<mx:Button y="270" label="Refresh List" width="130" x="334.5" id="auth_btn_master0" fontWeight="normal"/>
<mx:Label x="65.5" y="10" text="Click To Select A Project:" fontWeight="bold"/>
</mx:TitleWindow>
Here is the initializer in my mx:Script...
private function listInitializer():void{
//list_of_projects_master.dataProvider = xmlSimpleArray;
list_of_projects_master.itemRenderer = new ClassFactory(ProjectListRenderer);
list_of_projects_master.addEventListener(RemoveEntryEvent.REMOVE_PROJECT, updateXML);
}
If anymore information is needed to assess the issue, please let me know
change the below line in itemrenderer
<mx:Text id="text" width="85%" text="{data}" fontThickness="5" click="text_clickHandler()"/>
shoul be like
<mx:Text id="text" width="85%" text="{data.labelfieldname}" fontThickness="5" click="text_clickHandler()"/>
hope this helps.
i am trying to create multiple tab with close button in adobe flex 3. for this i have created parent and child object. parent object for tab and child object for close button and place both object in Group container grammatically in function called "addButton()". my code working fine in adobe flex 4.5 but not working in adobe flex 3. due to some reason i have to use adobe flex 3. i have try other container like: HBox, controllbar etc but these are unable to make proper tab view. below is code.
<?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="127" minHeight="34" backgroundColor="#F4E8E8">
<s:layout>
<s:FormItemLayout/>
</s:layout>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.graphics.SolidColor;
import spark.components.Button;
import spark.components.Group;
import spark.primitives.Rect;
public function addButton():void {
//Child Object
var myButton:Button = new Button();
myButton.id = "dd";
myButton.label="X";
myButton.width = 40;
myButton.height = 20;
myButton.depth =1;
myButton.x=50;
myButton.setStyle("color",'red');
myButton.addEventListener(MouseEvent.CLICK, btn);
//Parent Object
var lble:Group = new Group();
var solidColor:SolidColor = new SolidColor(0xFF0000);
var rec:Rect = new Rect();
rec.fill = solidColor;
rec.percentWidth = 100;
rec.percentHeight = 100;
lble.width = 127;
lble.height = 34;
lble.depth =0;
lble.addElement(rec);
lble.addEventListener(MouseEvent.CLICK, lable);
lble.addElement(myButton);
myGroup.addElement(lble);
}
private function btn(e:Event):void {
e.stopPropagation();
jj.text = 'Text For Button';
}
private function lable(e:Event):void {
kk.text = "Text For Label";
}
]]>
</fx:Script>
<s:HGroup id="myGroup">
<s:Button width="126" height="34" click="addButton();" label="Click" skinClass="spark.skins.spark.ButtonSkin"/>
</s:HGroup>
<s:Label id="jj" x="14" y="150" width="1200" height="50" backgroundColor="gray" text="Button"/>
<s:Label id="kk" x="14" y="69" width="1200" height="50" backgroundColor="gray" text="Label"/>
</s:Application>
please help me
1) Group Element (container) Not working in Flex 3 :
Definitely it won't work in Flex 3, there is major difference between Flex 3 and Flex 4 or mx(halo) and spark(Gumbo) respectively. You need to have clear understanding of both the things if you want to convert a component from spark to mx or vice versa.
Here is a nice article that explain the
Difference between Flex 3 and Flex 4
2) I am trying to create multiple tab with close button in adobe flex 3:
Since Flex is a 10 years matured framework there are plenty of open source components available out there you don't have to create a component from scratch. But i appreciate your attempt to do it on your own way.
Have a look in to this before you start creating components
Flex 3 Component Life cycle
Flex 4 Component Life cycle and Creating Advanced spark components
Spark Tab with close button
Flex 3 SuperTabNavigator FlexLib component
Flex: How to add a tab close button for TabNavigator component
You can use Box as mx component. Here is what you can do in flex 3:
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.containers.Box;
public function addButton():void {
//Child Object
var myButton:Button = new Button();
myButton.id = "dd";
myButton.label="X";
myButton.width = 40;
myButton.height = 20;
myButton.x=50;
myButton.setStyle("color",'red');
myButton.addEventListener(MouseEvent.CLICK, btn);
//Parent Object
var box:Box = new Box();
box.setStyle("borderThickness", "1");
box.setStyle("borderStyle", "solid");
box.setStyle("borderColor", "black");
box.setStyle("backgroundColor", "0xFF0000");
box.width = 127;
box.height = 34;
box.addEventListener(MouseEvent.CLICK, lable);
box.addChild(myButton);
myHBox.addChild(box);
}
private function btn(e:Event):void {
e.stopPropagation();
jj.text = 'Text For Button';
}
private function lable(e:Event):void {
kk.text = "Text For Label";
}
]]>
</mx:Script>
<mx:HBox id="myHBox">
<mx:Button width="126" height="34" click="{addButton();}" label="Click"/>
</mx:HBox>
<mx:Label id="jj" x="14" y="150" width="1200" height="50" text="Button"/>
<mx:Label id="kk" x="14" y="69" width="1200" height="50" text="Label"/>
</mx:Application>
working on flex mobile list. list is represented using itemrenderer.
here is the itemrendeerer..
<s:Image id="img" x="30" y="50"/>
<s:Label id="nameLbl" width="100%" height="100%" text="Label" textAlign="center" verticalAlign="middle"/>
<s:Button id="checkMarkLabel" label="+" height="100%" />
on selected::
protected function onClicked(event:MouseEvent):void
{
if(checkMarkLabel.label =="✓")
{
checkMarkLabel.label = "+";
}
else if(checkMarkLabel.label == "+" )
{
checkMarkLabel.label = "✓";
trace("id::"+event.currentTarget.data.id)
//FlexGlobals.topLevelApplication.selectedId = event.currentTarget.data.id;
}
}
the image gives you the clear picture.
after selecting some items in the list,if i scroll the list,the checked items gets unchecked and the unchecked items gets checked.any answer is appreciable..
Flex don't create renderer for each item in list instead Flex create few renderers (in your case 6) and reuse them.
You must save data about clicked list items (maybe use some singleton), and then you must override set data method in renderer class (in this method you get list item for renderer), then you figure out clicked this item or not and set to checkMarkLabel corresponded symbol.
On the list you can set the property "useVirtualLayout" to false. This will generate an unique itemrenderer for each item in the list. This is also what Anton was talking about.
This is however less resource friendly. If your list get's really large it will take up more memory.
You should work with states that are already made use of by lists in combination with itemrenderers.
Example itemrenderer:
<fx:Script>
<![CDATA[
protected function marker_clickHandler(event:MouseEvent):void {
marker.label = marker.label == "V" ? "+" : "V";
}
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="selected"/>
</s:states>
<s:Button label.selected="V" label.normal="+"/>
<s:Button y="10" id="marker" click="marker_clickHandler(event)" label="+"/>
If you were to use this as an itemrenderer, the button utilizing states will update as expected, but like Anton mentioned, the ones marked manually onClick will not get updated as expected.
This answer builds on Robin van den Bogaard's answer.
Assuming your current dataProvider has objects that look like this:
public class MyData {
[Bindable]
private var imgUrl:String;
[Bindable]
private var name:String;
}
Add a new field to it:
[Bindable]
private var chosen:Boolean;
(If you don't have [Bindable], add it to enable data binding on the data items.)
Then your itemRenderer can look like this, automatically updating as you scroll:
<fx:Script>
<![CDATA[
protected function marker_clickHandler(event:MouseEvent):void {
data.chosen = !data.chosen;
}
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="selected"/>
</s:states>
<s:Image id="img" x="30" y="50" source="{data.imgUrl}" />
<s:Label id="nameLbl" width="100%" height="100%" text="Label" textAlign="center" verticalAlign="middle" text="{data.name}" />
<s:Button id="checkMarkLabel" label="{data.chosen ? '✓' : '+'}" height="100%" click="marker_clickHandler(event)" />
How to ask user confirmation before highlighting/navigating to another panel/page?
I have few panels in my screen. Each panel has many controls. I would like to prompt a message box(or alert) with Ok and Cancel buttons, and take confirmation whenever user clicks on another panel.
If user clicks on "Ok" button then navigate to another panel/page.
If user clicks on "Cancel" button then remove the alert and focus to the same Panel.
Currently I have implemented this using panel's focus_out event(focusOutHandler(event:FocusEvent)). I click on the button which is in the another panel, now I got alert, but when i clicked on "OK" in the alert , nothing is happening(button click is event is not fired)
Thanks in advance
From the sounds of it you want to react depending on which button on the alert is clicked?
If that is the case, use the in-built close handler in the Alert class.
The Alert class has a static method show, with the following signature:
public static function show(text:String = "", title:String = "", flags:uint = 0x4, parent:Sprite = null, closeHandler:Function = null, iconClass:Class = null, defaultButtonFlag:uint = 0x4, moduleFactory:IFlexModuleFactory = null):Alert
By adding two flags with the pipe operator in the flags argument
Alert.OK || Alert.CANCEL and then adding your close handler in the closeHandler argument, you can inspect which button was clicked and react accordingly.
Something like this:
Alert:
Alert.show("Alert Title","Would you like to proceed?",Alert.OK || Alert.CANCEL,this,onClose)
onClose Function:
private function onClose(event:CloseEvent)
{
if (eventObj.detail==Alert.OK)
{
//proceed
}
else
{
//cancel operation
}
}
As per your comment on James post here i am posting sample, not sure if you are looking for the same: - Hope below code may give you some idea.
<?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">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
private var storeNextFocusID:String = "first";
private var storePreviousFocusID:String = "first";
private function firstFocus():void
{
first.setFocus();
storePreviousFocusID = first.name;
}
private function showFirstTimeAlert(event:MouseEvent):void
{
if(event.currentTarget.name != storePreviousFocusID)
{
Alert.show("Do you want to change Tab?","Alert",Alert.OK|Alert.CANCEL,null,closeHandler)
storeNextFocusID = event.currentTarget.name;
}
}
private function closeHandler(event:CloseEvent):void
{
if(event.detail == Alert.OK)
{
var focusCont:HGroup = mainContainer.getChildByName(storeNextFocusID) as HGroup;
focusCont.setFocus();
storePreviousFocusID = storeNextFocusID;
} else
{
}
}
]]>
</fx:Script>
<s:VGroup id="mainContainer" x="50" y="50" width="400" height="300" creationComplete="firstFocus()">
<s:HGroup id="first" name="first" width="100%" height="100%" click="showFirstTimeAlert(event)">
<mx:TabNavigator width="100%" height="100%">
<mx:VBox label="left">
<mx:Label text="labelPlacement = 'left'" />
</mx:VBox>
<mx:VBox label="right">
<mx:Label text="labelPlacement = 'right'" />
</mx:VBox>
</mx:TabNavigator>
<s:Panel width="100%" height="100%">
</s:Panel>
</s:HGroup>
<s:HGroup id="second" name="second" width="100%" height="100%" click="showFirstTimeAlert(event)">
<mx:TabNavigator width="100%" height="100%">
<mx:VBox label="top">
<mx:Label text="labelPlacement = 'top'" />
</mx:VBox>
<mx:VBox label="bottom">
<mx:Label text="labelPlacement = 'bottom'" />
</mx:VBox>
</mx:TabNavigator>
<s:Panel width="100%" height="100%">
</s:Panel>
</s:HGroup>
</s:VGroup>
</s:Application>