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'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.
I'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].....
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]...
Are spark components available in flash or only flex 4 (flashbuilder)?
View 4 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.
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 RepliesMy 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.
In my application this works:
[Code]...
i need to setup some parameters in spark Buttons. I try setStyle, but it doesn't work with borderColor. My code is shomething like this:
for each (var prop:XML in option.elements()){
var but:spark.components.Button = new spark.components.Button();
but.label=prop
[Code]....
I'm trying to test a custom Flex 4 skinnable component, using the FlexUnit UIImpersonator class. If I run my tests from a FlashBuilder Spark only project everything works fine. If I try to test from a project with the mx component set on the classpath I get a "getElementIndex not available in non Flex 4 projects" error.Can I unit test spark components in FlexUnits visual test environment while still having the mx component set on the classpath?
UIImpersonator delegates it's method calls to a "testEnvironment".The implementation used for this "testEnvironment" is decided by the VisualTest EnvironmentBuilder class and the FlexEnvironmentBuilder class. If the FlexEnvironmentBuilder class can find the "mx.core.Container" on the classpath it returns a MX environment, else a Spark environment. Only the spark environment has valid implementations for Flex 4 relevant method calls on the UIImpersonator - like the addElement method.
With mx:Box I can set the direction to be either "horizontal" or "vertical". I'd like to reverse the order of the components in the box though. For example:
Before:
|button1| |button2| |button3|
After:
|button3| |button2| |button1|
I've created a custom component that lives in a mx:Box and would like to do this in as simplest a way as possible.
How to set a hover state (upSkin) when hover on another element? This example is not working on spark:
[URL]
Would like to do something like this:
<s:Button id="but1"/>
<s:Button label="change" mouseOver="button2_mouseOverHandler(event)"/>
protected function button2_mouseOverHandler(event:MouseEvent):void{
//make but1 look like I'm hovering it
}
is there any way to change the black in background in the VideoPlayer component that comes with Flex 4 ?
I can change every color but i can't change the black in background.
I've got a spark buttonbar w/ a dataprovider as follows:[code]By default, the button's labels will be "Dave" and "Brenda", respectively. How can I dynamically change the label to the "addr" field when a user rolls over the button?
View 1 RepliesWhile I was trying to change the fontSize of titlebar of TitleWindows, the whole container changes to new font Size. But I do not want to achive this. I would like to get it only on the titlebar.The code I have used (not successful)
<s:TitleWindow name="MyTitleWindow"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
[code]....
I am using Flex4 and Spark.
How to create horizontal layout container like HGroup but with border and border radius?In this example there is some default height:
<s:BorderContainer width="100%" borderWeight="2" cornerRadius="5">
<s:layout>
<s:HorizontalLayout/>
[code]....
I want it to have height of the heighest element in container. Like in HGroup. Add: Why is height for above example BorderContainer equal to 112 ?
In flex 4.5, I have an application that has a BorderContainer that loads a spark list (mxml style - _myList and the borderContainer is stored in a library outside of the parent application) that loads an arrayCollection with an itemRenderer (I should note said itemRenderer is not an inline renderer - on selection of an item in the list, the itemRenderer expands, loads a particular control within the item renderer based on data passed from the selected item in the list) and allows the user to perform a search. This works all well and good on startup/load, until I try to change the dataProvider for the list (my app allows users to switch data sources which then creates a new dataProvider with new variables). I have tried:
[Code]...
I want to change the background color of selected tab in spark TabBar control(Flex4). Till Flex3 we could have use the following code, bt it is not working in FLEX 4.
<fx:Script>
<![CDATA[
protected function tabbedPanel_clickHandler(event:MouseEvent):void
[code]........
I have a custom component on which I have bound an array collection to one of its proeprties: <comp:MyComp id="comp" prop="{images}" /> images is an arraycollection In the components' code I would like to know which event to listen on everytime images updates props. I tried a setter on props but the setter only gets called once when props is first set. I tried the collection event but I get "Update" events sent on top of 'add' and 'remove' events and I would rather not have to manage those. So is there an event(flex or otherwise) that is fired every time a component property is updated by a bindable property?
View 1 RepliesWhenever I add paddingRight to a column in the flex grid, it adds the padding to the header as well.Is anyone familiar with how I can add paddingRight just to the column and not to the header? Below is the column code where I was specifying the padding.
<mx:DataGridColumn width="60" headerText="Type" dataField="Grade" headerStyleName="headerLeft" textAlign="left" draggable="false" resizable="false" headerRenderer="GridHeaderRenderer" paddingRight="5"/>
I have a component that contains a list that implements a custom renderer. I use this component as a tooltip, keeping one in memory and just altering the databindings as necessary.
Something like this where TTComponent is a class that extends Canvas:
<s:TTComponent>
<s:BorderContainer>
<s:List id='lstItems' dataProvider="{data.Items}" width="50%" borderVisible="false" contentBackgroundColor="#222222">
[Code]....
Now, what happens is when data containing many items is set to tt.data, the list resizes itself larger and displays fine. However, after this, if data containing few items is set to tt.data, the component momentarily displays larger than it needs to be, then resizes itself smaller.
What I'd like to do is have the component resize itself before it displays, so I don't see the resize on screen.
How can I enable or disable a group of components in flex (flash builder 4)?
For example, if I have a window with several fields, I want to disable them based on the users permissions.
I know I can add the enabled="true" or "enabled="false", and I can also use enabled="{writeAccessVar}"
However, I am looking for more ideas, as I might have more than one group of fields on the screen, or more complicated user permissions.
For example, I will currently have one field with write access, the other fields on the screen read only for a certain user level.
For a higher level user, all fields are writable. Lower level, all are read-only.
We are building an interface for a game. The interface has a tabbed menu at the bottom of the screen, with each tab displaying different aspects of an object (called a node). When you click on one of these parts, it becomes the focus, and we download it's details in XML, including all it's sub-nodes and parent nodes and then update the tab display accordingly, or at least that's what we'd like to happen.
What we have:
MainInterface.mxml
<s:Application...
<fx:Script>
<![CDATA[
public var currentNode:Node = new Node();
[Code] .....
We tried adding an event listener for "selectNode" to the dashBoard:SkinnableContainer you see see above, but it didn't seem to want to take. We suspect this is because dashBoard is from a spark component and the dispatcher for "selectNode" is on of our own custom components, but we weren't sure... in any case that's what the code assist seemed to indicate as we had to write it in by hand. We're not sure how to pick up the Events in FlashBuilder 4's debugger, so we're having trouble working out where it's going wrong.
Basically, when someone clicks on the label of a child or parent node (that is displayed by the itemRenderer), we want a URLRequest sent to our website, with the url specific to the node clicked on. We then want a URLLoader listening for the return which will update public variable 'currentNode' when xmlDownloaded is called by the loader. If you could clarify how the click event should be dispatched, what should be listening for it then sending the URLRequest and where the URLLoader that is listening for the xml data to return should be that would solve our problems.
I have created a style in which i am defining a font family.When i apply this style to label it reflects the font were as there is no change when it is applied to a spark button.I Tried various way to Apply font style but it doesn't work.Other properties work fine except font family. Even i tried creating skin class and set the font family style of label in it. While previewing the skin i can see the changes but when i apply it to buttonApproach 1
@font-face{
src:url("HARNGTON.TTF");
fontFamily: MyF;
[code].......
Anyone missed the old simple method for skinning a simple button?
CODE:
The problem im having is that, this method of creating a simple button with skin is being phased out : Infact it is no longer supported in flex 4.5 mobile projects.
So the question: Is there a simple way to perform this, with spark buttons (which is suppose to be the new way to go). As simple as possible.
Basically i only need a button with 2 images : down/over & up. And i want to keep the code as simple as possible : The new skinning methods, seems to really adds way too much lines for something that used to be as simple as the example above.
