When i generate skin files lets suppose for s:Button, they contain all the design related code such as graphic, label etc, but when i create a skin file of BorderContainer, it gets created without any design code and event the contentGroup part is commented and i dont know how to use it.
Could you please guide me how to custimize its skin file?
<?xml version="1.0" encoding="utf-8"?>
[HostComponent("spark.components.BorderContainer")]
<!-- states -->
<s:states>
<s:State name="disabled" />
<s:State name="normal" />
</s:states>
<!-- SkinParts
name=contentGroup, type=spark.components.Group, required=false
-->
This should explain it better... From Abobe's Docs.... "Note: Because you use CSS styles and class properties to control the appearance of the BorderContainer container, you typically do not create a custom skin for it. If you do create a custom skin, your skin class should apply any styles to control the appearance of the container." http://help.adobe.com/en_US/flex/using/WS03d33b8076db57b9466e6a52123e854e5d5-8000.html
Also...
I've noticed if you are using the wizard under file--> new MXML Skin you will not see the BorderContainerSkin available. What you are doing is actually creating an MXML class that is derived from BorderContainer (a component class, not a skin class), therefor it does not have any of the graphics and drawing methods. It seems as if you are trying to create the wrong type of class.
Unlike most skins in Flex 4, the BorderContainerSkin class is actually an Actionscript class. So.... couple of options...
1) You Can Extend BorderContainerSkin
goto: File-->New-->Actionscript Class--> type BorderContainerSkin in the SuperClass field and select it when it appears, name your new skin class and you should be good to go.
2) Create your own
BorderContainerSkin extends Skin so You can reference the code in BoderContainerSkin and create your own actionscript class that extends Skin with your custom logic.
Hope this help
Add the skin elements into the component
then at the bottom add this line:
<s:Group id="contentGroup" left="0" top="0" right="0" bottom="0"/>
this will create a group on top of the skin.
After doing this it should act as a traditional border container.
Related
I need to have a group box in flex 3 - simple border with a heading at the top but the heading at the top should not have any border line through it.
I searched on the Net and the closest that I could get with source is
http://keg.cs.uvic.ca/flexdevtips/titledborder/srcview/
But the problem with this is that I can’t view in design mode what is on the group box. Does anyone know how to fix this?
Then I decided to go with canvases and an input box
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
<mx:TextInput
text="This should be my label"
x="124" y="72"
width="166" height="32"
borderStyle="solid"
fontWeight="bold"
color="#003366" backgroundColor="#D81010"/>
<mx:Canvas x="107" y="88" width="263" height="200" borderStyle="solid" label="Testst">
</mx:Canvas>
</mx:Application>
But I can't seem to get the Textinput to be ontop of the canvas. There is a line through the box as in the below picture
Does anyone know how to resolve this or have a better idea?
thanks
What you are looking for is a component equivalent to "fieldset" in HTML. It would be easier to use create component for better styling control. For Flex 2/3, you may use jwopitz-lib; but if you could use Flex 4 or above, try the ShinyLib component (specifically the FieldSet class and FieldSet skin). It would be easier if you could migrate the application to Flex 4 or the latest Flex, you would be exposed to a lot more components.
To get a custom component to work in design mode, you need to compile the code into a SWC library. Then reference the SWC library in your application project. I've never bothered to do this, I imagine you may get mixed results. I haven't bothered w/design mode in over 5 years :)
The reason the "window" component (in the URL that you linked to in the question) works in design mode is that it extends the Flex component TitleWindow. Since it extends an existing Flex component, I am assuming design mode knows how to render it.
I'm trying to make a horizontal list of labels with a space in-between them (for use as part of a ticker tape).
Labels outside of a list have a transparent background but as part of either the ItemRenderer or List, they get a white background. My assumption is that this is part of the default styling applied to a Spark ItemRenderer.
Question - Is there any way to totally get rid of all default visual stylings applied to an ItemRenderer?
protected var messages:ArrayCollection = new ArrayCollection( new Array("1", "2", "3", "etc") );
<s:List dataProvider="{messages}" itemRenderer="SimpleTextRenderer">
<s:layout >
<s:HorizontalLayout verticalAlign="middle" />
</s:layout>
</s:List>
SimpleTextRenderer:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false" contentBackgroundAlpha="0" >
<s:Label text="{data}" />
</s:ItemRenderer>
You can implement your own custom item renderer, extending UIComponent (or Label) for instance and implementing IItemRenderer. It's actually quite easy, as explained here (you won't need to implement both of the given interfaces, as one implements the other).
This will allow you to get rid of styling and stuff, because you'll precisely manage how your component gets rendered through its validation cycle.
I have a classB that will only be used inside classA. However, classA is written as mxml, not actionscript code. Is it possible to nest classes in MXML or add another class after the root tag in the same .mxml file?
Clarification: I want both classes written in MXML within the same file, but I couldn't find anything in the Adobe documentation that specified how.
No, you can't define two classes in one MXML file, but you can have the same package (namespace) for both classes and make classB internal, so its only visible for classes within that package.
I believe you are looking for the fx:Component tag that allows you to define a new MXML document within an existing MXML document:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:local="*">
<fx:Declarations>
<fx:Component className="MyMXMLClass1">
<s:Group>
<s:Button label="MyMXMLClass1" />
</s:Group>
</fx:Component>
<fx:Component className="MyMXMLClass2">
<s:Group>
<s:Button label="MyMXMLClass2" />
</s:Group>
</fx:Component>
</fx:Declarations>
<s:VGroup>
<local:MyMXMLClass1 />
<local:MyMXMLClass2 />
</s:VGroup>
</s:Application>
If multiple levels of inheritance are required in the nested classes, and alternative to <fx:Component> (mentioned in a previous answer) is to use <fx:Library> for example:
<fx:Library>
<fx:Definition
name="MyClass"
>
<s:Group>
...
<s:/Group>
</fx:Definition>
</fx:Library>
...
<!-- Use MyClass later in the file. -->
<fx:MyClass ... />
The <fx:Library> must be at the top of the MXML file. This syntax allows for several nested class definitions in a row, and each can extend the previous via inheritance.
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 getting an odd error from my composite canvas component:
An ActionScript error has occurred:
Error: null
at mx.core::Container/initialize()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\core\Container.as:2560]
at -REMOVED THIS FOR STACK OVERFLOW-.view::EditableCanvas/initialize()[.../view/EditableCanvas
....
It seems to be related to the fact that my composite component has a child and I'm trying to add one in the place I'm using the component. So how can I do this correctly?
Component code looks like this (EditableCanvas.mxml):
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<mx:Image id="editTextImage"
source="#Embed('/../assets/icons/small/edit.png')"/>
</mx:Canvas>
The code that is using the code looks like this:
<view:EditableCanvas
width="290"
height="120"
backgroundColor="#FFFFFF"
horizontalScrollPolicy="off"
borderStyle="solid"
cornerRadius="3">
<mx:Text id="textContentBox" width="270" fontFamily="nautics" fontSize="12" text="{_text}"/>
</view:EditableCanvas>
So I found the solution all by my own from Adobe Flex 3 Help:
If you include child tags of the root container tag in an MXML component file, you cannot add child tags when you use the component as a custom tag in another MXML file. If you define an empty container in an MXML file, you can add child tags when you use the component as a custom tag.
The way to have child elements in a composite component (that also accepts childs from custom tag) is to add them after creationComplete in as3.
Have you tried not binding to the init() function, and instead just having creationComplete="init()" ?