INTRO TO THE ENVIRONMENT
This tutorial shows how to make a simple app. The app allows us to calculate the profit by subtracting expenses from revenues. Before we start with a walkthrough, let’s take a short look at the home page of App Builder IDE (integrated development environment). Click on the image below to enlarge it.
CREATE WEB PAGE VIEW
From the Web Pages section - click on the Add Page button. Name a new page Profit calculator.
In depth section below provides a more detailed explanation for professional developers who are familiarizing themselves with App Builder and are interested in a better overview of its inner workings. If you are an amateur or just want to create your first app fast, there is still no harm at all in your reading it. However, it is optional and you do not have to plunge into details. It is possible to create sophisticated apps without knowing what happens under the hood. If the text below sounds complex, please feel free to skip it and move to the next step.
In depth: after click on Create button App Builder makes the following:
- Creates a data type (Java class) with the suggested name (Profit calculator in our case).
- Takes a notice about the need to create a database table to hold type data. The actual table will be created when the app is published.
- Creates a new web page view for the data type and takes you to editing it.
WEB PAGE EDITOR
We are transferred to a web page editor. Please enlarge the screenshot below to learn about its parts.
Please notice that the Components panel is automatically replaced with the Properties panel whenever you select anything in the working area.
You shift the panels by clicking on the Components / Properties switch at the panel top.
ADD NEW ROW
Hover near the middle of the Group Box Object and then select a three column row. A new row 4-4-4 columns will be added.
Move the top row into the first column of the second row by clicking on the blue anchor on the left and dragging it inside of the column. Enlarge the screenshot below to view the demo.
ADD MORE ROWS
Another way to add a row within a column is to hover over the column and to click onto the plus button appearing at column’s top left corner.
Add 3 more rows to the first column in this way.
ADD NUMBER FIELD
From the Components panel ->
ADD NEW FIELD, drag in a Number -> Decimal, and drop it into the Working Area. Name it Total revenue.
Total revenue appears in the working area as an input field.
In depth: after we’ve named the field App Builder made the following:
- Added a new member (a field of type Decimal (2)) to Profit calculator data type.
- Took notice about the need to change the database scheme so as to add a column to database table holding Profit calculator type data.
ADD MORE FIELDS
From the Components -> ADD NEW FIELD, drag in Decimal, and drop it into the Working Area as we did before. Name it Total expenses.
Repeat the steps again. Name a new field Profit.
CHANGE FIELD PROPERTIES
In the Working Area click on Profit field. The Properties panel should appear.
Mark General -> Disabled checkbox.
Set Advanced -> Read only mode view: Disabled input.
The user will no longer be able to type into the Profit field but you will set its value in the Code Blocks.
Click on the Profit field. In
Advanced -> Comment click on the Open editor button.
To add a comment text, just type or copy and paste the text, for example:
“Profit is calculated by deducting direct costs, such as materials and labour and indirect costs (also known as overheads) from sales.”
Close the text editor.
After that you should see a blue ? sign, that will contain our comment.
PREVIEW YOUR WORK
Click on the Preview button to switch the editor in the preview mode.
Hover the mouse over the comment icon ? to view the comment. While page preview looks realistic it can not be used to enter and save data - you have to Publish and Open your app to do that. Press Esc key to leave preview and return to editing mode.
From the Components panel -> LAYOUT, drag in a Button, and drop it into the row.
In the Working Area, click on the Name button. The Properties panel will appear.
In GENERAL, set Title to Calculate.
Open properties of the Calculate button. In ACTIONS create a new Before server action. Name it Get Net Income and click on Create. Save page and redirect to the block.
In depth: you can execute up to three actions (pieces of code) on a single button click in a listed order.
- If Server action is specified, object state is packed, transferred to server and code is executed there. The action can use Java and its libraries and make database queries. Object state is packed and sent back to the browser.
- After server action is run in the browser after the Server action.
If a prior action throws an error (exception), subsequent actions are not executed.
INTRO TO CODE BLOCK EDITOR
Before creating your first code block in Codejig App Builder, please take a quick look at the elements of the Code block editor.
You can get all important data from the Data panel. Open it by clicking on the Show all at the top right corner of the Working area.
Unfold the item and drag and drop the item.Profit variable across the green line into your function body. That is how you can create a setter.
ADD ARITHMETIC BLOCK
Drag and drop arithmetic operations block from the Number block section.
Set it’s value to minus:
Now all you need is to get several variables.
To do that, from the item drag item.Total expenses across the grey line. In such a way a new getter can be created.
If you change the value in the search box you get the corresponding result.
Delete the Total revenue text to go back to the item. variable.
The other way to get a variable, is to use the Get button from the Data Panel.
Select the item.Total expenses and click on the Get button.
Connect the puzzles all together to get the final result.
On the top right corner click on the Save button.
Now you are ready to test your first Codejig App!
TEST YOUR APP!
Publish your application by clicking on the Publish button on the Header bar.
You have to wait about half a minute until the first publish is completed. Once ready, you’ll see the modal box suggesting to open your app. Another way to do it is by clicking the Open button on the Header bar. Test out your first Codejig App!
In depth: what happens during the publishing process? There are a few steps involved:
- Build - the code and metadata are incrementally compiled into an executable web application.
- Deploy - app container is stopped and restarted with a new version of executable. This process is called deployment. When the application starts it synchronizes app database structure with changes made by the developer.
If the application is running in a development container (default development mode), changes to web pages and client-side code are automatically pushed to the application and do not require explicit Publishing. If changes are made to server-side code or type structure - the project has to be published again to take effect on the running app. This state is indicated by the Publish button changing color from dark-gray to orange.
OPEN THE APP
After the application has been published, you will see the modal window. Click yes to open the app.
The app will open in a new browser tab. It should look like on the screenshot below.
You may want to enable the display of Edit in App Builder button. To do it, open App settings, tick checkbox Show “Edit in App Builder” link and publish the app again.
This tutorial is over. Please feel free to experiment with the app by adding more functionality to it or just move to another tutorial.