Development only

This document explains how to setup an environment to develop Axional Frontend applications. It's not a guide to install the product in a production environment

Axional Frontend splits application in two sides, the backend and the frontend.

For the backend tier, you will use SQL/XSQL code to write the services on a Axional Studio server. So you need a regular database and it's application dictionary where you will catalog all avaiable SQL operations allowed for the frontend.

For the frontend tier, you will use Java and javascript to write the application that provides the user interface. So you will need a Java IDE and some setup to access Axional Frontend development kit.

1 Installing an IDE

First of all you have to download the latest version of IntelliJ IDEA from the JetBrains website. (There are the versions for Windows, macOS and Linux.)

Depending on your operating system:

  • Windows: Run the .exe file and follow the instructions of Intellij IDEA Setup wizard.
  • macOS: Open the .dmg package, and drag IntelliJ IDEA to the Applications folder.
  • Linux: Unpack the .tar.gz archive into any directory within your home directory.

2 Intellij requirements

First of all, we need to download and install Java. Download here.

Once installed, we have to download Java Platform (JDK).



Now, we have to configure JDK in IntelliJ

  1. Open IntelliJ.
  2. Click on Configure --> Projects Defaults --> Project Structure.



  3. Inside Project Settings --> Project, click on New... button. Set up Project SDK and choose the JDK option.



  4. Now, you have to select the last JDK version folder, and click open.



  5. Finally, click Apply and OK.

3 Bitbucket repository setup

Bitbucket is a web-based hosting service that is owned by Atlassian, used for source code and development projects that use either Mercurial or Git revision control systems.

  1. Registering on Bitbucket

    If you already have an account, you can go directly to the next step. The first thing we will do is access to the registration page and complete all the steps:



  2. Once you have the account and password, we login to bitbucket.

  3. The first time you enter bitbucket, obviously, you do not have any repository.

    Important

    To get any repository, please contact to deister software

    When you have permission to view the repository, you will automatically receive an email notifying you. And then you can see the repository in Repositories Menu.



  4. To run the Axional Frontend, you need the next repositories:
    • Axional-gradle
    • Axional-server-console
    • Axional-server-core
    • Axional-server-soap
    • Axional-studio-frontend
    • Axional-server-expr

4 Mercurial setup

Mercurial is a DVCS that transfers code between your local system and Bitbucket Cloud.

  • Install Mercurial

    Depending on your operating system:

    • For Windows:

      Download the Mercurial installer. To open a command window, search for the Command Prompt.

    • For Mac:

      Download the Mercurial installer. To open a command window, search for the Terminal.

    • For Linux:
      1. Enter cat /etc/apt/sources.list at the command line to see the contents of the file.
      2. If any of the lines are commented (have a # prefix), then edit the file and remove all # from the comments.
      3. Make sure you have an updated package list by entering sudo apt-get update at the command line.
      4. To install Mercurial, enter sudo apt-get install mercurial. Verify the installation was successful by typing which hg at the command line.

5 SourceTree setup

SourceTree, from Atlassian, is a powerful Git and Mercurial desktop client for developers on Mac or Windows. SourceTree simplifies how you interact with Git and Hg repositories so you can focus on coding. Manage all your repositories, hosted or local, through SourceTree's simple interface.

You can Donwloand here.

Once we have installed the SourceTree, we are going to clone the bitbucket repositories:

  1. Go to the bitbucket website.
  2. Click on the repository that you want to clone.
  3. Copy the URL ---> https://...



  4. With the URL copied, go to SourceTree, click in +New button and then Clone from URL:



  5. Copy the URL in Source URL.
  6. Put the Destination Path that you want. It is recommended to put all repositories in a workspace folder.
  7. Finally put the name of repository.



  8. If by copying the URL doesn't work, you can clone the repository clicking on the button:



  9. Click on Clone in SourceTree and continue to step 6.


  10. Do this action for all repositories that you want to clone.

Alert

It is important that all repositories are located in the same directory.

6 Import Axional-frontend in IntelliJ

With all the repositories cloned in sourceTree, and located in the same folder. We are ready to import the project into the IntelliJ.

  1. Open Intellij and click Import Project.



  2. Choose the Axional-studio-frontend folder, and click Open.



  3. Select Gradle option and click Next.



  4. Check out to set Gradle home to axional-gradle repository and Gradle JVM with Java version 1.8 or higher.



  5. Finally click Finish.
  6. If a window appears asking by user and password, you have to write your user and password bitbucket account.


7 Refresh Gradle

In this section we are going to see how to refresh all gradle projects.

  1. Firstly, go to View option and select the Toolbar, Tool Buttons, Status Bar and Navigation Bar items, to view the main elements of the IntelliJ IDEA window.



  2. Then, click the Gradle tab on the right side of the window and click at the blue icon to refresh all Gradle projects.



  3. Click OK to add all files to Mercurial.


8 Run/Debug Configurations

In this section we will configure the run configuration to execute our project.

  1. Click on arrow pointing down and select Edit Configurations:



  2. Then click on + and select Application option.



  3. Here, you have to select on:
    • JRE input the 1.8 Java version.
    • Use classpath of module axional-studio-frontend_main.
    • Main class deister.axional.frontend.boot.FrontendStartUp.
    • Name: Put any name, it is recommend to put the same as Main class i.e. FrontendStartUp.


  4. Click Apply and OK.
  5. Now the green play button will appear to execute the project.

9 Setup config.xml

Before run the project, we have to configure the config.xml file. This file is located in axional-studio-frontend --> conf --> config.xml

Copy the following code and replace it in config.xml content.

Copy 
<?xml version="1.0" encoding="UTF-8"?>
<server name="axional" engine="jetty">
   <encoding info="Server encoding">UTF-8</encoding>
   <license>
       <notice>(C) Copyright 1996, 2018 deister software</notice>
      <url>http://www.mydeister.com</url>
      <customerName>DEMO</customerName>
      <hostid>cccdddf1</hostid>
      <features/>
   </license>
   <stop>
      <port>0</port>
   </stop>
   <http info="Http parameters">
      <realm>Wellcome to Axional</realm>
      <queueSize>-1</queueSize>
      <minThreads>-1</minThreads>
      <maxThreads>-1</maxThreads>
      <connectors>
         <connector>
            <scheme>http</scheme>
            <port>8080</port>
            <securePort>0</securePort>
            <acceptors>-1</acceptors>
            <selectors>-1</selectors>
            <acceptQueueSize>0</acceptQueueSize>
            <idleTimeout>60000</idleTimeout>
            <outputBufferSize>-1</outputBufferSize>
            <requestHeaderSize>-1</requestHeaderSize>
            <responseHeaderSize>-1</responseHeaderSize>
            <keyStorePassword>[changeit]</keyStorePassword>
            <trustStorePassword>[changeit]</trustStorePassword>
         </connector>
      </connectors>
   </http>
   <jdbc>
      <url>jdbc:informix-sqli:192.168.10.13:9088/${DATABASE}:INFORMIXSERVER=ol_dbsrv3;DB_LOCALE=en_us.utf8;CLIENT_LOCALE=en_us.utf8</url>
      <initSQL></initSQL>
      <username>informix</username>
      <password>[changeit]</password>
      <poolMaxSize>5</poolMaxSize>
      <poolExtraSize>0</poolExtraSize>
      <poolMaxIdle>300</poolMaxIdle>
      <poolMaxCheckOut>1000</poolMaxCheckOut>
      <poolAcquireTimeout>0</poolAcquireTimeout>
      <poolBornDieTimeout>0</poolBornDieTimeout>
   </jdbc>
   <console>
      <tcpPort>0</tcpPort>
      <enableWeb>true</enableWeb>
      <enableSwt>false</enableSwt>
      <username>admin</username>
      <password>CRYPT-AES128:ENRrJUsTywgi2BxhcHQSmZMpMEp889SiNZks9g06NF6UVL0Q2jLitgQn6hM8qcuyqJgIevWrr3Rc</password>
   </console>
   <fopConfig>conf/fop/userconfig.xml</fopConfig>
   <application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="frontendConfig">
      <backendSoapUrl>http://web1/soap/servlet/rpcrouter</backendSoapUrl>
      <backendSoapUsername>USERNAME</backendSoapUsername>
      <backendSoapPassword>PASSWORD</backendSoapPassword>
      <backendSoapDatabase>demo_apps_rv</backendSoapDatabase>
   </application>
</server>

In the <backendSoapUsername> tag, you have to replace the USERNAME to your deister user (the same as to login www.mydeister.com).

The same as <backendSoapPassword>, change the PASSWORD to your deister password.


Now, run the project (click on green play button).

Cause you put the password without protection, it will appear a error message in IntelliJ console. So you have to replace your password to the CRYPT-AES128... string, including CRYPT.



Once password encrypted, reRun the project.

Now, it's time to configure our desired menu. In the appConfiguration.xml. we will configure all menu items (Table, Form, PDF, Chart, Map, Cart...). There is a Full Simple App example with one end point menu where shows a lists of rows with the actions to insert, edit or delete row.

Open any browser and write on the navigation bar localhost:8080

In this window, you have to login with your deister user and password.