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.

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

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.

Project Category

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.

Default Page Size

Limits when crossing devices

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

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.

Home Context Actions

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.

Project Profile

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

Play

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。

QuickTime Player

Stop Presentation

pinch

To quit present mode, we can pinch, or touching with three fingers on screen, for iPhone/iPad, or Magic Trackpad, for Mac.

💡 The user may use pinch gestures to zoom in and out of the map. So, we may quit present mode by touching with three fingers if an map object exist in current page.

On Mac, or an iPad which already connected to a hardware keyboard, press ESC to stop presentation.

On iPhone, we also can shake device to quit present mode if the shaking event hasn't been used to trigger any action.

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:

Shortcuts

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.

💡Tips: To fill into URL, the name of prototype SHOULD NOT contain spaces.

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,

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.

️If the email attachment can not be imported into Xpage, kill Xpage then open the attachment to try again.

Content

Pages

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

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.

rename a page

Content

Rename Page

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

rename a page

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

rename a page

Content

Operate Pages

multi-selection for pages
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.

Page Size

Content

Status Bar

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

Style

Content

Page Editor

Open a page to edit it.

workspace

Tool Bar

Toolbar is located at the top of the page inspector.

sidebar.left 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.
sidebar.right 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 Insert Pop the object panel, then pick up one and insert into page.
zoom Zoom Zoom the canva.
preference Preference Pop the preference inspector.

Content

Insert Object

Click sidebar.left on the toolbar to open the left-sidebar, then click insert to open the Object Panel. Object Panel, also called Component Panel, holds all components that are available in Xpage.

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

Content

Layer List

Click sidebar.left 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, Rename

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

Layer List Swipe Contextual Actions

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 row-reorder in each row. To move an object in the layering order (stack), drag the icon above or below another object in the list.

Editing Layer 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.

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.

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

Content

Pan Canvas

Scroll canvas:

Tips: Don't select any object before move with arrow keys. Or else, we are moving these objects instead of the canvas.

Drag canvas:

Tips: On Mac 上,press and hold the Space Bar, the cursor will become a "hand”(Mac only), then drag via the mouse or single finger.

Preferences

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

Preference

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.

Selecting

Selecting is very easy in Xpage.

Selecting Single Object

Selecting Multiple Objects

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 between objects

To measure distances between different objects on the Canvas, select the first object, hold , and hover over the object you want to measure against.

Measuring distances between objects
💡Tips: We can not measure distances between objects using auto-layout.

Content

Moving

Drop and Drag

Move object quickly by easy drop and drag.

Multi-Selection

Objects will become translucent during the dragging.

Multi-Selection
💡Tips: Unselect an object before drag it. After selected, some control-points appear. Sometimes things become dragging the control-points, to resize, instead of the object itself, to move. Unselect, zoom in the canvas, or change the touch-precision from finger-mode to mouse mode will be helpful in this situation.
💡Tips: Optimize your designs to make it fast. Avoid large images, disable autosave, make your operations more comfortable.

Auto Snaping

Auto-snaping are supported during the drop and drag.

Multi-Selection
💡Tips: If auto-snaping feature is enabled, and objects just locate at the sensitive region, the dragging may not started. During the dragging, the movement may also be interrupted by this feature. Disable the auto-snaping if necessary.

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 Distribute Horizontally: Objects are spaced equally along a horizontal axis.
    • Vertically Distribute 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.

Make Grid Make Grid
💡Tips: The objects using auto-layout do not support Make 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.

旋转复制
💡Tips: The objects using auto-layout do not support Rotate Copies.

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.

Control-Points
💡 Tips: The control-points may not appear on some kinds of objects. For example, the Stepper object owned a fixed size. It doesn't need control points.

Snap to shapes

As you resize your objects by dragging control-points,

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:

💡 Tips: Some kind of objects support rotation, while others not.

💡 Tips: Auto-snapping may not apply to the object which has been rotated.

Content

Corner Radius

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

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 corner-radius of the selected object.

Control-Points

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.

Corner-Radius

Content

Color

A favorite color can be picked from color palette, customized with color picker, or 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

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.

Shadows

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.

Layer List > Reorder

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.

Inspector > Layer

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 ?

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

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

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.

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.

Multi-Selection

Ungroup

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

Multi-Selection

Modify the grouped objects

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

Modify Grouped

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.

label

The user defined templates will appear in the Object Panel. They are managed by the Preference menu.

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.

Rounded Rectangle Rounded Rectangle Rounded Rectangle

Content

Fill

We can fill our shape objects

Content

Fill with Image

In Xpage, Shape objects can be filled with images.

image fill

Tips: On AppStore, there are many image editing Apps can be used to prepare image materials. Import images when they are ready.

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

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.

copy & paste a fill

Choice Copy to copy it to the pasteboard.

copy & paste a fill

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

copy & paste a fill

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.

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.

Tips:

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.

label-alignment-horizontal

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).

label-alignment-vertical

You may also align them vertically.

Format

label-style

underline

Single underline or double underline.

strikethrough

Strike-through.

autowrap

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.

autowrap

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.
label datasource

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

Preference - Text

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.

Button Metrics

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.

image insets

Stretchable portions of a nine-part image

image stretching

Exclusive Actions

Button has some exclusive actions in presentation.

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

image stretching

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.

Tips: The Scrollable Image can scroll horizontally, vertically, or both. But the direction of the scroll MUST match the ratio of image content and view size. Or else, the image content may display incorrectly in the view.

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.

Tab Bar

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

Player Current Time 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.

page action property

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.

Segmented Control

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.

Pie Chart

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.

Picker Components

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.

Picker Values

Content

Dark Mode

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

Adaptable Colors

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.

light with semantic colors light with semantic colors

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

dark mode

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

dark mode

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.

These are reusable collections of UI properties which you can easily apply to elements in your design. In Xpage, you can create styles for colors, fonts, fills, corner-radius, borders and rotation. If we apply a style to some objects, the change of some UI properties of the original style, will apply to all those objects. For example, if you change the fill of a shape component from solid color to a random landscape photos, and then publish those changes, any objects in any pages that used that style will update their fill to a random landscape photos.

Tips: Every instance is just a linkage to the original one, until this instance has been modified. Modification of an instance will make local copy of it, then modify this copy only. So, modification of an instance doesn't update its original one automatically. We can publish a modification, in other words, update its orginal one, then apply to all of its instances automatically.
Tips: Not all kinds of objects support styles. Some objects that support styles are shapes, labels, icons and buttons.

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.

Copy & Paste Style - step 1

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

Copy & Paste Style - step 2

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

Copy & Paste Style - step 3

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

Rename, Remove, Customize

In the style library manager, we can

Content

Components

Components is designed to reuse graphics.

Once you make something a component, you can create instances of it, which are essentially connected copies of that component. So if you update the design of the original component, the instances will reflect that change. For example, insert a new tab-item into a tab-bar component, this item will appear in any instance in any pages.

Note: Every instance is just a linkage to the original one, until this instance has been modified. Modification of an instance will make local copy of it, then modify this copy only. So, modification of an instance doesn't update its original one automatically. We can publish a modification, in other words, update its orginal one, then apply to all of its instances automatically.

Create, Link/Detach

Click an object, then

Rename, Remove

In the component library manager, we can

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.

Accordingly, there are two kinds of actions in Xpage:

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.

Action Condition

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.

Action Condition

Supported Conditions

Conditions:And / Or?

Content

Event

Page Events

Page Events

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

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:

Content

General Events

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

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.

💡Tips: To open the Object Action Inspector, click the object, then click the Action on the menu.

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.

💡Tips: What's happening when click the Link option on object menu? For most objects, it will setup the first responding action for the touch event. It will be set to Segue. For Table & Collection, it will setup the target page of the first element.

Hotspot based

Hotspot

For a single large object, such as photo or screen-shot image, some invisible hot-spot objects are used.
  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.

Segue
Pushes a page onto the stack.

Segue
Dismiss removes the top page from the stack and makes the new top of the stack the active page. If the page at the top of the stack is the last page, this method does nothing.

Content

Input Real Data

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

input value

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:

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:

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.

image interaction
💡Tips: If both the Choose from Album and the Take Photo are enabled, Xpage will present a action sheet to choose one of them at presentation mode.
image interaction

Content

Change Layer

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

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.
label

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:

Parameters that are supported by most of animation:

animation curve

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.

play video

Content

Use Cases

Make phone call

To make phone call from App prototypes:

input value
  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.
Phone Call
💡Tips: To make phone call on iPad or iPod touch, an iPhone must be signed in with the same Apple ID for FaceTime and iCloud to make phone calls. This iPhone will need to be on the same local network as the device which this app running on. Or else, phone calls will be not available.

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.
    QR-code Scanner
  2. Insert a WebView object, then enable the Bond to Var 1 for it too. Then, enable the Export Title to Variable 1 attribute.
    Webview
  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 .
    Title Label

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.

Title 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

Open Others Apps

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

Clipboard Actions

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,

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?

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?

Q: Have purchased and activated the Ultimate. All features are unlocked already. But still can not use some of assets?

A: 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 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.

Gestures in Presentation

Some gestures applied when presenting a project.

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 between graphics. 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.

Tips: The canvas can be moved by Arrow keys ONLY IF the canvas is focused. Click canvas to focus the canvas. The graphics on the canvas can be moved ONLY IF these graphics are focused. Click the graphics on the canvas to focus them.
Tips: Shortcuts to move graphic(s) are available ONLY IF these graphics doesn't apply auto(dynamic)-layout.
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.

TextFields with Stepper
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