I have a very simple problem. I want a component move right when a mouse hover it, and the component will be move back when the mouse is at elsewhere. and the code I come up with is like this.
<?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"
xmlns:ns1="*"
minWidth="955" minHeight="600">
<fx:Style source="testproject.css"/>
<fx:Declarations>
<s:Move3D id="nueffect" target="{menuC}" xBy="+100" />
</fx:Declarations>
<ns1:menu id="menuC" x="-296" y="155" mouseOver="nueffect.play();">
</ns1:menu>
</s:Application>
My question is how do I implement the effect when the mouse is not hovering the component?
Related
My code is as follwos;
1, ) Both the label and the button are overlapping. and how can i fix that ? (I know that the layout is set to absolute by default, but when i removed the minWidth="955" minHeight="600" and included layout="horizontal" i got the following error)
Description Resource Path Location Type
Initializer for 'layout': values of type spark.layouts.supportClasses.LayoutBase cannot be represented in text. HelloFlex.mxml /HelloFlex/src line 4 Flex Problem
2.) May i know what the tags mean xmlns:fx xmlns:s xmlns:mx and at which instances i should be using them ?
3.) In FLex Builder 4.6, in the design mode can i Drag-and-drop components to design the user interface ?
<?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>
<mx:Label text="Hello World"/>
<mx:Button label="Click"/>
</s:Application>
Below code may help you: -
<?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>
<s:layout>
<s:HorizontalLayout paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"/>
</s:layout>
<mx:Label text="Hello World"/>
<mx:Button label="Click"/>
</s:Application>
Another workaround is to open the file template inside of Flash Builder and remove the ${wizard_attributes} tag it also stops embedding layout="absolute".
You can get there via Flash Builder Preferences -> Flash Builder -> File Templates -> MXML -> MXML Web Application and then click edit to remove the attribute.
From this page… https://cwiki.apache.org/confluence/display/FLEX/Adobe+Flash+Builder+'New+Project'+Bug
It might be worth noting the other workaround on this wiki page… if you close flash builder and change the line in flex-sdk-description.xml file that says 4.10.0 to 4.9.0
This bug stops manifesting.
Try this:
<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">
<s:Panel id="pnl">
<s:RichEditableText id="richEdTxt"
width="200"
maxChars="100" />
</s:Panel>
</s:Application>
Now set heightInLines="1":
<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">
<s:Panel id="pnl">
<s:RichEditableText id="richEdTxt"
width="200"
maxChars="100"
heightInLines="1" />
</s:Panel>
</s:Application>
See the problem when you fill up the RichEditableText with characters? Keep typing the word hello until you cross outside of the first visible area of the RichEditableText. things get weird. Try it out. Anyone have any ideas how to prevent the weirdness? (the text starts jumping up and down)
This is a bug that appears to have been fixed in a later SDK - but I can't seem to find the JIRA ticket for it.
What I'm trying to do: build a super simple button skin (say a small circle when in up state, slightly larger circle when in over / down states) that has a larger mouse hit area than visible area. In other words, I'd like the button to look like a 5x5 circle when in up state, but transition to over state when the mouse is in a 15x15 pixel area around such circle - in order to make clicking on the button easier.
What I've done in the past is to use a transparent ellipse behind the the visible ellipse. This works nicely but seems like a waste of memory (not much, although if you start having a lot of these buttons it adds up) and rendering cycles (transparency). I thought I could avoid this by wrapping the ellipse in a group with a given size and listen to its mouse events, but somehow no mouse events seem to fire on such a group - not sure why.
I guess I'd love to know if anyone knows an efficient way to do this. Also would love to know why such a group won't fire mouse events, but I guess that's secondary. Simple code snippet below:
the application:
<?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">
<s:Button x="100" y="100" skinClass="mySkin"/>
</s:Application>
the button skin:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
<fx:Script>
<![CDATA[
import mx.states.OverrideBase;
protected function group1_rollOverHandler(event:MouseEvent):void
{
trace("roll over");
}
]]>
</fx:Script>
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<s:Group width="15" height="15" rollOver="group1_rollOverHandler(event)">
<s:Ellipse height.up="5" height="12" width="12" width.up="5"
x="0" y="0" x.up="3" y.up="3">
<s:fill>
<s:SolidColor color="0x222222"/>
</s:fill>
</s:Ellipse>
</s:Group>
</s:SparkSkin>
I wouldn't worry about the memory of an Ellipse inside of a SparkSkin. If you are that concerned about memory, you would want to roll your own Button
However, there are a couple of very minor performance enhancements that won't effect the implementation:
Use Skin instead of SparkSkin. it is lighter weight.
Use Rect for the hitarea. It is lighter weight than Ellipse
I am getting problem like
Element type "components" must be followed by either attribute specifications, ">"
and my mxml file is
<?xml version="1.0" encoding="utf-8"?>
<components:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:components="spark.components.*" title="Home" creationComplete="srv.send()">
<fx:Declarations>
<s:HTTPService id="srv" url="assets/employees.xml"/>
</fx:Declarations>
<s:List id="list" top="0" bottom="0" left="0" right="0"
dataProvider="{srv.lastResult.list.employee}"
labelField="lastName"/>
</components:View>
<components:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:components="spark.components.*" title="Home" creationComplete="srv.send()">
this line gives me error like following line
Element type "components" must be followed by either attribute specifications, ">"
Why am I getting this error?
Here are a few things to consider:
1) You aren't using a Mobile Component project, and therefore do not have mobile components added to the library path. View is a Mobile Component. IF this is the case you can add it to the class path manually.
2) It is odd to define the spark components as a namespace separate of the default 's' namespace:. This approach would be more common:
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" title="Home" creationComplete="srv.send()">
</s:View>
I've seen some similar questions, but nothing quite like what I'm trying to figure out, so here goes. I have a flex app with many view states, some of which are used frequently, some of which are not. Currently all these states reside in one mxml file so that only one swf file is generated and loaded in the client browser. I would like to modularize these view states by separating them out into different source files and just loading states from one file into another, however, I still want the user to only have to load one swf file. My main reason for this is to avoid having source files in excess of 10,000 lines. Is there a standard way of addressing this issue?
Thanks.
There are two ways of doing what you ask. The first is what it sounds like you are asking, the second is what I would recommend.
First:
Create your main.mxml application and then create separate component1.mxml and component2.mxml files for each of your states. Then in your application set it up like this:
<?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" xmlns:local="*">
<s:states>
<s:State name="State1"/>
<s:State name="State2"/>
</s:states>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<local:Component1 includeIn="State1"/>
<local:Component2 includeIn="State2"/>
</s:Application>
The second way, and the one I recommend because of your description of the application breaks it down into multiple swf modules with one swf application. This way the user only downloads what they plan to use. In this scenario do the same as before but create modules instead of components.
<?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" xmlns:local="*">
<s:states>
<s:State name="State1"/>
<s:State name="State2"/>
</s:states>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:ModuleLoader url="Component1.swf" includeIn="State1"/>
<mx:ModuleLoader url="Component2.swf" includeIn="State2"/>
</s:Application>