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.
Related
I've created a simple effect in Flex, code below, but it does not execute correctly... When I rollOver the icon, MOST of the time the effect plays, and when I rollOut of the image the effect should play in reverse, but rarely does...
Is my code or logic incorrect? FYI - I'm using Flash Builder 4.6.
<?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" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Move id="detail_fade" target="{detail_panel}" xFrom="218" xTo="400" />
</fx:Declarations>
<s:Panel id="detail_panel" x="218" y="10" width="728" height="580" title="something">
</s:Panel>
<s:VGroup x="7" y="5" width="200" height="200">
<s:Image source="images/Airfield Icon.jpg"
rollOver="detail_fade.play()" rollOut="detail_fade.reverse()"/>
</s:VGroup>
As Mahesh pointed out in his comment, reverse() will only reverse an effect that is actually playing. Which is why you only see it happening sometimes: i.e. when you're quick enough to roll_out before the effect has ended.
You should instead use:
detail_fade.play(null, true);
The first argument of the play method, is an Array of the targets of your effect. Since you've already given it a target, you don't need to pass it again (that's why it says null).
The second argument is a Boolean telling the effect to play in the inverse direction if set to true. It is of course false by default.
Now, you may notice that when you roll_out quickly, the effect will jump to the end and start playing in the other direction from there.
This can be fixed like so:
if (detail_fade.isPlaying) detail_fade.reverse();
else detail_fade.play(null, true);
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>
Normally on other IDEs, I simply drag a Rectangle object to the body or content of my application then resize it, define colors, etc. What I discovered in Flex 4 (Flash Builder 4) was that it's not just like that (or is it?) and I can't seem to find something to drag to my application to create a Rectangle object.
My question is, how do I do it? How do I create a simple Rectangle?
There is no support for FXG elements in Flash Builder Design mode.
What you can do is, use Flash Catalyst, draw your primitives with it and copy/paste the generated code in Flash Builder.
I think I just figured out how to deal with it. I just make a new component and base it on spark.primitives.Rect. Then after that, I just assign the fill's SolidColor to whatever I need just like my component code below.
<?xml version="1.0" encoding="utf-8"?>
<s:Rect 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:Script>
<![CDATA[
[Bindable]
public var fillColor:String;
]]>
</fx:Script>
<s:fill>
<s:SolidColor color="{fillColor}" />
</s:fill>
</s:Rect>
Not sure if this is the best way but it works for me so I'll go along with it. :)
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>