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>
Related
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 have four views:
1.SplitView (main view)
2.SplitViewHomeView(root Panel)
3.SimpleView(Right panel)
4.Details(child of Right Panel View).
I am trying to accomplish the split view as in Ipad in adobe flex mobile.But unable to connect the root panel to right panel...Can any one suggest the path to me.My Code is below
Split View
**
<?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">
<s:ViewNavigator id="MainView" left="0" width="300" height="748" firstView="views.SplitViewHomeView"/>
<s:ViewNavigator id="MainView1" left="301" width="732" height="748" firstView="views.SimpleView"/>
</s:Application>
**
SplitViewHomeView
**
<?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="Root View"
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}">
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer
label="{data.Name} {data.Founder}"
messageField="title"/>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:View>
**
Simple View
**
<?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="Home View"
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}"
change="navigator.pushView(Details, list.selectedItem)">
<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer
label="{data.Name} {data.Founder}"
messageField="title"/>
</fx:Component>
</s:itemRenderer>
</s:List>
**
DetailsView
**
<?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="Details">
<s:HGroup verticalAlign="middle" gap="12">
<s:Image source="assets/pics/{data.picture}"/>
<s:VGroup>
</s:VGroup>
</s:HGroup>
<s:navigationContent>
<s:Button label="Back" click="navigator.popToFirstView()"/>
</s:navigationContent>
</s:View>
**
Check out the open source eskimo library
Download the zip and look for the SplitViewApplication.as or SplitView.as
These components will do exactly what you are looking for.
Cheers
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>
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
I'm building an application using flex 4.
Using <mx:DataGrid> to display a table.
I would like to add a <s:GlowFilter> to a DataGridColumn.
how can I do so?
thanks!
You need to create an item renderer with the GlowFilter built in. Here's an example:
My 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">
<fx:Declarations>
<s:ArrayCollection id="dataProvider">
<fx:Object name="Red" color="0xFF0000" />
<fx:Object name="Green" color="0x00FF00" />
<fx:Object name="Blue" color="0x0000FF" />
</s:ArrayCollection>
</fx:Declarations>
<mx:DataGrid itemRenderer="GlowingRenderer" dataProvider="{dataProvider}" />
</s:Application>
...and here's GlowingRenderer.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true" creationComplete="trace(this.data)">
<fx:Script>
<![CDATA[
import spark.filters.GlowFilter;
]]>
</fx:Script>
<s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{dataGridListData.label}" filters="{[new GlowFilter(this.data.color)]}" />
</s:MXDataGridItemRenderer>
Doesn't look too pretty, but does the job :)
simon