Implement SwitchRenderer using Bootstrap Toggle
This commit is contained in:
parent
11d9e1c2fb
commit
57f98b7d61
|
@ -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
|
||||
{
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue