Lightweight Applications in Smart Pascal

The supplied Projects\Featured Demos\API\HTML5 DOM folder and the Smart Pascal forum have several examples of lightweight applications. In this demonstration based on Nico Wouterse's code we recreate the left panel of our widget demonstration. You can compare the Smart Pascal code below with our JavaScript code that displays the input widgets. See the following page for ways of accessing data in the Document Object Model.

The Smart Pascal code of the main unit follows. Open the project file in Smart Mobile Studio to see also the code of JElement and the small CSS file that we used.

Smart Pascal Code of Main Unit

uses W3C.HTML5, W3C.DOM, W3C.CSS, W3C.Console, JElement;

var div1 := TElement.Create('div', nil, '');
div1.SetAttribute('id', 'main');
  // Header
  TElement.Create('h5', div1, '', 'Input Types Text, Button, Number, Range, Checkbox and Radio');
  // Paragraph
  TElement.Create('p', div1, '', 'Please enter your forename.' );
  // Text box
  var text_box := TElement.Create('input', div1, '');
  text_box.SetAttribute('type', 'text');
  text_box.SetAttribute('id', 'tb');

  var para := TElement.Create('p', div1, '', ' ');
  para.SetAttribute('id', 'p1');

  // Button
  var btn1 := TElement.Create('button', div1, '', 'Show greeting');
  btn1.SetAttribute('id', 'btn1');

  TElement.Create('p', div1, '', 'Use spinner to change width of its box');
  // Spinner
  var spinner = TElement.Create('input', div1, '');
  spinner.SetAttribute('type', 'number');
  spinner.SetAttribute('id', 'resize');
  spinner.SetAttribute('value', '100');
  spinner.SetAttribute('min', '60');
  spinner.SetAttribute('max', '180');
  spinner.SetAttribute('step', '20');
  spinner.SetAttribute('title', 'Change the width');
  // Text area
  var text_area := TElement.Create('textarea', div1, '',
                                    'Slider controls border radius of this read-only textarea. Checking the box enables vertical resizing');
  text_area.SetAttribute('readonly', 'true');
  text_area.SetAttribute('id', 'ta');
  // Range
  var range = TElement.Create('input', div1, '');
  range.SetAttribute('id', 'rng1');
  range.SetAttribute('type', 'range');
  range.setAttribute('min', '0');
  range.setAttribute('max', '20');
  range.setAttribute('value', '8');
  // Output
  var output = TElement.Create('output', div1, '', '8');
  output.SetAttribute('id', 'output1');
  // Line break
  TElement.Create('br', div1, '');
  // Checkbox
  var checkbox = TElement.Create('input', div1, '');
  checkbox.SetAttribute('type', 'checkbox');
  checkbox.SetAttribute('id', 'cb');
  checkbox.SetProperty('checked', 'true');
  // Label
  TElement.Create('label', div1, '', 'Resizeable textarea');
  // Radio buttons
  TElement.Create('br', div1, '');
  var rb1 = TElement.Create('input', div1, '');
  rb1.SetAttribute('type', 'radio');
  rb1.SetAttribute('id', 'rbtn1');
  rb1.SetAttribute('name', 'colours');
  asm
    document.getElementById('rbtn1').checked = 'true';
  end;
  TElement.Create('label', div1, '', 'Yellow panel');

  TElement.Create('br', div1, '');
  var rb2 = TElement.Create('input', div1, '');
  rb2.SetAttribute('type', 'radio');
  rb2.SetAttribute('name', 'colours');
  TElement.Create('label', div1, '', 'Green panel');
  TElement.Create('br', div1, '');
  var rb3 = TElement.Create('input', div1, '');
  rb3.SetAttribute('type', 'radio');
  rb3.SetAttribute('name', 'colours');
  TElement.Create('label', div1, '', 'Blue panel');

// Event handlers
JGlobalEventHandlers(btn1.AsNode).onClick := lambda(e: JEvent)
  Document.getElementById('p1').innerHTML := 'Hello, ' + JHTMLInputElement(Document.getElementById('tb')).value;
end;

JGlobalEventHandlers(spinner.AsNode).onChange := lambda(e: JEvent)
  asm
    document.getElementById('resize').style.width = document.getElementById('resize').value + 'px';
  end;
end;

JGlobalEventHandlers(range.AsNode).onChange := lambda(e: JEvent)
  asm
    document.getElementById('ta').style.borderRadius = document.getElementById('rng1').value + 'px';
    document.getElementById('output1').value = document.getElementById('rng1').value;
  end;
end;

JGlobalEventHandlers(checkbox.AsNode).onClick := lambda(e: JEvent)
  asm
   if (document.getElementById('cb').checked)
     {document.getElementById('ta').style.resize = 'vertical'}
   else
     {document.getElementById('ta').style.resize = 'none'};
  end;
end;

JGlobalEventHandlers(rb1.AsNode).onClick := lambda(e: JEvent)
  asm
    document.getElementById('main').style.backgroundColor = 'yellow';
  end;
end;

JGlobalEventHandlers(rb2.AsNode).onClick := lambda(e: JEvent)
 asm
   document.getElementById('main').style.backgroundColor = 'green';
 end;
end;

JGlobalEventHandlers(rb3.AsNode).onClick := lambda(e: JEvent)
  asm
    document.getElementById('main').style.backgroundColor = 'blue';
  end;
end;
    
Programming - a skill for life!

Developing graphical web pages including 3D, input from keyboard and mouse and storing and loading data