Components.ewu

$version 12.00

// Components
note group Note1
{
  attr Bounds = <10,0,450,370>;
}

// This class implements a 'push button' widget. When the user presses the button, \
// a signal is sent to the slot method stored in its @OnActivate property.
$rect <20,50,220,90>
$output false
class ButtonBase70x90 : Templates::PushButton
{
  $rect <0,110,200,150>
  inherited property Bounds = <0,0,70,90>;

  $rect <20,370,220,410>
  inherited method UpdateViewState()
  {
    // Always invoke the inherited method.
    super( aState );

    // Determine the new state of the push button.
    //
    // isEnabled  --> the button can react to user inputs.
    // isSelected --> the button can receive keyboard events.
    // isPressed  --> the button should appear pressed.
    //
    var bool isEnabled  = aState.contains( Core::ViewState[ Enabled  ]);
    var bool isSelected = aState.contains( Core::ViewState[ Selected ]);
    var bool isPressed  = ( TouchHandler.Down && TouchHandler.Inside ) || 
                            FlashTimer.Enabled;


    Background.Bitmap = Backgound;
    // Update the parameters of the text view (label)
    if ( InitialsTxt != null )
    { 
      InitialsTxt.Font   = IconFont;
      InitialsTxt.String = Icon;
      InitialsTxt.Color  = IconColor; 
      }

      // Update the parameters of the text view (label)
    if ( DescripTxt != null )
    {
      DescripTxt.Font   = DescriptFont;
      DescripTxt.String = Descript;
      DescripTxt.Color  = DescriptColor; 
      }


    if ( !isEnabled )
    {
      Background.Color  = BackgroundColorEnabled;
      DescripTxt.Color  = DescriptColorEnabled;
      InitialsTxt.Color = IconColorEnabled;
      //Border.Color     = #CCCCCCFF;
      //Border.Width     = 1;
    }

    else if ( isPressed )
    {
      Background.Color = BackgoundColorPressed;
       DescripTxt.Color  = DescriptColorPressed;
      InitialsTxt.Color = IconColorPressed;
      //Border.Color     = #000000FF;
     // Border.Width     = 3;
    }

    else if ( isSelected )
    {
      Background.Color =BackgoundColor;
     // Border.Color     = #444444FF;
     // Border.Width     = 3;
    }

    // Enabled but not pressed nor selected.
    else
    {
      Background.Color = BackgoundColor;
     // Border.Color     = #444444FF;
     // Border.Width     = 1;
    }



    // Remember the current state. Next time when the UpdateViewState() is called
    // you can compare the 'old' state with the 'new' state and perform more
    // sophisticated update, e.g. you can start an animation effect for the
    // pressed <<-->> not pressed transition.
    enabled  = isEnabled;
    selected = isSelected;
    pressed  = isPressed;


  }

  // State management
  note group Note4
  {
    attr Bounds = <10,330,230,600>;
  }

  // Feedback flash effect
  note group Note3
  {
    attr Bounds = <240,470,460,600>;
  }

  // Keyboard events
  note group Note2
  {
    attr Bounds = <240,330,460,460>;
  }

  // Touch screen events
  note group Note1
  {
    attr Bounds = <10,150,230,320>;
  }

  // This variable stores the current state of the button.
  $rect <20,490,220,530>
  var bool pressed;

  // This variable stores the current state of the button.
  $rect <20,450,220,490>
  var bool selected;

  // This variable stores the current state of the button.
  $rect <20,410,220,450>
  var bool enabled;

  // This timer object is used to flash the button when the user has tapped it very \
  // quickly or the button has been activated with the keyboard. This is just a visual \
  // feedback effect.
  $rect <250,510,450,550>
  object Core::Timer FlashTimer
  {
    preset OnTrigger = onFlashTimer;
    preset Period = 0;
    preset Begin = 50;
  }

  // This key handler reacts to key press events. When the user presses the key specified \
  // in the property 'Filter' of the key handler, the handler is activated and the \
  // method '@onPressKey' is called.
  $rect <250,370,450,410>
  object Core::KeyPressHandler KeyHandler
  {
    preset OnPress = onPressKey;
    preset Filter = Core::KeyCode.Enter;
  }

  // This internal slot method is called when the '@FlashTimer' is expired. It ends \
  // the short flash feedback effect.
  $rect <250,550,450,590>
  slot onFlashTimer
  {
    // The feedback flash timer is finished. Request the button to update its
    // appearance. The update will occur in the UpdateViewState() method.
    InvalidateViewState();

    // With the end of the feedback flash effect the button is activated.
    postsignal OnActivate;
  }

  // This internal slot method is called when the '@KeyHandler' is activated (when \
  // the user has pressed the key specified in the property 'Filter' of the key handler).
  $rect <250,410,450,450>
  slot onPressKey
  {
    // Ignore keyboard events when the user is interacting with the button via the
    // touch screen.
    if ( TouchHandler.Down )
      return;

    // Ignore repetitions of key events (e.g. when the user holds the key pressed)
    if ( KeyHandler.Repetition )
      return;

    // Pressing the key flashes the button for a short period. This is a kind of 
    // feedback effect. Request the button to update its appearance accordingly.
    // The update will occur in the UpdateViewState() method.
    InvalidateViewState();

    // The button is still performing the feedback flash effect from the preceding
    // tap/key event. This can occur when the user taps the button or presses the
    // key in a very rapid succession. Thus complete this preceding tap (simulate
    // the timer expiration) before starting a new button interaction.
    if ( FlashTimer.Enabled )
    {
      postsignal OnActivate;
      FlashTimer.Enabled = false;
    }

    // Start the feedback flash effect.
    FlashTimer.Enabled = true;
  }

  // This internal slot method is called when the user drags the finger while pressing \
  // the button. This only updates the button to appear pressed or released.
  $rect <20,270,220,310>
  slot onEnterLeaveTouch
  {
    // Every time the user touches the button or drags the finger inside/outside
    // the button's area request the button update its appearance. The update will
    // occur in the UpdateViewState() method.
    InvalidateViewState();
  }

  // This internal slot method is called when the user releases the touch screen \
  // after touching the button's area. This activates the button.
  $rect <20,230,220,270>
  slot onReleaseTouch
  {
    // Did the user moved the finger outside the button's area? In such case
    // the button is not activated.
    if ( !TouchHandler.Inside )
      return;

    // The user interaction has been passed over to the another touch handler
    if ( TouchHandler.AutoDeflected )
      return;

    // The user has pressed and held the button for longer time. This was enough
    // long to give a visual 'press' feedback to the user. The button can be
    // activated immediately.
    if ( TouchHandler.HoldPeriod >= FlashTimer.Begin )
      postsignal OnActivate;

    // The user has tapped the button very quickly. Defer the button activation
    // to give the user first a short visual feedback that the button has been
    // pressed.
    else
      FlashTimer.Enabled = true;
  }

  // This internal slot method is called when the user touches the button's area.
  $rect <20,190,220,230>
  slot onPressTouch
  {
    // The button is still performing the feedback flash effect from the preceding
    // tap. This can occur when the user taps the button in a very rapid succession. 
    // Thus complete this preceding tap (simulate the timer expiration) before 
    // starting a new button interaction.
    if ( FlashTimer.Enabled )
    {
      postsignal OnActivate;
      FlashTimer.Enabled = false;
    }
  }

  $rect <450,50,650,90>
  onset Icon
  {
    // The value doesn't change - nothing to do.
    if ( pure Icon == value )
      return;

    // Remember the property's new value.
    pure Icon = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();
  }

  // The property 'Label' specifies the text to display as label in this push button \
  // widget. The desired font as well as the colors for all individual button states \
  // have to be specified in the configuration object assigned to the property @Appearance. \
  // If there is no configuration object associated to this push button widget (the \
  // property @Appearance is 'null'), no label is displayed.
  // Per default, the label is displayed centered within the push button area. You \
  // can modify the alignment of the label as well as its margins by specifying them \
  // in the configuration object.
  $rect <450,10,650,50>
  property string Icon = "";

  // The property 'OnActivate' can refer to a slot method, which will receive a signal \
  // as soon as the user has activated the button. Thereupon the method's logic will \
  // be executed.
  $rect <250,10,450,50>
  property slot OnActivate = null;

  $rect <20,530,220,570>
  var Views::Text textView;

  $rect <660,10,860,50>
  property string Descript = "";

  $rect <660,50,860,90>
  onset Descript
  {
    // The value doesn't change - nothing to do.
    if ( pure Descript == value )
      return;

    // Remember the property's new value.
    pure Descript = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();
  }

  $rect <660,90,860,130>
  property color DescriptColor = Res::Blue;

  $rect <660,130,860,170>
  onset DescriptColor
  {
    // The value doesn't change - nothing to do.
    if ( pure DescriptColor == value )
      return;

    // Remember the property's new value.
    pure DescriptColor = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();
  }

  $rect <450,90,650,130>
  property color IconColor = Res::WhiteComponents;

  $rect <450,130,650,170>
  onset IconColor
  {
    // The value doesn't change - nothing to do.
    if ( pure IconColor == value )
      return;

    // Remember the property's new value.
    pure IconColor = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();
  }

  $rect <870,90,1070,130>
  property color BackgoundColor = Res::Grey;

  $rect <870,130,1070,170>
  onset BackgoundColor
  {
    // The value doesn't change - nothing to do.
    if ( pure BackgoundColor == value )
      return;

    // Remember the property's new value.
    pure BackgoundColor = value;

    InvalidateViewState();
  }

  $rect <870,170,1070,210>
  property color BackgoundColorPressed = Res::GreyLight;

  $rect <870,210,1070,250>
  onset BackgoundColorPressed
  {
    // The value doesn't change - nothing to do.
    if ( pure BackgoundColorPressed == value )
      return;

    // Remember the property's new value.
    pure BackgoundColorPressed = value;

    InvalidateViewState();
  }

  $rect <660,170,860,210>
  property Resources::Font DescriptFont = Res::ContactFont12;

  $rect <660,210,860,250>
  onset DescriptFont
  {
    // The value doesn't change - nothing to do.
    if ( pure DescriptFont == value )
      return;

    // Remember the property's new value.
    pure DescriptFont = value;

    InvalidateViewState();
  }

  $rect <450,170,650,210>
  property Resources::Font IconFont = Res::TitileFont25;

  $rect <450,210,650,250>
  onset IconFont
  {
    // The value doesn't change - nothing to do.
    if ( pure IconFont == value )
      return;

    // Remember the property's new value.
    pure IconFont = value;

    InvalidateViewState();
  }

  $rect <870,10,1070,50>
  property Resources::Bitmap Backgound = Res::ButtonRoundBig;

  $rect <870,50,1070,90>
  onset Backgound
  {
    // The value doesn't change - nothing to do.
    if ( pure Backgound == value )
      return;

    // Remember the property's new value.
    pure Backgound = value;

    InvalidateViewState();
  }

  $rect <870,250,1070,290>
  property color BackgroundColorEnabled = Res::Grey;

  $rect <870,290,1070,330>
  onset BackgroundColorEnabled
  {
    // The value doesn't change - nothing to do.
    if ( pure BackgroundColorEnabled == value )
      return;

    // Remember the property's new value.
    pure BackgroundColorEnabled = value;

    InvalidateViewState();
  }

  $rect <660,250,860,290>
  property color DescriptColorEnabled = Res::Grey;

  $rect <660,290,860,330>
  onset DescriptColorEnabled
  {
    // The value doesn't change - nothing to do.
    if ( pure DescriptColorEnabled == value )
      return;

    // Remember the property's new value.
    pure DescriptColorEnabled = value;

    InvalidateViewState();
  }

  $rect <450,250,650,290>
  property color IconColorEnabled = Res::Grey;

  $rect <450,290,650,330>
  onset IconColorEnabled
  {
    // The value doesn't change - nothing to do.
    if ( pure IconColorEnabled == value )
      return;

    // Remember the property's new value.
    pure IconColorEnabled = value;

    InvalidateViewState();
  }

  $rect <660,330,860,370>
  property color DescriptColorPressed = Res::GreyLight;

  $rect <660,370,860,410>
  onset DescriptColorPressed
  {
    // The value doesn't change - nothing to do.
    if ( pure DescriptColorPressed == value )
      return;

    // Remember the property's new value.
    pure DescriptColorPressed = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();
  }

  $rect <450,330,650,370>
  property color IconColorPressed = Res::BlueLight;

  $rect <450,370,650,410>
  onset IconColorPressed
  {
    // The value doesn't change - nothing to do.
    if ( pure IconColorPressed == value )
      return;

    // Remember the property's new value.
    pure IconColorPressed = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();
  }

  $rect <20,20,160,60>
  object Views::Image Background
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <0,0,70,70>;
    preset Color = Res::WhiteComponents;
  }

  $rect <20,20,160,60>
  object Core::SimpleTouchHandler TouchHandler
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Point4 = <0,91>;
    preset Point3 = <70,91>;
    preset Point2 = <70,0>;
    preset Point1 = <0,0>;
    preset OnLeave = onEnterLeaveTouch;
    preset OnEnter = onEnterLeaveTouch;
    preset OnRelease = onReleaseTouch;
    preset OnPress = onPressTouch;
    preset RetargetCondition = Core::RetargetReason[WipeDown, WipeLeft, WipeRight, WipeUp];
    preset MaxStrikeCount = 100;
  }

  $rect <20,20,160,60>
  object Views::Text InitialsTxt
  {
    preset Bounds = <0,0,70,70>;
    preset AutoSize = true;
    preset String = "";
    preset Font = Res::IconsFont30;
    preset Color = #FFFFFFFF;
  }

  $rect <20,20,160,60>
  object Views::Text DescripTxt
  {
    preset Bounds = <0,70,70,91>;
    preset AutoSize = true;
    preset WrapText = true;
    preset Alignment = Views::TextAlignment[AlignHorzCenter, AlignVertCenter];
    preset String = "";
    preset Font = Res::ContactFontBold15;
  }
}

// This class implements a 'push button' widget. When the user presses the button, \
// a signal is sent to the slot method stored in its @OnActivate property.
$rect <240,90,440,130>
$output false
class Button265x470 : Templates::PushButton
{
  $rect <480,310,680,350>
  inherited property Bounds = <6,436,265,470>;

  $rect <710,190,910,230>
  inherited method UpdateViewState()
  {
    // Always invoke the inherited method.
    super( aState );

    // Determine the new state of the push button.
    //
    // isEnabled  --> the button can react to user inputs.
    // isSelected --> the button can receive keyboard events.
    // isPressed  --> the button should appear pressed.
    //
    var bool isEnabled  = aState.contains( Core::ViewState[ Enabled  ]);
    var bool isSelected = aState.contains( Core::ViewState[ Selected ]);
    var bool isPressed  = ( TouchHandler.Down && TouchHandler.Inside ) || 
                            FlashTimer.Enabled;

    /*

      TO DO:

      Depending on your button design, you have surely added some new views
      to your button. In the below code you should update the properties of
      these views. For example, when your button has two images to appear
      exclusively for released and pressed button state, following can be
      done:

        imagePressed.Visible  =  isPressed;
        imageReleased.Visible = !isPressed;

      Depending on the state of the button, you can alternate any property 
      of your views. You can change their visibility, colors, opacity,
      bitmaps shown in image views, fonts used to render text, the position
      and the size the view, ...
       

      HINT:

      Instead of instantly alternate the views properties you can here also
      start effects to do this with an animation. Important: To decide when
      to start an effect you should compare the current state of the button
      (e.g. 'isPressed') with its preceding state (e.g. variable 'pressed').

      Assuming you have already added to your button component a new effect
      member, named it 'pressedEffect' and configured it to animate e.g. the
      opacity of an image within the button. Then following is sufficient to
      trigger the animation:

        if ( isPressed && !pressed )
        {
          pressedEffect.Reversed = false;
          pressedEffect.Enabled  = true;
        }
        else if ( !isPressed && pressed )
        {
          pressedEffect.Reversed = true;
          pressedEffect.Enabled  = true;
        }

    */

    // Update the parameters of the text view (label)
    if ( Text != null )
    {
      var color clr = Res::Red; 
      Text.Font      = Res::ContactFont15;
      Text.String = String;
      Text.Color     = clr;
      }


    if ( !isEnabled )
    {
      Background.Color = Res::WhiteTransparent;
      Text.Color       = Res::Grey;  
    }

    else if ( isPressed )
    {
      Background.Color = Res::PressColor;
      Text.Color       = Res::RedLight;
    }

    else if ( isSelected )
    {
      Background.Color = Res::WhiteTransparent;
      }

    // Enabled but not pressed nor selected.
    else
    {
      Background.Color = Res::WhiteTransparent;
    }



    // Remember the current state. Next time when the UpdateViewState() is called
    // you can compare the 'old' state with the 'new' state and perform more
    // sophisticated update, e.g. you can start an animation effect for the
    // pressed <<-->> not pressed transition.  

    enabled  = isEnabled;
    selected = isSelected;
    pressed  = isPressed;


  }

  // State management
  note group Note4
  {
    attr Bounds = <700,150,920,400>;
  }

  // Feedback flash effect
  note group Note3
  {
    attr Bounds = <470,150,690,280>;
  }

  // Keyboard events
  note group Note2
  {
    attr Bounds = <240,150,460,280>;
  }

  // Touch screen events
  note group Note1
  {
    attr Bounds = <10,150,230,320>;
  }

  // This variable stores the current state of the button.
  $rect <710,310,910,350>
  var bool pressed;

  // This variable stores the current state of the button.
  $rect <710,270,910,310>
  var bool selected;

  // This variable stores the current state of the button.
  $rect <710,230,910,270>
  var bool enabled;

  // This timer object is used to flash the button when the user has tapped it very \
  // quickly or the button has been activated with the keyboard. This is just a visual \
  // feedback effect.
  $rect <480,190,680,230>
  object Core::Timer FlashTimer
  {
    preset OnTrigger = onFlashTimer;
    preset Period = 0;
    preset Begin = 50;
  }

  // This key handler reacts to key press events. When the user presses the key specified \
  // in the property 'Filter' of the key handler, the handler is activated and the \
  // method '@onPressKey' is called.
  $rect <250,190,450,230>
  object Core::KeyPressHandler KeyHandler
  {
    preset OnPress = onPressKey;
    preset Filter = Core::KeyCode.Enter;
  }

  // This internal slot method is called when the '@FlashTimer' is expired. It ends \
  // the short flash feedback effect.
  $rect <480,230,680,270>
  slot onFlashTimer
  {
    // The feedback flash timer is finished. Request the button to update its
    // appearance. The update will occur in the UpdateViewState() method.
    InvalidateViewState();

    // With the end of the feedback flash effect the button is activated.
    postsignal OnActivate;
  }

  // This internal slot method is called when the '@KeyHandler' is activated (when \
  // the user has pressed the key specified in the property 'Filter' of the key handler).
  $rect <250,230,450,270>
  slot onPressKey
  {
    // Ignore keyboard events when the user is interacting with the button via the
    // touch screen.
    if ( TouchHandler.Down )
      return;

    // Ignore repetitions of key events (e.g. when the user holds the key pressed)
    if ( KeyHandler.Repetition )
      return;

    // Pressing the key flashes the button for a short period. This is a kind of 
    // feedback effect. Request the button to update its appearance accordingly.
    // The update will occur in the UpdateViewState() method.
    InvalidateViewState();

    // The button is still performing the feedback flash effect from the preceding
    // tap/key event. This can occur when the user taps the button or presses the
    // key in a very rapid succession. Thus complete this preceding tap (simulate
    // the timer expiration) before starting a new button interaction.
    if ( FlashTimer.Enabled )
    {
      postsignal OnActivate;
      FlashTimer.Enabled = false;
    }

    // Start the feedback flash effect.
    FlashTimer.Enabled = true;
  }

  // This internal slot method is called when the user drags the finger while pressing \
  // the button. This only updates the button to appear pressed or released.
  $rect <20,270,220,310>
  slot onEnterLeaveTouch
  {
    // Every time the user touches the button or drags the finger inside/outside
    // the button's area request the button update its appearance. The update will
    // occur in the UpdateViewState() method.
    InvalidateViewState();
  }

  // This internal slot method is called when the user releases the touch screen \
  // after touching the button's area. This activates the button.
  $rect <20,230,220,270>
  slot onReleaseTouch
  {
    // Did the user moved the finger outside the button's area? In such case
    // the button is not activated.
    if ( !TouchHandler.Inside )
      return;

    // The user interaction has been passed over to the another touch handler
    if ( TouchHandler.AutoDeflected )
      return;

    // The user has pressed and held the button for longer time. This was enough
    // long to give a visual 'press' feedback to the user. The button can be
    // activated immediately.
    if ( TouchHandler.HoldPeriod >= FlashTimer.Begin )
      postsignal OnActivate;

    // The user has tapped the button very quickly. Defer the button activation
    // to give the user first a short visual feedback that the button has been
    // pressed.
    else
      FlashTimer.Enabled = true;
  }

  // This internal slot method is called when the user touches the button's area.
  $rect <20,190,220,230>
  slot onPressTouch
  {
    // The button is still performing the feedback flash effect from the preceding
    // tap. This can occur when the user taps the button in a very rapid succession. 
    // Thus complete this preceding tap (simulate the timer expiration) before 
    // starting a new button interaction.
    if ( FlashTimer.Enabled )
    {
      postsignal OnActivate;
      FlashTimer.Enabled = false;
    }
  }

  $rect <20,20,160,60>
  object Views::Rectangle Background
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <0,0,258,33>;
    preset Color = Res::WhiteComponents;
  }

  $rect <20,20,160,60>
  object Core::SimpleTouchHandler TouchHandler
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Point4 = <0,33>;
    preset Point3 = <258,33>;
    preset Point2 = <258,0>;
    preset Point1 = <0,0>;
    preset OnLeave = onEnterLeaveTouch;
    preset OnEnter = onEnterLeaveTouch;
    preset OnRelease = onReleaseTouch;
    preset OnPress = onPressTouch;
    preset RetargetCondition = Core::RetargetReason[WipeDown, WipeLeft, WipeRight, WipeUp];
    preset MaxStrikeCount = 100;
  }

  // The property 'OnActivate' can refer to a slot method, which will receive a signal \
  // as soon as the user has activated the button. Thereupon the method's logic will \
  // be executed.
  $rect <260,10,450,50>
  property slot OnActivate = null;

  $rect <450,50,650,90>
  onset String
  {
    // The value doesn't change - nothing to do.
    if ( pure String == value )
      return;

    // Remember the property's new value.
    pure String = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();
  }

  // The property 'Label' specifies the text to display as label in this push button \
  // widget. The desired font as well as the colors for all individual button states \
  // have to be specified in the configuration object assigned to the property @Appearance. \
  // If there is no configuration object associated to this push button widget (the \
  // property @Appearance is 'null'), no label is displayed.
  // Per default, the label is displayed centered within the push button area. You \
  // can modify the alignment of the label as well as its margins by specifying them \
  // in the configuration object.
  $rect <450,10,650,50>
  property string String = "";

  $rect <710,350,910,390>
  var Views::Text textView;

  $rect <20,20,160,60>
  object Views::Text Text
  {
    preset Layout = Core::Layout[AlignToLeft, AlignToTop];
    preset Bounds = <12,0,258,33>;
    preset Alignment = Views::TextAlignment[AlignHorzLeft, AlignVertCenter];
    preset String = "Delete contact";
    preset Font = Resources::FontSmall;
    preset Color = #FF295BFF;
  }
}

// This class implements a 'push button' widget. When the user presses the button, \
// a signal is sent to the slot method stored in its @OnActivate property.
$rect <240,130,440,170>
$output false
class TextButton : Templates::PushButton
{
  $rect <480,310,680,350>
  inherited property Bounds = <0,0,66,25>;

  $rect <930,190,1130,230>
  inherited method UpdateLayout()
  {
    super(aSize);

    Background.Bounds = Bounds.orect;
    TextTxt.Bounds    = Bounds.orect;
  }

  $rect <710,190,910,230>
  inherited method UpdateViewState()
  {
    super( aState );

    var bool isEnabled  = aState.contains( Core::ViewState[ Enabled  ]);
    var bool isSelected = aState.contains( Core::ViewState[ Selected ]);
    var bool isPressed  = ( TouchHandler.Down && TouchHandler.Inside ) || 
                            FlashTimer.Enabled;


    if ( TextTxt != null )
    {
      var color clr = TextColor; 
      TextTxt.Font      = Res::ContactFont15;
      TextTxt.String = Text;
      TextTxt.Color     = clr;
      }

    if ( !isEnabled )
    {
      Background.Color = BackgoundColor;
      TextTxt.Color       = Res::Grey;
    }

    else if ( isPressed )
    {
      Background.Color = BackgoundColor;
      TextTxt.Color       = TextColorPress;
    }

    else if ( isSelected )
    {
      Background.Color = BackgoundColor;
      }

    else
    {
      Background.Color = BackgoundColor;
    }

    enabled  = isEnabled;
    selected = isSelected;
    pressed  = isPressed;

  }

  // State management
  note group Note4
  {
    attr Bounds = <700,150,920,400>;
  }

  // Feedback flash effect
  note group Note3
  {
    attr Bounds = <470,150,690,280>;
  }

  // Keyboard events
  note group Note2
  {
    attr Bounds = <240,150,460,280>;
  }

  // Touch screen events
  note group Note1
  {
    attr Bounds = <10,150,230,320>;
  }

  // This variable stores the current state of the button.
  $rect <710,310,910,350>
  var bool pressed;

  // This variable stores the current state of the button.
  $rect <710,270,910,310>
  var bool selected;

  // This variable stores the current state of the button.
  $rect <710,230,910,270>
  var bool enabled;

  // This timer object is used to flash the button when the user has tapped it very \
  // quickly or the button has been activated with the keyboard. This is just a visual \
  // feedback effect.
  $rect <480,190,680,230>
  object Core::Timer FlashTimer
  {
    preset OnTrigger = onFlashTimer;
    preset Period = 0;
    preset Begin = 50;
  }

  // This key handler reacts to key press events. When the user presses the key specified \
  // in the property 'Filter' of the key handler, the handler is activated and the \
  // method '@onPressKey' is called.
  $rect <250,190,450,230>
  object Core::KeyPressHandler KeyHandler
  {
    preset OnPress = onPressKey;
    preset Filter = Core::KeyCode.Enter;
  }

  // This internal slot method is called when the '@FlashTimer' is expired. It ends \
  // the short flash feedback effect.
  $rect <480,230,680,270>
  slot onFlashTimer
  {
    // The feedback flash timer is finished. Request the button to update its
    // appearance. The update will occur in the UpdateViewState() method.
    InvalidateViewState();

    // With the end of the feedback flash effect the button is activated.
    postsignal OnActivate;
  }

  // This internal slot method is called when the '@KeyHandler' is activated (when \
  // the user has pressed the key specified in the property 'Filter' of the key handler).
  $rect <250,230,450,270>
  slot onPressKey
  {
    // Ignore keyboard events when the user is interacting with the button via the
    // touch screen.
    if ( TouchHandler.Down )
      return;

    // Ignore repetitions of key events (e.g. when the user holds the key pressed)
    if ( KeyHandler.Repetition )
      return;

    // Pressing the key flashes the button for a short period. This is a kind of 
    // feedback effect. Request the button to update its appearance accordingly.
    // The update will occur in the UpdateViewState() method.
    InvalidateViewState();

    // The button is still performing the feedback flash effect from the preceding
    // tap/key event. This can occur when the user taps the button or presses the
    // key in a very rapid succession. Thus complete this preceding tap (simulate
    // the timer expiration) before starting a new button interaction.
    if ( FlashTimer.Enabled )
    {
      postsignal OnActivate;
      FlashTimer.Enabled = false;
    }

    // Start the feedback flash effect.
    FlashTimer.Enabled = true;
  }

  // This internal slot method is called when the user drags the finger while pressing \
  // the button. This only updates the button to appear pressed or released.
  $rect <20,270,220,310>
  slot onEnterLeaveTouch
  {
    // Every time the user touches the button or drags the finger inside/outside
    // the button's area request the button update its appearance. The update will
    // occur in the UpdateViewState() method.
    InvalidateViewState();
  }

  // This internal slot method is called when the user releases the touch screen \
  // after touching the button's area. This activates the button.
  $rect <20,230,220,270>
  slot onReleaseTouch
  {
    // Did the user moved the finger outside the button's area? In such case
    // the button is not activated.
    trace "here";
    if ( !TouchHandler.Inside )
      return;

    // The user interaction has been passed over to the another touch handler
    if ( TouchHandler.AutoDeflected )
      return;

    // The user has pressed and held the button for longer time. This was enough
    // long to give a visual 'press' feedback to the user. The button can be
    // activated immediately.
    if ( TouchHandler.HoldPeriod >= FlashTimer.Begin )
      postsignal OnActivate;

    // The user has tapped the button very quickly. Defer the button activation
    // to give the user first a short visual feedback that the button has been
    // pressed.
    else
      FlashTimer.Enabled = true;
  }

  // This internal slot method is called when the user touches the button's area.
  $rect <20,190,220,230>
  slot onPressTouch
  {
    // The button is still performing the feedback flash effect from the preceding
    // tap. This can occur when the user taps the button in a very rapid succession. 
    // Thus complete this preceding tap (simulate the timer expiration) before 
    // starting a new button interaction.
    if ( FlashTimer.Enabled )
    {
      postsignal OnActivate;
      FlashTimer.Enabled = false;
    }
  }

  $rect <280,40,480,80>
  onset Text
  {
    // The value doesn't change - nothing to do.
    if ( pure Text == value )
      return;

    // Remember the property's new value.
    pure Text = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();
  }

  // The property 'Label' specifies the text to display as label in this push button \
  // widget. The desired font as well as the colors for all individual button states \
  // have to be specified in the configuration object assigned to the property @Appearance. \
  // If there is no configuration object associated to this push button widget (the \
  // property @Appearance is 'null'), no label is displayed.
  // Per default, the label is displayed centered within the push button area. You \
  // can modify the alignment of the label as well as its margins by specifying them \
  // in the configuration object.
  $rect <280,0,480,40>
  property string Text = "Text";

  $rect <710,350,910,390>
  var Views::Text textView;

  // The property 'OnActivate' can refer to a slot method, which will receive a signal \
  // as soon as the user has activated the button. Thereupon the method's logic will \
  // be executed.
  $rect <80,0,280,40>
  property slot OnActivate = null;

  $rect <480,40,680,80>
  onset TextColor
  {
    // The value doesn't change - nothing to do.
    if ( pure TextColor == value )
      return;

    // Remember the property's new value.
    pure TextColor = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();
  }

  // The property 'Label' specifies the text to display as label in this push button \
  // widget. The desired font as well as the colors for all individual button states \
  // have to be specified in the configuration object assigned to the property @Appearance. \
  // If there is no configuration object associated to this push button widget (the \
  // property @Appearance is 'null'), no label is displayed.
  // Per default, the label is displayed centered within the push button area. You \
  // can modify the alignment of the label as well as its margins by specifying them \
  // in the configuration object.
  $rect <480,0,680,40>
  property color TextColor = Res::Blue;

  $rect <680,40,880,80>
  onset TextColorPress
  {
    // The value doesn't change - nothing to do.
    if ( pure TextColorPress == value )
      return;

    // Remember the property's new value.
    pure TextColorPress = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();
  }

  // The property 'Label' specifies the text to display as label in this push button \
  // widget. The desired font as well as the colors for all individual button states \
  // have to be specified in the configuration object assigned to the property @Appearance. \
  // If there is no configuration object associated to this push button widget (the \
  // property @Appearance is 'null'), no label is displayed.
  // Per default, the label is displayed centered within the push button area. You \
  // can modify the alignment of the label as well as its margins by specifying them \
  // in the configuration object.
  $rect <680,0,880,40>
  property color TextColorPress = Res::BlueLight;

  $rect <880,40,1080,80>
  onset BackgoundColor
  {
    // The value doesn't change - nothing to do.
    if ( pure BackgoundColor == value )
      return;

    // Remember the property's new value.
    pure BackgoundColor = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();
  }

  // The property 'Label' specifies the text to display as label in this push button \
  // widget. The desired font as well as the colors for all individual button states \
  // have to be specified in the configuration object assigned to the property @Appearance. \
  // If there is no configuration object associated to this push button widget (the \
  // property @Appearance is 'null'), no label is displayed.
  // Per default, the label is displayed centered within the push button area. You \
  // can modify the alignment of the label as well as its margins by specifying them \
  // in the configuration object.
  $rect <880,0,1080,40>
  property color BackgoundColor = Res::Transparent;

  $rect <20,20,160,60>
  object Views::Rectangle Background
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <0,-4,66,28>;
    preset Color = #FFFFFF00;
  }

  $rect <20,20,160,60>
  object Core::SimpleTouchHandler TouchHandler
  {
    preset StackingPriority = 3;
    preset Point4 = <0,25>;
    preset Point3 = <66,25>;
    preset Point2 = <66,0>;
    preset Point1 = <0,0>;
    preset OnLeave = onEnterLeaveTouch;
    preset OnEnter = onEnterLeaveTouch;
    preset OnRelease = onReleaseTouch;
    preset OnPress = onPressTouch;
    preset RetargetCondition = Core::RetargetReason[WipeDown, WipeLeft, WipeRight, WipeUp];
    preset MaxStrikeCount = 100;
  }

  $rect <20,20,160,60>
  object Views::Text TextTxt
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <0,3,66,21>;
    preset Padding = 5;
    preset Ellipsis = true;
    preset OnUpdate = onTextUpdate;
    preset AutoSize = true;
    preset WrapText = false;
    preset Alignment = Views::TextAlignment[AlignHorzRight];
    preset String = "";
    preset Font = Res::IconsFont25;
  }

  $rect <1080,0,1280,40>
  property int32 Property;

  $rect <1080,40,1280,80>
  onset Property
  {
    // The value doesn't change - nothing to do.
    if ( pure Property == value )
      return;

    // Remember the property's new value.
    pure Property = value;

    // TO DO:
    // 
    // Now you can handle the alternation of the property.
  }

  $rect <280,80,480,120>
  slot onTextUpdate
  {
    Bounds.w = TextTxt.Bounds.w;

    TouchHandler.Point1 = point(Bounds.orect.x1, Bounds.orect.y1);
    TouchHandler.Point2 = point(Bounds.orect.x2, Bounds.orect.y1);
    TouchHandler.Point3 = point(Bounds.orect.x2, Bounds.orect.y2);
    TouchHandler.Point4 = point(Bounds.orect.x1, Bounds.orect.y2);

  }

  // Directives to adapt the order of the above members according to how these members 
  // where arranged when the project content was stored. In this manner the storage 
  // and the expected order of the members don't depend. Merging of changes in the 
  // project files is simplified.
  $member UpdateLayout
  $member UpdateViewState
  $member Note4
  $member Note3
  $member Note2
  $member Note1
  $member pressed
  $member selected
  $member enabled
  $member FlashTimer
  $member KeyHandler
  $member onFlashTimer
  $member onPressKey
  $member onEnterLeaveTouch
  $member onReleaseTouch
  $member onPressTouch
  $member OnSetText
  $member Text
  $member textView
  $member OnActivate
  $member OnSetTextColor
  $member TextColor
  $member OnSetTextColorPress
  $member TextColorPress
  $member OnSetBackgoundColor
  $member BackgoundColor
  $member Property
  $member OnSetProperty
  $member onTextUpdate
  $member Bounds
  $member Background
  $member TextTxt
  $member TouchHandler

  // Directives to adapt the order of members belonging to this class so they appear 
  // correctly arranged relative to the members inherited from the ancestor (super) 
  // classes. The numbers indicate the order-displacement to apply on the respective 
  // member once all members have been loaded and combined with members from the 
  // ancestor classes.
  $reorder first 2
  $reorder last 2
  $reorder keyHandlers 2
  $reorder buffer 2
  $reorder dialogStack 2
  $reorder fadersQueue 2
  $reorder pendingFader 2
  $reorder processKeyHandlers 2
  $reorder updateBufferSlot 2
  $reorder drawContent 2
  $reorder recalculateLayout 2
  $reorder updateComponent 2
  $reorder OnSetFocus 2
  $reorder OnGetBuffered 2
  $reorder OnSetBuffered 2
  $reorder OnGetEnabled 2
  $reorder OnSetEnabled 2
  $reorder OnSetOpacity 2
  $reorder OnGetEmbedded 2
  $reorder OnSetEmbedded 2
  $reorder OnGetAlphaBlended 2
  $reorder OnSetAlphaBlended 2
  $reorder OnGetVisible 2
  $reorder OnSetVisible 2
  $reorder DrawForeground 2
  $reorder DrawBackground 2
  $reorder GetMinimalSize 2
  $reorder FindActiveDialogByClass 2
  $reorder FindDialogByClass 2
  $reorder FindCurrentDialog 2
  $reorder IsCurrentDialog 2
  $reorder IsActiveDialog 2
  $reorder IsDialog 2
  $reorder GetIndexOfDialog 2
  $reorder GetDialogAtIndex 2
  $reorder CountDialogs 2
  $reorder SwitchToDialog 2
  $reorder DismissDialog 2
  $reorder PresentDialog 2
  $reorder ObtainFocus 2
  $reorder HasViewState 2
  $reorder LocalPosition 2
  $reorder GlobalPosition 2
  $reorder DispatchEvent 2
  $reorder BroadcastEventAtPosition 2
  $reorder BroadcastEvent 2
  $reorder UpdateLayout 2
  $reorder UpdateViewState 2
  $reorder InvalidateLayout 2
  $reorder InvalidateViewState 2
  $reorder InvalidateArea 2
  $reorder GetIndexOfView 2
  $reorder GetViewAtIndex 2
  $reorder CountViews 2
  $reorder FindViewInDirection 2
  $reorder FindViewWithinArea 2
  $reorder FindViewAtPosition 2
  $reorder FindPrevView 2
  $reorder FindNextView 2
  $reorder FindSiblingView 2
  $reorder GetContentArea 2
  $reorder FadeGroup 2
  $reorder RestackBehind 2
  $reorder RestackBack 2
  $reorder RestackTop 2
  $reorder Restack 2
  $reorder RemoveAll 2
  $reorder Remove 2
  $reorder AddBehind 2
  $reorder Add 2
  $reorder Focus 2
  $reorder Buffered 2
  $reorder Enabled 2
  $reorder Opacity 2
  $reorder Embedded 2
  $reorder AlphaBlended 2
  $reorder Visible 2
  $reorder Note4 2
  $reorder Note3 2
  $reorder Note2 2
  $reorder Note1 2
  $reorder pressed 2
  $reorder selected 2
  $reorder enabled 2
  $reorder FlashTimer 2
  $reorder KeyHandler 2
  $reorder onFlashTimer 2
  $reorder onPressKey 2
  $reorder onEnterLeaveTouch 2
  $reorder onReleaseTouch 2
  $reorder onPressTouch 2
  $reorder OnSetText 2
  $reorder Text 2
  $reorder textView 2
  $reorder OnActivate 2
  $reorder OnSetTextColor 1
  $reorder TextColor 1
  $reorder OnSetTextColorPress 1
  $reorder TextColorPress 1
  $reorder OnSetBackgoundColor 1
  $reorder BackgoundColor 1
  $reorder Property 1
  $reorder OnSetProperty 1
  $reorder onTextUpdate 1
}

// This class implements a 'push button' widget. When the user presses the button, \
// a signal is sent to the slot method stored in its @OnActivate property.
$rect <240,50,440,90>
$output false
class NavBarButton64x40 : Templates::PushButton
{
  $rect <470,440,670,480>
  inherited property Bounds = <0,0,68,40>;

  $rect <700,320,900,360>
  inherited method UpdateViewState()
  {
    // Always invoke the inherited method.
    super( aState );

    // Determine the new state of the push button.
    //
    // isEnabled  --> the button can react to user inputs.
    // isSelected --> the button can receive keyboard events.
    // isPressed  --> the button should appear pressed.
    //
    var bool isEnabled  = aState.contains( Core::ViewState[ Enabled  ]);
    var bool isSelected = isSelected();
    var bool isPressed  = ( TouchHandler.Down && TouchHandler.Inside ) || 
                            FlashTimer.Enabled;


    if ( IconTxt != null )
    {
       var color clr = IconColor; 
      IconTxt.Font      = Res::IconsFont20;
      IconTxt.String = Icon;
      IconTxt.Color     = clr;
      }

    // Update the parameters of the text view (label)
    if ( DescripTxt != null )
    {
        var color clr = DescrpitColor; 
      DescripTxt.Font      = Res::ContactFont12;
      DescripTxt.String = Descript;
      DescripTxt.Color     = clr;
      }

    if ( !isEnabled )
    {
      IconTxt.Color     = Res::GreyLight;
      DescripTxt.Color  = Res::GreyLight;
    }

    else if ( isPressed )
    {

      IconTxt.Color     = Res::BlueLight;
      DescripTxt.Color  = Res::BlueLight;

    }

    else if ( isSelected )
    {
      IconTxt.Color     = Res::Blue;
      DescripTxt.Color  = Res::Blue;
    }

    // Enabled but not pressed nor selected.
    else
    { 
      IconTxt.Color     = Res::Grey;
      DescripTxt.Color  = Res::Grey;
    }


    // Finally set the color of the knob depending on the button's state.
    if      ( isPressed &&  isSelected ) IconTxt.Color = Res::Blue;
    else if ( isPressed && !isSelected ) IconTxt.Color = Res::BlueLight;
    else if ( isEnabled &&  isSelected ) IconTxt.Color = Res::Blue;
    else if ( isEnabled && !isSelected ) IconTxt.Color = Res::Grey;
    else if ( isSelected )               IconTxt.Color = Res::Blue;
    else                                IconTxt.Color = Res::RedLight;


    // Remember the current state. Next time when the UpdateViewState() is called
    // you can compare the 'old' state with the 'new' state and perform more
    // sophisticated update, e.g. you can start an animation effect for the
    // pressed <<-->> not pressed transition.  

    enabled  = isEnabled;
    selected = isSelected;
    pressed  = isPressed;


  }

  // State management
  note group Note4
  {
    attr Bounds = <690,280,910,530>;
  }

  // Feedback flash effect
  note group Note3
  {
    attr Bounds = <460,280,680,410>;
  }

  // Keyboard events
  note group Note2
  {
    attr Bounds = <230,280,450,410>;
  }

  // Touch screen events
  note group Note1
  {
    attr Bounds = <10,280,230,450>;
  }

  // This variable stores the current state of the button.
  $rect <700,440,900,480>
  var bool pressed;

  // This variable stores the current state of the button.
  $rect <700,400,900,440>
  var bool selected = true;

  // This variable stores the current state of the button.
  $rect <700,360,900,400>
  var bool enabled;

  // This timer object is used to flash the button when the user has tapped it very \
  // quickly or the button has been activated with the keyboard. This is just a visual \
  // feedback effect.
  $rect <470,320,670,360>
  object Core::Timer FlashTimer
  {
    preset OnTrigger = onFlashTimer;
    preset Period = 0;
    preset Begin = 50;
  }

  // This key handler reacts to key press events. When the user presses the key specified \
  // in the property 'Filter' of the key handler, the handler is activated and the \
  // method '@onPressKey' is called.
  $rect <240,320,440,360>
  object Core::KeyPressHandler KeyHandler
  {
    preset OnPress = onPressKey;
    preset Filter = Core::KeyCode.Enter;
  }

  // This internal slot method is called when the '@FlashTimer' is expired. It ends \
  // the short flash feedback effect.
  $rect <470,360,670,400>
  slot onFlashTimer
  {
    // The feedback flash timer is finished. Request the button to update its
    // appearance. The update will occur in the UpdateViewState() method.
    InvalidateViewState();

    // With the end of the feedback flash effect the button is activated.
    postsignal OnActivate;
  }

  // This internal slot method is called when the '@KeyHandler' is activated (when \
  // the user has pressed the key specified in the property 'Filter' of the key handler).
  $rect <240,360,440,400>
  slot onPressKey
  {
    // Ignore keyboard events when the user is interacting with the button via the
    // touch screen.
    if ( TouchHandler.Down )
      return;

    // Ignore repetitions of key events (e.g. when the user holds the key pressed)
    if ( KeyHandler.Repetition )
      return;

    // Pressing the key flashes the button for a short period. This is a kind of 
    // feedback effect. Request the button to update its appearance accordingly.
    // The update will occur in the UpdateViewState() method.
    InvalidateViewState();

    // The button is still performing the feedback flash effect from the preceding
    // tap/key event. This can occur when the user taps the button or presses the
    // key in a very rapid succession. Thus complete this preceding tap (simulate
    // the timer expiration) before starting a new button interaction.
    if ( FlashTimer.Enabled )
    {
      FlashTimer.Enabled = false;

      // Select the button and notify the owner of the button.
      if ( !isSelected() )
      {
        postsignal OnSelect;

        // If a property is associated to the button, update it accordingly and notify
        // other widgets also associated to this property.
        if ( Outlet != null )
        {
          Outlet^ = OutletSelector;
          notifyobservers Outlet; 
        }
      }
    }

    // Start the feedback flash effect.
    FlashTimer.Enabled = true;
  }

  // This internal slot method is called when the user drags the finger while pressing \
  // the button. This only updates the button to appear pressed or released.
  $rect <20,400,220,440>
  slot onEnterLeaveTouch
  {
    // Every time the user touches the button or drags the finger inside/outside
    // the button's area request the button update its appearance. The update will
    // occur in the UpdateViewState() method.
    InvalidateViewState();
  }

  // This internal slot method is called when the user releases the touch screen \
  // after touching the button's area. This activates the button.
  $rect <20,360,220,400>
  slot onReleaseTouch
  {
    // Did the user moved the finger outside the button's area? In such case
    // the button is not activated.
    if ( !TouchHandler.Inside )
      return;

    // The user interaction has been passed over to the another touch handler
    if ( TouchHandler.AutoDeflected )
      return;

    // The user has pressed and held the button for longer time. This was enough
    // long to give a visual 'press' feedback to the user. The button can be
    // activated immediately.
    if ( TouchHandler.HoldPeriod >= FlashTimer.Begin )
    {
      // Select the button and notify the owner of the button.
      if ( !isSelected() )
      {
        
        postsignal OnSelect;

        // If a property is associated to the button, update it accordingly and notify
        // other widgets also associated to this property.
        if ( Outlet != null )
        {
          Outlet^ = OutletSelector;
          notifyobservers Outlet; 
        }
      }
    }

    // The user has tapped the button very quickly. Defer the button activation
    // to give the user first a short visual feedback that the button has been
    // pressed.
    else
      FlashTimer.Enabled = true;
  }

  // This internal slot method is called when the user touches the button's area.
  $rect <20,320,220,360>
  slot onPressTouch
  {
    // The button is still performing the feedback flash effect from the preceding
    // tap. This can occur when the user taps the button in a very rapid succession. 
    // Thus complete this preceding tap (simulate the timer expiration) before 
    // starting a new button interaction.
    if ( FlashTimer.Enabled )
    {
      FlashTimer.Enabled = false;

      // Select the button and notify the owner of the button.
      if ( !isSelected() )
      {
        postsignal OnSelect;

        // If a property is associated to the button, update it accordingly and notify
        // other widgets also associated to this property.
        if ( Outlet != null )
        {
          Outlet^ = OutletSelector;
          notifyobservers Outlet; 
        }
      }
    }
  }

  $rect <20,20,160,60>
  object Core::SimpleTouchHandler TouchHandler
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Point4 = <0,40>;
    preset Point3 = <65,40>;
    preset Point2 = <65,0>;
    preset Point1 = <0,0>;
    preset OnLeave = onEnterLeaveTouch;
    preset OnEnter = onEnterLeaveTouch;
    preset OnRelease = onReleaseTouch;
    preset OnPress = onPressTouch;
    preset RetargetCondition = Core::RetargetReason[WipeDown, WipeLeft, WipeRight, WipeUp];
    preset MaxStrikeCount = 100;
  }

  // The property 'OnActivate' can refer to a slot method, which will receive a signal \
  // as soon as the user has activated the button. Thereupon the method's logic will \
  // be executed.
  $rect <90,0,290,40>
  property slot OnActivate = null;

  $rect <20,20,160,60>
  object Views::Text IconTxt
  {
    preset Bounds = <0,0,68,25>;
    preset String = "";
    preset Font = Res::IconsFont20;
    preset Color = #FFFFFFFF;
  }

  $rect <100,150,250,190>
  onset Icon
  {
    // The value doesn't change - nothing to do.
    if ( pure Icon == value )
      return;

    // Remember the property's new value.
    pure Icon = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();
  }

  // The property 'Label' specifies the text to display as label in this push button \
  // widget. The desired font as well as the colors for all individual button states \
  // have to be specified in the configuration object assigned to the property @Appearance. \
  // If there is no configuration object associated to this push button widget (the \
  // property @Appearance is 'null'), no label is displayed.
  // Per default, the label is displayed centered within the push button area. You \
  // can modify the alignment of the label as well as its margins by specifying them \
  // in the configuration object.
  $rect <100,110,250,150>
  property string Icon;

  $rect <700,480,900,520>
  var Views::Text textView;

  $rect <20,20,160,60>
  object Views::Text DescripTxt
  {
    preset Layout = Core::Layout[AlignToLeft, AlignToTop];
    preset Bounds = <0,25,68,40>;
    preset Alignment = Views::TextAlignment[AlignHorzCenter, AlignVertCenter];
    preset String = "";
    preset Font = Res::ContactFont12;
  }

  $rect <260,110,430,150>
  property string Descript = "Text";

  $rect <260,150,430,190>
  onset Descript
  {
    // The value doesn't change - nothing to do.
    if ( pure Descript == value )
      return;

    // Remember the property's new value.
    pure Descript = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();
  }

  $rect <100,200,250,240>
  property color IconColor = Res::Grey;

  $rect <100,240,250,280>
  onset IconColor
  {
    // The value doesn't change - nothing to do.
    if ( pure IconColor == value )
      return;

    // Remember the property's new value.
    pure IconColor = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();

  }

  $rect <260,200,430,240>
  property color DescrpitColor = Res::Grey;

  $rect <260,240,430,280>
  onset DescrpitColor
  {
    // The value doesn't change - nothing to do.
    if ( pure DescrpitColor == value )
      return;

    // Remember the property's new value.
    pure DescrpitColor = value;

    // ... and trigger the component to update its actual state.
    InvalidateViewState();

  }

  $rect <450,40,620,80>
  onset OutletSelector
  {
    // Check if the given value differs from the current value
    if ( pure OutletSelector == value )
      return;

    pure OutletSelector = value;

    InvalidateViewState();
  }

  $rect <300,40,450,80>
  onset Outlet
  {
    // Check if the new outlet differs from the currently used outlet
    if ( pure Outlet == value )
      return;

    // Detach from the previous outlet
    if ( pure Outlet != null )
      detachobserver onOutlet, pure Outlet;

    // Store the new outlet ...
    pure Outlet = value;

    // ... and attach to the new one
    if ( value != null )
      attachobserver onOutlet, value;

    // Finally, retrieve the current state of the property associated via 'Outlet'.
    if ( value != null )
      postsignal onOutlet;
  }

  // The property 'OnSelect' can refer to a slot method, which will receive a signal \
  // as soon as the user has selected the radio button. Thereupon the method's logic \
  // will be executed.
  $rect <630,0,790,40>
  property slot OnSelect = null;

  // The property 'OutletSelector' contains a value identifying the radio button \
  // within a group of radio buttons. At the runtime, the button compares this value \
  // with the value of the property referred by @Outlet and if both are equal, the \
  // radio button assumes the 'selected' state (its property @Selected is 'true'). \
  // If the values are different, the radio button appears not selected. This selector \
  // is useful to build a group of radio buttons that refers to the same outlet. \
  // Different selectors for each radio button manages automatically the group of \
  // radio buttons.
  $rect <450,0,620,40>
  property int32 OutletSelector = 0;

  // The property 'Outlet' can refer to any other 'int32' property the widget should \
  // remain synchronized with. When the user selects the radio button, the affected \
  // property is automatically updated to the value found in the property @OutletSelector. \
  // On the other hand, when the referred property is modified by another one, the \
  // radio button is automatically notified to remain in sync with the property. \
  // The button appears selected, when the referred property has the value equal \
  // to @OutletSelector.
  // This approach follows the Model-View-Controller (MVC) programming paradigm. \
  // Here the radio button represents the 'View' and 'Controller' and the property \
  // referred via 'Outlet' can be seen as a part of the 'Model'.
  $rect <300,0,450,40>
  property ^int32 Outlet = null;

  // Controller events
  note group Note5
  {
    attr Bounds = <230,410,450,500>;
  }

  // This slot method will receive a signal, if the value of the property assigned \
  // to @Outlet has been changed by another widget or by the application logic. In \
  // response to this notification, the widget will update itself.
  $rect <240,450,440,490>
  slot onOutlet
  {
    // ... and finally, request an update
    InvalidateViewState();
  }

  $rect <790,0,990,40>
  method bool isSelected()
  {
    return Outlet != null && Outlet^ == OutletSelector;
  }
}

// This class implements a 'toggle button' widget. When the user presses the button, \
// the current value of the button represented by the property @Active is toggled \
// and a signal is sent to the slot method stored in the property @OnToggle.
// Alternatively the property @Outlet can refer to any other 'bool' property the \
// widget should remain synchronized with. When the user toggles the button, the \
// affected property is automatically updated to reflect the button's current state. \
// On the other hand, when the referred property is modified by another one, the \
// toggle button is automatically notified to remain in sync with the property.
// This approach follows the Model-View-Controller (MVC) programming paradigm. Here \
// the toggle button represents the 'View' and 'Controller' and the property referred \
// via 'Outlet' can be seen as a part of the 'Model'.
$rect <250,290,440,330>
$output false
class ToggleButton : Templates::ToggleButton
{
  $rect <470,340,670,380>
  inherited property Bounds = <0,0,35,35>;

  $rect <700,220,900,260>
  inherited method UpdateViewState()
  {
    // Always invoke the inherited method.
    super( aState );

    // Determine the new state of the toggle button.
    //
    // isEnabled  --> the button can react to user inputs.
    // isSelected --> the button can receive keyboard events.
    // isPressed  --> the button should appear pressed.
    // isChecked  --> the button is in its 'ON' state.
    //
    var bool isEnabled  = aState.contains( Core::ViewState[ Enabled  ]);
    var bool isSelected = aState.contains( Core::ViewState[ Selected ]);
    var bool isPressed  = ( TouchHandler.Down && TouchHandler.Inside ) || 
                            FlashTimer.Enabled;
    var bool isChecked  = Active;

    //knob depending on the button's state.
    if      ( isChecked ){
      Knob.Color = IconSelectedColor;
      Background.Color = BackgroundSelectedColor;
      }

    else if ( !isChecked) {
     Knob.Color = IconColor;
     Background.Color = BackgroundColor;
     }

    // Remember the current state. Next time when the UpdateViewState() is called
    // you can compare the 'old' state with the 'new' state and perform more
    // sophisticated update, e.g. you can start an animation effect for the
    // pressed <<-->> not pressed transition.
    enabled  = isEnabled;
    selected = isSelected;
    pressed  = isPressed;
    checked  = isChecked;
  }

  // Controller events
  note group Note5
  {
    attr Bounds = <230,320,450,410>;
  }

  // State management
  note group Note4
  {
    attr Bounds = <690,180,910,430>;
  }

  // Feedback flash effect
  note group Note3
  {
    attr Bounds = <460,180,680,310>;
  }

  // Keyboard events
  note group Note2
  {
    attr Bounds = <230,180,450,310>;
  }

  // Touch screen events
  note group Note1
  {
    attr Bounds = <0,180,220,350>;
  }

  // This variable stores the current state of the button.
  $rect <700,380,900,420>
  var bool checked;

  // This variable stores the current state of the button.
  $rect <700,340,900,380>
  var bool pressed;

  // This variable stores the current state of the button.
  $rect <700,300,900,340>
  var bool selected;

  // This variable stores the current state of the button.
  $rect <700,260,900,300>
  var bool enabled;

  // This timer object is used to flash the button when the user has tapped it very \
  // quickly or the button has been activated with the keyboard. This is just a visual \
  // feedback effect.
  $rect <470,220,670,260>
  object Core::Timer FlashTimer
  {
    preset OnTrigger = onFlashTimer;
    preset Period = 0;
    preset Begin = 50;
  }

  // This key handler reacts to key press events. When the user presses the key specified \
  // in the property 'Filter' of the key handler, the handler is activated and the \
  // method '@onPressKey' is called.
  $rect <240,220,440,260>
  object Core::KeyPressHandler KeyHandler
  {
    preset OnPress = onPressKey;
    preset Filter = Core::KeyCode.Enter;
  }

  // This slot method will receive a signal, if the value of the property assigned \
  // to @Outlet has been changed by another widget or by the application logic. In \
  // response to this notification, the widget will update itself.
  $rect <240,360,440,400>
  slot onOutlet
  {
    // Read the current value of the associated property and update accordingly
    // the state of the toggle button.
    if ( Outlet != null )
      Active = Outlet^;
  }

  // This internal slot method is called when the '@FlashTimer' is expired. It ends \
  // the short flash feedback effect.
  $rect <470,260,670,300>
  slot onFlashTimer
  {
    // The feedback flash timer is finished. Request the button to update its
    // appearance. The update will occur in the UpdateViewState() method.
    InvalidateViewState();

    // With the end of the feedback flash effect the button is activated.
    // Toggle the button's state and notify the owner of the button.
    Active = !Active;
    postsignal OnToggle;

    // If a property is associated to the button, update it accordingly and notify
    // other widgets also associated to this property.
    if ( Outlet != null )
    {
      Outlet^ = Active;
      notifyobservers Outlet; 
    }
  }

  // This internal slot method is called when the '@KeyHandler' is activated (when \
  // the user has pressed the key specified in the property 'Filter' of the key handler).
  $rect <240,260,440,300>
  slot onPressKey
  {
    // Ignore keyboard events when the user is interacting with the button via the
    // touch screen.
    if ( TouchHandler.Down )
      return;

    // Ignore repetitions of key events (e.g. when the user holds the key pressed)
    if ( KeyHandler.Repetition )
      return;

    // Pressing the key flashes the button for a short period. This is a kind of 
    // feedback effect. Request the button to update its appearance accordingly.
    // The update will occur in the UpdateViewState() method.
    InvalidateViewState();

    // The button is still performing the feedback flash effect from the preceding
    // tap/key event. This can occur when the user taps the button or presses the
    // key in a very rapid succession. Thus complete this preceding tap (simulate
    // the timer expiration) before starting a new button interaction.
    if ( FlashTimer.Enabled )
    {
      FlashTimer.Enabled = false;

      // Toggle the button's state and notify the owner of the button.
      Active = !Active;
      postsignal OnToggle;

      // If a property is associated to the button, update it accordingly and notify
      // other widgets also associated to this property.
      if ( Outlet != null )
      {
        Outlet^ = Active;
        notifyobservers Outlet; 
      }
    }

    // Start the feedback flash effect.
    FlashTimer.Enabled = true;
  }

  // This internal slot method is called when the user drags the finger while pressing \
  // the button. This only updates the button to appear pressed or released.
  $rect <10,300,210,340>
  slot onEnterLeaveTouch
  {
    // Every time the user touches the button or drags the finger inside/outside
    // the button's area request the button update its appearance. The update will
    // occur in the UpdateViewState() method.
    InvalidateViewState();
  }

  // This internal slot method is called when the user releases the touch screen \
  // after touching the button's area. This activates the button.
  $rect <10,260,210,300>
  slot onReleaseTouch
  {
    // Did the user moved the finger outside the button's area? In such case
    // the button is not activated.
    if ( !TouchHandler.Inside )
      return;

    // The user interaction has been passed over to the another touch handler
    if ( TouchHandler.AutoDeflected )
      return;

    // The user has pressed and held the button for longer time. This was enough
    // long to give a visual 'press' feedback to the user. The button can be
    // activated immediately.
    if ( TouchHandler.HoldPeriod >= FlashTimer.Begin )
    {
      // Toggle the button's state and notify the owner of the button.
      Active = !Active;
      postsignal OnToggle;

      // If a property is associated to the button, update it accordingly and notify
      // other widgets also associated to this property.
      if ( Outlet != null )
      {
        Outlet^ = Active;
        notifyobservers Outlet; 
      }
    }

    // The user has tapped the button very quickly. Defer the button activation
    // to give the user first a short visual feedback that the button has been
    // pressed.
    else
      FlashTimer.Enabled = true;
  }

  // This internal slot method is called when the user touches the button's area.
  $rect <10,220,210,260>
  slot onPressTouch
  {
    // The button is still performing the feedback flash effect from the preceding
    // tap. This can occur when the user taps the button in a very rapid succession. 
    // Thus complete this preceding tap (simulate the timer expiration) before 
    // starting a new button interaction.
    if ( FlashTimer.Enabled )
    {
      FlashTimer.Enabled = false;

      // Toggle the button's state and notify the owner of the button.
      Active = !Active;
      postsignal OnToggle;

      // If a property is associated to the button, update it accordingly and notify
      // other widgets also associated to this property.
      if ( Outlet != null )
      {
        Outlet^ = Active;
        notifyobservers Outlet; 
      }
    }
  }

  $rect <260,40,460,80>
  onset Outlet
  {
    // Check if the new outlet differs from the currently used outlet
    if ( pure Outlet == value )
      return;

    // Detach from the previous outlet
    if ( pure Outlet != null )
      detachobserver onOutlet, pure Outlet;

    // Store the new outlet ...
    pure Outlet = value;

    // ... and attach to the new one
    if ( value != null )
      attachobserver onOutlet, value;

    // Finally, retrieve the current state of the property associated via 'Outlet'.
    if ( value != null )
      postsignal onOutlet;
  }

  $rect <60,40,260,80>
  onset Active
  {
    // Check if the given value differs from the current value
    if ( pure Active == value )
      return;

    // Store the new state ...
    pure Active = value;

    // ... and finally, request an update
    InvalidateViewState();
  }

  // The property 'OnToggle' can refer to a slot method, which will receive a signal \
  // as soon as the user has toggled the button. Thereupon the method's logic will \
  // be executed. In the associated slot method you can evaluate the current value \
  // of the property @Active.
  $rect <460,0,660,40>
  property slot OnToggle = null;

  // The property 'Outlet' can refer to any other 'bool' property the widget should \
  // remain synchronized with. When the user toggles the button, the affected property \
  // is automatically updated to reflect the button's current state. On the other \
  // hand, when the referred property is modified by another one, the toggle button \
  // is automatically notified to remain in sync with the property.
  // This approach follows the Model-View-Controller (MVC) programming paradigm. \
  // Here the toggle button represents the 'View' and 'Controller' and the property \
  // referred via 'Outlet' can be seen as a part of the 'Model'.
  $rect <260,0,460,40>
  property ^bool Outlet = null;

  // The property 'Active' stores the current state of the toggle button. As long \
  // as the property is 'false', the widget should appear in switched-off state. \
  // As long as the property is 'true', the widget should appear in switched-on state.
  $rect <60,0,260,40>
  property bool Active = false;

  $rect <20,20,160,60>
  object Views::Image Background
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <0,0,35,35>;
    preset Color = Res::GreyLight;
    preset Bitmap = Res::ButtonRoundSmall;
  }

  $rect <20,20,160,60>
  object Core::SimpleTouchHandler TouchHandler
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Point4 = <0,35>;
    preset Point3 = <35,35>;
    preset Point2 = <35,0>;
    preset Point1 = <0,0>;
    preset OnLeave = onEnterLeaveTouch;
    preset OnEnter = onEnterLeaveTouch;
    preset OnRelease = onReleaseTouch;
    preset OnPress = onPressTouch;
    preset RetargetCondition = Core::RetargetReason[WipeDown, WipeLeft, WipeRight, WipeUp];
    preset MaxStrikeCount = 100;
  }

  $rect <20,20,160,60>
  object Views::Text Knob
  {
    preset Bounds = <0,0,35,35>;
    preset String = Res::CheckIcon;
    preset Font = Res::IconsFont20;
  }

  $rect <660,0,860,40>
  property color BackgroundColor = Res::GreyLight;

  $rect <660,40,860,80>
  onset BackgroundColor
  {
    // The value doesn't change - nothing to do.
    if ( pure BackgroundColor == value )
      return;

    // Remember the property's new value.
    pure BackgroundColor = value;

    InvalidateViewState();
  }

  $rect <660,90,860,130>
  property color IconColor = Res::Transparent;

  $rect <660,130,860,170>
  onset IconColor
  {
    // The value doesn't change - nothing to do.
    if ( pure IconColor == value )
      return;

    // Remember the property's new value.
    pure IconColor = value;

    InvalidateViewState();
  }

  $rect <860,90,1060,130>
  property color IconSelectedColor = Res::Blue;

  $rect <860,130,1060,170>
  onset IconSelectedColor
  {
    // The value doesn't change - nothing to do.
    if ( pure IconSelectedColor == value )
      return;

    // Remember the property's new value.
    pure IconSelectedColor = value;

    InvalidateViewState();
  }

  $rect <860,0,1060,40>
  property color BackgroundSelectedColor = Res::Blue;

  $rect <860,40,1060,80>
  onset BackgroundSelectedColor
  {
    // The value doesn't change - nothing to do.
    if ( pure BackgroundSelectedColor == value )
      return;

    // Remember the property's new value.
    pure BackgroundSelectedColor = value;

    InvalidateViewState();
  }
}

$rect <20,130,220,170>
$output false
class Button50x75 : Components::ButtonBase70x90
{
  $rect <20,120,220,160>
  inherited property Bounds = <0,0,50,75>;

  $rect <20,20,160,60>
  inherited object Background
  {
    preset Bounds = <0,0,50,50>;
  }

  $rect <20,20,160,60>
  inherited object InitialsTxt
  {
    preset Bounds = <0,0,50,50>;
  }

  $rect <20,20,160,60>
  inherited object DescripTxt
  {
    preset Bounds = <0,50,50,75>;
  }
}

$rect <20,90,220,130>
$output false
class Button65x90 : Components::ButtonBase70x90
{
  $rect <30,150,230,190>
  inherited property Bounds = <0,0,65,90>;

  $rect <20,20,160,60>
  inherited object Background
  {
    preset Bounds = <0,0,65,65>;
  }

  $rect <20,20,160,60>
  inherited object InitialsTxt
  {
    preset Bounds = <0,0,65,65>;
  }

  $rect <20,20,160,60>
  inherited object DescripTxt
  {
    preset Bounds = <0,65,65,90>;
  }
}

$rect <20,210,220,250>
$output false
class SButton65x65 : Components::ButtonBase70x90
{
  $rect <20,160,220,200>
  inherited property Bounds = <0,0,65,65>;

  $rect <20,20,160,60>
  inherited object Background
  {
    preset Bounds = <0,0,65,65>;
  }

  $rect <20,20,160,60>
  inherited object InitialsTxt
  {
    preset Bounds = <0,0,65,65>;
  }

  $rect <20,20,160,60>
  inherited object DescripTxt
  {
    preset Bounds = <0,0,65,65>;
    preset Visible = false;
  }
}

$rect <20,250,220,290>
$output false
class SButton50x50 : Components::ButtonBase70x90
{
  $rect <0,110,200,150>
  inherited property Bounds = <0,0,50,50>;

  $rect <20,20,160,60>
  inherited object Background
  {
    preset Bounds = <0,0,50,50>;
  }

  $rect <20,20,160,60>
  inherited object InitialsTxt
  {
    preset Bounds = <0,0,50,50>;
  }

  $rect <20,20,160,60>
  inherited object DescripTxt
  {
    preset Bounds = <0,0,50,50>;
    preset Visible = true;
  }
}

$rect <20,290,220,330>
$output false
class SButton25x25 : Components::ButtonBase70x90
{
  $rect <10,110,210,150>
  inherited property Bounds = <0,0,25,25>;

  $rect <20,20,160,60>
  inherited object Background
  {
    preset Bounds = <0,0,25,25>;
  }

  $rect <20,20,160,60>
  inherited object InitialsTxt
  {
    preset Bounds = <0,0,25,25>;
  }

  $rect <20,20,160,60>
  inherited object DescripTxt
  {
    preset Bounds = <0,1,25,25>;
  }
}

$rect <20,170,220,210>
$output false
class Button40x55 : Components::ButtonBase70x90
{
  $rect <-10,130,190,170>
  inherited property Bounds = <0,0,92,55>;

  $rect <20,20,160,60>
  inherited object Background
  {
    preset Bounds = <26,0,66,40>;
    preset Bitmap = Res::ButtonRoundSmall;
  }

  $rect <20,20,160,60>
  inherited object InitialsTxt
  {
    preset Bounds = <26,0,66,40>;
  }

  $rect <20,20,160,60>
  inherited object DescripTxt
  {
    preset Bounds = <0,40,92,55>;
    preset Ellipsis = true;
    preset WrapText = false;
  }
}

// This component implements an editor.
$rect <251,230,441,270>
$output false
class InputEtxt : Templates::TextEditor
{
  $rect <670,620,870,660>
  inherited property Bounds = <0,0,266,32>;

  $rect <680,280,880,320>
  inherited method UpdateViewState()
  {
    // Always invoke the inherited version of the method
    super( aState );

    // Activate the caret blinking if the editor component has the input focus
    if ( aState.contains( Core::ViewState[ Focused ]))
    {
      blinkEffect.Enabled = true;
    }
    // ... otherwise hide the caret
    else
    {
      blinkEffect.Enabled = false;
      Caret.Visible       = false;
    }

  }

  // To do:
  // 
  // - Adjust the visible size of the text editor (the thick blue border). This will \
  // be the editor's default size.
  // - Resize and arrange the member 'Text' so it covers the area where you intend \
  // to display the text. This is usually the entire area.
  // - Adjust the position and the size of the 'SimpleTouchHandler' and 'SlideTouchHandler', \
  // so they cover the 'Text' view.
  // - If your design it expects, add and configure more views in the component, \
  // e.g. views to display background, borders, etc.
  // - The editor implements several handler to process keyboard inputs. See the \
  // annotation 'Keyboard events'. Feel free to add more handler for other key events \
  // or remove the handler you don't need in your version.
  // - The editor displays a magnifying glass when the user touches and holds the \
  // finger for a while (see the method 'onHoldTouch'). If you don't want it, remove \
  // the contents within the annotation 'Magnifying glass' and the slot method 'onHoldTouch'.
  // - The editor reacts to touch interactions. See the annotation 'Touch screen \
  // events'. If your device is not touch driven, you can remove the both handlers \
  // 'SimpleTouchHandler', 'SlideTouchHandler' and the methods from the annotation \
  // 'Touch screen events'.
  // - Adapt the implementation of the 'UpdateViewState()' method. This method should \
  // update your views so they reflect the editor's current state (e.g. focused editor \
  // may appear with other colors, etc.)
  // - The editor is implemented with various properties allowing the configuration \
  // of the text (e.g. 'Font', 'Color', ...). If your version of the editor doesn't \
  // need such configuration, remove the properties and the associated OnSet methods.
  // - If you need other properties to configure the editor, add from the Gallery \
  // folder 'Chora' new properties. One property for every new setting (e.g. 'BorderWidth', \
  // etc.)
  // - Rename the properties accordingly their usage and remove their 'OnGet...' \
  // methods.
  // - For every newly added property adapt their 'OnSet...' method implementation. \
  // Ensure in the method that the assigned value is correctly passed to the corresponding \
  // view (e.g. a property 'BorderWidth' should update the eventually used 'Border' \
  // view, etc.).
  // - Feel free to modify any other member in this component accordingly your needs. \
  // Please note the member description and inline comments within methods.
  note legend Note6
  {
    attr Bounds = <10,690,990,1150>;
  }

  // Magnifying glass
  note group Note5
  {
    attr Bounds = <440,500,660,670>;
  }

  // Caret
  note group Note4
  {
    attr Bounds = <10,500,430,670>;
  }

  // State management
  note group Note3
  {
    attr Bounds = <670,240,890,330>;
  }

  // Touch screen events
  note group Note2
  {
    attr Bounds = <440,240,660,450>;
  }

  // Keyboard events
  note group Note1
  {
    attr Bounds = <10,240,430,490>;
  }

  // This internal variable refers to a temporary Views::Image object used to show \
  // the background for the augmented text content around the caret. This view appears \
  // during the user is moving this caret by touching the caret with the finger.
  $rect <450,620,650,660>
  var Views::Rectangle magnifyingBack = null;

  // This internal variable refers to a temporary Views::WarpGroup object used to \
  // show the augmented text content around the caret. This view appears during the \
  // user is moving this caret by touching the caret with the finger.
  $rect <450,580,650,620>
  var Views::WarpGroup magnifyingView = null;

  // This flag is set if it is evtl. necessary to scroll the editor content in order \
  // to ensure that the caret is still visible.
  $rect <220,620,420,660>
  var bool autoScroll;

  // This internal variable stores the current caret index. This is the position \
  // within Text.String property where the user can input text or delete signs.
  $rect <20,620,220,660>
  var int32 caretIndex = 0;

  // This slot method is called after the caret has been adjusted. Its job is to \
  // adjust too the position of the magnifying glass view where the augmented text \
  // content around the caret is shown.
  $rect <450,540,650,580>
  slot updateMagnifyingView
  {
    // There is actually no magnifying glass displayed. Nothing to do.
    if ( magnifyingView == null )
      return;

    var rect  srcArea = magnifyingView.SourceArea;
    var rect  extent  = magnifyingView.GetExtent();
    var rect  bounds  = Bounds;
    var point caret   = Caret.Point1;

    // Calculate the start position of the area to show in the magnifying
    // view. Preferably the caret should appear in the center of this area.
    var int32 srcX = caret.x - ( srcArea.w / 2 );

    // However, the part of magnifying glass displaying the caret should 
    // remain arranged horizontally within the editor area.
    if ( srcX < 0 )
      srcX = 0;

    if (( srcX + srcArea.w ) > bounds.w )
      srcX = bounds.w - srcArea.w;

    // The resulting start position of the area to augment
    magnifyingView.SourceArea.origin = point( srcX, caret.y );

    // Now calculate the position for the magnifyingView. Preferably the
    // the view should be arranged so it shows the augmented caret 
    // exactly above the origin caret
    var int32 dstX = ( bounds.x1 + caret.x ) - ( caret.x - srcX ) * 2;

    // From the new magnifyingView position and its current position calculate
    // an offset.
    var point ofs = point( dstX - extent.x1, bounds.y1 + caret.y - extent.y2 );

    // Move the magnifyingView and its background by the just calculated offset
    magnifyingView.MoveView( ofs, false );
    magnifyingBack.MoveView( ofs, false );
  }

  // This slot method is called after a short delay when the user has moved the caret \
  // or modified the text. Its job is to ensure that the caret is still visible. \
  // If necessary, the editor content is scrolled.
  $rect <220,540,420,580>
  slot updateScrollOffset
  {
    // Get the visible area of the text view
    var rect  bounds = Text.Bounds;
    var int32 ofsX   = 0;
    var int32 ofsY   = 0;

    // Calculate an offset to scroll the text content if the caret lies
    // outside the visible area
    if ( Caret.Point1.x < bounds.x1 ) ofsX = bounds.x1 - Caret.Point1.x;
    if ( Caret.Point1.x > bounds.x2 ) ofsX = bounds.x2 - Caret.Point1.x;
    if ( Caret.Point1.y < bounds.y1 ) ofsY = bounds.y1 - Caret.Point1.y;
    if ( Caret.Point2.y > bounds.y2 ) ofsY = bounds.y2 - Caret.Point2.y;

    // Should the cont be scrolled?
    if (( ofsX != 0 ) || ( ofsY != 0 ))
      Text.ScrollOffset = Text.ScrollOffset + point( ofsX, ofsY );

    // The following code takes care of the automatic adjustment of the
    // text scroll position if after modifying the text, its area is small
    // enough to be completely visible.
    ofsX = Text.ScrollOffset.x;
    ofsY = Text.ScrollOffset.y;

    // Get the current text area of the 
    var point size = Text.GetContentArea().size;

    // Does the area fit completely within the text editor?
    if ( size.x <= Text.Bounds.w ) ofsX = 0;
    if ( size.y <= Text.Bounds.h ) ofsY = 0;

    // If possible arrange the text so it fits within the text editor.
    Text.ScrollOffset = point( ofsX, ofsY );
  }

  // This slot method is attached to the Text view. Each time the Text view has rearranged \
  // the text, this method is called. Its job is to adjust the caret to the evtl. \
  // new position.
  $rect <20,540,220,580>
  slot updateCaret
  {
    // Without the font we don't know the height of the caret
    if ( Font == null )
      return;

    // Get the pixel position of the sign right to the caret
    var point rowCol = Text.StringIndex2RowCol( caretIndex );
    var point pos    = Text.RowCol2Position( rowCol );

    // Arrange the caret at the just determined position. The height of 
    // the caret corresponds to the height of a text row drawn with the
    // font
    Caret.Point1 = pos - point( 0, Font.Ascent  );
    Caret.Point2 = pos + point( 0, Font.Descent );

    // Restart the blink effect -> this ensures that the user can see the
    // caret while it is moved or the text is modified
    if ( blinkEffect.Enabled )
    {
      blinkEffect.Enabled = false;
      blinkEffect.Enabled = true;
    }

    // Should adjust the scroll position so that the caret remains in the visible
    // area? Finally clear the 'autoScroll' flag again.
    if ( autoScroll )
    {
      postsignal updateScrollOffset;
      autoScroll = false;
    }

    // If there is a magnifying glass view visible -> arrange it also to the
    // current caret position.
    if ( magnifyingView != null )
      postsignal updateMagnifyingView;
  }

  // This method is called from the corresponding SimpleTouchHandler. Its job is \
  // to hide the magnifying glass view again.
  $rect <450,400,650,440>
  slot onReleaseTouch
  {
    // Hide the views used temporarily to show the augmented editor content
    if ( magnifyingView != null )
    {
      Owner.Remove( magnifyingView );
      Owner.Remove( magnifyingBack );
      magnifyingView = null;
      magnifyingBack = null;

      // Free the temporary used off-screen memory
      Buffered = false;
    }
  }

  // This method is called from the corresponding SimpleTouchHandler. Its job is \
  // to move the caret accordingly to the user's finger movement.
  $rect <450,360,650,400>
  slot onDragTouch
  {
    // Does the user currently drag the caret?
    if ( magnifyingView != null )
    {
      // From the touched screen position estimate the corresponding position
      // within the text string.
      var point  rc            = Text.Position2RowCol( SimpleTouchHandler.CurrentPos );
      var int32  newCaretIndex = Text.RowCol2StringIndex( rc );

      // Does the caret position change? Force the editor to update the
      // position of the blinking caret
      if ( newCaretIndex != caretIndex )
      {
        caretIndex = newCaretIndex;
        postsignal updateCaret;

        // Ensure the caret is still visible later in the updateText slot method
        autoScroll = true;
      }
    }

    // No, then redirect the touch interaction to the slide touch handler when the
    // user moved the finger a little bit. In this manner the user can scroll the text.
    else
    {
      var point ofs   = SimpleTouchHandler.CurrentPos - SimpleTouchHandler.HittingPos;
      var int32 limit = GetRoot().CursorDragLimit;

      // Start the slide mode if the user has dragged the finger a little bit
      if (( ofs.x < -limit ) || ( ofs.x > limit ) ||
          ( ofs.y < -limit ) || ( ofs.y > limit ))
        GetRoot().DeflectCursor( SlideTouchHandler, <0,0>);
    }
  }

  // This method is called from the corresponding SimpleTouchHandler. Its job is \
  // to activate the caret movement mode if the user has pressed the finger on the \
  // screen for a while. The method also shows a small magnifying glass where the \
  // text around the caret is shown. This should help the user to navigate the caret \
  // with the finger.
  $rect <450,320,650,360>
  slot onHoldTouch
  {
    // When the user presses the finger within the text editor area,
    // the editor enters the caret dragging mode. In this mode the
    // user can move the caret with the finger. For convenience the
    // area below the finger is displayed in a kind of magnifying glass.
    // Does enter the mode?
    if (( SimpleTouchHandler.HoldPeriod >= 300 ) && ( magnifyingView == null ))
    {
      // Calculate the size of the area to augment
      var int32 height = Caret.Point2.y - Caret.Point1.y;
      var int32 width  = height * 3;

      // Limit to the available size of the editor component
      if ( height > Bounds.h ) height = Bounds.h;
      if ( width  > Bounds.w ) width  = Bounds.w;

      // The editor component should store its content in an off-screen bitmap
      // in order to be able to to show it augmented in an overlay 'magnifyingView'
      Buffered = true;

      // Create a temporary view to show the augmented content and to show the
      // 'magnifying glass' background
      magnifyingView = new Views::WarpGroup;
      magnifyingBack = new Views::Rectangle;

      // Prepare a magnifyingView to show an augmented content of the edited text
      // row. The content is augmented by the factor x 2
      magnifyingView.Group       = this;
      magnifyingView.Quality     = true;
      magnifyingView.Opacity     = 200;
      magnifyingView.SourceArea  = rect( 0, 0, width, height );
      magnifyingView.Point2.x    = width  * 2;
      magnifyingView.Point3.x    = width  * 2;
      magnifyingView.Point3.y    = height * 2;
      magnifyingView.Point4.y    = height * 2;

      // Also prepare the magnifying glass background view. It is a semitransparent
      // rectangle.
      magnifyingBack.Bounds.size   = point( width * 2, height * 2 ) + <20,20>;
      magnifyingBack.Bounds.origin = <-10,-10>;
      magnifyingBack.Color         = #EEEEEECC;

      // Make the just created views visible on the screen
      Owner.Add( magnifyingBack, 0 );
      Owner.Add( magnifyingView, 0 );

      // Arrange the 'magnifying glass' views at the correct position
      postsignal updateMagnifyingView;
    }

    // Even if the user is not moving the cursor (finger) continue the scrolling when
    // the user holds the finger near an edge of the text editor.
    if ( magnifyingView != null )
      signal onDragTouch;
  }

  // This method is called from the corresponding SimpleTouchHandler. Its job is \
  // to obtain the focused state for the editor so the user can interact with the \
  // editor content and to place the caret at the touched position.
  $rect <450,280,650,320>
  slot onPressTouch
  {
    // With the first touch focus the text editor
    if ( !HasViewState( Core::ViewState[ Focused ]))
     {
      ObtainFocus();
     }
    // Estimate the position within the text string corresponding to the
    // position touched on the screen.
    var point rc            = Text.Position2RowCol( SimpleTouchHandler.CurrentPos );
    var int32 newCaretIndex = Text.RowCol2StringIndex( rc );

    // Does the caret position change? Force the text editor to update the
    // position of the blinking caret
    if ( newCaretIndex != caretIndex )
    {
      caretIndex = newCaretIndex;
      postsignal updateCaret;

      // Ensure the caret is still visible later in the updateText slot method
      autoScroll = true;
    }
  }

  // This method is called from the corresponding keyboard handler. Its job is to \
  // move the caret up/down/left or right in the editor text.
  $rect <220,440,420,480>
  slot onCursorKey
  {
    // No font specified to show the text -> no navigation
    // possible
    if ( Font == null )
      return;

    // Knowing the position of the caret within the string, get the
    // corresponding row/column position in the displayed text.
    var point rc = Text.StringIndex2RowCol( caretIndex );

    // Has the user moved the caret to the left? Get the new resulting
    // row/column number
    if ( CursorKeyHandler.Code == Core::KeyCode.Left )
    {
      // Navigate to the previous column
      rc.x = rc.x - 1;

      // The begin of the row reached? Skip to the end of the preceding row.
      if ( Text.RowCol2StringIndex( rc ) == caretIndex )
      {
        rc.y = rc.y - 1;
        rc.x = Text.GetRowString( rc.y ).length;
      }
    }

    // Has the user moved the caret to the right? Get the resulting
    // row/column number
    if ( CursorKeyHandler.Code == Core::KeyCode.Right )
    {
      // Navigate to the next column
      rc.x = rc.x + 1;

      // The end of the current row reached? Skip to the begin of the next
      // following row.
      if ( Text.RowCol2StringIndex( rc ) == caretIndex )
      {
        rc.y = rc.y + 1;
        rc.x = 0;
      }
    }

    // Has the user moved the caret one row up? Get the resulting
    // row/column number
    if ( CursorKeyHandler.Code == Core::KeyCode.Up )
    {
      // Get the pixel position where the sign at actual caret position
      // is displayed
      var point pos       = Text.RowCol2Position( rc );
      var int32 rowHeight = Font.Ascent + Font.Descent + Font.Leading;

      // Get the row/column corresponding to the sign in the row just above
      rc = Text.Position2RowCol( pos - point( 0, rowHeight ));
    }

    // Has the user moved the caret one row down? Get the resulting
    // row/column number
    if ( CursorKeyHandler.Code == Core::KeyCode.Down )
    {
      // Get the pixel position where the sign at actual caret position
      // is displayed
      var point pos       = Text.RowCol2Position( rc );
      var int32 rowHeight = Font.Ascent + Font.Descent + Font.Leading;

      // Get the row/column corresponding to the sign in the row just below
      rc = Text.Position2RowCol( pos + point( 0, rowHeight ));
    }

    // From the just determined new row/column position get the corresponding
    // position within the text string
    var int32 newCaretIndex = Text.RowCol2StringIndex( rc );

    // Does the caret position change? Force the editor to update the
    // position of the blinking caret
    if ( newCaretIndex != caretIndex )
    {
      caretIndex = newCaretIndex;
      postsignal updateCaret;

      // Ensure the caret is still visible later in the updateText slot method
      autoScroll = true;
    }
  }

  // This method is called from the corresponding keyboard handler. Its job is to \
  // delete the sign preceding the current caret position and to move the caret accordingly.
  $rect <220,400,420,440>
  slot onBackspaceKey
  {
    // No signs preceding the caret -> Nothing to delete
    if ( caretIndex == 0 )
      return;

    // Get the sign which should be deleted from the text.
    var char  ch    = Text.String[ caretIndex - 1 ];
    var int32 count = 1;

    // The sign was a special control sign? In this case the sign comes
    // together with the preceding '%' escape sign - otherwise the user
    // couldn't see the sign
    if (( ch == '^' ) || ( ch == '~' ) || ( ch == '%' ))
      count = 2;

    // Remove the affected text portion and adjust the caret position
    Text.String = Text.String.remove( caretIndex - count, count );
    caretIndex  = caretIndex - count;

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll = true;

    // Inform the owner of this text editor component, that the text has been
    // modified by the user
    postsignal onChange;
  }

  // This method is called from the corresponding keyboard handler. Its job is to \
  // delete the sign at the current caret position.
  $rect <220,360,420,400>
  slot onDeleteKey
  {
    // No signs following the caret -> Nothing to delete
    if ( caretIndex >= ( Text.String.length - 1 ))
      return;

    // Get the sign which should be deleted from the text.
    var char  ch    = Text.String[ caretIndex ];
    var int32 count = 1;

    // The sign was a special control sign? In this case the sign comes
    // together with the preceding '%' escape sign - otherwise the user
    // couldn't see the sign
    if ( ch == '%' )
      count = 2;

    // Remove the affected text fragment
    Text.String = Text.String.remove( caretIndex, count );

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll = true;

    // Inform the owner of this text editor component, that the text has been
    // modified by the user
    postsignal onChange;
  }

  // This method is called from the corresponding keyboard handler. Its job is to \
  // insert at the current caret position the <new line> sign and to move the caret \
  // to the next row.
  $rect <220,320,420,360>
  slot onNewlineKey
  {
    // Take over the just input sign and adjust the caret position
    Text.String = Text.String.insert( '\n', caretIndex );
    caretIndex  = caretIndex + 1;

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll = true;

    // Inform the owner of this text editor component, that the text has been
    // modified by the user
    postsignal onChange;
  }

  // This method is called from the corresponding keyboard handler. Its job is to \
  // insert at the current caret position the sign which has been input by the user \
  // and to move the caret to the next column.
  $rect <220,280,420,320>
  slot onCharacterKey
  {
    var char   ch  = CharacterKeyHandler.CharCode;
    var string str = ch;

    // Precede all special control signs with the '%' escape sign. Otherwise
    // the user can't input nor see them
    if (( ch == '^' ) || ( ch == '~' ) || ( ch == '\xAD' ) || ( ch == '%' ))
      str = "%" + ch;

    // Take over the just input sign and adjust the caret position
    Text.String = Text.String.insert( str, caretIndex );
    caretIndex  = caretIndex + str.length;

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll = true;

    // Inform the owner of this text editor component, that the text has been
    // modified by the user
    postsignal onChange;
  }

  $rect <480,170,680,210>
  onset WrapText
  {
    // The value doesn't change - nothing to do.
    if ( pure WrapText == value )
      return;

    // Remember the new value ...
    pure WrapText = value;
    Text.WrapText = value;

    // If the text is warp automatically in rows, there is no need to
    // scroll the text horizontally.
    SlideTouchHandler.SlideHorz = !value;

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll        = true;
    Text.ScrollOffset = <0,0>;
  }

  $rect <280,170,480,210>
  onset Alignment
  {
    // The value doesn't change - nothing to do.
    if ( pure Alignment == value )
      return;

    // Remember the new value ...
    pure Alignment = value;
    Text.Alignment = value;

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll        = true;
    Text.ScrollOffset = <0,0>;
  }

  $rect <690,80,890,120>
  onget String
  {
    // Get the current text view content
    var string str = Text.String;

    // In the following steps remove any special text view control signs
    // which are usually used to control the text flow. The resulting string
    // should contain the 'pure' text only.
    var int32 inx = str.find( '%', 0 );

    // The special control/escape signs are not visible until there is a
    // '%' sign in front of them. Remove all superfluous '%' signs
    while ( inx >= 0 )
    {
      str = str.remove( inx, 1 );
      inx = str.find( '%', inx + 1 );
    }

    // Finally remove the <new line> sign at the end of text which was used
    // as workaround for a text flow parser issue
    return str.left( str.length - 1 );
  }

  $rect <690,40,890,80>
  onset String
  {
    // The value doesn't change - nothing to do.
    if ( pure String == value )
      return;

    // Remember the new string ...
    pure String = value;

    // In the following steps disarm in the assigned Unicode string the special
    // control and escape signs, which usually control the text flow in a  text
    // view. Without this conversion step, signs like '%' couldn't be seen in
    // the editor.
    var string str = value;
    var int32  inx = str.find( '%', 0 );

    // The special '%' escape sign is not visible until there is other
    // '%' sign in front of it. Convert all '%' signs into '%%' sequences
    while ( inx >= 0 )
    {
      str = str.insert( "%", inx );
      inx = str.find( '%', inx + 2 );
    }

    inx = str.find( '^', 0 );

    // The special '^' control sign is not visible until there is a '%'
    // sign in front of it. Convert all '^' signs into '%^' sequences
    while ( inx >= 0 )
    {
      str = str.insert( "%", inx );
      inx = str.find( '^', inx + 2 );
    }

    inx = str.find( '~', 0 );

    // The special '~' control sign is not visible until there is a '%'
    // sign in front of it. Convert all '~' signs into '%~' sequences
    while ( inx >= 0 )
    {
      str = str.insert( "%", inx );
      inx = str.find( '~', inx + 2 );
    }

    inx = str.find( '\xAD', 0 );

    // The special '\xAD' hyphen sign is not visible until there is a '%'
    // sign in front of it. Convert all '\xAD' hyphen signs into '%\xAD'
    // sequences
    while ( inx >= 0 )
    {
      str = str.insert( "%", inx );
      inx = str.find( '\xAD', inx + 2 );
    }

    // Ensure that the caret still refers to a sign within the string
    if ( caretIndex > str.length )
      caretIndex = str.length;

    // Now show the new string in the editor's text view. The additional
    // <new line> is a workaround for a flow text parser issue
    Text.String = str + "\n";

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll        = true;
    Text.ScrollOffset = <0,0>;

    postsignal updatePlaceholder;
  }

  $rect <490,40,690,80>
  onset Color
  {
    // The value doesn't change - nothing to do.
    if ( pure Color == value )
      return;

    // Store the new Color
    pure Color  = value;
    Text.Color  = value;
    Caret.Color = value;

  }

  $rect <290,40,490,80>
  onset Font
  {
    // The value doesn't change - nothing to do.
    if ( pure Font == value )
      return;

    // Store the new font...
    pure Font = value;
    Text.Font = value;

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll        = true;
    Text.ScrollOffset = <0,0>;
  }

  // This bool change effect is used to blink the caret.
  $rect <20,580,220,620>
  object Effects::BoolEffect blinkEffect
  {
    preset Value2 = false;
    preset Value1 = true;
    preset Outlet = ^Caret.Visible;
    preset CycleDuration = 500;
    preset InterCycleDelay = 500;
  }

  // The property 'OnChange' can refer to a slot method, which should be invoked \
  // by the text editor when the user modifies the text.
  $rect <690,120,890,160>
  property slot OnChange = null;

  // The property 'WrapText' determines whether long text rows should be wrapped \
  // automatically.
  $rect <490,120,690,160>
  property bool WrapText = true;

  // The property 'Alignment' determines how the editor should display the text rows \
  // if their size differ from the size of the editor. 
  // In this manner the rows can be aligned horizontally. The entire text block can \
  // be aligned vertically.
  $rect <290,120,490,160>
  property Views::TextAlignment Alignment = Views::TextAlignment[AlignHorzLeft, AlignVertCenter];

  // The property 'String' stores the text of the editor.
  $rect <690,0,890,40>
  property string String = "Text";

  // The property 'Color' controls the color of the text.
  $rect <490,0,690,40>
  property color Color = #000000FF;

  // The property 'Font' refers to the font object used to display the text. The \
  // text is determined by the property @String.
  $rect <290,0,490,40>
  property Resources::Font Font = Resources::FontMedium;

  // This key handler reacts to user inputs if the user has pressed the 'up', 'down', \
  // 'left' or 'right' key. In this case the associated onCursorKey method is called.
  $rect <20,440,220,480>
  object Core::KeyPressHandler CursorKeyHandler
  {
    preset OnPress = onCursorKey;
    preset Filter = Core::KeyCode.CursorKeys;
    preset OnHold = onCursorKey;
  }

  // This key handler reacts to user inputs if the user has pressed the 'backspace' \
  // key. In this case the associated onBackspaceKey method is called.
  $rect <20,400,220,440>
  object Core::KeyPressHandler BackspaceKeyHandler
  {
    preset OnPress = onBackspaceKey;
    preset Filter = Core::KeyCode.Backspace;
    preset OnHold = onBackspaceKey;
  }

  $rect <890,40,1090,80>
  onset Placeholder
  {
    // The value doesn't change - nothing to do.
    if ( pure Placeholder == value )
      return;

    // Remember the new string ...
    pure Placeholder = value;

    TextPlaceholder.String = pure Placeholder;

    postsignal updatePlaceholder;
  }

  // The property 'String' stores the text of the editor.
  $rect <890,0,1090,40>
  property string Placeholder = "Insert Text here";

  // This key handler reacts to user inputs if the user has pressed the 'delete' \
  // key. In this case the associated onDeleteKey method is called.
  $rect <20,360,220,400>
  object Core::KeyPressHandler DeleteKeyHandler
  {
    preset OnPress = onDeleteKey;
    preset Filter = Core::KeyCode.Delete;
    preset OnHold = onDeleteKey;
  }

  $rect <690,160,890,200>
  slot onChange
  {
    signal OnChange;

    postsignal updatePlaceholder;
  }

  $rect <890,160,1090,200>
  slot updatePlaceholder
  {
    //TextPlaceholder.Visible = ( String == "Text\n" );
    if( String == "Text\n" || String == "" )
      TextPlaceholder.Visible = true;
    else
      TextPlaceholder.Visible = false;
  }

  // This key handler reacts to user inputs if the user has pressed the 'enter' key. \
  // In this case the associated onNewlineKey method is called.
  $rect <20,320,220,360>
  object Core::KeyPressHandler NewlineKeyHandler
  {
    preset OnPress = onNewlineKey;
    preset Filter = Core::KeyCode.Enter;
    preset OnHold = onNewlineKey;
  }

  // This key handler reacts to user inputs if the user has pressed a key corresponding \
  // to character/digit. In this case the associated onCharacterKey method is called.
  $rect <20,280,220,320>
  object Core::KeyPressHandler CharacterKeyHandler
  {
    preset OnPress = onCharacterKey;
    preset Filter = Core::KeyCode.CharacterKeys;
    preset OnHold = onCharacterKey;
  }

  // This slide gesture handler is used to scroll the text content.
  $rect <20,20,160,60>
  object Core::SlideTouchHandler SlideTouchHandler
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <0,0,272,32>;
    preset SlideHorz = false;
    preset Friction = 0.05;
  }

  // This generic touch handler is used to move the caret.
  $rect <20,20,160,60>
  object Core::SimpleTouchHandler SimpleTouchHandler
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Point4 = <0,32>;
    preset Point3 = <272,32>;
    preset Point2 = <272,0>;
    preset Point1 = <0,0>;
    preset OnDrag = onDragTouch;
    preset OnHold = onHoldTouch;
    preset OnRelease = onReleaseTouch;
    preset OnPress = onPressTouch;
    preset MaxStrikeCount = 3;
  }

  $rect <20,20,160,60>
  object Views::Text Text
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <13,2,272,32>;
    preset OnUpdate = updateCaret;
    preset SlideHandler = SlideTouchHandler;
    preset WrapText = true;
    preset Alignment = Views::TextAlignment[AlignHorzLeft, AlignVertCenter];
    preset String = "Text\n";
    preset Font = Resources::FontSmall;
    preset Color = #1E1E1EFD;
  }

  $rect <20,20,160,60>
  object Views::Text TextPlaceholder
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <14,2,272,32>;
    preset Alignment = Views::TextAlignment[AlignHorzLeft, AlignVertCenter];
    preset String = "";
    preset Font = Resources::FontSmall;
    preset Color = #B9B9B9FD;
  }

  $rect <20,20,160,60>
  object Views::Line Caret
  {
    preset Point2 = <0,29>;
    preset Point1 = <0,5>;
    preset Width2 = 2;
    preset Width1 = 2;
    preset Color = #000000FF;
    preset Visible = false;
  }
}

// This component implements an editor.
$rect <250,190,440,230>
$output false
class InputBtnEtxt : Templates::TextEditor
{
  $rect <670,620,870,660>
  inherited property Bounds = <0,0,266,32>;

  $rect <680,280,880,320>
  inherited method UpdateViewState()
  {
    // Always invoke the inherited version of the method
    super( aState );

    // Activate the caret blinking if the editor component has the input focus
    if ( aState.contains( Core::ViewState[ Focused ]))
    {
      blinkEffect.Enabled = true;
    }
    // ... otherwise hide the caret
    else
    {
      blinkEffect.Enabled = false;
      Caret.Visible       = false;
    }
    Search.Font = IconFont;
    Search.String = Icon;
  }

  // To do:
  // 
  // - Adjust the visible size of the text editor (the thick blue border). This will \
  // be the editor's default size.
  // - Resize and arrange the member 'Text' so it covers the area where you intend \
  // to display the text. This is usually the entire area.
  // - Adjust the position and the size of the 'SimpleTouchHandler' and 'SlideTouchHandler', \
  // so they cover the 'Text' view.
  // - If your design it expects, add and configure more views in the component, \
  // e.g. views to display background, borders, etc.
  // - The editor implements several handler to process keyboard inputs. See the \
  // annotation 'Keyboard events'. Feel free to add more handler for other key events \
  // or remove the handler you don't need in your version.
  // - The editor displays a magnifying glass when the user touches and holds the \
  // finger for a while (see the method 'onHoldTouch'). If you don't want it, remove \
  // the contents within the annotation 'Magnifying glass' and the slot method 'onHoldTouch'.
  // - The editor reacts to touch interactions. See the annotation 'Touch screen \
  // events'. If your device is not touch driven, you can remove the both handlers \
  // 'SimpleTouchHandler', 'SlideTouchHandler' and the methods from the annotation \
  // 'Touch screen events'.
  // - Adapt the implementation of the 'UpdateViewState()' method. This method should \
  // update your views so they reflect the editor's current state (e.g. focused editor \
  // may appear with other colors, etc.)
  // - The editor is implemented with various properties allowing the configuration \
  // of the text (e.g. 'Font', 'Color', ...). If your version of the editor doesn't \
  // need such configuration, remove the properties and the associated OnSet methods.
  // - If you need other properties to configure the editor, add from the Gallery \
  // folder 'Chora' new properties. One property for every new setting (e.g. 'BorderWidth', \
  // etc.)
  // - Rename the properties accordingly their usage and remove their 'OnGet...' \
  // methods.
  // - For every newly added property adapt their 'OnSet...' method implementation. \
  // Ensure in the method that the assigned value is correctly passed to the corresponding \
  // view (e.g. a property 'BorderWidth' should update the eventually used 'Border' \
  // view, etc.).
  // - Feel free to modify any other member in this component accordingly your needs. \
  // Please note the member description and inline comments within methods.
  note legend Note6
  {
    attr Bounds = <10,690,990,1150>;
  }

  // Magnifying glass
  note group Note5
  {
    attr Bounds = <440,500,660,670>;
  }

  // Caret
  note group Note4
  {
    attr Bounds = <10,500,430,670>;
  }

  // State management
  note group Note3
  {
    attr Bounds = <670,240,890,330>;
  }

  // Touch screen events
  note group Note2
  {
    attr Bounds = <440,240,660,450>;
  }

  // Keyboard events
  note group Note1
  {
    attr Bounds = <10,240,430,490>;
  }

  // This internal variable refers to a temporary Views::Image object used to show \
  // the background for the augmented text content around the caret. This view appears \
  // during the user is moving this caret by touching the caret with the finger.
  $rect <450,620,650,660>
  var Views::Rectangle magnifyingBack = null;

  // This internal variable refers to a temporary Views::WarpGroup object used to \
  // show the augmented text content around the caret. This view appears during the \
  // user is moving this caret by touching the caret with the finger.
  $rect <450,580,650,620>
  var Views::WarpGroup magnifyingView = null;

  // This flag is set if it is evtl. necessary to scroll the editor content in order \
  // to ensure that the caret is still visible.
  $rect <220,620,420,660>
  var bool autoScroll;

  // This internal variable stores the current caret index. This is the position \
  // within Text.String property where the user can input text or delete signs.
  $rect <20,620,220,660>
  var int32 caretIndex = 0;

  // This slot method is called after the caret has been adjusted. Its job is to \
  // adjust too the position of the magnifying glass view where the augmented text \
  // content around the caret is shown.
  $rect <450,540,650,580>
  slot updateMagnifyingView
  {
    // There is actually no magnifying glass displayed. Nothing to do.
    if ( magnifyingView == null )
      return;

    var rect  srcArea = magnifyingView.SourceArea;
    var rect  extent  = magnifyingView.GetExtent();
    var rect  bounds  = Bounds;
    var point caret   = Caret.Point1;

    // Calculate the start position of the area to show in the magnifying
    // view. Preferably the caret should appear in the center of this area.
    var int32 srcX = caret.x - ( srcArea.w / 2 );

    // However, the part of magnifying glass displaying the caret should 
    // remain arranged horizontally within the editor area.
    if ( srcX < 0 )
      srcX = 0;

    if (( srcX + srcArea.w ) > bounds.w )
      srcX = bounds.w - srcArea.w;

    // The resulting start position of the area to augment
    magnifyingView.SourceArea.origin = point( srcX, caret.y );

    // Now calculate the position for the magnifyingView. Preferably the
    // the view should be arranged so it shows the augmented caret 
    // exactly above the origin caret
    var int32 dstX = ( bounds.x1 + caret.x ) - ( caret.x - srcX ) * 2;

    // From the new magnifyingView position and its current position calculate
    // an offset.
    var point ofs = point( dstX - extent.x1, bounds.y1 + caret.y - extent.y2 );

    // Move the magnifyingView and its background by the just calculated offset
    magnifyingView.MoveView( ofs, false );
    magnifyingBack.MoveView( ofs, false );
  }

  // This slot method is called after a short delay when the user has moved the caret \
  // or modified the text. Its job is to ensure that the caret is still visible. \
  // If necessary, the editor content is scrolled.
  $rect <220,540,420,580>
  slot updateScrollOffset
  {
    // Get the visible area of the text view
    var rect  bounds = Text.Bounds;
    var int32 ofsX   = 0;
    var int32 ofsY   = 0;

    // Calculate an offset to scroll the text content if the caret lies
    // outside the visible area
    if ( Caret.Point1.x < bounds.x1 ) ofsX = bounds.x1 - Caret.Point1.x;
    if ( Caret.Point1.x > bounds.x2 ) ofsX = bounds.x2 - Caret.Point1.x;
    if ( Caret.Point1.y < bounds.y1 ) ofsY = bounds.y1 - Caret.Point1.y;
    if ( Caret.Point2.y > bounds.y2 ) ofsY = bounds.y2 - Caret.Point2.y;

    // Should the cont be scrolled?
    if (( ofsX != 0 ) || ( ofsY != 0 ))
      Text.ScrollOffset = Text.ScrollOffset + point( ofsX, ofsY );

    // The following code takes care of the automatic adjustment of the
    // text scroll position if after modifying the text, its area is small
    // enough to be completely visible.
    ofsX = Text.ScrollOffset.x;
    ofsY = Text.ScrollOffset.y;

    // Get the current text area of the 
    var point size = Text.GetContentArea().size;

    // Does the area fit completely within the text editor?
    if ( size.x <= Text.Bounds.w ) ofsX = 0;
    if ( size.y <= Text.Bounds.h ) ofsY = 0;

    // If possible arrange the text so it fits within the text editor.
    Text.ScrollOffset = point( ofsX, ofsY );
  }

  // This slot method is attached to the Text view. Each time the Text view has rearranged \
  // the text, this method is called. Its job is to adjust the caret to the evtl. \
  // new position.
  $rect <20,540,220,580>
  slot updateCaret
  {
    // Without the font we don't know the height of the caret
    if ( Font == null )
      return;

    // Get the pixel position of the sign right to the caret
    var point rowCol = Text.StringIndex2RowCol( caretIndex );
    var point pos    = Text.RowCol2Position( rowCol );

    // Arrange the caret at the just determined position. The height of 
    // the caret corresponds to the height of a text row drawn with the
    // font
    Caret.Point1 = pos - point( 0, Font.Ascent  );
    Caret.Point2 = pos + point( 0, Font.Descent );

    // Restart the blink effect -> this ensures that the user can see the
    // caret while it is moved or the text is modified
    if ( blinkEffect.Enabled )
    {
      blinkEffect.Enabled = false;
      blinkEffect.Enabled = true;
    }

    // Should adjust the scroll position so that the caret remains in the visible
    // area? Finally clear the 'autoScroll' flag again.
    if ( autoScroll )
    {
      postsignal updateScrollOffset;
      autoScroll = false;
    }

    // If there is a magnifying glass view visible -> arrange it also to the
    // current caret position.
    if ( magnifyingView != null )
      postsignal updateMagnifyingView;
  }

  // This method is called from the corresponding SimpleTouchHandler. Its job is \
  // to hide the magnifying glass view again.
  $rect <450,400,650,440>
  slot onReleaseTouch
  {
    // Hide the views used temporarily to show the augmented editor content
    if ( magnifyingView != null )
    {
      Owner.Remove( magnifyingView );
      Owner.Remove( magnifyingBack );
      magnifyingView = null;
      magnifyingBack = null;

      // Free the temporary used off-screen memory
      Buffered = false;
    }
  }

  // This method is called from the corresponding SimpleTouchHandler. Its job is \
  // to move the caret accordingly to the user's finger movement.
  $rect <450,360,650,400>
  slot onDragTouch
  {
    // Does the user currently drag the caret?
    if ( magnifyingView != null )
    {
      // From the touched screen position estimate the corresponding position
      // within the text string.
      var point  rc            = Text.Position2RowCol( SimpleTouchHandler.CurrentPos );
      var int32  newCaretIndex = Text.RowCol2StringIndex( rc );

      // Does the caret position change? Force the editor to update the
      // position of the blinking caret
      if ( newCaretIndex != caretIndex )
      {
        caretIndex = newCaretIndex;
        postsignal updateCaret;

        // Ensure the caret is still visible later in the updateText slot method
        autoScroll = true;
      }
    }

    // No, then redirect the touch interaction to the slide touch handler when the
    // user moved the finger a little bit. In this manner the user can scroll the text.
    else
    {
      var point ofs   = SimpleTouchHandler.CurrentPos - SimpleTouchHandler.HittingPos;
      var int32 limit = GetRoot().CursorDragLimit;

      // Start the slide mode if the user has dragged the finger a little bit
      if (( ofs.x < -limit ) || ( ofs.x > limit ) ||
          ( ofs.y < -limit ) || ( ofs.y > limit ))
        GetRoot().DeflectCursor( SlideTouchHandler, <0,0>);
    }
  }

  // This method is called from the corresponding SimpleTouchHandler. Its job is \
  // to activate the caret movement mode if the user has pressed the finger on the \
  // screen for a while. The method also shows a small magnifying glass where the \
  // text around the caret is shown. This should help the user to navigate the caret \
  // with the finger.
  $rect <450,320,650,360>
  slot onHoldTouch
  {
    // When the user presses the finger within the text editor area,
    // the editor enters the caret dragging mode. In this mode the
    // user can move the caret with the finger. For convenience the
    // area below the finger is displayed in a kind of magnifying glass.
    // Does enter the mode?
    if (( SimpleTouchHandler.HoldPeriod >= 300 ) && ( magnifyingView == null ))
    {
      // Calculate the size of the area to augment
      var int32 height = Caret.Point2.y - Caret.Point1.y;
      var int32 width  = height * 3;

      // Limit to the available size of the editor component
      if ( height > Bounds.h ) height = Bounds.h;
      if ( width  > Bounds.w ) width  = Bounds.w;

      // The editor component should store its content in an off-screen bitmap
      // in order to be able to to show it augmented in an overlay 'magnifyingView'
      Buffered = true;

      // Create a temporary view to show the augmented content and to show the
      // 'magnifying glass' background
      magnifyingView = new Views::WarpGroup;
      magnifyingBack = new Views::Rectangle;

      // Prepare a magnifyingView to show an augmented content of the edited text
      // row. The content is augmented by the factor x 2
      magnifyingView.Group       = this;
      magnifyingView.Quality     = true;
      magnifyingView.Opacity     = 200;
      magnifyingView.SourceArea  = rect( 0, 0, width, height );
      magnifyingView.Point2.x    = width  * 2;
      magnifyingView.Point3.x    = width  * 2;
      magnifyingView.Point3.y    = height * 2;
      magnifyingView.Point4.y    = height * 2;

      // Also prepare the magnifying glass background view. It is a semitransparent
      // rectangle.
      magnifyingBack.Bounds.size   = point( width * 2, height * 2 ) + <20,20>;
      magnifyingBack.Bounds.origin = <-10,-10>;
      magnifyingBack.Color         = #EEEEEECC;

      // Make the just created views visible on the screen
      Owner.Add( magnifyingBack, 0 );
      Owner.Add( magnifyingView, 0 );

      // Arrange the 'magnifying glass' views at the correct position
      postsignal updateMagnifyingView;
    }

    // Even if the user is not moving the cursor (finger) continue the scrolling when
    // the user holds the finger near an edge of the text editor.
    if ( magnifyingView != null )
      signal onDragTouch;
  }

  // This method is called from the corresponding SimpleTouchHandler. Its job is \
  // to obtain the focused state for the editor so the user can interact with the \
  // editor content and to place the caret at the touched position.
  $rect <450,280,650,320>
  slot onPressTouch
  {
    // With the first touch focus the text editor
    if ( !HasViewState( Core::ViewState[ Focused ]))
     {
      ObtainFocus();
     }
    // Estimate the position within the text string corresponding to the
    // position touched on the screen.
    var point rc            = Text.Position2RowCol( SimpleTouchHandler.CurrentPos );
    var int32 newCaretIndex = Text.RowCol2StringIndex( rc );

    // Does the caret position change? Force the text editor to update the
    // position of the blinking caret
    if ( newCaretIndex != caretIndex )
    {
      caretIndex = newCaretIndex;
      postsignal updateCaret;

      // Ensure the caret is still visible later in the updateText slot method
      autoScroll = true;
    }
  }

  // This method is called from the corresponding keyboard handler. Its job is to \
  // move the caret up/down/left or right in the editor text.
  $rect <220,440,420,480>
  slot onCursorKey
  {
    // No font specified to show the text -> no navigation
    // possible
    if ( Font == null )
      return;

    // Knowing the position of the caret within the string, get the
    // corresponding row/column position in the displayed text.
    var point rc = Text.StringIndex2RowCol( caretIndex );

    // Has the user moved the caret to the left? Get the new resulting
    // row/column number
    if ( CursorKeyHandler.Code == Core::KeyCode.Left )
    {
      // Navigate to the previous column
      rc.x = rc.x - 1;

      // The begin of the row reached? Skip to the end of the preceding row.
      if ( Text.RowCol2StringIndex( rc ) == caretIndex )
      {
        rc.y = rc.y - 1;
        rc.x = Text.GetRowString( rc.y ).length;
      }
    }

    // Has the user moved the caret to the right? Get the resulting
    // row/column number
    if ( CursorKeyHandler.Code == Core::KeyCode.Right )
    {
      // Navigate to the next column
      rc.x = rc.x + 1;

      // The end of the current row reached? Skip to the begin of the next
      // following row.
      if ( Text.RowCol2StringIndex( rc ) == caretIndex )
      {
        rc.y = rc.y + 1;
        rc.x = 0;
      }
    }

    // Has the user moved the caret one row up? Get the resulting
    // row/column number
    if ( CursorKeyHandler.Code == Core::KeyCode.Up )
    {
      // Get the pixel position where the sign at actual caret position
      // is displayed
      var point pos       = Text.RowCol2Position( rc );
      var int32 rowHeight = Font.Ascent + Font.Descent + Font.Leading;

      // Get the row/column corresponding to the sign in the row just above
      rc = Text.Position2RowCol( pos - point( 0, rowHeight ));
    }

    // Has the user moved the caret one row down? Get the resulting
    // row/column number
    if ( CursorKeyHandler.Code == Core::KeyCode.Down )
    {
      // Get the pixel position where the sign at actual caret position
      // is displayed
      var point pos       = Text.RowCol2Position( rc );
      var int32 rowHeight = Font.Ascent + Font.Descent + Font.Leading;

      // Get the row/column corresponding to the sign in the row just below
      rc = Text.Position2RowCol( pos + point( 0, rowHeight ));
    }

    // From the just determined new row/column position get the corresponding
    // position within the text string
    var int32 newCaretIndex = Text.RowCol2StringIndex( rc );

    // Does the caret position change? Force the editor to update the
    // position of the blinking caret
    if ( newCaretIndex != caretIndex )
    {
      caretIndex = newCaretIndex;
      postsignal updateCaret;

      // Ensure the caret is still visible later in the updateText slot method
      autoScroll = true;
    }
  }

  // This method is called from the corresponding keyboard handler. Its job is to \
  // delete the sign preceding the current caret position and to move the caret accordingly.
  $rect <220,400,420,440>
  slot onBackspaceKey
  {
    // No signs preceding the caret -> Nothing to delete
    if ( caretIndex == 0 )
      return;

    // Get the sign which should be deleted from the text.
    var char  ch    = Text.String[ caretIndex - 1 ];
    var int32 count = 1;

    // The sign was a special control sign? In this case the sign comes
    // together with the preceding '%' escape sign - otherwise the user
    // couldn't see the sign
    if (( ch == '^' ) || ( ch == '~' ) || ( ch == '%' ))
      count = 2;

    // Remove the affected text portion and adjust the caret position
    Text.String = Text.String.remove( caretIndex - count, count );
    caretIndex  = caretIndex - count;

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll = true;

    // Inform the owner of this text editor component, that the text has been
    // modified by the user
    postsignal onChange;
  }

  // This method is called from the corresponding keyboard handler. Its job is to \
  // delete the sign at the current caret position.
  $rect <220,360,420,400>
  slot onDeleteKey
  {
    // No signs following the caret -> Nothing to delete
    if ( caretIndex >= ( Text.String.length - 1 ))
      return;

    // Get the sign which should be deleted from the text.
    var char  ch    = Text.String[ caretIndex ];
    var int32 count = 1;

    // The sign was a special control sign? In this case the sign comes
    // together with the preceding '%' escape sign - otherwise the user
    // couldn't see the sign
    if ( ch == '%' )
      count = 2;

    // Remove the affected text fragment
    Text.String = Text.String.remove( caretIndex, count );

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll = true;

    // Inform the owner of this text editor component, that the text has been
    // modified by the user
    postsignal onChange;
  }

  // This method is called from the corresponding keyboard handler. Its job is to \
  // insert at the current caret position the <new line> sign and to move the caret \
  // to the next row.
  $rect <220,320,420,360>
  slot onNewlineKey
  {
    // Take over the just input sign and adjust the caret position
    Text.String = Text.String.insert( '\n', caretIndex );
    caretIndex  = caretIndex + 1;

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll = true;

    // Inform the owner of this text editor component, that the text has been
    // modified by the user
    postsignal onChange;
  }

  // This method is called from the corresponding keyboard handler. Its job is to \
  // insert at the current caret position the sign which has been input by the user \
  // and to move the caret to the next column.
  $rect <220,280,420,320>
  slot onCharacterKey
  {
    var char   ch  = CharacterKeyHandler.CharCode;
    var string str = ch;

    // Precede all special control signs with the '%' escape sign. Otherwise
    // the user can't input nor see them
    if (( ch == '^' ) || ( ch == '~' ) || ( ch == '\xAD' ) || ( ch == '%' ))
      str = "%" + ch;

    // Take over the just input sign and adjust the caret position
    Text.String = Text.String.insert( str, caretIndex );
    caretIndex  = caretIndex + str.length;

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll = true;

    // Inform the owner of this text editor component, that the text has been
    // modified by the user
    postsignal onChange;
  }

  $rect <480,170,680,210>
  onset WrapText
  {
    // The value doesn't change - nothing to do.
    if ( pure WrapText == value )
      return;

    // Remember the new value ...
    pure WrapText = value;
    Text.WrapText = value;

    // If the text is warp automatically in rows, there is no need to
    // scroll the text horizontally.
    SlideTouchHandler.SlideHorz = !value;

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll        = true;
    Text.ScrollOffset = <0,0>;
  }

  $rect <280,170,480,210>
  onset Alignment
  {
    // The value doesn't change - nothing to do.
    if ( pure Alignment == value )
      return;

    // Remember the new value ...
    pure Alignment = value;
    Text.Alignment = value;

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll        = true;
    Text.ScrollOffset = <0,0>;
  }

  $rect <690,80,890,120>
  onget String
  {
    // Get the current text view content
    var string str = Text.String;

    // In the following steps remove any special text view control signs
    // which are usually used to control the text flow. The resulting string
    // should contain the 'pure' text only.
    var int32 inx = str.find( '%', 0 );

    // The special control/escape signs are not visible until there is a
    // '%' sign in front of them. Remove all superfluous '%' signs
    while ( inx >= 0 )
    {
      str = str.remove( inx, 1 );
      inx = str.find( '%', inx + 1 );
    }

    // Finally remove the <new line> sign at the end of text which was used
    // as workaround for a text flow parser issue
    return str.left( str.length - 1 );
  }

  $rect <690,40,890,80>
  onset String
  {
    // The value doesn't change - nothing to do.
    if ( pure String == value )
      return;

    // Remember the new string ...
    pure String = value;

    // In the following steps disarm in the assigned Unicode string the special
    // control and escape signs, which usually control the text flow in a  text
    // view. Without this conversion step, signs like '%' couldn't be seen in
    // the editor.
    var string str = value;
    var int32  inx = str.find( '%', 0 );

    // The special '%' escape sign is not visible until there is other
    // '%' sign in front of it. Convert all '%' signs into '%%' sequences
    while ( inx >= 0 )
    {
      str = str.insert( "%", inx );
      inx = str.find( '%', inx + 2 );
    }

    inx = str.find( '^', 0 );

    // The special '^' control sign is not visible until there is a '%'
    // sign in front of it. Convert all '^' signs into '%^' sequences
    while ( inx >= 0 )
    {
      str = str.insert( "%", inx );
      inx = str.find( '^', inx + 2 );
    }

    inx = str.find( '~', 0 );

    // The special '~' control sign is not visible until there is a '%'
    // sign in front of it. Convert all '~' signs into '%~' sequences
    while ( inx >= 0 )
    {
      str = str.insert( "%", inx );
      inx = str.find( '~', inx + 2 );
    }

    inx = str.find( '\xAD', 0 );

    // The special '\xAD' hyphen sign is not visible until there is a '%'
    // sign in front of it. Convert all '\xAD' hyphen signs into '%\xAD'
    // sequences
    while ( inx >= 0 )
    {
      str = str.insert( "%", inx );
      inx = str.find( '\xAD', inx + 2 );
    }

    // Ensure that the caret still refers to a sign within the string
    if ( caretIndex > str.length )
      caretIndex = str.length;

    // Now show the new string in the editor's text view. The additional
    // <new line> is a workaround for a flow text parser issue
    Text.String = str + "\n";

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll        = true;
    Text.ScrollOffset = <0,0>;
    postsignal updatePlaceholder;
  }

  $rect <490,40,690,80>
  onset Color
  {
    // The value doesn't change - nothing to do.
    if ( pure Color == value )
      return;

    // Store the new Color
    pure Color  = value;
    Text.Color  = value;
    Caret.Color = value;

  }

  $rect <290,40,490,80>
  onset Font
  {
    // The value doesn't change - nothing to do.
    if ( pure Font == value )
      return;

    // Store the new font...
    pure Font = value;
    Text.Font = value;

    // Ensure the caret is still visible later in the updateText slot method
    autoScroll        = true;
    Text.ScrollOffset = <0,0>;
  }

  // This bool change effect is used to blink the caret.
  $rect <20,580,220,620>
  object Effects::BoolEffect blinkEffect
  {
    preset Value2 = false;
    preset Value1 = true;
    preset Outlet = ^Caret.Visible;
    preset CycleDuration = 500;
    preset InterCycleDelay = 500;
  }

  // The property 'OnChange' can refer to a slot method, which should be invoked \
  // by the text editor when the user modifies the text.
  $rect <690,120,890,160>
  property slot OnChange = null;

  // The property 'WrapText' determines whether long text rows should be wrapped \
  // automatically.
  $rect <490,120,690,160>
  property bool WrapText = true;

  // The property 'Alignment' determines how the editor should display the text rows \
  // if their size differ from the size of the editor. 
  // In this manner the rows can be aligned horizontally. The entire text block can \
  // be aligned vertically.
  $rect <290,120,490,160>
  property Views::TextAlignment Alignment = Views::TextAlignment[AlignHorzLeft, AlignVertCenter];

  // The property 'String' stores the text of the editor.
  $rect <690,0,890,40>
  property string String = "Text";

  // The property 'Color' controls the color of the text.
  $rect <490,0,690,40>
  property color Color = #000000FF;

  // The property 'Font' refers to the font object used to display the text. The \
  // text is determined by the property @String.
  $rect <290,0,490,40>
  property Resources::Font Font = Resources::FontMedium;

  // This key handler reacts to user inputs if the user has pressed the 'up', 'down', \
  // 'left' or 'right' key. In this case the associated onCursorKey method is called.
  $rect <20,440,220,480>
  object Core::KeyPressHandler CursorKeyHandler
  {
    preset OnPress = onCursorKey;
    preset Filter = Core::KeyCode.CursorKeys;
    preset OnHold = onCursorKey;
  }

  // This key handler reacts to user inputs if the user has pressed the 'backspace' \
  // key. In this case the associated onBackspaceKey method is called.
  $rect <20,400,220,440>
  object Core::KeyPressHandler BackspaceKeyHandler
  {
    preset OnPress = onBackspaceKey;
    preset Filter = Core::KeyCode.Backspace;
    preset OnHold = onBackspaceKey;
  }

  $rect <890,40,1090,80>
  onset Placeholder
  {
    // The value doesn't change - nothing to do.
    if ( pure Placeholder == value )
      return;

    // Remember the new string ...
    pure Placeholder = value;

    TextPlaceholder.String = pure Placeholder;

    postsignal updatePlaceholder;

    InvalidateViewState();
  }

  // The property 'String' stores the text of the editor.
  $rect <890,0,1090,40>
  property string Placeholder = "Insert Text here";

  // This key handler reacts to user inputs if the user has pressed the 'delete' \
  // key. In this case the associated onDeleteKey method is called.
  $rect <20,360,220,400>
  object Core::KeyPressHandler DeleteKeyHandler
  {
    preset OnPress = onDeleteKey;
    preset Filter = Core::KeyCode.Delete;
    preset OnHold = onDeleteKey;
  }

  $rect <690,160,890,200>
  slot onChange
  {
    signal OnChange;

    postsignal updatePlaceholder;
  }

  $rect <890,160,1090,200>
  slot updatePlaceholder
  {
    //TextPlaceholder.Visible = ( String == "Text\n" );
    if( String == "Text\n" || String == "" )
    {
      TextPlaceholder.Visible = true;
      Search.Color = Res::Grey;
      //Icon = Res::SerachIcon;
    }
    else
    {
      TextPlaceholder.Visible = false;
      //Icon = Res::XIcon;
      Search.Color = Res::Blue;
    }
  }

  // This key handler reacts to user inputs if the user has pressed the 'enter' key. \
  // In this case the associated onNewlineKey method is called.
  $rect <20,320,220,360>
  object Core::KeyPressHandler NewlineKeyHandler
  {
    preset OnPress = onNewlineKey;
    preset Filter = Core::KeyCode.Enter;
    preset OnHold = onNewlineKey;
  }

  // This key handler reacts to user inputs if the user has pressed a key corresponding \
  // to character/digit. In this case the associated onCharacterKey method is called.
  $rect <20,280,220,320>
  object Core::KeyPressHandler CharacterKeyHandler
  {
    preset OnPress = onCharacterKey;
    preset Filter = Core::KeyCode.CharacterKeys;
    preset OnHold = onCharacterKey;
  }

  $rect <1090,40,1290,80>
  onset Icon
  {
    // The value doesn't change - nothing to do.
    if ( pure Icon == value )
      return;

    // Remember the new string ...
    pure Icon = value;

    InvalidateViewState();
  }

  // The property 'String' stores the text of the editor.
  $rect <1090,0,1290,40>
  property string Icon = Res::SerachIcon;

  $rect <1090,120,1290,160>
  onset IconFont
  {
    // The value doesn't change - nothing to do.
    if ( pure IconFont == value )
      return;

    // Store the new font...
    pure IconFont = value;

    InvalidateViewState();
  }

  // The property 'Font' refers to the font object used to display the text. The \
  // text is determined by the property @String.
  $rect <1090,80,1290,120>
  property Resources::Font IconFont = Res::IconsFont25;

  $rect <1290,160,1490,200>
  slot onIcon
  {
    InvalidateViewState();

    if ( !SimpleTouchHandler2.AutoDeflected )
    {
      postsignal OnIcon;
    }

  }

  $rect <1090,160,1290,200>
  property slot OnIcon = null;

  $rect <20,20,160,60>
  object Views::Frame Frame
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <0,0, 268, 32>;
    preset Color = Res::WhiteBackgound;
    preset Bitmap = Res::SearchButton;
  }

  // This slide gesture handler is used to scroll the text content.
  $rect <20,20,160,60>
  object Core::SlideTouchHandler SlideTouchHandler
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <0,0,231,32>;
    preset SlideHorz = false;
    preset Friction = 0.05;
  }

  // This generic touch handler is used to move the caret.
  $rect <20,20,160,60>
  object Core::SimpleTouchHandler SimpleTouchHandler
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Point4 = <0,32>;
    preset Point3 = <231,32>;
    preset Point2 = <231,0>;
    preset Point1 = <0,0>;
    preset OnDrag = onDragTouch;
    preset OnHold = onHoldTouch;
    preset OnRelease = onReleaseTouch;
    preset OnPress = onPressTouch;
    preset MaxStrikeCount = 3;
  }

  // This generic touch handler is used to move the caret.
  $rect <20,20,160,60>
  object Core::SimpleTouchHandler SimpleTouchHandler2
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Point4 = <231,33>;
    preset Point3 = <268,33>;
    preset Point2 = <268,1>;
    preset Point1 = <231,1>;
    preset OnRelease = onIcon;
    preset MaxStrikeCount = 3;
  }

  $rect <20,20,160,60>
  object Views::Text Search
  {
    preset Layout = Core::Layout[AlignToLeft, AlignToTop];
    preset Bounds = <231,3,261,31>;
    preset WrapText = true;
    preset Color = #B9B9B9FD;
  }

  $rect <20,20,160,60>
  object Views::Text Text
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <13,2,231,32>;
    preset OnUpdate = updateCaret;
    preset SlideHandler = SlideTouchHandler;
    preset WrapText = true;
    preset Alignment = Views::TextAlignment[AlignHorzLeft, AlignVertCenter];
    preset String = "Text";
    preset Font = Resources::FontSmall;
    preset Color = #1E1E1EFD;
  }

  $rect <20,20,160,60>
  object Views::Text TextPlaceholder
  {
    preset Layout = Core::Layout[AlignToBottom, AlignToLeft, AlignToRight, AlignToTop, ResizeHorz, ResizeVert];
    preset Bounds = <14,2,231,32>;
    preset Alignment = Views::TextAlignment[AlignHorzLeft, AlignVertCenter];
    preset String = "";
    preset Font = Resources::FontSmall;
    preset Color = #B9B9B9FD;
  }

  $rect <20,20,160,60>
  object Views::Line Caret
  {
    preset Point2 = <0,29>;
    preset Point1 = <0,5>;
    preset Width2 = 2;
    preset Width1 = 2;
    preset Color = #000000FF;
    preset Visible = false;
  }
}