Programmatic Skinning Button

I have created button inside a class. I want to skin it using
image. I have written following line
btn.setStyle("upSkin","img.jpg");
But it gives error. Can some body please help me .

This little snippet might do the trick if you are selecting from a known list that is pre-determinable.
Esentially I cheated by floating the boolean over a picture ring and setting the BG color of the boolean to transparent. You still can't paste a new picture into a picture ring at run-time so this may not be exactly what you are looking for.
Jeff

Similar Messages

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 Bug - Programmatic Skinning!

I believe I found a Programmatic Skinning bug in Flex.
Whenever I set the "borderSkin" property to a custom skin
class, the flash player hangs in all browsers, the CPU peaks around
95% and memory is consumed rapidly.
After waiting for about 10 minutes I get the following...
[SWF] C:\Documents and Settings\Chris.Simeone\My
Documents\Flex Builder 2\Skinning-Lessons\bin\gridBorders-debug.swf
- 408,071 bytes after decompression
undefined
at
mx.core::UIComponent/getClassStyleDeclarations()[C:\dev\GMC\sdk\frameworks\mx\core\UIComp onent.as:6810]
at
mx.styles::StyleProtoChain$/mx.styles:StyleProtoChain::addProperties()[C:\dev\GMC\sdk\fra meworks\mx\styles\StyleProtoChain.as:142]
at
mx.styles::StyleProtoChain$/mx.styles:StyleProtoChain::addProperties()[C:\dev\GMC\sdk\fra meworks\mx\styles\StyleProtoChain.as:173]
(FYI: The previous error line is repeated 191 times)
I tried tracing my custom skin class (by setting breakpoints)
but none of the code ever fires - the debugger never goes into the
code.
When I remove this line from my CSS file -
borderSkin:ClassReference('GridBorders'); - the application
runs fine.
To test this further I grabbed the example on the bottom of
this
page
and the same exact error occurs. Note it the "borderSkin" property
is set on the VBox tag.
I tested other programmatic skinning examples that use
upSkin, downSkin, etc and they all work fine. I only have this
problem when assigning a skin class to the "borderSkin" property.
Would someone please confirm this is bug? I followed the
Programmatic skins recipe to the letter.
Thanks
Chris Simeone

I found the problem. It's in my CSS file. If there's a
"borderStyle"
property as defined below the application hangs. Take out the
"borderStyle" property and the app runs.
See my test code below (FYI: it does not do much. My first
attempt at
border skinning using code)...
GRIDBORDERS.CSS » HERE'S THE PROBLEM
Application
background-color: #FFFAC7;
GridItem
borderStyle: solid;
borderSkin: ClassReference('GridBorders');
GRIDBORDERS.MXML
<?xml version="1.0"?>
<mx:Application pageTitle="Grid Borders"
xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Style source="GridBorders.css"/>
<mx:Grid height="640" width="940">
<mx:GridRow width="100%" height="66%">
<mx:GridItem width="66%" height="100%" >
</mx:GridItem>
<mx:GridItem width="33%" height="100%" >
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="33%" >
<mx:GridItem colSpan="2" width="100%" height="100%" >
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Application>
GRIDBORDERS.AS
package
import mx.skins.*;
import mx.containers.Grid;
import flash.display.*;
import flash.utils.*;
public class GridBorders extends Border
public function GridBorders()
super();
override protected function updateDisplayList( w:Number,
h:Number
):void
graphics.lineStyle( 15, 0xFFFF00, 0 );
graphics.beginFill( 0xFFFF00, 1.0 );
graphics.drawRect( 0, 0, 10, height );
graphics.endFill();
private var _borderMetrics:EdgeMetrics = new EdgeMetrics(1,
1, 1, 1);
override public function get borderMetrics():EdgeMetrics
return _borderMetrics;

Programmatic skinning?

I would like to do programmatic skinning, i.e. depending on
users preferences a skin will be selected along with images which
are part of the skin. Is it possible with Flex 2?

I found the problem. It's in my CSS file. If there's a
"borderStyle"
property as defined below the application hangs. Take out the
"borderStyle" property and the app runs.
See my test code below (FYI: it does not do much. My first
attempt at
border skinning using code)...
GRIDBORDERS.CSS » HERE'S THE PROBLEM
Application
background-color: #FFFAC7;
GridItem
borderStyle: solid;
borderSkin: ClassReference('GridBorders');
GRIDBORDERS.MXML
<?xml version="1.0"?>
<mx:Application pageTitle="Grid Borders"
xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Style source="GridBorders.css"/>
<mx:Grid height="640" width="940">
<mx:GridRow width="100%" height="66%">
<mx:GridItem width="66%" height="100%" >
</mx:GridItem>
<mx:GridItem width="33%" height="100%" >
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="33%" >
<mx:GridItem colSpan="2" width="100%" height="100%" >
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Application>
GRIDBORDERS.AS
package
import mx.skins.*;
import mx.containers.Grid;
import flash.display.*;
import flash.utils.*;
public class GridBorders extends Border
public function GridBorders()
super();
override protected function updateDisplayList( w:Number,
h:Number
):void
graphics.lineStyle( 15, 0xFFFF00, 0 );
graphics.beginFill( 0xFFFF00, 1.0 );
graphics.drawRect( 0, 0, 10, height );
graphics.endFill();
private var _borderMetrics:EdgeMetrics = new EdgeMetrics(1,
1, 1, 1);
override public function get borderMetrics():EdgeMetrics
return _borderMetrics;

Skin Button Doesn't Appear

I have created two skin buttons--print and e-mail. The print
button appears when I publish the help file project to the server,
the e-mail button does not. The e-mail button does appear in the
View Primary Layout screen. Has anyone else ever experienced this
problem or know of the fix?

Resolved. Forgot to check the box in Window Properties to
display the button.

How do I access flvplayback skin buttons?

I am using a .swf that contains a flvplayback component with
a skin set. How do I access the skin buttons and their events
through actionscript? I see no reference to them as individual
buttons.
Thank You in advance for your help

You need CC2014 for these masks.

Open link (PDF) in new window from WebHelp custom skin button

This question relates to my work with FM>RH integration. But the task I'm trying to accomplish is something specifically done in RH with customization of WebHelp skins, so I'm posting in this forum. I'm running RH9 on Windows XP Pro.
We have recently replaced WebWorks with RH and finally have the mapping files set up to generate Help from our FM source files. Celebration was short, because then we realized that our users wanted a PDF option. We haven't done any mapping to create PDFs from RH, and that seems kind of silly anyway, since we have superior PDF generation from the FM files.
So I set about making a custom button in the header of a WebHelp skin that will link to a PDF. I accomplshed that work, but its behavior falls short of the functionality I'd like to see. Currently, you click on the button and it opens the PDF in the browser window of the Help system. I want it to open in a new window, so I can keep the experience clean for the users, separating Help and PDF. I don't know if this is possible.
Here is where I am at. To create button I navigated to:
Project Set-up/Skins/NEW SKIN/WebHelp Skin Editor/ Main/NEW BUTTON
When I choose the edit icon to customize the new button, there is an option to choose Link or JavaScript. I got the PDF to open inside the Help browser by just using the Link option and specifying the PDF. I have tried to use the JavaScript option without success. My JS may be wrong, but when I choose inline JS option and place anything there, it turns all the navigation buttons to gobbledy ****. Specifying an external JS file doesn't work at all.
Any direction or help would be appreciated.
Thanks,
Douglas

I see one other shortcoming with this solution now that I've implemented it. Our Help follows the applictions through a convoluted path of development servers, amongst other strangeness with the way we deploy Help and PDF documentation. My concern is referencing a single URL/file on a server. Since we're moving things around, that doesn't really work well, we want the PDF to be with the Help system, if possible. Is there a way to reference the PDF as a relative link in the baggage files, so it will pull it from whatever server the Help system resides on without having to make changes?
UPDATE:
It seems if you place the PDF in the WebHelp folder and reference it as the JavaScript, the Help system automatically reats it as root folder and find it there. So, I think this is the solution to my question? However, this is a bit annoying, as it means you have to remember to manually place the file in the compiled Help system. I had earlier experimented with placing the PDF as a baggage file, but those don't seem to carry over when you compile Help. Is there any way to put the PDF in the Baggage Files and designate that it be included in compiled Help?

How do I print a topic using skin button?

I have tried achieving this using the toolbarscripts01.js created by Willem Van Weeden on Peter Grainge's site. I've implemented .js in the skin for use with PDFs before, so I'm pretty sure I'm doing it right, but on click, nothing happens, when it should print. Script and instructions can be found here.
http://www.grainge.org/pages/authoring/twisty/twisty.htm
I'm using RH10 and outputting WebHelp.
I should also mention that I first tried the method called Print Button for WebHelp on this page, but it didn't work either.
http://www.grainge.org/pages/snippets/snippets.htm#print
Has anyone else successfully created a print topic button in the skin nav bar? Any suggestions for alternatives or what I might be doing wrong?

Neither of the scripts would be there unless they had been tried first.
The first one has a Rh project set up that you can download. First please try that and confirm that it is working there.
Are you testing on generated output rather than preview?
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

Edit WebHelp Skin Buttons?

On the Toolbar tab in the WebHelp Skin Editor, can the
default buttons (Contents, Index, etc.) in The Main and Nav Bar
lists be rearranged or deleted? When I select one of these buttons,
the delete button ( - minus button) is disabled. And there seems to
be no way to reorder them.

Hi dchell and welcome to our community
When you generate WebHelp in the following manner:
Locate the Single Source Layouts area and double-click the
WebHelp layout
You have options in the ensuing dialogs that allow you to
choose whether the TOC/Index/Search/Glossary buttons appear and in
which order.
Cheers... Rick

Need Christi skin buttons in French

Hello,
I'm using RH7 to provide webhelp documentation both in English and in French. I've created a webhelp layout using the Christi skin. My problem is that I do not know where to find French buttons for Contents and Search buttons (Index is ok). Could someone help me find a solution to have these buttons in French? I have a SMART objective on this item (06/30/10).
Thanks for your help.

Hi techwriter38 and welcome to the RH community.
You'll have to amend the skin to pick up a button image complete with the french translation. You'll have to do this yourself (e.g. using Photoshop).
Read the RoboColum(n) for a tips, tricks and musings on the Technical Communication Suite products.
Follow the RoboColum(n) on Twitter

Skin Buttons Too Large

In the Skin, I have the buttons Contents, Index, and Search.
I created another one called Checklists. The graphic is the perfect
size for both this and the mouse over. However, the area around the
button is too big (I have a screen shot). Any idea how I can fix
this? Right now, all my buttons aren't lining up and I am loosing
space.
Thanks,
Stacie

Hi Stacie
Is your button also using text? What I mean by this is to ask
if when you are in the Skins Editor and you edit the button, is
there text in the field labeled "Text"? If so, the behavior is to
surround the button image as well as the text with what looks like
a "Pressed In" area. If you remove the text, this should go away.
Give that a go and see how it goes.
Cheers... Rick

Skinning buttons in Spark

Hi guys,
Is this ture to say that for every button that has an icon in spark, a new skin should be created?

I threw together a quick demo of this and posted it on github.
Here you go: http://github.com/simb/IconButtonDemo
Hope that helps.
Simeon Bateman
[email protected]
Principal Instigator
PNW Rain LLC

How to modify functionality of skin buttons in Flash

I am using Captivate 4. I am creating some practice activities that need a Show Hint button and a Do It For Me button. I've modified 2 of the original buttons in the Coolblue skin provided by Captivate 4, and now need to modify their functionality. Here is what my modified skin looks like when I run it in my Captivate project:
The Do it for Me button is just another Next button, so I can handle that using the same code used in the Forward button. My problem is the Show Hint button, which should show/hide specific hidden Text Captions (that I have placed in the Captivate slides and tagged with variable names) on mouseOver/mouseOut events or onClick.
How can I accomplish this using the button in the skin?. I am a graphic designer and don't have a lot of programming skills. Can one of the brilliant Flash/Captivate folks that visit this site point me in the right direction? Any info/help will be much appreciated.
Thanks!

I've come up with a bit of a crazy solution but believe it will accomplish what you wish and resolve all your problems!
The image you inserted into your first post, the one of the customized playbar you're trying to configure with Flash, create it as a jpg exactly as you wish it to appear. Insert it at the bottom of every slide in your presentation, add click boxes around the buttons, then configure their properties to accomplish exactly what you wish. You can even set it all up on the first slide then simply copy and paste the image and all click boxes at once to the remainder of the slides.
For the rewind button set the click box to "go to first slide". Set play to "continue". Back and forward set as "jump to previous" and "jump to next" and so on...
Everything you're trying to do is very easy within the Captivate project utilizing click boxes. By setting it up this way it will appear as though the user is using the Flash playbar and they'll never know the difference. Once set up, go to the project menu, skin editor, and remove the actual playback controls.
Even your last post, asking about jumping ahead 2 slides instead of one, can easily be accomplished by setting that button/click box to "jump to slide" then entering the correct slide number.
I know this isn't what you've asked for, but sometimes thinking outside the box is the only way to accomplish what we desire as software doesn't always work the way we'd hope!
Hope this helps.
randy

Want to Create a Skin Button that runs JavaScript

Hi Everyone,
I'm using RoboHelp 9.
I found a script (see below) that creates an email and automatically inserts the URL from where the user is sending the email.
I pasted the script directly into the HTML of a page to test it worked – and it does.
However, I now want to add a button to a skin that runs this javascript for each page, and have no idea where to begin to get the button to run correctly. I have been able to create a button on a skin, and can see that there are javascript options but that’s as far as it goes…
<script type="text/javascript">/*<![CDATA[*/document.write("<a href=\"mailto:[email protected]?subject=ACME%20Application%20("+document.title+")&body="+location.href+"%0A%0A"+"\">Send Feedback</a>")/*]]>*/</script>
Thanks everyone in advance.
Emma

Hi Peter,
Thanks so much for your information - it has worked perfectly!
The only thing that wasn't obvious in the snippet information was where to actually put the script text on the Action tab. At first I pasted the script into the Inline Javascript option in the bottom section. This did nothing so I pasted the script into the OnClick action option. This worked perfectly.
Is it okay to leave the script text in the OnClick option?
Thanks again.
Emma

Programmatic Skinning Button

Similar Messages

Maybe you are looking for