Widget Samples

Numeric Keypad

This example creates a reusable control which presents a numeric keypad. The keypad accepts parameters to map it to a specific OID to update, as well as name and a default value.

Figure 57 - Keypad Custom Widget

The widget also defines a custom configuration panel, which is presented within PanelBuilder’s “Edit Component” dialog.

Figure 58 - Keypad Config Dialog

The widget descriptor to generate this widget is shown below. Comments have been added before various sections of the code to identify their functionality.

The config block defines four parameters:

·         Ext.Punch.Name – OID whose value the punchpad will manipulate

·         Ext.Punch.DisplayName – Name to display in the title bar of the widget

·         Ext.Punch.Default – Value to set if the DFLT button is pressed

·         Ext.Punch.DefaultEnabled – Enables/Disables the DFLT button

There is an oglml block within the config section to specify the layout of the configuration parameters in the Edit Component dialog.

This widget implements an ogScript function, addDigit(), to update the param value as the user types in the keypad.

The oglml section lays out the keypad using a table container, and hooks the addDigit() function to the buttonpress handler for each digit button.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<widgets>

    <widgetdescriptor id="com.rossvideo.widget.punchpad v3"

icon="com.rossvideo.punchpad.png" inheritsrc="true" name="Punchpad v3">

 

<!--Configuration setion starts here-->

      <config>

       <!-- Variables that appear in the edit mode for the grid file and that are part of the declaration for the widget -->

 

<!—Config parameter declarations start here--> 

       <params>

          <param access="1" maxlength="0" name="OID To use" oid="Ext.Punch.Name"

type="STRING" value="OID not specified" widget="0"/>

          <param access="1" maxlength="0" name="OID To use"

oid="Ext.Punch.DisplayName" type="STRING"

value="name not specified" widget="0"/>

          <param access="1" constrainttype="INT_NULL" name="Ext.Punch.Default"

oid="Ext.Punch.Default" precision="0" strvalue="0" type="INT16"

value="0" widget="0"/>

          <param access="1" constrainttype="INT_CHOICE" name="Default Enabled"

oid="Ext.Punch.DefaultEnabled" precision="0" strvalue="On"

type="INT16" value="1" widget="8">          

             <constraint key="0">Off</constraint>

             <constraint key="1">On</constraint>         

          </param>

       </params>

       <!-- Definition for the UI that appears in edit mode -->

 

<!—Config parameter layout starts here-->

       <oglml>

          <abs height="500" left="0" top="272" width="334">

             <table height="150" left="0" top="0" width="800">

                <tr>

                   <label anchor="east" fill="none" insets="0,0,0,5"

name="OID To Use" weightx="0.0"/>

                   <param anchor="west" element="0" fill="both"

oid="Ext.Punch.Name" showlabel="false"

weightx="1.0" weighty="1.0"/>

                </tr>

                <tr>

                   <label anchor="east" fill="none" insets="0,0,0,5"

name="Title" weightx="0.0"/>

                   <param anchor="west" element="0" fill="both"

oid="Ext.Punch.DisplayName" showlabel="false"

weightx="1.0" weighty="1.0"/>

                </tr>

                <tr>

                   <label anchor="east" fill="none" insets="0,0,0,5"

name="Default Value" weightx="0.0"/>

                   <param anchor="west" element="0" fill="both"

oid="Ext.Punch.Default" showlabel="false" weightx="1.0"

weighty="1.0"/>

                </tr>

                <tr>

                   <label anchor="east" fill="none" insets="0,0,0,5"

name="Default Value Enabled" weightx="0.0"/>

                   <param anchor="west" element="0" fill="both"

oid="Ext.Punch.DefaultEnabled" showlabel="false"

weightx="1.0" weighty="1.0"/>

                </tr>               

             </table>

          </abs>        

       </oglml>      

    </config>

   

<!-- Definition for the widget UI itself -->

    <oglml>

 

       <!-- Temporary internal variables to the widget -->  

<!—Local parameter declarations start here-->  

       <params>

          <param access="1" maxlength="0" name="Punch.Temp.Number"

oid="Punch.Temp.Number" type="STRING" value="" widget="0"/>

       </params>

      

       <!-- Global functions for the widget to use -->   

       <api id="addDigit" name="addDigit">

function addDigit(digit)

            {

            var value=params.getValue('Punch.Temp.Number',0);

            var i;

            if (digit=='-')

               {

               if (value[0] != '-')

                 value = '-' + value;

               else

                 value = value.substring(1);

               }

            else if (digit == '.')

               {

               // is there a '.' already?

               for (i=0;i&lt;value.length;i++)

                  {

                  if (value[i]=='.')

                     return;

                  }

               value +='.';

               }

            else if (value[0] != '0')

                value += digit;

            else // first digit is a 0

                value = digit;

            params.setValue('Punch.Temp.Number',0,value);

            }

</api>  

 

       <style id="TextStyle" name="TextStyle"

value="size:20;font:bold;bg#000000;fg#FFFFFF;"/>

       <abs height="317" left="641" style="bdr:etched;" top="355"

virtualheight="317" virtualwidth="371" width="371">

          <abs left="147" top="174"/>

 

<!—Title bar begins here-->  

             <label height="23" id="Var.Name" left="25"

name="%value['Ext.Punch.DisplayName'][0]%"

style="size:16;font:bold;txt-align:west;" top="14" width="105"/>

             <param expand="true" height="32" oid="Punch.Temp.Number" right="20"

showlabel="false" top="10" width="200"/>

         

<!—Table starts here-->

<table bottom="10" left="20" right="20" top="49">

 

<!—Table row showing buttons 7, 8, 9, DFLT-->

             <tr>

                <button buttontype="push" colspan="1" fill="both" height="43"

name="7" rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">addDigit('7');</task>

                </button>

                <button buttontype="push" colspan="1" fill="both" height="43"

name="8" rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">addDigit('8');</task>

                </button>

                <button buttontype="push" colspan="1" fill="both" height="43"

name="9" rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">addDigit('9');</task>

                </button>

                <button buttontype="push" colspan="1" fill="both" height="43"

name="DFLT" rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">

var enabled =

params.getValue('Ext.Punch.DefaultEnabled',0);

                      var value = params.getValue('Ext.Punch.Default',0);                     

                      if (enabled == 0)

                        return;

                      params.setValue('Punch.Temp.Number', 0,

value.toString());       

                    </task>

                </button>

             </tr>

 

<!—Table row showing buttons 4, 5, 6, CLR-->

             <tr>

                 <button buttontype="push" colspan="1" fill="both" height="43"

name="4" rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">addDigit('4');</task>

                 </button>

                 <button buttontype="push" colspan="1" fill="both" height="43"

name="5" rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">addDigit('5');</task>

                 </button>

                 <button buttontype="push" colspan="1" fill="both" height="43"

name="6" rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">addDigit('6');</task>

                 </button>

                 <button buttontype="push" colspan="1" fill="both" height="43"

name="CLR" rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task asktype="ogscript">

params.setValue('Punch.Temp.Number', 0, '0');

</task>

                 </button>

             </tr>

 

<!—Table row showing buttons 1, 2, 3, Enter-->

<tr>

                <button buttontype="push" colspan="1" fill="both" height="43"

name="1" rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">addDigit('1');</task>

                </button>

                <button buttontype="push" colspan="1" fill="both" height="43"

name="2" rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">addDigit('2');</task>

                </button>

                <button buttontype="push" colspan="1" fill="both" height="43"

name="3" rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">addDigit('3');;</task>

                </button>

                <button buttontype="push" colspan="1" fill="both" height="43"

name="ENTR" rowspan="2" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">

params.setValue('%value['Ext.Punch.Name'][0]%',0,

params.getValue('Punch.Temp.Number',0));

                      params.setValue('Punch.Temp.Number', 0, '0');                     

                   </task>

                </button>

             </tr>

 

<!—Table row showing buttons +/- 0-->

             <tr>

                <button buttontype="push" colspan="1" fill="both" height="43"

name="+/-" rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">addDigit('-');</task>

                </button>

                <button buttontype="push" colspan="1" fill="both" height="43"

name="0" rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">addDigit('0');;</task>

                </button>

                <button buttontype="push" colspan="1" fill="both" height="43"

name="." rowspan="1" style="style:TextStyle;"

weightx="1.0" weighty="1.0" width="58">

                   <task tasktype="ogscript">addDigit('.');</task>

                </button>

             </tr>

          </table>

       </abs>

    </oglml>

</widgetdescriptor>

</widgets>