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>
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 an item renderer tied to an mx:DataGrid column. The renderer used to be inline with the column, but I've moved it out to its own file so I can reuse it across multiple tables.
The problem is that now the renderer doesn't resize (grow/shrink) when the column is resized. So if the user makes the column very small, the contents displayed by the renderer just eat up space and show up over top other columns Any ideas how to make this work?
Code for Item Renderer:
<?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">
<mx:HBox verticalScrollPolicy="auto" horizontalScrollPolicy="off" width="100%">
<mx:Spacer top="0" bottom="0" width="4" />
<mx:Image id="typeIcon" buttonMode="false" source="{data.type}" />
</mx:HBox>
</s:MXDataGridItemRenderer>
Code for column using that renderer:
<mx:DataGridColumn headerText="Type" dataField="type" itemRenderer="com.myCompany.myProject.TypeRenderer" />
Edit
Adding width=100% to the MXDataGridItemRender didn't work.
I posted my question on Adobe's flex forum -- the solution was to remove the outer s:MXDataGridItemRenderer and to just let the mx:HBox be the root control (no other changes were necessary.)
Strange that he Flex Builder app doesn't give you the option of defining the outermost control, it just plops an s:MXDataGridItemRenderer on top...
With the default TreeItemrenderer it is possible to enable automatic word wrapping depending on the tree width by setting wordWrap=true and variableRowHeight="true" in the tree control.
I would like to enable this behavior in a MXTreeItemRenderer (a wrapper for using spark components as mx itemrenderer).
I used the MXTreeItemRenderer created by Flexbuilder and added a width of 100% to the label component (see code below).
Word wrapping is working now but in many cases the calculation of the item renderer height is wrong when there are line breaks. It seems to work with a fixed width.
Any idea how to get this right?
<s:MXTreeItemRenderer 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:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle">
<s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
<s:fill>
<s:SolidColor color="0xFFFFFF" />
</s:fill>
</s:Rect>
<s:Group id="disclosureGroup">
<s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
</s:Group>
<s:BitmapImage source="{treeListData.icon}" />
<s:Label id="labelField" text="{treeListData.label}" paddingTop="2" width="100%"/>
</s:HGroup>
</s:MXTreeItemRenderer>
Well you should probably file a bug first off ;)
If it's not reporting the height correctly, override the measure(..) method and work out the height yourself, you'll probably have to use line metrics (If they are still around in Spark) to work it out.
I found out that the height is calculated correctly when it is done twice.
So as a workaround for now I listen to changes of the data and the size and call the invalidateList() Method of the tree on a change.
In this blog site, someone pointed me to this site
really nice one, it helped me. I think it works for varying row height. Nodes with wrapping text should work.
Enjoy!
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.
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>