I want to have the title of my application to be freezed, that is, even if I scroll down the page, I want the label name to be in focus, at the top always.. Is that possible?
Now if I scroll down , the screen name disappears. Instead, can it be freezed like freezing columns or rows in excel?
Run this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:VBox width="100%" height="100%">
<mx:Label text="My Label!" />
<mx:VBox width="100%" height="100%" minWidth="0" minHeight="0">
<mx:CheckBox label="1" />
<mx:CheckBox label="2" />
<mx:CheckBox label="3" />
<mx:CheckBox label="4" />
<mx:CheckBox label="5" />
<mx:CheckBox label="6" />
<mx:CheckBox label="7" />
<mx:CheckBox label="8" />
<mx:CheckBox label="9" />
<mx:CheckBox label="10" />
<mx:CheckBox label="11" />
<mx:CheckBox label="12" />
<mx:CheckBox label="13" />
<mx:CheckBox label="14" />
<mx:CheckBox label="15" />
<mx:CheckBox label="16" />
<mx:CheckBox label="17" />
<mx:CheckBox label="18" />
<mx:CheckBox label="19" />
</mx:VBox>
<mx:Label text="Bottom label here!" />
</mx:VBox>
</mx:Application>
Set minWidth=0 and minHeight=0 so Vbox is not going to expand.
Have you tried ApplicationControlBar - use it with dock set to true.
Quoting from the linked page:
Docked mode: The bar is always at the top of the application's drawing area and becomes part of the application chrome. Any application-level scroll bars don't apply to the component, so that it always remains at the top of the visible area, and the bar expands to fill the width of the application. To create a docked bar, set the value of the dock property to true.
I don't know if I understand you correct, but I would make it the following way:
<mx:VBox width="100%" height="100%" verticalScrollPolicy="off">
<mx:Label label="My Title" />
<mx:VBox name="content">
...
</mx:VBox>
</mx:VBox>
So you'll be scrolling just the second VBox and the outer VBox with the title keeps always on top.
Related
I have a custom component that has an background image.
But when you generate this component by an ItemRenderer in a List, the background image is gone.
What am I doing wrong?
Here is an image. The first element is not generated in a list and has a background image. The other three are part of a List and have no background image.
Here is the code of the MXML of the List
<mx:VBox>
<solutionItems:displaySolutionItem /> <!-- This element shows the background image -->
<mx:List selectable="false"
useRollOver="false"
id="listControllers"
backgroundAlpha="1"
dataProvider="{controllers}" >
<mx:itemRenderer>
<fx:Component>
<solutionItems:displaySolutionItem /> <!-- These elements have nog background image -->
</fx:Component>
</mx:itemRenderer>
</mx:List>
</mx:VBox>
And here is the code of <solutionItems:displaySolutionItem />
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundImage="{itemBackGround}"
backgroundSize="100%">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/Components/ContainerBackgrounds/BoxBg.png", scaleGridLeft="5", scaleGridRight="50", scaleGridTop="5", scaleGridBottom="50")]
private var itemBackGround:Class;
]]>
</mx:Script>
<mx:VBox
paddingBottom="10"
paddingLeft="10"
paddingRight="10"
paddingTop="10">
<mx:CheckBox id="chbControllerItem" label="NSL-4601" styleName="titleRed" />
<mx:HBox>
<mx:Image width="67" height="50" id="loader1" source="#Embed(source='assets/Components/ContainerBackgrounds/BoxBg.png')"/>
<mx:HBox>
<mx:VBox>
<mx:Label text="Cube size" styleName="formLabel" height="12" />
<mx:Label text="Cube config" styleName="formLabel" height="12" />
<mx:Label text="Display res" styleName="formLabel" height="12" />
<mx:Label text="DPI" styleName="formLabel" height="12" />
<mx:Label text="Price" styleName="formLabel" height="12" />
</mx:VBox>
<mx:Box>
<mx:Label text="50''" height="12" />
<mx:Text text="2x3 (1224mm x 3264mm)" height="12" />
<mx:Label text="WXGA (1360x768)" height="12" />
<mx:Label text="72 dpi" height="12" />
<mx:Label text="€ 101.000,00" height="12" />
</mx:Box>
</mx:HBox>
</mx:HBox>
</mx:VBox>
</mx:Canvas>
It is probably something small, but I can not find it.
The following will get around the problem:
Remove the backgroundImage="{itemBackGround}" from the Canvas element of the itemRenderer
Add the following before the VBox in the itemRenderer class. I tested it out and it works fine:
<mx:Canvas width="100%" height="100%" backgroundImage="{itemBackGround}" backgroundSize="100%"/>
If your find a better way, sure update your question to let us know,
Brian
Have you tried setting the alpha, or backgroundAlpha properties on your List or perhaps in the itemRenderer?
I'm guessing that the List is either drawing something on top of the background, or preventing the background from being drawn. You'd have to step through code to know for sure, though.
I didn't try this, but look like
component is not creating multiple instance/copies of image for each renderer
possible solution may be is, load image in any Singleton/Constant Class like in Model and NOT in component/list and use Model's attribute reference in component/list i.e. one copy for all renderer.
Hopes this works
is there a common way to disable a tab of a spark tabbar component in flex 4? with the mx tabnavigator component you can just disable the content corresponding to the tab and the tab is also disabled then. but doing this with the spark tab bar component disables just the content not the tab.
here is my simple example:
<mx:TabNavigator x="122" y="155" width="200" height="200">
<s:NavigatorContent label="Tab 1" width="100%" height="100%">
<s:Label text="Label1"/>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 2" width="100%" height="100%" enabled="false">
<s:Label text="Label2"/>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 3" width="100%" height="100%">
</s:NavigatorContent>
</mx:TabNavigator>
<s:TabBar x="368.7" y="100.35" dataProvider="{viewstack1}" />
<mx:ViewStack x="364" y="133" id="viewstack1" width="200" height="200">
<s:NavigatorContent label="Tab 1" width="100%" height="100%">
<s:Label text="Label1"/>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 2" width="100%" height="100%" enabled="false">
<s:Label text="Label2"/>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 3" width="100%" height="100%">
<s:Label text="Label3" x="1" y="0"/>
</s:NavigatorContent>
</mx:ViewStack>
many thx,
florian
Addendum:
Literally two minutes after I got back to actually working, I found an "elegant" solution using a skin.
If you apply a custom skinClass to your tab bar you can bind the tab.enabled property just like you'd expect/want.
<fx:Script>
<![CDATA[
[Bindable] private var tab2IsReady:Boolean = false;
private function checkCriteria():void{
tab2IsReady = someOtherThing.isFinished;//Boolean
}
]]>
</fx:Script>
<s:TabBar id="theTabBar"
dataProvider="{viewStack}"
skinClass="skins.CustomTabBarSkin"/>
<mx:ViewStack id="viewStack">
<s:NavigatorContent label="Tab index 0">
<!-- Your first tab's content -->
</s:NavigatorContent>
<s:NavigatorContent label="Tab index 1" enabled="{tab2IsReady}">
<!-- Your second tab's content -->
</s:NavigatorContent>
</mx:ViewStack>
When you type "skinClass" use the auto complete to generate (in FlashBuilder ~4.5+???) the custom skin (named whatever you want).
The code will appear like below (I left out the Script tag).
<?xml version="1.0" encoding="utf-8"?>
<!-- skins/CustomTabBarSkin.mxml
...
Adobe's copyright & doc comments
...
-->
<s:Skin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* #copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.TabBar")]
]]>
</fx:Metadata>
<!-- optional Script tag here -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<!--- #copy spark.components.SkinnableDataContainer#dataGroup -->
<s:DataGroup id="dataGroup" width="100%" height="100%">
<s:layout>
<s:ButtonBarHorizontalLayout gap="-1"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" />
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
</s:Skin>
<!-- End skins/CustomTabBarSkin.mxml -->
Change:
<fx:Component>
<s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" />
</fx:Component>
To:
<fx:Component>
<s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin"
enabled="{data.enabled}" />
</fx:Component>
Then any <s:NavigatorContent/> in the ViewStack with its enabled property set or bound will do exactly what you expect
(be enabled when true, & disabled when false).
One solution to try would be to use mx:VBox components instead of s:NavigatorContent.
From http://blog.flexexamples.com/2007/08/25/enabling-and-disabling-specific-tabs-in-a-tabbar-control/ :
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/25/enabling-and-disabling-specific-tabs-in-a-tabbar-control/ -->
<mx:Application name="TabBar_enabled_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ApplicationControlBar dock="true">
<mx:CheckBox id="tabBarEnabled"
label="TabBar.enabled"
selected="true"
width="25%" />
<mx:CheckBox id="tab1Enabled"
label="Tab1.enabled"
selected="true"
width="25%" />
<mx:CheckBox id="tab2Enabled"
label="Tab2.enabled"
selected="true"
width="25%" />
<mx:CheckBox id="tab3Enabled"
label="Tab3.enabled"
selected="true"
width="25%" />
</mx:ApplicationControlBar>
<mx:VBox verticalGap="0">
<mx:TabBar id="tabBar"
width="400"
dataProvider="{viewStack}"
enabled="{tabBarEnabled.selected}" />
<mx:ViewStack id="viewStack" width="400" height="100">
<mx:VBox id="tab1"
label="Tab1"
backgroundColor="haloGreen"
enabled="{tab1Enabled.selected}">
<mx:Label text="Label 1" />
</mx:VBox>
<mx:VBox id="tab2"
label="Tab2"
backgroundColor="haloBlue"
enabled="{tab2Enabled.selected}">
<mx:Label text="Label 2" />
</mx:VBox>
<mx:VBox id="tab3"
label="Tab3"
backgroundColor="haloOrange"
enabled="{tab3Enabled.selected}">
<mx:Label text="Label 3" />
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
</mx:Application>
For those who want an working answer for Flex 4.5 (probably Flex 4 also). I finally figured out a solution. It feels like a hack to me, but Adobe's not answering the call and it's working for me. Here's a simplified example.
<!-- component that has the the TabBar in it... -->
<fx:Script>
<![CDATA[
//imports here
import mx.core.UIComponent;
//imports
private function setTabEnabled(index:int,enabled:Boolean):void{
var theTab:UIComponent = theTabBar.dataGroup.getElementAt(index) as UIComponent;
if(theTab){theTab.enabled = enabled;}
}
]]>
</fx:Script>
<s:TabBar id="theTabBar"
dataProvider="{viewStack}"/>
<mx:ViewStack id="viewStack">
<s:NavigatorContent label="0th Tab">
<!-- ...Content -->
</s:NavigatorContent>
<s:NavigatorContent label="1st Tab">
<!-- ...Content -->
</s:NavigatorContent>
<s:NavigatorContent label="2nd Tab">
<!-- ...Content -->
</s:NavigatorContent>
</mx:ViewStack>
<!-- rest of the component that has the the TabBar in it... -->
Then you just call setTabEnabled(theTabIndex,trueFalse) in an event handler related to whatever decides why the tab is, or isn't, enabled.
I should extend the TabBar to support this, but I've already spent enough time trying to figure it out.
Happy Coding =D
I have a viewstack container w/ 3 views: red, black, and blue. How can I completely hide the black & not include it?
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
horizontalCenter="0" verticalCenter="0"
>
<mx:LinkBar dataProvider="{myVS}" borderVisible="false" color="blue" disabledColor="black" />
<mx:ViewStack id="myVS" borderVisible="false" width="100%" height="100%" >
<mx:VBox id="red" label="click red" horizontalAlign="center" verticalAlign="middle" >
<s:Label id="r1" color="red" fontSize="25" text="This is the red label" />
</mx:VBox>
<mx:VBox id="black" label="click black" horizontalAlign="center" verticalAlign="middle" >
<s:Label id="r2" color="black" fontSize="25" text="This is the black label" />
</mx:VBox>
<mx:VBox id="blue" label="click blue" horizontalAlign="center" verticalAlign="middle" >
<s:Label id="r3" color="blue" fontSize="25" text="This is the blue label" />
</mx:VBox>
</mx:ViewStack>
</s:Application>
I fear I may be missing the intent of your question. A ViewStack component is used to show multiple views "stacked" on top of each other, with only view being displayed at once. It includes no built in navigation like a TabNavigator might. If you want "completely hide" the black view, just comment it out before compiling the code and therefore it will never be shown.
I see in your code sample that you're using a link bar with the ViewStack as a dataProvider, so maybe you meant to ask how to keep the black view out o the linkBar. Just perform some ActionScript magic to create a custom dataProvider:
var dataProvider : ArrayCollection = new ArrayCollection([
{label:"click Red"},
{label:"click blue"}
]);
And specify that dataPRovider as the dataProvider source for your linkBar:
<mx:LinkBar dataProvider="{dataProvider}" borderVisible="false" color="blue" disabledColor="black" />
I think the quick and dirtiest way is to just remove it:
myVS.removeElement(black);
But, I think I would use view states instead. This lets you get it back later without figuring out how/where to put it back. Define your states:
<s:states>
<s:State name="all" />
<s:State name="notBlack" />
</s:states>
And in your "black" VBox, exclude it from the "notBlack" state:
<mx:VBox id="black" excludeFrom="notBlack" ... />
Then, when you want to remove it, you can do so by setting currentState
<s:Button click="currentState='notBlack'" label="remove black" />
I want to constrain the height of a flex component to the height of the browser viewport.
The component's children are populated from a database table using a repeater, and are basic checkboxes. There are enough of them that the flex app ends up being about twice the height of the screen, which means some of the rest of the layout goes crappy on me. How can I force the component that contains these to limit itself to the size of the viewport?
Setting the components height to 100% should be all you need.
in mxml:
<mx:Vbox height="100% />
in actionscript:
myVBox.percentHeight = 100;
if the contents of the component take up more space than available on screen the component should provide its own scroll bars keeping the component the same height. If this is not the case it would help if you posted code.
Set minHeight and minWidth for your container to 0:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:HBox width="100%" height="100%">
<mx:HBox width="20%" height="100%">
<mx:Label text="Left Panel"/>
</mx:HBox>
<mx:VBox width="100%" height="100%" minWidth="0" minHeight="0">
<mx:CheckBox label="1" />
<mx:CheckBox label="2" />
<mx:CheckBox label="3" />
<mx:CheckBox label="4" />
<mx:CheckBox label="5" />
<mx:CheckBox label="6" />
<mx:CheckBox label="7" />
<mx:CheckBox label="8" />
<mx:CheckBox label="9" />
<mx:CheckBox label="10" />
<mx:CheckBox label="11" />
<mx:CheckBox label="12" />
<mx:CheckBox label="13" />
<mx:CheckBox label="14" />
<mx:CheckBox label="15" />
<mx:CheckBox label="16" />
<mx:CheckBox label="17" />
<mx:CheckBox label="18" />
<mx:CheckBox label="19" />
<mx:CheckBox label="20" />
</mx:VBox>
<mx:HBox width="20%" height="100%">
<mx:Label text="Right Panel"/>
</mx:HBox>
</mx:HBox>
</mx:Application>
If I understand your question you want to get the size of the client area of the browser window which is the same as the size of your Flex app.
So, just use Application.application.width and Application.application.height
You should listen to the event that changes the app size and make a comparison like
if (component.width > Application.application.width)
component.width = Application.application.width
The event would probably be stage.addEventListener(Event.RESIZE, onStageResize)
You can set you component to the height of the viewport
say:
ActionScript:
component.height = viewport.height;
MXML:
<mx:component height={viewport.height} />
We're trying to do this:
<rollOverEffect>
<AnimateProperty property="scaleX" toValue="{originalWidth + scaleFactor}" />
</rollOverEffect>
However, it seems as though the effects toValue is always NaN. If I set the value to a constant the effect works. Isn't it possible to use databinding for effects like this?
Addendum:
Both originalWidth and scaleFactor is bindable. I managed to get this working by moving the effect out of the rollOverEffect-tag, giving it and id and then binding to it like so:
<AnimateProperty id="scaleEffect" property="scaleX" toValue="{originalWidth + scaleFactor}" />
<MyComponent rollOverEffect="{scaleEffect}" />
Any idea why this works and the former code doesn't? The latter snippet creates a second, uneccessary binding and isn't as readable, but at least it works.
Addendum:
The following code highlights the problem. No matter what the slider is set to, the value of the angleTo property of the effects will always be set to whatever the sliders initial value is set to.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:VBox horizontalCenter="0" verticalCenter="0">
<mx:Label text="Rotation (mouse over on canvas triggers effect):" />
<mx:HSlider id="slider" width="200" minimum="0" maximum="360" value="90" />
<mx:Spacer height="50" />
<mx:Canvas borderStyle="solid" borderThickness="1" borderColor="#ff0000" backgroundColor="#0000ff" width="200" height="200">
<mx:rollOverEffect>
<mx:Rotate angleTo="{slider.value}" duration="500" />
</mx:rollOverEffect>
<mx:rollOutEffect>
<mx:Rotate angleTo="{-slider.value}" duration="500" />
</mx:rollOutEffect>
</mx:Canvas>
</mx:VBox>
</mx:Application>
Compare the with the following code which actually produces the expected result:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Rotate id="rollOver" angleTo="{slider.value}" duration="500" />
<mx:Rotate id="rollOut" angleTo="{-slider.value}" duration="500" />
<mx:VBox horizontalCenter="0" verticalCenter="0">
<mx:Label text="Rotation (mouse over on canvas triggers effect):" />
<mx:HSlider id="slider" width="200" minimum="0" maximum="360" value="90" />
<mx:Spacer height="50" />
<mx:Canvas rollOverEffect="{rollOver}" rollOutEffect="{rollOut}" borderStyle="solid" borderThickness="1" borderColor="#ff0000" backgroundColor="#0000ff" width="200" height="200" />
</mx:VBox>
</mx:Application>
So essentially what the question is, why doesn't the binding work in the first example? There are no errors or warnings to tell you this and neither can I find anything in the documentation about this, could it be a bug?
You need to show us more code. Can you give the following code a shot? Does this work?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!-- Simple exemplo to demonstrate the AnimateProperty effect. -->
<mx:Sequence id="animateScaleXUpDown" >
<mx:AnimateProperty property="scaleX" fromValue="{ns.value}" toValue="{ns.minimum}" duration="1000" />
<mx:AnimateProperty property="scaleX" fromValue="1.5" toValue="1" duration="1000" />
</mx:Sequence>
<mx:Panel title="AnimateProperty Effect Example" width="75%" height="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Text width="100%" color="blue"
text="Click on the image to use the AnimateProperty effect with the scaleX property."/>
<mx:Image id="flex" source="http://stackoverflow.com/content/img/stackoverflow-logo.png"
mouseDownEffect="{animateScaleXUpDown}"/>
<mx:NumericStepper id="ns" width="62" value=".5" minimum="1" maximum="3" stepSize="0.5" enabled="true"/>
</mx:Panel>
</mx:Application>