In this tutorial, you will learn how to create an application to take and display photos.

Content

Getting Started

First you need to install the application Broker Client App, that will serve as a tool to test your code.

Step 1: Creating a Project and Application

If you haven’t already done so, access the Projects section and create a new project by clicking on the ´+´ sign and completing the information shown in Figure 1


Figure 1

Click CREATE and the project is created . You should be seeing the upper navigation bar as shown in Figure 2

 

Click the ‘+’ button to create a new application and complete the information (Figure 3).


Figure 3

Click CREATE and the application is created. Proceed to Step 2.

Step 2: Creating an experience

When you open the application, you will see the code editor in the Model section. The file main.ms has been created for you. It already has an Experience and a Rules Context to help you get started (Figure 4).
The experience represents the interaction with the user. It has an associated visual representation, autogenerated by matr, called Layout.


Figure 4

Let’s add some code to the experience, so that it looks like this:

Experience PhotoExperience {
    String info value("Take a visualize a photo!") as Label
    Decision takePhoto action('MainContext.takePhoto') label('Take Photo')
String image as Image

}

With this code, we are defining the data types included in the model, as well as its corresponding visualization and binding on the associated screen (Layout).

String info value("Take and visualize a photo!") as Label

creates a String attribute,  displayed as a Label component with the inscription “Take a photo!”.

Decision takePhoto action('MainContext.takePhoto') label('Take Photo')

creates a button (without an attribute) that will be displayed as a Button component with the label: “Take Photo”.

action('MainContext.takePhoto')

executes the rule ‘takePhoto’ of the rule context ‘MainContext’, each time the button is clicked.

Finally,

String image as Image

is a String attribute, that will be displayed as an Image component, which will be used to view the photo.

Now, let’s add some code to the RuleContext so it looks like this:

RuleContext MainContext {
Rule takePhoto {
//TODO:

}
}

Now, if you access Build UI, you will be able to see the layout of the experience recently created:

Step 3: Creating a rule

In the same file, main.ms, where we created our experience, we create our first logic block, adding a rule. The rules are supported platforms that group code statements to be executed as reaction to different events. The rules are grouped in  a “Context”.

Modify the RuleContext and the Rule that were created by default:

RuleContext MainContext {
	
	Rule takePhoto {
	  	PhotoExperience exp = broker.ui.getDataSource()
		MediaCameraConfigure mcc = MediaCameraConfigure()
		MediaFile mf = broker.media.open(mcc)
		if (mf != null) {
			exp.image = mf.getURL()
		}
	}

}

In this way, we define the execution logic, within the context MainContext and the rule takePhoto.

We can see that in the first code statemtent within the rule:

PhotoExperience exp = broker.ui.getDataSource()

creates an exp variable to index the instance of the PhotoExperience model. This instance is created by broker.ui.getDataSource() that returns the model bound to the layout that is being viewed (i.e the experience that has the same name).

MediaCameraConfigure mcc = MediaCameraConfigure()

creates an instance of MediaCameraConfigure type to configure the photo camera access to the device. In this case, we use the configuration by default.

MediaFile mf = broker.media.open(mcc)

creates an instance of the data type MediaFile. This data type manages the location and multimedia files. We reference the image obtained by the camera with broker.media.open(mcc) .  As shown in the example, we passed the instance created in the previous line, mcc, as parameter. This action opens the camera to take a photo.
Once the image is obtained:

if (mf != null)

we check if the photo was taken successfully (mf is different from null), because when we give the control to the camera view, the user can cancel the photo capture returning null.

Finally:

exp.image = mf.getURL()

we allocate to the ´image´ attribute the location of the photo in the device through mf.getURL(), allowing us to diplay the image in the layout.

We have our rule ready. We save the changes by clicking the SAVE button and our application is ready to be executed in Broker Client App.

Running the application

Once the application is created, we are ready to execute it using the Broker Client App.

To do this you must follow these steps:

  1. Access the application,
  2. Enter the credentials,
  3. Select our organization
  4. Access our ´My Project´.

And finally, access the  newly created  ‘TakeAPhoto’. By clicking on the DRAFT button, the app is executed.

Once inside the app, we can execute our code by clicking on the ‘Take Photo’ button. This action opens the camera in the device allowing us to take a photo. When we finish the photo capture and click on accept, we can view our image in the layout we have created.

Congratulations! Your first app on Mat|r has been successfully created and executed. You can continue checking the other tutorials and keep on learning.