I've created a skin that allows me to have two labels on a spark button, but the button text won't center vertically. It stays at the top of the button no matter what settings I give it. The icon in the skin DOES however, center vertically. This is the skin:
[Code]...
I am trying to do the move vertically animation on a button nested in the vertical layout. I am not sure if the Hgroup restricts the button moving vertically.
<s:states>
<s:State name="default"/>
<s:State name="addRecommend"/>
<s:State name="seeOther"/>
[code]....
In flex form layout
<mx:Form id="form">
<mx:FormItem label="horizontal:">
<mx:Text text="test"/>
</mx:FormItem>
</mx:Form>
the output will be horizontal 'test' But my constraint is i want to align the textbox(first child of the form item ) vertically with the label. How can i do this?
In the Spark DataGrid the default row height is about 22 px. I would like to set the default row height to 18 pixels and I can do this easily enough with the rowHeight property but what happens is when the rowHeight is set to anything less than 22 px the bottom area of the text in each row is cut off. It seems that the default grid itemrenderer or grid label has a min height set to it. Since I have multiple columns and want to have shorter rows but not have the bottom of the text cut off in each row how would I do this?
View 2 RepliesMy current requirement: I have menubar with 3 different button types. Skin structure is simple: one label and two state graphics. So my base skin have label, and in overridden i want add two images. But flex docs states that overriding of skin is not preferred. I try override override public function addElementAt(element:IVisualElement, index:int):IVisualElement for adding new subcomponents to custom container sdk using it but my view is blank. Does skins are really not overridable? My current code:
<s:ButtonBar skinClass="MenuSkin" dataProvider="{content}" />
in MenuSkin:
...
<fx:Component id="firstButton">
[code]....
and next 2 skins have repeated <s:Label/> part. As label should look the same, naturally i want extend base skin class but it is no possible form me. First problem: if i add image in mxml it overlaps label.
I am trying to add different icon on different buttons. I have my skin file ready but not sure if I have to create different skin class for different button. It sounds inefficient.
<s:Button id="pass"
width="110"
height="35"
[Code]....
I have a project where we are trying to skin Spark components from a third party library that are built up from the drawing API primitives. Our first attempt involved creating a Flex skin (SWC) in Illustrator/Flash and applying that skin to the Spark components via CSS. We found that even with only a single instance of one of the components skinned in this way on stage, the application was brought to it's knees. For example, it failed to respond in repaint scenarios in a timely manner, and exhibited all the symptoms of being hung.
Our next approach will be to recreate the same skin artifacts in MXML classes that are in turn associated with the third-party components. Although the complexity of some of the skins leads me to believe that we might not avoid performance problems with this approach either. My question is the following: Is there a correct or recommended way to apply either a SWC or based skin to a component that is built up from the Spark drawing API to begin with? Even as I ask the question I recognize that the approach means using the Spark drawing API in two places and will probably have unexpected consequences.
I have spark skin a button with up, down, over, and disable states in a button component to create a modular. Is there a way when the user press and hold a key, the button will remain in 'down' state?
The button component include skinclass:
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
[Code].....
I am having trouble wrapping my head around the spark skin class in relation to it's host component. Basically, from what I've seen with most every skin that comes in the Flex 4 framework they don't directly expose the properties that are dynamically being set in the host component. Instead, they define states that get exposed to the skin class to define when a component should look different. This is all fine and dandy when you have a very simple component with a standard set of states, but when you have twenty different properties (hypothetically) to set in your host component that should change how the skin looks it could get very complicated very fast.
The way that I've seen that they have used to get around this is by overriding the commitproperties and invalidate functions in the skin class, grabbing the values for the properties they want from there, and then setting them to a locally instantiated variable inside the skin class. This is fine, but I feel like that is just a patch workaround to it which makes things a lot more complicated than it needs to be.Is there any way to directly expose a bindable property from the host component class so when you define your skin class it is directly ready to be read from? Let's say you have custom button with a boolean property of 'selected'. In the skin class, you want to add in a get and set function for the property 'selected' so you can perform some action upon your skin whenever it's set. How do you tell the skin class that this is an available property for you to work with from the host component?
I want to use a Spark ComboBox with numerous MX Components but the Spark ComboBox does not look the same as the MX Components. Is there a skin I can use to Skin Spark components like MX components?
[Code]...
I have a custom skin class that I want to apply to all scrollbars. Is there a way to set this globally in a Flex Spark application?
View 3 RepliesI have:
an ArrayCollection of Numbers;
a List using the above ArrayCollection as it's dataprovider, and virtualLayout=true;
a custom ItemRenderer that shows a label with:
a) the number
b) an y position depending on the number AND the highest number visible
In another words, if I have 10 numbers in the AC, and only 5 appear on the screen, the y position of those 5 will depend on the value of the maximum number for those 5. When the user scrolls, of course those 5 elements change so the position of the label in item renderers will change.
1) How can I get the list of items that are "currently" visible?
2) Which event/method to override will help me know that the List was scrolled/the visible items changed?
I'm trying to copy/modify the spark skin for the default button, but not sure how to find that skin. When I hover over <s:Button and Ctrl + Click it, it takes me to the Button class, but there isn't any skin information there.
View 1 RepliesI am trying to implement some MVC-style UI components in Flex 4. I want to further separate the visual setup (and later runtime modification) of each element. Primarily, I want to keep the overall layout of the data like such in the MXML file that will USE the skin[code]...
View 1 RepliesHow can I center a loaded photo [lets say 200x300] in an image control [lets say 400x600]? My image control has fixed dimensions while my contents have different dimensions and I want them to get centered automatically.
View 1 RepliesI have noticed two differences between spark and mx forms which are causing me some problems. It seems by default the mx forms are arranged to the label is above the form input item. In Spark they are arranged next to each other. Also the label in spark forms are bold by default.For example MX code could be
<mx:Form width="100%">
<mx:FormItem indicatorGap="0">
<s:Label text="label1"/>
[code].....
I would like to make the height of my DataGrid rows a bit larger than the default. The problem is that the text is vertically align to the top of the row. I would like to vertically align it to the middle of the row.
Is there a way of doing that via CSS or Skinning in Flex 4.6? note that I am using a Spark DataGrid and not an MX version.
I have tryng to centre my SWF website in html index file but for some reason when i upload it it only uploads to the top right hand side of the browser, center this SWF absolutely in the center, vertically and horizontally my html code im using in html is as follows;
[Code]...
I'm having a trouble centering my flash animation in the center of the page - verically. It centers horizontally but I can't get it to center vertically. How can I do this in either Flash or Dreamweaver?
View 5 RepliesIt used to be so easy to centre a flash movie in the center of a web page, but the days of aligning a movie in the center of a 100% x 100% table are over!
how it is done now a days? I'm guessing it's done using CSS code, but I'm a noob when it comes to CSS.
show me the code they would use to center a flash movie (dimensions 955px by 664px) horizontally and vertically on a web page?
Just wondering if it is possible to vertically center the text in a button component?
View 4 RepliesI've skinned an hSlider's thumb with an image. But the image is pixelated, as though it's been forced to resize.It's just a pretty circle with a radius of 30 px.The other thing that happens is that instead of the new button being cleanly bisected by the track, it is just below the track, tangential to it. So now I have to reposition it by modifying its y value in SliderThumbSkin.mxml? And (presumably because its registration point is at upper left) when I slide it all the way to the right, it goes right off the end of the track until its left edge is at the track's right edge. This might also mess up calculations for the hSlider.value property.
You'd think you could just apply the skin and it would replace the button, but seems that both its position and size are being wrongly manipulated.Is the thumb's size automatically reset or resized somewhere? Is there a way to do this correctly and cleanly?
EDIT: Here's code for the entire test project:
//HSliderTest.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"[code]......
I have a flash movie containing an Action Scripted toggle Full Screen button.When I press the button the movie switches to Full screen.The problem I have is that my Flash movie always aligns to the top left of the screen.I use the Flash Only Centered extension which successfully centers the movie in the browser window, but not when in full screen mode.
tell me how to vertically and horizontally center my Flash movie in Full Screen mode.
I am trying to create a generic List, where I can pass the layout & item renderer as parameters.Since it is not possible to pass parameters to a MXML component's Constructor, I figured I should create my List in Actionscript.
[Code]...
I would prefer to have the List in MXML (because It will be easier using states later), but If I am forced to use pure Actionscript so I can instantiate it and pass in parameters, any help would go a long way.
How do I addElement() to the topGroup of a Spark Panel component skin?For instance, if I create a custom UIComponent, then create an associative skin that uses the Spark Panel as a default, how do I add elements to the topGroup from within the skin?
View 1 Repliesi have index.swf as a main swf and other swf for the other menu.. and i can't get center position for one swf which is collection.swf here's the source file :[URL]
View 2 RepliesIn a flex project that I have that is designed to scale 100% to the web window, I have a spark list. And I have a simple itemrenderer that takes the data and displays a name, and a message. Just think of it like a simple instant messenger display. The problem is that for my msg_txt label I want to give it a width thats the width of the parent list thats holding it.I tried turning the horizontalScrollPolicy to off, also tried width="this.parent.parent.width}" (as well as this.parent.width) for the spark label inside the item renderer. and in the label i tried some things like left="0" right="0" maxWidth="{this.width}" but nothing really does the trick.How can I make this label have a max width of the list thats holding it, AND make sure it resizes if the size of the browser changes and the list size changes?heres the list:
<s:List id="chat_content" width="100%" height="100%"
alternatingItemColors="[#EEEEEE,#E6E6E6]" contentBackgroundColor="#EEEEEE"
horizontalScrollPolicy="off" itemRenderer="renderers.ActiveChatItemRenderer">
[code].....
SkinParts are a great way to add event handlers and logic to an object that is instantiated in the skin, away from any business code. Often, though, I find myself wanting to do the opposite, and define parts that will be used in reusable, skinnable containers in the parent mxml files which will be inserted into the skinned containers.
What's the best practice for when you want to be able to define a control and a skin which can be reused with different controls inserted from outside the skin? Edit: A better way to put this might be that I want to use something that works a little bit like a SkinnableContainer, but that isn't limited to one area where content can be placed.
I extend Button to create ImageButton, and I extend ButtonSkin to create ImageButtonSkin. But, when I define hostComponent like this:
public var hostComponent:ImageButton
I get an error that there is a conflict with hostComponent:ButtonBase inside the ButttonSkinBase. How do I extend a skin AND provide a new hostComponent for it?
How can we embed the over,up,down etc skins defined as sybols in a .swf file... i mean in skin file how can i specify those symbols to be used as up,over,down skins.
View 1 Replies