Skinning a qnx progressbar

Similar Questions

• What theme to use?

  I'm almost finished my app, realized in a mixture of mxml and as3 (if this is irrelevant), and I would like to know what theme to use? We choose according to what we want, or need to stick to the default spark theme? According to me, he said somewhere that import qnx will give him a BlackBerry-esque user interface, but so far, it remains looking like the plain old theme spark. I'm doing something wrong?

  Hey lexrussian,

  Here is an example usage of the LabelButton:

  package
  {
  
      import flash.display.Sprite;
  
      import qnx.ui.buttons.LabelButton;
      import qnx.ui.skins.buttons.RoundedButtonSkinWhite;
  
      // The following metadata specifies the size and properties of the canvas that
      // this application should occupy on the BlackBerry PlayBook screen.
      [SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]
      public class LabelButtonTest extends Sprite
      {
  
          public function LabelButtonTest()
          {
  
              var newbtn:LabelButton = new LabelButton();
  
              newbtn.label = "A New Button";
              newbtn.setPosition(0,300);
              newbtn.setSkin(RoundedButtonSkinWhite);
  
              addChild(newbtn);
  
          }
  
      }
  }
  

  the default skin for any button is

  qnx.ui.skins.buttons.RoundedButtonSkinWhite;
  

  but you can change it to another skin

  qnx.ui.skins.buttons.RoundedButtonSkinBlack;
  

  so if you went this route, your code would look like this:

  package
  {
  
      import flash.display.Sprite;
  
      import qnx.ui.buttons.LabelButton;
      import qnx.ui.skins.buttons.RoundedButtonSkinBlack;
  
      // The following metadata specifies the size and properties of the canvas that
      // this application should occupy on the BlackBerry PlayBook screen.
      [SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]
      public class LabelButtonTest extends Sprite
      {
  
          public function LabelButtonTest()
          {
  
              var newbtn:LabelButton = new LabelButton();
  
              newbtn.label = "A New Button";
              newbtn.setPosition(0,300);
              newbtn.setSkin(RoundedButtonSkinBlack);
  
              addChild(newbtn);
  
          }
  
      }
  }
  

  and the result would be a black gradient button.

  You can learn more about the skin here:

  http://www.BlackBerry.com/developers/docs/airapi/1.0.0/QNX/UI/skins/package-detail.html

  and particularly affects the skin here:

  http://www.BlackBerry.com/developers/docs/airapi/1.0.0/QNX/UI/skins/buttons/package-detail.html

  Good luck!

  @jtegen: he doesn't sweat man. you have been more useful through the forums, and is very much appreciated. everyone makes mistakes!

• The file of the bar - descriptor.xml (and make the application of command line)

  I made a game with air and it is online for sale on Android and iOS. It is somewhat popular and I thought to put up on Blackberry for quite awhile now and with the Port of soon-to-start-A-Thon, this seems to be a great time to finally make it.

  BlackBerry is not very common that here where I live in Sweden, however it still looks like an interesting with a potential platform if I want to get the trip. Unfortunately I don't own a camera myself so I'll use the Simulator. With some graphic problems with the simulator when running in mode BB10DevAlpha (icons does not appear right) and the Simulator is very slow when running in mode BB10DevAlphaSafe (chart appears on the right, but it seems that updating them requires more CPU my computer are available).

  The game is built using nothing other than Adobe Flash Professional CS6 and a bunch of command line tools to build the package and sign. I've only got an old computer with Windows XP now since the death of my main PC, all at the time and since the Port-A-Thon is just a few days I do with what I got.

  Firstly I understand that only AIR 3.1 is supported by Blackberry 10, so I use the old AIR SDK 3.1 to create a SWF (flash) file.

  What I really need to do should be used in the exported SWF file of the game, then use the command line tools provided by RIM to build the package, right?

  Except that I did not count on bar - descriptor.xml to be so difficult to understand.

  I was brought to the documentation here: https://developer.blackberry.com/air/documentation/bb10/bar-descriptor_config_file.html

  It says Adobe AIR at the top, the platform selected is Blackberry 10 and the title says "bar-descriptor configuration file", so it must be in the right place!

  I start by trying the 'bar-descriptor configuration example file"on this page:

  ===========================================================

  
  
    
        None
        fake
    
   
    
     Name of the author
   
    
     gXXXxXXx ##XxXxXxxxXxXX #xxx
   
    
     Core.Games
   
    
     Icon.PNG
   
    
     HelloWorld - splash.png
   
    
     read_geolocation
     use_camera
   
    
     1
  

  ===========================================================

  Of course during the test I replaced a few things in the example above with the correct filenames for images etc, I just copied the example of right - off this time to you guys show what I mean.

  Firstly, I extract "blackberry-tablets-sdk - 3.0.0" in a folder on the disc, then I make sure as a full path to the "bin" in the SDK folder inside the path on the OS environment variable.

  Then I read on "Applications of Test using the command line": https://developer.blackberry.com/air/documentation/bb10/testing_your_application_cmd_ms_2010851_11.h...

  Now I run:

  BlackBerry - airpackager.bat - package installApp - blackberry-myappname - new.bar - launchApp myappname-blackberry-bar - descriptor.xml myappname.swf myappnameicon86.png bg splashscreen1024.png - device 192.168.8.128

  Note that "bg" is a folder with 500 images that must be accessible from the app. I hope that I can just add the folder like this and not type a path to each image file...

  What I get (in lib\adt.jar via the bat file):

  error 101: Namespace is missing
  Error: Validation of the AIR is not

  Okay, so the example did not straight on the box.

  Now, I've read all paragraphs in the first URL I linked above ("the bar-descriptor configuration file"). I start my own XML file and make sure to include everything that is marked as "necessary". That's what I'm left with:

  ===========================================================

  
  
      MyCompany
      
          
          com.mydomain.myappname
          My App name
          3.0.0
          
              splashscreen1024.PNG
          
          1.5.0
      
      run_native
      
          application
          
              bb.action.VIEW
              application/octet-stream
          
      
  

  ===========================================================

  I have no idea of what concerns the block whole call target, but it took, so he must be there.

  Now I launch (notice that myappnameicon86.png is gone since no icon is mentioned in the above XML code, it is not mandatory):

  BlackBerry - airpackager.bat - package installApp - blackberry-myappname - new.bar - launchApp myappname-blackberry-bar - descriptor.xml myappname.swf bg splashscreen1024.png - device 192.168.8.128

  Yet once, I get:

  error 101: Namespace is missing
  Error: Validation of the AIR is not

  Frustrated I get autour on the forums for answers, because the official documentation is nowhere getting me.

  I'm left with this:

  ===========================================================

  
  http://ns.Adobe.com/air/application/3.1">
      com.mydomain.myappname
      1.5.0
      
      My App name
      
      My App name
      
      
          myappname.swf
          standard
          fake
          true
          true
          landscape
          GPU
          fake
      
      
          myappnameicon36.PNG
          myappnameicon48.PNG
          myappnameicon72.PNG
      
      fake
      fake
      
          qnx.fuse.ui.skins.QNXDevice
          qnx.fuse.ui.skins.QNXNetwork
          qnx.fuse.ui.skins.QNXSensors
          qnx.fuse.ui.skins.QNXSkins
      
  

  ===========================================================

  Looks like the XML code that I use when I build for Android.

  First of all it doesn't have the tag root of qnx, but also nothing of the icons are of the required size (86 x 86). The tag required splashscreens and invoke target is also absent, to name a few. No idea of what the entire block of 'extensions' really do.

  Surely, this does not work:

  BlackBerry - airpackager.bat - package installApp - blackberry-myappname - new.bar - launchApp myappname-blackberry-bar - descriptor.xml myappname.swf QNXDevice.ane QNXNetwork.ane QNXSensors.ane QNXSkins.ane myappnameicon36.png myappnameicon48.png myappnameicon72.png bg-device 192.168.8.128

  Success in building the package BAR to my infinite surprise!

  He even managed to install on the Simulator. An icon for the game. However when it auto-couru the app went into landscape, thought for a second and then crashed (or you leave?) without a message.

  Perhaps because the required qnx tag was missing in the XML?
  Perhaps because images in the bg file could not be loaded?
  Perhaps because he had no permission to keep screen from dimming?

  I have no idea. I tried to add XML to qnx at the address previous to the bar - descriptor.xml, I thought that maybe he needed both the qnx block for when you run the application and the application block for when packaging. But now, he has complained of something like XML is not not clean ("' fatal error: markup in the document following the root element must be well-formed." ").

  So he came to it, I have to ask for help if I ever make the deadline of the Port-A-Thon.

  (1) how am I supposed to write the bar - descriptor.xml?
  (2) what command line starting by "blackberry - airpackager.bat" is OK to use?
  (3) all I have to do is build the SWF using Adobe Flash Professional CS6 and then pack it using the Blackberry SDK, right?

  First of all, there are two xml files that you need.

  One is called the manifesto, is to AIR and is called yourappname- app.xml. It is identical to the ones you use for Android and IOS, though some elements will be ignored. It's one you need to switch on the command line, and is probably causing the 'Namespace' missing error message. A file manifest a minimum is:

  
  http://ns.adobe.com/air/application/3.1">
  
      com.example.appname
      My Fabulous Game
      1.0.0
  
      FileNameOfYourSwfWithoutExtension
      YourCompanyName
      
          [This value will be overwritten by Flash Builder in the output app.xml]
          true
          false
          none
          cpu
          false
      
  
  

  Replace the text in red with your own stuff.

  The second xml file is called to the bar of descriptor. It is for App World and the installation process and is called bar - descriptor.xml. It contains information about signing code, icon, permissions etc. A simple bar - descriptor.xml is:

  
  
     
        none
        true
        landscape
        false
        cpu
     
  
     
     your-name-on-certificate
     your-id-on-certificate
  
     core.games
  
     
     1
  
     
     
        icon86x86.png
     
     splash-landscape.png
  
     
     2.1.0.1314
  
     
     access_shared
     access_internet
     play_audio
     set_audio_volume
  
  

  Make sure that you at least change the red dots.

• Suitable dark theme on the user interface components

  Hello!

  I was wondering if there is a way to allow simply dark skin of QNX ui in your application, without defining each SkinAssets components one by one?

  import qnx.ui.theme.ThemeGlobals;
  
  ...
  
  ThemeGlobals.currentTheme = ThemeGlobals.BLACK;
  

  Is supposed to do, but not all QNX controls seem to pick it up.

• The skin lack of asset Classes after Dev Alpha update 10.0.9.1103

  Ouch, last night I presented version of my app BB10 - this morning I am updating my Dev Alpha and the app works more... :-(

  It seems that the problem is with some qnx.fuse.ui controls:

  When I create a drop down list I get this error:

  Error: Skin Asset Class with identifier scroll_bar does not exist!
      at qnx.fuse.ui.theme::ThemeBase/getSkinAsset()[E:\hudson\workspace\BB10_0_09-AIR_SDK_API\src\qnxui\src\qnx\fuse\ui\theme\ThemeBase.as:67]
  

  And for the SegmentedControl of it:

  Error: Skin Asset Class with identifier segmented_control_background does not exist!
      at qnx.fuse.ui.theme::ThemeBase/getSkinAsset()[E:\hudson\workspace\BB10_0_09-AIR_SDK_API\src\qnxui\src\qnx\fuse\ui\theme\ThemeBase.as:67]
  

  I updated to beta 4 of the SDK and checked that qnx.fuse.ui.skins.QNXSkins is packed.

  My own code is no not no matter what count, I was going to just to use the default value.

  Does anyone know what I can do to fix this?

  Anna

  My app: Get set - get up!   Get ready for the revolution snooze.

  Inspired by a known issue with 64-bit Win mentioned in the release notes for the beta 4 SDK, the DONKEY just removed from the packaging and the path of construction, cleaned the project and added fees (4.6 FB) - and now everything works!

  (Note that my previous SDK installation has been at the same location as new and my path to the donkey was exactly the same as it is now, in C:\Program Files (x 86), so if anyone has weird questions it might just be useful to import donkeys even if files program Program Files (x 86) vs problem described in the release notes does not apply.)

  My app: Get set - get up!   Get ready for the revolution snooze.

• How to replace you the skins in bb10?

  I'm not able to replace the skins in BB10 Air 2.0 Beta

  I'm following this example from the documentation that does not work! https://developer.BlackBerry.com/Air/beta/APIs/QNX/fuse/UI/skins/package-detail.html

  I used to be able to override the initializeStates method, however, with qnx.fuse.ui.skins.UISkin there is no such method as 'initializeStates '.

  It is a small piece of code that allows to work with the SDK of Air Playbook

  override protected function initializeStates():void
          {
  
          upSkin = new Sprite();
          upSkin.graphics.beginFill(0xFF6600);
          upSkin.graphics.drawRect(0,0,200,200);
          upSkin.graphics.endFill();
  

  Can someone give me an example for BB10 Air 2.0 Beta SDK?

  Thank you!

  The documentation has been updated! I guess someone saw my post
  Well now how you do it:

  override protected function getSkinForState(state : String) : DisplayObject
  {
      var asset : DisplayObject;
  
      switch (state)
      {
          case SkinStates.UP:
              if( upSkin == null )
              {
                  upSkin = new Sprite();
                  upSkin.graphics.beginFill(0xFF6600);
                  upSkin.graphics.drawRect(0,0,200,200);
                  upSkin.graphics.endFill();
              }
              asset = upSkin;
              break;
          case SkinStates.DOWN:
          case SkinStates.DOWN_SELECTED:
          case SkinStates.SELECTED:
              if( downSkin == null )
              {
                  downSkin = new Sprite();
                  downSkin.graphics.beginFill(0x333333);
                  downSkin.graphics.drawRect(0,0,200,200);
                  downSkin.graphics.endFill();
              }
              asset = downSkin;
              break;
          case SkinStates.DISABLED:
          case SkinStates.DISABLED_SELECTED:
              if( disabledSkin == null )
              {
                  disabledSkin = new Sprite();
                  disabledSkin.graphics.beginFill(0xCC0000);
                  disabledSkin.graphics.drawRect(0,0,200,200);
                  disabledSkin.graphics.endFill();
              }
              asset = disabledSkin;
              break;
      }
      return asset;
  }
  

• Selection of unstable blue within the QNX components

  the first thing that I noticed first using the components UI QNX is the blue of the 'selected' toggle switch isn't the same blue as all other components.  In addition, the "selectedLabel' is not white.

  I first thought is essential because the toggle switch is more permanent, rather than the quick clicks / tapping the button and checkbox.  However, radio buttons are also permanent and part white when selected text.

  

  any thoughts?

  Hey,.

  I suspect it's just the way they did their 'theme '. could either be express or just an oversight or have fun with the Simulator tricks hah. That being said here is the link to their page "trump skin" show you the images they used for all controls that can be skinned:

  http://www.BlackBerry.com/developers/docs/airapi/1.0.0/skins-detail.html

  I also want to add you can change the color and appearance of your label selected using the method toggleSwitchObject.setTextFormatForState (format: TextFormat, statetring).

  an example would be:

  var myFormat:TextFormat = new TextFormat();
  
  myFormat.color = 0xFFFFFF;
  
  toggleSwitchObject.setTextFormatForState(myFormat, SkinStates.SELECTED);
  

  don't forget to import the SkinStates class and the TextFormat and you should be golden. Good luck!

• Skin on the theme of black selector does not

  I'm defining skin selector to the black theme.   I can get this to work if I put the general themes to black, but I don't want my entire application returned to black theme, just this selector.  I tried to put the skins for each of the components (http://www.blackberry.com/developers/docs/airapi/1.0.0/index.html) of the harvester, but the components you see before clicking on the selector to stay in the white theme.  When I click on the selector, you see black-themed items.  I used

  budgetPicker.setButtonSkin (new PickerButtonSkinBlack);
  budgetPicker.setListBackgroundSkin (new PickerListBackgroundBlack);
  budgetPicker.setSelectionSkin (new PickerSelectionBlack);

  But the .setButtonSkin does nothing.  Even if I comment out it makes no difference.

  Anyone?

  Hey EraserX.

  I did some more research and found a possible workaround. Thanks to Flash Builder, I could sniff the class selector via its extension with a custom class. It turns out that the button is a protected value therefore fully accessible only through the extension of the class. to summarize I essentially took the setButtonSkin method and it overrode and then altered the __buttonBackground (turns out there's a button so its skinnable via its own method of setSkin).

  CustomPicker.as:

  package
  {
      import qnx.ui.picker.Picker;
  
      public class CustomPicker extends Picker
      {
          public function CustomPicker()
          {
              super();
          }
  
          override public function setButtonSkin(skin:Object):void
          {
              this.__backgroundButton.setSkin(skin);
          }
      }
  }
  

  If in the future rather than create an Picker() object, you can create a CustomPicker() object.

  // A short example of a picker component that displays// day, month and year. package{ import flash.display.Sprite;  import flash.events.Event;
  
    import qnx.ui.data.DataProvider;  import qnx.ui.picker.Picker;  import qnx.ui.skins.picker.PickerButtonSkinBlack; import qnx.ui.skins.picker.PickerListBackgroundBlack; import qnx.ui.skins.picker.PickerSelectionBlack;  import qnx.ui.text.Label;
  
    [SWF(height="600", width="1024", frameRate="30", backgroundColor="#BBBBBB")]  public class PickerSample extends Sprite  {
  
        public function PickerSample()        {
  
            // Create three arrays to handle days, months, years.
  
            var arrDay:Array=[];          var arrMonth:Array=[];            var arrYear:Array=[];
  
            // Populate the month array and create the            // day DataProvider 
  
            for (var i:int=1; i<32; i++) {             arrDay.push({label: i.toString()});           }
  
            var dayDP:DataProvider=new DataProvider(arrDay);
  
            // Populate and month array and create the month          // DataProvider
  
            arrMonth.push({label: "January"});            arrMonth.push({label: "February"});           arrMonth.push({label: "March"});          arrMonth.push({label: "April"});          arrMonth.push({label: "May"});            arrMonth.push({label: "June"});           arrMonth.push({label: "July"});           arrMonth.push({label: "August"});         arrMonth.push({label: "September"});          arrMonth.push({label: "October"});            arrMonth.push({label: "November"});           arrMonth.push({label: "December"});
  
            var monthDP:DataProvider=new DataProvider(arrMonth);
  
            // Create the year DataProvider
  
            for (var l:int=1900; l<2015; l++) {                arrYear.push({label: l.toString()});          }
  
            var yearDP:DataProvider=new DataProvider(arrYear);
  
            // Add the day, month and year DataProviders to the main          // array
  
            var dpp:Array = new Array();
  
            dpp.push(dayDP);          dpp.push(monthDP);            dpp.push(yearDP);
  
            // Create the picker and add the main DataProvider
  
            var picker:CustomPicker = new CustomPicker();
  
            picker.setListBackgroundSkin(PickerListBackgroundBlack);          picker.setSelectionSkin(PickerSelectionBlack);            picker.setButtonSkin(PickerButtonSkinBlack);
  
            picker.width=400;         picker.height=50;         picker.x=picker.y=300;            picker.dataProvider=new DataProvider(dpp);            addChild(picker);
  
            // To customize column widths,            // all widths are added up and then used for              // a ratio against the component set width
  
            picker.setListWidth(0,100);           picker.setListWidth(1,300);           picker.setListWidth(2,200);
  
            // Set to Jan 1, 2010
  
            picker.selectedIndices=[0,6,111];
  
            // Add listeners for open, close and select events
  
            picker.addEventListener(Event.OPEN,handleOpen);           picker.addEventListener(Event.CLOSE,handleClose);         picker.addEventListener(Event.SELECT,handleSelect);
  
            // A simple function that displays currently selected         // item information in the console. 
  
            traceItems();
  
            function traceItems():void            {             for (var j:int = 0; j 
  It should have the same features of the original class with just one method of updated the setButtonSkin(). I would also add, because it's a total guess I don't know if we are losing additional features. example, if something else were also made in this method, I do not know. but it does the job well I hope this helps until they disappear the bug. Good luck!
  		   

• Using skins rather than using the new components

  Hello

  I have briefly spoken on BlackBerry Playbook workshop at LeWeb 10 with the presenter and thought I'd share it here as well.

  Most of the QNX components already exist in the 4.5 Flex / AIR SDK 2.5 framework (button, checkbox, list, StageWebView,...), but they exist in QNX specific packages so that they are "tactile."

  I believe that BlackBerry created a few new components "tactile" because the Flex Framework was not yet ready, but now with Flex 4.5, there these prepared components for mobile.

  Create BlackBerry applications using components from QNX records is easy, but if you really want to develop for multiple platforms, it would be preferable to use skins rather than new components. Skins such as the display of the box could be easily SDK BB so that there is no need to change all the 'new' instructions (or the need to create several plants) but simply to define it in a CSS or Flex theme. In this way the exact same application can be on Android and BB without having to redefine each instantiation.

  I hope the SDK already thought about this team and will provide these theme / Skins

  Fabien

  Theme skins playBook is available here in the .png format:

  http://www.BlackBerry.com/developers/docs/airapi/1.0.0/skins-detail.html

• How to use black skin for specific controls?

  I am using black skin for segmented control. There seems to not be any property of skin or colorshade.

  How would I do that?

  Hey,.

  There are two methods available to set the skin to a control object segemented. The first is a setBackgroundSkin() and the second is a method of setButtonSkin(). Try the following and see if the counting works:

  import qnx.ui.skins.buttons;
  
  (...)
  
  var myControl:SegmentedControl = new SegmentedControl();
  
  (...)
  
  myControl.setBackgroundSkin(SegmentedControlSkinBlack);
  myControl.setButtonSkin(RoundedButtonSkinBlack);
  

  Be sure to import the skin button package and also replace "myControl" by your control object segmented. Hope that helps. Good luck!

• QNX. UI. List and custom converters

  Hi, I created a CellRenderer for my qnx.ui.list, so that I can format the text inside.

  everything works fine, except that before, when I used the default, I got stripes (alternating white and blue) on my list, and now I no longer receive them.

  While this isn't a huge thing, I would like to get some advice here in accordance with the implementation of the same thing on my cell display.

  Here's what it looks like:

  package renderers
  {
      import flash.text.TextFormat;
  
      import qnx.ui.listClasses.CellRenderer;
      import qnx.ui.skins.SkinStates;
  
      public class TimeTravellerListCellRenderer extends CellRenderer
      {
          public function TimeTravellerListCellRenderer()
          {
              super();
              var newFormat:TextFormat = new TextFormat();
              newFormat.font = "Arial";
              this.setTextFormatForState(newFormat, SkinStates.UP);
              this.setTextFormatForState(newFormat, SkinStates.SELECTED);
          }
      }
  }
  

  Thanks in advance

  to change the colors of alternating CellRenderer, you must create a custom for her appearance. then in the cell renderer, you'd setSkin (CustomCellRendererSkinWhite) and that he would use the next skin:

  package
  {
      import flash.display.DisplayObject;
      import flash.display.Sprite;
  
      import qnx.ui.skins.SkinAssets;
      import qnx.ui.skins.SkinStates;
      import qnx.ui.skins.listClasses.CellRendererSkinWhite;
  
      public class CustomCellRendererSkinWhite extends CellRendererSkinWhite
      {
          private var upSkinOdd1:Sprite;
  
          public function CustomCellRendererSkinWhite()
          {
              super();
          }
  
          override protected function initializeStates():void
          {
              super.initializeStates();
  
              upSkinOdd1 = new Sprite();
  
              upSkinOdd1.graphics.clear();
              upSkinOdd1.graphics.beginFill(0xFF0000);
              upSkinOdd1.graphics.drawRect(0,0,26,47);
              upSkinOdd1.graphics.endFill();
  
              /**
               * Due to the new system you need to set the scale9grid
               */
  
              var oldUpSkinOdd:DisplayObject = new SkinAssets.CellRendererUpOddWhite();
  
              upSkinOdd1.scale9Grid = oldUpSkinOdd.scale9Grid;
  
              this.setSkinState(SkinStates.UP_ODD, upSkinOdd1);
          }
      }
  }
  

  hope that things cleared up. Good luck!

• Add a border to my custom skin.

  Hello.

  I'm developing an ActionScript 3.0 for PlayBook application.

  I want to add a black border on my custom skin, but I don't know how.

  It is a piece of my code:

  package
  {
      import flash.display.Sprite;
      import flash.geom.Rectangle;
      import qnx.ui.skins.SkinAssets;
      import qnx.ui.skins.SkinStates;
      import qnx.ui.skins.UISkin;
      public class CustomButtonSkin extends UISkin
      {
          /** @private **/
          protected var upSkin:Sprite;
          /** @private **/
          protected var selectedSkin:Sprite;
          /** @private **/
          protected var disabledSkin:Sprite;
          /** @private **/
          protected var downSkin:Sprite;
          /** @private **/
          protected var gridRect:Rectangle;
          public function CustomButtonSkin()
          {
              super();
          }
  
          override protected function initializeStates():void
          {
              gridRect = new Rectangle(8,8,20,20);
              upSkin = new Sprite();
              upSkin.graphics.beginFill(0xFF6600);
              upSkin.graphics.drawRoundRect(0,0,172,44, 10,10);
              upSkin.graphics.endFill();
              upSkin.scale9Grid = gridRect;
  ...
  

  Hey,.

  just before:

  upSkin.graphics.beginFill(0xFF6600);
  

  put this:

  ....
  
  upSkin.graphics.lineStyle(1,0);
  upSkin.graphics.beginFill(0xFF6600);
  
  ....
  

  hope that helps. Good luck!

• How scalable skin?

  Is it possible to make scalable UI skin? For example, I need a button, the size of which depends on its label of the skin.

  Thank you

  Hey,.

  If you want to create a scalable skin - you can do using the QNX components and then go ahead and create a UISkin for him. If done you will be able to resize the button right anyway you want and it do not bend or deform. I created an approach counting at the time where 0.9.4 shone - it may or may not always work but should give u a good idea on how to address the issue. Here is the link:

  http://playbookwiki.org/index.php/Skinning_A_LabelButton_Object

  I hope this helps - good luck!

• Flex 4 style halo progressbar 'MX '.

  Is style MX progressbar in flex 4 possible?

  @namespace s "library://ns.adobe.com/flex/spark";
  @namespace mx "library://ns.adobe.com/flex/mx";

  
  MX | ProgressBar {}
  barColor: #dbe6ec;
  trackColors: #009900, #e6eeee;
  color: #ffffff;
  paddingRight: 3;
  textIndent: 0;
  trackHeight: 15;
  verticalGap: 6;
  fontFamily: Arial;
  fontSize: 16;
  fontWeight: bold;
  }

  I can't change the 'barColor' and 'trackColors '.

  It seems very strange that you would be unable to modify these properties in flex 4.

  Any help would be greatly appreciated.

  Thank you

  Not with the skins of Spark-like default.  There are not as many styles in Spark

  skins.

• How to change the skin

  The skin looks to 'woodwork' I want to change the colors.

  Then try the "hamburger" + Add on (or Alt + T + A)