Setting Styles in AS3

Hi,
I am trying to set styles on components in AS3 via an
external stylesheet because the documentation suggests that using
the setStyle method should only be reserved for styles that change
at runtime.
Quote:
A common mistake that impacts performance is overusing or
unnecessarily using the setStyle() method. In general, you need the
setStyle() method only when you want to change styles on existing
objects. Do not use it when setting up styles for an object for the
first time. Instead, set styles in an <mx:Style> block,
through an external CSS style sheet, or as global styles.
Are the styles that can be set via an external stylesheet in
AS3 limited to those defined in flash.text.stylesheet? If so, am I
correct in thinking that setting styles via a stylesheet is not the
way to go as this seems a very limited set? For example I want to
set the background color on a TextArea control and padding around a
piece of text. The setStyle method works fine but I cannot find a
way to apply the same via an external stylesheet.
TIA

You are right, not all styles can be setted using CSS. In
docs there is a flag "CSS Inheritance" for it.
For example you mention about backgroundColor, this
description is
backgroundColor
Type: uint
Format: Color
CSS Inheritance: no
Background color of a component."

Similar Messages

Setting styles with javascript

getelementby('id').setAttribute lets you change a HTML objects attributes
However the style attirubute (getelementby('id').setAttribute("style","value goes here")); actually contatins many settings in what javacript sees as a single attribute.
as a result everytime i change a style setting with this i have to re-insert all of the other styles.
this is inconvinient at best.
and at worst means i have to store all of the set styles as javascript attributes and re-insert the whole lot.
is there another way of doing this
so that i can add or delete styles without the rest of the set styles being affected?

function(){return A.apply(null,[this].concat($A(arguments)))}
I_Know_Nothing_at_all wrote:
I'm confused. Are you using the getElementby to write or set an individual style for multiple elements all over a page?
I use it to set a style for an element or elements where the style is dependant on some other factor, or has to be changed in responce to an event.
CSS alone cant do this because it does not have event listenters (except for psudo events such as :hover) cannot detect the styles and setting of anything (except for media rules) and does not have any sort of evaluative functions such as IFs, CASEs and basic arithmetic.

[svn:fx-trunk] 11655: Added logic to allow getStyle to return locally set style values early on (before the instance has been added to DOM).

Revision: 11655
Author:   [email protected]
Date:     2009-11-11 08:27:42 -0800 (Wed, 11 Nov 2009)
Log Message:
Added logic to allow getStyle to return locally set style values early on (before the instance has been added to DOM).
QE notes: None
Doc notes: None
Bugs: SDK-22198
Reviewer: Glenn
Tests run: Checkin
Is noteworthy for integration: No
Ticket Links:
    http://bugs.adobe.com/jira/browse/SDK-22198
Modified Paths:
    flex/sdk/trunk/frameworks/projects/framework/src/mx/core/UIComponent.as

Please can u answer it fast

How to set style italic when i use ole2 to deal with excel?

hi ,every body.
i received a requirement today,in which user want to set style italic?
pls tell me how can i do it, tks!

Use
SET PROPERTY OF GS_FONT 'Italic' = '1' .

Defaulting to previously set styles

Hi there. Silly but annoying problem....
I open a file that is full of all sorts of styles. I love styles and use them all the time but when I add a new text box of object to a page, I want it to be UNSTYLED but instead, it automatically defaults to a previously set style. I have to go into styles and and click "None". How can I set it up so a new element does NOT default to a previosuly set style?
I am on Mac OS 10.4.11 - InDesign CS3
Thanks!

Open the Object Styles panel.
You have two choices, at this point, either create a new style and set it as the default, or edit [Basic Text Frame] and continue to use it, whcih is probably easier. To do that, double-click the name to open the style definition dialog and then click the Paragraph Styles line in the top list in the left section. In the dropdown change the style to [No Paragraph Style], make sure the box next to Paragraph Styles in the list is checked, and say OK.

Write styles in as3 for mobile

Hello, does anyone know how to convert the below mxml into a class in as3? I'm trying to optimize my code for moble.
Also, i have posibly a more precise question. I'm optimizing draggable items with limited text in this case. Would just using an image of text be of superior performance rather than optimized styled text?
<fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @font-face {
            src: url("../assets/MyriadWebPro.ttf");
            fontFamily: myFontFamily;
            embedAsCFF: false;
        .customStyle {
            fontFamily: myFontFamily;
            fontSize: 24;
            skinClass: ClassReference("spark.skins.mobile.TextAreaSkin");
    </fx:Style>
thanks!

You are right, not all styles can be setted using CSS. In
docs there is a flag "CSS Inheritance" for it.
For example you mention about backgroundColor, this
description is
backgroundColor
Type: uint
Format: Color
CSS Inheritance: no
Background color of a component."

Set style for reports

Hello
i need to find a way to give a format to objects inside my reports, in a way similar to css.
Actually i export my reports in the code behind of my page, i wish to set the report sytle (font size and type, color, backgroung and so on). I've tried to use the setcssclass method in the code behind of the page that export the pdf without success :
the page:
<head id="Head1" runat="server">
<title></title>
<style type="text/css" runat="server" id="stile">
    h1
    background-color:Aqua;
    border-color:Black;
    color:Black;
    font-family:Arial;
    font-weight:bold;
    font-style:italic;
</style>
</head>
the code behind
report.SetCssClass(ObjectScope.PageHeaderSections,"h1")
Dim oStream As System.IO.MemoryStream
oStream = DirectCast(report.ExportToStream( _
CrystalDecisions.Shared.ExportFormatType.PortableDocFormat), System.IO.MemoryStream)
Response.Clear()
Response.Buffer = True
Response.ContentType = "application/pdf"
Response.BinaryWrite(oStream.ToArray())
I wish to remark i don't use crystalreportviewer and the above code print the file directly inside the browser.
the questions are:
1. does the above code should work and i'm doing something wrong or that approach is completly wrong and will never work? If it's a correct approach, why the stye doesn't get applied?
2. if that's not the rigth way to do this thing what tool should i use? formatting formulas? do them allow me to format large pieces of report at the same time like css do in html ? Can you provide me links to examples or tutorial.
i'd like to avoid to set font size,type , line thickness or colors for each item in the report, so any hint will be greatly appreciated
thank you in advance
Stefano

Hello, Stefano;
The code you are using is only formatting the HTML page and not affecting the report object.
To do that you would need to use the Crystal Reports SDK and that would include formatting options.
You are correct, you can use formatting formula for objects. You will want to test your results in the designer first. It will have to work the way you expect there.
You may be able to do create some generic formula that will work on larger groups.
e.g. @Format_Color
You could use this formula for lines and fonts that you needed the same color and at runtime pass in the color needed:
Report.DataDefinition.FormulaFields.Item("Format_Color").Text = crBlue
Then use this formula when formatting all the fields you where you want blue options for Font or Underlines as an example.
Another option is to actually add formatting at runtime using the Report Creation API properties of the Report Application Server SDK (RAS).
You can look for more ideas in the [Developer's Library|http://devlibrary.businessobjects.com/BusinessObjectsXIR2SP2/en/devsuite.htm]. Look at "[New APIs for enhanced report customization|http://devlibrary.businessobjects.com/BusinessObjectsXIR2SP2/en/en/RAS_SDK/rassdk_net_doc/doc/rassdk_net_doc/html/Whats_New_RAS2.html#1022964]".
Once the changes are made in the report object it should export to .pdf as you expect.
Elaine

Setting flashvars in AS3 when testing movie

Does anyone know how to set flashvars when running a movie in CS4 using Control->Test Movie? Under ActionScript 2 I could just set _root.flashVar, what's the equivalent in AS3?

Hi Dan,
Thanks, but I'm not quite understanding what this solution is. Is the AS2 that you're thinking in terms of when you're posting this solution?
In AS3, the flashvar parameters don't appear as top level properties, they are found under "root.loaderInfo.parameters". So I can look up a parameter like this:
trace("myVar=" + root.loaderInfo.parameters.myVar);
I'd like to be able to do something like setting this parameter in my test code like this:
root.loaderInfo.parameters.myVar="test value";
...but this doesn't seem to work. No error message when I try this (either running "Test Movie" in CS4 or running in Flash Player in FireFox). Looking at the doc page for flash.display.LoaderInfo, it says that the "parameters" property is readonly.
I wish there were some kind of dialog in CS4 to allow me to set up flash vars for testing under Control->Test Movie, but if there is such a thing, I haven't found it yet!
- Bruce

Correct way of setting styles for custom components

Hey everyone,
                        I have a custom component which extends UIComponent and holds a image and a button. If I want to set the default style for my button where do I set it in the createChildren, stylesInitialized , updateDisplayList or styleChanged ? I know styleChanged gets called first but the param is always null
styleChanged = null
stylesInitialized
initialize
createChildren
initializationComplete
commitProperties
measure
updateDisplayList
Cheers,
Firdosh

Thanks for your recommendations. I have seen a lot of components (yahoo-astra e.g) call a static function or use Mixin (asfusion Rating Component)
public class CustomComponent extends UIComponent {
          public static function initializeStyles():void
               var styleDeclaration:CSSStyleDeclaration = StyleManager.getStyleDeclaration("BaseMultiFieldInput");
               if(!styleDeclaration)
                    styleDeclaration = new CSSStyleDeclaration();
               styleDeclaration.defaultFactory = function():void
                    this.backgroundColor = 0xffffff;
                    this.backgroundDisabledColor = 0xdddddd;
                    this.textAlign = TextFormatAlign.CENTER;
                    //other styles are based on the framework defaults
               StyleManager.setStyleDeclaration("BaseMultiFieldInput", styleDeclaration, false);
          initializeStyles();
is there a reasons why they are set in a static call?

Setting styles dynamically

Can I set a style dynamically? In the component below, I want
to change the button style (in the onChange event handler)
according to the selected state of the button, but the style is
ignored and replaced with a default version of a button. If not, is
there a work around that you would recommend or do I need to
restructure my code?

"SiHoop" <[email protected]> wrote in
message
news:[email protected]...
> Can I set a style dynamically? In the component below, I
want to change
> the
> button style (in the onChange event handler) according
to the selected
> state of
> the button, but the style is ignored and replaced with a
default version
> of a
> button. If not, is there a work around that you would
recommend or do I
> need to
> restructure my code?
>
> <?xml version="1.0" encoding="utf-8"?>
> <mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
>
implements="mx.controls.listClasses.IDropInListItemRenderer">
> <mx:Script>
> <![CDATA[
> import mx.controls.listClasses.BaseListData;
> import mx.controls.Button;
> import MyDataGrid_sh
> private var _listData:BaseListData;
> [Bindable]public var key:String;
> [Bindable]public var linkButton:String="linkButton";
>
> private var myDataGrid:MyDataGrid_sh;
>
> public function get listData():BaseListData {
> return _listData;
> }
> public function set listData( value:BaseListData ):void
> _listData = value;
> myDataGrid = _listData.owner as MyDataGrid_sh;
> key=_listData.uid;
> }
> private function onChange(event:Event):void{
> parentDocument.hideMapMarker()
> var i:int=myDataGrid.toggledButtons.getItemIndex(key);
> //Select button
> if(i==-1 && (event.target as
Button).selected==true){
> myDataGrid.toggledButtons.addItem(key)
> dg_Button.styleName="linkButton1"
>
> }
> //Release back to original state
> if(i>=0 ){
> myDataGrid.toggledButtons.removeItemAt(i);
> dg_Button.styleName="linkButton"
> }
> myDataGrid.invalidateList();
> }
> override protected function
updateDisplayList(unscaledWidth:Number,
> unscaledHeight:Number):void{
> super.updateDisplayList(unscaledWidth, unscaledHeight);
> if(key){
> var i:int=myDataGrid.toggledButtons.getItemIndex(key);
> if(i>=0){
> dg_Button.selected=true;
> }
> else{
> dg_Button.selected=false;
> }
> }
> }
> ]]>
> </mx:Script>
> <mx:Button styleName="{linkButton}" id="dg_Button"
width="50"
> toggle="true" click="onChange(event)"/>
> </mx:VBox>
I think the problem may be that you're binding the styleName
property, so it
might be setting it right back even if it gets set properly.
try <mx:Button styleName="linkButton" id="dg_Button"
width="50" ...
Unless you need what VBox gives you, you may want to consider
using a
lighter base component. At least go to Canvas, if you're not
comfortable
with UIComponent. If you want to try your hand at
UIComponent, there's a
simple example of one fully commented as part of my DataGrid
with
styleFunction example
http://flexdiary.blogspot.com/2008/09/extended-datagrid-with-stylefunction.html
HTH;
Amy

Setting style for html tags in flex

I need to add display:inline style property to <p>tag in flex CSS. Is there anyway to do like the below in flex
p{ display:inline}
Thanks in advance.

Hi rizmysl,
You cannot directly set the backgroundColor to a Label control however you can do it by getting a reference to the underlying TextField control inside the Label, for that you need to write some actionscript.
Check out the below code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
     <mx:Style>
          .texfield{ width:300; height:30; background-color:red; fontWeight:bold;}
     </mx:Style>
     <mx:Script>
      <![CDATA[
       import mx.core.IUITextField;
       private function init():void
        //Getting reference to the underlying TextFiled control inside Label
        var tf:IUITextField = (myTextField.mx_internal::getTextField());
        tf.background = true;
        tf.backgroundColor = 0XFF0000;
        tf.width = 300;
        tf.height = 30;
      ]]>
     </mx:Script>
     <mx:Label x="25" y="113" text="My Sample Text Goes Here ...." styleName="texfield" id="myTextField" />
</mx:Application>
Thanks,
Bhasker Chari

Setting styles

Hello, I have created the VBox component below with a number of buttons in it, what I am trying to do is change the style of the pressed button to the style "mainButtonSelected" and ensure the previous selected button has it's style set to "mainButtonNotSelected", I can change the selected button style no problem but cannot find a way to change the previous button style, any ideas would be appreciated. As you can see I have added the click event to the enclosing vBox is this good practice?
I also need to change the property of another label that is in another file but I am having troble referencing it in the actionscript function any help here would be appreciated also
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="95" height="655" click="mainButtonPressed( event )">
        <mx:Script source="../../../actionscript/myacs.as"/>
        <mx:Style source="../../../css/mycss.css"/>
        <mx:Script>
            <![CDATA[
                public function mainButtonPressed( event:Event ):void
                    event.target.styleName = "mainButtonSelected";
            ]]>
        </mx:Script>
        <mx:Button id="squidButton" width="90" height="90" styleName="mainButtonSelected"
                   cornerRadius="0" label="sQuid" color="#000000" fontSize="18"/>
        <mx:Button id="strButton" width="90" height="90" styleName="mainButtonNotSelected"
                   cornerRadius="0" color="#FFFFFF" icon="@Embed(source='../images/str.png')" labelPlacement="bottom" label="STR"/>
        <mx:Button id="ticketsButton" width="90" height="90" styleName="mainButtonNotSelected"
                   cornerRadius="0" color="#FFFFFF" icon="@Embed(source='../images/tickets.png')" label="Tickets" labelPlacement="bottom"/>
        <mx:Button id="carnetButton" width="90" height="90" styleName="mainButtonNotSelected"
                    cornerRadius="0" color="#FFFFFF" icon="@Embed(source='../images/carnet.png')" label="Carnet" labelPlacement="bottom"/>
        <mx:Button id="voucherButton" width="90" height="90" styleName="mainButtonNotSelected"
                   cornerRadius="0" color="#FFFFFF" icon="@Embed(source='../images/voucher.png')" label="Voucher" labelPlacement="bottom"/>
        <mx:Spacer width="90" height="78"/>
        <mx:Button id="resetButton" width="90" height="90" styleName="mainButtonRed"
                   cornerRadius="0" color="#000000" icon="@Embed(source='../images/reset.png')" label="Reset" labelPlacement="top"/>
</mx:VBox>

Try event.currentTarget.styleName = "mainButtonSelected"
You can use mx.core.Application.application.myOtherComponent.myotherComponent to reference other components, or use custom events.
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com
Flex / AIR Development, Training, and Support Services

How to set style !important using javascript??

i can set an items width using js
page_item.style.width = "400";
how do i incorporate the "!important" flag in this statement?

Hi Craig,
Here's the only blurb I could find on this:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/important.asp
Notice the "Scripting: N/A" bit at the top.
I use this site a lot - not because I'm particularly keen on MS/IE but because at the bottom of each entry you get confirmation of whether or not the setting/attribute/etc is standard or not and the pages are kept up to date.
I have to say that this is only the second time I've come across someone trying to use this. The first time we just decided to leave it. I can see the importance of using it to stop someone overriding styling, but as I mentioned above, it is possible to create an entire script tag using javascript and, therefore, you can override it. Seems silly to me, but there you go!
It would also be better, in my view, if they had used a better word for this setting - something like java's "final" - as, the first time I saw it I took it to mean "make more bolder" or "highlight it" or somesuch thing.
Regards
Andy

Custom Views: Set style of text in custom HTML tags

hi all, I'm using an extended JEditorPane to render HTML containing custom tags e.g. <mytag>Text</mytag>
My ViewFactory dynamically loads a class based on the name of the tag to return the View for that tag. (The idea being you can add any tag, by just providing a View class to render it). It's working to the extent that I can use the View.paint() method to paint a square of text before and after the content element.
What I need to do is set the style (attributes) of the text contained in the custom tags. Is this possible?
A call to doc.setCharacterAttributes(startoffset, endoffset, attrs, true); from the View results in a "Attempt to mutate in notification", possibly because the HTMLDocument is locked at this time.
Any help/advice would be greatly appreciated.
Thanks.

I'll rephrase. Is it possible to change the HTMLDocument from a View object. Forgive my lack of understanding.

How to set style in f:facet within af:table

Hi all,
I have this code segment:
<af:table ..>
<f:facet name="header">
<af:panelBox width="100%" ../>
</f:facet>
<af:column>
My question is that how do I set the style of the <f:facet> such that it's borderless.
I tried inlineStyle for <af:panelBox>, it turns out that the <f:facet> is wrapping it and I have to set the border style for <f:facet>.
I tried to find one in this url for skin selecors: http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html, but I couldn't see one likely.
Could someone give me a hand please?
Thanks.
Shawn

I guess you want the table header skin selector listing. [http://download.oracle.com/docs/cd/E15523_01/apirefs.1111/e15862/toc.htm|http://download.oracle.com/docs/cd/E15523_01/apirefs.1111/e15862/toc.htm]
search on af:table
I only see one mention of a table header though, so maybe this is the problem.
Have you looked at the html that is output (with Firebug) perhaps and seen what sort of style classes are associated with your table component? in 11g it seems that there are more human-readable style classes that you can guess at by looking at the html source.
Good luck

Setting Styles in AS3

Similar Messages

Maybe you are looking for