Creating a toggle switch

Smart Mobile Studio component writing is actually very simple. It’s much easier than under Delphi – but it involves one aspect that to some Spartans can feel.. well, a bit odd. Namely the fact that you have to take CSS into account.

The CSS code for the TW3Switchbox:

.TW3ToggleSwitch {
  background-color: #FFFFFF;
    border:1px solid #AAA;
    border-radius:6px;
    color:#FFF;
    font-weight:700;
    overflow:hidden;
    box-shadow:0 1px 0 #FFF;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
 }
 
.TW3ToggleOnLabel {
  border-radius: 6px;
  text-align:center;
    background:#007FEA;
    text-shadow:0 -1px 0 #093B5C;
    box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset;
}
 
.TW3ToggleOffLabel {
  border-radius: 6px;
  text-align:center;
    box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset;
}
 
.TW3ToggleKnob {
  cursor: pointer;
  background-color: #FFFFFF;
    border:1px solid #AAA;
    border-radius:4px;
    color:#FFF;
    font-weight:700;
    overflow:hidden;
    box-shadow:0 4px 0 -2px #F1F1F1 inset, 0 2em 2em -2em #AAA inset, 0 0 2px rgba(0,0,0,.5);
}
 
.TW3ToggleKnob:hover {
    background:#E5E5E5;
}

The interface:

TW3ToggleKnob = Class(TW3CustomControl)
protected
  procedure InitializeObject; override;
End;
 
TW3ToggleOnLabel = Class(TW3Label)
public
  class function supportAdjustment:Boolean;override;
end;
 
TW3ToggleOffLabel = Class(TW3Label)
public
  class function supportAdjustment:Boolean;override;
end;
 
TW3ToggleSwitch = Class(TW3CustomControl)
private
  FKnob:    TW3ToggleKnob;
  FOnText:  TW3ToggleOnLabel;
  FOffText: TW3ToggleOffLabel;
  Procedure HandleTouch(Sender: TObject; Info: TW3TouchData);
  procedure HandleMouseDown(sender:Tobject;button:TMouseButton;
            shiftState:TShiftState;x,y:Integer);
  function  getChecked:Boolean;
  procedure setChecked(Const aValue:Boolean);
protected
  procedure InitializeObject; override;
  Procedure FinalizeObject;Override;
  procedure Resize; override;
public
  Property  Checked:Boolean read getChecked write setChecked;
  Procedure Toggle;
End;

The implementation:

//###########################################################################
// TW3ToggleOnLabel
//###########################################################################
 
class function TW3ToggleOnLabel.supportAdjustment:Boolean;
Begin
  result:=False;
end;
 
//###########################################################################
// TW3ToggleOffLabel
//###########################################################################
 
class function TW3ToggleOffLabel.supportAdjustment:Boolean;
Begin
  result:=False;
end;
 
//###########################################################################
// TW3ToggleKnob
//###########################################################################
 
procedure TW3ToggleKnob.InitializeObject;
begin
  inherited;
  w3_setStyle(Handle,w3_CSSPrefix('Transition'),'left .12s');
end;
 
//###########################################################################
// TW3ToggleSwitch
//###########################################################################
 
procedure TW3ToggleSwitch.InitializeObject;
begin
  inherited;
  (* Create the "ON" label *)
  FOnText:=TW3ToggleOnLabel.Create(self);
  FOnText.Caption:='ON';
  FOnText.AlignText:=taCenter;
  FOnText.Font.Color:=clWhite;
 
  (* Create the "OFF" label *)
  FOffText:=TW3ToggleOffLabel.Create(self);
  FOffText.Caption:='OFF';
  FOffText.Font.Color:=clBlack;
  FOffText.AlignText:=taCenter;
 
  (* Create our leaver knob *)
  FKnob:=TW3ToggleKnob.create(self);
 
  (* setup internal handlers *)
  self.OnMouseDown:=HandleMouseDown;
 
  self.OnTouchBegin:=HandleTouch;
end;
 
Procedure TW3ToggleSwitch.FinalizeObject;
Begin
  FKnob.free;
  FOffText.free;
  FOnText.free;
  inherited;
end;
 
function  TW3ToggleSwitch.getChecked:Boolean;
Begin
  result:=FKnob.left>0;
end;
 
procedure TW3ToggleSwitch.setChecked(Const aValue:Boolean);
Begin
  if aValue<>getChecked then
  Toggle;
end;
 
Procedure TW3ToggleSwitch.Toggle;
Begin
  case getChecked of
  True:   FKnob.Left:=0;
  False:  FKnob.Left:=(width div 2)-8;
  end;
  w3_callback(
    procedure ()
    begin
      if assigned(OnChanged) then
      onChanged(self);
    end,
    300);
end;
 
Procedure TW3ToggleSwitch.HandleTouch(Sender: TObject; Info: TW3TouchData);
Begin
  Toggle;
end;
 
procedure TW3ToggleSwitch.HandleMouseDown(sender:TObject;
          button:TMouseButton;
          shiftState:TShiftState;
          x, y : Integer);
Begin
  if button=mbLeft then
  Toggle;
end;
 
procedure TW3ToggleSwitch.Resize;
var
  mTemp:  Integer;
  wd: Integer;
  hd: Integer;
Begin
  wd:=width;
  hd:=height;
 
  if (wd>0) and (hd>0) then
  begin
    mTemp:=(wd div 2);
    if (FKnob.width<>mTemp)
    or (FKnob.height<>hd) then
    FKnob.SetSize(mTemp + 8,hd);
 
    FOnText.SetBounds(0,0,mTemp,hd);
    FOffText.SetBounds(mTemp,0,mTemp,hd);
  end;
end;

The magic movement

In this line we tell the browser that it should apply a transition on a css value, in this case the “left” property of the knob control. So whenever you alter the left position of that control, it will apply a 0.12s delay in the movement.

w3_setStyle(Handle,w3_CSSPrefix('Transition'),'left .12s');