Dyalog MiServer 3 Sample Site

The Dyalog Control Input enhances the base HTML input element in a number of ways.

The first argument specifies the type of input field. HTML5 specifies a wide variety of input type; however different browsers vary in their support for these additional types.

The second argument specifies the initial value for the input field.

The third and fourth arguments specify the label and label position for the input field.

:Class InputSimple : MiPageSample 
⍝ Control:: _DC.Input _DC.Table 
⍝ Description:: Text, number, password, and range Input elements 
 
    ∇ Compose;tab 
      :Access Public 
      
      Add WrapFollowing'p' 
      ⍝ The Dyalog Control Input enhances the base HTML input element in a number of ways. 
      ⍝ 
      ⍝ The first argument specifies the type of input field.  HTML5 specifies a wide variety of 
      ⍝ input type; however different browsers vary in their support for these additional types. 
      ⍝ 
      ⍝ The second argument specifies the initial value for the input field. 
      ⍝ 
      ⍝ The third and fourth arguments specify the label and label position for the input field. 
      
      tab←Add _.Table(6 3⍴⊂'')(5 3⍴⊂'')1 
      tab.Data[1;]←'Description' 'Input' 'Output' 
      tab.Data[2;1 2]←'Text input'('inp1'New _.Input'text' '(optional)' 'First Name: ') 
      tab.Data[3;1 2]←'Text input (label on right) '('inp2'New _.Input'text' '' ' Last Name' 'right') 
      tab.Data[4;1 2]←'Number input'('inp3'New _.Input'number' '' 'Age: ') 
      tab.Data[5;1 2]←'Password input'('inp4'New _.Input'password' '' 'Password: ') 
      tab.Data[6;1 2]←'Range input'('inp5'('min' 0)('max' 10)New _.Input'range' '' 'Ranking: ') 
      tab.CellAttr[;3]←'id=out'∘,¨⍕¨⍳5 
      
      Add _.Handler'input' 'change' 'myCallback' 
    ∇ 
 
    ∇ r←myCallback 
      :Access public 
      r←('#out',3↓_what)Replace' Entered: ',(1+'4'∊_what)⊃_value'(that''s a secret)' 
    ∇ 
 
:EndClass