How to create simple UbiqMobile application

Let’s create our first UbiqMobile application. Let it be a screen with a numeric counter in the center and two buttons below – for increasing and decreasing the counter.

First of all, let’s create UbiqMobile solution. We can use one of several preinstalled templates and samples contained in the plug-in. For our purpose, we need Standalone Application template. Create the solution via the usual procedure: New Project -> Templates -> UbiqMobile -> Standalone App Template:

fig1

When the new solution is created, the window of architectural component designer opens on the screen. This window allows to view and edit graphical architectural diagrams of applications. The diagrams consist of components and connections between them. The architectural designer supports several types of available components:

  • Applications that serve mobile users’ sessions. Applications of this kind are similar to the typical UI-based mobile applications
  • Permanently existing applications (services) that don’t correspond to user sessions and have no UI
  • Standard library components of different types (such as persistent data access, authentication, etc)

In addition, two types of ports (input and output) and line connectors are available for setting up interfaces between the components.

In our case, we have a single predefined component of Application type on our diagram that represents our application.

fig2

Now we can build our solution (by pressing “Start” button or choosing “Build” menu item in Microsoft Visual Studio). As a result, a new C# project (named “Application0”) with initial templates for C# sources is automatically generated:

fig3

It’s time to create UI for our application. The automatically generated project already contains blank UI design in UbiqDesign.ubiqmlfile. Double-click on it to open the visual UI designer.

The screen of visual UI designer consists of several panes: Application UI screen view pane (1), Application UI textual view pane (2), Control pane (3), Toolbox (4) that is actually a standard Visual Studio toolbox containing set of templates of supported UI controls, and Properties pane (5) where properties of the selected UI control are displayed.

Application UI screen view pane represents layout of the simulated mobile device screen with UI controls on it. This pane supports Drag-and-Drop so UI controls can be dragged and moved within the screen as well as taken from the toolbox pane.

Application UI textual view pane contains xml-based text of special format describing control tree (.ubiqml representation). This representation contains information about controls tree structure with a full set of specified properties of each node. All changes in UI layout and controls’ properties cause synchronous changes in .ubiqml representation.

Control pane contains two important settings of the simulated screen – zoom level and size in pixels.

Toolbox pane contains basic set of UI controls that may be used in the developed interface. It is possible to drag them from the toolbox and then drop onto the simulated UI screen.

Properties pane displays all available properties of the selected UI control. Values of properties displayed in this pane are editable – all changes appear in visual UI design pane immediately.

fig4

Let’s put our elements from the toolbox onto the simulated screen. The first element is “TextLabel in cell”. By default, it will be placed in the center of the available area (that is actually the whole screen at the moment).

Then we need to provide space for two buttons. Drag “StackPanel” control and drop it on the bottom area of the simulated screen. Now we have the screen split into two areas – one is for the text label and the other is for stack panel where we’ll place our buttons.

fig5

By default, the stack panel is vertically oriented. It’s easy to change – just set “Orientation” property value to Horizontal in Properties pane.

Now we can add buttons. Just drag and drop two elements of “Button in cell” type onto stack panel – the first one at any place of the stack panel, the second time – in the right area. Finally, we have our UI structure, containing text label and two buttons.

fig6

Let’s “tune” format and initial text on the controls. First of all, change Text property of the text field from TextField to 0. To access properties of the text field, just select it by clicking on it. In Properties pane the appropriate properties will appear.

In addition, make its font larger and change font color to red (properties: FontSize and Foreground). For buttons we may change default title text “Button” to “ + “ and “ – “ correspondingly. Finally, our UI looks like as follows:

fig7

It’s time to write our source code. Switch to “UbiqMobileDiagram.ubiq” window and double-click on Application diagram element. We’ll automatically switched to auto-generated source for this component:

fig8

Now we add the necessary C# code. Just insert the definition of integer counter member into the class description, and include variables definitions for our three controls into the UserSection () method. Everything is ready now to write a code for handling press events for both buttons.

fig9

And that’s all! Now we can run our application in debug mode. Just press “Debug” button. The emulator of mobile client will be launched with our application running on it:

fig10

When pressing “+” and “-“ buttons you can see how the counter is increasing and decreasing.

You can debug this program as you usually do in C# projects by setting breakpoints and debugging it step-by-step. However, for such a simple program breakpoints are not actually needed.

Now we’ve finished first part of creation of our simple UbiqMobile app.

The second part “How to run your app on a real mobile device” is coming soon.

Leave a Reply

Your email address will not be published. Required fields are marked *