WaveMaker Learn

WaveMaker Learn

  • Docs
  • Widgets
  • How-to
  • Releases
  • Login
  • Start free trial

›Mobile Design

Getting started

  • Introduction
  • Walkthrough

App design

  • UI Overview
  • Create Pages
  • Designing Pages
  • Widgets Composition
  • Page Configure

    • Page Layout
    • Page Artefacts
    • Partial Page
    • Page Parameters
    • Navigation
    • Events
    • Examples

    Apply Styles

    • Themes
    • Templates

Backend

  • Backend Services
  • Introduction to API Designer

- Data services

  • Database Services Overview
  • Database Tools
  • Database Designing

    • Working with Databases
    • Data Modelling
    • DataBase Schema Modes
    • Working with DB Schema
    • Database Views
    • Temporal Support

    Accessing Database

    • Accessing Database
    • ORM Artifacts

    Queries and Procedures

    • Working with Queries
    • Working with Stored Procedures
    • Version Queries & Procedures
    • Blob Queries and Procedures
    • Queries & Procedures - Java Services

    Database Variables & API

    • Database CRUD
    • Database APIs
    • Database Service APIs

- Web services

  • Web Services Overview
  • Services

    • REST Services
    • Secure Server-side Properties
    • REST Services using OAuth 2.0
    • Working with SOAP Services
    • Working with WebSockets

    Web Service Variables & API

    • Web Services Variable
    • Web Service APIs

- Java services

  • Java Service
  • Java Services

    • Java Integration Services
    • Variables for Invocation
    • Generated REST APIs (API Designer)

    Java Services Variables & API

    • Variable for Java Service
    • Java Service APIs

    Manifest files

    • 3rd Party Libraries
    • Using 3rd party JavaScript files
    • Using 3rd party jar files

- Security services

    App Security

    • Overview
    • Authentication
    • Authorization
    • Access Levels & Permissions
    • Login Configuration
    • SSL Encryption
    • XSS antisamy policy configuration
    • OWASP
    • Central Authentication System
    • Token Based Authentication
    • SAML Integration

    Security Variable and API

    • Security Variables
    • Remember Me
    • Variable for Security Service
    • Security Service APIs

Integration

  • Service Integration
  • Variables

    • Variables Overview
    • Model Variable
    • Device Variables
    • Variable Binding

    Actions

    • Actions
    • Navigation Action
    • Login Action
    • Logout Action
    • Timer Action
    • Notification Action

    Events

    • Events
    • JavaScript Access

Developer options

  • Test and Run (Preview) Apps
  • Import, Export & Update Apps
  • Project Shells
  • Localization
  • Developer Integration

    • Project User Management
    • Developer Collaboration
    • Debugging
    • Extending the Application using IDEs

    Deployment

    • Release Management
    • Configuration Profiles
    • Build Options for App Deployment
    • One-Click Deployment
    • Manage Deployed Apps

    Configuring Web Server

    • Deploy to Web Server Overview
    • Building a War from a WaveMaker Project
    • AWS
    • Azure
    • Google Cloud
    • Deploy to Tomcat
    • WebSphere
    • JBoss - WildFly
    • WebLogic Server

Develop extensions

  • Create Prefab
  • Use Cases - Prefabs
  • Create Themes
  • Create Template

Mobile app

  • Building Hybrid Mobile Apps
  • Native Device Support
  • First Mobile App
  • Mobile Design

    • Mobile Page Design
    • Gesture Support
    • Mobile Tabbar
    • Mobile Navbar

    Mobile Installer

    • Test Run (Preview)
    • Debugging Mobile Apps
    • Testing Hybrid Mobile Apps using WaveLens
    • Mobile Build - Android
    • Mobile Build - Phonegap
    • Mobile Build - Manual

    Mobile Integrations

    • Mobile Integrations - Amazon Mobile Analytics
    • Mobile Integrations - Amazon SNS
    • Using Push Notifications in Mobile Device
    • Invoking Web App APIs in Mobile Apps

    Offline Features

    • Offline Data Support
    • Implementation
    • Switching between Offline and Online Mode

Enterprise

  • Setup Guide
  • Launching Instances
  • DEB Installer - Private AMI
  • Add external VCS Configuration
  • Custom Apps Capacity
  • Setting up WME
  • Configuration
  • Adding Capacity
  • Maintenance
  • Upgrading
Edit

Mobile Page Design


As mentioned in UI Design Overview, a WaveMaker app is a collection of pages. Same is true for Mobile Apps. Each page can be designed by selecting a proper layout and arranging widgets within it. The app flow can be achieved using page navigation and actions to trigger this navigation.

Page Layouts

Page Layouts help you design the structure of the page by demarcating the mobile navbar, tabbar and one or two content columns.

Page Layout is set at the time of adding new page to your app or can be changed from the Workspace Toolbar More options.

A Page Layout has the following containers - mobile navbar, tabbar and content. The content can have one or two. To change the layout of a page, simply click on the desired layout to see it take effect on the design canvas. Following Page Layout options are available:

  • Blank Layout - without any mobile navbar or a tabbar.
  • One column Layout with the top navbar.
  • Two column Layout with the top navbar.
  • One column Layout with top navbar and tabbar.
  • Two column Layout with top navbar and tabbar.
note

In the case of a two column layout, a button to toggle left panel appears on left side of the mobile navbar.

A typical page layout with mobile navbar, tabbar and content have the following structure, as can be seen from the Files tab on the Files and Services panel on the left:

Widgets can be added to the page_content. The widgets in a container can be left-aligned, right-aligned or centered. navbar and tabbar are widgets which can be customized.

Container Widgets

You can use the Container Widgets to arrange the widgets on a web page. More on Container Widgets

Page Navigation & Actions

As mentioned in the previous section, default top navbar can be selected as part of the Page Layout. This Navbar can be configured to enable pre-defined controls for left navigation, back button or search. In addition, custom actions like add, edit, delete etc. can also be incorporated. Navbar can have Menu, Popover widgets.

There are several ways for the user to move from one page to another.

Using Events

A Navigation Action can be triggered when an event occurs to enable navigation. For example:

  • Mobile events - Use On tap event to trigger a navigation
  • Widget events – Use, say, Checkbox_ Change_ event to trigger a navigation.

Navigation Action specifies exactly how the user should move from one page to another when an event occurs. Navigation Action is a component you can add to your project and provide the following options:

  • gotoPage – Navigates to the specified page.
  • gotoPreviousPage – Navigates to the previous page.
  • gotoAccordion – Navigates to the specified accordion of the specified page.
  • gotoTab – Navigates to the specified tab of the specified page.
  • gotoSegment – Navigates to the specified segment of the specified page.

Navigation in the application happens using a Navigation Action. Whenever a page is created a corresponding gotoPage navigation action is generated or you can create a call to action from the Actions Dialog. Actions Dialog can be accessed by selection Actions from Variables Workspace Toolbar.

Navigation can be to a page or to a component like a tab or accordion pane on a page. Navigation action can be invoked in two ways:

Binding with a Widget Event

Binding the Navigation Action to a Widget event - For example: Touch Event like on Tap – Use the tap touch event to trigger a Navigation Action to move to a new page or segment.

Invoking Navigation Action

Manually invoking the Navigation Action used when we want to validate the user action or state of the application before allowing the navigation. For example: Assuming a scenario, allow the navigation only when the user selects a subscriptionType, then the onClick event can trigger a JavaScript function:

Page.subscribe = funtion($event, widget){
    //navigate to subscribe page only when subscriptionType is provided
    if (Page.Widgets.subscriptionType.datavalue) {
        Page.Actions.goToPage_subscription.navigate();
    }
    };

Page Transitions & Gestures

Transitions for rendering a page can be set as the call variable behavior. These will define the page behavior during navigation. You have the following options:

  1. Slide
  2. Pop
  3. Fade
  4. Flip

Touch Gestures from a mobile device can be bound to actionable events like deleting content, moving out from unread list etc. These gestures include

  1. Tap, Double Tap
  2. Swipe Up, Swipe Down
  3. Swipe Left, Swipe Right
  4. Pinch In, Pinch Out

These gestures can be set from the Events property of the concerned Widget.

Last updated on 11/6/2019 by Swetha Kundaram
← First Mobile AppGesture Support →
  • Page Layouts
    • Container Widgets
  • Page Navigation & Actions
    • Using Events
    • Binding with a Widget Event
    • Invoking Navigation Action
  • Page Transitions & Gestures
WaveMaker
  • PRICING
  • PARTNERS
  • CUSTOMERS
  • ABOUT US
  • CONTACT US
Terms of Use | Copyright © 2013-2019 WaveMaker, Inc. All rights reserved.