LogoLogo
WinForms to WebPowerBuilder to .NETPowerBuilder to Java
  • WebMAP Documentation | Mobilize.Net
  • WinForms
    • Introduction
    • Getting Started
    • Conversion Process
    • Post-Conversion
    • Extend or Modify the Converted Application
      • NoWebMap Forms Winforms
        • How to add a new Form
        • Adding the created form to the migrated App
        • Interacting with the application data
        • Call the custom API
        • Interaction between the no webmap added Form and the WebMap components
      • Adding a component
      • Adding a component dynamically
      • Add a new control model
      • Switching CSS theme
      • Adding new window
      • Conversion Configuration
        • WebMAP configuration file
        • Stub Filter
      • Adding Non-WebMap Angular Forms
      • Adding FrontEnd Handler to a ToolStripMenuItem
      • Changing ToolStripButton icons
      • Adding new items to existing toolbar
      • Adding FrontEnd element properties and JS listeners
      • Adding FrontEnd output handlers
      • Access FrontEnd components
      • Create custom components based on existing WebMap Component
      • Override FrontEnd methods
    • Assessment Mode
    • Errors and Troubleshooting
      • How to resolve broken reference problems with VBUC
    • Portability
    • Glossary
    • Release Notes
    • Internal Demos
    • Known Issues
    • WinForms DCP
  • WebForms
    • Introduction
    • Overview
    • Desktop Compatibility Platform (DCP)
      • Pages and Master Pages
      • GridView and DataList data synchronization
      • HTTP objects
    • Post-Conversion
    • Extend or Modify the Converted Application
      • Adding FrontEnd validator
      • Adding Page
      • Adding MasterPage
    • Designer classes on WebForms Conversion Tool
    • Errors and Troubleshooting
      • How fix Solution when have been added website from filesystem without project file
    • Release Notes
  • PowerBuilder to .Net
    • Introduction
    • Getting Started
      • Conversion Tool
    • Desktop Compatibility Platform (DCP)
      • Data Manager
    • Reports
      • Report Rendering in Modernized Code
      • ReportWatcher Service Configuration
      • Data Manager to RDL Conversion
      • Reporting Service Internals
      • Troubleshooting
  • PowerBuilder to Java
    • Introduction
    • Getting started
    • Post-Conversion
      • Setup PBJava Environment
      • Architecture
      • App Start
    • Glossary
    • Errors
    • Glossary
    • FAQ
      • How to create a new Control
      • How to create a new Screen
      • What is the Mobilize.WebMAP.CoreServices.All?
      • What is the DesignerAttribute?
      • What is the InterceptedAttribute?
      • What is the InterceptedAttribute?
      • What is the ObservableAttribute?
      • What is the Mobilize.Weaving.WebMAPExtensions.All?
  • General
    • FrontEnd
      • Documentation
        • Webforms Angular Components
          • Web Components
            • Base Components
              • BaseValidator Component
            • KendoUI Components
              • CompareValidator
              • CustomValidator
              • RegularExpressionValidator
              • RequiredFieldValidator
              • ValidationSummary
          • Directives
          • AJAX Web Components
            • AjaxCalendar
            • AjaxModalPopupExtender
          • Ajax Interaction Services
        • Client Core
          • WebMap's Client Core
        • Angular Client
          • Introduction
          • WebMap Service
          • WebMap Interceptor Service
        • Base Components
          • Introduction
          • Components
            • Container
            • Control
            • ControlContainer
            • FormsContainer
            • Loading
            • Stub
        • Winforms Angular Components
          • Web Components
            • Base Components
              • Control Component
              • Form Container
              • Grid Component
              • Style
            • KendoUI Components
              • AdoDataControl
              • Button
              • C1TrueDBGrid
              • CheckBox
              • CheckedListBox
              • ComboBox
              • ContextMenuStrip
              • DataGridView
              • DataGridViewFlex
              • DateTimePicker
              • FileDialog
              • GroupBox
              • Label
              • ListBox
              • ListView
              • MaskedTextBox
              • MessageBox
              • NumericUpDown
              • Panel
              • PictureBox
              • PrintDialog
              • ProgressBar
              • RadioButton
              • RichTextBox
              • StatusStrip
              • Stup
              • TabControl
              • TabPage
              • TextBox
              • Timer
              • ToolStrip
              • TreeView
              • WebBrowser
              • Window
            • JQuery Web Components
          • WebMap FrontEnd Architecture
          • Migrated Structure
          • Setup
            • Front-End setup and compilation
            • Components Manual
            • Browser Support
            • Unit Test Manual
            • Development Process
            • Setup AOT/JIT Compilation
          • Decorators
            • Server Event
          • Conventions
            • Application Structure and NgModules
            • Coding
            • Components
            • Data Service
            • Directives
            • Lifecycle hooks
            • Names
            • Services
        • PowerBuilder Kendo Components
          • Base Components
            • base-component
            • column-control
            • controlcontainer
          • Data Manager Componets
            • base-data-manager
            • data-manager-control
            • data-manager-control-base
            • dw-checkbox
            • dw-column
            • dw-complexNumericMaskComponent
            • dw-compute
            • dw-date-time-edit-mask
            • dw-dropdowndatawindow
            • dw-edit
            • dw-edit-mask
            • dw-radio-button
            • dw-simple-numeric-edit-mask
            • dw-string-edit-mask
            • dw-time-edit-mask
          • Window Components
            • basemask
            • graphics
            • w-checkbox
            • w-command-button
            • w-complex-numeric-mask
            • w-date-time-edit-mask
            • w-dropdownlistbox
            • w-group-box
            • w-line
            • w-listbox
            • w-maskedtextbox
            • w-mdiclient
            • w-menu
            • w-multiline
            • w-picture
            • w-picture
            • w-radiobutton
            • w-rectangle
            • w-simple-numeric-edit-mask
            • w-single-line-edit
            • w-statictext
            • w-string-edit-mask
            • w-time-edit-mask
            • w-toolbar
            • w-toolbaritem
            • w-user-object
            • w-window
          • Services
            • DmInteractionService
          • DataManagerEvents
          • FocusManager guide
      • Api Documentation
        • WebMap Silverlight
        • WfNetC1Components
        • WebFormsComponents
      • Guides
        • Setup NPM package registry in the workspace
        • How to Setup WebMap Applications To Run Over SubDomains or WebApplications In IIS
        • Deploy several WebMap Apps in the same Server
        • Update to Angular 16
        • Appearance
          • How to change the CSS
          • How to override the style for a component
        • Component maintenance
          • How link WebMap package to the migrated Application
          • How to resolve broken reference problems with VBUC
          • How to test a local WebMap Components package
          • How to add a new component in a migrated application
          • How to update a component
          • Dynamic Control Support
          • How to add new set of component with a different provider
          • How to test your component in the playground
          • Tools
        • WMLogger
          • How to use the WMLogger's instance
          • How to change log's level
          • How to add log tags
        • Integration test
        • Setup WebMap Applications to Run Front-End And Back-End In Separates Sites
          • Setup WebMap Applications To Run Front-End And Back-End In Separates Sites in Production (IIS)
        • Setup Migrated WebMap Applications To Run Front-end & Back-end In Separates Sites (Only development)
        • Initial Set Up
          • Software to Install
          • Necessary Repositories
      • Errors
      • Version Notes
        • Client Core
        • Angular Client
        • Web Base Components
        • Winforms Angular Components
        • PowerBuilder Kendo Components
      • Licenses
        • Client Core
        • Angular Client
        • Base Components
        • PB Kendo Components
        • WFNet Kendo Components
        • WebForms Components
        • WFNet Access Components
        • WFNet Janus Components
        • WFNet C1 Components
        • Silverlight wms-framework
        • Silverlight i-components
    • BackEnd
      • WebMAP From Scratch
      • Setup
      • DCP: Desktop Compatibly Platform
        • Overview
        • Library Bundles
          • Bundle Library
            • Create an Observable Object
          • Bundle DTO
            • DTO: Data Transfer Objects
              • Creating a DTO
            • Mappers
              • Create Mappers
            • Observable Wrappers
              • Create an Observable Wrapper
            • API/Controllers
      • Architecture
      • Weaving on WebMAP
      • Glossary
      • FAQ
        • How to create a new Control
        • How to create a new Screen
        • What is the Mobilize.WebMAP.CoreServices.All?
        • What is the DesignerAttribute?
        • What is the InterceptedAttribute?
        • What is the Mobilize.Extensions.Logging.RollingFile?
        • What is the ObservableAttribute?
        • What is the Mobilize.Weaving.WebMAPExtensions.All?
      • Licenses
        • PBNet DCP
        • WebFormsDCP
        • WFNet DCP
        • CoreServices
        • CoreServicesCommon
    • Request and Response
  • SCALABILITY
    • Introduction
    • Microservices
    • Containerizing a WebMap .Net Application with Docker
    • Vertical scalability
Powered by GitBook
On this page
  • 1. Creating CustomLabel Observable Class
  • Observations when adding ObservableAttribute
  • Observations when adding InterceptedAttribute
  • 2. Creating CustomLabel Data Transfer Object
  • Observations
  • 3. Creating CustomLabel Mapper
  • 4. Register the mapper

Was this helpful?

  1. General
  2. BackEnd
  3. FAQ

How to create a new Control

Suppose you need to implement the following user story:

As a user, I want to create a CustomLabel that not only has a property Text of the Label but also a AnotherText property that stores another text. When someone modifies the value of AnotherText, it should trigger an event indicating that this property has been changed.

In order to implement this user story, you will have to do the following things:

  1. An Observable Class

  2. A Data Transfer Object

  3. A Mapper

  4. Register the mapper in the RegistrationClass

1. Creating CustomLabel Observable Class

Please follow the following steps:

  1. Create the class

  2. Add ObservableAttribute

  3. Add the required properties and add InterceptedAttribute to the properties that you want them to be persisted throughout the WebMAP's life cycle.

    [Observable]
    public class CustomLabel : Label
    {
     [Intercepted]
     public string AnotherTextInternal { get; set;}
    
     public string AnotherText
     {
         get
         {
             return this.AnotherTextInternal;
         }
         set
         {
             this.AnotherTextInternal = value;           
             this.AnotherTextChanged(EventArgs.Empty);  
         }
     }
    
     [Intercepted]
     public EventHandler AnotherTextChanged { get; set; }
    
     protected virtual void OnAnotherTextChanged(EventArgs e)
     {
         this.AnotherTextChanged?.Invoke(this,EventArgs.Empty);
     }
    }

Observations when adding ObservableAttribute

When you add this attribute, it means the the class will be an observable class. So please take into account the following observations:

  • An observable class can have private, internal or public modifier.

  • An observable class can be sealed.

  • An observable class can be abstract.

  • When you add Observable attribute to a class. All classes that inherits from that class will be observables. Even if attribute is not present in one of those classes.

Observations when adding InterceptedAttribute

When you add this attribute, it means the the property will be intercepted, this means that this property will live under the WebMAP's life cycle, its value will be persisted throughout the requests. So please take into account the following observations:

  • Properties can be virtual or non virtual.

  • Properties cannot be abstract.

  • Properties can be public, private, internal or protected.

  • Properties must be auto implemented

  • Property type can be any value type or string, or any type marked as an observable.

  • Properties can be static

2. Creating CustomLabel Data Transfer Object

Please follow the following steps:

  1. Create a Data Transfer Object class

  2. Add DataTransferAttribute to the class

  3. Add the properties that you want to synchronize between frontend and backend

[DataTransfer("cstmlbl")] 
public class CustomLabel
{ 
    public string Text { get; set; }
    public string AnotherText { get; set; } 
}

Observations

  • Classes should not inherit from any other classes

  • Use nullable types for value types. For example int? instead of int

  • The name used on the DataTransfer attribute should be

    • unique

    • as short as possible

    • it should start with a lowercase consonant

    • it should not use vowels

    • if it is made up of several words the next word should have just its first letter in uppercase

3. Creating CustomLabel Mapper

Please follow the following steps:

  1. Create the mapper class

  2. Implement IMapper interface, in which the first type parameter of this generic interface should be the model. The second parameter of generic interface is the DTO class.

  3. Implement the methods of IMapper

    public class CustomLabelMapper : IMapper
    {
     public void Configure(MapperInformation config)
     {
         // There are not References to report
     }
    
     public object Map(IObservable observable)
     {
         var source = observable as CustomLabel;
    
         var result = new DTO.CustomLabel()
         {
             Text = source.GetChange( x=> x.TextInternal),
             AnotherText = source.GetChange( x=> x.AnotherTextInternal)
         };
         return result;
     }
    
     public void ApplyChanges(IObservable observable IDataTransfer dto)
     {
         var target = observable as CustomLabel;
         var source = dto as DTO.Label;
         if (source.Text != null && source.Text !=target.Text)
         {
             target.Text = source.Text;
         }
         if (source.AnotherText != null &&source.AnotherText != target.AnotherText)
         {
             target.AnotherText = source.AnotherText;
         }
     }

    Observations

  4. Map: this method is called to create a DTO instance and populate from the model. If you do not want to send anything to the client you can return null

  5. ApplyChanges: this method is called to sync back data from the client. In this method you can take data sent from the client and apply those changes to the model on the backend. E.g. If there were a change of AnotherText from client side, it will update the value and trigger the AnotherTextChanged event.

  6. Configure: this method is called to setup which data elements from the model must be considered as references.

  7. The extension method GetChange must be used. This returns null when the property doesn't been modified during the request, otherwise, it returns the value of the modified property.

4. Register the mapper

This final step is simply going to the Registration class (situated under DTO project) and add the following line to the RegisterMapper method:

public class Registrations : IRegistration
{  
    public void RegisterMappers(IMapperCatalog catalog, ILogger logger)
    {
        ...
        ...
        catalog.AddMapper(new CustomLabelMapper());
    }
}
PreviousFAQNextHow to create a new Screen

Last updated 4 years ago

Was this helpful?