I'm trying to create a skin for my Application in Flex 4. I started with editing the Application wireframe skin found at /flex4-sdk-folder/frameworks/projects/wireframe/src/spark/skins/wireframe/
I need a skin upon applying should provide a header, content area and a footer.
I set the controlBar visible in the normal state so that it serves the purpose of header.
I tried to add a Rect inside the contentGroup, but its not coming up.
My question is - how can I add a footer section to my skin so that when applied, it always show a section at the bottom of my application irrespective of the height of the contents in the contentGroup?
[EDIT]
I'm trying to create a footer similar to the one seen at http://www.adobe.com/devnet/flex/tourdeflex/web/#illustIndex=0;sampleId=0;docIndex=0
I just want to fix this footer irrespective of the content inside the page and should be a part of the Application skin.Even if a scrollbar appears in the application, the footer should just reside at the bottom of browser window.
Please provide your valuable inputs and suggestions.
I usually do something like this to get a header and footer into my app:
<?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">
<s:layout>
<s:VerticalLayout gap="0"/>
</s:layout>
<s:Group id="header" width="100%" height="28">
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color="0xcccccc"/>
</s:fill>
</s:Rect>
<s:Label horizontalCenter="0" verticalCenter="0" text="I'm a Header"/>
</s:Group>
<s:Group id="mainContent" width="100%" height="100%"/>
<s:Group id="footer" width="100%" height="28">
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color="0xcccccc"/>
</s:fill>
</s:Rect>
<s:Label horizontalCenter="0" verticalCenter="0" text="I'm a Footer"/>
</s:Group>
</s:Application>
Actually I usually get a little fancier and put the three Groups into their own components; Footer, Header and Main. You can take this further by creating skins for the Header and Footer components. To keep the scroll bars in the main content area, you can have your Main component inherit from Scroller instead of Group. Hope that helps.
I don't recommend editing the skin at that shows up at the position. I believe you'll have to recompile the full framework for that skin to show up anywhere; but anyone using the cached framework won't see it.
You can copy that file into your project, though, and edit it from there. Then set the skinClass property of your application tag to your new skin copy.
To add a footer bar to the bottom of your application you can use an ControlBar or ApplicationControlBar with the dock property set to false. After that it is just positioning it.
You could also make your own footer component and position it at the bottom of your app to act like a footer.
Related
I am trying to create a Header for DataGrid which will show the Label and TextInput. The code is:
<?xml version="1.0" encoding="utf-8"?>
<s:DefaultGridHeaderRenderer 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:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:VBox paddingLeft="5" paddingTop="5" paddingRight="5" paddingBottom="5">
<s:Label text="{data.headerText}"/>
<s:TextInput width="100%" />
</mx:VBox>
</s:DefaultGridHeaderRenderer>
It somehow works but the problem is I am loosing the styles on the headers and the background is showing as white instead of the nice grey gradient.
I think I have to add the styling manually. Is there an easy way to do so?
Thanks
Styles are handled by ActionScript code in the item renderer. It's up to you to write that code in your own item renderer. For an example view the source code for the default header renderer. Or you can ignore styles, and just add a Rect behind the Vbox and set its fill properties to whatever you like.
I have written a custom skin in Flex 4.5, which shows a custom image. I want this to my background image, so how can I set this skin to the application container?
Thanks
You skin the application like any other component, the skinClass attribute of course! :)
How?
Here is my app.mxml :
<?xml version="1.0"?>
<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"
skinClass="MyAppSkin">
</s:Application>
Now, here I make a simple skin with a background image stretched to fit!
Full source of my MyAppSkin.mxml file here (too big to post here): http://pastebin.com/Hwu9tc1Y
Here is the important part (only part really customized - rest is standard) :
<s:Group id="backgroundRect">
<s:BitmapImage source="#Embed('beach.jpg')" left="0" right="0" top="0" bottom="0" scaleMode="stretch"/>
</s:Group>
What happens when you apply a skin is that it searches for certain elements by id (backgroundRect being the one we're interested in) and applying them. To customize, simply change the parts of the skin you want. I replaced the standard background solid color fill with this group with an image.
Piece of cake sir!
Make sense?
How about this:
<s:BitmapImage source="#Embed('paper1.jpg')"
left="0" right="0"
width="100%" height="100%"
/>
Set background image and add components
<mx:VBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<s:List>
<s:ArrayCollection>
<fx:String>One</fx:String>
<fx:String>Two</fx:String>
<fx:String>Three</fx:String>
<fx:String>Four</fx:String>
<fx:String>Five</fx:String>
</s:ArrayCollection>
</s:List>
</mx:VBox>
</s:Group>
I am new to Flex programming. I want to implement a custom toolstrip for an app. This tool strip will include a menu bar (or a customized equivalent) to display the common menu items such as File, Edit, etc as well as a search box. It should be flexible enough to include other menu items such as bookmarks, etc in the future. Can someone suggest the most appropriate control from which to inherit my components? I have been thinking about mx:Group, s:BorderContainer, mx:HBox, but haven't been able to choose between them. And none of them seem espcially suited to my task as they merely specify layout of other objects. Is there any component which has direct support for such functionality. I have also thought about using mx:MenuBar but I don't know if it will be flexible enough to add non-menu items like search box.
At the most basic level, your toolbar will need to layout the controls. I generally use a s:HGroup container when implementing toolbars and add menus, buttons, separators, search boxes, etc as necessary. You'll probably want to draw some sort of background such as a gradient to make it look nicer. With Flex 4 this is generally done with skinning, but I think that is a little overkill for such a simple component that doesn't need to change it's appearance based on different states. I would recommend something like the following, which allows you to draw the background for the toolbar without having to create a separate skin file for it:
<?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%">
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xe0e0e0"/>
<s:GradientEntry color="0xa0a0a0"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:HGroup top="2" bottom="2" left="8" right="8" verticalAlign="middle">
<s:Button label="Something"/>
<s:Button label="Another"/>
<s:Button label="Other Another"/>
<mx:Spacer width="100%"/>
<s:TextInput/>
</s:HGroup>
</s:Group>
For speed and ease of use, use a MenuBar.
Maybe something like this:
//psuedo code
<HGroup> //draw your background for both components in the HGroup container
<menuBar> //menubar has a transparent background
<spacer width="100%">
<searchBox>
</HGroup>
I have some code generated by Flash Catalyst, and I need it to be resizable & rotatable.
At the moment, I have no idea how to get this to happen.
The basic idea is:
I have a windmill.
windmill contains windmillBlades.
windmillBlades rotate.
windmill resizes.
When the windmill resizes, the windmillBlades should scale dynamically with the windmill.
The code below is a simplified outline of the structure of a demo app I prepared, ready to paste into your ide:
http://gist.github.com/300207
Please check out
the source and see if you can help
because this is mission critical
for me. :/
<s:Group id="windmill" width="50" height="200">
<s:Group id="windmillBlades" resizeMode="scale" verticalCenter="0" horizontalCenter="0">
<s:Line xFrom="0" xTo="140" yFrom="0" yTo="140">
<s:stroke>
<s:SolidColorStroke color="0xBC311E" weight="16" />
</s:stroke>
</s:Line>
</s:Group>
</s:Group>
Thanks!
edit: Note this is an abstraction of my real app, I'm not building a windmill simulator.
This works:
<s:Group id="windmill" width="50" height="200" x="400" y="400">
<s:Group id="windmillBlades" resizeMode="scale" width="100%" height="100%">
<s:Line xFrom="0" xTo="140" yFrom="0" yTo="140">
<s:stroke>
<s:SolidColorStroke color="0xBC311E" weight="16" />
</s:stroke>
</s:Line>
</s:Group>
</s:Group>
<s:VGroup>
<s:HSlider id="scaler"
minimum=".1" maximum="2" snapInterval=".01"
valueCommit="{windmill.scaleX = windmill.scaleY = scaler.value}"/>
<s:HSlider id="rotator"
minimum="0" maximum="360" snapInterval="1"
valueCommit="{windmill.rotation = rotator.value}"/>
</s:VGroup>
I'm not to sure the best way to make a full windmill (with s:Line and all, probably just a repeater?), but this is a good way for rotating the windmill. Instead of rotating every line (lots of calculations), just rotate the whole group. And if the windmillBladles width and height are 100%, they will automatically scale with the Group.
If you want to make the blades each individually rotate around their center, that's a lot harder. Luckily there's the ILayoutElement#transformAround method (which UIComponent has), which allows you to rotate/scale/transform around an arbitrary center. Try using that if that sounds better.
Good luck,
Lance
I'm trying to build a simple component extending spark.components.Group to have a background color, more specifically a spark.primitives.Rect component stretched to fill the background.
This is what I've come up with thus far:
<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/halo"
<fx:Metadata>
[DefaultProperty(name="content")]
</fx:Metadata>
<s:Rect id="background" width="100%" height="100%">
<s:fill>
<s:SolidColor color="#990000"/>
</s:fill>
</s:Rect>
<s:Group id="container"/>
<s:filters>
<!-- For good measure ;) -->
<s:DropShadowFilter color="#000000" strength="0.4" blurX="5" blurY="5" distance="2" angle="90"/>
</s:filters>
<fx:Script>
<![CDATA[
public function set content(value:Array):void {
this.container.mxmlContent = value;
}
]]>
</fx:Script>
</s:Group>
Ok, so the logic here basically makes sense, right? All children declared in MXML go to the Group called "container". That is working just fine. However, when I run the example below, the layout is completely fubar.
<s:VGroup>
<!-- This is the component described above -->
<components:MessageContainer id="component" width="100" height="100"/>
<mx:Slider/>
<mx:Slider/>
<mx:ColorPicker/>
</s:VGroup>
This is what it looks like:
Is there something I'm missing here? Maybe a method I need to override?
Weird. I just resorted to making a Skin implementation and applying it to a SkinnableContainer. I was compiling using the Beta 2 release of Flex 4 as well. Very strange indeed.
What build of flex 4 are you using? I just copied your code exactly and the output looks as you would expect it to.
I am running the beta 2 build that was released within the last few weeks. Build 4.0.0.253292. You can upgrade your build if you aren't running the latest, but you can also try to clean the project. It might just be getting confused. Also make sure your browser isn't caching the swf, which sometimes happens when the file size doesn't change dramatically.