Flex 4 skin question

I am looking into Flex SDK skins and see a reference to hostComponent. What is it exactly for?

The hostComponent attribute is a reference to the component instance that the skin is currently attached to. It is a convenient way to access properties or methods from the component.
In general, you want to push data from the component to the skin. However, on occasion, you need to pull information from the component to the skin and hostComponent provides a way to do that.

Similar Messages

Flex 4 Skinning and Control Resizing

Hello, all
I have recently taken a deep dive into skinning Flex components. All in all, I'm very happy with the improvements that have been made and feel that it is a significant step in the right direction towards encouraging uniqueness among Flex applications in the enterprise.
I have a solid handle on skinning with Flex 4 and how to leverage it but what I don't understand revolves around resizing skinned components. As an example, let's assume I open up Photoshop and navigate to Scripts==>New Flex Skin... and then chose the ComboBox component to skin. Let's then say that I update each of the four states of this control to look differently. Lastly, I then export the skin from Photoshop and import it into Flash Builder 4 and apply my new style to a combo box I've dropped on my canvas. Everything appears well - until I resize the component. This causes the skin the ComboBox is using to visually stretch (as would be expected with the visual representation of a control being a static, embedded image).
My question is as follows:
- Is there any good way to properly handle control resizing with custom skins such that the skins don't appear stretched?
I'm hoping there is something I am missing here. I am aware that, as an alternative to importing a custom skin image, you can use the vector art capabilities of FXG in an MXML file to do the skinning there but I'd really like to avoid having to code a custom skin when I could leverage a tool such as Illustrator or Photoshop to make it look exactly how I want.

Hi,
You could use Nine slice scaling of embedded assets. Search for that in this page
http://livedocs.adobe.com/flex/3/html/help.html?content=embed_4.html#186094
Do let me know if that solves your problem.
Nishad

First Flex Project - Skinning Component?

I am working on my first flex project for the college that I work for. We are making a large touch screen into a display for all of the awards that we have given out over the years and taking the old plaques off the walls.
I want to iterate over a list of names and years that the awards were given so that each instance of the award looks like it is on it's own little plate. I'm just imitating the plaques that were on the wall that had a big discription and name of the plaque on one plate and all the winners of the award on their own little plates beneath it.
Is this what I would a component skin for? I'm sorry if this is to much of a newbie question.

Very cool indeed.
I added it to my ChikaraDev directory of rich internet
applications:
ChikaraDev
Directory of Rich Internet Applications
It could use a progress bar though. The screen where it will
appear is blank till it loads. But very nice use of Flex!

Skins Question

I have worked in flex 3 for a while and I am trying to wrap my head around skins. I see how they work but my question is, how do you configure the skin in the mxml component that is using it? For example:
<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/halo"
    skinClass="com.company.components.skins.GradientSkin">
How do i pass params to that skin to tell it what color the gradient should be? Also my skin defines the content area group which from what I can tell replaces teh padLeft,padRight etc. How would I specify in the application what the padding is? I don't want to put that in the skin class as hard coded because I cannot reuse it then.
Any thoughts on how I am looking at this incorrectly or what I can do to paramatize my skin cleanly? Thanks.

This was what I was looking for. I am 98% of the way there now. I implemented as you suggested but I still am not getting it right.
I removed almost all the code to make this as simple as possible. I just wanted to get a gradient on the applications background. Here is what I have.
<?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"
    skinClass="com.ericsson.components.skins.GradientSkin"
    width="100%" height="100%">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        s:Application
            skinGradientRotation:90;
            skinGradientStartColor:#000000;
            skinGradientEndColor:#FFFFFF;
    </fx:Style>
</s:Application>
And the skin
<?xml version="1.0" encoding="utf-8"?>
<s:Skin 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>
        <![CDATA[
            [HostComponent("spark.components.Application")]
        ]]>
    </fx:Metadata>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="{hostComponent.getStyle('skinGradientRotation')}">
                <s:GradientEntry color="{hostComponent.getStyle('skinGradientStartColor')}" />
                <s:GradientEntry color="{hostComponent.getStyle('skinGradientEndColor')}" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <s:Group id="contentGroup"/>
</s:Skin>
I even added a trace of the rotation value and its comming back as undefined. So I think I'm not quite linking the css right.
Any ideas? Also I plan to use HostComponent("mx.core.UIComponent") so its reusable for other classes. Is that legitamite to use the baseclass?
Thanks for all your help.

Flex 4 skin component runtime

hi
Is possible with flex4 change skin component at runtime with jpg,png,gif image ?
Firefox Extention by Jimmy Ruska, Translation from Google Translate, (C) Google.
Function to click individual words is from Answers.com Extension.
Online Education should be free.

flex 4 was build with design in mind ?????????
I think this is an importat question , any reply from adobe ?

Flex 2 - Multiple Questions (1) Touchpad and (2) USB 3.0

Hi lenovo friends,
I recently bought a Flex 2 14 (not sure if D) (59423165).
Firstly, can anyone link me to the correct drivers page for W8.1x64? Thank you!
Here are my questions:
1) Is there middle-click functionality for the touchpad? I cannot seem to find a way to middle-click. Does anyone know of third-party programs that will restore this functionality if the Flex 2 14 doesn't already come with it?
2) I am not achieving USB 3 speeds on the USB 3 port. I have a USB 3 flash drive that works perfectly on my desktop (achieving up to 120 MB/s), but I only achieve 30 MB/s on the Flex 2 14's USB 3 port. I am guessing that I do not have the driver installed. Can anyone help me find the correct drive?
Thanks in advance,
Chris

http://support.lenovo.com/us/en/products/laptops-and-netbooks/flex-series/flex-2-14-notebook-lenovo?...
1. Install the generic driver:
1. Disable signature enforcement: https://www.youtube.com/watch?v=NM1MN8QZhnk
2. Install the synaptic driver: 17.0.19
3. Install the aforementioned patch
2. Try the link above.

Two Skins Questions

I have two questions which I've seen asked elsewhere on this
forum but not answered. I'll try them again :-D
Fist, I can create a custom skin and apply it to my project
at time of generation, but it does not appear in my Project Set-up
pod for further customization. How can I get it to appear? Or, how
can I get it zipped and added to my gallery so that I can simply
create from gallery?
Second, I'm having trouble predicting the behavior of my
custom image buttons in the generated help project. How can I find
out the dimensions I should use for the Contents, Glossary, Index,
Search buttons and some tips for getting them to render as desired?
For example, if I background image with a gradient and transparent
images for buttons, some of them display at or near the specified
height, but others do not. Any idea how RoboHelp deals with the
images? What sizes I can use?
Thanks in advance.

So for the second issue, I've determined that Firefox and IE
render my images differently position-wise. Anybody know if there's
a document for designing cross-browser compatible skins?

ADF SelectInputDate skin questions

Hi everyone,
i'm creating a skin for my adf project and i have some questions about the selectinputdate component:
- Can i change the navigation icons in calendar with the af|selectInputDate::nav-link selector (and how)?
- How can i changed de background color for the window tha display the calendar component, i play with selectInputDate selectors without success.
- How can i changed days numbers colors, i play with af|selectInputDate::content selector without success (i can change only inactives days colors).
Thanks, Eduardo.

Hello, Here's the answers to your questions:
- Can i change the navigation icons in calendar with the af|selectInputDate::nav-link selector (and how)?
The best way to change the navigation icons is with the 'icon' keys: next-icon and prev-icon. You can use an <img> or text. The default in the simple skin is text : "<" and ">". If you want to use an img instead, then you'd skin it like this:
af|selectInputDate::next-icon {
content: url("...");
You could use background-image on the ::nav-link, but it is a CSS problem with making enough visual space to show up the image. For example, we have created aliases in our 11g ADF Faces components for clickable images and to make them visible, we had to add padding, etc.
.AFClickableImageAnchor:alias {
font-size: 14px;
padding-right: 16px;
margin-left: 1px;
margin-right: 1px;
background-repeat: no-repeat;
background-position: bottom left;
@agent ie {
.AFClickableImageAnchor:alias {
display: inline-block;
- How can i changed de background color for the window tha display the calendar component, i play with selectInputDate selectors without success.
You can't style a popup's background color dependent of what component is in it.
- How can i changed days numbers colors, i play with af|selectInputDate::content selector without success (i can change only inactives days colors).
You c an use af|sID::content A {color: aqua}.
We don't have a hook in place that you can use that doesn't expose HTML. We'd rather you not use HTML in the selectors, but if that's all you have, then there's no way around it.
Also, you can use Firebug and disable the content compression to help you with skinning.
Content compression compresses the styleclasses from their full name to short names, like x10. Viewing the full name makes skinning easier, but it should only be done during skinning development because of performance reasons -- the rendered pages will be larger with content compression turned out.
For turn off content compression in 10.1.3, you set in web.xml the
oracle.adfinternal.view.faces.DISABLE_CONTENT_COMPRESSION to true
- Jeanne

Where can i find JPEG Files for Flex Button Skinning ??

Hi a
I want to apply Third Party skinning to my FLex 3 Built Buttons .
Please tell where can i find such JPEG Files for this purpose .
please guide .Thanks.

Is this not what you're after. Apologies if not, I don't own a Motif XS
http://download.yamaha.com/search/product/?site=usa.yamaha.com&language=en&categ ory_id1=16244&category_id2=16381&category_id3=&product_id=106375

Flex 4 localization question

Hello,
I have an application MyAdd compiled with only one locale, the en_US one.
I have another project for locales where I compile them and move them to main project bin-debug/lang folder.
When loading another locale at runtime, let say fr_FR, i get those messages :
[SWF] X:\wb_3.5.1\MyApp\bin-debug\lang\fr_FR.swf - 70,770 bytes after decompression
Error #2032: Stream Error. URL: file:///X:/wb_3.5.1/MyApp/bin-debug/lang/textLayout_1.0.0.594.swf
Failed to load RSL textLayout_1.0.0.594.swf
Failing over to RSL http://fpdownload.adobe.com/pub/swz/flex/4.0.0.13875/textLayout_1.0.0.594.swf
Warning: Ignoring 'secure' attribute in policy file from http://fpdownload.adobe.com/pub/swz/crossdomain.xml. The 'secure' attribute is only permitted in HTTPS and socket policy files. See http://www.adobe.com/go/strict_policy_files for details.
[SWF] X:\wb_3.5.1\MyApp\bin-debug\lang\fr_FR.swf - 647,153 bytes after decompression
Error #2032: Stream Error. URL: file:///X:/wb_3.5.1/MyApp/bin-debug/lang/osmf_flex.4.0.0.13495.swf
Failed to load RSL osmf_flex.4.0.0.13495.swf
Failing over to RSL http://fpdownload.adobe.com/pub/swz/flex/4.0.0.13875/osmf_flex.4.0.0.13495.swf
[SWF] X:\wb_3.5.1\MyApp\bin-debug\lang\fr_FR.swf - 370,463 bytes after decompression
Error #2032: Stream Error. URL: file:///X:/wb_3.5.1/MyApp/bin-debug/lang/framework_4.0.0.13875.swf
Failed to load RSL framework_4.0.0.13875.swf
Failing over to RSL http://fpdownload.adobe.com/pub/swz/flex/4.0.0.13875/framework_4.0.0.13875.swf
[SWF] X:\wb_3.5.1\MyApp\bin-debug\lang\fr_FR.swf - 2,292,142 bytes after decompression
Error #2032: Stream Error. URL: file:///X:/wb_3.5.1/MyApp/bin-debug/lang/spark_4.0.0.13875.swf
Failed to load RSL spark_4.0.0.13875.swf
Failing over to RSL http://fpdownload.adobe.com/pub/swz/flex/4.0.0.13875/spark_4.0.0.13875.swf
[SWF] X:\wb_3.5.1\MyApp\bin-debug\lang\fr_FR.swf - 1,429,085 bytes after decompression
Error #2032: Stream Error. URL: file:///X:/wb_3.5.1/MyApp/bin-debug/lang/sparkskins_4.0.0.13875.swf
Failed to load RSL sparkskins_4.0.0.13875.swf
Failing over to RSL http://fpdownload.adobe.com/pub/swz/flex/4.0.0.13875/sparkskins_4.0.0.13875.swf
[SWF] X:\wb_3.5.1\MyApp\bin-debug\lang\fr_FR.swf - 323,414 bytes after decompression
Error #2032: Stream Error. URL: file:///X:/wb_3.5.1/MyApp/bin-debug/lang/rpc_4.0.0.13875.swf
Failed to load RSL rpc_4.0.0.13875.swf
Failing over to RSL http://fpdownload.adobe.com/pub/swz/flex/4.0.0.13875/rpc_4.0.0.13875.swf
[SWF] X:\wb_3.5.1\MyApp\bin-debug\lang\fr_FR.swf - 441,686 bytes after decompression
My question is about including those locale swf files in my project via Ant script (in order to avoid downloading them from Adobe ftp):
Do I have to just copy them from the framework folder, or can I compile them directly with flexAntTasks somehow?
Thank you in advance for your help,
Adnan

Thank you for your answer but the SDK is merged in the code.
The application works, this particular problem occurs when trying to load a locale at runtime as explained in first post.
var eventDispatcher:IEventDispatcher = resourceManager.loadResourceModule("lang/fr_FR.swf");
eventDispatcher.addEventListener(ResourceEvent.COMPLETE, localeCompleteHandler);
private function localeCompleteHandler(event:ResourceEvent):void
resourceManager.localeChain = [ "fr_FR"];
(the code is more complex but it is just to illustrate what I am doing)

Quick skinning question...

Hi,
I am using VBox and HBox as a container for a dynamic Website. Users can change the colors of these containers dynamically to match their design. However, because they can select the color, the container is very basic; it contains a solid background color and a solid border color.
This is all good and well, but I would prefer to jazz up the basic solid color container so it does not look so plain and cheesy. What I would like to do is use the solid background and border, but ADD a semi-transparent skin ON TOP of the background/border. For example, if I wanted to add some glare to the container, I could create a semi-transparent white PNG file with an image of the glare shape. If I could then load it is a Skin that would lay ON TOP of the background/border, the semi-transparent white would make the background lighter, looking like it has a glare.
I tried adding the glare image to 'skin' 'background-skin' and 'background-image' in my css style declarations for '.box'. The 'skin' and 'background-skin' had no effect, whereas the 'background-image' just covered the background color/border, but did not 'stretch' to match the container size, and the background color would not bleed through.
I am not sure if there is a practical way to do this. I am more of a developer, so any front-end Flex Designers that know how to do this I would appreciate your help very much.
Thank you,
Jesse

For targetted skinning use the styleClass attribute. So you would have a style definition using that class. For e.g.
af|inputNumberSlider.STYLE1::plus-icon
visibility: show;
}Then use the styleClass attribute in your component
<af:inputNumberSlider label="rwtt" id="ins1" styleClass="STYLE1"/>

A few skinning questions

Im new with Flex and I have a few questions.
1. How do I set a background image for a DateChoose
component?
2. How do I remove the ugly border when I focus a TextInput
component?
3. How do I set a Button component's icon to be positioned
under the label, rather than to the left of it?
4. Is there any way to set positions (or left, right, top and
bottom styles) inside the css file rather than as a tag attribute?
5. How do I set a DataGrid's row to a background image
6. How do change a DataGrid's border colors?

Anyone?

Skin question

Hi,
I move my code from SDK 3.5 to 4.5, they look different and more clear but we want to keep the same generic colors at the halo colors.
It is a skin that match sdk 3.5 component somewhere?
In Flex themes I see the halo as a template, if i use this theme, do I have some performance price?
Please advice.
Thanks

The Halo theme is the same skins from 3.x, but there aren’t equivalents for the Spark components.

Flex 4 skin how to set tree control corner radius..?

hi .,
     i have using flex4 mx tree control to reduce the corner radius.
application using tree control code...
<mx:Tree   contentBackgroundColor="#FFFFFF" id="folderTree" labelField="documentFolderName" dataProvider="{folderTreeArray}" itemClick="clcikchanged(event)" height="650" borderColor="#FFFFFF">        </mx:Tree>
<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/halo";
    @namespace mx1 "library://ns.adobe.com/flex/mx";
     mx|Tree
    border-skin: ClassReference('com.istmanagement.skins.Application.boaderskin');
    </fx:Style>
borderskin.mxml coding here...
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
    <fx:Metadata>
[HostComponent("spark.components.BorderContainer")]
</fx:Metadata>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
      <s:Rect id="background" left="0" right="0" top="0" bottom="0" >
        <s:fill>
            <s:SolidColor id="bgFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>
   <s:BorderContainer cornerRadius="8" width="255" height="650">
    </s:BorderContainer>
    <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>
</s:Skin>
tree control corner radius is reduced to display., after i have using <mx:HDividedBox > to drag this to override a tree control...
how to solve this problem.,
With Regards.,
LinFlex-

Did you every solve this issue?

'Use minimum version required by the Flex SDK' setting question

Hi,
Can someone explain why after downloading the latest stable Hero SDK (build 19786), which only has fp10.2 support in the framwork/libs/player directory, would the 'Use minimum version required by the Flex SDK' build property still tell Flash Builder to build for fp10.1?
In my flex-config.xml file from this new SDK, I see the target-player attribute is set to 10.2. Is there a bug in burrito that would fail for that value to be used?

No. That should work. Builder also reads the minimum value from flex-config.xml.
Just to check - you added this as a new SDK in Preferences -> Flash Builder -> Installed Flex SDKs and either made that the default SDK or changed the project to use the new SDK, right?

Flex 4 skin question

Similar Messages

Maybe you are looking for