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');