- Managing Projects
- Data Connection
- Creating an Application View
- Binding Editors to Data
- Creating a Parameterized View
- Configuring Navigation and Device-Specific App Layout
- Setting Up Application Security
- Adding Commands to the Application Toolbar
- How to Layout Views with Stackpanel
Whatever tools you choose, the process of creating a mobile application consists of the same steps. They are: application views design, view navigation planning, views implementation, data binding, testing and deploying.
To build your apps with Xenarius, you need to go through these steps as well.
Xenarius allows you to build the following types of mobile applications.
Business applications including those that support the BYOD concept.
Mobile applications with a UI native to the target platform.
Applications that are developed for functional purposes rather than purely entertainment purposes.
Applications that consist of several views with lists and forms.
Here are some examples of such applications:
Applications for getting services and placing an order
Delivery services (pizza, sushi)
Booking services (accommodations, flight tickets, etc.)
Automation of business processes that include data access from mobile devices.
Applications for realtors, providing access to the current state of available real estate properties.
Applications for taxi companies to organize routes for available cars.
Mobile applications for surveys.
Mobile applications for data input and analysis
A shopping list
Personal finance trackers
The following applications should not be built with Xenarius.
Applications with a complex graphic interface.
Applications dealing with binary data.
At this point, you know the main scenarios of using your resultant application. You are also aware of the tasks it will solve and the actions that will be available in it. Now, you need to decide what views (screens) are required in the application, how to distribute information between them and how end-users will navigate between the views. For this purpose, you will draw an informational application map. It will include the key views of the application, illustrate what information they present and indicate the navigation to other views.
Some views (root views) can be available globally. The other views are not root views - end users can only navigate to them in a specific context.
The root views are typically navigated using the navigation control, and the control’s type depends on the total number of root views:
1 root view
You do not need a navigation control. Instead, choose a default view that will open at application startup and build a sequence of views where an end-user can return to the previous view by using the Back button.
2-5 root views
Use a navigation bar for navigation.
A big count of root views
Use a slide-out menu for navigation.
When deciding on the type of the global navigation, take into account a set of predefined layouts that Xenarius provides. For example, when the Desktop, Navbar, Slideout or Split layout is used, the navigation control will be automatically added; only the content within the view should be changed.
Then you are required to think how to navigate to child views (views other than root views). The main point is that an end-user must be able to understand where he/she is located and how to return to a parent view.
You will need to think about the functionality to be included in your app. Decide what actions you need on each view including the contextual actions that are available when a particular view element is selected. Prioritize the view actions and make sure that system commands are not duplicated.
Xenarius follows the MVVM (Model-View-View Model) pattern. A Model is your application’s stored data (a local storage or remote server) accessed via data providers. A View is an application view. A View Model - an object that prepares data for the View by adding properties, parameters and data sources that receive data from data providers (Models). Therefore, view implementation consists of three main components: View, View Model and Model.
While drawing an application map, you discovered that your views have common elements such as a toolbar or navigation control. This common structure for application screens is called a layout.
Xenarius supplies predefined layouts that allow you to avoid building the same structure for each view. You can set up layouts individually for different devices: a phone, tablet or desktop. For more information, read the Device-Specific Layout help topic.
When a layout is selected, you have to define only the changing content for each view. The changing content will be called view here and everywhere in our documentation.
At first, you need to place all required elements on a view. For this purpose, Xenarius provides an extensive list of UI editors and layouts. You can easily locate them on a view and change their appearance.
Then you will need to bind visual components to data. For more information on this, refer to the Binding Editors to Data help topic.
To navigate between root views, global navigation is used. Xenarius takes care of global navigation - most of the built-in layouts include a control that implements it. You just need to specify views to be accessible from the navigation menu. For detailed information on this, see the Navigation help topic.
To navigate to child views, Xenarius provides a special Navigate to View operation. You can use this operation in handler functions for an editor’s or command’s events.
While an end-user navigates from one view to another, Xenarius keeps history of displayed views. In mobile applications, information on navigated views is saved to navigation stacks.
To provide backwards navigation, the Back button is added automatically or a hardware Back button is activated (on Windows Phone devices). The Back button navigates to a previous view in the current navigation stack.
The Back button does not appear on root views, since a root view is the very beginning of the navigation stack.
When the predefined SlideOut layout is used, root views contain the Menu button on a toolbar. This button shows/hides a global navigation menu. Child views have the Back button in place of the Menu button. To access the global navigation menu, use the “slide” gesture.
For desktop applications, browser history is used by the navigation system instead of building navigation stacks. Each navigated view is added next to the previous view in the navigation history.
Most of the built-in layouts include a toolbar. You can populate it with command buttons. These buttons will provide functionality for performing common operations in a current view. So, you need to define commands for each view individually.
Suppose you want a view to contain the Back and Add buttons. The Back button is created automatically if you use the Navigate to View operations to navigate to the view (see above). To create the Add button, you will need to create a command and set up its options: a text and an icon for the button, a function that must be performed on the button click, the button appearance for different devices.
Refer to the Adding Commands to the Application Toolbar help topic.
A View Model is an object that prepares data for the View. Xenarius allows you to create the View Model visually: add new properties, parameters, and data sources that may get required data from multiple data providers (Models). For more information, read the View Model help topic.
Later you can bind UI editor’s properties to the fields of the View Model. Refer to the How to Set up Binding help topic.
A Model is a data provider that represents data or receives data from a storage (local storage or remote server). For more information on how to create a data provider, read the Data Connection help topic.
When developing mobile applications, you have to run them on different devices to see how they look and function. Applications created with Xenarius can be viewed on any device by using the Xenarius Simulator.
To run the simulator, click the Run button on the main toolbar.
Use the following capabilities of the simulator to test your application.
- Choose a device
- Choose between the Portrait or Landscape orientation
- Scan the QRCode by a device on which you are going to test the application. As a result, the application will be run in the device’s browser.
Applications created with Xenarius can be deployed to any device after being packed as a mobile application.
To build a package for your application, do the following.
Click the Deploy button on the Xenarius toolbar to download your project content as a ZIP archive.
Follow the instructions provided by PhoneGap Build to get a native package for your application.