I wish to create a effect on a component when the mouseover it. and when the mouseout, the effect will be reversed.
<fx:Declarations>
<s:Parallel id="move">
<s:Move3D id="moveDown" yBy="+100"/>
<s:Pause />
<s:Move3D id="moveUp" yBy="-100"/>
</s:Parallel>
</fx:Declarations>
<s:Panel id="userMenu" includeIn="USER" x="920" y="35" width="689" height="142"
mouseOver="move.play(Array(userMenu), false)"
mouseOut="move.resume(Array(userMenu), false)"
rotationZ="180" >
<s:HGroup x="44" y="9" width="590" height="62" gap="15" horizontalCenter="1" rotationZ="180"
verticalCenter="1"
x.USER="10" y.USER="208">
</s:HGroup>
</s:Panel>
But I received a error like this
1152: A conflict exists with inherited definition mx.core:UIComponent.move in namespace public mx.core:IFlexDisplayObject.
after I add the move.resume() function. Why I receive this error? and How to debug it?
Related
Can someone show me how should I correctly implement mathematical calculations like (+,-,/,*) using text inputs in 2 cases:
1 - more states
2 - input in a view an the result in other
Here is a part of my code:
<?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"
creationComplete="init()" currentState="State1" overlayControls="false" title="Calculator">
<s:states>
<s:State name="State1"/>
<s:State name="RezultatCalculator"/>
</s:states>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import spark.events.DropDownEvent;
protected function init():void
{
addEventListener(TransformGestureEvent.GESTURE_SWIPE, swipeHandler);
}
protected function swipeHandler(event:TransformGestureEvent):void
{
if (event.offsetX == 1)
{
navigator.pushView(CalculatorView);
}
}
protected function primulcalcul_openHandler(event:DropDownEvent):void
{
// TODO Auto-generated method stub
}
]]>
</fx:Script>
<s:Scroller includeIn="State1" left="3" right="3" top="0" height="547">
<s:VGroup width="100%" height="100%" gap="24" horizontalAlign="justify" paddingTop="8"
verticalAlign="top">
<s:Label id="actot" width="237" height="60" text="Active Totale" textAlign="center"
verticalAlign="middle"/>
<s:TextInput id="actot_val" width="183" height="60" fontFamily="_sans" fontSize="28"
textAlign="center" softKeyboardType="number" />
<s:Label id="disp" width="159" height="60" text="Disponibilitati" textAlign="center"
verticalAlign="middle"/>
<s:TextInput id="disp_val" width="164" height="60" fontFamily="_sans" fontSize="28"
textAlign="center" softKeyboardType="number"/>
<s:Label id="datot" width="159" height="60" text="Datorii Totale" textAlign="center"
verticalAlign="middle"/>
<s:TextInput id="datot_val" width="164" height="60" fontFamily="_sans"
fontSize="28" textAlign="center" softKeyboardType="number"/>
<s:Label id="caprop" width="159" height="60" fontSize="24" text="Capitaluri Proprii"
textAlign="center" verticalAlign="middle"/>
<s:TextInput id="caprop_val" width="164" height="60" fontFamily="_sans" fontSize="28"
textAlign="center" softKeyboardType="number"/>
<s:Button id="butstart0" width="401" height="70" label="START"
click="currentState='RezultatCalculator'" enabled="true"/>
</s:VGroup>
</s:Scroller>
<s:CalloutButton id="primulcalcul" includeIn="RezultatCalculator" x="22" y="28" width="145"
height="63" label="primulcalcul" enabled="true"
open="primulcalcul_openHandler(event)"/>
<s:TextArea id="Primul_val" includeIn="RezultatCalculator" x="203" y="27" width="267"
editable="false" prompt="result"/>
<fx:Script>
<![CDATA[
import flash.globalization.NumberFormatter;
import flashx.textLayout.formats.Float;
import flashx.textLayout.formats.Float;
import learnmath.mathml.components.MathMLFormula;
import learnmath.mathml.formula.layout.MathBox;
public function MathMLFormula():void
{
var Primul_val:Number=new Number
var datot:Number=new Number
var disp:Number=new Number
Primul_val=0
NumberFormatter(TextArea(Primul_val))==NumberFormatter(TextInput(datot))+NumberFormatter(TextInput(disp)); /* this is one of the examples, i tied some different values like valueOf */
}
]]>
</fx:Script>
</s:View>
I have a few suggestions, but I'm not sure exactly what your problem is.
First, use the restrict attribute on your TextArea. The restrict attribute will prevent people from entering non-numeric keys. Sort of like this:
<s:TextInput id="datot_val" width="164" height="60" fontFamily="_sans"
fontSize="28" textAlign="center" softKeyboardType="number" restrict="0-9"/>
It's entirely possible that the use of the softKeyboardType makes this a non-issue if you're using a mobile application on a device that supports it.
The line of code you mentioned in the comments looks to be error prone:
NumberFormatter(TextArea(Primul_val))==NumberFormatter(TextInput(datot))+NumberFormatter(TextInput(disp));
First, datot and disp are Labels; not TextInputs. They have hard coded non-numeric values. I think you want to use datot_val and disp_val. which are TextInputs. Since they are already inputs you do not need to cast them as such.
Second you do not need to cast the TextInput as a NumberFormatter. You would not usually use a NumberFormatter as a static class, but rather create an instance of it. More info on NumberFormatter here.
So, I believe your line would be rewritten like this:
Primul_val.text== String(
int(datot.text) + int(disp.text)
);
I added some extra lines so the parenthesis wouldn't get confused.
I take the input of datot (AKA datot.text) and cast it as an int. I take the input of disp (disp.text) and cast that as an int. I add the two together and convert them both to a String. The string is stored in the text value of Primul_val.
Does that help clear anything up?
I am trying to implement some MVC-style UI components in Flex 4. I want to further separate the visual setup (and later runtime modification) of each element. Primarily, I want to keep the overall layout of the data like such in the MXML file that will USE the skin:
<s:Group id="container">
<s:VGroup>
<s:HGroup id="titleGroup">
<s:Label id="titleText" />
<s:Button id="closeButton" />
</s:HGroup>
<s:HGroup id="contentGroup">
<s:VGroup id="interactionGroup">
<s:VGroup id="messageGroup" />
<s:HGroup id="actionGroup" />
</s:VGroup>
</s:HGroup>
</s:VGroup>
</s:Group>
And in the Skin file, I want to be able to refer to the ids and set properties on them (such as width and height on the "container" group) AND be able to include graphical elements within them (such as a filled rect inside the "container" group). I want to do this declaratively, NOT programmatically, else why use MXML in the first place? This is the way that HTML/CSS is divided up: HTML contains what the data IS relative to other data, and the CSS contains all the properties and visual styles.
As it is now, my skin looks like this:
<s:Group id="container" verticalCenter="0" horizontalCenter="0">
<s:Rect id="background" width="100%" height="100%" radiusX="10" radiusY="10">
<s:filters>
<s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="5" angle="90" />
</s:filters>
<s:fill>
<s:SolidColor color="#ffffff" />
</s:fill>
</s:Rect>
<s:VGroup width="100%" height="100%" gap="3" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<s:HGroup id="titleGroup" width="100%" verticalAlign="middle">
<s:Label id="titleText" width="100%" />
<s:Button id="closeButton" />
</s:HGroup>
<s:HGroup id="contentGroup" width="100%">
<s:VGroup id="interactionGroup" width="100%">
<s:VGroup id="messageGroup" width="100%" />
<s:HGroup id="actionGroup" width="100%" />
</s:VGroup>
</s:HGroup>
</s:VGroup>
</s:Group>
And the actual component that uses this skin is nothing more than SkinPart declarations:
<fx:Script>
<![CDATA[
import spark.components.Label;
import spark.components.Button;
import spark.components.Group;
[SkinPart(required="true")]
public var titleText:Label;
[SkinPart(required="true")]
public var closeButton:Button
[SkinPart(required="true")]
public var messageGroup:Group;
[SkinPart(required="true")]
public var actionGroup:Group;
]]>
</fx:Script>
As you can see, the Skin contains everything about the component, violating my sense of separating style and content. The using element has nothing in it except for interfaces to the Skin for programmatic changes. My current solution has no advantage over not using skins at all, except for the slightly easier process of switching out skins.
Is there a way to do what I have proposed in Flex 4?
The answer is that Flex does not work this way. Layout and visual style appear to be inseparably linked. Closing out this question.
In flex UI, my <mx:list> can not be shown completely because of other component shelterring (for example: the refresh button shelter part of it ). How can I make the <mx:list> in front of all other UI component.
This is my code:
<s:HGroup verticalAlign="middle">
<s:Label text="Choose Log File"/>
<mx:ComboBox id ="logFileChooseCombo" dataProvider="{fileNameList}" width="150" color="0x000000"
close="changeLogFilesHandler(event);"/>
<mx:Spacer width="320" />
<s:Label text="Filter or HighLight:" />
<mx:ComboBox id ="filterChooseCombo" dataProvider="{filterOrHighlight}" width="150" color="0x000000"/>
<s:VGroup height="25">
<s:TextInput id="logContentInput" change="filterLogContent()"
enabled="true"
focusIn="clearMyTextInput()"
text="Filter/HightLight"
width="250" height="26"/>
**<mx:List id="searchMsgList"** x="65" y="35" width="200" height="200" fontSize="12"
change="itemChangEvent(event);" />
</s:VGroup>
</s:HGroup>
</mx:Canvas>
<s:HGroup verticalAlign="middle">
<s:Label text="Filter By Log Level:"/>
<mx:ComboBox id ="logLevelCombo" dataProvider="{logLevelsInt}" width="150" color="0x000000"
close="changeLogLevelHandler(event);"/>
<s:CheckBox id="showStack" click="showStackTrace(event)" selected="false"/>
<s:Label text="show stackTraces"/>
<mx:Spacer width="550" />
<s:Button id="test" label="refresh2">
</s:Button>
</s:HGroup>
You have a lot going on, with a mix of nested layouts and a mix of Halo and Spark containers. I'm not sure what layout you're trying to create.
That said, take a look at the swapChildren method. Something like this should work:
this.swapChildren(refresh2, searchMsgList);
But it will most likely hide your refresh button, which seems less than ideal.
A few things strike me:
Inside your first VGroup you have x and y values specified. I thought those values were ignored inide VGroups, which automatically position your children in a vertical line.
I see an closing </mx:Canvas> tag, but not an opening canvas tag. It is unusual to me to use a canvas among all the HGroups and VGroups.
I would like to write a transition where all the elements from State1 rotate around Y axis and then show elements from State2
This s illustrated in the dummy code below (just imagine Label 1 is a Group).
<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">
<s:states>
<s:State name="State1"/>
<s:State name="State2"/>
</s:states>
<s:transitions>
<s:Transition fromState="*" toState="State2" autoReverse="true">
<s:Rotate3D target="{label2}" angleYFrom="-90" angleYTo="0" autoCenterTransform="true" duration="1000"/>
</s:Transition>
</s:transitions>
<fx:Declarations>
<s:Rotate3D id="phaseOut" target="{label1}" angleYFrom="0" angleYTo="90" autoCenterTransform="true" duration="1000" effectEnd="currentState='State2'" />
</fx:Declarations>
<s:Label id="label1" includeIn="State1" text="This is state 1" horizontalCenter="0" verticalCenter="0"/>
<s:Label id="label2" includeIn="State2" text="This is state 2" horizontalCenter="0" verticalCenter="0"/>
<s:Button label="Change" horizontalCenter="0" verticalCenter="30" click.State1="phaseOut.play()" click.State2="currentState='State1'"/>
</s:WindowedApplication>
My first problem is when the state transition is invoked, all elements from State1 are already gone, hence I have to split the transition in two hacks (see "phaseOut")
This seems really poor since I am essentially rewritting the transition mechanism.
Q1: Is there a "clean" way to transition elements that do not belong to State2 ?
The second problem is when you revert back to State 1, elements have been rotated.
Q2: Is there such a thing as "autoReverse" for animations?
Thanks for your time!
Instead of doing two transitions, you can add the 'remove' filter to isolate an effect just on items being removed and use the RemoveChildAction to let the transition know when to execute the action to remove the items.
Info on RemoveChildAction:
http://livedocs.adobe.com/flex/3/langref/mx/effects/RemoveChildAction.html
Info on filters:
http://livedocs.adobe.com/flex/3/langref/mx/effects/Effect.html#filter
Effects have a reverse method to play it in reverse:
http://livedocs.adobe.com/flex/3/langref/mx/effects/Effect.html#reverse%28%29
Although I've heard mixed results from people about how successful it is.
Using viewstacks seems to do the trick nicely:
<?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" >
<fx:Declarations>
<s:Rotate3D id="phaseOut" angleYFrom="0" angleYTo="90" duration="500" autoCenterTransform="true" />
<s:Rotate3D id="phaseIn" angleYFrom="-90" angleYTo="0" duration="500" autoCenterTransform="true" startDelay="500" />
</fx:Declarations>
<mx:ViewStack id="viewstack1" width="200" height="200" horizontalCenter="0" verticalCenter="0">
<s:NavigatorContent label="View 1" width="100%" height="100%" hideEffect="{phaseOut}" showEffect="{phaseIn}" >
<s:Label id="label1" text="This is state 1" horizontalCenter="0" verticalCenter="0"/>
</s:NavigatorContent>
<s:NavigatorContent label="View 2" width="100%" height="100%" hideEffect="{phaseOut}" showEffect="{phaseIn}">
<s:Label id="label2" text="This is state 2" horizontalCenter="0" verticalCenter="0"/>
</s:NavigatorContent>
</mx:ViewStack>
<s:Button label="Toggle" click="viewstack1.selectedIndex=(viewstack1.selectedIndex==0?1:0)" horizontalCenter="0" top="10"/>
</s:Application>
The code is neat and the effect is exactely as expected
i have an HGroup that contains a DataGroup with an ArrayCollection for a dataProvider.
the DataGroup has a VScrollBar attached to it.
how can i make sure that whenever new rows are added to the ArrayCollection, the dataGroup will scroll down ?
this window is gonna be used for a chat application so whenever new rows are added i need to see the new rows.
i know that i can perform the following command to scroll down: chatScrollBar.value=chatScrollbar.maximum
but what event do i need to attach to in order to run this command whenever a new row is visible ?
<s:HGroup width="100%">
<s:DataGroup id="vertView"
clipAndEnableScrolling="true" width="100%" height="60"
dataProvider="{chatMessages}">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="100%" height="8">
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
</s:states>
<s:RichText text="{ data }" textAlign="left" paddingLeft="2" color="black" color.hovered="blue"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:layout>
<s:VerticalLayout useVirtualLayout="true"/>
</s:layout>
</s:DataGroup>
<s:VScrollBar id="chatScrollBar" viewport="{vertView}"
height="{vertView.height}" />
</s:HGroup>
You have to set the verticalScrollPosition. See here or here. Or try this for a Spark List:
<s:List id="list"
horizontalCenter="0"
verticalCenter="0">
<s:layout>
<s:VerticalLayout id="vLayout" requestedRowCount="4"
verticalScrollPosition="{vLayout.maxScrollPosition}" />
</s:layout>
</s:list>
Try using Scroller, I think it is as simple as:
<s:Scroller >
<s:HGroup>
...
</s:HGroup>
</s:Scroller>
You shouldn't need to hook up your own scrollbar.