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
  • Node
  • Npm vs Yarn
  • Git
  • GUI Clients
  • Visual Studio Code
  • Extensions
  • Extensions recommended
  • tslint extension
  • sonarLint

Was this helpful?

  1. General
  2. FrontEnd
  3. Guides
  4. Component maintenance

Tools

PreviousHow to test your component in the playgroundNextWMLogger

Last updated 3 years ago

Was this helpful?

Node

The first thing that you need to work with our FrontEnd area, is to install nodejs. You can download from .

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. For this reason, you need to get it, because each project needs nodejs to run.

For our purpose, you require at least version Node.js 8.x.

Npm vs Yarn

When you install Nodejs, you will get the package manager npm used it to obtain the packages that a project needs.

NPM works but it slow. To solve this problem, Facebook people created an improved version to get packages called Yarn. You can use the npm manager or the `Yarn manager. At the end of the day you can get your packages.

To get the yarn package, after install node you need to run this command:

    npm install yarn -g

Also, if you have Chocolatey installed in your Windows PC, you can run:

    choco install yarn

You third option, is download the .msi file from .

Git

All our repositories are host in Team Foundation Server. If you want to get some repository, you will have to do it through git.

You can install git from their website .

GUI Clients

After install git, maybe you do not feel comfortable using git from the console. If it is your case, do not worry! Since there are applications that simplify the use of git through graphical interface. We usually use two applications for git.

SourceTree

It's important remember the cost of this software. it's Free! under a proprietary license. Sourcetree is simple to use. you can do every from this application.

TortoiseGit

One of the best features that TortoiseGit offers, is that provides overlay icons showing the file status, a powerful context menu for Git and much more! You can access to the most common actions with a few clicks.

Visual Studio Code

Right now, there are a lot of editor in the market, but perhaps the most comfortable in recent times has been Visual Studio Code. You can practically do everything with Visual studio Code, from writing a few lines of code, going through manager git, to creating documentation or UML diagrams. Visual Studio Code has been our tool selected for our day to day in the FrontEnd team.And a large part of that decision is that it is lightweight and has a large number of plugins to make the development process as agile as possible.

Extensions

You can install extensions from the visual studio code application.

  1. Open your VSCode and press Ctrl + Shift + X.

  2. search the extensions.

  3. Click on Install button.

Some extensions require more setup. Consult the extension documentation for next steps.

Example install extension

Extensions recommended

tslint extension

This extension requires that the tslint and typescript modules are installed either locally or globally. This extension checks some code rules to write code. visual studio will show the errors thanks to this extensions.

Each project has a file called tslint.json that contains all the rules to check. After install the extensions and get tslint and typescript module (through yarn or npm), you just need open the folder with VSCode where the tslint.json is.

sonarLint

This extension is similar to tslint. It checks some rules against the code we write. The difference is that you can connect with our SonarQube server, that contains the rules definition. Visual studio Code has two scopes for settings. The User Settings and the Workspace settings that you can open with Ctrl + ,. The User settings are global and use for all the extensions and the program itself. The Workspace settings are only for you current folder. When you modify the workspace settings a folder is created called .vscode and it contains your custom settings for the current folder.

Install the JRE 8 or 11

install the Java Runtime 8 or 11 in your PC

Install sonarlint in vscode

Reference the JRE for visual code

  • open the visual studio code settings ( ctrl + , )

  • click on the user tab

  • in the search input write sonarlint

  • in the result section, find the Sonarlint > Ls: Java Home

  • insert your JDK path in the input.

Setup the SonarQube server in "user" settings

  • open the visual studio code settings ( ctrl + , )

  • click on the user tab

  • in the search input write sonarlint

  • In the result section, find the Sonarlint > Connected Mode > connections: Sonarqube

  • click on Edit in settings.json

    • "connectionId": "WebMapProduct", "serverUrl": "http://product-sonarqube:9900", "token": "1a7fd47f85d3edca124d141c85d0a47bd39b6418"

Find the project Key for the repository

  • find your repository, and click on the quality gate button.

    • for example WFNetKendoComponents

  • when the SonarQube page is open, there will be an input with the project key

  • save the key, you will need it later.

Setup the SonarQube server in "workspace" settings

  • open the visual studio code settings ( ctrl + , )

  • click on the workspace tab

  • in the search input write sonarlint

  • In the result section, find the Sonarlint > Connected Mode: Project

  • click on Edit in settings.json

    • "connectionId": "WebMapProduct", "projectKey": "<projectKey>" ( write here, the key you saved previously)

Update rules from server to vs Code

in the VS Code open the command on the command palette, and search and run for SonarLint: Update all project bindings to SonarQube/SonarCloud

How to use

If the configuration finished successfully, when you open a file that has some code smell, sonarlint will highlight it as an error. Also, you can check the tab of problems in the bottom section.​

Sourcetree works on Windows and MAC. You can download it from the website .

TortoiseGit is a windows shell interface to git, and you can download from their website .

You can download from their website

read more:

please install this plugin for VS Code

Note: for more information and updates of the sonarqube token, please see the Devops guide (it's best to use the SonarQube Dev credentials, look at step 3 in the following link)

Go to the Frontend dashboard

Read more:

https://nodejs.org/
here
https://git-scm.com/downloads
https://www.sourcetreeapp.com/
https://www.sourcetreeapp.com/
https://code.visualstudio.com/
visual studio tslint
https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode
https://collaboration.artinsoft.com/tfs/Product/DevOps/_wiki/wikis/DevOps.wiki?wikiVersion=GBwikiMaster&pagePath=%2FMobilize%20DevOps%2FDotNet%2FSonarQube%20Setup&pageId=457
https://collaboration.artinsoft.com/tfs/Product/Product/_dashboards/dashboard/783a0ba9-482c-42f1-bc45-48d1abea87a8
visual studio sonarLint