1. Setup Development Environment for Canvas Technology

Owned by Ravikumar Babu CTOO (Unlicensed)
Last updated: Apr 23, 2021

This page is intended for developers who are starting to use Canvas Technology to build their first web and mobile applications.

Prerequisites

The following prerequisite software are needed to set up your development environment for Canvas Technology:

  1. Development Kit: Java 1.8 SDK
  2. Build: Apache Ant 1.10
  3. Server: Tomcat 8 or JBoss EAP 7 app server
  4. Database: Oracle 12c or MySQL 8
  5. IDE: Eclipse (any latest version)



Once the discussion with CT Platform Support team is completed, you must set up the development environment and deploy Canvas Studio for using the CT Platform. The development environment setup creates a blank application template, which can be committed to your project source code repository (e.g. SVN) for easy replication of the workbench setup in every developer's machine in your project team.

Setup Development Environment

To setup the development environment for using Canvas Technology, perform the following steps:

  1. To receive the Canvas Technology Platform binaries, send an email to ravikumar.babu@intellectdesign.com.

  2. Execute the following command from the Command Prompt:

    java -jar CTSetup.jar

    The Ant software version will be detected.


    The Canvas Development Environment Setup Wizard opens with the Verify Software Prerequisites section. The Java SDK location path that is detected appears in the Java Home field.


    By default, MySQL and Tomcat are selected in the Database Type and Server fields respectively. You can change these values if your target database and app server environment is different.

    Oracle is the supported alternative database and JBoss is the supported alternative app server. The setup assumes that your system contains the selected software.

  3. Click Next.
  4. In the Verify Canvas Prerequisites section, perform the following:
    1. Specify the application work folder in the Canvas Workfolder path field. If the folder does not exist, create the folder by clicking Select > Create new folder. Application logs, generated contents, such as reports, get stored in this folder.
    2. Specify the application name in Application Name field. The application name will be used as the WAR name and the application context.
    3. Specify a description for the application in the Short Description field. The description entered here will be added to the application manifest file.
    4. Specify your team name in the Team Name field. The team name entered here will be added to the application manifest file.
    5. Click Next.


  5. In the Build and Deployment Parameters section, perform the following:
    1. Enter the folder for generating the application WAR in the Build Folder Path field. If the folder does not exist, create the folder by clicking Select > Create new folder icon. The application WAR file generated during build is stored in this folder.
    2. Enter the application source code folder in the Application Source Code Folder field. If the folder does not exist, create the folder by clicking Select > Create new folder icon. This folder is your main development folder in which the application source code and templates are to be created.
    3. Enter the application version number in the App Version No: field. The version number entered here is added to the application manifest file.
    4. Click Next.

  6. In the Generate Project Template section, click Generate.


    The project template creation begins and and its status is shown in Summary.

  7. Once complete, click Finish.
    A new application template with the name provided in step 4b is created inside the application source code folder. For example, a new application template named SmartBank is created inside D:\SmartbankSVN as shown in the following screen shot:

    The application project template folder contains the following sub-folders and files. These folders are the placeholders for your application source code and its dependencies.

    • Dependencies - Place all the dependencies of your application here, e.g. third-party application JARs.
    • DBScripts - Place all the database scripts of your application here.
    • Lib - Place all the server-side code here, e.g. data support class, action classes, instruction classes etc.
    • Resources - Place all the resources used by your application, e.g. properties files, SQL Maps etc.
    • WebApp - Place all the web content (client-side) files here, e.g. listeners, HTML, CSS, images etc.
    • ToBeCopiedOutside - Contains the additional files needed for generating reports. The contents of this folder need to be copied to the application work folder in step 4a. For example, D:\SmartBank.
    • build.xml - File for building the application WAR file. This can be used as-is unless you are using some other folders to maintain your application code instead of the folders created by the wizard.

    • build.properties - Properties file for build process. All the required inputs for building the application (e.g. Java directory) captured in the wizard are populated in the respective properties in this file. If suppose any of those inputs changes, you can update this file accordingly.

      Note

      If you want to use ARX Authentication system for the new application, you must specify in the build.properties file the ARX version in the ARX_VERSION key, e.g. ARX_VERSION=16. On using the ARX Authentication system, the implclassconfig and ctstudiosecurityconfig properties files get impacted. In the implclassconfig properties file, ARX is defined as role-based entitlement. The following code snippet serves as a reference:

      VIEW_ENTITLEMENT_CLASS = com.intellectdesign.canvas.provider.auth.entitlement.ArxRoleBasedViewEntitlement


      In the ctstudiosecurityconfig properties file, ARX is defined as the Authentication Provider. The following code snippet serves as a reference: 

      AUTH_SERV_PROV_CLASS = com.intellectdesign.canvas.provider.auth.arx.ARXCookieBasedAuthenticationProvider
    • MobileBuilder.properties - Properties file for mobile build process.

Setup Eclipse

To setup Eclipse, perform the following steps:

  1. Open Eclipse and create a new Java project.

  2. Delete the default src folder.
  3. Right-click on the project, click Build Path > Link Source > click Browse and select the the generated application project lib\src folder. For example, D:\SmartbankSVN\Smartbank\SmartbankLib\src.

  4. Right-click on the selected src folder, click Build Path > Remove from Build Path, choose Keep the linked folder option and click Yes.

  5. Right-click on src\main\java, click Build Path > Use as Source Folder.

  6. Right-click on the project, click Build Path > Configure Build Path > Libraries tab > Add External JARs and add the following dependencies that were provided as part of the generated application project (e.g. D:\SmartbankSVN\Smartbank\Dependencies):
    • ..\Dependencies\canvas
      • CTFull.jar
      • CTLogging-Log4j-1x.jar
      • CTLogging-Log4j-2x.jar
      • CTResources.jar
    • ..\Dependencies\SupportingJars\Javaee_Jars\ee6u3
      • javax.servlet.jar
    • ..\Dependencies\SupportingJars\Rest_Jars
      • All JARs
    • ..\Dependencies\SupportingJars\Third_Party_Jars
      • All JARs

Execute DB Scripts

Build the empty project template from the application source folder using the command Ant for creating the application WAR file. On executing the Ant command, the CT folder gets automatically created in the same path, as part of the project generation.

Perform the following steps to generate the database scripts for the new application project (e.g. Smartbank):

  1. Access the path of the zipped database folders, e.g. D:\CT\dist\database.

  2. Extract the files of the target database from the zip folder, e.g. canvasSetup_MYSQL.
    1. Open the extracted folder of canvasSetup_MYSQL.

  3. Open the bin folder in canvasSetup_MYSQL.

  4. Open the config.txt file in bin folder.


    Multi App Schema enables you to use a single configuration schema for different applications, in this case, SmartBank and other applications. This is similar to a functional application (e.g. Modelhouse) and Sigma, using the same config (metadata) schema instead of using two different schemas.

    Note

    If you want to use multi app schema, then perform step 5 or else proceed to step 6.

  5. Only when you use a multi-app schema, it is required for you to replace the existing name of the MULTI_APP_SCHEMA, with a new one, e.g. MULTI_14260 and then you must proceed to save the config.txt file.

  6. Double-click the run windows batch file to generate the DB scripts.


    The DB scripts get generated. 

  7. After the DB scripts get generated successfully, open server.xml file in the app server’s configuration folder to change the schema name, e.g. D:\Canvas\apache tomcat 8.5.9\conf\server.xml.

    Note

    The schema names for application, Studio, and Sigma application that were provided in the config.txt file, must be specified in the server.xml file.



    The following sample code snippet serves as a reference of server.xml file for the schema details of sample application (Modelhouse), Sigma and Canvas Studio:

    <!-- Schema for application, e.g. Modelhouse -->
<Resource 
			auth = "Container" 
			driverClassName = "com.mysql.cj.jdbc.Driver" 
			factory = "org.objectweb.jotm.datasource.DataSourceFactory" 
			maxactive = "10" 
			maxidle = "10" 
			maxwait = "-1" 
			name = "jdbc/ModelHouseCT" 
			username = "<SCHEMA USERNAME>"
			password = "<SCHEMA PASSWORD>" 
			type = "javax.sql.DataSource" 
			url = "<APPLICATION URL>"
/>

<Resource 
			auth = "Container" 
			driverClassName = "com.mysql.cj.jdbc.Driver" 
			factory = "org.objectweb.jotm.datasource.DataSourceFactory" 
			maxactive = "10" 
			maxidle = "10" 
			maxwait = "-1" 
			name = "jdbc/ModelHouse" 
			username = "<SCHEMA USERNAME>"
			password = "<SCHEMA PASSWORD>" 
			type = "javax.sql.DataSource" 
			url = "<APPLICATION URL>"
/>

<!-- Schema for Sigma application -->
<Resource 
			auth = "Container" 
			driverClassName = "com.mysql.cj.jdbc.Driver" 
			factory = "org.objectweb.jotm.datasource.DataSourceFactory" 
			maxactive = "10" 
			maxidle = "10" 
			maxwait = "-1" 
			name = "jdbc/SigmaCanvasDataSource" 
			username = "<SCHEMA USERNAME>"
			password = "<SCHEMA PASSWORD>" 
			type = "javax.sql.DataSource" 
			url = "<APPLICATION URL>"
/>
  
<Resource 
			auth = "Container" 
			driverClassName = "com.mysql.cj.jdbc.Driver" 
			factory = "org.objectweb.jotm.datasource.DataSourceFactory" 
			maxactive = "10" 
			maxidle = "10" 
			maxwait = "-1" 
			name = "jdbc/SigmaAppDataSource" 
			username = "<SCHEMA USERNAME>"
			password = "<SCHEMA PASSWORD>" 
			type = "javax.sql.DataSource" 
			url = "<APPLICATION URL>"
/>

<!-- Schema for Canvas Studio -->
<Resource 
			auth = "Container" 
			driverClassName = "com.mysql.cj.jdbc.Driver" 
			factory = "org.objectweb.jotm.datasource.DataSourceFactory" 
			maxactive = "10" 
			maxidle = "10" 
			maxwait = "-1" 
			name = "jdbc/ExpertStudio" 
			username = "<SCHEMA USERNAME>"
			password = "<SCHEMA PASSWORD>" 
			type = "javax.sql.DataSource" 
			url = "<APPLICATION URL>"
/>
  
<Resource 
			auth = "Container" 
			driverClassName = "com.mysql.cj.jdbc.Driver" 
			factory = "org.objectweb.jotm.datasource.DataSourceFactory" 
			maxactive = "10" 
			maxidle = "10" 
			maxwait = "-1" 
			name = "jdbc/ExpertStudioTarget" 
			username = "<SCHEMA USERNAME>"
			password = "<SCHEMA PASSWORD>" 
			type = "javax.sql.DataSource" 
			url = "<APPLICATION URL>"
/>

Develop the Application and Build the Application WAR

  1. Build the application template from the application source folder (given in step 5b in Setup Development Environment section above) to create the application WAR file by using the command: Ant.
  2. Copy the application WAR file (from the folder mentioned in step 5a in Setup Development Environment section above) and deploy in the app server. Note that this is a blank application with no features.
  3. Copy the Canvas Studio WAR file and deploy in the app server. Contact CT Platform Support to get the Canvas Studio WAR and deploy it in the app server.
  4. Start the database and app servers and access Canvas Studio:
    • http://<IP of the app server>:<port number>/expertctstudio, e.g. http://1.2.3.4:1234/expertctstudio
  5. Use Canvas Studio to create the forms, grids, and dashboards required for your application. All the server-side business functionalities such as instruction/action classes must be written in Java and client-side validations and listeners such as button or row clicks must be written in JavaScript. Rebuild the application WAR (step 1) and redeploy the WAR on the app server. Refer Building Your First Web Application for information on using Canvas Studio.
  6. Access the application:
    • http://<IP of the app server>:<port number>/<application context root>, e.g. http://1.2.3.4:1234/Smartbank
  7. Report any issues identified along with their first-level analysis in DIGI_CANVAS SUPPORT project in Jira.