How to replace the Zebble SignaturePad UI Component or add and use another SignaturePad component?

Question

Using Visual Studio, when selecting 'Zebble for Xamarin - Cross Platform Solution' a default project will be created with five pages. I've modified the fifth page to implement a signature pad. Below is the following Page-5.zbl code.

 <?xml version="1.0"?>

<z-Component z-type="Page5" z-base="Templates.Default" z-namespace="UI.Pages"
    z-partial="true" Title="About us" data-TopMenu="MainMenu" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="./../.zebble-schema.xml">

  <z-place inside="Body">

    <TextView Text="Hello world!" />
    <SignaturePad Id="sigPad1" Enabled="true" LineThickness="4" Style.Border.Color="red" Style.Width="100" Style.Height="100"/>

  </z-place>

</z-Component>

Which ends up adding this line to .zebble-generated.cs:

    await Body.Add(sigPad1 = new SignaturePad { Id = "sigPad1", Enabled = true, LineThickness = 4 }
    .Set(x => x.Style.Border.Color = "red")
    .Set(x => x.Style.Width = 100)
    .Set(x => x.Style.Height = 100));

I have been looking at this SignaturePad component package: https://github.com/xamarin/SignaturePad

If I wanted to use the Xamarian SignaturePad component or anyone else's SignaturePad component instead of the Zebble SignaturePad UI component, how would I do that?

Paymon · Accepted Answer · 2017-04-19T16:51:19.333

0

To use a third party component, all you need to do is to create a Zebble wrapper around it. It's explained here: http://zebble.net/docs/customrenderedview-third-party-native-components-plugins

Step 1: Creating Native Adapter(s)

You should first create a Zebble view class to represent an instance of your component using the following pattern. This class will be in the Shared project, available to all 3 platforms.

namespace Zebble.Plugin
{
    partial class MyComponent : CustomRenderedView<MyComponentRenderer>
    {
         // TODO: Define properties, method, events, etc.
    }
}

Note: To make the VS IntelliSense in ZBL files recognize this, you should create a .ZBL file for MyComponent as well:

<z-Component z-type="MyComponent" z-base="CustomRenderedView[MyComponentRenderer]" z-namespace="Zebble.Plugin"
    z-partial="true" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="./../.zebble-schema.xml" />

The next step will be to create the renderer classes.

Step 2: Creating Native Renderers(s) You need to create the following class each platform (UWP, iOS, Android).

 public class MyComponentRenderer : ICustomRenderer
  {
        MyComponent View;
        TheNativeType Result;

        public object Render(object view)
        {
            View = (MyComponent)view;
            Result = new TheNativeType();
            // TODO: configure the properties, events, etc.
            return Result;
        }

        public void Dispose() => Result.Dispose();
}

Using it in the application code In the application code (App.UI) you can use MyComponent just like any other built-in or custom view type.

<Zebble.Plugin.MyComponent Id="..." Property1="..." on-Event1="..." />

edited Apr 19 '17 at 16:51

answered Apr 18 '17 at 09:37

Paymon

1,173
1
9
26

I currently have the folder/file solution layout structure that is created by default when creating a new `Zebble for Xamarin - Cross Platform Solution`. Regarding step 1's text, "this class will be in the Shared project," what do you and/or Zebble's documentation define the Shared project as? So that I may understand where you're advising me to create the class. I have reviewed the website and only see definitions for `App.Domain` and `App.UI`. – HappyCoding Apr 18 '17 at 16:46
1

Both App.Doman and App.UI projects are "shared source" project types in visual studio and any code in those logically also "exists" in the platform specific runnable projects (UWP, Android, iOS). – Paymon Apr 18 '17 at 19:42
1

In your case App.UI is senantically the right place to write the code. – Paymon Apr 18 '17 at 19:43
Will I need to add an element to `.zebble-schema.xml`? When adding it to the application code, I get an "element not declared" message. – HappyCoding Apr 19 '17 at 15:00
No .zebble-schema.xml is automatically overwritten and re-generated from the .zbl files in your project. Instead of creating just a class, in the above example if you create a ZBL file for MyComponent then the schema file will be automatically updated to recognize it. – Paymon Apr 19 '17 at 16:45
1

Thank you, it may be a good idea to add that to the website documentation as well. – HappyCoding Apr 19 '17 at 16:57

How to replace the Zebble SignaturePad UI Component or add and use another SignaturePad component?

1 Answers1