Custom Field Editors

To provide the users with the most efficient user interface you can choose to create custom field editors. Smallworld allows to some extend the possibility to do this.
I will show three examples of custom field editors in the hope that it will trigger your imagination to create your own:

  1. a spin field editor;
  2. a choice_item with images;
  3. a field editor with a toggle_item in it.

All three examples are for the Beer collection in the Cambridge application. The collection is available from the Pub/Restaurant editor.

Spin field editor

The spin field editor has two additional buttons. One on the left to decrease the value and one on the right to increase the value.
spin_field_editor.png
These are the main steps to implement this field editor.
First subclass the in_place_alpha_field_editor and create your new exemplar. The in_place_alpha_field_editor has a text_item that gets and sets the value of a field. This will serve as a base for our extension.

_pragma(classify_level=restricted)
## Demo field_editor that shows an editor with 2 buttons, one
## to decrease the value and one to increase the value.
def_slotted_exemplar( :in_place_spin_field_editor,
                      {
                  {:min, _unset},
                  {:max, _unset}
              },
              :in_place_alpha_field_editor )
$

Next override the method add_actions() to create the actions required for your editor. Note that the order in which the actions are created are important because that will be the order in which they will appear in the editor.
_pragma(classify_level=restricted)
_method in_place_spin_field_editor.add_actions()
    ## Create the actions that will make up the gui. Note that the
    ## order in whick the action are creaed also define the order
    ## in the field_editor.
    _self.add_action(sw_edit_action.new(:left,
                        :engine, _self,
                        :image, {:left_12x12, _self.module_name},
                        :action_message, :|spin_left()|))
    _super.add_actions()
    _self.add_action(sw_edit_action.new(:right,
                        :engine, _self,
                        :image, {:right_12x12, _self.module_name},
                        :action_message, :|spin_right()|))
_endmethod
$

Next implement the spin_left() and spin_right() method.

Finally register the new field editor with the editor_manager to make it is available in the Ace Object Properties editor.

# Register the field_editor with the editor_manager so that the
# user can select it.
editor_manager.register_field_editor(
                      :in_place_spin_field_editor,
                      _unset, { :alpha_field } )

Image Choice field editor

The image_choice_field editor can display images in the field editor to make a more appealing interface.
image_choice_field_editor.png
The implementation is actually really simple.
First subclass the in_place_choice_field_editor and create your new exemplar.

_pragma(classify_level=restricted)
##
## Demo choice field editor that uses images and strings to
## show the enumerated values.
def_slotted_exemplar( :in_place_image_choice_field_editor,
                      { },
              :in_place_choice_field_editor )
$

Next override the method items to return styled_strings instead of strings. That will do the trick! In my demo sourcecode I have delegated the task to the exemplar to create flexibility and reusability.
_pragma(classify_level=restricted)
_method in_place_image_choice_field_editor.items
    ## The main method that supplies the items to show. The items
    ## are a list of vectors of 2. The first item is the value, the
    ## second is the representation. The second will be transformed
    ## into a styled_string to make images for the dropdown list.

    _local items << _super.items

    _local new_items << rope.new_for(items.size)
    _local rec << _self.editor_work_record()
    _local fd << .field_item.field_descriptor

    _for i_vec _over items.fast_elements()
    _loop
        (value, string) << (_scatter i_vec)
        style << rec.styled_string_for_field_editor(fd, value, string)
        new_items.add({value,style})
    _endloop
    _return new_items
_endmethod
$

_pragma(classify_level=basic)
_method beer.styled_string_for_field_editor(p_field_descriptor, p_value, p_string)
    ## Return a styled string to display P_VALUE in the field editor.
    _if p_value _is _unset
    _then
        style << styled_string.new(:image, {:empty, :custom_field_editors_demo})
    _else
        style << styled_string.new(:image, {p_value.as_symbol(), :custom_field_editors_demo}, p_string)
    _endif
    _return style
_endmethod
$

Finally register the new editor with the editor_manager to make it available in the Ace Object Properties editor.

Toggle field editor

The toggle field editor shows a toggle control to set a value for a boolean field. This makes intuitive sense and is easy to use.
toggle_field_editor.png
The implementation is a bit harder than the previous field editors because the field editors are all hardwired to use only image_buttons, image_items and text_items. I extended the ability (very simple) to include toggle_items. You can read it in the attached sourcecode.
First subclass the in_place_value_editor and create your new exemplar. The in_place_value_editor is build around an sw_action object called :value. The trick is to create another sw_action in the subclass with the same name, but with a toggle_item as gui.

_pragma(classify_level=restricted)
_private _method in_place_toggle_editor.add_actions()    
    ## Create the actions that will appear in this
    ## in_place_editor. Their corresponding controls will be
    ## displayed in the order in which they are added.  

    _self.add_action(sw_edit_action.new(:value,
                        :engine,               _self,
                        :value_change_message, :|value_changed()|,
                        :toolbar_control,      {:toggle_item, :label, "" }))
    _self.add_action(sw_edit_action.new(:label,
                        :enabled?, _false,
                        :toolbar_control,      {:text_item, :max_length, 5 }))
_endmethod
$

Next subclass the in_place_toggle_editor to create the in_place_toggle_field_editor.
_pragma(classify_level=restricted)
##
## Demo field_editor that works with a toggle item to set the
## value.
def_slotted_exemplar( :in_place_toggle_field_editor,
                      {
                  {:field_item, _unset, :writable}
              },
              { :in_place_toggle_editor, :in_place_field_editor_mixin } )
$

Finally register the new editor with the editor_manager to make it available in the Ace Object Property editor.

Ace Object Properties

This is how the Object Properties dialog will look if you want to implement all three field editors.
ace_object_properties.png

Sourcecode

The sourcecode is attached as a module: custom_field_editors.zip.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License