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 pages for ways of accessing data in the Document Object Model and for inspecting easily the JavaScript output. (We show in another section an example of a lightweight motion graphic).

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. You can compile the project file with the command-line compiler of Version 3.0 of Smart Mobile Studio.

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;