Post-Conversion
Last updated
Was this helpful?
Last updated
Was this helpful?
To run the sample application please go to , and look for the README.md with instructions on how to use it.
In case you want to review the source code of the migrated application, you can find it here: . Also, the migrated code can be downloaded from .
This section explains in detail the following topics:
How does the migrated code look like?
Which changes were made over the existing code?
What are the helpers delivered by Mobilize for?
Before moving to explain the output code, first let's take a look at the PowerBuilder sample code:
The converted code from the one above will consist of two parts:
The Backend code containing the Java files and the helpers .war to emulate the PowerBuilder functionality.
The Frontend code with the angular project for the web application.
As the image shown below:
The generated Frontend files are added in the automatically created folder sampleSite-angular, which contains an angular project template and all these converted files.
The structure of this sampleSite-angular folder is as follows:
sampleSite-angular
src
app
components
sample
w_sample
w_sample.component.ts
w_sample.component.css
w_sample.component.html
d_sample_list
d_sample_list.component.ts
d_sample_list.component.css
d_sample_list.component.html
index.ts
app.component.css: stylesheet file used by the app.component
app.component.html: html file associated with the app.component
app.component.ts: startup angular component of the migrated application
app.component.spec.ts: this is the file to include the frontend unit tests
app.module.ts: this module includes all the sub-modules of all the application. e.g. You have two projects (pbt): project1.pbt and project2.pbt. This will yield two sub-modules: project1.module.ts and project2.module.ts
app-routing.module.ts: this file handles the application routing
root.component.ts: required file to define the root component of the application, where all other components will reside
sample.module.ts: this module includes all the components of the sample pbt.
index.html: this is the page that launches the angular startup component: app.component
styles.css
package.json: json file that contains the list of JavaScript packages required by the application.
Now let's take a look at these generated components. We will start with the HTML file:
Every control declared in the w_sample
file will have its corresponding HTML tag; for example, the sample application has a Command Button
control, so the HTML has this:
Following with these components review, we have the CSS file that matches with the previously reviewed HTML tag:
Every control declared in the w_sample
file will have its corresponding CSS properties. For example, properties like facename, width, and height from the Command Button control are mapped into the CSS file like this:
Finally, the typescript file consists of an angular component class declaration like the one below, for the window class.
Every window, for example w_sample
, should have an Angular Component for the form to be displayed in the browser. This component defines three metadata properties:
selector
— the component's CSS element selector. This selector tells Angular to create and insert an instance of the component where it finds the tag in a HTML template (e.g 'sample-w_sample')
templateUrl
— the location of the component's template file. (e.g './w_sample.component.html')
styleUrls
— the location of the component's private CSS styles. (e.g './w_sample.component.scss')
Let’s have a look at the converted code found in w_sample.java
and Iw_sample.java
files.
The most relevant changes made to the input code by WebMap framework are:
Class declarations: WebMap adds @Configurable
and @WebMAPStateManagement
annotations upon the class declaration.
Variable declarations: WebMap adds a getter and setter for the variable declaration. For example, Get and Set methods for sle_1 PowerBuilder Single Line Edit component.
doWMInit method declaration: WebMap adds doWMInit
to the w_sample.java
. This method initializes the component and sets each component property values.
Type Mappings: WebMap converts the types of the source code to the corresponding type in the new Web Application. For example, datawindow dw_1
has been mapped to com.mobilize.jwebmap.datamanager.DataManagerControl
, and cb_1
Command Button
to com.mobilize.jwebmap.models.ButtonModel
.
Internal component classes: WebMap adds an internal class for each component of the window, for example, st_1
internal class added to w_sample.java
The helpers delivered by Mobilize are a set of utilities whose function is to emulate PowerBuilder functionality into Java together with the FrontEnd WebMap part of the application. These helpers are divided into two projects:
Backend Helpers project contains:
The core of your migrator
Serialization mechanism
Interceptors (AOP)
View Models
Events and Methods of Windows and Data Windows.
Those libraries represent the core of the PowerBuilder application in the “Java platform”
. Also, some libraries providing the link and the control between the data and the Frontend user interface are also found here. Some of those libraries are:
Datamanager
: a Java Plain Old Java Objects (POJO) implementing PowerBuilder Datawindow object. It provides services such as paged data retrieving and other data operations like insert, delete, update and read.
Jasper Reports
: a dynamic component that represents a PowerBuilder Datawindow printing view, displayed as a PDF format.
Database access
: this main component handles data persistence and encapsulates the client business logic in different database engines like Oracle and Sybase. This sub layer will provide services to get access to the persistent mechanism. It will be implemented using Spring JDBC, and it will include a Connection Pooling mechanism in order to improve the application's performance.
State management
: due to its nature, a PowerBuilder application works under a state-full model. However, a Web application does not work like this. In order to preserve behavior a set of Java classes and some Spring Framework features such as Aspect Oriented Programming (AOP) will provide the Application layer with a state management mechanism.
These helpers are delivered as a war file, so the previous information intends to explain what is contain in them.
In this section, we will explain how to build the backend code, so you can later run the application in your default browser. This section applies if you have the JavaHelpers code or the JavaHelpers jar file.
First of all, in order to compile and execute PBJava migrated application, you need the following software installed in your computer:
Add environment variables
To be able to run the migrated project, you must add the following variables to the operating system:
oms_dir
: any directory where you want to start the file system for your application.
JAVA_HOME
: Java base installation directory. (prerequisite)
CATALINA_HOME
: Tomcat installation base directory. (prerequisite)
For Windows Users
Press the Windows
key and type "environment".
Choose the "Edit the system environment variables" option.
On System Properties window, press "Environment Variables" button
Now, on Environment Variables window, add a new entry for every variable mentioned above.
For Linux Users
Open a command prompt window (ctrl + alt + T)
and type the following command.
Type your password
Edit the text file just opened and add the variables typing: JAVA_HOME=java installation path
Save the file
Logout and login again
Setting up the Java project
Look for the helpers code or helpers.jar previously acquired from Mobilize.
Look for the template of WebMAP properties previously acquired from Mobilize, and save it in the created folder SampleConf
Look for the connection.properties file previously acquired from Mobilize, and save it in the created folder SampleConf
Open Spring Tool Suite
Create a new workspace
Configure JAVA JDK. Go to Window -> Preferences -> Java -> Installed JREs -> Add -> Choose Java installation JDK folder
In the Package Explorer, right click and select the Import option.
In the dialog, select Maven, Existing Maven Projects and then Next
Select the Java Helpers pom.xml
previously downloaded and click OK and then Finish
Repeat step 6 for the Sample project and add both ReferenceApplication
and Target
pom.xml
Select the Project Menu, make sure Clean all projects checkbox is selected and press Clean button
Right click on ws
project on Package Explorer and select Maven -> Update Project -> Select All -> OK Button
Configure the Application Property files
Configure Application and Connection Property files
Click on Run menu
Select Debug Configuration
Right Click on Apache Tomcat
option on the left pane -> New
Select the Classpath
tab
Click on User Entries
Click on Advanced...
Click on Add External Folder -> press OK button
Select the folder SampleConf
(created on above step)
Click Apply
ReferenceApplication project
This is the web project where the HTML generated files and the Object State Interceptor are placed. This is the project you have to run to see the web application on your browser.
Target project
This is the migrated code, all the java files, windows and data-windows, generated after the migration are here.
connection.properties file
The connection.properties file is used to specify the database connection configuration. Java Helpers use JDBC API and JDBC drivers to connect and execute queries to the database.
Example of a Sybase configuration:
webmap.properties file
This file contains configuration entries used by the helpers to run the desired application. In this file you can specify the path for the images that you want to display, language (affect for example decimal places separator according to region), etc.
The line application.appstart=com.sample.sample.sample.sample indicates the module that you want to run.
Go to the bottom of the Package Explorer left pane
Right click on Servers
Go to New
Click on Server option
Expand Apache
option
Select Tomcat v9.0 Server
and click Next
On Tomcat installation directory
click Browse
Find your Tomcat folder installation
Click Finish
Compile the Project
Select the Project menu and check the Build Automatically option. This option will build the entire project automatically when a change to any file is detected
For a manual build, in each imported project, right + click
, select on Run As sub-menu and select Maven build
In goals, type "clean install"
and press Run.
Setup the Server
right + click
on the Tomcat server and select Open
In Timeouts
, change the start to 400 ms for the desired time
Save the changes
Select the ws
project, right + click
and select the sub-menu Run As… and then Run On Server
Open a web browser and browse http://localhost:8080
Right click on ws
project
Select Properties
Scroll down and choose Web project Settings
Modify Context root
field, changing current value (in this case "ws") to "/"
Click on Apply button and then OK (this will change the server context)
In this section we will explain how to modify the migrated code with a practical example. For this exercise, you will add a button on the Backend which opens a second window showing the text "Hello World".
First, let's expand the size of the w_sample window, to include the new ButtonModel component.
Go to method doWMInit
in w_sample.java
Modify setHeight
property to 400:
On w_sample.java add a new ButtonModel component cb_2
On method doConstructor
add the following line to initializes the new component
On method doWMInit
initialize and set the name of the new component cb_2
On interface Iw_sample.java, add a get and set method for cb_2
Finally, add or register the new window on the entry point of the application, sample.java. On method getWindowClassNames()
, add the following line before return
statement:
After expanding the size of the w_sample window, let's add a new window to the project, like this:
On package com.sample.sample.sample add a new java class called w_window1
, extending from com.mobilize.jwebmap.models.WindowModelImpl, implementing Iw_window1
Add a StaticTextModel component to w_window1
Add w_window1 constructor
Add the doWMInit
and doConstructor
method as follows:
Add clicked
event to cb_2
internal class on w_sample.java:
Add code to clicked
event to open the new window. First add the ViewManager
property, which manages all about displaying and closing windows.
Now go to clicked
event on cb_2
and add the following code:
On package com.sample.sample.sample add a new java interface called Iw_window1
, extending from WindowModel
Add a st_1
get and set to include the component to the new interface
Now, let's take a look to the final class and interface just added:
In this section, we will explain how to build the Frontend code, so you can later run the application in your default browser.
In order to compile and execute the FrontEnd WebMap migrated part of the application, you need the following software installed in your computer:
Angular Client Framework. To install open a command prompt and run the following command npm install -g @angular/cli
Update the npm configuration's registry key by following the next setup guide. This is required to resolve Mobilize's packages.
Go to productcatalogSite\productcatalogSite-angular folder
Open a Command Prompt from that folder
Start recovering the node modules by executing this command:
Once the packages are successfully recovered, you can build the code.
Run the following command for development environment
The --prod
flag is optional, and it is used to produce optimized binaries on production mode.
The content of the output folder named wwwroot
must be copied to ReferenceApplication\src\main\webapp
In this section we will explain how to modify and extend the migrated code with a practical example. For this exercise, you will add a button on the FrontEnd which opens a second window showing the text "Hello World".
To add elements in an Angular component previously created, you need to add the new element using the corresponding selector. In this case, the selector for a button is wm-command-button, so, in order to add the button cb_2 to w_sample, you need to:
Add the following line after cb_1
Check the resulting code looks like the one below:
Add the corresponding style section for this button in w_sample.component.scss.
To add new components, you need to create 3 files in a folder with the same name of the component. This new folder will be added under the Frontend project and it will contain the following files:
component.html
component.scss
component.ts
For the previous window1 example, we are going to create the 3 files like this:
TS file: w_window1.component.ts
Pay attention to the dataTransfer property since it must be the same as the name set in the doWMinit of the window.
SCSS file: w_window1.component.scss
If necessary, you can add the CSS properties for each component here. For the w_window1 in the example, this is the resulting CSS sheet:
HTML file: w_window1.component.html
The third and final file created for the component, is a HTML that looks like this:
Some important aspects to consider here are:
Validate if the model exists at the beginning of the component
Assign the corresponding model for each control. For Example:
After extending and building both backend and frontend, the final result will look something like this:
In this section we will show you how to debug the migrated Backend code on Spring Tools and how to use the main debugging features. This section applies if you have the JavaHelpers code or the JavaHelpers jar file.
Once the Backend and Frontend of the sample code are compiled, you need to:
Select Window -> Show View -> Servers.
Right Click on server in the Servers panel
Select Restart in Debug or Debug options.
Add breakpoints in your code,
Right Click on application
Select Debug As -> Debug on Server
Finally, you'll see your app running on a browser.
In order to improve the view when debugging, you can change the debug perspective as shown in the following image.
Conditional breakpoints allow threads to stop at a targeted line when a condition it's true. To add a conditional breakpoint, follow these steps:
Right Click the breakpoint and select Breakpoint Properties.
Tick the conditional checkbox under Breakpoint properties.
Put the condition as per your requirement in the text area.
Click on Ok.
This feature allows you to choose any frame in the call stack during the debugging, and to set the JVM to start again from the selected level in order to rerun a part of your application. To do this, you have to:
Select the stack from where you want to start.
Click on the Drop to Frame button in the toolbar of the bug window.
By default, logging is set for production environment. In order to get more log information, you can open the logback.groovy file located in ws/src/main/resources and change some of the following properties to true:
This option is used to print information class loads and unloads. This feature is useful to investigate class leak or old classes (not) getting collected. To enable this feature you have to:
Select Run -> Run Configurations in the left panel
Select Apache Tomcat
Look for Arguments tab
Add -XX:+TraceClassLoading or -XX:+TraceClassUnloading in VM arguments.
The HTML tag wm-command-button
is Mobilize's corresponding Command Button
angular component. Mobilize provides a which you can use in the future when adding new controls to an existing screen.
All these attributes added by Mobilize let Mobilize's mechanism know it has to inject some code in compilation time to allow the proper execution of web applications.
, or your preferable Java Programming environment.
As the previous examples, we are using the following .
Install the , if you haven't already done so.
Install , if you haven't already done so.