Add a new control model

WebMap provides basic set of controls that represent the most common controls used in the Windows Forms framework, these controls are implemented within the WebMap DCPs and they ready to be use by any WebMap application that may require them, however, there are several instances in which it may be needed to create a new control model that it is not part of the default set of controls provided. This section will provide a basic guide on how to create a new control model.

A common occurrence in which a new control may be required is when it forms part of a third-party set of controls that is been used instead of the default Windows Forms controls provided by .NET.

To create a new control model, it requires the following:

• Create a new class that inherits from Mobilize.Web.Control.

• The class must have the Mobilize.WebMap.Common.Attributes.Observable attribute.

• All visual properties should have the Mobilize.WebMap.Common.Attributes.Intercepted attribute, in order to be able to be synchronized with the front-end.

• The control must have an equivalent component in the front-end.

• A Mapper/DTO may be needed to be implemented in order to synchronize data between the back-end and the front-end.

Create a new model step by step

To create a new control model, the following steps need to be made.

Step 1. Create a new class

Step 2. Inherit from the Control class.

The new control may inherit directly from any specific control like a Button, Label, Grid, among many other, however, it is required to inherit from Control albeit directly or indirectly.

It is possible to avoid the Control inheritance, this topic will be addressed in a different section.

namespace CustomControlDemo.Controls
{
    public class MyCustomControl : Mobilize.Web.Control
    {
    }
}

Step 3. Add the Observable attribute

namespace CustomControlDemo.Controls
{
    [Mobilize.WebMap.Common.Attributes.Observable]
    public class MyCustomControl : Mobilize.Web.Control
    {
    }
}

Step 4. Implement the desired properties, methods, and events

It is highly recommended that all visual properties get mark with the Intercepted attribute to optimize their synchronization between the front-end and the back-end.

namespace CustomControlDemo.Controls
{
    [Mobilize.WebMap.Common.Attributes.Observable]
    public class MyCustomControl : Mobilize.Web.Control
    {
        public MyCustomControl()
        {
            this.BackColor = System.Drawing.Color.Red;
            this.ActAsAButton = false;
            this.Click += (o, s) => this.MyCutomEvent?.Invoke(null, null);
        }
        
        [Mobilize.WebMap.Common.Attributes.Intercepted]
        public bool ActAsAButton { get; set; }
        
        [Mobilize.WebMap.Common.Attributes.Intercepted]
        public int ClickCount { get; set; }
        
        [Mobilize.WebMap.Common.Attributes.Intercepted]
        public EventHandler MyCutomEvent { get; set; }
        
        public void TrackUserInteractions()
        {
            // Some logic here.
        }
    }
}

Step 5. Create a DTO

This is an optional step, however, is highly recommended to create a DTO associated to the control, for more info visit this section.

namespace CustomControlDemo.DataTransfer
{
    [Mobilize.WebMap.Common.Attributes.DataTransfer("mctmcntrl")]
    public class MyCustomControl
    {
        public bool? ActAsAButton { get; set; }
    }
}

Step 6. Crete a mapper associated to the new DTO

This is an optional step, however, is highly recommended to create a Mapper associated to the control, for more info visit this section.

public class MyCutomControlMapper<TObservable, TDto> : Mobilize.WebMap.Common.Messaging.Mapper<TObservable, TDto>
    where TObservable : CustomControlDemo.Controls.MyCustomControl, new()
    where TDto : CustomControlDemo.DataTransfer.MyCustomControl, new()
{
    public override void ApplyChanges(TObservable target, TDto source)
    {
        if(source.ActAsAButton.HasValue && target.ActAsAButton != target.ActAsAButton)
        {
            target.ActAsAButton = source.ActAsAButton.Value;
        }
    }
    public override void Map(TDto target, TObservable source)
    {
        target.ActAsAButton = source.GetChange(x => x.ActAsAButton);
    }
}

Step 7. Register the new Mapper

public class Registrations : Mobilize.WebMap.Common.Core.IRegistration
{
    public void RegisterMappers(IMapperCatalog catalog, ILogger logger)
    {
        catalog.AddMapper(new CustomControlDemo.DataTransfer. MyCutomControlMapper ());
    }
}