Mobile Navigation view

Mobile Navigation view

Use the Mobile Navigation view to manage Dojo mobile view widgets and jQuery mobile web page widgets.
For example, using the Mobile Navigation view, we can:

Add or remove mobile views and pages.

Switch visibility from one mobile view or page to another.

Rename mobile views and pages.

Set the default mobile view or page that is shown the first time that a web page opens.

Link mobile views or pages.

The Mobile Navigation view is available from both the Web perspective and Rich Page Editor:

To open the view from the Web perspective, select Window > Show view > Other > Web > Mobile Navigation.

To open the view from Rich Page Editor, on the toolbar click Show/Hide Mobile Navigation:

A mobile web page can contain multiple views or pages. We can create these views and pages inline or in external files.

Inline mobile view or page

A mobile view or page that is written within the source code of the mobile web page.

External mobile view or page

A mobile view or page that is written in a separate file or fragment. Creating mobile views or pages in separate files or fragments makes source code shorter and easier to manage.

When we open a mobile web page in Rich Page Editor, the mobile views or pages contained within that web page are displayed in the Mobile Navigation view. The icon to the left of each of the mobile views and pages indicates which one is visible in Rich Page Editor. If the mobile web page references external mobile views or pages, they are displayed in the Mobile Navigation view with a decorated icon. To open a new instance of Rich Page Editor for an external mobile view or page, double-click the mobile view or page.

The following table lists and describes the features available for mobile web pages in the Mobile Navigation view.

What we can do in the Mobile Navigation view Description
Create mobile views or pages We can create the following types of Dojo widgets:

View

A container that represents the entire mobile device screen.

ScrollableView

A view widget with touch scrolling capability we can use to provide fixed position header and footer bars.

SwapView

A view widget we can swipe horizontally to show adjacent SwapView widgets.

We can create the following types of jQuery widgets:

Page

A container that represents the entire mobile device screen.

Dialog page

A container that is shown in the form of a dialog box.

Switch between mobile views or pages We can switch visibility between views or pages to specify which view or page is available in Rich Page Editor. In the following screen capture, the home view is visible in Rich Page Editor; the calendar, messages, and contacts views are not visible.

To switch to the calendar view, click the icon to the left of calendar.
Rename mobile views or pages Right-click the view or page to rename and then click Rename. For example, to rename the calendar view to internet:

Right-click calendar and then click Rename.

In the Mobile View id field, specify internet.

Set the default mobile view or page Right-click the view or page to set as the default and click Set as default.
Remove mobile views or pages Right-click the view or page to remove and click Remove.
Link mobile views or pages We can link widgets, such as buttons or list view items, to mobile views or pages. We can drag a widget from the Design view in Rich Page Editor to a mobile view or page in the Mobile Navigation view. We can also drag mobile views or pages from the Mobile Navigation view to widgets in the Design view within Rich Page Editor.
We can link Dojo mobile widgets to mobile views using the Link to Mobile View action.

In the Design view within Rich Page Editor, click the Dojo mobile widget to link to a mobile view to open the toolbar.

To open the Link to Mobile View dialog, on the toolbar click Link to Mobile View:

Select one of the following options.

Click Inline Mobile View; from the list, select the mobile view to link to the widget.

Click Page Fragment, and then click Browse to browse to the mobile page file to link to the mobile view.

Click Finish.

Parent topic: Rich Page Editor

What we can do in the Mobile Navigation view	Description
Create mobile views or pages	We can create the following types of Dojo widgets: View A container that represents the entire mobile device screen. ScrollableView A view widget with touch scrolling capability we can use to provide fixed position header and footer bars. SwapView A view widget we can swipe horizontally to show adjacent SwapView widgets. We can create the following types of jQuery widgets: Page A container that represents the entire mobile device screen. Dialog page A container that is shown in the form of a dialog box.
Switch between mobile views or pages	We can switch visibility between views or pages to specify which view or page is available in Rich Page Editor. In the following screen capture, the home view is visible in Rich Page Editor; the calendar, messages, and contacts views are not visible. To switch to the calendar view, click the icon to the left of calendar.
Rename mobile views or pages	Right-click the view or page to rename and then click Rename. For example, to rename the calendar view to internet: Right-click calendar and then click Rename. In the Mobile View id field, specify internet.
Set the default mobile view or page	Right-click the view or page to set as the default and click Set as default.
Remove mobile views or pages	Right-click the view or page to remove and click Remove.
Link mobile views or pages	We can link widgets, such as buttons or list view items, to mobile views or pages. We can drag a widget from the Design view in Rich Page Editor to a mobile view or page in the Mobile Navigation view. We can also drag mobile views or pages from the Mobile Navigation view to widgets in the Design view within Rich Page Editor. We can link Dojo mobile widgets to mobile views using the Link to Mobile View action. In the Design view within Rich Page Editor, click the Dojo mobile widget to link to a mobile view to open the toolbar. To open the Link to Mobile View dialog, on the toolbar click Link to Mobile View: Select one of the following options. Click Inline Mobile View; from the list, select the mobile view to link to the widget. Click Page Fragment, and then click Browse to browse to the mobile page file to link to the mobile view. Click Finish.