Compatible with all technologies
Live examples
Input Components Suite Skins
Last Updated
16 Mar, 2007
Index
How to use existing graphical helper skin?
How to create my own skin for the graphical helpers?
How can I change the style of my calculator?
How can I change the style of my calendar?

How to use existing graphical helper skins

SKIN_XP_BLUE SKIN_XP_SILVER

SKIN_ICS_BLUE

SKIN_ICS_GRAY

SKIN_ICS_GREEN

SKIN_ICS_RED
How to use the available skins into your application.

You can either set the skin at the global level or at a class definition level. The constants above the examples just beside are used to refer to a Input Components Suite embedded skin. The default is SKIN_XP_BLUE.

Example at the global level.
IC.MasterDecorator.setGlobals({
 conditions : [NegativeRed],
 highlight  : HighlightBox.BLUE,
 skin       : IC.MasterDecorator.SKIN_ICS_BLUE});

Example at the class definition.
{className:"CUSTOM_Skin_Green",
 skin: IC.MasterDecorator.SKIN_ICS_GREEN}

{className : "CUSTOM_Num",
 type : "numeric/spinner/calc",
 mask : "###,###,###.##",
 highlight  : HighlightBox.GRAY,
 skin: IC.MasterDecorator.SKIN_XP_SILVER}
CUSTOM_Num Example:

*The graphical helper image size is based on the input field size. For instance the ICS skin provide two sets of images. See the section bellow for a better understanding.

How to create your own graphical helper skins
You need a single image

Standard Calulator

You need to define the positions of your images in ICSuite2.x.x-custom-setting.js
heights The input fields mimimum height that will be associated with these images. You can define many heights for the same definition. In the example beside there are two heights, so two sets of buttons.
imageName The image used for the definition.
offsetsY The verticall position of all graphical helper images.
offsetsX The horizontal position of all graphical helper images. The API consider that your images are verticaly aligned.
normal The column pixel position that contains the images used in normal mode.
over The column pixel position that contains the images used when the mouse is over the graphical helper image.
down The column pixel position that contains the images used when the user click on the graphical helper image.
path The path used to get the picture. The path is relative to IC.MasterDecorator.setImagesPath(...)


Code the class definition

Use the variable that contains the image definition for the property skin. 
{className:"CUSTOM_My_Skin",
 skin: my_skin}


Send us your images and we may code the definition and consider to integrate the new skin in the product.		 Examples
var my_skin = {
   heights:{
      18:{
         imageName:"ics_blue.gif",
         size:{
            calculator:[16,20],
            calendar:[16,20],
            spinUp:[16,7],
            spinHandle:[16,7],
            spinDown:[16,6],
            arrowLeft:[9,15],
            arrowRight:[9,15]
         },
            offsetsY:{
            calculator :0,
            spinUp:22,
            spinHandle:29,
            spinDown:36,
            calendar:44,
            arrowLeft:65,
            arrowRight:82
         },
            offsetsX:{
            normal:0,
            over:21,
            down:42
         }
      },
      16:{
         imageName:"ics_blue.gif",
         size:{
            calculator:[12,15],
            calendar:[12,15],
            spinUp:[12,5],
            spinHandle:[12,6],
            spinDown:[12,4],
            arrowLeft:[9,15],
            arrowRight:[9,15]
         },
            offsetsY:{
            calculator :98,
            spinUp:115,
            spinHandle:120,
            spinDown:126,
            calendar:132,
            arrowLeft:65,
            arrowRight:82
          },
            offsetsX:{
            normal:0,
            over:21,
            down:42
          }
       }
    },
    path:"/my_skin_path"};

How can I change the style of my calculator?

You have to create your own CSS file based on this template: WiseBlocksCalculator.css. In this file you can modify the properties of all existing attributes to change the look of the calculator. Change the classname WiseBlocksCalc for another one and provide the information in your cusom mask definition using calcTemplate attribute. 
className : "CUSTOM_Calc_MyCalculator",
type : "numeric/calc", 
calcTemplate : "WiseBlocksCalc"

How can I change the style of my calendar?

You have to create your own CSS file based on this template: WiseBlocksCalendar.css. In this file you can modify the properties of all existing attributes to change the look of the calendar. Change the classname WiseBlocksCalendar for another one and provide the information in your custom mask definition using the calendarTemplate attribute. 
className:"CUSTOM_Calendar_MyCalendar",
type:"dateTime/calendar",
mask:"M/d/y",
calendarTemplate : "WiseblocksCalendar"
 


InputComponents are trademarks of WiseBlocks. Copyright ©2007. All Rights Reserved.