I'm trying to learn Flash builder 4.5, and now I'm stuck with this question.
I got this code:
<fx:Script>
<![CDATA[
public function showList():void
{
tier2.x=(this.x+this.width);
tier2.y=(this.y+this.height);
tier2.visible=true;
}
]]>
</fx:Script>
// on mouseover I'm calling function showList()
<mx:LinkButton x="10" y="20" width="143"
label="Class 1" id="t_id1"
mouseOver="showList()"
color="#FFFFFF" fontFamily="Arial" fontSize="16" fontWeight="bold"/>
<s:List id="tier2" visible="false" width="111" borderColor="#FEFEFE"
borderVisible="true" color="#FAF3F3" contentBackgroundAlpha="0.5"
contentBackgroundColor="#5D5E5E">
</s:List>
In function showList() I'm trying to move the list to the linkbutton on mouseover.
How can I get the linkbutton's x and y position?
Related
<?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="BMI Calculator">
<fx:Script>
<![CDATA[
protected function calculate_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:actionContent>
<s:Button label="Back" click="navigator.pushView(MainHomeView)" styleName="back"/>
</s:actionContent>
<s:Label x="33" y="61" fontSize="30" text="Weight(kg) :"/>
<s:Label x="34" y="140" fontSize="30" text="Height(cm) :"/>
<s:TextInput id="mywieght" x="216" y="40" width="228" prompt="0.0kg" textAlign="right"/>
<s:TextInput id="myheight" x="216" y="119" width="228" prompt="0.0cm" textAlign="right"/>
<s:Button id="calculation" x="31" y="260" width="413" label="Calculate" fontSize="36"
fontStyle="italic"/>
<s:Label id="myresult" left="31" right="36" height="146" fontSize="72" fontStyle="normal"
fontWeight="bold" text="0.0" textAlign="center" verticalAlign="middle"
verticalCenter="99"/>
</s:View>
this is the gui for a BMI calculator. i dont really have the basic of using flash builder. can anyone teach me how to use the data input by user inside the textinput and then use it for calculation and display it? thanks
First you assign a click handler to your button so your calculate_clickHandler method will be called on button click:
<s:Button id="calculation" x="31" y="260" width="413" label="Calculate" fontSize="36" fontStyle="italic" click="calculate_clickHandler(event)"/>
Then you do your calculations and pass your result to the myresult Label:
protected function calculate_clickHandler(event:MouseEvent):void
{
var height:Number = Number(myheight.text);
var weight:Number = Number(mywieght.text); // you have a typo here, wiegth instead of weight ;)
myresult.text = height * weight;
}
And you probably want a popView() on back button click. This will remove the current view and go back to your last view. push() will add another view:
<s:Button label="Back" click="navigator.popView()" styleName="back"/>
Try this:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
protected function calculate_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
const myWeightInKG:Number = Number(myWeight.text);
const myHeightInMeter:Number = Number(myHeight.text) * 0.01;
const BMI:Number = myWeightInKG / (myHeightInMeter * myHeightInMeter);
const BMI_withOneDecimalPlace:Number = int(BMI * 10)/10;
myResult.text = BMI_withOneDecimalPlace.toString();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label x="33" y="61" fontSize="30" text="Weight(kg) :"/>
<s:Label x="34" y="140" fontSize="30" text="Height(cm) :"/>
<s:TextInput id="myWeight" x="216" y="40" width="228" prompt="Weight in Kg(e.g. 56)" textAlign="right"/>
<s:TextInput id="myHeight" x="216" y="119" width="228" prompt="Weight in cm(e.g. 157)" textAlign="right"/>
<s:Button id="calculation" x="31" y="260" width="413" label="Calculate" fontSize="36"
fontStyle="italic" click="calculate_clickHandler(event)"/>
<s:Label id="myResult" left="31" right="36" height="146" fontSize="72" fontStyle="normal"
fontWeight="bold" text="0.0" textAlign="center" verticalAlign="middle"
verticalCenter="99"/>
</s:Application>
im new to flex development and in need of assistance.
I have a xml file that contains data that i would like to update if the user changes anything, the file is saved on his local program files where the application is.
Here is my code that reads the XML file:
<fx:Declarations>
<s:HTTPService id="systemData" url="data/system.xml" method="POST"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var systemInfo:Object = new Object();
private var interval:uint;
[Bindable]
private var xmlData:ArrayCollection = new ArrayCollection();
private function viewMain(event:Event):void
{
mainWindow.visible = true;
systemWindow.visible = false;
}
private function viewSystem(event:Event):void
{
mainWindow.visible = false;
systemWindow.visible = true;
}
public function init():void
{
systemData.addEventListener(ResultEvent.RESULT, getXML);
systemData.send();
interval = setInterval(reloadXML, 1800000);
}
private function getXML(e:ResultEvent):void
{
systemInfo = systemData.lastResult.system;
systemIP.text = systemInfo.systemip;
systemPort.text = systemInfo.systemport;
systemUsername.text = systemInfo.systemusername;
systemPassword.text = systemInfo.systempassword;
}
private function reloadXML():void
{
systemData.send();
}
]]>
</fx:Script>
<s:BorderContainer id="mainWindow" width="100%" height="100%" visible="false">
<s:Button x="434" y="102" label="System Settings" click="viewSystem(event)"/>
<s:Button x="468" y="147" label="Button" />
</s:BorderContainer>
<s:BorderContainer id="systemWindow" width="100%" height="100%" visible="true">
<s:Panel width="800" height="600" horizontalCenter="0" title="System Settings"
verticalCenter="0">
<s:Label x="33" y="41" text="Server IP:"/>
<s:Label x="33" y="66" text="Port:"/>
<s:Label x="33" y="90" text="Username:"/>
<s:Label x="33" y="115" text="Password:"/>
<s:TextInput x="182" y="31" width="250" id="systemIP"/>
<s:TextInput x="182" y="56" width="250" id="systemPort"/>
<s:TextInput x="182" y="80" width="250" id="systemUsername"/>
<s:TextInput x="182" y="105" width="250" id="systemPassword"/>
<s:Button x="345" y="135" label="Save to XML" />
<s:Button x="718" y="-26" label="Main" click="viewMain(event)"/>
</s:Panel>
</s:BorderContainer>
The XML File:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<system>
<systemip>127.0.0.0</systemip>
<systemport>80</systemport>
<systemusername>rootu</systemusername>
<systempassword>passu</systempassword>
</system>
Thanks in advance
To write the updated content back in your xml file, you need to write the file back. I assume your application is an Adobe AIR application. You can make use of "File" class to read and write the content.
Link: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filesystem/File.html
i have a spark list that displays a list of images that represent products. i am trying to implement a drag and drop functionality that allows the user to drag the products he wants to buy from the list to canvas area where he can see the products he choose before buying them. i am using the code below but i cannot figure out what is wrong with it , it seems that i am unable to use the list item as a draginitiator, can any one help please:
private function onMouseDown( event : MouseEvent ) : void
{
var list:List = List(event.currentTarget);
var dragInitiator:Image = Image (list.selectedItem);
var source : DragSource = new DragSource();
source.addData(dragInitiator, "img");
DragManager.doDrag(dragInitiator, source, event);
}
protected function canvas1_dragEnterHandler(event:DragEvent):void
{
DragManager.acceptDragDrop(Canvas(event.currentTarget));
}
protected function canvas1_dragDropHandler(event:DragEvent):void
{
Image(event.dragInitiator).x =
Canvas(event.currentTarget).mouseX;
Image(event.dragInitiator).y =
Canvas(event.currentTarget).mouseY; }
<fx:Model id="categoriesModel" source="Data/Categories.xml"/>
<s:ArrayList id="CategoriesCollection" source="{categoriesModel.Category}"/>
<fx:Model id="productsModel" source="Data/Products.xml"/>
<s:ArrayList id="ProductsCollection" source="{productsModel.Product}" />
</fx:Declarations>
<s:VGroup gap="5" horizontalAlign="center">
<s:HGroup gap="5">
<Components:PROExpressLogo/>
<s:List id="categoryList" scroller="{null}" visible="true"
itemRenderer="Renderers.categoryItemRenderer" width="700" borderAlpha="0"
change="categoryList_changeHandler(event)">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
</s:List>
</s:HGroup>
<s:List id="productList" scroller="{null}" contentBackgroundAlpha="0.4" contentBackgroundColor="0xabcdef"
itemRenderer="Renderers.productItemRenderer" width="880" borderAlpha="0" visible="true" horizontalCenter="0"
dragEnabled="false" mouseDown="onMouseDown(event)"
>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
</s:List>
<s:HGroup gap="20">
<s:Group>
<s:Image id="planImage" width="500" height="300" horizontalCenter="0"
toolTip="Drag your items on your Plan and drop them were you plan to install them"
/>
<mx:Canvas width="500" height="300" backgroundAlpha="0.1"
backgroundColor="#abcdef" borderColor="#abcdef" borderStyle="inset"
contentBackgroundColor="#abcdef" cornerRadius="10"
dragDrop="canvas1_dragDropHandler(event)"
dragEnter="canvas1_dragEnterHandler(event)" dropShadowVisible="true"
horizontalCenter="0"/>
</s:Group>
<s:List id="cart" width="200" height="300"/>
</s:HGroup>
I 'm thinking you need add drag initiator should be the item renderer that you are dragging rather than the entire List control.
Not list.selectedItem that simple object that is not like UIComponent or VisualElement you have to point some ui component like group.
I have the next code (Flash Builder 4.5)
This main appliction file, for testing me viewstack component.
TabPanelTest
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function creationCompleteHandler(event:FlexEvent):void
{
tp.AddPanel("111", new Button());
tp.AddPanel("444", new TestPanel());
tp.AddPanel("2222222", new Button());
tp.AddPanel("3333333333", new Button());
}
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
tp.RemoveAllPanels();
}
]]>
</fx:Script>
<ns1:TabPanel id="tp" x="25" y="27" width="321" height="199">
</ns1:TabPanel>
<s:Button x="439" y="25" label="Кнопка1" click="button1_clickHandler(event)"/>
</s:Application>
This is TabPanel, that have public methods AddPanel and RemoveAllPanels.
TabPanel
protected function creationCompleteHandler(event:FlexEvent):void
{
//buttons1.dataProvider=new ArrayCollection();
}
public function AddPanel(name:String, element:IVisualElement):void{
var panel:NavigatorContent=new NavigatorContent();
panel.label=name;
panel.addElement(element);
panels.addElement(panel);
}
public function RemoveAllPanels():void{
//panels.swapElements(swapElementsAt(0,2);
panels.removeAllElements();
/*var but:Button;
but=new Button();
but.label=name;
buttons.addElement(but); */
}
]]>
</fx:Script>
<mx:ViewStack id="panels" x="0" y="31" width="100%" height="100%" borderColor="#000000"
borderStyle="solid" borderVisible="true" clipContent="true" includeInLayout="true">
</mx:ViewStack>
<s:ButtonBar id="buttons1" x="0" y="0" width="100%" dataProvider="{panels}"
justificationStyle="pushOutOnly"/>
</s:Group>
This is testing panel, that have size more than viewstack, and it must clipping.
TestPanel
<?xml version="1.0" encoding="utf-8"?>
<s:Group 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="100%" height="100%">
<fx:Script>
<![CDATA[
import spark.components.NavigatorContent;
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
NavigatorContent(this.parent.parent.parent).label="bebe";
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Button x="163" y="35" width="315" height="209" label="Кнопка"
click="button1_clickHandler(event)"/>
</s:Group>
When i click to "444" in buuton bar my content don't clipping. What's problem?
Problem is in this line with TestPanel custom component: -
<s:Button x="163" y="35" width="315" height="209" label="Кнопка"
click="button1_clickHandler(event)"/>
If you are adding any component to parent container: -
child component will consider x and y position with respect to parent.
If you want to fit your child component you should use x=0 and y=0
as well as width = 100% and height = 100%
Try this and see out put: -
<s:Button x="163" y="35" width="100%" height="100%" label="Кнопка"
click="button1_clickHandler(event)"/>
Again Try this and see out put: -
<s:Button x="0" y="0" width="100%" height="100%" label="Кнопка"
click="button1_clickHandler(event)"/>
You will come to know how component behavior.
Hope this may solve your problem.....
I have three buttons with sound effects in a mobile adobe air device (PlayBook in this case - supports up to 4 points of multitouch).
<fx:Declarations>
<mx:SoundEffect id="Sound1" source="#Embed(source='assets/Sound1.mp3')" />
<mx:SoundEffect id="Sound2" source="#Embed(source='assets/Sound2.mp3')" />
<mx:SoundEffect id="Sound3" source="#Embed(source='assets/Sound3.mp3')" />
</fx:Declarations>
<s:Button interactionMode="touch" x="14" y="60" width="295" height="145" label="Button1" mouseDownEffect="{Sound1}"/>
<s:Button interactionMode="touch" x="362" y="60" width="295" height="145" label="Button2" mouseDownEffect="{Sound2}"/>
<s:Button interactionMode="touch" x="713" y="60" width="295" height="145" label="Button3" mouseDownEffect="{Sound3}"/>
All the buttons work but how do I let the user press all three at once? Is there another way to do this?
Thanks,
Flex components don't support multi-touch.
Ran on creationComplete:
protected function init():void
{
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
}
Then used an image for a button since buttons work but only one button shows animation for some reason:
<s:Image id="ui_btnLowTom" source="{imageOut.source}"
x="14" y="60" width="295" height="145" touchBegin="ui_btnLowTom.source = imageOver.source; LowTomPlay(event)"
touchEnd="ui_btnLowTom.source = imageOut.source" />
And the actual handler:
protected function LowTomPlay(event:TouchEvent):void
{
lowTomSndChannel=lowTomSnd.play();
}
So yes - flex does support multi-touch....