I need a TileLayout rendering elements bottom to top and right to left. Something like this:
I managed to trick the TileLayout for the "right to left" part, by setting the 'layoutDirection' attribute of my container to "rtl", but there is no equivalence for the vertical rendering.
<s:Group layoutDirection="rtl">
<s:layout>
<s:TileLayout columnWidth="250" horizontalGap="8"/>
</s:layout>
<!-- etc -->
<s:Group id="fakeGroup3" layoutDirection="ltr"/>
<s:Group id="fakeGroup2" layoutDirection="ltr"/>
<s:Group id="fakeGroup1" layoutDirection="ltr"/>
</s:Group>
Is there a simple way to achieve this? Or should I override TileLayout?!?
You can anchor your Tile layout group to the bottom of the page:
<s:Group width="100%" height="100%" id="outermostLayoutContainer">
<s:Group layoutDirection="rtl" width="100%" bottom="0">
<s:layout>
<s:TileLayout columnWidth="250" horizontalGap="8"/>
</s:layout>
<!-- etc -->
<s:Group id="fakeGroup3" layoutDirection="ltr"/>
<s:Group id="fakeGroup2" layoutDirection="ltr"/>
<s:Group id="fakeGroup1" layoutDirection="ltr"/>
</s:Group>
</s:Group>
The inner Group with bottom="0" will push up towards the top of the screen based on its children.
Related
I have a Spark form with horizontal layout and I would like to reduce the top and bottom vertical padding.
Neighter using the paddingBottom/paddingTop on the HorizontalLayout nor using the paragraphSpaceAfter/paragraphSpaceBefore of the FormItem reduces the vertical space before and after the form.
<s:Form width="100%" height="50%" fontSize="15">
<s:layout>
<s:HorizontalLayout verticalAlign="middle" gap="3" paddingBottom="0" paddingTop="0">
</s:HorizontalLayout>
</s:layout>
<s:FormItem >
<mx:DateField id="selDateFrom" formatString="DD/MM/YYYY" selectedDate="{new Date()}">
</mx:DateField>
</s:FormItem>
<s:FormItem >
<mx:DateField id="selDateTo" formatString="DD/MM/YYYY" >
</mx:DateField>
</s:FormItem>
</s:Form>
Can someone help me?
Davide
I create a custom FormSkin like this one and it works:
<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">
[...]
<s:Group id="contentGroup" showErrorSkin="true" showErrorTip="true"
left="0" right="0" top="0" bottom="0">
<s:layout>
<s:FormLayout gap="7"/>
</s:layout>
</s:Group>
</s:Skin>
Thanks
I made a simple test Air application to try different approaches to masking or using hitArea to ignore mouse events over transparent areas of a PNG. Can't seem to find the right mix of things to make it work, nor could I find a succinct example on the web.
Clicking on the transparent areas of any of these methods don't result in the click getting handled by the background.
Here's the code I have:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
status="{clicked}">
<fx:Declarations>
<s:Image id="maskX" source="#Embed('mask1.png')" cacheAsBitmap="true"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable] public var clicked:String = "none";
protected function onClick(event:MouseEvent):void
{
clicked = event.currentTarget["id"] + "\t" + (new Date()).time;
}
]]>
</fx:Script>
<!-- Some sort of background so I can see transparency working. -->
<s:Group id="background" width="100%" height="100%" click="onClick(event)">
<s:Rect width="100%" height="100%">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="blue"/>
<s:GradientEntry color="white"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:Group>
<s:Group width="100%" height="100%">
<s:layout>
<s:TileLayout/>
</s:layout>
<!-- Simple attempt at having Flex respect the alpha in the PNG itself as transparent
with regard to clicks -->
<s:Group id="image1" click="onClick(event)" mouseEnabledWhereTransparent="false">
<s:Image source="#Embed('image1.png')" cacheAsBitmap="true"/>
</s:Group>
<!-- Use an explicit bitmap mask for the hitArea -->
<s:Group id="image2" click="onClick(event)" hitArea="{mask2}" mouseEnabledWhereTransparent="false">
<s:Image source="#Embed('image1.png')"/>
<s:Image id="mask2" source="#Embed('mask1.png')" cacheAsBitmap="true"/>
</s:Group>
<!-- Try using just the mask bitmap -->
<s:Group id="image3" click="onClick(event)" hitArea="{mask3}" mouseEnabledWhereTransparent="false">
<s:Image id="mask3" source="#Embed('mask1.png')" cacheAsBitmap="true"/>
</s:Group>
<!-- Specify the hitArea with alternate syntax -->
<s:Group id="image4" click="onClick(event)" mouseEnabledWhereTransparent="false">
<s:Image source="#Embed('image1.png')"/>
<s:hitArea>
<s:Image id="mask4" source="#Embed('mask1.png')" cacheAsBitmap="true"/>
</s:hitArea>
</s:Group>
</s:Group>
The image1 and mask1 files I've uploaded here:
image1 - http://img853.imageshack.us/img853/923/image1yj.png
mask1 - http://img715.imageshack.us/img715/3755/mask1.png
Actually, it is possible. Here is a sample:
http://www.webverwirklichung.com/en/blog/programming/flex/creating-hitarea-png-image-transparent-alpha-regions-flex
Flex doesn't respect the alpha channel of a PNG, but you can render out the visible content into a sprite, and use that as a mask on any DisplayObject. Using this approach, only the visible area of the ping will cause mouse events, and it should respect all opacity. If you are layering things, you might hit a few issues.
Just make sure you use the alpha channel for masking content, not a specific color channel.
How can Application's ControlBar be moved to its bottom in Flex 4.5 ?
The Adobe doc says only:
By default, the ApplicationSkin class defines the control bar area to
appear at the top of the content area of the Application container
with a grey background. Create a custom skin to change the default
appearance of the control bar.
So I look at spark.skins.spark.ApplicationSkin and there is a controlBarGroup (does it hold the ControlBar contents?), but I don't know how to move it from top to the bottom.
First thing you have to do is create a custom skin class. In FlashBuilder (FB) there's an option to create one automatically, but in essence it's just a class like any other.
In FB, right-click somewhere in your project and select 'New > MXML Skin'
Then fill in the wizard form as follows:
Otherwise just create a new .mxml file and copy/paste the code from spark.skins.spark.ApplicationSkin into it.
Then in your application assign the skin class you've just created:
<s:Application ... skinClass="skins.MyApplicationSkin" />
Now let's edit your newly created skin class. This is the part that is of interest to you (I'll cut out some pieces to make it clearer):
<s:Group left="0" right="0" top="0" bottom="0">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<s:Group id="topGroup" minWidth="0" minHeight="0"
includeIn="normalWithControlBar, disabledWithControlBar" >
<!-- some graphic elements here -->
<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" ...>
<s:layout>
<s:HorizontalLayout ... />
</s:layout>
</s:Group>
</s:Group>
<s:Group id="contentGroup" width="100%" height="100%" ... />
</s:Group>
Almost there. Now all we need to do, is move that 'topGroup' beneath the 'contentGroup'. 'topGroup' contains some graphics + the controlBarGroup. 'contentGroup' is the area where all components will be inserted that you but in you application .mxml file.
<s:Group left="0" right="0" top="0" bottom="0">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>
<s:Group id="contentGroup" width="100%" height="100%" ... />
<s:Group id="topGroup" minWidth="0" minHeight="0"
includeIn="normalWithControlBar, disabledWithControlBar" >
<!-- some graphic elements here -->
<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" ...>
<s:layout>
<s:HorizontalLayout ... />
</s:layout>
</s:Group>
</s:Group>
</s:Group>
You could try moving the control bar group under the content group and it should behave as expected, especially if you look at the parent group's layout(vertical).
If you would like to exercise even more control over it, override the partAdded method.
I know what i am about to ask may be all too simple but i have been unable to find a solution to my problem.
I am developing an AIR app. I have a custom skin for windowedapplication of spark components. In that skin i have added a bitmapimage to set a background for the windowedapplication.
Also, i have a custom component called 'header', what it does is draw a few table headers.
Now, if i add header as <ui:header width="100%" and height="40"\>in the skins right after the bitmapimage then the header shows up as it is supposed to. But, if i put the header within the windowedapplication then it displays underneath the bitmapimage, which cant be seen unless the bitmapimage is removed.
I tried to fix this problem by changing the depth of the bitmapimage and the header component accordingly in order to make them appear in the right order but, this is not working for me.
If you have an idea, please help me out.
Thanks
Here are bits of the code
`
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" skinClass="ui.uiskin"
height = "728" width="910"
xmlns:ui="ui.*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<ui:header x="0" y="{.0258*height}" depth="0"
height="{0.0774*height}" width="100%"/>
</s:WindowedApplication>
`
uiskin is
`
<s:Skin 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:ui="com.youspin.components.ui.*"
depth="-10">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.WindowedApplication")]
</fx:Metadata>
<fx:Script>
<![CDATA[
]]>
</fx:Script>
<!-- states -->
<s:states>
<s:State name="disabledAndInactive" />
<s:State name="normalAndInactive" />
<s:State name="disabled" />
<s:State name="normal" />
</s:states>
<s:BitmapImage source="#Embed('../../images/ui/background.png')" depth="-10"/>
<s:TitleBar left="0" right="0" top="1"
height="{0.0258*height}"
skinClass="titleSkin"/>
<ui:header x="0" y="{.0258*height}" depth="0"
height="{0.0774*height}" width="100%"/>
</s:Skin>
`
and header is
`
<?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="100%" height="100%"
>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Rect width="100%" height="{.04*height}">
<s:fill>
<s:SolidColor color="black"/>
</s:fill>
</s:Rect>
<s:Rect width="100%" height="100%"
left="0" top="2"
alpha=".2"
>
<s:fill>
<s:SolidColor color="black"/>
</s:fill>
</s:Rect>
<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="100%" height="100%"
top="2" left="0"
id="headingsGroup"
>
<mx:Image source="#Embed('../../images/header/logo.png')"
width="{0.2*headingsGroup.width}"
left="{0.015*headingsGroup.width}" top="{0.04*headingsGroup.height}"/>
<!-- left line drop -->
<s:Rect left="{.25*headingsGroup.width}" top="0"
width="2" height="{.23*headingsGroup.height}">
<s:fill>
<s:SolidColor color="black"/>
</s:fill>
</s:Rect>
<!-- middle line drop -->
<s:Rect left="{.50*headingsGroup.width}" top="0"
width="2" height="{.23*headingsGroup.height}">
<s:fill>
<s:SolidColor color="black"/>
</s:fill>
</s:Rect>
<!-- side line drop -->
<s:Rect left="{.75*headingsGroup.width}" top="0"
width="2" height="{.23*headingsGroup.height}">
<s:fill>
<s:SolidColor color="black"/>
</s:fill>
</s:Rect>
<s:Label text="artist"
top="{0.06*headingsGroup.height}"
horizontalCenter="{-0.125*headingsGroup.width}"
styleName="balonez"/>
<s:Label text="song"
top="{0.06*headingsGroup.height}"
horizontalCenter="{0.125*headingsGroup.width}"
styleName="balonez"/>
<s:Label text="album"
top="{0.06*headingsGroup.height}"
horizontalCenter="{0.375*headingsGroup.width}"
styleName="balonez"/>
<!-- bottom line -->
<s:Rect left="{.25*headingsGroup.width}" top="{.22*headingsGroup.height}"
width="{.75*headingsGroup.width}" height="2">
<s:fill>
<s:SolidColor color="black"/>
</s:fill>
</s:Rect>
</s:Group>
<fx:Style>
#font-face {
src:url("../../fonts/balonez fantasia.ttf");
fontFamily: myFontFamily;
advancedAntiAliasing:true;
}
.balonez{
font-family:myFontFamily;
font-size:25;
}
</fx:Style>
</s:Group>
`
Some parts of the code are not shown here, but i guess the above should give you an idea of what i am trying to do.
What i was trying to do is that my windowedapplication has a custom skin i.e, uiskin. And also there is a separate component called 'header'. Within uiskin.mxml i have added a bitmapimage to use it as the windowedapplication's background. And within the windowedapplication i have added the header. Doing this causes the header to appear behind the image.
For now, what i have done is added the header inside the uiskin after the bitmapimage. Now, this makes the header appear above the bitmapimage. But, i actually want to place the header within the windowedapplication and not within the custom skin. Is there a way to do this.
Can you show us some code ? Because when you add components to the display list using MXML, the order you write them in is important. For instance, the following code will add the label, and then the image. If the two components' coordinates overlap, the image will cover the label. The mxml part of a flex component is ran over from the top to the bottom. See ?
<s:Label
id="labelContent"
width="100%" height="100%"/>
<s:Image id="imageContent" horizontalCenter="0" verticalCenter="0"/>
I found the answer to my question. All that was needed was a group tag to make the content of the windowed application display above the image set in the windowedapplication skin
<s:Group id="contentGroup" left="0" top="0" right="0" bottom="0" />
Take care to keep the id as well, it didn't work for me when i removed the id. Also, here is the link if anyone needs it.
I Understand some of the things posted by you. If u place the Image and then header, the header hides the image. my solution is this
have a Hgroup with 100% 100% height width
<s:HGroup width="100%" height="100%">
<ui:header width="100%" height="40"\>
<s:Image width="100%" height="60%"\>
</s:HGroup>
I am creating a vertical button bar with 3 buttons.
How do I force the same width for all three buttons so it doesn't look like crap?
<s:ButtonBar x="10" y="10" dataProvider="{viewstack1}" >
<s:layout>
<s:VerticalLayout gap="-1"/>
</s:layout>
</s:ButtonBar>
<mx:ViewStack id="viewstack1" left="115" paddingRight="0" right="0" bottom="0" top="0">
<s:NavigatorContent label="ABC Products" width="100%" height="100%"><custom:Banner width="100%" height="100%"/></s:NavigatorContent>
<s:NavigatorContent label="Btn Player" width="100%" height="100%"><custom:Player /></s:NavigatorContent>
<s:NavigatorContent label="Btn Cleaner" width="100%" height="100%"><custom:Cleaner width="100%"/></s:NavigatorContent>
</mx:ViewStack>
I had that problem too so I dropped s:VerticalLayout and used s:TileLayout with a fixed column width and it worked
<s:ButtonBar width="142" dataProvider="{almacen}" left="10" top="10">
<s:layout>
<s:TileLayout columnWidth="142"/>
</s:layout>
</s:ButtonBar>
Remember to define the gap, in order to avoid distance between the buttons
<s:layout>
<s:TileLayout verticalGap="-1" />
</s:layout>
Without forcing the width or setting the columnWidth in tile layout you can achieve the same result using horizontalAlign property of the vertical layout.
<s:ButtonBar id="btnBarVertical1" dataProvider="{menuData}" requireSelection="true" labelField="label">
<s:layout>
<s:VerticalLayout gap="-1" horizontalAlign="justify"/>
</s:layout>
</s:ButtonBar>
For icon based button bar apply the same property with iconPlacement to top like this...
<s:ButtonBar id="btnBarVertical2" dataProvider="{menuDataWithIcon}" requireSelection="true" labelField="label"
iconField="icon" iconPlacement="top">
<s:layout>
<s:VerticalLayout gap="-1" horizontalAlign="justify"/>
</s:layout>
</s:ButtonBar>
I hope this will help for dynamic text lengths...
Happy Flexing.