Working with the migrated code: Basics
Introduction
This guide introduces you to the basic steps to start working with the migrated code. This guide includes the detail of the required tools and the steps to finally execute the application.
Source Code
Here you can download the source code that is used across the guide.
Required tools to start working
To work with the migrated code and with the Mobilize Silverlight components, you will need to install and configure some basic tools, some of them are not required but can be useful in some scenarios.
The following is the list of the required tools that need to be installed on your computer.
Installing Node.js
To install Node, go to the download page and download the Node.js installer.
Installing Visual Studio Code
To install Visual Code, you must go to the Visual Studio Code download page, download the latest version and install it.
Installing Angular CLI
You can install Angular CLI via npm using the command: npm install -g @angular/cli
Installing Yarn
Yarn is an alternative to npm for package managing. It solves a series of issues that are normally faced with npm. The main reason to use yarn is that installing packages is faster and more consistent than using npm. Yarn is only a CLI client that fetches modules from the npm registry.
Yarn can be installed through npm by executing the command: npm install -g yarn
Installing Git
To install Git, you must go to the Git download page, download the latest version and install it.
Recommended Visual Studio Code extensions (optional)
There are some extensions that can be installed in Visual Studio Code to enhance your development process. The following list is our recommendation of the extension that you should install after the VS code installation. You can review additional documentation of any of these extensions directly in Visual Studio Code.
Document this: To generate JSDoc template documentation.
ESLint: Statically analyzes the code. Allows you to find and fix problems in the code.
Vscode-icons: Displays icons to identify any file type in Visual Studio Code.
Trailing Spaces: Highlight the trailing spaces that must be removed from the code.
Jest Runner: To run and debug jest tests.
Angular Language Service: Provides some features while working with Angular (Code completion, Quick info, others).
TRX Viewer: To visualize jest test results.
To install any of these extensions, just open the Visual Studio Code and click on the Extensions icon on the left sidebar.
In the search bar write down the name of the extension. Select the extension from the list and click on the install button.
Mobilize Package Distribution
Any migrated application will require the use of the mobilize packages. The WebMap Silverlight packages are published in a Mobilize NPM Server. To get access to the server, you first need to override the NPM registry to be able to download the required packages from the Mobilize NPM server.
To register the Mobilize NPM server, you need to execute the command:
The Structure of the Angular Migrated Application
This section will introduce you to the code of an Angular migrated application. Some code comparisons will be made to help you understand how things work in the migrated application.
The Silverlight Application
To understand the migrated application, it's important to understand the structure of the Silverlight application. For this code basics guide, you will be using a simple application that was originally created in Silverlight and migrated to Angular using the Mobilize Silverlight Conversion Tool.
The following image shows you the structure of the original application:
This example application has two projects, one is the Web Project used to embed the Silverlight application (this project is not migrated), and the other project is the Silverlight project. This is a simple example but you could have a more complex structure.
The following image shows you what the Silverlight application looks like when running on Internet explorer.
The Angular Migrated Application
When you open the migrated code in Visual Studio Code you will see the Angular application structure.
In the previous image, you can see the equivalent of the Silverlight project WorkingWithTheCode included in the folder projects. Inside the WorkingWithTheCode project, you can see the app\src folder containing the project files. Here you can find the files that represent the MainPage.xaml. In this case, in the migrated application, you can find the following files:
MainPage.component.html: The component HTML template.
MainPage.component.scss: The component style sheet.
MainPage.component.ts: The component class.
MainPage.ts: The component model. This class contains business logic.
Additionally, you can find some other classes that were migrated from a "cs" file to a Typescript file, for example, CustomerDTO.ts, Data.ts, and MyModel.ts.
The Package.json
Some important things that you can find in the package.json file are:
Scripts for building, running, running tests, and others.
Dependencies. For example, you will find the mobilize package: mobilize/wms-i-components
The angular.json
This file is the primary configuration file for an Angular project. There are different configuration settings that can be configured in this file. For example:
Start Working with the Angular Migrated Code
To start working with the Angular migrated application, open the migrated code in Visual Studio Code (for this guide's purposes, open the migrated code included in the Resources section).
The first thing that you need to do after opening the code in VS Code is to install the project dependencies. To do that, you can use the VS Code terminal or use a command prompt.
In Visual Studio Code, in the toolbar, select Terminal and chose the option New Terminal. A new terminal will be displayed in VS Code.
There are two ways to install the package's dependencies. The first is using npm install:
And the second and recommend way is to install them by using yarn. To do the installation using yarn, in the VS Code terminal execute the following command:
The yarn command will start installing the project-required dependencies
When the yarn process finishes, now you can build the application code. To build the example application, you need to execute the script configured in the package.json file:
When the code build finishes, now you can run the application (Notice that there are no compilation errors in the sample application code).
To run the application, use the command:
The ng serve command will start the application. Normally this will deploy the application in port 4200.
Now, to start the application go to
Working with the Mobilize WebMap Silverlight Packages
The easiest way to work with the WebMap Silverlight packages is to use public packages automatically downloaded in the node_modules when you execute the yarn command. But what if you need or want to work directly with the package's code?
To work with the WebMap Silverlight packages code, you need to get the code (The code should be accessible to you via GitHub).
When you have the code locally, you will have the Folder WebMAPSilverlightComponents with the following structure:
To start working with the components, open the internal WebMapSilverlightComponents folder in Visual Studio Code.
In Visual Studio Code you can see the project structure
You can see in VS Code some projects included in the Visual Studio Code. You need to focus on two specific projects, the wms-framework and the i-components (wms-i-components) which are the ones used in the migrated code.
Installing the project's dependencies
The first step to build the WebMAPSilverlightComponents is to install the dependencies.
To install the dependencies, you need to execute the yarn install command in three different folders:
WebMAPSilverlightComponents\WebMapSilverlightComponents
WebMAPSilverlightComponents\WebMapSilverlightComponents\projects\wms-framework
WebMAPSilverlightComponents\WebMapSilverlightComponents\projects\i-components
Building the WebMAPSilverlightComponents
After installing all the required dependencies you will need to build the projects. To build the projects, execute some commands in the main folder .
Building wms-framework
To build the wms-framework, you need to execute the following command in a terminal/command prompt:
Building i-components
After building the wms-framework, you need to copy the wms-framework into the i-components node_modules folder. To do this you need to execute the command:
Now you need to build the i-components executing the following command:
The result of the compilation of both projects will be found in the dist folder
Using the local WebMAPSilverlight components
After building the wms-framework and the i-components, you can use your local dist in any migrated application code. To use your local packages compilation, you just need to follow the next steps:
Delete the contents of node_modules\@mobilze\wms-framework and then, copy the contents from dist\wms-framework to node_modules\@mobilze\wms-framework.
Delete the contents of node_modules\@mobilze\wms-i-components and the copy the contents inside dist\i-components to node_modules\@mobilze\wms-i-components.
Now you can start your application using the local dist of the WebMAPSilverlightComponents.
Resources
You can use the following resources to practice with the code used in this guide.
Silverlight application
Angular migrated application
Last updated
Was this helpful?