README.md in glimmer-cw-cdatetime-nebula-1.4.0.2.0 vs README.md in glimmer-cw-cdatetime-nebula-1.4.0.2.1

- old
+ new

@@ -1,47 +1,48 @@ -# Nebula CDateTime Widget 1.4.0.2.0 +# Nebula CDateTime Widget 1.4.0.2.1 ## [<img src="https://raw.githubusercontent.com/AndyObtiva/glimmer/master/images/glimmer-logo-hi-res.png" height=40 /> Glimmer Custom Widget](https://github.com/AndyObtiva/glimmer#custom-widget-gem) [![Gem Version](https://badge.fury.io/rb/glimmer-cw-cdatetime-nebula.svg)](http://badge.fury.io/rb/glimmer-cw-cdatetime-nebula) -[<img alt="Nebula CDateTime Widget" src="https://www.eclipse.org/nebula/widgets/cdatetime/images/CDTSnippet02.png" />](https://www.eclipse.org/nebula/widgets/cdatetime/cdatetime.php) +<img alt="Nebula CDateTime Widget" src="https://www.eclipse.org/nebula/widgets/cdatetime/images/CDTSnippet02.png" />](https://www.eclipse.org/nebula/widgets/cdatetime/cdatetime.php) -The [Nebula CDateTime Widget](https://www.eclipse.org/nebula/widgets/cdatetime/cdatetime.php) is a Date and Time selection widget that can be used in a plain (graphical), dropdown, spinner, or compact text style. +The [Nebula CDateTime Widget](https://www.eclipse.org/nebula/widgets/cdatetime/cdatetime.php) is a Date and Time selection widget that can be used in a simple, dropdown, spinner, or compact style. Packaged as a [Glimmer Custom Widget](https://github.com/AndyObtiva/glimmer#custom-widget-gem) to provide date/time selection via a combo/dropdown-style widget in [Glimmer](https://github.com/AndyObtiva/glimmer) using the `c_date_time` [Glimmer DSL](https://github.com/AndyObtiva/glimmer#glimmer-dsl-syntax) keyword. [glimmer-cw-cdatetime-nebula](https://rubygems.org/gems/glimmer-cw-cdatetime-nebula) 1.4.0.x.y gem versions map to Nebula CDateTime Widget version 1.4.0 ## Table of contents -- [Nebula CDateTime Widget 1.4.0.2.0](#nebula-cdatetime-widget-14020) +# Table of contents + +- [Nebula CDateTime Widget 1.4.0.2.1](#nebula-cdatetime-widget-14021) - [Pre-requisites](#pre-requisites) - [Setup](#setup) - [Glimmer Application](#glimmer-application) - [Glimmer Custom Shell or Glimmer Custom Widget](#glimmer-custom-shell-or-glimmer-custom-widget) - [Java Imports](#java-imports) - - [Instructions](#instructions) + - [Usage Instructions](#usage-instructions) - [Sample](#sample) - - [Plain](#plain) + - [Simple Style](#simple-style) - [`c_date_time`](#cdatetime) - [`c_date`](#cdate) - [`c_time`](#ctime) - - [Drop Down](#drop-down) + - [Drop Down Style](#drop-down-style) - [`c_date_time_drop_down`](#cdatetimedropdown) - [`c_date_drop_down`](#cdatedropdown) - [`c_time_drop_down`](#ctimedropdown) - - [Spinner](#spinner) + - [Spinner Style](#spinner-style) - [`c_date_time_spinner`](#cdatetimespinner) - [`c_date_spinner`](#cdatespinner) - [`c_time_spinner`](#ctimespinner) - - [Compact](#compact) + - [Compact Style](#compact-style) - [`c_date_time_compact`](#cdatetimecompact) - [`c_date_compact`](#cdatecompact) - [`c_time_compact`](#ctimecompact) - - [Style](#style) - - [`cdt`](#cdt) + - [`CDT` Style Arguments](#cdt-style-arguments) - [Data-Binding and Observers:](#data-binding-and-observers) - - [Table Editing](#table-editing) + - [Table Editor](#table-editor) - [API](#api) - [Glimmer Custom API](#glimmer-custom-api) - [`toggle_open`](#toggleopen) - [`text_widget_proxy`](#textwidgetproxy) - [TODO](#todo) @@ -64,11 +65,11 @@ ### Glimmer Application Add the following to a [Glimmer](https://github.com/AndyObtiva/glimmer) application `Gemfile`: ```ruby -gem 'glimmer-cw-cdatetime-nebula', '1.4.0.2.0' +gem 'glimmer-cw-cdatetime-nebula', '1.4.0.2.1' ``` Run: ``` @@ -93,13 +94,13 @@ - `org.eclipse.nebula.cwt` - `org.eclipse.nebula.widgets.cdatetime` ## Usage Instructions -This [glimmer-cw-cdatetime-nebula](https://rubygems.org/gems/glimmer-cw-cdatetime-nebula) gem adds the `c_date_time` keyword to the [Glimmer GUI DSL](https://github.com/AndyObtiva/glimmer#glimmer-dsl-syntax) as well as other alias keywords as explained below. +This [glimmer-cw-cdatetime-nebula](https://rubygems.org/gems/glimmer-cw-cdatetime-nebula) gem adds the `c_date_time` keyword to the [Glimmer GUI DSL](https://github.com/AndyObtiva/glimmer#glimmer-dsl-syntax) as well as other alias keywords (e.g. drop down style, spinner style, and compact style) as explained below. -The `c_date_time` keyword takes [`CDT`](#cdt) style bits as arguments. +The `c_date_time` keyword optionally takes [`CDT`](#cdt) style bits as arguments. When not specified, [smart defaults](https://github.com/AndyObtiva/glimmer-cw-cdatetime-nebula#cdt-style-arguments) are used instead. Example: ```ruby c_date_time(:border, :compact, :drop_down, :date_long) @@ -113,104 +114,259 @@ ``` glimmer sample:run[c_date_time_gallery] ``` -### Plain +Glimmer Code: -![plain screenshot](images/glimmer-cw-cdatetime-nebula-plain.png) +```ruby +require_relative '../../lib/glimmer-cw-cdatetime-nebula' +class CDateTimeGallery + include Glimmer + + def open + shell { + grid_layout(4, false) { + vertical_spacing 20 + } + text 'Nebula CDateTime Glimmer Custom Widget Gallery' + + label { + layout_data(:center, :center, true, false) { + horizontal_span 4 + } + text 'Nebula CDateTime Glimmer Custom Widget Gallery' + font height: 24, style: :bold + } + + tab_folder { + tab_item { + grid_layout 2, false + text 'Simple' + + label { + text 'c_date_time' + font name: 'Consolas', height: 14 + } + c_date_time + + label { + text 'c_date' + font name: 'Consolas', height: 14 + } + c_date + + label { + text 'c_time' + font name: 'Consolas', height: 14 + } + c_time + } + + tab_item { + grid_layout 2, false + text 'Drop Down' + + label { + text 'c_date_time_drop_down' + font name: 'Consolas', height: 14 + } + c_date_time_drop_down { + layout_data(:fill, :center, true, true) + } + + label { + text 'c_date_drop_down' + font name: 'Consolas', height: 14 + } + c_date_drop_down { + layout_data(:fill, :center, true, true) + } + + label { + text 'c_time_drop_down' + font name: 'Consolas', height: 14 + } + c_time_drop_down { + layout_data(:fill, :center, true, true) + } + } + + tab_item { + grid_layout 2, false + text 'Spinner' + + label { + text 'c_date_time_spinner' + font name: 'Consolas', height: 14 + } + c_date_time_spinner { + layout_data(:fill, :center, true, true) + } + + label { + text 'c_date_spinner' + font name: 'Consolas', height: 14 + } + c_date_spinner { + layout_data(:fill, :center, true, true) + } + + label { + text 'c_time_spinner' + font name: 'Consolas', height: 14 + } + c_time_spinner { + layout_data(:fill, :center, true, true) + } + } + + tab_item { + grid_layout 2, false + text 'Compact' + + label { + text 'c_date_time_compact' + font name: 'Consolas', height: 14 + } + c_date_time_compact { + layout_data(:fill, :center, true, true) + } + + label { + text 'c_date_compact' + font name: 'Consolas', height: 14 + } + c_date_compact { + layout_data(:fill, :center, true, true) + } + + label { + text 'c_time_compact' + font name: 'Consolas', height: 14 + } + c_time_compact { + layout_data(:fill, :center, true, true) + } + } + } + }.open + end +end + +CDateTimeGallery.new.open +``` + +### Simple Style + +Simple style is the default style when using `c_date_time`, `c_date`, and `c_time` keywords. It displays a graphical calendar/clock. + +`CDT::SIMPLE` style is applied by default but may be overriden by manually passing arguments to the keywords. + +![simple screenshot](images/glimmer-cw-cdatetime-nebula-simple.png) + #### `c_date_time` -Main keyword representing the Nebula CDateTime custom widget. Defaults to date/time pattern `'MM/dd/yyyy hh:mm a'` and plain style with a border +Main keyword representing the Nebula CDateTime custom widget. Defaults to date/time [pattern](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html) `'MM/dd/yyyy hh:mm a'` and simple style with a border #### `c_date` -Alias keyword that specifies date pattern `'MM/dd/yyyy'` and plain style with a border +Alias keyword that specifies date [pattern](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html) `'MM/dd/yyyy'` and simple style with a border #### `c_time` -Alias keyword that specifies time pattern `'hh:mm a'` and plain style with a border +Alias keyword that specifies time [pattern](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html) `'hh:mm a'` and simple style with a border -### Drop Down +### Drop Down Style -![plain screenshot](images/glimmer-cw-cdatetime-nebula-drop-down.png) +Drop down style is used with the `c_date_time_drop_down`, `c_date_drop_down`, and `c_time_drop_down` keywords to provide a text box for textual entry of date/time coupled with a drop down button for bringing up the calendar/clock to perform graphical selection. +`CDT::DROP_DOWN` style is applied by default but may be overriden by manually passing arguments to the keywords. + +![dropdown screenshot](images/glimmer-cw-cdatetime-nebula-drop-down.png) + #### `c_date_time_drop_down` -Alias keyword that specifies date/time pattern `'MM/dd/yyyy hh:mm a'` and drop down style with a border +Alias keyword that specifies date/time [pattern](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html) `'MM/dd/yyyy hh:mm a'` and drop down style with a border -![plain screenshot](images/glimmer-cw-cdatetime-nebula-drop-down-date-time.png) +![date time dropdown screenshot](images/glimmer-cw-cdatetime-nebula-drop-down-date-time.png) #### `c_date_drop_down` -Alias keyword that specifies date pattern `'MM/dd/yyyy'` and drop down style with a border +Alias keyword that specifies date [pattern](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html) `'MM/dd/yyyy'` and drop down style with a border -![plain screenshot](images/glimmer-cw-cdatetime-nebula-drop-down-date.png) +![date dropdown screenshot](images/glimmer-cw-cdatetime-nebula-drop-down-date.png) #### `c_time_drop_down` -Alias that specifies time pattern `'hh:mm a'` and drop down style with a border +Alias that specifies time [pattern](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html) `'hh:mm a'` and drop down style with a border -![plain screenshot](images/glimmer-cw-cdatetime-nebula-drop-down-time.png) +![time dropdown screenshot](images/glimmer-cw-cdatetime-nebula-drop-down-time.png) -### Spinner +### Spinner Style -![plain screenshot](images/glimmer-cw-cdatetime-nebula-spinner.png) +Spinner style is used with the `c_date_time_spinner`, `c_date_spinner`, and `c_time_spinner` keywords to provide a spinner for textual entry of date/time accompanied by up and down spinner buttons. +`CDT::SPINNER` style is applied by default but may be overriden by manually passing arguments to the keywords. + +![spinner screenshot](images/glimmer-cw-cdatetime-nebula-spinner.png) + #### `c_date_time_spinner` -Alias that specifies date/time pattern `'MM/dd/yyyy hh:mm a'` and spinner style with a border +Alias that specifies date/time [pattern](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html) `'MM/dd/yyyy hh:mm a'` and spinner style with a border #### `c_date_spinner` -Alias that specifies date pattern `'MM/dd/yyyy'` and spinner style with a border +Alias that specifies date [pattern](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html) `'MM/dd/yyyy'` and spinner style with a border #### `c_time_spinner` -Alias that specifies time pattern `'hh:mm a'` and spinner style with a border +Alias that specifies time [pattern](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html) `'hh:mm a'` and spinner style with a border -### Compact +### Compact Style -![plain screenshot](images/glimmer-cw-cdatetime-nebula-compact.png) +Compact style is used with the `c_date_time_compact`, `c_date_compact`, and `c_time_compact` keywords to provide a compact text widget for date/time without any extra buttons. +`CDT::COMPACT` style is applied by default but may be overriden by manually passing arguments to the keywords. + +![compact screenshot](images/glimmer-cw-cdatetime-nebula-compact.png) + #### `c_date_time_compact` -Alias that specifies date/time pattern `'MM/dd/yyyy hh:mm a'` and compact style (just a text field) with a border +Alias that specifies date/time [pattern](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html) `'MM/dd/yyyy hh:mm a'` and compact style (just a text field) with a border #### `c_date_compact` -Alias that specifies date pattern `'MM/dd/yyyy'` and compact style (just a text field) with a border +Alias that specifies date [pattern](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html) `'MM/dd/yyyy'` and compact style (just a text field) with a border #### `c_time_compact` -Alias that specifies time pattern `'hh:mm a'` and compact style (just a text field) with a border +Alias that specifies time [pattern](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html) `'hh:mm a'` and compact style (just a text field) with a border -### Style +### `CDT` Style Arguments -#### `cdt` - [`CDT`](https://www.eclipse.org/nebula/releases/latest/javadoc/org/eclipse/nebula/widgets/cdatetime/CDT.html) styles are fully documented in the [Nebula `CDT` Javadoc](https://www.eclipse.org/nebula/releases/latest/javadoc/org/eclipse/nebula/widgets/cdatetime/CDT.html). The `cdt` keyword builds a [`CDT`](https://www.eclipse.org/nebula/releases/latest/javadoc/org/eclipse/nebula/widgets/cdatetime/CDT.html) style by passing in comma-separated symbols (e.g. `cdt(:border, :drop_down, :date_long)`) For example, instead of passing style as bit-or'ed `CDT` Constant style bits: ```ruby -c_date_time(CDT::BORDER | CDT::COMPACT | CDT::DROP_DOWN | CDT::DATE_LONG) +c_date_time(CDT::BORDER | CDT::TAB_FIELDS | CDT::DROP_DOWN | CDT::DATE_LONG) ``` You instead pass style as comma-separated symbols: ```ruby -c_date_time(cdt(:border, :compact, :drop_down, :date_long)) +c_date_time(cdt(:border, :tab_fields, :drop_down, :date_long)) ``` However, `c_date_time` goes one step further and uses it internally automatically by all `c_date_time` keyword initializers, so you could ditch the `cdt` entirely when constructing a widget. ```ruby -c_date_time(:border, :compact, :drop_down, :date_long) +c_date_time(:border, :tab_fields, :drop_down, :date_long) ``` Furthermore, `c_date_time` has pre-configured smart defaults for `CDT` styles: ``` @@ -249,13 +405,13 @@ # ... ``` ![Nebula CDateTime Example](images/glimmer-cw-cdatetime-nebula-example.png) -### Table Editing +### Table Editor -`c_date_time` can be used as a `table` / `table_column` editor. +`c_date_time` (and any keyword aliases) can be used as a `table` / `table_column` editor by passing as symbol to `editor` property (optionally followed by args model editing property). Example: ```ruby # ... @@ -267,11 +423,11 @@ editor :c_date_time, cdt(:border, :drop_down, :date_long), property: :start_at } table_column { text 'End Date' width CONFIG[:table_column_width_hint] - editor :c_date_time, cdt(:border, :drop_down, :date_long), property: :end_at + editor :c_date_drop_down, property: :end_at } # ... other table_column declarations items bind(Task, :list), column_properties(:project_name, :task_type, :name, :start_date, :end_date, :duration, :priority) # ... other table GUI code } @@ -282,10 +438,24 @@ ## API You may check out the Nebula CDateTime Widget [Javadoc API](https://www.eclipse.org/nebula/releases/latest/javadoc/org/eclipse/nebula/widgets/cdatetime/CDateTime.html). +One noteworthy property is [pattern](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html), which can be customized according to the date/time pattern [SimpleDateFormat Javadoc](https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html). + +Example: + +```ruby +c_date_time(:border, :drop_down) { + pattern 'hh:mm a' +} +``` + +This should customize `c_date_time` to function just like `c_time_drop_down` + +![time drop down screenshot](images/glimmer-cw-cdatetime-nebula-drop-down-time.png) + ### Glimmer Custom API Glimmer adds a few extra API methods to CDateTime from Nebula. #### `toggle_open` @@ -300,10 +470,10 @@ ``` c_time { |proxy| proxy.text_widget_proxy.content { on_swt_mouseup { |event| - proxy.toggle_open + proxy.toggle_open } } } ```