Regarding skinning in flex

what does skinning means in adobe flex?

If you look at Day 5, you will see some good videos and exercises that talk about Introducing Skinning, Creating and Applying Skins, Skin States, etc. I would recommend starting with that.

Similar Messages

Problem when overriding default skin of Flex

Hi all,
I tried to change the default style of Flex by redefining the css file. To Button, I add some different images to different status. Because Combo, ColorPicker are all inherited from Button, they all have the same style like Button has, even if I define new style for Combo as well.
How to avoid this scenario? What is the right way to overriding default skin?
Thanks and regards,
Yan

Hi there,
I played around with skinning a few months ago too but I didn't run over this problem. Check this article: http://www.adobe.com/devnet/flex/articles/flex_skins.html I don't know how are you replacing the default icons but what I did, was to build my skins from scratch with the help of the template of Flex skins for Photoshop, saved each skin as a .png file and everything worked fine.
With best regards,
Barna Biro
Blog: http://blog.wisebisoft.com

Regarding session in flex

hi,
My question is ,how i have set session in php and in flex. i could not know how to set session in flex and php.How to handle session in flex.
Please provide me solution to solve the problem.
Thanks and Regards,
venkat.R

Hi Venkat,
You have to save PHPSESSID. for each request you made to server send this as URLVariable.
I think this should work.
let me know If it is helpfull.....
Thanks,
Vikram

Need help regarding EP KM Flex UI : Filtering Resources

Hi All,
I implemented the blog u201CEP KM Flex UI : Filtering your resourcesu201D (Blog: http://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/2102) on my local server (EP 7.0 SP23)
I did some debugging and came to the conclusion that the filterparameters are being set correctly, but the ResourceFilter itself is not being called. (It's calles only once - the first time when it is accessed).
I have creaed KM Navigation iview and assign the layoutset (created based on blog)when ever click the Preview the filter work perfectly and after whenever click on u201CFilteru201D button , filter not working.
u2022The problem seems this:
after click on "Filter" button, the runtime environment correctly calls "onSetFilters" event handler, but at the end of this method,
the execution flow don't invoke "filterResourceList" method in the "SimpleResourceFilter" class.
if any one found the solution please help me to solve the problem.
Is there any other procedure to get the "ResourceListFilter".
Thanks & Regards,
Srinivas.

Hello Kevin,
Could u please let us know if you solved this problem
Thanks

FLVPlayer in Flash loses its skin in Flex

(Hi,
I've tried to embed a simple flash animation in Flex. This animation contains only a FLVplayer component with a skin (Up, playseekstop, to be precise). Embedding this in Flex is really simple, but ths skin (and thus the play, seek and stop buttons) have vanished.
I use Flash Player Profeesional CS4 version 10.0.02, Flex Builder 3, Flash Player 10 (latest version) and IE 8.
I'd really like some help with this. Do I need to set the alpha value of something to 1.0? Do I have to script the skin instead of choosing it from the component inspector menu?
Thanks alot,
Bart
Geography and sciences teacher

Sorry for the typos ;-))).
Bart

Regarding skin and style in obiee 11g

Hi ,
i have done all the steps for customization for login page of it.
but when i am restarting the presentation server the login page not customized.
on the place of oracle logo is coming nothing. i have followed the steps mentione in oracle doc.
Please help.

Hi,
Are you added any new skin your catalog file.
Are you applied new style in your dashboard.
Go --> Edit Dashboard-->dashboard properties-->please select style new one.
I am not sure this is what your looking so far.
Award points it is useful.
Thanks,
Satya

Question regarding forms in Flex 3

Hello,
I currently have a Word form document that is filled out and then converted to HTML and displayed on several monitors at various workstations throught my office.
I would like to use Flex 3 to customize this process a little. I want to be able to create a Flex application that a manger can use to fill in the various forms, using combo boxes, etc, then export it to the workstation monitors for employees to view. The information must be locked at the workstation - employees can not have the ability to change the information.
Can I do this with Flex or is it better to jsut stick with the Word document? There will not be a need for any database interaction (unless it is required to disable functionality on the workstation monitors).
I hope I explained what I need clearly enough!
Thanks for any help!

People viewing the data would access the Flex app via a URL, and the manager could use the "admin" section of the app to enter the data.
You would need something on the back end to store the data entered by the manager.
You could use AMFPHP to implement a "push" technology to update viewers screens with new data automagically.
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com

How do I apply programmatic skins for completely custom drawn components of a Flex library project?

Hello folks,
I am looking for best practices advice when (1) creating
custom components and (2) styling and skinning.
I already know how to skin a component part of the Flex
framework. I can make a class extending ProgrammaticSkin and have
my component skinned using CSS to link the component with the
reference to my custom class.
However what about those cases when you are completely
creating a component from scratch?
Imagine a "Freehand Drawing Canvas" component that allows the
user to draw on it and has some buttons to set color styles, line
styles, etc., or imagine a "Screen Flow Gallery" component that
displays visual objects in a fashion similar to Cover Flow in the
Mac.
In many components I am aware you may reuse other components
part of the Flex framework but I am trying to picture an scenario
where you would need to draw everything yourself because there just
isn't something to base it upon so you will end up drawing it from
scratch.
To learn how instead of building one of those components I
mentioned previously I decided to start with something simple that
would illustrate this like a LiteButton component that will behave
just like the Flex mx.controls.Button but will extend UIComponent
and be completely custom drawn.
The component will have a default look and will also be
style-able and skin-able. I will provide styles for users of the
component to modify and regarding skinning anyone can create a
custom ProgrammaticSkin adding its own drawing logic and link it to
the component via CSS with the ClassReference applied to the skin
selector.
So far so good and it's clear what I want to achieve. I
actually know how to do most of the stuff here but I have one
single problem.
Here is my question, where should I put my custom drawing
logic? If I do it in the updateDisplayList inside the class
extending UIComponent it works, however I thought that it would be
a better practice to do it using programmatic skins, that way I
could provide different skin themes for my component set.
The problem is that I can't make the programmatic work in
this scenario. I tried instantiating the custom programmatic skin
during the updateDisplayList of the LiteButton component and adding
it to my display object via addChild but that didn't do anything. I
also tried creating a "default.css" stylesheet and tried to use
ClassReference as I would normally do to skin an already existing
component (or composite component as well) but that didn't do
anything either.
So how do I apply programmatic skins for completely custom
drawn components of my Flex library project?
I could do it inside the updateDisplayList of the LiteButton
class extending UIComponent but again I would like to provide
different theme sets for my components so it makes sense using
programmatic skins.

"jbucaran" <[email protected]> wrote in
message
news:[email protected]...
> Hello folks,
>
> I am looking for best practices advice when (1) creating
custom components
> and
> (2) styling and skinning.
>
> I already know how to skin a component part of the Flex
framework. I can
> make
> a class extending ProgrammaticSkin and have my component
skinned using CSS
> to
> link the component with the reference to my custom
class.
>
> However what about those cases when you are completely
creating a
> component
> from scratch?
>
> Imagine a "Freehand Drawing Canvas" component that
allows the user to draw
> on
> it and has some buttons to set color styles, line
styles, etc., or imagine
> a
> "Screen Flow Gallery" component that displays visual
objects in a fashion
> similar to Cover Flow in the Mac.
>
> In many components I am aware you may reuse other
components part of the
> Flex
> framework but I am trying to picture an scenario where
you would need to
> draw
> everything yourself because there just isn't something
to base it upon so
> you
> will end up drawing it from scratch.
This may help with that
http://livedocs.adobe.com/flex/3/html/help.html?content=skinstyle_3.html
> To learn how instead of building one of those components
I mentioned
> previously I decided to start with something simple that
would illustrate
> this
> like a LiteButton component that will behave just like
the Flex
> mx.controls.Button but will extend UIComponent and be
completely custom
> drawn.
>
> The component will have a default look and will also be
style-able and
> skin-able. I will provide styles for users of the
component to modify and
> regarding skinning anyone can create a custom
ProgrammaticSkin adding its
> own
> drawing logic and link it to the component via CSS with
the ClassReference
> applied to the skin selector.
>
> So far so good and it's clear what I want to achieve.
Actually after
> playing
> with the weekend and today I know how to do most of the
stuff but I have
> one
> single problem. So here is my question, where should I
provide my custom
> drawing logic? If I do it in the updateDisplayList
inside the class
> extending
> UIComponent it works, however I thought that it would be
a better practice
> to
> do it using programmatic skins, that way I could provide
different skin
> themes
> for my component set.
These aren't mutually exclusive. When you provide a skin with
a
TypeSelector, you have to add it to the display list
somewhere, and this is
typically done in updateDisplayList or addChildren. I prefer
to do it in
updateDisplayList, because you can then change it if the
style changes.
> The problem is that I can't make the programmatic work
in this scenario. I
> tried instantiating the custom programmatic skin during
the
> updateDisplayList
> of the LiteButton component and adding it to my display
object via
> addChild but
> that didn't do anything.
Exactly what did you do?
> I also tried creating a "default.css" stylesheet and
> tried to use ClassReference as I would normally do to
skin an already
> existing
> component (or composite component as well) but that
didn't do anything
> either.
I've never had any problem using an approach similar to
this...but I will
say that I couldn't see any advantage in creating a
default.css style sheet,
since it's not really default in the way that the one that
comes with Flex
is. It's much more obvious to anyone using your component
what's going on
there if you create a style sheet where they're likely to
spot it.
> So how do I apply programmatic skins with the default
look for custom
> drawn
> components?
It seems like your approach is fine, but maybe you've made a
mistake in your
implementation.
> I could do it inside the updateDisplayList of the
LiteButton class
> extending
> UIComponent but again I would like to provide different
theme sets for my
> components so it makes sense using programmatic skins.
You might want to consider also adding an instance of
HaloBorder to your
component. That brings a lot of functionality with it.
HTH;
Amy

Flex Builder Design View programmatic skinning

I am writing programmatic skins, by extending
ProgrammaticSkin class. If i apply these skins to mx:Button, i can
see the skin in Flex Builder design view. But when i style my
custom component with programmatic skins, Flex Builder design view
does not show the skin, though the skin is applied when i run the
application. Is there a way for me to write my custom classes
(class Node extends UIComponent), and apply skins, so that i can
see the skins in Flex Builder design view.

Actually I found the answer to my question. You can find it
in my blog.
programmatic
skinning in Flex Builder Design view

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

Skinning Flex Mobile TextInput

Hi,
I need to skin the Flex Mobile Text Input with a gradient in the background. I have created a skin for that. It works fine on Android devices but in case of iOS devices, the keyboard doesn't even comes up. If I remove the skin, it works fine. I guess the issue is with skinning, but how can I fix this? Below is the skin I created, if it helps:
<s:SparkSkin 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.disabledStates="0.5" blendMode="normal">
    <fx:Metadata>
    <![CDATA[
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
        [HostComponent("spark.components.TextInput")]
    ]]>
    </fx:Metadata>
    <fx:Script>
        <![CDATA[
         * @private
        private static const focusExclusions:Array = ["textDisplay"];
         * @private
        override public function get focusSkinExclusions():Array { return focusExclusions;};
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled" stateGroups="disabledStates"/>
        <s:State name="normalWithPrompt"/>
        <s:State name="disabledWithPrompt" stateGroups="disabledStates"/>
    </s:states>
    
    
    <s:Rect left="0" right="0" top="0" bottom="0" id="border"
                              radiusX="5" radiusY="5">
        <s:stroke>
            
            <s:SolidColorStroke id="borderStroke" color="0xFFFFFF" weight="1" alpha="0.05" />
        </s:stroke>
    </s:Rect>
    
    
    <s:Rect id="background" left="1" right="1" top="1" bottom="1"
                              radiusX="5" radiusY="5">
        <s:fill>
            
            
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x131516"
                                                                                 alpha="1"/>
<s:GradientEntry color="0x282b31"
                                                                                 alpha="1"/>
</s:LinearGradient>
</s:fill>
    </s:Rect>
    
    
    <s:Rect left="1" top="1" right="1" height="1" id="shadow" alpha="0"
                              radiusX="5" radiusY="5">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" alpha="0.25" />
        </s:fill>
    </s:Rect>
    
    
    <s:RichEditableText id="textDisplay"
              verticalAlign="middle"
              widthInChars="10"
              left="1" right="1" top="1" bottom="1" />
    
    <s:Label id="promptDisplay" maxDisplayedLines="1"
                verticalAlign="middle"
                mouseEnabled="false" mouseChildren="false"
                includeIn="normalWithPrompt,disabledWithPrompt"
                includeInLayout="false" />
</s:SparkSkin>

You are using a non-mobile skin:
<s:RichEditableText id="textDisplay"
              verticalAlign="middle"
              widthInChars="10"
              left="1" right="1" top="1" bottom="1" />
    
Pls Read here about mid page- wont call keyboard and have scrolling issues, etc:
Adobe Flex 4.6 * Use text in a mobile application
Here are the mobile skins: spark.skins.mobile - Adobe ActionScript® 3 (AS3) API Reference ... apply to base components you need to use.
Good luck.

How to set backgroundImage in flex 4..?

HI.,
              I am using flex 4 sdk,to set backgroundimage in hole application,using this
<fx:Script>
       <![CDATA[
            Application
                background-image: "assets/Green Apple.jpeg";
             ]]>
    </fx:Script>
error diplay Label must be simple identifer..
how to solve this.,
With Regards
LinFlex-

Hi,
You should set the background in a skin(the flex 4 way ), the following link will help.
http://blog.flexexamples.com/2009/03/22/setting-a-background-image-on-an-fxapplication-in- flex-gumbo/
David.

Skinning TextInput (and others) changes text position

Hi there,
I've been working on updating the visuals of our application and one path I took was skinning components. There's a designer in our team that works well with Photoshop and Flash (but not with Flex or programming at all), so I sent him the link of Narciso Jamarillo's article on creating skins for Flex using Adobe Creative Suit.
Although we had few troubles working over the default template for HaloSkin at first, we kinda figured out most of them. But now there's one problem I couldn't find a solution yet. Whenever I apply the skins he made, the components that show text like TextInput and ComboBox start showing text in the wrong position, a little above the center and closer to the borders (sometimes it gives the impression it cuts out characters when I align the text at right).
Here's a picture:
Skinned on the left, not skinned on the right.
So I'd like to know what exactly has influences over text position when I create a skin in flash, or any hint on what is causing this behavior.
Thanks in advance.
With regards,
David

I asked the designer to check in Flash and all grid lines are in proportional distance (4 pixels from edge). I also asked him to create a new skin from template, without any changes, and it displayed the same behavior, so I don't think it's a scale 9 slice configuration problem.
Could you elaborate what kind of "minor tweaking" I could do on Flash? I ask because we just changed the shapes and and the 9 slice scale grid, is there anything else you could setup for a skin?
David

External Skin creation

Hi there,
I'm trying to develop an application that anyone else can skin as they want(at
least someone knowing about skinning with Flex 4).
So in Flash Builder i've built a project with all views that extends
SkinnableContainer (plus SkinPart to be sure that i've got all i need in the
skins)
In fact, i'd like to load skin at run time like that :
StyleManager.unloadStyleDeclarations(skinDefault);
StyleManager.loadStyleDeclarations(skinNew);
So, how can other person can develop skin for me ?
I've tried to set a new project with only a css file (compile in swf) and all
Skins (MXML components) but when i'm trying to compile , of course all the
HostComponents are unknown ... So i've made a library with my HostComponent (SkinnableContainer) and try to compile my other skin. When i try to load the new skin i've got error about ModuleBase (mx package) . I don't really undestood
Have you guys some ideas ?
Thx in advance.

Hi Alain ,
I guess it is the error from the Database side.Hope you need to increase the size of Temp tablespace of Oracle. Erro : ORA-01652 reffers to increase the TB space.
Regards
Prashant

HTML Frames not using custom scrollbar in Flex 3 mx:HTML

I've been working on an app that uses a custom skin in Flex 3. The app has a help window. The help contains an HTML with frames. Problem is, the main app vertical scrollbar custom skin is being ignored for the HTML Frames scrollbar (what looks like the classic version of Halo - maybe). This only happens with frames. It happens no matter how or where I place my HTML or HTMLLoader. If I dont have frames the custom scrollbar is used. Is there a node im missing in my skin css (obviously not VScrollBar or ScrollBar - the two standard used by Flex)? or some other way to connect the HTML Frames scrollbar to my custom skin.
I'm not a noob but not an expert.
Thanks.
See attached image for example.

Take the code of the jsp file :
<%@ page language="java" %>
<%@ taglib uri="WEB-INF/struts-html.tld" prefix="html" %>
<html>
   <head>
     <title> First Struts Application </title>
   </head>
     <body>
        <table width="500" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td> </td>
        </tr>
        <tr bgcolor="#36566E">
          <td height="68" width="48%">
            <div align="left">
              <img src="images/hht.gif" width="220" height="74">
            </div>
          </td>
        </tr>
        <tr>
         <td> </td>
        </tr>
       </table>
       <html:form action="Lookup"
                  name="lookupForm"
                  type="wiley.LookupForm" >
       <table width="45%" border="0">
        <tr>
          <td>Symbol:</td>
          <td><html:text property="symbol" /> </td>
        </tr>
         <tr>
          <td colspan="2" align="center"><html:submit/> </td>
         </tr>
        </table>
      </html:form>
     </body>
</html>

Regarding skinning in flex

Similar Messages

Maybe you are looking for