Compatible with all technologies
Live examples
Input Components Suite Quick Start
Last Update
13 August , 2007

ICSuite Quick Start Example
1. Read Installation and Integration documentation section.

2. Import ICSuite-2.x.x.css, ICSuite-2.x.x.js, ICSuite-2.x.x-custom-settings.js and ICSuite-2.x.x-predefined-masks.js file into your web page.
 
...
<!--Wiseblocks import - The CSS file should be in the head section.-->
<link rel="stylesheet" type="text/css" 
href="[/path/]WiseBlocks_resources/css/ICSuite-2.0.8.css" />

<!--Wiseblocks import - The JS files should be in the body section. -->
<script type="text/javascript"
src="[/path/]WiseBlocks_resources/js/ICSuite-2.0.8.js"></script>

<!--Wiseblocks import - The custom setting file is where you customize ICSuite. -->
<script type="text/javascript"
src="[/path/]WiseBlocks_resources/js/ICSuite-2.0.8-custom-settings.js"></script>

<!--Wiseblocks import - Import this file only if you want to use the predefined masks. -->
<script type="text/javascript"
src="[/path/]WiseBlocks_resources/js/ICSuite-2.0.8-predefined-masks.js"></script>

<!-- Optional: [/path/] is a relative or absolute path to unzipped "WiseBlocks_resources"-->
...

Warning! If you get the message "Wiseblocks ICSuite license has not been found." it is probably because you are running ICSuite on a domain name without a license. You can either get a 30 days trial license or run your test on a local machine.

3.a. Apply a predefined mask to the class property of an input text field.
  <-- Simple usage -->
<input
    type="text"
    name="value"
    value="-123456789.01"
    class="IC_Num">
3.b : Result
4.a. Specify any other class name and create your own definition.
  
   <-- Advances usage -->
<input
    type="text"
    name="ammount"
    value="-123456789.01"
    class="MyCustomFormat">

<script type="text/javascript">
      IC.MasterDecorator.process({
          className : "MyCustomFormat",
          type : "numeric/spinner/calc",
          cursorOnFocus : "beforeDecimal", 
          mask : "###,###,###,###,###.00",
          decimalSeparator : ".",     
          thousandsSeparator : ",", 
          conditions : [NegativeRed], 
          highlight : HighlightBox.BLUE});
</script>
4.b : Result

4.c. We suggest saving all your custom definitions classes into ICSuite-2.x.x-custom-setting.js to make the maintenance of your application easier.

5. Edit ICSuite-2.0.x-custom-setting.js and add custom parameters to this file as needed.

Best Practice recommandation for Input Components Suite users.
  1. Use as much as possible the predefined masks. Send us your masks if you think that they could be usefull for other people. We will ensure their maintenance in the future versions of ICSuite.
  2. When you create masks, prefixe them with CUSTOM_Num_ for numeric masks, CUSTOM_Txt_ for text masks, CUSTOM_DateTime_ for date masks and CUSTOM_Deco_ for decorator masks.
  3. You can merge definitions as you want for a single input field using className binding. Maybe combining several masks masks could prevent you from having to create a new class.

    Example
    class="IC_Num IC_Deco_Blue"
Next step
Take a look at Users Guide for detailed reference.

 


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