glimmer-dsl-libui 0.4.6 → 0.4.10

data/README.md

@@ -1,9 +1,9 @@
-# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.4.6
+# [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=85 />](https://github.com/AndyObtiva/glimmer) Glimmer DSL for LibUI 0.4.10
 ## Prerequisite-Free Ruby Desktop Development GUI Library
 [![Gem Version](https://badge.fury.io/rb/glimmer-dsl-libui.svg)](http://badge.fury.io/rb/glimmer-dsl-libui)
 [![Join the chat at https://gitter.im/AndyObtiva/glimmer](https://badges.gitter.im/AndyObtiva/glimmer.svg)](https://gitter.im/AndyObtiva/glimmer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [LibUI](https://github.com/kojix2/LibUI) is a prerequisite-free Ruby desktop development GUI library. No need to pre-install any prerequisites. Just install the gem and have platform-independent native GUI that just works!
+[Glimmer](https://github.com/AndyObtiva/glimmer) DSL for [LibUI](https://github.com/kojix2/LibUI) is a prerequisite-free Ruby desktop development GUI (Graphical User Interface) library. No need to pre-install any prerequisites. Just install the [gem](https://rubygems.org/gems/glimmer-dsl-libui) and have platform-independent native GUI that just works!
 
 Mac | Windows | Linux
 ----|---------|------
@@ -267,6 +267,7 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
       - [Button Counter](#button-counter)
       - [Color The Circles](#color-the-circles)
       - [Control Gallery](#control-gallery)
+      - [CPU Percentage](#cpu-percentage)
       - [Custom Draw Text](#custom-draw-text)
       - [Dynamic Area](#dynamic-area)
       - [Editable Column Table](#editable-column-table)
@@ -373,7 +374,7 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.4.6'
+gem 'glimmer-dsl-libui', '~> 0.4.10'
 ```
 
 Add `require 'glimmer-dsl-libui'` at the top, and then `include Glimmer` into the top-level main object for testing or into an actual class for serious usage.
@@ -460,7 +461,7 @@ Keyword(Args) | Properties | Listeners
 `checkbox_text_column(name as String)` | `editable` (Boolean), `editable_checkbox` (Boolean), `editable_text` (Boolean) | None
 `checkbox_text_color_column(name as String)` | `editable` (Boolean), `editable_checkbox` (Boolean), `editable_text` (Boolean) | None
 `check_menu_item(text as String)` | `checked` (Boolean) | `on_clicked`
-`combobox` | `items` (`Array` of `String`), `selected` (`Integer`) | `on_selected`
+`combobox` | `items` (`Array` of `String`), `selected` (`Integer`), `selected_item` (`String`) | `on_selected`
 `color_button` | `color` (Array of `red` as `Float`, `green` as `Float`, `blue` as `Float`, `alpha` as `Float`), `red` as `Float`, `green` as `Float`, `blue` as `Float`, `alpha` as `Float` | `on_changed`
 `date_picker` | `time` (`Hash` of keys: `sec` as `Integer`, `min` as `Integer`, `hour` as `Integer`, `mday` as `Integer`, `mon` as `Integer`, `year` as `Integer`, `wday` as `Integer`, `yday` as `Integer`, `dst` as Boolean) | `on_changed`
 `date_time_picker` | `time` (`Hash` of keys: `sec` as `Integer`, `min` as `Integer`, `hour` as `Integer`, `mday` as `Integer`, `mon` as `Integer`, `year` as `Integer`, `wday` as `Integer`, `yday` as `Integer`, `dst` as Boolean) | `on_changed`
@@ -627,11 +628,11 @@ class FormTable
   
   def initialize
     @data = [
-      ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO', '80014'],
-      ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA', '02101'],
-      ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL', '60007'],
-      ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA', '98101'],
-      ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA', '90001'],
+      ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'],
+      ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'],
+      ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'],
+      ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'],
+      ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'],
     ]
   end
   
@@ -1382,14 +1383,24 @@ Data-binding supports utilizing the [MVP (Model View Presenter)](https://en.wiki
 ![MVP](https://www.researchgate.net/profile/Gilles-Perrouin/publication/320249584/figure/fig8/AS:668260987068418@1536337243385/Model-view-presenter-architecture.png)
 
 [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) supports bidirectional (two-way) data-binding of the following controls/properties via the `<=>` operator (indicating data is moving in both directions between View and Model):
+- `checkbox`: `checked`
+- `check_menu_item`: `checked`
 - `color_button`: `color`
+- `combobox`: `selected`, `selected_item`
+- `date_picker`: `time`
+- `date_time_picker`: `time`
+- `editable_combobox`: `text`
 - `entry`: `text`
 - `font_button`: `font`
 - `multiline_entry`: `text`
 - `non_wrapping_multiline_entry`: `text`
+- `radio_buttons`: `selected`
+- `radio_menu_item`: `checked`
 - `search_entry`: `text`
 - `slider`: `value`
 - `spinbox`: `value`
+- `table`: `cell_rows` (explicit data-binding by using `<=>` and [implicit data-binding](#table-api) by assigning value directly)
+- `time_picker`: `time`
 
 Example of bidirectional data-binding:
 
@@ -1439,6 +1450,11 @@ To summarize the data-binding API:
 
 This is also known as the [Glimmer Shine](https://github.com/AndyObtiva/glimmer-dsl-swt/blob/master/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md#shine) syntax for data-binding, a [Glimmer](https://github.com/AndyObtiva/glimmer)-only unique innovation that takes advantage of [Ruby](https://www.ruby-lang.org/en/)'s highly expressive syntax and malleable DSL support.
 
+Data-bound model attribute can be:
+- **Direct:** `Symbol` representing attribute reader/writer (e.g. `[person, :name`])
+- **Nested:** `String` representing nested attribute path (e.g. `[company, 'address.street']`). That results in "nested data-binding"
+- **Indexed:** `String` containing array attribute index (e.g. `[customer, 'addresses[0].street']`). That results in "indexed data-binding"
+
 Data-binding options include:
 - `before_read {|value| ...}`: performs an operation before reading data from Model to update the View.
 - `on_read {|value| ...}`: converts value read from Model to update the View.
@@ -1446,7 +1462,7 @@ Data-binding options include:
 - `before_write {|value| ...}`: performs an operation before writing data to Model from View.
 - `on_write {|value| ...}`: converts value read from View to update the Model.
 - `after_write {|converted_value| ...}`: performs an operation after writing to Model from View.
-- `computed_by attribute` or `computed_by [attribute1, attribute2, ...]`: indicates model attribute is computed from specified attribute(s), thus updated when they are updated (see in [Login example version 2](/examples/login2.rb))
+- `computed_by attribute` or `computed_by [attribute1, attribute2, ...]`: indicates model attribute is computed from specified attribute(s), thus updated when they are updated (see in [Login example version 2](/examples/login2.rb)). That is known as "computed data-binding".
 
 Note that with both `on_read` and `on_write` converters, you could pass a `Symbol` representing the name of a method on the value object to invoke.
 
@@ -1479,268 +1495,7 @@ Learn more from data-binding usage in [Login](#login) (4 data-binding versions),
 ### Original API
 
 Here are all the lower-level [LibUI](https://github.com/kojix2/LibUI) API methods utilized by [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui):
-- `alloc_control`
-- `area_begin_user_window_move`
-- `area_begin_user_window_resize`
-- `area_queue_redraw_all`
-- `area_scroll_to`
-- `area_set_size`
-- `attribute_color`
-- `attribute_family`
-- `attribute_features`
-- `attribute_get_type`
-- `attribute_italic`
-- `attribute_size`
-- `attribute_stretch`
-- `attribute_underline`
-- `attribute_underline_color`
-- `attribute_weight`
-- `attributed_string_append_unattributed`
-- `attributed_string_byte_index_to_grapheme`
-- `attributed_string_delete`
-- `attributed_string_for_each_attribute`
-- `attributed_string_grapheme_to_byte_index`
-- `attributed_string_insert_at_unattributed`
-- `attributed_string_len`
-- `attributed_string_num_graphemes`
-- `attributed_string_set_attribute`
-- `attributed_string_string`
-- `box_append`
-- `box_delete`
-- `box_padded`
-- `box_set_padded`
-- `button_on_clicked`
-- `button_set_text`
-- `button_text`
-- `checkbox_checked`
-- `checkbox_on_toggled`
-- `checkbox_set_checked`
-- `checkbox_set_text`
-- `checkbox_text`
-- `color_button_color`
-- `color_button_on_changed`
-- `color_button_set_color`
-- `combobox_append`
-- `combobox_on_selected`
-- `combobox_selected`
-- `combobox_set_selected`
-- `control_destroy`
-- `control_disable`
-- `control_enable`
-- `control_enabled`
-- `control_enabled_to_user`
-- `control_handle`
-- `control_hide`
-- `control_parent`
-- `control_set_parent`
-- `control_show`
-- `control_toplevel`
-- `control_verify_set_parent`
-- `control_visible`
-- `date_time_picker_on_changed`
-- `date_time_picker_set_time`
-- `date_time_picker_time`
-- `draw_clip`
-- `draw_fill`
-- `draw_free_path`
-- `draw_free_text_layout`
-- `draw_matrix_invert`
-- `draw_matrix_invertible`
-- `draw_matrix_multiply`
-- `draw_matrix_rotate`
-- `draw_matrix_scale`
-- `draw_matrix_set_identity`
-- `draw_matrix_skew`
-- `draw_matrix_transform_point`
-- `draw_matrix_transform_size`
-- `draw_matrix_translate`
-- `draw_new_path`
-- `draw_new_text_layout`
-- `draw_path_add_rectangle`
-- `draw_path_arc_to`
-- `draw_path_bezier_to`
-- `draw_path_close_figure`
-- `draw_path_end`
-- `draw_path_line_to`
-- `draw_path_new_figure`
-- `draw_path_new_figure_with_arc`
-- `draw_restore`
-- `draw_save`
-- `draw_stroke`
-- `draw_text`
-- `draw_text_layout_extents`
-- `draw_transform`
-- `editable_combobox_append`
-- `editable_combobox_on_changed`
-- `editable_combobox_set_text`
-- `editable_combobox_text`
-- `entry_on_changed`
-- `entry_read_only`
-- `entry_set_read_only`
-- `entry_set_text`
-- `entry_text`
-- `ffi_lib`
-- `ffi_lib=`
-- `font_button_font`
-- `font_button_on_changed`
-- `form_append`
-- `form_delete`
-- `form_padded`
-- `form_set_padded`
-- `free_attribute`
-- `free_attributed_string`
-- `free_control`
-- `free_font_button_font`
-- `free_image`
-- `free_init_error`
-- `free_open_type_features`
-- `free_table_model`
-- `free_table_value`
-- `free_text`
-- `grid_append`
-- `grid_insert_at`
-- `grid_padded`
-- `grid_set_padded`
-- `group_margined`
-- `group_set_child`
-- `group_set_margined`
-- `group_set_title`
-- `group_title`
-- `image_append`
-- `init`
-- `label_set_text`
-- `label_text`
-- `main`
-- `main_step`
-- `main_steps`
-- `menu_append_about_item`
-- `menu_append_check_item`
-- `menu_append_item`
-- `menu_append_preferences_item`
-- `menu_append_quit_item`
-- `menu_append_separator`
-- `menu_item_checked`
-- `menu_item_disable`
-- `menu_item_enable`
-- `menu_item_on_clicked`
-- `menu_item_set_checked`
-- `msg_box`
-- `msg_box_error`
-- `multiline_entry_append`
-- `multiline_entry_on_changed`
-- `multiline_entry_read_only`
-- `multiline_entry_set_read_only`
-- `multiline_entry_set_text`
-- `multiline_entry_text`
-- `new_area`
-- `new_attributed_string`
-- `new_background_attribute`
-- `new_button`
-- `new_checkbox`
-- `new_color_attribute`
-- `new_color_button`
-- `new_combobox`
-- `new_date_picker`
-- `new_date_time_picker`
-- `new_editable_combobox`
-- `new_entry`
-- `new_family_attribute`
-- `new_features_attribute`
-- `new_font_button`
-- `new_form`
-- `new_grid`
-- `new_group`
-- `new_horizontal_box`
-- `new_horizontal_separator`
-- `new_image`
-- `new_italic_attribute`
-- `new_label`
-- `new_menu`
-- `new_multiline_entry`
-- `new_non_wrapping_multiline_entry`
-- `new_open_type_features`
-- `new_password_entry`
-- `new_progress_bar`
-- `new_radio_buttons`
-- `new_scrolling_area`
-- `new_search_entry`
-- `new_size_attribute`
-- `new_slider`
-- `new_spinbox`
-- `new_stretch_attribute`
-- `new_tab`
-- `new_table`
-- `new_table_model`
-- `new_table_value_color`
-- `new_table_value_image`
-- `new_table_value_int`
-- `new_table_value_string`
-- `new_time_picker`
-- `new_underline_attribute`
-- `new_underline_color_attribute`
-- `new_vertical_box`
-- `new_vertical_separator`
-- `new_weight_attribute`
-- `new_window`
-- `on_should_quit`
-- `open_file`
-- `open_type_features_add`
-- `open_type_features_clone`
-- `open_type_features_for_each`
-- `open_type_features_get`
-- `open_type_features_remove`
-- `progress_bar_set_value`
-- `progress_bar_value`
-- `queue_main`
-- `quit`
-- `radio_buttons_append`
-- `radio_buttons_on_selected`
-- `radio_buttons_selected`
-- `radio_buttons_set_selected`
-- `save_file`
-- `slider_on_changed`
-- `slider_set_value`
-- `slider_value`
-- `spinbox_on_changed`
-- `spinbox_set_value`
-- `spinbox_value`
-- `tab_append`
-- `tab_delete`
-- `tab_insert_at`
-- `tab_margined`
-- `tab_num_pages`
-- `tab_set_margined`
-- `table_append_button_column`
-- `table_append_checkbox_column`
-- `table_append_checkbox_text_column`
-- `table_append_image_column`
-- `table_append_image_text_column`
-- `table_append_progress_bar_column`
-- `table_append_text_column`
-- `table_model_row_changed`
-- `table_model_row_deleted`
-- `table_model_row_inserted`
-- `table_value_color`
-- `table_value_get_type`
-- `table_value_image`
-- `table_value_int`
-- `table_value_string`
-- `timer`
-- `uninit`
-- `user_bug_cannot_set_parent_on_toplevel`
-- `window_borderless`
-- `window_content_size`
-- `window_fullscreen`
-- `window_margined`
-- `window_on_closing`
-- `window_on_content_size_changed`
-- `window_set_borderless`
-- `window_set_child`
-- `window_set_content_size`
-- `window_set_fullscreen`
-- `window_set_margined`
-- `window_set_title`
-- `window_title`
+`alloc_control`, `append_features`, `area_begin_user_window_move`, `area_begin_user_window_resize`, `area_queue_redraw_all`, `area_scroll_to`, `area_set_size`, `attribute_color`, `attribute_family`, `attribute_features`, `attribute_get_type`, `attribute_italic`, `attribute_size`, `attribute_stretch`, `attribute_underline`, `attribute_underline_color`, `attribute_weight`, `attributed_string_append_unattributed`, `attributed_string_byte_index_to_grapheme`, `attributed_string_delete`, `attributed_string_for_each_attribute`, `attributed_string_grapheme_to_byte_index`, `attributed_string_insert_at_unattributed`, `attributed_string_len`, `attributed_string_num_graphemes`, `attributed_string_set_attribute`, `attributed_string_string`, `box_append`, `box_delete`, `box_padded`, `box_set_padded`, `button_on_clicked`, `button_set_text`, `button_text`, `checkbox_checked`, `checkbox_on_toggled`, `checkbox_set_checked`, `checkbox_set_text`, `checkbox_text`, `color_button_color`, `color_button_on_changed`, `color_button_set_color`, `combobox_append`, `combobox_on_selected`, `combobox_selected`, `combobox_set_selected`, `control_destroy`, `control_disable`, `control_enable`, `control_enabled`, `control_enabled_to_user`, `control_handle`, `control_hide`, `control_parent`, `control_set_parent`, `control_show`, `control_toplevel`, `control_verify_set_parent`, `control_visible`, `date_time_picker_on_changed`, `date_time_picker_set_time`, `date_time_picker_time`, `draw_clip`, `draw_fill`, `draw_free_path`, `draw_free_text_layout`, `draw_matrix_invert`, `draw_matrix_invertible`, `draw_matrix_multiply`, `draw_matrix_rotate`, `draw_matrix_scale`, `draw_matrix_set_identity`, `draw_matrix_skew`, `draw_matrix_transform_point`, `draw_matrix_transform_size`, `draw_matrix_translate`, `draw_new_path`, `draw_new_text_layout`, `draw_path_add_rectangle`, `draw_path_arc_to`, `draw_path_bezier_to`, `draw_path_close_figure`, `draw_path_end`, `draw_path_line_to`, `draw_path_new_figure`, `draw_path_new_figure_with_arc`, `draw_restore`, `draw_save`, `draw_stroke`, `draw_text`, `draw_text_layout_extents`, `draw_transform`, `editable_combobox_append`, `editable_combobox_on_changed`, `editable_combobox_set_text`, `editable_combobox_text`, `entry_on_changed`, `entry_read_only`, `entry_set_read_only`, `entry_set_text`, `entry_text`, `ffi_lib`, `ffi_lib=`, `font_button_font`, `font_button_on_changed`, `form_append`, `form_delete`, `form_padded`, `form_set_padded`, `free_attribute`, `free_attributed_string`, `free_control`, `free_font_button_font`, `free_image`, `free_init_error`, `free_open_type_features`, `free_table_model`, `free_table_value`, `free_text`, `grid_append`, `grid_insert_at`, `grid_padded`, `grid_set_padded`, `group_margined`, `group_set_child`, `group_set_margined`, `group_set_title`, `group_title`, `image_append`, `init`, `label_set_text`, `label_text`, `main`, `main_step`, `main_steps`, `menu_append_about_item`, `menu_append_check_item`, `menu_append_item`, `menu_append_preferences_item`, `menu_append_quit_item`, `menu_append_separator`, `menu_item_checked`, `menu_item_disable`, `menu_item_enable`, `menu_item_on_clicked`, `menu_item_set_checked`, `msg_box`, `msg_box_error`, `multiline_entry_append`, `multiline_entry_on_changed`, `multiline_entry_read_only`, `multiline_entry_set_read_only`, `multiline_entry_set_text`, `multiline_entry_text`, `new_area`, `new_attributed_string`, `new_background_attribute`, `new_button`, `new_checkbox`, `new_color_attribute`, `new_color_button`, `new_combobox`, `new_date_picker`, `new_date_time_picker`, `new_editable_combobox`, `new_entry`, `new_family_attribute`, `new_features_attribute`, `new_font_button`, `new_form`, `new_grid`, `new_group`, `new_horizontal_box`, `new_horizontal_separator`, `new_image`, `new_italic_attribute`, `new_label`, `new_menu`, `new_multiline_entry`, `new_non_wrapping_multiline_entry`, `new_open_type_features`, `new_password_entry`, `new_progress_bar`, `new_radio_buttons`, `new_scrolling_area`, `new_search_entry`, `new_size_attribute`, `new_slider`, `new_spinbox`, `new_stretch_attribute`, `new_tab`, `new_table`, `new_table_model`, `new_table_value_color`, `new_table_value_image`, `new_table_value_int`, `new_table_value_string`, `new_time_picker`, `new_underline_attribute`, `new_underline_color_attribute`, `new_vertical_box`, `new_vertical_separator`, `new_weight_attribute`, `new_window`, `on_should_quit`, `open_file`, `open_type_features_add`, `open_type_features_clone`, `open_type_features_for_each`, `open_type_features_get`, `open_type_features_remove`, `progress_bar_set_value`, `progress_bar_value`, `queue_main`, `quit`, `radio_buttons_append`, `radio_buttons_on_selected`, `radio_buttons_selected`, `radio_buttons_set_selected`, `save_file`, `slider_on_changed`, `slider_set_value`, `slider_value`, `spinbox_on_changed`, `spinbox_set_value`, `spinbox_value`, `tab_append`, `tab_delete`, `tab_insert_at`, `tab_margined`, `tab_num_pages`, `tab_set_margined`, `table_append_button_column`, `table_append_checkbox_column`, `table_append_checkbox_text_column`, `table_append_image_column`, `table_append_image_text_column`, `table_append_progress_bar_column`, `table_append_text_column`, `table_model_row_changed`, `table_model_row_deleted`, `table_model_row_inserted`, `table_value_color`, `table_value_get_type`, `table_value_image`, `table_value_int`, `table_value_string`, `timer`, `uninit`, `user_bug_cannot_set_parent_on_toplevel`, `window_borderless`, `window_content_size`, `window_fullscreen`, `window_margined`, `window_on_closing`, `window_on_content_size_changed`, `window_set_borderless`, `window_set_child`, `window_set_content_size`, `window_set_fullscreen`, `window_set_margined`, `window_set_title`, `window_title`
 
 To learn more about the [LibUI](https://github.com/kojix2/LibUI) API exposed through [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui):
 - Check out [LibUI ffi.rb](https://github.com/kojix2/LibUI/blob/main/lib/libui/ffi.rb)
@@ -1878,7 +1633,7 @@ Example:
 
 ## Examples
 
-The following examples include reimplementions of the examples in the [LibUI](https://github.com/kojix2/LibUI) project utilizing the [Glimmer GUI DSL](#glimmer-gui-dsl-concepts) (with and without data-binding) as well as brand new examples.
+The following examples include reimplementions of the examples in the [LibUI](https://github.com/kojix2/LibUI) project utilizing the [Glimmer GUI DSL](#glimmer-gui-dsl-concepts) (with and without [data-binding](#data-binding)) as well as brand new examples.
 
 To browse all examples, simply launch the [Meta-Example](examples/meta_example.rb), which lists all examples and displays each example's code when selected. It also enables code editing to facilitate experimentation and learning.
 
@@ -2668,7 +2423,35 @@ UI.main
 UI.quit
 ```
 
-[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class DateTimePicker
+  include Glimmer
+  
+  attr_accessor :picked_time
+  
+  def launch
+    window('Date Time Pickers', 300, 200) {
+      vertical_box {
+        date_time_picker {
+          time <=> [self, :picked_time, after_write: ->(time) { p time }]
+        }
+      }
+      
+      on_closing do
+        puts 'Bye Bye'
+      end
+    }.show
+  end
+end
+
+DateTimePicker.new.launch
+```
+
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (without [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -3226,7 +3009,62 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-basic-table-button.png](images/glimmer-dsl-libui-mac-basic-table-button.png) ![glimmer-dsl-libui-mac-basic-table-button-deleted.png](images/glimmer-dsl-libui-mac-basic-table-button-deleted.png) | ![glimmer-dsl-libui-windows-basic-table-button.png](images/glimmer-dsl-libui-windows-basic-table-button.png) ![glimmer-dsl-libui-windows-basic-table-button-deleted.png](images/glimmer-dsl-libui-windows-basic-table-button-deleted.png) | ![glimmer-dsl-libui-linux-basic-table-button.png](images/glimmer-dsl-libui-linux-basic-table-button.png) ![glimmer-dsl-libui-linux-basic-table-button-deleted.png](images/glimmer-dsl-libui-linux-basic-table-button-deleted.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with explicit [data-binding](#data-binding)):
+
+```ruby
+# frozen_string_literal: true
+
+require 'glimmer-dsl-libui'
+
+class BasicTableButton
+  include Glimmer
+  
+  attr_accessor :data
+  
+  def initialize
+    @data = [
+      %w[cat meow delete],
+      %w[dog woof delete],
+      %w[chicken cock-a-doodle-doo delete],
+      %w[horse neigh delete],
+      %w[cow moo delete]
+    ]
+  end
+  
+  def launch
+    window('Animal sounds', 400, 200) {
+      horizontal_box {
+        table {
+          text_column('Animal')
+          text_column('Description')
+          button_column('Action') {
+            on_clicked do |row|
+              # Option 1: direct data deletion is the simpler solution
+#               @data.delete_at(row) # automatically deletes actual table row due to explicit data-binding
+              
+              # Option 2: cloning only to demonstrate table row deletion upon explicit setting of data attribute (cloning is not recommended beyond demonstrating this point)
+              new_data = @data.clone
+              new_data.delete_at(row)
+              self.data = new_data # automatically loses deleted table row due to explicit data-binding
+            end
+          }
+    
+          cell_rows <=> [self, :data] # explicit data-binding of table cell_rows to self.data
+          
+          on_changed do |row, type, row_data|
+            puts "Row #{row} #{type}: #{row_data}"
+            $stdout.flush
+          end
+        }
+      }
+    }.show
+  end
+end
+
+BasicTableButton.new.launch
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (with implicit [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -5005,7 +4843,8 @@ class ButtonCounter
   def launch
     window('Hello, Button!') {
       button {
-        text <= [self, :count, on_read: ->(count) {"Count: #{count}"}] # data-bind button text to self count, converting to string on read.
+        # data-bind button text to self count, converting to string on read.
+        text <= [self, :count, on_read: ->(count) {"Count: #{count}"}]
         
         on_clicked do
           self.count += 1
@@ -5649,6 +5488,71 @@ MAIN_WINDOW = window('Control Gallery', 600, 500) {
 MAIN_WINDOW.show
 ```
 
+#### CPU Percentage
+
+This example shows CPU usage percentage second by second.
+
+Note that it is highly dependent on low-level OS terminal commands, so if anything changes in their output formatting, the code could break. Please report any issues you might encounter.
+
+[examples/cpu_percentage.rb](examples/cpu_percentage.rb)
+
+Run with this command from the root of the project if you cloned the project:
+
+```
+ruby -r './lib/glimmer-dsl-libui' examples/cpu_percentage.rb
+```
+
+Run with this command if you installed the [Ruby gem](https://rubygems.org/gems/glimmer-dsl-libui):
+
+```
+ruby -r glimmer-dsl-libui -e "require 'examples/cpu_percentage'"
+```
+
+Mac | Windows | Linux
+----|---------|------
+![glimmer-dsl-libui-mac-cpu-percentage.png](images/glimmer-dsl-libui-mac-cpu-percentage.png) | ![glimmer-dsl-libui-windows-cpu-percentage.png](images/glimmer-dsl-libui-windows-cpu-percentage.png) | ![glimmer-dsl-libui-linux-cpu-percentage.png](images/glimmer-dsl-libui-linux-cpu-percentage.png)
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+
+```ruby
+require 'glimmer-dsl-libui'
+require 'bigdecimal'
+
+include Glimmer
+
+data = [
+  ['CPU', '0%', 0],
+]
+
+Glimmer::LibUI.timer(1) do
+  cpu_percentage_value = nil
+  if OS.windows?
+    cpu_percentage_raw_value = `wmic cpu get loadpercentage`
+    cpu_percentage_value = cpu_percentage_raw_value.split("\n")[2].to_i
+  elsif OS.mac?
+    cpu_percentage_value = `ps -A -o %cpu | awk '{s+=$1} END {print s}'`.to_i
+  elsif OS.linux?
+    stats = `top -n 1`
+    idle_percentage = stats.split("\n")[2].match(/ni,.* (.*) .*id/)[1]
+    cpu_percentage_value = (BigDecimal(100) - BigDecimal(idle_percentage)).to_i
+  end
+  data[0][1] = "#{cpu_percentage_value}%"
+  data[0][2] = cpu_percentage_value
+end
+
+window('CPU Percentage', 400, 200) {
+  vertical_box {
+    table {
+      text_column('Name')
+      text_column('Value')
+      progress_bar_column('Percentage')
+
+      cell_rows data # implicit data-binding
+    }
+  }
+}.show
+```
+
 #### Custom Draw Text
 
 [examples/custom_draw_text.rb](examples/custom_draw_text.rb)
@@ -6406,15 +6310,15 @@ require 'glimmer-dsl-libui'
 class FormTable
   include Glimmer
   
-  attr_accessor :name, :email, :phone, :city, :state, :filter_value
+  attr_accessor :data, :name, :email, :phone, :city, :state, :filter_value
   
   def initialize
     @data = [
-      ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO', '80014'],
-      ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA', '02101'],
-      ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL', '60007'],
-      ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA', '98101'],
-      ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA', '90001'],
+      ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'],
+      ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'],
+      ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'],
+      ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'],
+      ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'],
     ]
   end
   
@@ -6477,10 +6381,10 @@ class FormTable
             after_write: ->(filter_value) { # execute after write to self.filter_value
               @unfiltered_data ||= @data.dup
               # Unfilter first to remove any previous filters
-              @data.replace(@unfiltered_data) # affects table indirectly through implicit data-binding
+              self.data = @unfiltered_data # affects table indirectly through explicit data-binding
               # Now, apply filter if entered
               unless filter_value.empty?
-                @data.filter! do |row_data| # affects table indirectly through implicit data-binding
+                self.data = @data.filter do |row_data| # affects table indirectly through explicit data-binding
                   row_data.any? do |cell|
                     cell.to_s.downcase.include?(filter_value.downcase)
                   end
@@ -6497,7 +6401,7 @@ class FormTable
           text_column('City')
           text_column('State')
     
-          cell_rows @data # implicit data-binding
+          cell_rows <=> [self, :data] # explicit data-binding
           
           on_changed do |row, type, row_data|
             puts "Row #{row} #{type}: #{row_data}"
@@ -6519,11 +6423,11 @@ require 'glimmer-dsl-libui'
 include Glimmer
 
 data = [
-  ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO', '80014'],
-  ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA', '02101'],
-  ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL', '60007'],
-  ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA', '98101'],
-  ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA', '90001'],
+  ['Lisa Sky', 'lisa@sky.com', '720-523-4329', 'Denver', 'CO'],
+  ['Jordan Biggins', 'jordan@biggins.com', '617-528-5399', 'Boston', 'MA'],
+  ['Mary Glass', 'mary@glass.com', '847-589-8788', 'Elk Grove Village', 'IL'],
+  ['Darren McGrath', 'darren@mcgrath.com', '206-539-9283', 'Seattle', 'WA'],
+  ['Melody Hanheimer', 'melody@hanheimer.com', '213-493-8274', 'Los Angeles', 'CA'],
 ]
 
 window('Contacts', 600, 600) { |w|
@@ -7852,7 +7756,181 @@ end
 TinyMidiPlayer.new
 ```
 
-[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
+
+```ruby
+# frozen_string_literal: true
+
+require 'glimmer-dsl-libui'
+
+class TinyMidiPlayer
+  include Glimmer
+  
+  VERSION = '0.0.1'
+  
+  attr_accessor :selected_file
+
+  def initialize
+    @pid = nil
+    @music_directory = File.expand_path('../sounds', __dir__)
+    @midi_files      = Dir.glob(File.join(@music_directory, '**/*.mid'))
+                          .sort_by { |path| File.basename(path) }
+    at_exit { stop_midi }
+    create_gui
+  end
+
+  def stop_midi
+    if @pid
+      Process.kill(:SIGKILL, @pid) if @th.alive?
+      @pid = nil
+    end
+  end
+
+  def play_midi
+    stop_midi
+    if @pid.nil? && @selected_file
+      begin
+        @pid = spawn "timidity #{@selected_file}"
+        @th = Process.detach @pid
+      rescue Errno::ENOENT
+        warn 'Timidty++ not found. Please install Timidity++.'
+        warn 'https://sourceforge.net/projects/timidity/'
+      end
+    end
+  end
+
+  def show_version
+    msg_box('Tiny Midi Player',
+              "Written in Ruby\n" \
+                "https://github.com/kojix2/libui\n" \
+                "Version #{VERSION}")
+  end
+
+  def create_gui
+    menu('Help') {
+      menu_item('Version') {
+        on_clicked do
+          show_version
+        end
+      }
+    }
+    window('Tiny Midi Player', 200, 50) {
+      horizontal_box {
+        vertical_box {
+          stretchy false
+          
+          button('▶') {
+            on_clicked do
+              play_midi
+            end
+          }
+          button('■') {
+            on_clicked do
+              stop_midi
+            end
+          }
+        }
+
+        combobox {
+          items @midi_files.map { |path| File.basename(path) }
+          # data-bind selected item (String) to self.selected_file with on-read/on-write converters and after_write operation
+          selected_item <=> [self, :selected_file, on_read: ->(f) {File.basename(f.to_s)}, on_write: ->(f) {File.join(@music_directory, f)}, after_write: -> { play_midi if @th&.alive? }]
+        }
+      }
+    }.show
+  end
+end
+
+TinyMidiPlayer.new
+```
+
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (with [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+class TinyMidiPlayer
+  include Glimmer
+  
+  VERSION = '0.0.1'
+  
+  attr_accessor :selected_file
+
+  def initialize
+    @pid = nil
+    @music_directory = File.expand_path('../sounds', __dir__)
+    @midi_files      = Dir.glob(File.join(@music_directory, '**/*.mid'))
+                          .sort_by { |path| File.basename(path) }
+    at_exit { stop_midi }
+    create_gui
+  end
+
+  def stop_midi
+    if @pid
+      Process.kill(:SIGKILL, @pid) if @th.alive?
+      @pid = nil
+    end
+  end
+
+  def play_midi
+    stop_midi
+    if @pid.nil? && @selected_file
+      begin
+        @pid = spawn "timidity #{@selected_file}"
+        @th = Process.detach @pid
+      rescue Errno::ENOENT
+        warn 'Timidty++ not found. Please install Timidity++.'
+        warn 'https://sourceforge.net/projects/timidity/'
+      end
+    end
+  end
+
+  def show_version
+    msg_box('Tiny Midi Player',
+              "Written in Ruby\n" \
+                "https://github.com/kojix2/libui\n" \
+                "Version #{VERSION}")
+  end
+
+  def create_gui
+    menu('Help') {
+      menu_item('Version') {
+        on_clicked do
+          show_version
+        end
+      }
+    }
+    window('Tiny Midi Player', 200, 50) {
+      horizontal_box {
+        vertical_box {
+          stretchy false
+          
+          button('▶') {
+            on_clicked do
+              play_midi
+            end
+          }
+          button('■') {
+            on_clicked do
+              stop_midi
+            end
+          }
+        }
+
+        combobox {
+          items @midi_files.map { |path| File.basename(path) }
+          # data-bind selected index (Integer) to self.selected_file with on-read/on-write converters and after_write operation
+          selected <=> [self, :selected_file, on_read: ->(f) {@midi_files.index(f)}, on_write: ->(i) {@midi_files[i]}, after_write: -> { play_midi if @th&.alive? }]
+        }
+      }
+    }.show
+  end
+end
+
+TinyMidiPlayer.new
+```
+
+[Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 3 (without [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -7961,7 +8039,7 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-snake.png](images/glimmer-dsl-libui-mac-snake.png) ![glimmer-dsl-libui-mac-snake-game-over.png](images/glimmer-dsl-libui-mac-snake-game-over.png) | ![glimmer-dsl-libui-windows-snake.png](images/glimmer-dsl-libui-windows-snake.png) ![glimmer-dsl-libui-windows-snake-game-over.png](images/glimmer-dsl-libui-windows-snake-game-over.png) | ![glimmer-dsl-libui-linux-snake.png](images/glimmer-dsl-libui-linux-snake.png) ![glimmer-dsl-libui-linux-snake-game-over.png](images/glimmer-dsl-libui-linux-snake-game-over.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -7978,6 +8056,7 @@ class Snake
     @game = Model::Game.new
     @grid = Presenter::Grid.new(@game)
     @game.start
+    @keypress_queue = []
     create_gui
     register_observers
   end
@@ -7997,14 +8076,30 @@ class Snake
     end
     
     Glimmer::LibUI.timer(SNAKE_MOVE_DELAY) do
-      @game.snake.move unless @game.over?
+      unless @game.over?
+        process_queued_keypress
+        @game.snake.move
+      end
+    end
+  end
+  
+  def process_queued_keypress
+    # key press queue ensures one turn per snake move to avoid a double-turn resulting in instant death (due to snake illogically going back against itself)
+    key = @keypress_queue.shift
+    case [@game.snake.head.orientation, key]
+    in [:north, :right] | [:east, :down] | [:south, :left] | [:west, :up]
+      @game.snake.turn_right
+    in [:north, :left] | [:west, :down] | [:south, :right] | [:east, :up]
+      @game.snake.turn_left
+    else
+      # No Op
     end
   end
   
   def create_gui
     @main_window = window {
       # data-bind window title to game score, converting it to a title string on read from the model
-      title <= [@game, :score, on_read: -> (score) {"Glimmer Snake (Score: #{@game.score})"}]
+      title <= [@game, :score, on_read: -> (score) {"Snake (Score: #{@game.score})"}]
       content_size @game.width * CELL_SIZE, @game.height * CELL_SIZE
       resizable false
       
@@ -8022,15 +8117,109 @@ class Snake
                 }
                 
                 on_key_up do |area_key_event|
-                  orientation_and_key = [@game.snake.head.orientation, area_key_event[:ext_key]]
-                  case orientation_and_key
-                  in [:north, :right] | [:east, :down] | [:south, :left] | [:west, :up]
-                    @game.snake.turn_right
-                  in [:north, :left] | [:west, :down] | [:south, :right] | [:east, :up]
-                    @game.snake.turn_left
-                  else
-                    # No Op
-                  end
+                  @keypress_queue << area_key_event[:ext_key]
+                end
+              }
+            end
+          }
+        end
+      }
+    }
+  end
+end
+
+Snake.new.launch
+```
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (without [data-binding](#data-binding)):
+
+```ruby
+require 'glimmer-dsl-libui'
+
+require_relative 'snake/presenter/grid'
+
+class Snake
+  include Glimmer
+  
+  CELL_SIZE = 15
+  SNAKE_MOVE_DELAY = 0.1
+  
+  def initialize
+    @game = Model::Game.new
+    @grid = Presenter::Grid.new(@game)
+    @game.start
+    @keypress_queue = []
+    create_gui
+    register_observers
+  end
+  
+  def launch
+    @main_window.show
+  end
+  
+  def register_observers
+    @game.height.times do |row|
+      @game.width.times do |column|
+        observe(@grid.cells[row][column], :color) do |new_color|
+          @cell_grid[row][column].fill = new_color
+        end
+      end
+    end
+    
+    observe(@game, :over) do |game_over|
+      Glimmer::LibUI.queue_main do
+        if game_over
+          msg_box('Game Over!', "Score: #{@game.score} | High Score: #{@game.high_score}")
+          @game.start
+        end
+      end
+    end
+    
+    Glimmer::LibUI.timer(SNAKE_MOVE_DELAY) do
+      unless @game.over?
+        process_queued_keypress
+        @game.snake.move
+      end
+    end
+  end
+  
+  def process_queued_keypress
+    # key press queue ensures one turn per snake move to avoid a double-turn resulting in instant death (due to snake illogically going back against itself)
+    key = @keypress_queue.shift
+    case [@game.snake.head.orientation, key]
+    in [:north, :right] | [:east, :down] | [:south, :left] | [:west, :up]
+      @game.snake.turn_right
+    in [:north, :left] | [:west, :down] | [:south, :right] | [:east, :up]
+      @game.snake.turn_left
+    else
+      # No Op
+    end
+  end
+  
+  def create_gui
+    @cell_grid = []
+    @main_window = window {
+      # data-bind window title to game score, converting it to a title string on read from the model
+      title <= [@game, :score, on_read: -> (score) {"Snake (Score: #{@game.score})"}]
+      content_size @game.width * CELL_SIZE, @game.height * CELL_SIZE
+      resizable false
+      
+      vertical_box {
+        padded false
+        
+        @game.height.times do |row|
+          @cell_grid << []
+          horizontal_box {
+            padded false
+            
+            @game.width.times do |column|
+              area {
+                @cell_grid.last << square(0, 0, CELL_SIZE) {
+                  fill Presenter::Cell::COLOR_CLEAR
+                }
+                
+                on_key_up do |area_key_event|
+                  @keypress_queue << area_key_event[:ext_key]
                 end
               }
             end
@@ -8180,22 +8369,23 @@ class Tetris
     menu('Game') {
       @pause_menu_item = check_menu_item('Pause') {
         enabled false
-        
-        on_clicked do
-          @game.paused = @pause_menu_item.checked?
-        end
+        checked <=> [@game, :paused]
       }
+      
       menu_item('Restart') {
         on_clicked do
           @game.restart!
         end
       }
+      
       separator_menu_item
+      
       menu_item('Exit') {
         on_clicked do
           exit(0)
         end
       }
+      
       quit_menu_item if OS.mac?
     }
     
@@ -8205,6 +8395,7 @@ class Tetris
           show_high_scores
         end
       }
+      
       menu_item('Clear High Scores') {
         on_clicked {
           @game.clear_high_scores!
@@ -8213,22 +8404,16 @@ class Tetris
     }
 
     menu('Options') {
-      radio_menu_item('Instant Down on Up Arrow') {
-        on_clicked do
-          @game.instant_down_on_up = true
-        end
+      radio_menu_item('Instant Down on Up Arrow') { |r|
+        checked <=> [@game, :instant_down_on_up]
       }
-      radio_menu_item('Rotate Right on Up Arrow') {
-        on_clicked do
-          @game.rotate_right_on_up = true
-        end
+      
+      radio_menu_item('Rotate Right on Up Arrow') { |r|
+        checked <=> [@game, :rotate_right_on_up]
       }
-      radio_menu_item('Rotate Left on Up Arrow') {
-        checked true
-
-        on_clicked do
-          @game.rotate_left_on_up = true
-        end
+      
+      radio_menu_item('Rotate Left on Up Arrow') { |r|
+        checked <=> [@game, :rotate_left_on_up]
       }
     }
 
@@ -8240,6 +8425,7 @@ class Tetris
           end
         }
       end
+      
       menu_item('About') {
         on_clicked do
           show_about_dialog
@@ -8462,7 +8648,7 @@ Mac | Windows | Linux
 ----|---------|------
 ![glimmer-dsl-libui-mac-tic-tac-toe.png](images/glimmer-dsl-libui-mac-tic-tac-toe.png) ![glimmer-dsl-libui-mac-tic-tac-toe-player-o-wins.png](images/glimmer-dsl-libui-mac-tic-tac-toe-player-o-wins.png) ![glimmer-dsl-libui-mac-tic-tac-toe-player-x-wins.png](images/glimmer-dsl-libui-mac-tic-tac-toe-player-x-wins.png) ![glimmer-dsl-libui-mac-tic-tac-toe-draw.png](images/glimmer-dsl-libui-mac-tic-tac-toe-draw.png) | ![glimmer-dsl-libui-windows-tic-tac-toe.png](images/glimmer-dsl-libui-windows-tic-tac-toe.png) ![glimmer-dsl-libui-windows-tic-tac-toe-player-o-wins.png](images/glimmer-dsl-libui-windows-tic-tac-toe-player-o-wins.png) ![glimmer-dsl-libui-windows-tic-tac-toe-player-x-wins.png](images/glimmer-dsl-libui-windows-tic-tac-toe-player-x-wins.png) ![glimmer-dsl-libui-windows-tic-tac-toe-draw.png](images/glimmer-dsl-libui-windows-tic-tac-toe-draw.png) | ![glimmer-dsl-libui-linux-tic-tac-toe.png](images/glimmer-dsl-libui-linux-tic-tac-toe.png) ![glimmer-dsl-libui-linux-tic-tac-toe-player-o-wins.png](images/glimmer-dsl-libui-linux-tic-tac-toe-player-o-wins.png) ![glimmer-dsl-libui-linux-tic-tac-toe-player-x-wins.png](images/glimmer-dsl-libui-linux-tic-tac-toe-player-x-wins.png) ![glimmer-dsl-libui-linux-tic-tac-toe-draw.png](images/glimmer-dsl-libui-linux-tic-tac-toe-draw.png)
 
-New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version (with [data-binding](#data-binding)):
 
 ```ruby
 require 'glimmer-dsl-libui'
@@ -8508,6 +8694,7 @@ class TicTacToe
                 text(23, 19) {
                   string {
                     font family: 'Arial', size: OS.mac? ? 20 : 16
+                    # data-bind string property of area text attributed string to tic tac toe board cell sign
                     string <= [@tic_tac_toe_board[row + 1, column + 1], :sign] # board model is 1-based
                   }
                 }
@@ -8541,6 +8728,95 @@ end
 TicTacToe.new.launch
 ```
 
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version 2 (without [data-binding](#data-binding)):
+
+```ruby
+
+require 'glimmer-dsl-libui'
+
+require_relative "tic_tac_toe/board"
+
+class TicTacToe
+  include Glimmer
+
+  def initialize
+    @tic_tac_toe_board = Board.new
+  end
+  
+  def launch
+    create_gui
+    register_observers
+    @main_window.show
+  end
+  
+  def register_observers
+    observe(@tic_tac_toe_board, :game_status) do |game_status|
+      display_win_message if game_status == Board::WIN
+      display_draw_message if game_status == Board::DRAW
+    end
+    
+    3.times.map do |row|
+      3.times.map do |column|
+        observe(@tic_tac_toe_board[row + 1, column + 1], :sign) do |sign| # board model is 1-based
+          @cells[row][column].string = sign
+        end
+      end
+    end
+  end
+  
+  def create_gui
+    @main_window = window('Tic-Tac-Toe', 180, 180) {
+      resizable false
+      
+      @cells = []
+      vertical_box {
+        padded false
+        
+        3.times.map do |row|
+          @cells << []
+          horizontal_box {
+            padded false
+            
+            3.times.map do |column|
+              area {
+                square(0, 0, 60) {
+                  stroke :black, thickness: 2
+                }
+                text(23, 19) {
+                  @cells[row] << string('') {
+                    font family: 'Arial', size: OS.mac? ? 20 : 16
+                  }
+                }
+                on_mouse_up do
+                  @tic_tac_toe_board.mark(row + 1, column + 1) # board model is 1-based
+                end
+              }
+            end
+          }
+        end
+      }
+    }
+  end
+
+  def display_win_message
+    display_game_over_message("Player #{@tic_tac_toe_board.winning_sign} has won!")
+  end
+
+  def display_draw_message
+    display_game_over_message("Draw!")
+  end
+
+  def display_game_over_message(message_text)
+    Glimmer::LibUI.queue_main do
+      msg_box('Game Over', message_text)
+      @tic_tac_toe_board.reset!
+    end
+  end
+end
+
+TicTacToe.new.launch
+```
+
 #### Timer
 
 To run this example, install [TiMidity](http://timidity.sourceforge.net) and ensure `timidity` command is in `PATH` (can be installed via [Homebrew](https://brew.sh) on Mac or [apt-get](https://help.ubuntu.com/community/AptGet/Howto) on Linux).
@@ -8869,7 +9145,7 @@ https://github.com/iraamaro/i3off-gtk-ruby
 
 ### Issues
 
-If you encounter [issues](https://github.com/AndyObtiva/glimmer-dsl-libui/issues) that are not reported, discover missing features that are not mentioned in [TODO.md](TODO.md), or think up better ways to use [libui](https://github.com/andlabs/libui) than what is possible with [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui), you may submit an [issue](https://github.com/AndyObtiva/glimmer-dsl-libui/issues/new) or [pull request](https://github.com/AndyObtiva/glimmer-dsl-libui/compare) on [GitHub](https://github.com).
+If you encounter [issues](https://github.com/AndyObtiva/glimmer-dsl-libui/issues) that are not reported, discover missing features that are not mentioned in [TODO.md](TODO.md), or think up better ways to use [libui](https://github.com/andlabs/libui) than what is possible with [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui), you may submit an [issue](https://github.com/AndyObtiva/glimmer-dsl-libui/issues/new) or [pull request](https://github.com/AndyObtiva/glimmer-dsl-libui/compare) on [GitHub](https://github.com). In the meantime, you may try older gem versions of [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) till you find one that works until issues are resolved.
 
 ### Chat
 
@@ -8901,6 +9177,8 @@ These features have been planned or suggested. You might see them in a future ve
     is fine, but please isolate to its own commit so I can cherry-pick
     around it.
 
+Note that the latest development sometimes takes place in the [development](https://github.com/AndyObtiva/glimmer-dsl-libui/tree/development) branch (usually deleted once merged back to [master](https://github.com/AndyObtiva/glimmer-dsl-libui)).
+
 ## Contributors
 
 * [Andy Maleh](https://github.com/AndyObtiva) (Founder)