https://www.clowiz.com


Clowiz Platform Tutorials

This section includes tutorials that can be followed in under 10 minutes. It consists of CodeGen, FeatureGen, and AppGen tutorials.

If you need help at any time, click on the Page Help link on the top right of the page, or on the User Guide link to access the full documentation of Clowiz platform.
It is highly recommended that you Login to the platform to have your work saved, otherwise, everything will be discarded once you leave any view. GUEST Mode is intended for evaluation purposes only.

1. CodeGen Tutorial

In this tutorial, we are going to generate the following artifacts without writing code:

  • Java JPA/Hibernate entity with Lombok.

  • Full HTML Page.

  • MySQL Create Table.

Lombok is a compilation processor that generates setters and getter for Java classes at compile time.

1.1. Java JPA/Hibernate Entity

The following steps will generate a full JPA entity with Lombok support:
  • Navigate to CodeGen app at https://www.clowiz.com/code-generator/.

  • In the Metadata section on the left side, create/modify the following metadata:

    • change the Class Name value to Employee.

    • Add a new field with name Number and data type Integer.

    • Add a new field with name Name and data type Text.

    • Add a new field with name Email and data type Email.

    • Add a new field with name Salary and data type Double.

  • Choose JPA with Lombok exporter from the Exporters' section.

The components of CodeGen is shown in Figure 1.

codegen desc
Figure 1. CodeGen App Page

After following the above steps, the exporter will generate the following Java source code:

The Generated JPA code for the Employee entity
package com.app.models;

import lombok.Data;
import javax.persistence.*;
@Entity
@Table(name="employee")
@Data
public class Employee{

  @Id
  @Column(name="id")
  @GeneratedValue(strategy = GenerationType.IDENTITY)
  Integer id;

  @Column(name="number" )
  Integer number;

  @Column(name="name" )
  String name;

  @Column(name="email" )
  String email;

  @Column(name="salary" )
  Double salary;

}

1.2. HTML Full Page with Bootstrap

If you already followed the steps in Section 1.1, all what you need is just to select the exporter by:

  • Select HTML technology from the technologies section.

  • Select HTML Full Page with Bootstrap Exporter.

After following the above steps, the exporter will generate the following HTML source code:

The Generated HTML code for the Employee page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Clowiz Page</title>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.3/simplex/bootstrap.min.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
</head>

<body>
        <form method="post" action="" id="frmClowiz Code" />
        <div class="Clowiz Code  card" style="width: 500px; margin: auto;">
                <div class="card-header">Clowiz Code Form</div>
                <div class="card-body">
                        <input type="hidden" name="id" />
                        <span class="form-group">
                                <label for="number">number</label> <input type="number" name="number" id="number" class="form-control " />
                        </span>
                        <span class="form-group">
                                <label for="name">name</label> <input type="text" name="name" id="name" class="form-control " />
                        </span>
                        <span class="form-group">
                                <label for="email">email</label> <input type="email" name="email" id="email" class="form-control " />
                        </span>
                        <span class="form-group">
                                <label for="salary">salary</label> <input type="number" name="salary" id="salary" class="form-control " />
                        </span>
                </div>
                <div class="card-footer">
                        <input type="submit" value="submit" />
                </div>
        </div>
        </form>

        <table id="table_id" class="table table-striped table-hover">
                <thead class="thead-dark">
                        <tr>
                                <th scope="#"></th>
                                <th scope="row">number</th>
                                <th scope="row">name</th>
                                <th scope="row">email</th>
                                <th scope="row">salary</th>
                        </tr>
                </thead>
                <tbody>
                        <tr>
                                <th scope="row">1</th>
                                <td>number value</td>
                                <td>name value</td>
                                <td>email value</td>
                                <td>salary value</td>
                        </tr>
                </tbody>
        </table>


        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" type="text/javascript" charset="utf8"></script>
</body>
</html>

1.3. MySQL Structure Script

If you already followed the steps in Section 1.1, all that you need is to select the exporter by:

  • Select SQL technology from the technologies section.

  • Select MySQL SQL Structure Exporter.

After following the above steps, the exporter will generate the following SQL source code:

The Generated SQL Structure code for the Employee table
create table `employee`(
`id` integer not null auto_increment,
`number` integer,
`name` varchar(250),
`email` varchar(250),
`salary` double precision,
primary key (id)
);

2. FeatureGen Tutorial

In this section, we are going to create an end-to-end code using FeatureGen app of Clowiz platform.

The following steps will generate a full code for managing an Employee page:
  • Navigate to FeatureGen app at https://www.clowiz.com/feature-generator/.

  • In the Metadata section on the left side, create/modify the following metadata:

    • change the Page Name value to Employee.

    • Add a new field with name Number and data type Integer.

    • Add a new field with name Name and data type Text.

    • Add a new field with name Email and data type Email.

    • Add a new field with name Salary and data type Double.

  • Choose JPA with Lombok exporter from the Exporters' section.

Figure 2 shows the generated preview, MVC code, and the database script for the Employee page.

featuregen
Figure 2. FeatureGen App Page

3. AppGen Tutorial

In this section, we are going to create an end-to-end Java web based application using Clowiz AppGen. The example in this section will be a simple Human Resources Management System (HRMS).

3.1. Create New Application

To create a new application:

If the user works in Guest Mode, any applications created by the user will be discarded when the user navigates to other views. The shown applications list are the application that marked as Public by other users.

As shown in Figure 3, this will a create a new application named Application X where X represents the number of applications that were created so far by this user.

appgen demo
Figure 3. AppGen Page

3.2. Design Application

To design the application, click on the Design action next to the application you just created, this will take you to the App Designer page of AppGen. Figure 4 shows the main sections of this page.

appgen app designer demo
Figure 4. AppGen Page Designer
To design the application’s main artifacts:
  • Change the application name to Demo-HRMS.

  • Create two pages-group (menus):

    • HR Config.

    • Employee Management.

  • Create two pages in the HR Config menu :

    • Job Title.

    • Department.

  • Create one page in the Employees Management:

    • Employee.

3.3. Design Pages

Design the pages Job Title, Department, and Employee as shown in Figure 5, Figure 6, and Figure 7 respectively.

As shown in Figure 7 and Figure 8, the advanced metadata details that are required to set the relation between the Employee page and Department, and Job Title.

appgen page designer demo2
Figure 5. Job Title Page Design
appgen page designer demo3
Figure 6. Department Page Design
appgen page designer demo4
Figure 7. Employee Page Design
appgen page designer demo5
Figure 8. Employee Page Design With Advanced Metadata
To have your work saved, be sure to click on Save and Back button in the action area; otherwise, your work will be discarded.

3.4. Preview Application

After finishing the design of the application in the App Designer view, click on Save and Back button.

To have a full Prototype in the App Manager view, click on Preview, this will show a full prototype for the application, which includes:

  • The Home Page.

  • The Menu Bar

  • The Menu Items.

  • Prototypes for all the pages.

The preview is intended for demo and testing purposes only, it a NON-functional prototype. To have a fully functional system, download the full source code as discussed in the next section.

3.5. Download Source Code

To download a fully functional source code, back to the App Manager view, and click on Source Code action next to your project. This will download a compressed zip file. The compressed file consists of a fully configured Maven project that can be imported using your favorite Java IDE. The generated artifacts can be shown in Figure 9.

maven
Figure 9. Downloaded Maven Project

3.6. Launch the Application

To launch the application, run the Main class marked in yellow in Figure 9. The generated pages can be shown in Figure 10, Figure 11, Figure 12, and Figure 13.

demo final1
Figure 10. Demo Home Page
demo final2
Figure 11. Job Titles Management
demo final3
Figure 12. Departments Management
demo final4
Figure 13. Employees Management