Implement SwitchRenderer using Bootstrap Toggle

This commit is contained in:
Frank A. Krueger 2017-12-10 14:21:49 -08:00
parent 11d9e1c2fb
commit 57f98b7d61
9 changed files with 112 additions and 26 deletions

View File

@ -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
{

View File

@ -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;
}
}
}

View File

@ -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);
}
}

View File

@ -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;
}

View File

@ -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);
}
}
}
}

View File

@ -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));
}

View File

@ -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);
}

View File

@ -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>

View File

@ -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>