Implement SwitchRenderer using Bootstrap Toggle

Ooui.Forms/Exports.cs

@@ -14,6 +14,7 @@ using Xamarin.Forms.Internals;
 [assembly: ExportRenderer (typeof (Frame), typeof (FrameRenderer))]
 [assembly: ExportRenderer (typeof (Label), typeof (LabelRenderer))]
 [assembly: ExportRenderer (typeof (ProgressBar), typeof (ProgressBarRenderer))]
+[assembly: ExportRenderer (typeof (Switch), typeof (SwitchRenderer))]
 
 namespace Ooui.Forms
 {

Ooui.Forms/Renderers/SwitchRenderer.cs

@@ -0,0 +1,53 @@
+using System;
+using Xamarin.Forms;
+
+namespace Ooui.Forms.Renderers
+{
+    public class SwitchRenderer : ViewRenderer<Switch, Input>
+    {
+        public override SizeRequest GetDesiredSize (double widthConstraint, double heightConstraint)
+        {
+            var size = new Size (54, 38);
+            return new SizeRequest (size, size);
+        }
+
+        protected override void Dispose (bool disposing)
+        {
+            if (disposing)
+                Control.Changed -= OnControlValueChanged;
+
+            base.Dispose (disposing);
+        }
+
+        protected override void OnElementChanged (ElementChangedEventArgs<Switch> e)
+        {
+            if (e.OldElement != null)
+                e.OldElement.Toggled -= OnElementToggled;
+
+            if (e.NewElement != null) {
+                if (Control == null) {
+                    var input = new Input (InputType.Checkbox);
+                    input.SetAttribute ("data-toggle", "toggle");
+                    SetNativeControl (input);
+                    input.Call ("$.bootstrapToggle");
+                    Control.Changed += OnControlValueChanged;
+                }
+
+                Control.IsChecked = Element.IsToggled;
+                e.NewElement.Toggled += OnElementToggled;
+            }
+
+            base.OnElementChanged (e);
+        }
+
+        void OnControlValueChanged (object sender, EventArgs e)
+        {
+            ((IElementController)Element).SetValueFromRenderer (Switch.IsToggledProperty, Control.IsChecked);
+        }
+
+        void OnElementToggled (object sender, EventArgs e)
+        {
+            Control.IsChecked = Element.IsToggled;
+        }
+    }
+}

Ooui/CanvasRenderingContext2D.cs

@@ -81,97 +81,97 @@ namespace Ooui
 
         public void Save ()
         {
-            SendCall ("save");
+            Call ("save");
         }
 
         public void Restore ()
         {
-            SendCall ("restore");
+            Call ("restore");
         }
 
         public void ClearRect (double x, double y, double w, double h)
         {
-            SendCall ("clearRect", x, y, w, h);
+            Call ("clearRect", x, y, w, h);
         }
 
         public void FillRect (double x, double y, double w, double h)
         {
-            SendCall ("fillRect", x, y, w, h);
+            Call ("fillRect", x, y, w, h);
         }
 
         public void StrokeRect (double x, double y, double w, double h)
         {
-            SendCall ("strokeRect", x, y, w, h);
+            Call ("strokeRect", x, y, w, h);
         }
 
         public void BeginPath ()
         {
-            SendCall ("beginPath");
+            Call ("beginPath");
         }
 
         public void ClosePath ()
         {
-            SendCall ("closePath");
+            Call ("closePath");
         }
 
         public void MoveTo (double x, double y)
         {
-            SendCall ("moveTo", x, y);
+            Call ("moveTo", x, y);
         }
 
         public void LineTo (double x, double y)
         {
-            SendCall ("lineTo", x, y);
+            Call ("lineTo", x, y);
         }
 
         public void QuadraticCurveTo (double cpx, double cpy, double x, double y)
         {
-            SendCall ("quadraticCurveTo", cpx, cpy, x, y);
+            Call ("quadraticCurveTo", cpx, cpy, x, y);
         }
 
         public void BezierCurveTo (double cp1x, double cp1y, double cp2x, double cp2y, double x, double y)
         {
-            SendCall ("bezierCurveTo", cp1x, cp1y, cp2x, cp2y, x, y);
+            Call ("bezierCurveTo", cp1x, cp1y, cp2x, cp2y, x, y);
         }
 
         public void ArcTo (double x1, double y1, double x2, double y2, double radius)
         {
-            SendCall ("arcTo", x1, y1, x2, y2, radius);
+            Call ("arcTo", x1, y1, x2, y2, radius);
         }
 
         public void Rect (double x, double y, double w, double h)
         {
-            SendCall ("rect", x, y, w, h);
+            Call ("rect", x, y, w, h);
         }
 
         public void Arc (double x, double y, double radius, double startAngle, double endAngle, bool counterclockwise)
         {
-            SendCall ("arc", x, y, radius, startAngle, endAngle, counterclockwise);
+            Call ("arc", x, y, radius, startAngle, endAngle, counterclockwise);
         }
 
         public void Fill ()
         {
-            SendCall ("fill");
+            Call ("fill");
         }
 
         public void Stroke ()
         {
-            SendCall ("stroke");
+            Call ("stroke");
         }
 
         public void Clip ()
         {
-            SendCall ("clip");
+            Call ("clip");
         }
 
         public void FillText (string text, double x, double y, double? maxWidth)
         {
-            SendCall ("fillText", text, x, y, maxWidth);
+            Call ("fillText", text, x, y, maxWidth);
         }
 
         public void StrokeText (string text, double x, double y, double? maxWidth)
         {
-            SendCall ("strokeText", text, x, y, maxWidth);
+            Call ("strokeText", text, x, y, maxWidth);
         }
     }
 

Ooui/Client.js

@@ -65,11 +65,19 @@ function ooui (rootElementPath) {
         const messages = JSON.parse (event.data);
         if (debug) console.log("Messages", messages);
         if (Array.isArray (messages)) {
+            const jqs = []
             messages.forEach (function (m) {
                 // console.log('Raw value from server', m.v);
                 m.v = fixupValue (m.v);
-                processMessage (m);
+                if (m.k.startsWith ("$.")) {
+                    jqs.push (m);
+                }
+                else {
+                    processMessage (m);
+                }
             });
+            // Run jQuery functions last since they usually require a fully built DOM
+            jqs.forEach (processMessage);
         }
     });
 
@@ -163,9 +171,11 @@ function msgCall (m) {
         console.error ("Unknown node id", m);
         return;
     }
-    const f = node[m.k];
+    const isJQuery = m.k.startsWith ("$.");
+    const target = isJQuery ? $(node) : node;
+    const f = isJQuery ? target[m.k.slice(2)] : target[m.k];
     if (debug) console.log ("Call", node, f, m.v);
-    const r = f.apply (node, m.v);
+    const r = f.apply (target, m.v);
     if (typeof m.rid === 'string' || m.rid instanceof String) {
         nodes[m.rid] = r;
     }

Ooui/Element.cs

@@ -116,5 +116,19 @@ namespace Ooui
         {
             SendSet ("style." + Style.GetJsName (e.PropertyName), Style[e.PropertyName]);
         }
+
+        protected override bool SaveStateMessageIfNeeded (Message message)
+        {
+            if (message.TargetId != Id)
+                return false;
+
+            switch (message.MessageType) {
+                case MessageType.Call when message.Key.StartsWith ("$.", StringComparison.Ordinal):
+                    AddStateMessage (message);
+                    return true;
+                default:
+                    return base.SaveStateMessageIfNeeded (message);
+            }
+        }
     }
 }

Ooui/EventTarget.cs

@@ -115,7 +115,7 @@ namespace Ooui
             MessageSent?.Invoke (message);
         }
 
-        protected void SendCall (string methodName, params object[] args)
+        public void Call (string methodName, params object[] args)
         {
             Send (Message.Call (Id, methodName, args));
         }

Ooui/Node.cs

@@ -73,7 +73,7 @@ namespace Ooui
                 }
             }
             newChild.MessageSent += HandleChildMessageSent;
-            SendCall ("insertBefore", newChild, referenceChild);
+            Call ("insertBefore", newChild, referenceChild);
             OnChildInsertedBefore (newChild, referenceChild);
             return newChild;
         }
@@ -88,7 +88,7 @@ namespace Ooui
                 }
             }
             child.MessageSent -= HandleChildMessageSent;
-            SendCall ("removeChild", child);
+            Call ("removeChild", child);
             OnChildRemoved (child);
             return child;
         }
@@ -110,7 +110,7 @@ namespace Ooui
             }
             foreach (var child in toRemove) {
                 child.MessageSent -= HandleChildMessageSent;
-                SendCall ("removeChild", child);
+                Call ("removeChild", child);
             }
             InsertBefore (newNode, null);
         }

Ooui/UI.cs

@@ -40,10 +40,14 @@ namespace Ooui
   <title>@Title</title>
   <meta name=""viewport"" content=""width=device-width, initial-scale=1"" />
   <link rel=""stylesheet"" href=""https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"" />
+  <link rel=""stylesheet"" href=""https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css"" />
   <style>@Styles</style>
 </head>
 <body>
 <div id=""ooui-body"" class=""container-fluid""></div>
+
+<script type=""text/javascript"" src=""https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js""></script>
+<script type=""text/javascript"" src=""https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js""></script>
 <script src=""/ooui.js""></script>
 <script>ooui(""@WebSocketPath"");</script>
 </body>

Samples/DisplayAlertPage.xaml

@@ -9,6 +9,10 @@
             <ActivityIndicator x:Name="activity" />
             <ProgressBar x:Name="progress" />
             <DatePicker x:Name="datePicker" />
+            <StackLayout Orientation="Horizontal">
+                <Switch x:Name="switch1" IsToggled="true" />
+                <Switch x:Name="switch2" IsToggled="false" />
+            </StackLayout>
             <Button Text="Tap to Display Alert"
                     Clicked="OnButtonClicked" />
         </StackLayout>