Building Cross-Platform Apps Quickly with Altova MobileTogether Designer

Getting Started with Altova MobileTogether Designer: A Beginner’s GuideAltova MobileTogether Designer is a visual development environment for building cross-platform mobile apps without deep native coding. This guide walks you through the essentials — installation, project structure, designing interfaces, adding logic and data, testing, and packaging — so you can create your first mobile app quickly and confidently.

What is MobileTogether Designer?

Altova MobileTogether Designer is a low-code/visual IDE that lets you design and deploy mobile apps for iOS, Android, Windows, and web browsers. It separates the UI, business logic, and data layers and uses a drag‑and‑drop interface, XML-based data handling, and a visual rules engine to implement behavior. Apps built in Designer run on the MobileTogether Mobile App (client) and are served by the MobileTogether Server (optional for advanced scenarios).

Why choose MobileTogether?

Rapid development: Visual design and prebuilt controls speed up prototyping and production.
Cross-platform: One project runs on multiple operating systems and device types.
Data-first approach: Strong support for XML, JSON, databases, REST services, and XPath/XQuery expressions.
Scalable deployment: Works for single-user mobile apps up to enterprise deployments with MobileTogether Server.

System requirements and installation

Download MobileTogether Designer for your OS from Altova’s website.
Install the Designer (Windows installer or appropriate package). Designer runs on Windows; the MobileTogether mobile client is available for iOS/Android/Windows devices.
Optionally install MobileTogether Server if you need centralized app distribution, scheduling, or secure backend connectivity. For basic development and testing, the Designer plus the MobileTogether app on a device is sufficient.

Project structure overview

A typical MobileTogether project contains:

Pages: Visual screens for the app UI.
Controls: Buttons, Edit fields, Tables, Charts, Maps, Repeaters, etc.
Variables: Global and page-level variables for storing state.
Resources: Images, style sheets, and other assets.
Data Sources: XML documents, JSON, SQL database connections, and web services.
Actions (Rules): Event-driven logic that performs calculations, navigation, data retrieval, updates, and conditional formatting.

Creating your first project

Start Designer and choose “New Project.”
Select a template or start from a blank project. Templates are helpful to learn common patterns (forms, lists, dashboards).
Name the project and set target platforms. Designer will create a default home page.

Designing the user interface

Drag controls from the control toolbox onto a Page. Common controls: Label, Edit, Button, Table, Repeater, Image, Map, and Container.
Use Containers and Tabs to organize layout for different screen sizes. Set control properties (margins, alignment, fonts) in the Properties pane.
Use styles and CSS-like rules to keep a consistent look. You can define style resources and apply them across pages.
Preview the layout for multiple device sizes using Designer’s device previews to ensure responsive behavior.

Tip: Use Repeaters for lists bound to data sources; they render efficiently and are ideal for master/detail patterns.

Adding data sources

MobileTogether supports multiple data source types:

Embedded XML/JSON files for static content.
REST/HTTP services for dynamic web data (JSON or XML).
SQL databases via ODBC or direct connectors for enterprise backends.
Local device storage for offline-enabled apps.

To add a data source: Project → Add Data Source → choose type → configure endpoint or file. After adding, bind controls (e.g., table rows or labels) to XPath or JSON paths from that data source.

Binding controls to data

Select a control, open its Binding property, and point it at a node or path in your data source.
Use XPath or JSON path expressions to extract values. Designer provides auto-completion and a data browser to pick nodes.
For editable forms, bind Edit controls to data nodes and add Save actions to persist changes back to the server or local storage.

Example: Bind a Label to /employees/employee[1]/name to show the first employee’s name.

Implementing app logic with rules and actions

MobileTogether uses a visual rules editor for logic:

Actions: Navigate, Set Variable, Execute SQL, Call Web Service, Show Modal, Push Notification, etc.
Conditions: Wrap actions in IF/ELSE branches to run them conditionally.
Event triggers: Attach rules to control events like OnClick, OnLoad, OnChange, and PageVisible.

Common patterns:

On Button click: validate inputs → call web service → update UI with results.
On Page load: fetch list data from REST service and populate a Repeater.
On Item tap in a list: set a variable with the item ID → navigate to detail page and load item-specific data.

Working with expressions

Expressions use XPath-like syntax and built-in functions for string handling, date/time, numeric math, lists, and type conversions. Designer supplies an expression builder that tests expressions against sample data.

Example expressions:

concat(firstName, ‘ ‘, lastName)
count(/orders/order[status=‘open’])
format-date(current-date(), ‘YYYY-MM-DD’)

Testing and debugging

Local preview in Designer: fast iteration to test layout and basic behavior.
MobileTogether mobile client: install the MobileTogether app on a device and open the project via Designer’s “Open on Device” feature or by scanning a QR code. This tests native behavior, gestures, and device APIs (camera, GPS, storage).
Debugging tools: Use message boxes, write logs to a debug pane, and inspect variable values at runtime. For service calls, inspect HTTP request/response details.

Offline and synchronization considerations

Use local data stores to cache records for offline use.
Implement sync logic: queue outbound changes locally and synchronize when network is available.
Handle conflict resolution either automatically (timestamp-based) or with user prompts.

Security and authentication

For secure services, configure HTTPS endpoints and authentication (Basic, OAuth, API keys).
Use MobileTogether Server for centralized authentication, user management, and secure deployment.
Avoid embedding sensitive credentials directly in the client; use server-side proxies or token exchange where possible.

Packaging and deployment

For simple use, distribute a .mtd (MobileTogether) package that can be opened by the MobileTogether app on devices. Designer can produce QR codes or short links.
For enterprise-grade deployment with management, use MobileTogether Server to host apps, handle user access, scheduling, and push updates.
Because apps run inside the MobileTogether client, there’s no separate app store packaging required unless you need a standalone native app shell; Altova documents options for embedding the runtime if needed.

Performance tips

Minimize large, synchronous data fetches on page load; use pagination or incremental loading.
Use Repeaters with small item templates and virtual scrolling where available.
Cache static resources and reuse data sources across pages to avoid unnecessary network calls.
Optimize XPath expressions and avoid overly complex queries executed frequently.

Learning resources and next steps

Explore sample projects and templates shipped with Designer to learn common patterns.
Practice building: a simple contact list app, a task manager with offline sync, and a dashboard that consumes a REST API are good starter projects.
Learn expression syntax and the built-in functions to make more powerful logic.
When ready, set up MobileTogether Server for centralized deployment and authentication.

Example quick walkthrough: Simple contact list app

New Project → Blank.
Add embedded XML data source contacts.xml with multiple contact elements.
Add a Page and a Repeater bound to /contacts/contact. Inside the Repeater, place a Label bound to name and a secondary Label bound to phone.
Add a Button “Add Contact” that opens a modal page with Edit controls bound to a temporary XML node. On Save, append the new node to the contacts data and refresh the Repeater.
Preview in Designer and on device.

Conclusion

Altova MobileTogether Designer offers a visual, data-centric way to build cross-platform mobile apps quickly. Start with small projects to learn controls, data binding, and rules; use Designer’s device preview and the MobileTogether client for testing; and move to MobileTogether Server for enterprise deployment. With practice, you can leverage its strengths—XML/JSON handling, visual logic, and cross-platform runtime—to deliver robust mobile workflows without deep native programming.