中文

What is Xpage?

Xpage is a prototype and mock-up app designed from scratch for the iPhone or iPad. With Xpage, everyone now can create and interact with an app prototype quickly on your mobile phone.

• Not just graphics, but also native objects.
• Not just styles, but also vivid protyping by data driving.
• Design, Mockup and Document. Export objects and embed them into product documents.

Xpage can be downloaded on AppStore, visit http://xpage.pgang.cn for more infomation.

We continue to make Xpage the best mobile design software ever to fit you needs. We need you help to shape the future direction of new features and improvements. If you have any comments about Xpage, please feel free to let us know. We will reply every feedback email.

Content

• Quick Start
• Project
  • Create a New Project
  • Choice preferred device
  • Duplicate & Delete Project
  • Project Profile
  • URL Scheme
  • Start Presentation
  • Start Recording
  • Mirror to Mac
  • Stop Presentation
  • Add to Home Screen
  • Export Project
  • Import Project
• Page
  • Reorder Pages
  • Rename Page
  • Operate Pages
  • Page Size
  • Status Bar
• Page Editor
  • Tool Bar
  • Layer List
  • Object Menu
  • Object Attributes Inspector
  • Object Action Inspector
  • Zoom Canvas
  • Pan Canvas
  • Preferences
• Object Basics
  • Insert Object
  • Selecting
  • Measure distances
  • Moving
  • Align and Distribute
  • Make Grid
  • Rotate Copies
  • Resize
  • Rotate
  • Corner Radius
  • Color
  • Shadows
  • Layer
  • Lock
  • Copy and Paste
  • Undo and Redo
  • Export Object as UI assets
• Object Group
  • Group
  • Ungroup
  • Modify the grouped objects
  • Play with the grouped objects
  • Save as template
• Shape Object
  • Shapes
  • Fill
  • Fill with Image
  • Copy & Paste a Fill
  • Blur
• Path Object
  • Edit the Path
• Label Object
  • Text Alignment
  • Format
  • Data Source
  • Data Source Format
• Button Object
  • Metrics
  • Background
  • Exclusive Actions
• Misc Objects
  • TextView
  • Scrollable Image View
  • Tab Bar
  • Navigation Bar
  • Playback Progress Label
  • Stepper
  • WebView
  • Table, Collection
  • Segmented Control
  • Chart
  • Map
  • Picker
• Adaptable Design
  • Dark Mode
  • Low Saturation
• Layout
  • Auto Layout
  • Edge Constraints
  • Size Constraints
  • Center Constraints
• Design System
  • Styles
    • Copy and Paste
    • Create, Link/Detach, Update/Reset
    • Rename, Remove, Customize
  • Components
    • Create, Link/Detach
    • Rename, Remove
• Data Driving
  • Variable
  • Value of Variable
  • Scope of Variables
  • Variables
• Event Driving
  • Event vs. Actions
  • Action Sequence
  • Conditions
• Event
  • Page Events
  • Object Events
  • General Events
  • Data Monitoring
• Action
  • Link
    • Based on Object
    • Based on Hotspot
    • Based on Page
    • Segue
  • Input Real Data
  • Input Real Photo
  • Change Layer
  • Show Alert
  • Auth via Biometrics
  • Animation
  • Play Audio
  • Play Video
• Use Cases
  • Make Phone Call
  • Recognize, Go!
• InterApp-Communication
  • Open Xpage Prototypes
  • Open Others Apps
  • Clipboard Actions
• Improve Performance
  • Disable Autosave
  • Avoid Large Images
  • Simple Design
  • Hide Unnecessaries
• In-App Purchase
• Gestures
  • Gestures in Editing
  • Gestures in Presentation
• Keyboard Shortcuts
• Misc
  • Backup

Quick Start

There are two ways to create a prototyping:

High Quality Prototyping

1. Create pages of project.
2. Design pages with visual objects.
3. Link the object to the target page, specify the transition for it.

Paper Work

1. Make hand-drawn on papers
2. Take shot and import.
3. Add hot-spots to link each other.

Content

Project

In Xpage, we can create, design, and present an App in its project.

The start UI of Xpage shows all the projects. The information of each project are showed, including name, AppIcon, description , number of pages, etc.

All local created projects are located in the Local section. Click one of projects to open and edit it.

The Discovery section shows the projects shared by the other user in the world. Until now, we can review and present the shared projects, but can not modify them.

Create a New Project

In project collection view, click the ➕ button on the upper-right corner of screen to create a new App project.

We can create a New Blank project, or import from template to create by a on-boarding project template.

Choice preferred device

Each project is designed for a preferred size and orientation of screen. It is possible to design prototypes for any resolution screen on any devices. But the best practice is designing for low-resolution on devices which equip with a high-resolution screen.

We can choice a preferred device for our new project, or change it at anytime.

• When create via New Blank, we can choice a preferred device for it.
• When create via From Template, the preferred device is specified by the template.
• The preferred device model determine the default size of pages in this project, while we can change any page to different than this default settings. Specially, if the size of the page is Automatic, it will automatically fit the actual size of physical screen. This feature often work with Auto-Layout.
  

Limits when crossing devices

There ware some limits to design a prototype for low-resolution screen on devices with high-resolution screen.

• Xpage use the native status bar ship with iOS. It always locate according to the hardware device instead of the preferred one.
• Xpage use native tab bar from iOS. If you design an iPhone prototype on iPad, the icon of item will appear at left of title instead of at top of it.
• While taking action of Video-Playback, it always play back at fullscreen of the real device instead of the preferred one.
• The transition of segue will be ignored when jump to another page in presentation.

Content

Duplicate & Delete Project

To duplicate or delete a local project, press and hold it(iPad/iPhone), or click the right button of mouse(Mac), then choice Duplicate or Delete.

Project Profile

In the first screen of Xpage, press and hold a project(iPad/iPhone), or click the right button of mouse (Mac) on the project, to pop-up the context menu. Click the Info option to open the Project Profile. We can modify the AppIcon, name, description and device model of a local project, or view its URL scheme.

URL Scheme

You can use URL schemes in Xpage. A URL scheme is the part of a link that specifies the type of application your device uses to open a URL. Many apps support URL schemes: FaceTime uses URL schemes to place calls when a URL starting with facetime:// is opened, just like Safari handles URLs starting with http://.

Xpage provide URL schemes. Apple Shortcuts app or other apps can call this URL schemes to invoke any prototypes in Xpage with the specified parameters. The URL scheme of a project is determined by the name of this project. The URL scheme of a prototype is showed in the project's profile view. Open the profile view, click the URL scheme to copy it into system clipboard.

Content

Start Presentation

Tap the Present button to present current mock-up at fullscreen.

Presentation start at the first page in the project. To specify the start point, move a page to be the first page in the collection will allow you to specify which page your prototype should start playing from.

Start Recording

An interaction recording captures the intended scenario of interactions within a prototype, visually demonstrating their planned behavior.

To create a new interaction recording, click Record button to start presentation, then interact with the prototype to demonstrate the desired interactions. To finish recording and save the interaction, just stop current presentation. we can preview our recording, make changes, save it to our devices and share it.

Currently, Xpage will record the whole content in the application window instead of in the virtual device. For the best practice, the Auto-Layout is preferred.

Mirror to Mac

We can mirror the screen of iPhone / iPad to Mac by QuickTime Player shiped with Mac。

• Link iPhone and Mac with USB line;
• Open QuickTime Player on Mac;
• QuickTime Player > Menu > File > New Movie Recording, Click the arrow at the right of Record button, choice our iPhone/iPad as the video source;

Stop Presentation

There are many ways to stop the presentation.

On iPhone, we can pinch, or touching with three fingers on screen. We also can shake device to quit present mode if the shaking event hasn't been used to trigger any action.

On iPad, we can pinch, or touching with three fingers on screen. If this iPad was connected to a hardware keyboard, press ESC to stop presentation.

On Mac, press ESC to stop presentation. If this Mac was connected to a TrackPad, we can touch with three fingers on the Trackpad.

Content

Add to Home Screen

As many applications, Xpage can add some internal operations to Home Sceeen. Xpage provide this feature to add a prototype to Home Screen, make it looks like a real app.

Since iOS 13, Shortcuts are used to add prototypes to Home Screen:

Prepare a prototype

We finished a prototype named Welcome. Let's add it to Home Screen.

Launch Shortcuts

Returns to Home Screen, then launch Shortcuts app.

Click Create Shortcut > Add Action > Web > Safari > Open URLs.

Fill URL as xpage://open?prototype=PROTOTYPENAME. The PROTOTYPENAME means the name of your prototype project.

Click Details > Add to Home Screen, edit the Home Screen Name and Icon, then click Add .

Now, a shortcut will appear on Home Screen. Click the icon to launch Xpage. Xpage will automatically present the specified prototype document.

Content

Export Project

Tap the Share button,

• tap Publish to publish project to community. We can specified if it is play-only or downloadable.
• tap Xpage to export as .xpage document.
• tap Images to share pages as images

Import Project

Import from Files

To import a project from Files, click the project to pop up the dialog. Then, select Copy to Xpage.

Import from Mail

When an Xpage project has been shared with e-mail as an attachment, the receiver can tap the attachment, then choice the copy to Xpage to open it. The shared project will be imported into Xpage and appear in Local segment-control. As soon as imported, we can edit, present or share it, just as common local projects.

Content

Page

In Xpage, the term Page is similar to the Artboard, Canvas, or Drawing, in the drawings-based app, such as Sketch, etc.

The project view is a gallery to displays a thumbnail for each of your pages. Tap a thumbnail to open it for viewing or editing.

Content

Reorder Pages

Presentation start at the first page in the project. To specify the start point, move a page to be the first page in the collection will allow you to specify which page your prototype should start playing from.

We can drop and drag pages to re-order them as our wish in project view. Touch down and hold the page a few seconds, then drag it into the target order.

Reorder a page via the Page List. Open the page inspector > Left Side Bar > Page List, drag it into the target order.

Content

Rename Page

We can rename a page via the page list in the workspace, or via the project view.

Rename a page via Page List. Open the page inspector > Left Side Bar > Page List, double click the page, to edit its name.

To rename a page, tap the title below the thumbnail to enter a new title.

Content

Operate Pages

We can delete a page via the page list in the workspace, or via the project view.

To delete a page via Page List. Open the page inspector > Left Side Bar > Page List, click the page with the right button of mouse, then choice delete on the context menu.

In project view, tap Select to enter selection mode.

In selection mode, tap on thumbnails to select or deselect them. When one or more pages are selected, Tap the Trash button to delete the selected pages.

Tap Cancel to exit selection mode.

Content

Page Size

The size of a page is default to the one defined by its project. We can adjust the size of each page at any time, to view its visual effect in different sizes, specially in Auto Layout.

Content

Status Bar

There is no standalone Status-Bar object in Xpage. Instead, Xpage apply the iOS native status-bar.

• To avoid of the conflict between the fake and the native.
• It may be weired if we design a project for iPhone on iPad. It always locate according to the real device instead of the preferred device. Visit Choice preferred device for more information.

Style

• Default: Automatically chooses light or dark content based on the user interface style.
• Light: A light status bar, intended for use on dark backgrounds.
• Dark: A dark status bar, intended for use on light backgrounds.
• None: Prefers the status bar to be hidden.

Content

Page Editor

Open a page to edit it.

Tool Bar

Toolbar is located at the top of the page inspector.

	Left-Side Bar	Open the side bar at left. On iPhone, because of the limited screen size, the left-sidebar and right-sidebar cat not be opened at the same time.
	Right-Side Bar	Open the side bar at right. On iPhone, because of the limited screen size, the left-sidebar and right-sidebar cat not be opened at the same time.
	Insert	Pop the object panel, then pick up one and insert into page.
	Zoom	Zoom the canva.
	Preference	Pop the preference inspector.

Content

Layer List

Click to open the left-sidebar, then click to open the layer list.

The object list, also known as layer list, is particularly useful for selecting an object that would otherwise be difficult to select because it’s layered below other objects.

Think about a page with lots of objects. Many of them are adjacent, sometimes overlapped. In this situation, the Object List is very helpful to operations.

Select, lock, Hide

• Tap the thumbnail or icon to select. Its Edit Menu will appear.
• Tap to hide/unhide
• Tap to lock/unlock

Name an object

Double tap an object to name it.

Swipe your finger from right to left to invoke the contextual actions for a row.

Change Layering Order, Delete, Group

In the object list, objects are shown in the layering order they appear on the page (known as the stack). You can select objects in the object list and then group, lock, or move them in the stack. To make it easier to differentiate objects in the list, you can also edit their names.

Click Edit to show the re-order icon in each row. To move an object in the layering order (stack), drag the icon above or below another object in the list.

This option will also enable multi-selection to select more than one objects, then delete them, or group them into a new compound one.

Content

Object Menu

Click an object to show its context menu, so called Object Menu.

• Edit: Click this option to invoke the Attributes Inspector
• Action: Click this option to invoke the Action Inspector

Object Attributes Inspector

Long press an object to show its Attributes Inspector. We can also click an object to show Context Menu. Then click Edit to invoke Attributes Inspector.

The Attributes Inspector lets us adjust the settings for the current object. We will see that the Inspector is divided into sections according to what object has been selected.

Tap any object on page to pop up the Context-Menu. Click the Edit button on the menu to slide in Attributes Inspector.

Instead of Quick Edit , the Attributes Inspector is used to define precisely the properties of a graphic or object.

Object Action Inspector

Click an object to show context menu. Then click Action to invoke Action Inspector.

Content

Zoom Canvas

Zoom your design as your wish.

• 100%: Keeping the proportions the same, place the content at center.
• Fit: Scale the content to fit the size of the view by maintaining the aspect ratio.
• Custom: Scale the content using pinch gesture, and translate by drag with two fingers.

We can adjust the zoom mode by ToolBar, or the pinch gesture.

Content

Pan Canvas

Scroll canvas:

• Scroll vertically by mouse scrolling. Or, press and hold the Shift key, then scroll horizontally by mouse scrolling.
• Press the Arrow kyes, or Shift + Arrow keys to move fast. NB! When some graphics are selected or focused, this operation will move the graphics instead of canvas.

Drag canvas:

• Drag with two fingers. A device ship with touch-screen(iPad/iPhone) or Magic trackpad(Mac) is needed by this way.
• For Mac that connected to a keyboard and a mouse, press and hold the spacebar, then press and hold the left-button of the mouse, and move the mouse.
• For Mac/iPad that connected to a keyboard and a touchpad/trackpad, press and hold the spacebar, then press and hold the touchpad/trackpad with single finger, and move the finger.

Preferences

To customize the page editor, click the Preferences on the toolbar at bottom of screen.

Content

Object Basics

An object is any item you place on a page, including images(photos), text, shapes, tables, and grouped items. Sometimes, object also called graphic.

Insert Object

In the workspace, click on the toolbar to open the left-sidebar, then click to open the Object Panel.

Click an object on the panel, insert this object into the current page.

Content

Selecting

Selecting is very easy in Xpage.

Selecting Single Object

• via Tap

  To select an object on the page, just tap it.

• via Longpress

  To select an locked object on the page, press and hold it.

• via Layer List

  The powerful Layer List is the best choice to select hiden, transparent, overlapped, locked objects. Tap the thumbnail / icon at left, the object in the row will be selected, and its edit menu will appear.

  Tips: Lock the unrelated objects by Object List before selecting.

Selecting Multiple Objects

• via Dragging a Box

  We also can touch the blank, then dragging a selection box. All objects in the box will be selected at end of dragging.

  
• via Layer List

  Finally, the Object List also can be used to select more than one object at same time. Click the Edit option to enter editing mode, the click more than one rows on iPad/iPhone. On Mac, the Command key or Shift key may be used.

Cancel Selections

For touch-screen devices, or Mac that connected to a hardware MagicPad, tap the blank area will cancel all selections. For Mac or iPad that connected to a hardware keyboard, press ESC will cancel all selections.

Content

Measuring distances

We can measure the distance between an object and the edge of the canvas, or the distances between two objects.

Select an object, the press and hold ⌥, to measure the distance between this object and the edge of the canvas.

To measure the distances between two objects, select the first object, hold ⌥, and hover over the object you want to measure against.

Content

Moving

Drop and Drag

Move object quickly by easy drop and drag.

Objects will become translucent during the dragging.

Auto Snaping

Auto-snaping are supported during the drop and drag.

• Snap to Magnetic Lines -- Align to common places in mobile apps.
• Snap to Edge -- Align to edges of screen.
• Snap to Objects -- Align to adjacent objects.

Move Precisely

Instead of drop and drag, the Attributes Inspector is used to move objects precisely.

On Mac or iPad with hardware keyboard connected, when one or more graphics are selected, we can move them via Arrow keys on the keyboard. These shortcuts can not move graphics with auto-layout.

Content

Align and Distribute

Align objects vertically or horizontally

You can align objects so they line up along a vertical or horizontal axis.

1. Select multiple objects.
2. Click the Align option in the quick-menu.
3. Choose an option in the align section of pop-up menu.

If two or more objects are selected, the objects align to the object most in the direction you selected. For instance, if you align three objects to the left, the leftmost object doesn’t move, and the other objects align to it.

Equally space objects

You can position objects so there is equal spacing between them on a horizontal or vertical axis, or on both axes.

1. Select three or more objects.
2. Click the Align option in the quick-menu.
3. Choose an option in the distribute section of pop-up menu.
   • Horizontally: Objects are spaced equally along a horizontal axis.
   • Vertically: Objects are spaced equally along a vertical axis.

Content

Make Grid

To make a grid, select a object and head to Arrange > Make Grid — or click the object with the right button of mouse — to edit the number of columns and rows in your grid.

Content

Rotate Copies

The Rotate Copies tool takes a single shape and rotates copies of it around a point. Select a shape and head to Arrange > Rotate Copies, enter how many copies you want to create, and the radius of the ring, then click Rotate.

Content

Resize

Control Points

When an object has been selected, some blue control points will appear around it. Drop and drag these control points to quickly resize the objects.

Snap to shapes

As you resize your objects by dragging control-points,

• Rounded rectangles will snap to squares.
• Ovals will snap to circles.

Instead of drop and drag, the Attributes Inspector is used to resize objects precisely.

Content

Rotate

To rotate an object, do one of the following:

• Tap the object to select it, place two fingers on it, then turn your hand in the direction you want to rotate the object.
  
• Click the object to select it. In the object inspector, enter a degree value in the rotation field to specify the angle at which you want to rotate the object.

Content

Corner Radius

Some objects support rounded-corners, such as Rectangle. Somes are not, such as Oval.

Some object only support uniform corner-radius for all four corners, such as Button object. Some objects can specify different radius for different corners, such as Rectangle.

Corner-Radius Control Point

When an object has been selected, a green control point will appear at the top-left corner of it. Drop and drag this control point to quickly adjust the uniform corner-radius of the selected object.

Corner-Radius Inspector

Instead of drop and drag, the Attributes Inspector is used to adjust the corner-radius of objects precisely, even set different radius for each corner.

Apply uniform radius for all corners, then specify the corner-mask.

Specify individual corner-radius for each corner.

Content

Color

A favorite color can be picked from color palette, customized with color picker, or set with hex value.

• Tap Palette to pick a color from palette.
  
• RGB Color Space: Click RGB , then drag the sliders.
• HSB Color Space: Click HSB , then drag the sliders.
• Tap the value label to set with hex value.
  

See also: Adaptable Colors

Content

Shadows

You can apply shadows to the object, and control their colors, X and Y positions, blur radius.

If an object support multiple shadows, you can apply multiple shadows to the same object.

Shadows and inner shadows have the same controls but work in different ways. Shadows render outside a layer, while Inner Shadows render inside a layer.

Content

Layer

You can layer objects to create the appearance of depth on a page and then move items higher (forward) or lower (backward) in the stack.

Reorder by drag and drop

Layer objects in the Object List. On Mac, we can drag them directly. On iPad/iPhone, click the Sort button, then drag and drop to reorder them.

Forward / Backward

Layer objects in the Attributes Inspector. With the object selected, move an object by slider, or move it one increment at a time: Click Forward icon, or click Backward icon.

Change Layers at Presentation

Xpage can process layers with bring to front or send to back commands, even remove them at presentation by Interaction > Change Layer.

Content

Lock

When ?

• To avoid inadvertently moving, modifying, or deleting an object, you can lock it.
• To set background image from start and then build on top of that with layers, we can start to edit an item, then lock it.

When an object is locked, you can’t move, delete, or modify it in any way until you unlock it.

How to lock or unlock objects

• Click the object > context menu > Lock.
• Or, locate the object on the Object List, then choose Lock. Click it again to unlock it.

How to edit a locked object

A locked object is undraggable and unselectable, until it is unlocked. But, we always can invoke its attributes inspector by long press gesture, regardless of its lock state.

Content

Copy and Paste

Copy and Paste of Objects

• Copy: Touch the object, then clik the `copy` on the quick-menu. It will copy the selected object to clipboard.
• Paste: Touch with two fingers, then click the `paste` on the menu. It will paste from clipboard into current page.

Paste from other apps

For image or text, copy them in the other apps. After that, in Xpage, click the blank area of the current page to invoke the menu, choice Paste on the menu.

Copy and Paste of Text

For text objects, such as Labels or TextViews, their text content can be copied & pasted via text inspectors, cross the applications.

Export Object as UI assets

Objects can be exported as images in different pixel densities, including @1x, @2x, @3x.

Content

Undo and Redo

On iOS and iPadOS devices, Xpage use system standard gestures for undo and redo. For example, people can use a three-finger swipe to initiate an undo or redo.

• Undo: Swipe left or double tap with three fingers, to erases the last change done to the document reverting it to an older state.
• Redo: Swipe right or tap with three fingers.
• Shake to undo. If it doesn't work, please make sure this option is enabled: Since iOS 13, Settings > Accessibility > Touch > Shake to Undo.

Content

Object Group

Graphics, objects and templates can not only full customized, but also created by yourself.

Group

To create a user-defined compound object, select the objects you want, then click the group button to combine them together.

Ungroup

To ungroup a grouped object, select the object you want, then click the ungroup button to ungroup them.

Modify the grouped objects

Two ways to modify the items that were grouped without ungroup it first:

• Layer List: Tap the > icon to unfold this group in the layer list. Click the sub-object at row to modify its attributes.
• Canvas: Double click the grouped object on the canvas to enter the internal editing mode. Click the sub-object to modify its attributes. Click the blank area to cancel all selection and leave the internal editing mode.

Play with the grouped objects

After grouping, grouped (sub-)objects still respond to the touch event, while the compound object as a whole object is not. Any grouped objects which is linked and driven by touch event, should be driven by sub-objects in them.

Content

Save as template

Click Save as template, save the grouped objects as user-defined object template, reuse them later.

These user-defined templates will appear in the Object Panel.

Content

Shape Object

Shapes

In addition to rounded-rectangles, other shapes are also supported by Xpage, such as ovals, circles, triangles, stars and polygons, etc.

As the most important shape, only the rounded-rectangle support corner-radius, border, and shadows. If you want a ring, the rounded-rectangles is the only choice.

Content

Fill

We can fill our shape objects

• with solid color, gradient colors and images.
• with adaptable colors to fit the Dark Mode. Turn it on in Preference.
  
• with random data including solid color, gradient colors, avatar and landscape images. Turn it on in Preference.
  
• in design, then interact with them in presentation.

Content

Fill with Image

In Xpage, Shape objects can be filled with images.

Options to specify how a shape object adjusts its fill content when its size changes, so called Conent Mode.

• Stretch - Scale the content to fit the size of itself by changing the aspect ratio of the content if necessary.
• Fill - Scale the content to fit the size of the view by maintaining the aspect ratio. Any remaining area of the view’s bounds is transparent or a fixed background color.
• Fit - Scale the content to fill the size of the view. Some portion of the content may be clipped to fill the view’s bounds.

Content

Copy & Paste a Fill

Fills can be copied & pasted between objects.

Open the attributes inspector for the source object, long-press the fill inspector.

Choice Copy to copy it to the pasteboard.

Then, open the attributes inspector for another object, the destination, long-press the fill inspector, then choice Paste.

If we want to copy & paste all graphic styles, instead of the fill only, The Style is the best way.

Content

Blur

The Blur attribute applies a blurring effect to the content layered behind a visual effect graphic. There are some different blur styles available for blur effect.

• None: Disabled.
• Light: The area of the graphic is the same approximate lightness of the underlying graphic.
• Dark: The area of the graphic is darker than the underlying graphic.
• Auto: follow the system settings. It automatically be dark in Dark Mode. Otherwise, light is used.

Content

Path Object

Path, also called vector, is a vector graphic that based on bezier path. The line between all points in your shape is called the path. The part of the path that lies between two points is a segment.

Edit the Path

To edit an existing path graphic in vector mode, double-click on the path object, then drag any end-point to change the path. To add a new end-point, or remove a existing end-point, click the mouse right button on any point on the path to select the option of insert or remove on the menu.

Content

Label Object

A Label is a object that displays one or more lines of informational text. Labels can display any amount of static text, but are best kept short.

Text Alignment

Text alignment is a paragraph formatting attribute that determines the appearance of the text in a whole paragraph. For example, in a paragraph that is left-aligned (the most common alignment), text is aligned with the left margin. In a paragraph that is justified, text is aligned with both margins.

Please note that there must be some spare space on the direction of alignment to contain the text content before the text alignment.

You can adjust text in a label, or other objects so that it’s aligned to the left or right, centered, or aligned on both the left and right (justified).

You may also align them vertically.

Format

Single underline or double underline.

Strike-through.

Multi-lines mode. In multi-lines mode, it will automatically wrap lines if necessary. In single line mode, it will automatically reduces the text’s font size to fit the string into the label’s bounding rectangle, until the minimum scale factor for the label’s text.

Change the case of the text: original, uppercase and lowercase. Please notice that this attribute doesn't apply to some kind of languages such as Chinese.

Data Source

In Xpage, the Text objects, including Label and Paragraph, will not only show static contents, but also be driven by Data Source.

• Static : Shows contents input at edit mode.
• Var 1 : Shows contents in the variable 1. It's the general purpose variable.
• Var 2 : Shows contents in the variable 2. It is ofen used to show current time of current Audio/Video media.
• Var 3 : Shows contents in the variable 3. It is ofen used to show duration of current Audio/Video media.

To enable this feature, open the Preferences menu, then turn on the Dynamic Text feature.

Data Source Format

If Offset and Length has been specified, just partial contents in the variable(buffer) will be showed.

We can attach a Prefix and Postfix to variable text. For example, shows " N Copy" while the value of N is changed by a Stepper object.

We can also format a label with a specific data format (for example, number, percentage, date) that determines how data in the label appears.

Note: These formats are Data Source only, and can not apply on Preset text content. For example, to apply these formats, we MUST set data source to Variable N, then take action of change-variable-value instead of set-label-text.

Content

Button

Metrics

Button is a compound object which consist of an icon, a title, a subtitle and a background.

Background

The background of a button is image filled or color filled.

A stretchable image is one that defines regions where the underlying image data can be duplicated in an aesthetically pleasing way. Stretchable images are commonly used to create backgrounds that can grow or shrink to fill the available space.

Using insets to define stretchable regions.

Stretchable portions of a nine-part image

Exclusive Actions

Button has some exclusive actions in presentation.

• Enable or Disable: Enable or disable the button. An enabled button is capable of responding to user touchs, whereas a disabled button ignores touch events and may draw itself differently.
• Set Background: Change the background in presentation.
• Set Icon: Change the icon in presentation.
• Set Title: Set the text of the title label.
• Set Title Color: Set the text color of the title label.

Content

Misc Objects

TextView - Scrollable Text

TextView is a scrollable, multiline text region. In addition to the normal text-related attributes, TextView has its specific attributes.

Shows Scroll Indicator

A Boolean value that controls whether the scroll indicator is visible.

Selectable

A Boolean value that indicates whether the text view is selectable.

Content

Scrollable Image

The Scrollable Image is a scroll view to displays its image content within the scrollable content region. As the user performs platform-appropriate scroll gestures, the scroll view adjusts what portion of the underlying content is visible.

Content

Tab Bar

There is no standalone Tab-Bar object in Xpage. Instead, Xpage apply the iOS native tab-bar.

It may be weired if we design a project for iPhone on iPad. It always shows according to the real device instead of the preferred device. Visit Choice preferred device for more information.

Content

Navigation Bar

Navigation Bars are based on iOS native navigation bars.

In design, we can not change the height of these bars, which is designed by iOS. If you are realy want to do so, use the grouped navigation bars instead.

Content

Playback Progress Label

Playback Progress Label is very useful if our protyping contains some kind of media playback features. At presentation, it will generate its text automatically to show the total duration and the current progress of media during the playback, similar to SS:MM / SS:MM. On the other side, the same UI also can be designed by the general purpose label, with dynamic data-source and event-action mechanism. But Playback Progress Label is simple and fast.

Content

Stepper

The Stepper object can write the current value to one or more varaibles.

For example, we can setup the Bond to Var 1 of a Stepper as true at edit mode. Click to change its value in present mode. Xpage will refresh the content of Var 1 with the current value of the Stepper .

Content

WebView

Dynamic Address

More than a static URL address, WebView object can request URLs in variables.

Export Document Title

Write the title of document after a web view finishes loading a frame.

Basic Skill

Click and jump easily by WebView object.

1. Create some pages which include some Webview objects.
2. Create some objects, link them to the pages above.
3. Run it, click and jump.

Recognize, Go!

Sometimes we want to jump to any URL addresses, even variable at runtime. See Recognize, Go! for more information.

Content

Table，Collection

TableViews are driven by Data Template , so do CollectionViews.

Some predefined data templates are provided by Xpage. Just choice one to apply by Attributes Inspector.

To fit the different needs of the different users, invoke the Data Template Manager to customize the data templates.

Further more, data templates even work well with Web-Service API. To serve with real data, just provide a URL. This URL should returns data with JSON specification. There is a example:

{
    "name" : "My Data",
    "sections" : [
        {
            "title" : "Section 1",
            "cells" :
                [
                    {
                        "image" : "http://www.demo.com/1.jpg",
                        "title" : "Title 1",
                        "subtitle" : "Subtitle 1"
                    },
                    {
                        "image" : "http://www.demo.com/2.jpg",
                        "title" : "Title 2",
                        "subtitle" : "Subtitle 2"
                    }
                ]
        },
        {
            "title" : "Section 2",
            "cells" :
                [
                    {
                        "image" : "http://www.demo.com/1.jpg",
                        "title" : "Title 1",
                        "subtitle" : "Subtitle 1"
                    },
                    {
                        "image" : "http://www.demo.com/2.jpg",
                        "title" : "Title 2",
                        "subtitle" : "Subtitle 2"
                    }
                ]
        }
    ]
}
            

Content

Segmented Control

The appearance and interactions will be different according to their items.

Content

Chart

Pie Chart and Bar Chart are data driven. Their appearance will be different according the values of their items.

To change the appearance of Pie Chart, invoke the Attributes Inspector. Operations of Bar Chart is similar.

Content

Map

Click the Locate button to switch to the familiar region with the span of street level. Xpage will require the system permission to use the user location for this operation.

Content

Picker

The picker is a view that uses a spinning-wheel or slot-machine metaphor to show one or more sets of values.

To insert or remove a set of values, swipe on row to left (for iPhone/iPad) in the data inspector, or click the right button of mouse (for Mac), the select the Insert or Remove option on the menu.

Also, to insert or remove a value to/from a set of values, swipe on row to left (for iPhone/iPad) in the data inspector, or click the right button of mouse (for Mac), the select the Insert or Remove option on the menu.

Content

Adaptable Design

Using some adaptable features in your designs, make your designs adapt iOS dark/light mode automatically.

Dark Mode

There are some semantic colors in Xpage color picker. These semantic colors adapt automatically to Dark Mode changes. Use them when you want to use a specific color shade in your design. These adaptable colors include standard color, such as blue, orange, red, etc. and UI element colors such as labels, and backgrounds.

In the page inspector, open Preference, then enable Adaptable Color.

To show the dynamic color scheme, set the Xpage scheme to (follow the system), then switch on/off the dark mode on your device.

Low Saturation

Low Saturation mode, also call Grayscale mode, render our designs with low-saturation in Low-Fi style. Low Saturation mode are supported both in the editing mode and the presentation mode.

On the main menu, open Preference, then enable Low Saturation.

Content

Layout

Traditionally, app-protypes laid out their user interface by manually setting the frame for each graphic in a graphic hierarchy. The frame defined the graphic’s origin, height, and width in the supergraphic’s coordinate system.

Auto Layout dynamically calculates the size and position of all the graphics in your graphic hierarchy, based on constraints placed on those views. For example, you can constrain a button so that it is horizontally centered with an Image and so that the button’s top edge always remains 8 points below the image’s bottom. If the image’s size or position changes, the button’s position automatically adjusts to match.

This constraint-based approach to design allows you to build user interfaces that dynamically respond to both internal and external changes (e.g. device screen rotates).

Auto Layout

Auto Layout defines your user interface using a series of constraints. Constraints typically represent a relationship between two graphic. Auto Layout then calculates the size and location of each graphic based on these constraints. This produces layouts that dynamically respond to both internal and external changes.

Edge Constraints

Xpage presents a Pin inspector to edit Edge Constraints. The Pin inspector lets you quickly define a graphic’s position relative to its supergraphic or quickly define its size. The top portion of the inspector lets you pin the selected item’s Left, Top, Left, or Bottom edge to its super graphic. The associated number indicates the current spacing between the items. You can type in a custom spacing.

Size Constraints

Size constraints defined the size you want to fix. Size constraints take effect only if there is no conflict. For example, a width constrait take effect only if either left-edge pin or right-edge pin is disabled. A height constrait take effect only if either top-edge pin or bottom-edge pin is disabled.

Center Constraints

Automatically place graphic at horizontal center or/and vertical center with the positive or negative offset.

Content

Design System

Both styles and components are designed for the graphic design in editing, while event-action mechanism is designed for the interaction in presentation.

Styles

Styles is designed to reuse UI attributes, so you can maintain designs systematically at scale.

Copy and Paste

Copy a style from an object, then paste to another object.

Click the object, then choice Copy Style option on the edit menu.

Click another object, then choice Paste option on the menu.

After paste, the visual attributes of the target graphic object will be same as the source style.

Tips: Copy and paste styles between objects doesn't bind the style to the object. If the source style is changed after paste, the object doesn't follow the change. This operation is not related to the Style system based on binding.

Create, Link/Detach, Update/Reset

Click an object, then

• Create: Create a new style and save into library.
• Link: Link to a style in the library.
• Detach: Detach from source.
• Update: Update changes into source.
• Reset: Reset to source

Rename, Remove, Customize

In the style library manager, we can

• Rename: Rename a style in the library.
• Remove: Remove a style from the library.
• Customize: Customize a style by editing, remove an attribute from, or insert a new one into its attributes of a style.

Content

Components

Components is designed to reuse graphics.

Create, Link/Detach

Click an object, then

• Create: Create a new component, save into library, then link to it.
• Link: Link to a component. This object will be replaced with an instance of this component while keep its size untouch.
• Detach: Detach from source if it is linked already.
• Set to Original Size: Resize to the original size of source.

Rename, Remove

In the component library manager, we can

• Rename: Rename a component in the library.
• Remove: Remove a component from the library.

Content

Data Driving

Xpage is data-driving instead of draw-driving.

Variable

A variable is a container used to store content such as text, number, image, or fill. Using variables is the most powerful way to expand the capability of your prototypes, allowing you to set up data-driven interactions. In Xpage, variables are a bridge connecting data-driving engine and event-driving engine. They are ofen used to change the content dynamically in presentation.

Content

Value of Variable

A variable, also called general purpose variable, is a container used to store text("hello"), number as text("123"), or JSON encoded object, such as image, fill, array or dictionary.

When variables are used to store colors, we can change colors dynamically in presentation. For example, we can set the action of Color-by-Var as the respond action of the Event 1 of an object. Then, in somewhere, execute an action of Set the Variable by Color, then post Event 1.

When variables are used to store fills, we can use events, actions and variables together to change the fill content of the shapes in presentation. For example, we can set the action of Fill-by-Var as the respond action of the Event 1 of a shape object. Then, in somewhere, execute an action of Set the Variable by Fill, then post Event 1.

Content

Scope of Variables

The scope of variables is the whole project instead of the current page.

This feature is very useful if we want to pass variables cross pages. On other side, this feature also bring some side-effect that make trouble. In any case, to limit the scope of the variables into the previous page, we can execute the action of clean-variable when the next page appear.

Content

Variables

If an object is data-driven, it support data binding that up to one or more variables. There are three general-purpose variables, three arrays and three dictionaries in Xpage.

Variables are used to store text("hello"), numbers("123"), or JSON encoded objects.

Array is an ordered series of elements. We can get/set the element by its index in array.

Dictionary is a collection whose elements are key-value pairs. We can use a key to retrieve the corresponding value, which can be any object.

Content

Event Driving

Event vs. Actions

Xpage prototypes are driven by event. One or more actions can respond to each event.

There are two kinds of events in Xpage.

• Page Event
• Object Event

Accordingly, there are two kinds of actions in Xpage:

• Page Action
• Object Action

Content

Action Sequence

Action sequence, as named, will execute actions one by one.

When designing an action sequence, we must prevent actions interference each other. For example, if a segue(linkage) action exists in an action sequence, it should be the last action in the sequence.

Content

Conditions

We can set one or more conditions for our actions. Each action is taken ONLY IF all of its conditions are met.

If an action require one or more condition to execute, it shows the number of the conditions at the left side of the row in the Action-Sequence Inspector.

In the Action-Sequence Inspector, press down and hold on an action, then swipe the finger to right, the inspector will show how many conditions are required before the execution of this action. Click on this, enter the Condition Inspector.

Supported Conditions

• Variables：empty, not empty, type checking, etc.
• Array：empty, counting, etc.
• Dictionary：empty, etc.
• Player：playing or stoped
• Math comparision: Check if the value of operand 1 is larger than，equal to，or less than the value of operand 2.

Conditions：And / Or?

• Actions in the action list will execute one by one. So, If some rows owned the same action but different conditions, these condition are Or conditions.
• Each action is executed ONLY IF all of its conditions are met. So these conditions are And conditions.

Content

Event

Page Events

Page Events

Page events apply on the whole page, and is used to trigger one or more Actions .

• Appear - when page appeared.
• Resize - when device orientation rotated on iPhone/iPad, or the size of the app window changed. By handle this event, we can improve our auto-layout. Please notice that it may be triggered continuously if we are dragging a window border on Mac.
• URL Scheme is called - when it is call via its URL scheme by Shortcuts or other apps.
• Swipe Left - when finger swipe from right to left.
• Swipe Right - when finger swipe from left to right.
• Shaking - when shaking the device.
• Data Monitoring
• Timer - when the timer fired for the specified intervals.
• End of Play - when the audio/video play back ended.

Content

Object Events

Object events apply on a single object, to trigger the Object Action of this object. Most of objects support a event by default: Touch .

Some object events:

• Appear - supported by most objects.
• Click - supported by most objects. But somes are not, such as Grouped, Picker.
• Object-Specific - supported by the specified object. For example, the QRCode-Scanner object supprt event of Recognize-Succeed

Content

General Events

There are three general purpose events in Xpage. Both page and objects can respond to these events.

• Event 1
• Event 2
• Event 3

Data Monitoring

Data Monitoring is a kind of page event. It take a sequence of actions when the length or value of the specified variables was changed.

Content

Action

Most actions can not only play as page actions, but also object actions.

Page Actions

Page actions are response to page events.

Object Actions

Object actions are response to object events. Some common actions are supported by most of objects, such as Link. On other hand, object-specific actions are supported by the specific objects. For example, Set Title for Button object.

Link & Segue

Link between pages.

Object based

Each object on the page can add a linkage if it support to. To specify the target page of an object linked with, setup the linkage property of the object directly on the Object Menu. We also can do it by the Object Action Inspector.

Hotspot based

1. Insert an object from panel.
2. Move it to the position what we want, link it to the target page.
3. Click ‘None’ to disable its fill to make it invisible. NB! Don’t set its opacity to zero.

Page event based

The transition also can be based on page instead of object. If a kind of event property and the linkage property of page was set properly in Page Events.

Segue

Tranditional slide projector see content as a series of sliders, then slide them to next, or return to previous. Tranditional see content as a series of pictures, then link them in two-dimensional. In Xpage, a page segue to another in 3D.

There are 2 segue method in Xpage: Push and Pop.

Content

Input Real Data

In presentation mode, Xpage can input real data, text or numbers, handle them as wish.

First, an object on screen can be treat as a key on some kind of keyboard. Press these keys to input real data, text or numbers, handle them as wish.

The value of each key can be assigned by Input Value, also called Operand. When a key was touch down, its value will be calculate by Input Method.

How to handle the Input Value is determined by Input Method property:

• Assign ：Assign the value to the variable, or replace the current value of it.
• Increase ：Increase the variable by value, or decrease it when the value is a negative.
• Append ：Append the value of the key to the end of variable that bond to.
  💡Tips: The Calculate action have two operands, A and B. If you need A Prepend B, like the Concatenate but insert A at the start of the string B, just use B append A
• Clean ：Clean the value of the variable immediately. It means remove all content in the buffer.

The QR-code Scanner object also can be used to input a text, URL, or numbers. When a QR-code was recognized successfully, the result will be saved into variables automaically.

Content

Input Real Photo

At presentation mode, Xpage can input photos in real world.

Some properties of objects are used to support this feature:

• Preset：Choose an image from image stock, save it into the image variable.
• Choose from Album: Choose a photo from album, save it into the image variable.
• Take Photo: Take photo by camera, save it into the image variable.
• Clean: Clean up the current content of the image variable.

To replace the image at runtime, insert an image object that shows the image from Image Variable. Then, enable the Choose from Album or/and Take Photo attributes.

Content

Change Layer

Xpage can process layers with bring to front or send to back commands, even remove them at presentation.

• Bring to Front
• Send to Back
• Remove

Tutorial Project: New Project > From templates > Interaction

Content

Show Alert

In edit mode, assign a Show Alert action for an object, design its style, title and actions.

In presentation mode, show an alert, then interact with its actions.

NB! Show Alert action can not work with Play Video at Fullscreen action.

Content

Auth via Biometrics

To use TouchID/FaceID, you must:

1. Purchase the IAP named Advanced Interaction, or the All-In-One.
2. Open your page to edit.
3. Insert a basic object, such as rectangle, oval or image, etc.
4. Click this object to show its context menu, click act > auth via bio, enable it. Post some events as your wish.
5. Handle the events from you.
6. Play your project.

There is also a demo project in the community. Open Shared > BioAuth, play it to run. Your device must support TouchID/FaceID to run it.

Content

Animation

To run animation in your projects, make sure the option has been enabled: Quick Menu > Preferences > Object Inspector > Animation. Please note that Auto Layout doesn't support frame animation. Use frame-based layout if you want to make frame animation.

Some actions will run an animation:

• Location
  • Move to [X, Y]
  • Move by [∆X, ∆Y]
• Size: Change the value of Width and/or Height.
• Color: Change the value of color. This feature doesn't support gradient colors or images.
• Opacity: Change the value of opacity of object.
• Corner Radious: This take effect on rounded rectangles.
• Rotate: Rotate by 0～360 degrees.

Parameters that are supported by most of animation:

• Duration: The duration of animation, as seconds.
• Auto-reverse: Run the animation backwards and forwards (must be combined with the repeat option). This option is only supported by a few animation such as rotation, color, etc.
• Repeat: Repeat the animation indefinitely. This option is only supported by a few animation such as rotation, color, etc.
• Curve: This option is only supported by a few animation such as rotation, movement, etc.
  • Linear: A linear animation curve causes an animation to occur evenly over its duration.
  • EaseIn: An ease-in curve causes the animation to begin slowly, and then speed up as it progresses.
  • EaseOut: An ease-out curve causes the animation to begin quickly, and then slow as it completes.
  • EaseInOut: Specify an ease-in ease-out curve, which causes the animation to begin slowly, accelerate through the middle of its duration, and then slow again before completing.

Content

Play Audio

In presentation mode, take action of play-audio to play back an audio or system sound.

Content

Play Video

Playback a video.

The video is played at full-screen on iPhone, and covered the objects below. When the video is end, thease objects will appear again, and trigger their on-appear event.

Content

Use Cases

Make phone call

To make phone call from App prototypes:

1. Add some objects as the keys of numbers. Set their Input Value property properly. Set their Input Method to Append. Set their Data Binding to Bond to Var 1. To representing things as they are in real life, add Sound Effect to these keys.
2. Add a Text object to show current numbers. Set its Data Source to Var 1.
3. Add an object as the 'delete' button, set its Input Method property to Clean.
4. Add an object as the 'call' button, set its dial property to true.

Let's dial!

1. Goto present mode.
2. Press keys to input phone numbers.
3. Touch down the 'call' button.

Cool! It will make a phone call by dial these numbers.

Content

Recognize, Go!

Challenge: visit the URL specified by a QR code ?

Ready, Go!

Enter edit mode,

1. Insert a QR-Code Scanner object, enable the Bond to Var 1 for it.
   
2. Insert a WebView object, then enable the Bond to Var 1 for it too. Then, enable the Export Title to Variable 1 attribute.
   
3. Insert a Label object to show the title of web page which returned from the website. The text source attribute of it should be From Variable 2 .
   

In present mode, the camera will be activated and start scanning. Scanning a QR-code that point to a website will cause its content display on the WebView, and its title display on the Label.

Content

InterApp-Communication

InterApp-Communication will bring your prototypes unlimited interactions.

Other apps can open any prototype in Xpage with their own parameters. Xpage can call other apps also. In presentation mode, Xpage communicate with other apps via clipboard actions, such as Copy, Paste, etc.

Open Xpage Prototypes

• Present the specified prototype
  xpage://open?prototype=NAME
• Present the specified prototype with the specified parameters. This parameters are passed to the general purpose variables from 1 to 3. Add some actions into the URL-scheme-received event to handle this call.
  xpage://open?prototype=NAME&var1=PARAM1&var2=PARAM2&var3=PARAM3

Open Others Apps

If any app support URL scheme, we can call it via Xpage by Open URL action. URL schemes for some apps:

• Maps
  map:// and maps://
• Notes
  mobilenotes://
• Photos
  photos-redirect://
• Safari
  http:// and https://

Clipboard Actions

• Copy: Copy the current content in the specified variable to system clipboard.
  💡 Tips: Not only text but also colors can be copied into system clipboard. For example, if we want to copy a green color, just copy the string of "#00FF00".
• Paste: Paste from system clipboard into the specified variable.
  💡 Tips: Not only text but also colors can be pasted from system clipboard. For example, if there is a string of "#00FF00" in system clipboard, we can paste it as a green color.
• Clear: Clear the current content in the system clipboard.

Content

Improve Performance

Remember, the more objects or details, the more payload for Xpage.

Disable Autosave

If there are lots of objects in the design, enable Auto Save feature will reduce the performance of editor.

Consider disable the autosave feature to improve performance.

Avoid Large Images

Large images cost lots of hardware resources. Instead,

• Embedded images are preferred. All of them are optimized for size.
• URL based images are preferred. - especially those of small sized.
• Thumbnails are preferred, instead of originals, when pick image from Photolibrary, Camera or Files.

Simple Design

Disable shadows, blurs, even textures during the design.

Hide Unnecessaries

More objects in the design, more need of hardware resources.

Hide all obejects if they are not necessary.

Content

In-App Purchase

Features still locked after payment?

Xpage will pop a message on your device when the purchase succeed.

But, if it is not. If the features are still locked after purchase, it most suffer the dis-function of the connection between you and AppStore. In most cases, the problem was gone after retry, it means 'click Restore button', after a while or a day.

Assets still locked after payment?

Have purchased and activated the Ultimate. All features are unlocked already. But still can not use some of assets? This is because these assets are cloud-based assets, which are part of Xpage Cloud service and is available only by Subscription.

How many devices can I use with one subscription?

Unlimited. Download Xpage and tap the "Restore" button at the bottom of the purchase window on your new devices.

Do my payment on iPhone covers access to the desktop version as well?

Yes, it covers all platforms that it supports, iPhone, iPad and Mac. If you login on another device instead the one you do the payment, please click 'Restore' button at the bottom of the IAP view, then wait until app finish communication with the AppStore.

Do I loss my work if I unsubscribe or subscription expires?

Never. You'll keep any work that you've created regardless of you subscription status.

Restore

If you have removed Xpage from your device, then restalled it. All In-App Purchase items must be re-activated before use them. Click the Restore button at the bottom of the IAP UI.

Content

Gestures

Gestures in Editing

Some gestures applied when editing a page.

• Single Finger
  • Tap an object. Select／unselect an object.
  • Long press an object. Invoke the inspector for this object. This gesture can be enabled/disabled in Preferences .
  • Pan an object: Press down an object, then move the finger, to drag this object.
  • Tap the blank.
    • Unselect selections.
    • Pop the Paste option after Copy operation.
  • Tap the blank, the move the finger. Draw a box to select multi-objects.
• Double Fingers
  • Two-fingers Pinch: Zoom the canvas when nothing selected. Or scale the object when something selected.
  • Two-fingers Pan: Move the canvas.
  • Two-fingers Rotate: Rotate the selected object.
• Three Fingers
  • Three-Finger Tap. Cancel or redo the previous operation.
  • Three-finger swipe. Initiates undo when swiping left, initiates redo when swiping right.
  • Three-finger pinch. Copies selected text when pinching inward, pastes copied text when pinching outward.
• Shake Cancel the previous operation. Tips💡: Stop shaking your iPad! Use three-finger gestures instead.
  

Gestures in Presentation

Some gestures applied when presenting a project.

• Tap: Follow the linkage if a hot-spot has been tapped. Or else, blink to hint the positions of all hot-spots in the page.
• Swipe Scroll object in vertical or landscape direction, such as table view, collection view, scrollable image and text view. If the device doesn't ship with a touch screen but a touchpad/trackpad or a mouse, we can swipe the touch-pad or scroll the mouse-whell.
• Pinch: Stop the presentation.
  

  If the device doesn't ship with a touch-screen or touch-pad but a hardware keyboard, we can press the ESC key to stop the presentation.

• Three-Finger Tap: Stop the presentation.
• Shake: Stop the presentation. - Only if the shaking event hasn't been used to trigger any action. For example, there is not an action of "shake to follow-linkage".
  

Content

Keyboard Shortcuts

Keyboard shortcuts are the fastest way to speed up your workflow. Many of them are depend on what you’ve selected and what you’re doing, but you’ll find the most list of Xpage keyboard shortcuts below. To use a shortcut, press and hold one or more modifier keys and then press the last key of the shortcut.

Edit

⌥	Measure distance. Select the first graphic, then hover the graphic you want to measure distance against.
⌘ A	Select all graphics, except the hidden or locked ones.
⌘ C	Copy
⌘ X	Cut
⌘ D	Duplicate
⌘ V	Paste
Backspace or Delete	Delete selected graphics.
⌘ Z	Undo
⇧ ⌘ Z	Redo

Zoom and Focus

⌘ 0	Zoom to 100%
⌘ 1	Zoom to all graphics on Canvas
⌘ 2	Zoom to the selected graphic(s).
⌘ 3	View the selected graphic(s) at center of canvas.
⌘ +	Zoom in
⌘ -	Zoom out

Insert Graphics

⌘ R	Insert rectangle
⌘ O	Insert oval
⌘ T	Insert text

Move Canvas or Graphics

Use Arrow keys to move canvas or graphics.

• When nothing selected, use Arrow keys to move the canvas. For each press, move by 1, or by 10 when Shift key pressed.
• When one or more graphics are selected, use Arrow keys to move them. For each press, move by 1, or by 10 when Shift key pressed.

Space drag	Pan Canvas
↑	Decrease Y-coordinate.
↓	Increase Y-coordinate.
←	Decrease X-coordinate.
→	Increase X-coordinate.
⇧ ↑	Decrease Y-coordinate by 10.
⇧ ↓	Increase Y-coordinate by 10.
⇧ ←	Decrease X-coordinate by 10.
⇧ →	Increase X-coordinate by 10.

Organize Graphics

⌘ ]	Bring to Front
⌘ [	Send to Back
⇧ ⌘ H	Hide/Unhide
⇧ ⌘ L	Lock/Unlock
⌘ G	Group
⇧ ⌘ G	Ungroup
⌘ M	Make Grid

TextFields with Stepper

When a textfield is activated to enter a number, we can not only type the numbers directly via numeric keys on the hardware keyboard, but also increase or decrease the value via Arrow-Up and Arrow-Down keys.

↑	Increase value by 1
↓	Decrease value by 1
⇧ ↑	Increase value by 10
⇧ ↓	Decrease value by 10

Miscellaneous

⌘ S	Save document
⌘ P	Enter presentation mode & Play
⌘ W	Quit Xpage
ESC	Quit presentation mode / Clear selection / Close popups
⌘ .	Show Interface (SideBars)

Content

Misc

Backup

It is recommended that you regularly back up your documents. You can do it by Export to Mail, give them different names for different versions.

️NB! iCloud is designed only for synchronization, not for backup.

Content