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]...
There are lots of examples of how to create skinnable components in AS3 using the new Spark component architecture, however I've yet to find any such examples using MXML.What I'm mainly referring to is defining the skin parts and skin states. It seems as though the SkinPart metadata is supposed to be associated with properties and as such can't be used in MXML, is this correct?
View 1 RepliesHow 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 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'm looking to add a couple of buttons to the title bar of a Spark Panel or Spark TitleWindow. Is this possible to do without making the panel from scratch?
View 1 RepliesI 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 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'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]...
In order to set a background image for my Desktop Flex application, I created a custom skin class, setting the skinClass property to my custom MXML skin. The host component is SkinnableContainer. I use a bitmap image for the custom MXML skin. Everything works fine, except that it's drawing over all my components. How do I get the skin to draw in the background? Should I move the Bitmap markup to somewhere else in my skin file?
View 1 RepliesDo you know any flex component with the functionality such as horizontally collapsible window or panel I found arc90, but it folds vertically.
View 1 RepliesI'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 have created a simple mxml file with code as follows:
<s:application..........>
<s:BorderContainer>
<s:SkinnableContainer id="firstRow"/>
<s:SkinnableContainer id="secondRow"/>
<s:SkinnableContainer id="thirdRow"/>
</s:BorderContainer>
</s:application>
Now I want to apply different font size, font color and font type and background color on each row i.e each of the three skinnableContainers.Currently I have defined 3 different skin classes for each of row but I think this is a bad programing. I should create a single skin class for outermost container i.e BorderContainer and any how provide different fonts and background color to all the 3 child containers through that skin class. So, is it possible that I can create single skin class that can provide different decorations to each of the child container.
For example the spark ComboBox.Where is the default skin?Is it generated (at compile or runtime)?If it was in fact written by someone how does the compiler/Virtual Machine know where to find the skin class? I didn't see a location specified in the ComboBox source.
View 1 RepliesI'm trying to embed fonts in my app. All is mostly well but for the itemRenderers in my AdvancedDataGrid. Adobe's documentation claims that [code] however, don't mention anything for ADGs, and setting defaultDataGridItemRenderer to either FTEDataGridItemRenderer or FTEAdvancedDataGridItem Renderer doesn't seem to do the trick.
View 1 RepliesI'm using Flash Builder and created a spark-application Flex project that will stream video from the local camera. If I use mx.controls.VideoDisplay; there is no problem since it has attachCamera(camera) method. But Spark's VideoDisplay component does not have that method. I know I can use mx controls inside a Spark app but I want to know:
What is the real difference between spark.components.VideoDisplay and mx.controls.VideoDisplay?How do I attach camera to spark. components.VideoDisplay?Is there any advantages if I go with spark (since it's newer to mx library)?
EDIT: In the documentation this is mentioned: "Starting with Flex 4.0, Adobe recommends that you use the spark.components.VideoPlayer class as an alternative to this class. (mx.controls.VideoDisplay)"
I need to create a slideshow using data received from another view.I'm calling the slideshow's view like this:
<s:List id = "list" dataProvider = "{actions}"
change = "navigator.pushView (DetailsProduct, list.selectedItem) ">
<s:itemRenderer>
[code].....
Are spark components available in flash or only flex 4 (flashbuilder)?
View 4 RepliesI want to use single collection object to two different UI components. 1. Datagrid and 2nd is chart component. I dont want to change anything inside the arraycollection object but I want to use it at the same time with two different component with minor changes. I know we can use filter function some how but not sure how to apply filter to arraycollection object so that one component (datagrid) can use the original arraycollection object and second component (chart) used the modified one.
View 1 RepliesHow can Application's ControlBar be moved to its bottom in Flex 4.5 ?
The Adobe doc says only:
By default, the ApplicationSkin class defines the control bar area to appear at the top of the content area of the Application container with a grey background. Create a custom skin to change the default appearance of the control bar.
So I look at spark.skins.spark.ApplicationSkin and there is a controlBarGroup (does it hold the ControlBar contents?), but I don't know how to move it from top to the bottom.
I'm creating a log-in box for my Flex application. However, I'm required to apply a specific design to this box that I have to change the title bar height.
The component I'm using is spark.components.Panel. I just can't find the property of this 'Panel' component to change the feature.
The class 'Button' in package mx.controls has the style 'paddingLeft' and 'paddingRight'. But now I don't want to use this old Halo theme anymore, I'm moving everything to Spark.
However, I can't find these padding styles in spark.components.Button, and the documentation [URL] doesn't show that spark Button has those styles.
I have created a custom component that I am using, more conveniently, as a SkinnablePopUpContainer and I want to use the same function that calls and receives data from it for several Buttons in the UI. What is the best way to achieve this without having to create a new function for each button?
<fx:Script>
<![CDATA[
import spark.events.PopUpEvent;
[Code]....
My goal is to remove all hover feedback from the UI. The motivation is for testing touch interface prototypes and not wanting users to have the queue of interactivity when the mouse hovers which they won't have with a touch interface.
I have a partial solution but it has two problems:
Requires an event handler on each component. Flickers on hover.
protected function ui_suppressHover(event:MouseEvent):void
{
var b = event.currentTarget as UIComponent;
[Code].....
I have a spark List defined as:
<s:List id="symbolList" dataProvider="{symbolListCollection}" change="symbolNameChangeHandler(event)"></s:List>
With the change handler defined like this:
protected function symbolNameChangeHandler(event:IndexChangeEvent):void {
symbolList.validateProperties();
changeSymbolView(symbolList.selectedItem);
}
and symbolListCollection as an ArrayList filled with Strings.
At first, the change event works fine, and I get what I expect.
However, if I Ctrl-click on the selected item, to de-select it, i am unable to ever select an item again.
When I click on something to try to select it, the change event DOES fire, however, the ItemChangeEvent has both oldIndex and newIndex set to -1
I have a custom component, containing a List displaying items from an XMLListCollection:
[Code]....
Also if I click twice, only 1 mouse click will cause my custom event to be dispatched (because obviously there is no change between the items). how to make my List only react to mouse clicks? UPDATE: Yes, I've tried using "change" event for the List before, but then I have the problem that it is fired, even if the List scrollbar is clicked.
I'm trying to skin the Scroller in my application so that it looks like the example mentioned in [URL] This example was done in Flex 3 and images are set in CSS. I tried to create a skin for the component Scroller and saw that it uses VScrollBar and HScrollBar. I tried to put skins for these components. VScrollBar uses separate skins for the track, thumb, decrement/increment buttons. I tried to make some changes in the skin, but they were not reflected at all in the application. I just want to create a customized scroll bar in Flex 4 with custom thumbs.
View 2 RepliesIs there a way to declare a skin inline in a Flex 4 MXML Component? If not inline in the component then in the declarations or library tag?
View 1 Replies