This document describes how the 123basic UI (short: 123 UI) may look like. Note: This document is likely to be changed and nothing has been implemented yet.

Requirements

• Easy to use
• Communicate with existing JavaScript, 123basic code and server (REST API)
• Cross platform (Supported platforms should still be supported)
• Do not reinvent the wheel (Use existing technologies and reuse them)

Structure

The UI will be based on jQuery UI, because it is very flexible, can be customized and I have experience using it. Further jQuery UI is known to have a consistent API and does not reinvent the wheel every major version. Twitter Bootstrap on the other hand just recently threw everything away and redesigned the API completely. The forms themselves will be defined in an UI block, that has a specially trimmed syntax for defining UI widgets. This widgets will be transformed into HTML elements. The positioning/height/formatting will be done in CSS (and optionally code). The API itself will consist of mainly 3 classes:

• UIHandler: This is an abstract type that contains all the handlers for UI elements. 123basic supports inheritance, so you can easily extend UIHandler and implement your own handlers for UI elements
• UIWidget: A widget in the UI.
• UIEvent: The parameter in UIHandler which describes what really happened

UI Elements

• Buttons
• Labels
• Slider
• Spinner (number picker)
• Progress bar
• Textarea / Textfield
• Dialog / Windows
• Accordion
• Menu
• Tabs
• Tooltips
• Panel (Container)
• Canvas

Sample

// This segment describes the UI as an HTML structure
TYPE MyHandler EXTENDS UIHandler
  FUNCTION OnClick: event AS UIEvent
    ALERT "Clicked on button " + event.widget.Text$()
    AJAX "{ hallo: yes }", "http://google.de/", self // UI Ajax Request
  ENDFUNCTION
  FUNCTION OnValueChanged: event AS UIEvent
    ALERT "Value changed on slider " + event.widget.Text$()
  ENDFUNCTION
  FUNCTION OnAjaxResponse: data AS UIAjaxData
    ALERT "got response"
  ENDFUNCTION
ENDTYPE
LOCAL handler AS MyHandler

LOCAL form AS UIForm
form.Init "Test Form", "#myForm" // title, id

LOCAL button AS UIWidget
button = CREATEBUTTON("#myButton") // creates a button with the specified ID
button.OnClick handler
form.Add button


LOCAL slider AS UIWidget
slider = CREATESLIDER("#mySlider") // creates a label with the specified ID
slider.OnValueChanged handler
form.Add slider