glimmer-dsl-libui 0.2.9 → 0.2.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7aaaa95f0efdd3c1dd3dcc5ceb961e6f643d3df62a7145fce68da5dee977bcc6
-  data.tar.gz: 410b8273b462a9ad76dc7485d4183c0be08be62c60bd64f92a7b7aa974692e5d
+  metadata.gz: 5bc0120584b295401bc245af8ff7110fb332dc74a2f2a60d67be31ccace6f615
+  data.tar.gz: d456fb5265a0d11c09aede73c9b2930a00710d9696a99f8b91bc180f53b8d153
 SHA512:
-  metadata.gz: f04981d43dc57f873da61bd77166d16b519b408a4b11b3695a1f82670e8502eab328d19c4bef60cab5549eae25b6a813ec0ca40342c65b2597c1a9b315ce3014
-  data.tar.gz: f714acf1968782069530c9ebce6c260080a12bb664d5218e84ec10f86250152e2e0abbc0b48e98c435da46e8915f858ff6e16a241009b0564cb8ebbb8f018c65
+  metadata.gz: 1b671bfda5925f794d79bbb4b83d849ce772e3f42176d3ed66067567f17584e6fe5296eb0b5d4787b38e1053a822c5bdc50175ff7321e4e67857da39f717b802
+  data.tar.gz: d4c78d48c0118eb9c92345639ef7a24b333a9d818e54529fec599fce852e070d1b8123fc91252e8fc163245f9ca4b2b6ec4384ad9c1ad53e2590ca610ef9f6b4

data/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 0.2.10
+
+- New examples/method_based_custom_keyword.rb
+- Update examples/form.rb to have two more fields
+- Update color_button example to show how to preset initial color
+- Support `path` `fill`/`stroke` `:type` of `:linear_gradient`
+- Support `path` `fill`/`stroke` `:type` of `:radial_gradient`
+- Add text to Area Gallery examples
+- Update variable names in examples/meta_example.rb to be more meaningful
+- Update examples/meta_example.rb to show terminal/command-line output for run examples
+
 ## 0.2.9
 
 - Upgrade to glimmer 2.3.0

data/README.md

@@ -1,4 +1,4 @@
-# [<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.2.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.2.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)
 [![Maintainability](https://api.codeclimate.com/v1/badges/ce2853efdbecf6ebdc73/maintainability)](https://codeclimate.com/github/AndyObtiva/glimmer-dsl-libui/maintainability)
@@ -14,10 +14,10 @@ The main trade-off in using [Glimmer DSL for LibUI](https://rubygems.org/gems/gl
 - Declarative DSL syntax that visually maps to the GUI control hierarchy
 - Convention over configuration via smart defaults and automation of low-level details
 - Requiring the least amount of syntax possible to build GUI
-- Bidirectional Data-Binding to declaratively wire and automatically synchronize GUI with Business Models
 - Custom Control support
-- Scaffolding for new custom controls, apps, and gems
-- Native-Executable packaging on Mac, Windows, and Linux.
+- [Far Future Plan] Bidirectional Data-Binding to declaratively wire and automatically synchronize GUI with Business Models
+- [Far Future Plan] Scaffolding for new custom controls, apps, and gems
+- [Far Future Plan] Native-Executable packaging on Mac, Windows, and Linux.
 
 Hello, World!
 
@@ -84,14 +84,15 @@ window('Area Gallery', 400, 400) {
     path { # declarative stable path
       square(0, 0, 100)
       square(100, 100, 400)
-      
+
       fill r: 102, g: 102, b: 204
     }
     path { # declarative stable path
       rectangle(0, 100, 100, 400)
       rectangle(100, 0, 400, 100)
-      
-      fill r: 204, g: 102, b: 204
+
+      # linear gradient (has x0, y0, x1, y1, and stops)
+      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
     }
     path { # declarative stable path
       figure(100, 100) {
@@ -117,17 +118,26 @@ window('Area Gallery', 400, 400) {
       fill r: 202, g: 102, b: 204, a: 0.5
       stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
     }
+    path { # declarative stable path
+      arc(400, 220, 180, 90, 90, false)
+
+      # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
+      fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
+      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+    }
     path { # declarative stable path
       circle(200, 200, 90)
 
       fill r: 202, g: 102, b: 204, a: 0.5
       stroke r: 0, g: 0, b: 0, thickness: 2
     }
-    path { # declarative stable path
-      arc(400, 220, 180, 90, 90, false)
-
-      fill r: 204, g: 102, b: 204, a: 0.5
-      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+    text(160, 40, 100) { # x, y, width
+      string {
+        font family: 'Times', size: 14
+        color :black
+        
+        'Area Gallery'
+      }
     }
     
     on_mouse_event do |area_mouse_event|
@@ -186,7 +196,7 @@ window('Area Gallery', 400, 400) {
 
 [Check Out Many More Examples Over Here!](#examples)
 
-NOTE: [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) is in early alpha mode (only supports included [examples](#examples)). Please help make better by contributing, adopting for small or low risk projects, and providing feedback. It is still an early alpha, so the more feedback and issues you report the better.
+NOTE: [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) is feature-complete and in beta mode (though the C [libui](https://github.com/andlabs/libui) is still mid-alpha). Please help make better by contributing, adopting for small or low risk projects, and providing feedback. The more feedback and issues you report the better.
 
 Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interested in:
 - [glimmer-dsl-swt](https://github.com/AndyObtiva/glimmer-dsl-swt): Glimmer DSL for SWT (JRuby Desktop Development GUI Framework)
@@ -197,7 +207,7 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
 
 ## Table of Contents
 
-- [Glimmer DSL for LibUI 0.2.9](#-glimmer-dsl-for-libui-029)
+- [Glimmer DSL for LibUI 0.2.10](#-glimmer-dsl-for-libui-0210)
   - [Glimmer GUI DSL Concepts](#glimmer-gui-dsl-concepts)
   - [Usage](#usage)
   - [Girb (Glimmer IRB)](#girb-glimmer-irb)
@@ -211,8 +221,10 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
     - [Table API](#table-api)
     - [Area API](#area-api)
     - [Smart Defaults and Conventions](#smart-defaults-and-conventions)
+    - [Custom Keywords](#custom-keywords)
     - [API Gotchas](#api-gotchas)
     - [Original API](#original-api)
+  - [Packaging](#packaging)
   - [Glimmer Style Guide](#glimmer-style-guide)
   - [Examples](#examples)
     - [Basic Window](#basic-window)
@@ -247,6 +259,7 @@ Other [Glimmer](https://rubygems.org/gems/glimmer) DSL gems you might be interes
     - [Color The Circles](#color-the-circles)
     - [Basic Draw Text](#basic-draw-text)
     - [Custom Draw Text](#custom-draw-text)
+    - [Method-Based Custom Keyword](#method-based-custom-keyword)
   - [Contributing to glimmer-dsl-libui](#contributing-to-glimmer-dsl-libui)
   - [Help](#help)
     - [Issues](#issues)
@@ -334,7 +347,7 @@ gem install glimmer-dsl-libui
 Or install via Bundler `Gemfile`:
 
 ```ruby
-gem 'glimmer-dsl-libui', '~> 0.2.9'
+gem 'glimmer-dsl-libui', '~> 0.2.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.
@@ -446,7 +459,7 @@ Control(Args) | Properties | Listeners
 `msg_box_error(window = main_window as Glimmer::LibUI::WindowProxy, title as String, description as String)` | None | None
 `non_wrapping_multiline_entry` | `read_only` (Boolean), `text` (`String`) | `on_changed`
 `password_entry` | `read_only` (Boolean), `text` (`String`) | `on_changed`
-`path(draw_fill_mode = :winding)` | `fill` (`Hash` of `:r` as `0`-`255`, `:g` as `0`-`255`, `:b` as `0`-`255`, `:a` as `0.0`-`1.0`), `stroke` (`Hash` of `:r` as `0`-`255`, `:g` as `0`-`255`, `:b` as `0`-`255`, `:a` as `0.0`-`1.0`, `:cap` as (`:round`, `:square`, `:flat`), `:join` as (`:miter`, `:round`, `:bevel`), `:thickness` as `Numeric`, `:miter_limit` as `Numeric`, `:dashes` as `Array` of `Numeric` ) | None
+`path(draw_fill_mode = :winding)` | `fill` (`Hash` of `:r` as `0`-`255`, `:g` as `0`-`255`, `:b` as `0`-`255`, `:a` as `0.0`-`1.0`, hex, or [X11](https://en.wikipedia.org/wiki/X11_color_names) color), `stroke` (`Hash` of `:r` as `0`-`255`, `:g` as `0`-`255`, `:b` as `0`-`255`, `:a` as `0.0`-`1.0`, hex, or [X11](https://en.wikipedia.org/wiki/X11_color_names) color), `:cap` as (`:round`, `:square`, `:flat`), `:join` as (`:miter`, `:round`, `:bevel`), `:thickness` as `Numeric`, `:miter_limit` as `Numeric`, `:dashes` as `Array` of `Numeric` ) | None
 `preferences_menu_item` | None | `on_clicked`
 `progress_bar` | `value` (`Numeric`) | None
 `progress_bar_column(name as String)` | None | None
@@ -457,7 +470,7 @@ Control(Args) | Properties | Listeners
 `slider(min as Numeric, max as Numeric)` | `value` (`Numeric`) | `on_changed`
 `spinbox(min as Numeric, max as Numeric)` | `value` (`Numeric`) | `on_changed`
 `square(x as Numeric, y as Numeric, length as Numeric)` | `x` (`Numeric`), `y` (`Numeric`), `length` (`Numeric`) | None
-`string` | `font`, `color`, `background`, `underline`, `underline_color`, `open_type_features` | None
+`string` | `font`, `color` (`Hash` of `:r` as `0`-`255`, `:g` as `0`-`255`, `:b` as `0`-`255`, `:a` as `0.0`-`1.0`, hex, or [X11](https://en.wikipedia.org/wiki/X11_color_names) color), `background` (`Hash` of `:r` as `0`-`255`, `:g` as `0`-`255`, `:b` as `0`-`255`, `:a` as `0.0`-`1.0`, hex, or [X11](https://en.wikipedia.org/wiki/X11_color_names) color), `underline`, `underline_color` (`Hash` of `:r` as `0`-`255`, `:g` as `0`-`255`, `:b` as `0`-`255`, `:a` as `0.0`-`1.0`, hex, or [X11](https://en.wikipedia.org/wiki/X11_color_names) color), `open_type_features` | None
 `tab` | `margined` (Boolean), `num_pages` (`Integer`) | None
 `tab_item(name as String)` | `index` [read-only] (`Integer`), `margined` (Boolean), `name` [read-only] (`String`) | None
 `table` | `cell_rows` (`Array` (rows) of `Arrays` (row columns) of cell values (e.g. `String` values for `text_column` cells or `Array` of `image`/`String` for `image_text_column`)), `editable` as Boolean | `on_changed {|row, type, row_data| ...}`, `on_edited {|row, row_data| ...}`
@@ -813,7 +826,7 @@ To draw `text` in an `area`, you simply nest a `text(x, y, width)` control direc
 - `background`: rgba, hex, or [X11](https://en.wikipedia.org/wiki/X11_color_names) color
 - `underline`: one of `:none`, `:single`, `:double`, `:suggestion`, `:color_custom`, `:color_spelling`, `:color_grammar`, `:color_auxiliary`
 - `underline_color`: one of `:spelling`, `:grammar`, `:auxiliary`, rgba, hex, or [X11](https://en.wikipedia.org/wiki/X11_color_names) color
-- `open_type_features`: it must have a block containing `open_type_tag` occurrances, which take the a, b, c, d arguments plus a number at the end.
+- `open_type_features`: Open Type Features (https://www.microsoft.com/typography/otspec/featuretags.htm) consist of `open_type_tag`s nested in content block, which accept (`a`, `b`, `c`, `d`, `Integer`) arguments.
 
 Example (you may copy/paste in [`girb`](#girb-glimmer-irb)):
 
@@ -882,6 +895,104 @@ window('area text drawing') {
 - Colors may be passed in as a hash of `:r`, `:g`, `:b`, `:a`, or `:red`, `:green`, `:blue`, `:alpha`, or [X11](https://en.wikipedia.org/wiki/X11_color_names) color like `:skyblue`, or 6-number hex or 3-number hex (as `Integer` or `String` with or without `0x` prefix)
 - Color alpha value defaults to `1.0` when not specified.
 
+### Custom Keywords
+
+To define custom keywords, simply define a method representing the custom control you want. To make reusable, you can define in modules and simply include the modules in the view classes that need them.
+
+Example that defines `field`, `address_form`, `label_pair`, and `address` keywords (you may copy/paste in [`girb`](#girb-glimmer-irb)):
+
+```ruby
+require 'glimmer-dsl-libui'
+require 'facets'
+
+include Glimmer
+
+Address = Struct.new(:street, :p_o_box, :city, :state, :zip_code)
+
+def field(model, property)
+  property = property.to_s
+  entry { |e|
+    label property.underscore.split('_').map(&:capitalize).join(' ')
+    text model.send(property).to_s
+
+    on_changed do
+      model.send("#{property}=", e.text)
+    end
+  }
+end
+
+def address_form(address)
+  form {
+    field(address, :street)
+    field(address, :p_o_box)
+    field(address, :city)
+    field(address, :state)
+    field(address, :zip_code)
+  }
+end
+
+def label_pair(model, attribute, value)
+  name_label = nil
+  value_label = nil
+  horizontal_box {
+    name_label = label(attribute.to_s.underscore.split('_').map(&:capitalize).join(' '))
+    value_label = label(value.to_s)
+  }
+  Glimmer::DataBinding::Observer.proc do
+    value_label.text = model.send(attribute)
+  end.observe(model, attribute)
+end
+
+def address(address)
+  vertical_box {
+    address.each_pair do |attribute, value|
+      label_pair(address, attribute, value)
+    end
+  }
+end
+
+address1 = Address.new('123 Main St', '23923', 'Denver', 'Colorado', '80014')
+address2 = Address.new('2038 Park Ave', '83272', 'Boston', 'Massachusetts', '02101')
+
+window('Method-Based Custom Keyword') {
+  margined true
+  
+  horizontal_box {
+    vertical_box {
+      label('Address 1') {
+        stretchy false
+      }
+      address_form(address1)
+      horizontal_separator {
+        stretchy false
+      }
+      label('Address 1 (Saved)') {
+        stretchy false
+      }
+      address(address1)
+    }
+    vertical_separator {
+      stretchy false
+    }
+    vertical_box {
+      label('Address 2') {
+        stretchy false
+      }
+      address_form(address2)
+      horizontal_separator {
+        stretchy false
+      }
+      label('Address 2 (Saved)') {
+        stretchy false
+      }
+      address(address2)
+    }
+  }
+}.show
+```
+
+![glimmer-dsl-libui-mac-method-based-custom-keyword.png](images/glimmer-dsl-libui-mac-method-based-custom-keyword.png)
+
 ### API Gotchas
 
 - There is no proper way to destroy `grid` children due to [libui](https://github.com/andlabs/libui) not offering any API for deleting them from `grid` (no `grid_delete` similar to `box_delete` for `horizontal_box` and `vertical_box`).
@@ -890,8 +1001,20 @@ window('area text drawing') {
 
 ### Original API
 
-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 the [libui C headers](https://github.com/andlabs/libui/blob/master/ui.h)
+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)
+- Check out the [libui C headers](https://github.com/andlabs/libui/blob/master/ui.h)
+- Check out the [Go UI (Golang LibUI) documentation](https://pkg.go.dev/github.com/andlabs/ui) for an alternative well-documented [libui](https://github.com/andlabs/libui) reference.
+
+## Packaging
+
+I am documenting options for packaging, which I have not tried myself, but figured they would still be useful to add to the README.md until I can expand further effort into supporting packaging.
+
+For Windows, the [LibUI](https://github.com/kojix2/LibUI) project recommends [OCRA](https://github.com/larsch/ocra) (One-Click Ruby Application), which builds Windows executables from Ruby source.
+
+For Mac, consider [Platybus](https://github.com/sveinbjornt/Platypus) (builds a native Mac app from a Ruby script)
+
+For Linux, simply package your app as a [Ruby Gem](https://guides.rubygems.org/what-is-a-gem/) and [build rpm package from Ruby Gem](https://www.redpill-linpro.com/sysadvent/2015/12/07/building-rpms-from-gems.html) or [build deb package from Ruby Gem](https://openpreservation.org/blogs/building-debian-package-ruby-program/).
 
 ## Glimmer Style Guide
 
@@ -908,8 +1031,6 @@ The following examples include reimplementions of the examples in the [LibUI](ht
 
 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.
 
-(note that for examples that emit output to terminal/command-line via `p` or `puts`, you must run them directly to see output)
-
 [examples/meta_example.rb](examples/meta_example.rb)
 
 Run with this command from the root of the project if you cloned the project:
@@ -935,65 +1056,118 @@ Linux
 New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
 
 ```ruby
+# frozen_string_literal: true
+
 require 'glimmer-dsl-libui'
 require 'facets'
 
 class MetaExample
   include Glimmer
   
+  def initialize
+    @selected_example_index = 0
+  end
+  
   def examples
     if @examples.nil?
       example_files = Dir.glob(File.join(File.expand_path('.', __dir__), '**', '*.rb'))
       example_file_names = example_files.map { |f| File.basename(f, '.rb') }
-      example_file_names = example_file_names.reject { |f| f == 'meta_example' }
+      example_file_names = example_file_names.reject { |f| f == 'meta_example' || f.match(/\d$/) }
       @examples = example_file_names.map { |f| f.underscore.titlecase }
     end
     @examples
   end
   
+  def examples_with_versions
+    examples.map do |example|
+      version_count_for(example) > 1 ? "#{example} (#{version_count_for(example)} versions)" : example
+    end
+  end
+  
   def file_path_for(example)
     File.join(File.expand_path('.', __dir__), "#{example.underscore}.rb")
   end
   
+  def version_count_for(example)
+    Dir.glob(File.join(File.expand_path('.', __dir__), "#{example.underscore}*.rb")).select {|file| file.match(/\d\.rb$/)}.count + 1
+  end
+  
   def glimmer_dsl_libui_file
     File.expand_path('../lib/glimmer-dsl-libui', __dir__)
   end
   
+  def selected_example
+    examples[@selected_example_index]
+  end
+  
   def launch
     window('Meta-Example', 700, 500) {
       margined true
       
       horizontal_box {
         vertical_box {
-          @rbs = radio_buttons {
+          stretchy false
+          
+          @example_radio_buttons = radio_buttons {
             stretchy false
-            items examples
-            selected 0
+            items examples_with_versions
+            selected @selected_example_index
             
             on_selected do
-              @nwme.text = File.read(file_path_for(@examples[@rbs.selected]))
+              @selected_example_index = @example_radio_buttons.selected
+              example = selected_example
+              @code_entry.text = File.read(file_path_for(example))
+              @version_spinbox.value = 1
             end
           }
-          button('Launch') {
+          
+          horizontal_box {
+            label('Version') {
+              stretchy false
+            }
+            
+            @version_spinbox = spinbox(1, 100) {
+              value 1
+              
+              on_changed do
+                example = selected_example
+                if @version_spinbox.value > version_count_for(example)
+                  @version_spinbox.value -= 1
+                else
+                  version_number = @version_spinbox.value == 1 ? '' : @version_spinbox.value
+                  example = "#{selected_example}#{version_number}"
+                  @code_entry.text = File.read(file_path_for(example))
+                end
+              end
+            }
+          }
+          
+          horizontal_box {
             stretchy false
             
-            on_clicked do
-              begin
-                meta_example_file = File.join(Dir.home, '.meta_example.rb')
-                File.write(meta_example_file, @nwme.text)
-                result = `ruby -r #{glimmer_dsl_libui_file} #{meta_example_file} 2>&1`
-                msg_box('Error Running Example', result) if result.include?('error')
-              rescue => e
-                puts 'Unable to write code changes! Running original example...'
-                system "ruby -r #{glimmer_dsl_libui_file} #{file_path_for(@examples[@rbs.selected])}"
+            button('Launch') {
+              on_clicked do
+                begin
+                  meta_example_file = File.join(Dir.home, '.meta_example.rb')
+                  File.write(meta_example_file, @code_entry.text)
+                  result = `ruby -r #{glimmer_dsl_libui_file} #{meta_example_file} 2>&1`
+                  msg_box('Error Running Example', result) if result.include?('error')
+                rescue => e
+                  puts 'Unable to write code changes! Running original example...'
+                  system "ruby -r #{glimmer_dsl_libui_file} #{file_path_for(selected_example)}"
+                end
               end
-            end
+            }
+            button('Reset') {
+              on_clicked do
+                @code_entry.text = File.read(file_path_for(selected_example))
+              end
+            }
           }
         }
-        vertical_box {
-          @nwme = non_wrapping_multiline_entry {
-            text File.read(file_path_for(@examples[@rbs.selected]))
-          }
+        
+        @code_entry = non_wrapping_multiline_entry {
+          text File.read(file_path_for(selected_example))
         }
       }
     }.show
@@ -2060,6 +2234,8 @@ include Glimmer
 
 window('color button', 230) {
   color_button { |cb|
+    color :blue
+    
     on_changed do
       rgba = cb.color
       p rgba
@@ -3650,14 +3826,15 @@ window('Area Gallery', 400, 400) {
     path { # declarative stable path
       square(0, 0, 100)
       square(100, 100, 400)
-      
+
       fill r: 102, g: 102, b: 204
     }
     path { # declarative stable path
       rectangle(0, 100, 100, 400)
       rectangle(100, 0, 400, 100)
-      
-      fill r: 204, g: 102, b: 204
+
+      # linear gradient (has x0, y0, x1, y1, and stops)
+      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
     }
     path { # declarative stable path
       figure(100, 100) {
@@ -3683,17 +3860,26 @@ window('Area Gallery', 400, 400) {
       fill r: 202, g: 102, b: 204, a: 0.5
       stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
     }
+    path { # declarative stable path
+      arc(400, 220, 180, 90, 90, false)
+
+      # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
+      fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
+      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+    }
     path { # declarative stable path
       circle(200, 200, 90)
 
       fill r: 202, g: 102, b: 204, a: 0.5
       stroke r: 0, g: 0, b: 0, thickness: 2
     }
-    path { # declarative stable path
-      arc(400, 220, 180, 90, 90, false)
-
-      fill r: 204, g: 102, b: 204, a: 0.5
-      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+    text(160, 40, 100) { # x, y, width
+      string {
+        font family: 'Times', size: 14
+        color :black
+        
+        'Area Gallery'
+      }
     }
     
     on_mouse_event do |area_mouse_event|
@@ -3784,7 +3970,8 @@ window('Area Gallery', 400, 400) {
         height 100
       }
       
-      fill r: 204, g: 102, b: 204
+      # linear gradient (has x0, y0, x1, y1, and stops)
+      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
     }
     path { # declarative stable path
       figure {
@@ -3846,16 +4033,6 @@ window('Area Gallery', 400, 400) {
       fill r: 202, g: 102, b: 204, a: 0.5
       stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
     }
-    path { # declarative stable path
-      circle {
-        x_center 200
-        y_center 200
-        radius 90
-      }
-
-      fill r: 202, g: 102, b: 204, a: 0.5
-      stroke r: 0, g: 0, b: 0, thickness: 2
-    }
     path { # declarative stable path
       arc {
         x_center 400
@@ -3866,9 +4043,32 @@ window('Area Gallery', 400, 400) {
         is_negative false
       }
 
-      fill r: 204, g: 102, b: 204, a: 0.5
+      # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
+      fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
       stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
     }
+    path { # declarative stable path
+      circle {
+        x_center 200
+        y_center 200
+        radius 90
+      }
+
+      fill r: 202, g: 102, b: 204, a: 0.5
+      stroke r: 0, g: 0, b: 0, thickness: 2
+    }
+    text {
+      x 160
+      y 40
+      width 100
+      
+      string {
+        font family: 'Times', size: 14
+        color :black
+        
+        'Area Gallery'
+      }
+    }
     
     on_mouse_event do |area_mouse_event|
       p area_mouse_event
@@ -3941,7 +4141,8 @@ window('Area Gallery', 400, 400) {
         rectangle(0, 100, 100, 400)
         rectangle(100, 0, 400, 100)
 
-        fill r: 204, g: 102, b: 204
+        # linear gradient (has x0, y0, x1, y1, and stops)
+        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
       }
       path { # a dynamic path is added semi-declaratively inside on_draw block
         figure(100, 100) {
@@ -3967,17 +4168,26 @@ window('Area Gallery', 400, 400) {
         fill r: 202, g: 102, b: 204, a: 0.5
         stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
       }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        arc(400, 220, 180, 90, 90, false)
+  
+        # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
+        fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
+        stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+      }
       path { # a dynamic path is added semi-declaratively inside on_draw block
         circle(200, 200, 90)
   
         fill r: 202, g: 102, b: 204, a: 0.5
         stroke r: 0, g: 0, b: 0, thickness: 2
       }
-      path { # a dynamic path is added semi-declaratively inside on_draw block
-        arc(400, 220, 180, 90, 90, false)
-  
-        fill r: 204, g: 102, b: 204, a: 0.5
-        stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+      text(160, 40, 100) { # x, y, width
+        string {
+          font family: 'Times', size: 14
+          color :black
+          
+          'Area Gallery'
+        }
       }
     end
     
@@ -4070,7 +4280,8 @@ window('Area Gallery', 400, 400) {
           height 100
         }
         
-        fill r: 204, g: 102, b: 204
+        # linear gradient (has x0, y0, x1, y1, and stops)
+        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
       }
       path { # a dynamic path is added semi-declaratively inside on_draw block
         figure {
@@ -4132,16 +4343,6 @@ window('Area Gallery', 400, 400) {
         fill r: 202, g: 102, b: 204, a: 0.5
         stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
       }
-      path { # a dynamic path is added semi-declaratively inside on_draw block
-        circle {
-          x_center 200
-          y_center 200
-          radius 90
-        }
-  
-        fill r: 202, g: 102, b: 204, a: 0.5
-        stroke r: 0, g: 0, b: 0, thickness: 2
-      }
       path { # a dynamic path is added semi-declaratively inside on_draw block
         arc {
           x_center 400
@@ -4152,9 +4353,32 @@ window('Area Gallery', 400, 400) {
           is_negative false
         }
   
-        fill r: 204, g: 102, b: 204, a: 0.5
+        # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
+        fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
         stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
       }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        circle {
+          x_center 200
+          y_center 200
+          radius 90
+        }
+  
+        fill r: 202, g: 102, b: 204, a: 0.5
+        stroke r: 0, g: 0, b: 0, thickness: 2
+      }
+      text {
+        x 160
+        y 40
+        width 100
+        
+        string {
+          font family: 'Times', size: 14
+          color :black
+          
+          'Area Gallery'
+        }
+      }
     end
     
     on_mouse_event do |area_mouse_event|
@@ -5578,7 +5802,122 @@ class CustomDrawText
 end
 
 CustomDrawText.new.launch
+```
+
+### Method-Based Custom Keyword
+
+[examples/method_based_custom_keyword.rb](examples/method_based_custom_keyword.rb)
+
+Run with this command from the root of the project if you cloned the project:
 
+```
+ruby -r './lib/glimmer-dsl-libui' examples/method_based_custom_keyword.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/method_based_custom_keyword'"
+```
+
+Mac
+
+![glimmer-dsl-libui-mac-method-based-custom-keyword.png](images/glimmer-dsl-libui-mac-method-based-custom-keyword.png)
+
+Linux
+
+![glimmer-dsl-libui-linux-method-based-custom-keyword.png](images/glimmer-dsl-libui-linux-method-based-custom-keyword.png)
+
+New [Glimmer DSL for LibUI](https://rubygems.org/gems/glimmer-dsl-libui) Version:
+
+```ruby
+require 'glimmer-dsl-libui'
+require 'facets'
+
+include Glimmer
+
+Address = Struct.new(:street, :p_o_box, :city, :state, :zip_code)
+
+def field(model, property)
+  property = property.to_s
+  entry { |e|
+    label property.underscore.split('_').map(&:capitalize).join(' ')
+    text model.send(property).to_s
+
+    on_changed do
+      model.send("#{property}=", e.text)
+    end
+  }
+end
+
+def address_form(address)
+  form {
+    field(address, :street)
+    field(address, :p_o_box)
+    field(address, :city)
+    field(address, :state)
+    field(address, :zip_code)
+  }
+end
+
+def label_pair(model, attribute, value)
+  name_label = nil
+  value_label = nil
+  horizontal_box {
+    name_label = label(attribute.to_s.underscore.split('_').map(&:capitalize).join(' '))
+    value_label = label(value.to_s)
+  }
+  Glimmer::DataBinding::Observer.proc do
+    value_label.text = model.send(attribute)
+  end.observe(model, attribute)
+end
+
+def address(address)
+  vertical_box {
+    address.each_pair do |attribute, value|
+      label_pair(address, attribute, value)
+    end
+  }
+end
+
+address1 = Address.new('123 Main St', '23923', 'Denver', 'Colorado', '80014')
+address2 = Address.new('2038 Park Ave', '83272', 'Boston', 'Massachusetts', '02101')
+
+window('Method-Based Custom Keyword') {
+  margined true
+  
+  horizontal_box {
+    vertical_box {
+      label('Address 1') {
+        stretchy false
+      }
+      address_form(address1)
+      horizontal_separator {
+        stretchy false
+      }
+      label('Address 1 (Saved)') {
+        stretchy false
+      }
+      address(address1)
+    }
+    vertical_separator {
+      stretchy false
+    }
+    vertical_box {
+      label('Address 2') {
+        stretchy false
+      }
+      address_form(address2)
+      horizontal_separator {
+        stretchy false
+      }
+      label('Address 2 (Saved)') {
+        stretchy false
+      }
+      address(address2)
+    }
+  }
+}.show
 ```
 
 ## Contributing to glimmer-dsl-libui

data/VERSION

@@ -1 +1 @@
-0.2.9
+0.2.10

data/examples/area_gallery.rb

@@ -7,14 +7,15 @@ window('Area Gallery', 400, 400) {
     path { # declarative stable path
       square(0, 0, 100)
       square(100, 100, 400)
-      
+
       fill r: 102, g: 102, b: 204
     }
     path { # declarative stable path
       rectangle(0, 100, 100, 400)
       rectangle(100, 0, 400, 100)
-      
-      fill r: 204, g: 102, b: 204
+
+      # linear gradient (has x0, y0, x1, y1, and stops)
+      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
     }
     path { # declarative stable path
       figure(100, 100) {
@@ -40,17 +41,26 @@ window('Area Gallery', 400, 400) {
       fill r: 202, g: 102, b: 204, a: 0.5
       stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
     }
+    path { # declarative stable path
+      arc(400, 220, 180, 90, 90, false)
+
+      # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
+      fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
+      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+    }
     path { # declarative stable path
       circle(200, 200, 90)
 
       fill r: 202, g: 102, b: 204, a: 0.5
       stroke r: 0, g: 0, b: 0, thickness: 2
     }
-    path { # declarative stable path
-      arc(400, 220, 180, 90, 90, false)
-
-      fill r: 204, g: 102, b: 204, a: 0.5
-      stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+    text(160, 40, 100) { # x, y, width
+      string {
+        font family: 'Times', size: 14
+        color :black
+        
+        'Area Gallery'
+      }
     }
     
     on_mouse_event do |area_mouse_event|

data/examples/area_gallery2.rb

@@ -32,7 +32,8 @@ window('Area Gallery', 400, 400) {
         height 100
       }
       
-      fill r: 204, g: 102, b: 204
+      # linear gradient (has x0, y0, x1, y1, and stops)
+      fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
     }
     path { # declarative stable path
       figure {
@@ -94,16 +95,6 @@ window('Area Gallery', 400, 400) {
       fill r: 202, g: 102, b: 204, a: 0.5
       stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
     }
-    path { # declarative stable path
-      circle {
-        x_center 200
-        y_center 200
-        radius 90
-      }
-
-      fill r: 202, g: 102, b: 204, a: 0.5
-      stroke r: 0, g: 0, b: 0, thickness: 2
-    }
     path { # declarative stable path
       arc {
         x_center 400
@@ -114,9 +105,32 @@ window('Area Gallery', 400, 400) {
         is_negative false
       }
 
-      fill r: 204, g: 102, b: 204, a: 0.5
+      # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
+      fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
       stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
     }
+    path { # declarative stable path
+      circle {
+        x_center 200
+        y_center 200
+        radius 90
+      }
+
+      fill r: 202, g: 102, b: 204, a: 0.5
+      stroke r: 0, g: 0, b: 0, thickness: 2
+    }
+    text {
+      x 160
+      y 40
+      width 100
+      
+      string {
+        font family: 'Times', size: 14
+        color :black
+        
+        'Area Gallery'
+      }
+    }
     
     on_mouse_event do |area_mouse_event|
       p area_mouse_event

data/examples/area_gallery3.rb

@@ -15,7 +15,8 @@ window('Area Gallery', 400, 400) {
         rectangle(0, 100, 100, 400)
         rectangle(100, 0, 400, 100)
 
-        fill r: 204, g: 102, b: 204
+        # linear gradient (has x0, y0, x1, y1, and stops)
+        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
       }
       path { # a dynamic path is added semi-declaratively inside on_draw block
         figure(100, 100) {
@@ -41,17 +42,26 @@ window('Area Gallery', 400, 400) {
         fill r: 202, g: 102, b: 204, a: 0.5
         stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
       }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        arc(400, 220, 180, 90, 90, false)
+  
+        # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
+        fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
+        stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+      }
       path { # a dynamic path is added semi-declaratively inside on_draw block
         circle(200, 200, 90)
   
         fill r: 202, g: 102, b: 204, a: 0.5
         stroke r: 0, g: 0, b: 0, thickness: 2
       }
-      path { # a dynamic path is added semi-declaratively inside on_draw block
-        arc(400, 220, 180, 90, 90, false)
-  
-        fill r: 204, g: 102, b: 204, a: 0.5
-        stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
+      text(160, 40, 100) { # x, y, width
+        string {
+          font family: 'Times', size: 14
+          color :black
+          
+          'Area Gallery'
+        }
       }
     end
     

data/examples/area_gallery4.rb

@@ -33,7 +33,8 @@ window('Area Gallery', 400, 400) {
           height 100
         }
         
-        fill r: 204, g: 102, b: 204
+        # linear gradient (has x0, y0, x1, y1, and stops)
+        fill x0: 10, y0: 10, x1: 350, y1: 350, stops: [{pos: 0.25, r: 204, g: 102, b: 204}, {pos: 0.75, r: 102, g: 102, b: 204}]
       }
       path { # a dynamic path is added semi-declaratively inside on_draw block
         figure {
@@ -95,16 +96,6 @@ window('Area Gallery', 400, 400) {
         fill r: 202, g: 102, b: 204, a: 0.5
         stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
       }
-      path { # a dynamic path is added semi-declaratively inside on_draw block
-        circle {
-          x_center 200
-          y_center 200
-          radius 90
-        }
-  
-        fill r: 202, g: 102, b: 204, a: 0.5
-        stroke r: 0, g: 0, b: 0, thickness: 2
-      }
       path { # a dynamic path is added semi-declaratively inside on_draw block
         arc {
           x_center 400
@@ -115,9 +106,32 @@ window('Area Gallery', 400, 400) {
           is_negative false
         }
   
-        fill r: 204, g: 102, b: 204, a: 0.5
+        # radial gradient (has an outer_radius in addition to x0, y0, x1, y1, and stops)
+        fill outer_radius: 90, x0: 0, y0: 0, x1: 500, y1: 500, stops: [{pos: 0.25, r: 102, g: 102, b: 204, a: 0.5}, {pos: 0.75, r: 204, g: 102, b: 204}]
         stroke r: 0, g: 0, b: 0, thickness: 2, dashes: [50, 10, 10, 10], dash_phase: -50.0
       }
+      path { # a dynamic path is added semi-declaratively inside on_draw block
+        circle {
+          x_center 200
+          y_center 200
+          radius 90
+        }
+  
+        fill r: 202, g: 102, b: 204, a: 0.5
+        stroke r: 0, g: 0, b: 0, thickness: 2
+      }
+      text {
+        x 160
+        y 40
+        width 100
+        
+        string {
+          font family: 'Times', size: 14
+          color :black
+          
+          'Area Gallery'
+        }
+      }
     end
     
     on_mouse_event do |area_mouse_event|

data/examples/color_button.rb

@@ -6,6 +6,8 @@ include Glimmer
 
 window('color button', 230) {
   color_button { |cb|
+    color :blue
+    
     on_changed do
       rgba = cb.color
       p rgba

data/examples/form.rb

@@ -16,11 +16,21 @@ window('Form') {
       @last_name_entry = entry {
         label 'Last Name' # label property is available when control is nested under form
       }
+      
+      @phone_entry = entry {
+        label 'Phone' # label property is available when control is nested under form
+      }
+      
+      @email_entry = entry {
+        label 'Email' # label property is available when control is nested under form
+      }
     }
     
-    button('Display Name') {
+    button('Display Info') {
+      stretchy false
+      
       on_clicked do
-        msg_box('Name', "#{@first_name_entry.text} #{@last_name_entry.text}")
+        msg_box('Info', "#{@first_name_entry.text} #{@last_name_entry.text} has phone #{@phone_entry.text} and email #{@email_entry.text}")
       end
     }
   }

data/examples/meta_example.rb

@@ -1,5 +1,3 @@
-# frozen_string_literal: true
-
 require 'glimmer-dsl-libui'
 require 'facets'
 
@@ -42,6 +40,18 @@ class MetaExample
     examples[@selected_example_index]
   end
   
+  def run_example(example)
+    command = "ruby -r #{glimmer_dsl_libui_file} #{example} 2>&1"
+    result = ''
+    IO.popen(command) do |f|
+      f.each_line do |line|
+        result << line
+        puts line
+      end
+    end
+    msg_box('Error Running Example', result) if result.downcase.include?('error')
+  end
+  
   def launch
     window('Meta-Example', 700, 500) {
       margined true
@@ -50,16 +60,16 @@ class MetaExample
         vertical_box {
           stretchy false
           
-          @rbs = radio_buttons {
+          @example_radio_buttons = radio_buttons {
             stretchy false
             items examples_with_versions
             selected @selected_example_index
             
             on_selected do
-              @selected_example_index = @rbs.selected
+              @selected_example_index = @example_radio_buttons.selected
               example = selected_example
-              @nwme.text = File.read(file_path_for(example))
-              @sb.value = 1
+              @code_entry.text = File.read(file_path_for(example))
+              @version_spinbox.value = 1
             end
           }
           
@@ -68,17 +78,17 @@ class MetaExample
               stretchy false
             }
             
-            @sb = spinbox(1, 100) {
+            @version_spinbox = spinbox(1, 100) {
               value 1
               
               on_changed do
                 example = selected_example
-                if @sb.value > version_count_for(example)
-                  @sb.value -= 1
+                if @version_spinbox.value > version_count_for(example)
+                  @version_spinbox.value -= 1
                 else
-                  version_number = @sb.value == 1 ? '' : @sb.value
+                  version_number = @version_spinbox.value == 1 ? '' : @version_spinbox.value
                   example = "#{selected_example}#{version_number}"
-                  @nwme.text = File.read(file_path_for(example))
+                  @code_entry.text = File.read(file_path_for(example))
                 end
               end
             }
@@ -91,24 +101,24 @@ class MetaExample
               on_clicked do
                 begin
                   meta_example_file = File.join(Dir.home, '.meta_example.rb')
-                  File.write(meta_example_file, @nwme.text)
-                  result = `ruby -r #{glimmer_dsl_libui_file} #{meta_example_file} 2>&1`
-                  msg_box('Error Running Example', result) if result.include?('error')
+                  File.write(meta_example_file, @code_entry.text)
+                  run_example(meta_example_file)
                 rescue => e
+                  puts e.full_message
                   puts 'Unable to write code changes! Running original example...'
-                  system "ruby -r #{glimmer_dsl_libui_file} #{file_path_for(selected_example)}"
+                  run_example(file_path_for(selected_example))
                 end
               end
             }
             button('Reset') {
               on_clicked do
-                @nwme.text = File.read(file_path_for(selected_example))
+                @code_entry.text = File.read(file_path_for(selected_example))
               end
             }
           }
         }
         
-        @nwme = non_wrapping_multiline_entry {
+        @code_entry = non_wrapping_multiline_entry {
           text File.read(file_path_for(selected_example))
         }
       }

data/examples/method_based_custom_keyword.rb

@@ -0,0 +1,87 @@
+require 'glimmer-dsl-libui'
+require 'facets'
+
+include Glimmer
+
+Address = Struct.new(:street, :p_o_box, :city, :state, :zip_code)
+
+def field(model, property)
+  property = property.to_s
+  entry { |e|
+    label property.underscore.split('_').map(&:capitalize).join(' ')
+    text model.send(property).to_s
+
+    on_changed do
+      model.send("#{property}=", e.text)
+    end
+  }
+end
+
+def address_form(address)
+  form {
+    field(address, :street)
+    field(address, :p_o_box)
+    field(address, :city)
+    field(address, :state)
+    field(address, :zip_code)
+  }
+end
+
+def label_pair(model, attribute, value)
+  name_label = nil
+  value_label = nil
+  horizontal_box {
+    name_label = label(attribute.to_s.underscore.split('_').map(&:capitalize).join(' '))
+    value_label = label(value.to_s)
+  }
+  Glimmer::DataBinding::Observer.proc do
+    value_label.text = model.send(attribute)
+  end.observe(model, attribute)
+end
+
+def address(address)
+  vertical_box {
+    address.each_pair do |attribute, value|
+      label_pair(address, attribute, value)
+    end
+  }
+end
+
+address1 = Address.new('123 Main St', '23923', 'Denver', 'Colorado', '80014')
+address2 = Address.new('2038 Park Ave', '83272', 'Boston', 'Massachusetts', '02101')
+
+window('Method-Based Custom Keyword') {
+  margined true
+  
+  horizontal_box {
+    vertical_box {
+      label('Address 1') {
+        stretchy false
+      }
+      address_form(address1)
+      horizontal_separator {
+        stretchy false
+      }
+      label('Address 1 (Saved)') {
+        stretchy false
+      }
+      address(address1)
+    }
+    vertical_separator {
+      stretchy false
+    }
+    vertical_box {
+      label('Address 2') {
+        stretchy false
+      }
+      address_form(address2)
+      horizontal_separator {
+        stretchy false
+      }
+      label('Address 2 (Saved)') {
+        stretchy false
+      }
+      address(address2)
+    }
+  }
+}.show

data/lib/glimmer/libui/control_proxy/path_proxy.rb

@@ -69,7 +69,6 @@ module Glimmer
             @fill ||= {}
           else
             @fill = Glimmer::LibUI.interpret_color(args)
-            @fill[:a] = 1.0 if @fill.is_a?(Hash) && @fill[:a].nil?
             @parent_proxy&.queue_redraw_all
           end
           @fill.tap do
@@ -94,7 +93,6 @@ module Glimmer
             @stroke ||= {}
           else
             @stroke = Glimmer::LibUI.interpret_color(args)
-            @stroke[:a] = 1.0 if @stroke.is_a?(Hash) && @stroke[:a].nil?
             @parent_proxy&.queue_redraw_all
           end
           @stroke.tap do
@@ -149,11 +147,38 @@ module Glimmer
         end
         
         def init_draw_brush(draw_brush, draw_brush_args)
+          if draw_brush_args[:r] || draw_brush_args[:g] || draw_brush_args[:b] || draw_brush_args[:a]
+            draw_brush_args[:type] ||= :solid
+          elsif draw_brush_args[:outer_radius]
+            draw_brush_args[:type] ||= :radial_gradient
+          else
+            draw_brush_args[:type] ||= :linear_gradient
+          end
           draw_brush.Type = Glimmer::LibUI.enum_symbol_to_value(:draw_brush_type, draw_brush_args[:type])
-          draw_brush.R = (draw_brush_args[:r] || draw_brush_args[:red]).to_f / 255.0
-          draw_brush.G = (draw_brush_args[:g] || draw_brush_args[:green]).to_f / 255.0
-          draw_brush.B = (draw_brush_args[:b] || draw_brush_args[:blue]).to_f / 255.0
-          draw_brush.A = (draw_brush_args[:a] || draw_brush_args[:alpha])
+          if draw_brush.Type == 0
+            draw_brush.R = (draw_brush_args[:r] || draw_brush_args[:red]).to_f / 255.0
+            draw_brush.G = (draw_brush_args[:g] || draw_brush_args[:green]).to_f / 255.0
+            draw_brush.B = (draw_brush_args[:b] || draw_brush_args[:blue]).to_f / 255.0
+            draw_brush.A = (draw_brush_args[:a] || draw_brush_args[:alpha] || 1.0)
+          else
+            draw_brush.X0 = draw_brush_args[:x0].to_f
+            draw_brush.Y0 = draw_brush_args[:y0].to_f
+            draw_brush.X1 = draw_brush_args[:x1].to_f
+            draw_brush.Y1 = draw_brush_args[:y1].to_f
+            draw_brush.OuterRadius = draw_brush_args[:outer_radius].to_f if draw_brush.Type == 2
+            stop_structs = draw_brush_args[:stops].to_a.map do |stop|
+              ::LibUI::FFI::DrawBrushGradientStop.malloc.tap do |stop_struct|
+                stop_struct.Pos = stop[:pos].to_f
+                stop_color = Glimmer::LibUI.interpret_color(stop)
+                stop_struct.R = stop_color[:r].to_f / 255.0
+                stop_struct.G = stop_color[:g].to_f / 255.0
+                stop_struct.B = stop_color[:b].to_f / 255.0
+                stop_struct.A = stop_color[:a] || 1.0
+              end
+            end
+            draw_brush.NumStops = stop_structs.count
+            draw_brush.Stops = stop_structs.map(&:to_ptr).map(&:to_s).reduce(:+)
+          end
         end
       end
     end

data/lib/glimmer/libui.rb

@@ -44,8 +44,8 @@ module Glimmer
           value = value[0...-1]
         end
         value = value.first if value.is_a?(Array) && value.size == 1
-        value = value.to_s if value.is_a?(Symbol)
         value = value[:color] if value.is_a?(Hash) && value[:color]
+        value = value.to_s if value.is_a?(Symbol)
         result = if value.is_a?(Array)
           old_value = value
           value = {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: glimmer-dsl-libui
 version: !ruby/object:Gem::Version
-  version: 0.2.9
+  version: 0.2.10
 platform: ruby
 authors:
 - Andy Maleh
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-10-07 00:00:00.000000000 Z
+date: 2021-10-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: glimmer
@@ -246,6 +246,7 @@ files:
 - examples/histogram.rb
 - examples/login.rb
 - examples/meta_example.rb
+- examples/method_based_custom_keyword.rb
 - examples/midi_player.rb
 - examples/simple_notepad.rb
 - examples/timer.rb