I am trying to add a navigation component with a button bar in it that controls the view stack of the main application. Here is what I have so far for the main application's 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"
xmlns:comps="comps.*" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
public var myViewStack:ViewStack;;
]]>
</fx:Script>
<fx:Binding source="lgViewStack" destination="myViewStack"/>
<comps:viewControl id="myControl" width="935" horizontalCenter="0" top="5" height="134"/>
<mx:ViewStack id="lgViewStack" width="935" height="474" left="10" verticalCenter="66">
<s:NavigatorContent label="View 1" width="100%" height="100%" id="view1">
<s:Panel id="firstPanel" title="First Panel" width="250" height="200" horizontalCenter="0" verticalCenter="0" >
</s:Panel>
</s:NavigatorContent>
<s:NavigatorContent label="View 2" width="100%" height="100%" id="view2">
<s:Panel id="secondView" title="Second View" width="250" height="200" horizontalCenter="0" verticalCenter="0" >
</s:Panel>
</s:NavigatorContent>
</mx:ViewStack>
</s:Application>
And the component code:
<?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="400" height="300">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:ButtonBar x="170" y="10" width="58" dataProvider="{myViewStack}"/>
</s:Group>
I receive a compile error from the component: Access of undefined property myViewStack. Am I referencing the variable myViewStack incorrectly? I am still trying to understand how bindings work.
ViewControl
<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">
<fx:Script>
<![CDATA[
public function set dataProvider(value:ViewStack):void
{
bar.dataProvider = value;
}
public function get dataProvider():ViewStack
{
return bar.dataProvider;
}
]]>
</fx:Script>
<s:ButtonBar id="bar"/>
</s:Group>
Main
<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:comps="comps.*">
<comps:ViewControl dataProvider="{viewstack}"/>
<mx:ViewStack id="viewstack" />
</s:Application>
Should also be noted that you could always just extend ButtonBar in your custom component instead depending what you're trying to accomplish by creating that component.
You should move public var myViewstack:ViewStack field declaration into your component. Think about MXML components as ordinary classes according with OOP conceptions. So for your 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"
xmlns:comps="comps.*" minWidth="955" minHeight="600">
<comps:viewControl id="myControl" width="935" horizontalCenter="0" top="5" height="134" myViewstack="{lgViewStack}" />
<mx:ViewStack id="lgViewStack" width="935" height="474" left="10" verticalCenter="66">
<s:NavigatorContent label="View 1" width="100%" height="100%" id="view1">
<s:Panel id="firstPanel" title="First Panel" width="250" height="200" horizontalCenter="0" verticalCenter="0" >
<s:Label id="testSource" text="Text to copy" />
</s:Panel>
</s:NavigatorContent>
<s:NavigatorContent label="View 2" width="100%" height="100%" id="view2">
<s:Panel id="secondView" title="Second View" width="250" height="200" horizontalCenter="0" verticalCenter="0" >
</s:Panel>
</s:NavigatorContent>
</mx:ViewStack>
</s:Application>
and
<?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="400" height="300">
<fx:Script>
<![CDATA[
[Bindable]
public var myViewstack:ViewStack;
]]>
</fx:Script>
<s:ButtonBar x="170" y="10" width="58" dataProvider="{myViewStack}"/>
</s:Group>
Related
I need a Clarification, regarding Flex.
what happens if i rename namesapace in
<mx:Module 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%">
Replacing as
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:dx="library://ns.adobe.com/flex/spark"
xmlns:ot="library://ns.adobe.com/flex/mx" width="100%" height="100%">
Need to Know why and what happens if i Do like this...
Thankxx in Advance!!
Quoting by an example, this is how things will change:
BEFORE
<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" width="100%" height="100%">
<mx:ViewStack id="mainStack" top="0" bottom="0"
width="100%" height="100%"
>
<mx:VBox>
<s:CheckBox selected="true"/>
</mx:VBox>
</mx:ViewStack>
AFTER
<ddd:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:ddd="library://ns.adobe.com/flex/spark"
xmlns:yyy="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<yyy:ViewStack id="mainStack" top="0" bottom="0"
width="100%" height="100%"
>
<yyy:VBox>
<ddd:CheckBox selected="true"/>
</yyy:VBox>
</yyy:ViewStack>
I want to draw some lines, they must not goes across the panel borders, I don't know how to do that...
Line goes over the panel borders, but I want that line goes into panel and then i would can zoom it.
Here is my 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="955" minHeight="600"
>
<fx:Script>
<![CDATA[
import mx.graphics.SolidColorStroke;
import spark.primitives.Line;
private function drawLine():void
{
var myShape:Shape = new Shape();
myShape = new Shape() ;
myShape.graphics.lineStyle(2, 0x00008B, .75);
myShape.graphics.moveTo(500, 500);
myShape.graphics.lineTo(25, 45);
spr.addChild(myShape);
}
]]>
</fx:Script>
<mx:Button label="Click" click="drawLine()" />
<s:Panel y="30" width="400" height="250" layout="vertical" title="Panel" borderColor="#008040" fontFamily="Arial" fontWeight="bold" fontSize="13">
<mx:Text text="Drawing.." fontWeight="bold"/>
<s:SpriteVisualElement width="500" height="500" id="spr"/>
</s:Panel>
</s:Application>
One simple way is to put the contents in a Group and set clipAndEnableScrolling.
<s:Panel>
<s:VGroup height="100%" width="100%" clipAndEnableScrolling="true">
<mx:Text text="Drawing.." fontWeight="bold"/>
<s:SpriteVisualElement width="500" height="500" id="spr"/>
</s:VGroup>
</s:Panel>
I'm writing a very simple flex application with mxml. I have many buttons, when I click one of them, I hope its value changes to World.
My code is:
<?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>
</fx:Declarations>
<fx:Script>
<![CDATA[
private function hello():void {
this.label = "World!";
}
]]>
</fx:Script>
<mx:HBox>
<s:Button click="hello()" label="Hello" />
<s:Button click="hello()" label="Hello" />
<s:Button click="hello()" label="Hello" />
<s:Button click="hello()" label="Hello" />
<s:Button click="hello()" label="Hello" />
</mx:HBox>
</s:Application>
Which is incorrect since this.label = "World!" can't be compiled that this.label is not found.
How to let the this reference to the button I clicked, or how to implement this ?
Try below code this 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>
</fx:Declarations>
<fx:Script>
<![CDATA[
private function hello(event:MouseEvent):void {
event.currentTarget.label = "World!";
}
]]>
</fx:Script>
<mx:HBox>
<s:Button click="hello(event)" label="Hello" />
<s:Button click="hello(event)" label="Hello" />
<s:Button click="hello(event)" label="Hello" />
<s:Button click="hello(event)" label="Hello" />
<s:Button click="hello(event)" label="Hello" />
</mx:HBox>
</s: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"
width="1501" height="960" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
protected function c_clickHandler(event:MouseEvent):void
{
viewstack1.selectedIndex = 2;
}
]]>
</fx:Script>
<fx:DesignLayer>
</fx:DesignLayer>
<mx:ViewStack id="viewstack1" x="357" y="256" width="624" height="200">
<s:NavigatorContent width="100%" height="100%" label="configuration"
backgroundColor="#F7C2C2">
<s:Button x="261" y="72" id="c" click="c_clickHandler(event)" label="new config"/>
<s:TextInput x="240" y="25"/>
</s:NavigatorContent>
<s:NavigatorContent width="100%" height="100%" label="system" backgroundColor="#F45F5F">
<s:TextArea x="218" y="39" height="35"/>
</s:NavigatorContent>
</mx:ViewStack>
<s:ButtonBar x="531" y="224" dataProvider="{viewstack1}"/>
</s:Application>
i have a text inputbox in a config tab. when a user gives a input and click the "set new config" button it will go to a syatem where there will be a textbox.In thet textbox the prev input will be shown.
how to do this?
can u provide me some codes?
Thanks
use binding
Text input in your config tab
`<s:TextInput x="240" y="25" id="_txt"/>
and set text in another tab change to
<s:TextArea text="{_txt.text}"/>
`
How do I wordwrap in a spark list w/ an itemrenderer? This posting at http://blog.flexexamples.com/2009/10/27/setting-word-wrapping-on-a-spark-list-control-in-flex-4/ works 100% but when I try to set a separate item renderer, I can't get the word wrapping...instead, I get an ugly horizontal scroll bar. HEre is my mxml:
<?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" width="100%"
height="100%"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:List id="lst"
useVirtualLayout="false"
width="200"
horizontalCenter="0" verticalCenter="0"
itemRenderer="testRenderer"
>
<s:dataProvider>
<s:ArrayList>
<fx:Object />
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:Application>
here is my testRenderer ------------>
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer name="testRenderer"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true"
creationComplete="makeLabel(event);">
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<fx:Script>
<![CDATA[
protected function makeLabel(evt:Event):void {
test.text = "this is just a really long line of text that I want to wrap and just look normal";
}
]]>
</fx:Script>
<s:HGroup>
<s:Label id="test" color="black" />
</s:HGroup>
</s:ItemRenderer>
try giving your Label (id="test") a width