Arithmetic Operations In Graphite Studio

Ishika Tiwari
May 29, 2022

2.3k
0
6
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Introduction

In this article, we will create a calculator using Graphite Studio. Which is a simple online application that allows the user to calculate simple arithmetic operations on entering the first number and the second number.

To know how to install Graphite Studio click here. or you can follow the official website of Graphite Studio https://graphitegtc.com/

Now create a new Web Application Project by following the below steps.

Add behavior to the entity
Produce a View
On the View, create a Controller Behavior.
Build an environment
Construct the Project

How to create a Simple Calculator

This is our project which we are going to make is in this article

Step 1

The Home screen appears when you launch Graphite Studio for the first time. You can start a new project by clicking on New button as shown in figure-1

HomeScreen of GRAPHITE studio
Figure-1

Step 2

Choose a web application in project type then enter Group Name in Enter Details section, in my case I entered MCNSolutionsPtLtd as group name. Now enter Project Name, in this demonstration.

I entered SimpleCalculator and then Select Local Application Project as the project's location from drop-down list. Choose Libraries from Library Store gives you a list of all the libraries that are available on your machine. The only library necessary for our SimpleCalculator project is GraphiteGTC.Core. All Graphite Studio Projects will require this base library, which must be selected. Now click the ok button

Figure-2

Step 3

All entities in the GraphiteGTC.Core library are necessary for Graphite Studio to function properly. This screen does not require any operations. Now click OK to move on to the next screen.

Figure -3

Step 4

By choosing the Add Category option, you may add categories to your project. The dialogue box below will appear as shown in figure-5

Figure -4

The content of every Graphite Studio Project is organized into categories. The GraphiteGTC.Core library material is found under the Common Category. Now click OK to create a new Category called Calculation.

Figure-5

Step 5

In the Project Home Screen, a new Category named Calculation has been added as shown in figure-6. Any Category can be selected and its properties are displayed on the right side of the Project Home Screen. The category content section allows you to see, add, delete, and edit all of the Category's content.

In a Use Case, an entity is a noun. It is equivalent to a class as we learned in object-oriented programming languages. Among other things, An Entity has properties and/or Behaviors. Using the Add/Edit link in the Category Content Section, an Entity can be added to a Category. To access the Add Entity dialogue, click the Add Entity link.

Figure-6

Enter Calculator as the Entity's name field as shown in figure-7 then click OK to return to the Calculator Entity Screen. To save the details of the Entity, go to the Calculator Entity Screen and click the Save button (upper right corner). You will not be adding any properties to the Calculator Entity in this project. Simply add four behaviors to calculate the Add, Divide, Multiple, and Subtraction for given two numbers.

Figure-7

Step 6

In a Use Case, a Behavior is a verb. In object-oriented programming, it's the equivalent of a method. A Behavior of an Entity in Graphite Studio comprises the business logic required by the Entity. The Behaviors tab of the Entity Screen lists all Entity's behaviors. To add the Behavior that will calculate the Arithmetic operation, click the Add Behavior option.

Figure-8

The Inputs and Outputs are set using the Start shape. The user can add one variable, either Input or Output, by clicking the Add link. Variables can be declared as Input/Output in various instances. This simply means that, despite being received as an Input, the variable is returned as an Output. Select Enter Behavior Name and type Add as the behavior's name. The following box appears when you double-click on the Start shape.

Figure-9

A type must be used to define variables. Currency, Date, Decimal, Integer and Sequence are some of the global base types provided by Graphite Studio. All Entities, like other OOP languages, are also available as types. Variables can be declared as a single instance or as a list, and they can be used in any order. Can be specified as mandatory or optional

Figure-10

In the Start shape, enter the following variables.

Figure-11

Figure-12

Figure-13

A shape can be linked to its siblings using a drag-and-drop technique, where the shapes are dragged from the left-hand rail, or by holding over the shape and clicking the Plus or Dot icon that appears. The Plus icon is used to create and link additional shapes to the existing ones. context of shape The Dot icon is used to connect two forms in a Behavior that already exists.

Step 7

Figure-14

A palette of various forms appears when you click the Plus icon. As shown in the picture, click the Decision shape from the list of available forms to add it to the existing Start shape.

Figure-15

The user can enter the details of the "If" condition needed for the Add Behavior by double-clicking the Decision shape.

Figure-16

If FirstNumber is Equal to Zero, is the If condition for the sample project. Enter the input variable FirstNumber in the field above the operator shapes in the Decision shape to accomplish this. Then press the = key. Then, below the operator's shapes, type 0 in the field.

The Decision shape allows the user to add two shapes: one for logic when the condition is true and another for logic when the condition is false. The true condition will be represented by the word Yes above the connecting line in the first shape added to the Decision form. The false condition is indicated by the word No over the connecting line in the next form.

Figure-17

As shown below, add an Assignment shape for the Decision shape's true condition and set the output Result to SecondNumber.

Figure-18

To calculate the Result, add an Evaluate shape for the false condition of the Decision shape, as shown in Figure below.

Figure-19

Add an End shape. Then drag and attach the last Evaluate shape to the End shape using the connector icon.

Figure-20

The completed Add Behavior is shown in the figure below.

Figure-21

The above demo I showed only for addition behavior, same way you can follow for subtraction, multiplication and division behavior

Step -8

The Add/Edit option in the Category Content Section can be used to add a View to a Category. To get to the new View Screen, click the Add View option.

The user interface part of a Web Application Project is built using a View in Graphite Studio. The View is the view component of the Model-View-Controller design that the Project generates for the application.

Figure-22

Enter the name of the View as arithmetical. Below the Preview Section is the Properties Section of the View. Set the Title to Calculator and set the Is Default View yes

Header, Region, Content, and Footer are the four sections of each View. A View is a hierarchically organized collection of View Element objects. Rules set up at the development of each View Element in its associated library control the hierarchy of View Element.

Figure-23

In the popup that displays when a palette's "+" (Add View Element) button is clicked, only the View Elements that can be drawn in the palette are shown. To add the ToolbarPanel to the Header palette, click it. In the Preview Section, you may see a sample of the View with the Toolbar Panel (see figure below). To save the View, click the Save icon. You may also save by using CTRL+S on your keyboard.

Figure-24

Every instance of a View Element that is placed in a View has a set of characteristics that aid in the display or operation of the View. There are various properties on the Toolbar Panel View Element. Set the Title attribute to calculator for this project. The Toolbar Panel is updated with the title from the Preview Section once more.

Figure-25

The next step is to add a Form and its Fields to the Content palette, as seen below. The steps to create the Form in the View are listed in the table below.

Figure-26

Figure-27

Figure-28

Step	Action
1	Create a Form (Form1) Add a View Element to the Content palette by clicking the Add View Element button.
2	Using the Add View Element button to the right of the Form1 View Element, add a FieldSet (FieldSet1) View Element to the instance of the Form View Element.
3	Add a second FieldSet (FieldSet2) View Element to the Form View Element's instance.
4	Using the Add View Element button to the right of the FieldSet1Fields, add a NumericField (NumericField1) View Element to the Fields list of FieldSet1.
5	Using the Add View Element button to the right of the FieldSet2Fields, add a NumericField (NumericField2) View Element to the Fields list of FieldSet2.

Follow these steps to finalize the View by adding the rest of the View Elements to the Content:

In the Content palette, create a ButtonPanel (ButtonPanel1).
Add a Button to ButtonPanel1's Buttons list (Button1, Button 2, Button 3, Button 4).
Below the ButtonPanel1, add a heading (Heading1) to the Content palette.
Below the Heading1, add a HtmlText (HtmlText1) to the Content palette.

Figure-29

The next step is to configure the properties of all the View Elements that have been added to the View, as shown in the table below.

S.No.	View Element	Properties
1	NumericField1	Name-TextField1 FocusIndex-1 Label-FirstNumber Placeholder-EnterFirstNumber
2	NumericField2	Name-TextField2 FocusIndex-2 Label-SecondNumber Placeholder-EnterSecondNumber
3	Button1	Name-Button1 Form to Submit-Form1 FocusIndex-3 Title-Add
4	Button2	Name-Button2 Form to Submit-Form1 FocusIndex-3 Title-Subtraction
5	Button 3	Name-Button3 Form to Submit-Form1 FocusIndex-3 Title-Divide
6	Button4	Name-Button4 Form to Submit-Form1 FocusIndex-3 Title-Multiple
7	Heading 1	Name-Heading1 Importance-2 Text- Result
8	HtmlText1	Name-HtmlText1 Mask-Numeric-Limit Decimals

Some automatically produced variables are also included in the Start form of the OnClickButton1. two input variables are set up in Graphite Studio using the information from the Button1 Properties Section. The variables that Graphite Studio automatically generated can be seen in the diagram below.

Figure-30

The Run Behavior form is used to call a Behavior from within another Behavior. To create a list of Ui Actions, add the Run Behavior shape to the Create list of Ui Actions shape. The features of the Run Behavior shape are shown in the diagram below.

Figure-31

Any View Controller Behavior (excluding the OnLoadView Behavior) uses the Ui Action shape to update the View. To allow the user to adjust the current View, the Ui Action shape gives a range of Instructions based on a selected Element. When the context is in a modal View, it also allows the parent View to be updated. Add the Ui Action shape to the Run Behaviorshape to update the HtmlText View Element with the Result output from the Calculation Behavior. The details of the Ui Action required are shown in the diagram below. Leave the Context at Current because the View being modified is already in context. Static should be left alone. An Ui Action's instructions are based on a View Element that has been selected. In the Element area, select HtmlText1.

Select Update the Text of the HtmlText in the Instruction area. This will display a new Text field that will be used to update the value of the htmlText View Element. Enter the variable containing the value of the Result determined in the Calculation Behavior in the Text box. The output can be obtained using the following description, as previously stated

CalculatormultipleResult.Outputs.Result

Figure-32

To finish the Behavior, add the End shape. The diagram below depicts the entire process. Actions of the View Controller. Similarly we have to make ClickON for button 2,button3 and button4.

Step 9

This warning is coming now it fixes it.

Figure-33

The TextField1 and TextField2 are declared as a Text that is not required in the Start shape and the Run Calculator in the Add, Subtraction, Multiple, and Divide shape. We also know that depending on the mask you've set up, we'll only allow users to enter an integer in TextField1 and TextField2. To alter the TextField1 and TextField2 variables in the Start shape, click the Pencil icon next to them and change their type to Integer. Check to see whether it's set to not necessary.

Figure-34

Step 10

Everything you'll need to make the sample calculator The project is now finished. In the parts that follow, you'll set up a web application environment and develop the application.The details required for the deployment of the created web application are referred to as an Environment in Graphite Studio. Graphite Studio allows you to build multiple deployment environments for your application. These settings can be labelled as Public or Private.
In Graphite Studio, the Environment Screen can be accessed via the Side Bar menu. As seen in the diagram below, the Side Bar menu can be accessed.

Environments is one of the menu items in the Side Bar. To get to the Environments Screen, click it.

Figure-35

Click the Add Environment link on the Environments Screen. As illustrated in the image below, the Add Environment box displays on the screen. The final step is to develop the project as indicated below once the environment has been set up.

Figure-36

Step 11

To begin the construction process, press the Build button.

Figure-37

Graphite Studio offers the user with a URL link to the web application that was built after a successful build. The link opens the default browser and takes you to the Web Application Project's Default View.

Figure-38