I am trying to add an Icon to NavigatorContent, but for some reason it is not working.
My code is below:
<s:TabBar id="tabs" dataProvider="{vs}"/>
<mx:ViewStack id="vs" width="100%" height="100%">
<s:NavigatorContent label="Consultant" width="100%" height="100%" icon="#Embed(source='presentation/skin/searchButton.png')">
<presentation:GridView width="100%" height="100%" />
<presentation:Form id="myForm" width=" 100%" height="40%" visible="{myForm.model.visibility}" includeInLayout="{myForm.model.visibility}"/>
</s:NavigatorContent>
</mx:ViewStack>
My aim is to gain something like this:
http://it-skills.su/sosamples/webspark46/navigatoricon/index.html
The only reason that I see - maybe path to the icon file is incorrect. As I remember in your case with this path your file must exist at "your_source_path/presentation/skin/searchButton.png".
Related
I have two tilelists in my mxml application. The items (image and a label) get rendered by an itemrenderer. The functionality I want to achieve: drag image from tilelist #1 and drop it on tilelist #2 (and then a httpservice with sql query will be launched).
How would I tackle this problem? (high level info would suffice).
The main issue I have is that I don't know how to call methods from the main to my itemrenderer. I would like to code the d&d functionality within the renderer but I have no clue how to access watchlist #2 from within the renderer.
Relevant code in main.mxml:
<s:Panel id="panel" width="100%" height="100%" title="Watchlist">
<s:layout>
<s:VerticalLayout paddingBottom="5" paddingLeft="20"
paddingRight="20" paddingTop="5"/>
</s:layout>
<s:Label width="20%" fontSize="17" fontWeight="bold" text="Your watched movies"/>
<mx:TileList id="myWatchedList_tile" height="360" borderVisible="false" width="80%"
columnCount="5" columnWidth="200"
itemRenderer="components.TileListItemRenderer" rowCount="1" rowHeight="360"/>
<s:Label width="20%" fontSize="17" fontWeight="bold" text="Your to watch movies"/>
<mx:TileList id="myToWatchList_tile" height="360" borderVisible="false" width="80%"
columnCount="5" columnWidth="200"
itemRenderer="components.TileListItemRenderer" rowCount="1" rowHeight="360" />
</s:Panel>
The itemrenderer:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
borderVisible="false" horizontalAlign="center" verticalAlign="middle"
xmlns:components="components.*">
<mx:Image source="{data.poster_url}" />
<mx:Label text="{data.movie_title}" height="20" />
</mx:VBox>
You can access methods outside of your item renderer using the outerDocument object. Make sure they are (scope)public methods.
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.edu.html
Alternative solution might be to use spark lists instead (with a TileLayout) - then you can easily use drag+drop between lists: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7cfd.html
..and launch service in response to 'drop' event (event will have reference to dropped image)
In my air application, i have displayed text content in either in html container or textarea container. whenever anyone select this content, he/she can easily copy the content.
I want to restrict my text from copy. Any content of the my application, should not be copy by any user..
How can I do this?
Try setting the selectable property of textarea.
[Bindable]
private var htmlT:String;
htmlT = "<b>name</b>"
<mx:Text htmlText="{htmlT}" selectable="false" />
i tried but no other properties for ban selecting in html container.
I dont know this is right manner. you can try this code.
<s:Group width="100%" height="100%">
<s:HGroup width="100%" height="100%" >
<mx:HTML location="http://www.google.com" width="100%" height="100%"/>
</s:HGroup>
<mx:HBox width="100%" height="100%" backgroundColor="white" backgroundAlpha="0.01"/>
</s:Group>
Apologies for the rookie Q - trying to learn Flex/Actionscript and just having some basic layout issues. (Using FlashBuilder 4, with Flex 4.5 HERO SDK)
I have a TitleWindow, and have embedded a mx:TabNavigator within it.
I have then placed a list within the first tab and set its width/height to 100%
However, there appears to be a gap between the top of the list, and the bottom of the tab menus.
Why is this happening and what is the best way to ensure the top of the list aligns up flush with the top of the VBox?
<s:TitleWindow title="Dekho Resource Center"
id="titleWindow"
close="cancel();"
width="375"
height="500"
backgroundAlpha="0"
cornerRadius="5">
<mx:TabNavigator borderStyle="solid" left="0" top="0" width="100%" height="100%" backgroundAlpha="0" >
<mx:VBox label="Blog Posts"
width="100%"
height="100%">
<s:List labelField="title" id="theList" width="100%" height="100%"
contentBackgroundAlpha="0.7" rollOverColor="#F58B57" selectionColor="#FF7227"
doubleClickEnabled="true" doubleClick="theList_doubleClickHandler(event)">
<mx:AsyncListView list="{getDataResult.lastResult}"/>
</s:List>
</mx:VBox>
<mx:VBox label="Search"
width="100%"
height="100%">
</mx:VBox>
</mx:TabNavigator>
Remove the padding from the TabNavigator:
<mx:TabNavigator paddingTop="0"
paddingLeft="0"
paddingRight="0"
paddingBottom="0">
I am using a WindowShader in my website. every thing is working fine. but for somereason i am unable to display any background for my "home_feeds" VBox. If i add components on it, i can see them. But they backgound is not working. Even if i remove every thing from the Canvas(with home_feeds) i still dont see any background. But if i remove the comments from my mx:List.. i can see the background.
my code is given below
<mx:VBox right="35" paddingRight="10" verticalAlign="top" horizontalAlign="right">
<containers:WindowShade id="shade" opened="false" openIcon="{null}" closeIcon="{null}" paddingTop="0"
headerLocation="bottom" visible="true">
<containers:headerRenderer>
<mx:Component>
<flexlib:CanvasButton width="100%" height="20" skin="mx.skins.ProgrammaticSkin">
<mx:Script>
<![CDATA[
import flexlib.containers.WindowShade;
]]>
</mx:Script>
<mx:Box width="100%" horizontalAlign="center">
<degrafa:Surface width="80">
<degrafa:GeometryGroup>
<geometry:EllipticalArc closureType="pie"
arc="180" startAngle="-180" width="80" height="35" y="-18">
<geometry:fill>
<paint:GradientFill angle="90">
<paint:GradientStop color="#920000" />
<paint:GradientStop color="#D31F1F" />
</paint:GradientFill>
</geometry:fill>
</geometry:EllipticalArc>
<geometry:Polygon>
<geometry:data>40,5 35,13 45,13</geometry:data>
<geometry:stroke>
<paint:SolidStroke color="#333333" alpha="{WindowShade(parent).opened ? 1 : 0}" weight="1" />
</geometry:stroke>
<geometry:fill>
<paint:SolidFill color="#ffffff" alpha="{WindowShade(parent).opened ? 1 : 0}" />
</geometry:fill>
</geometry:Polygon>
<geometry:Polygon>
<geometry:data>40,13 35,5 45,5</geometry:data>
<geometry:stroke>
<paint:SolidStroke color="#333333" alpha="{WindowShade(parent).opened ? 0 : 1}" weight="1" />
</geometry:stroke>
<geometry:fill>
<paint:SolidFill color="#ffffff" alpha="{WindowShade(parent).opened ? 0 : 1}" />
</geometry:fill>
</geometry:Polygon>
</degrafa:GeometryGroup>
</degrafa:Surface>
</mx:Box>
</flexlib:CanvasButton>
</mx:Component>
</containers:headerRenderer>
<mx:Canvas horizontalScrollPolicy="off" width="200" height="350" >
<!--mx:List id="home_feeds" height="100%" width="100%" itemRenderer="file_manager.list_item_template" doubleClickEnabled="true" /-->
<mx:VBox id="home_feeds"
width="100%"
backgroundAlpha="0.1"
left="10"
right="10">
</mx:VBox>
</mx:Canvas>
<containers:filters>
<mx:DropShadowFilter alpha=".3" angle="90" />
</containers:filters>
</containers:WindowShade>
</mx:VBox>
Kindly let me know what am i doing wrong here.... And how can i fix it. I want to use the VBox there.
Regards
Zeeshan
The size of a VBox without an explicit value for width would be zero if it doesn't have any children in it. Add some children (a Label for example) to see the background color. Increase background alpha from 0.1 to 0.5 or something to see it clearly.
If you mention explicit values for width and height (instead of percentages), you can see the background color even if it doesn't have any children.
set backgroundColor="#00ff00" (green) for the home_feeds VBox to differentiate VBox's background color from its parent's color.
I have the following application and I am trying to put a scrollbar somewhere inside the TabNavigator, preferably on the innermost Vbox, but the scrollbar always ends up on the Panel. Is there some kind of property which controls this? I thought height=100% would have controlled it but it doesn't seem to work.
Sample is here. You can view source on it:
VBox Sample
Here is the source anyway:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html">
<mx:Panel width="400" height="400">
<mx:TabNavigator width="100%" height="100%" creationPolicy="all">
<mx:VBox label="Tab 1" width="100%" height="100%">
<mx:ViewStack width="100%" height="100%">
<mx:VBox width="100%" height="100%">
<mx:Text width="100%" height="500" text="This box is taller than the Panel, but the scrollbar is on the window." />
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
</mx:TabNavigator>
</mx:Panel>
</mx:Application>
I found the proper solution is to set the minheight on the box to 0. When the minheight is not defined, the box will try to remain at it's measured height. By setting the minheight you are telling the box it is ok to shrink.
I've had this issue in the past, and the solution is a bit wonky, but hopefully this helps:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Panel width="400" height="400" verticalScrollPolicy="off">
<mx:TabNavigator width="100%" height="100%">
<mx:VBox id="container" label="Tab 1" width="100%" height="100%">
<mx:ViewStack width="100%" height="{container.height - 20}">
<mx:VBox width="100%" height="100%">
<mx:Text width="100%" height="500" text="This box is taller than the Panel, but the scrollbar is on the window." />
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
</mx:TabNavigator>
</mx:Panel>
</mx:Application>
Flex seems to calculate dynamic component dimensions properly about 98% of the time, but sometimes we need to "massage" the logic.
When you look at your layout hierarchy (as I've shown above), you just need to name the parent container (in this case Tab1) for the purposes of data binding, then use that container's height property for your sizing. (you also don't need to explicitly state verticalScrollPolicy="off" on the panel, but I use if for good measure :P)
Note that you may need to subtract a bit from the given height or your scrollbar will be below the component bounds ;)