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

Some devices equip with a high-resolution screen. It is possible to design prototypes for lower resolution screen on it. In this case, we have to choice the preferred device for our new project.

Limits when crossing devices

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

Content

Pages

artboards The project view is a gallery to displays a thumbnail for each of your pages.

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

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.

Content

Create New Page

New Page

Tap the ➕ button in the bottom-center of the screen to create a new page.

Content

Rename Page

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

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

Project Profile

Project Profile

In the pages of a project, tap the More button to enter the 'Project Profile'.

In the 'Project Profile', we can view and edit more information of current project, export and share it.

Content

Project Presentation

Start Presentation

Present

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.

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. We also can shake device to quit present mode if the shaking event hasn't been used to trigger any action.

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

Content

Project Exporting

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://PROTOTYPENAME. The PROTOTYPENAME means the name of your prototype document.

💡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

Enter Project Profile , tap the Share button at top-right corner.

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.

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

Content

Page Editor

Tool Bar

Toolbar locate at the top of the page inspector.

toolbar

back Return: Leave this editor.

insert Insert: Pop the object panel, then pick up one and insert into page.

layer Layer: Pop the layers inspector.

style Style: Pop the attribute inspector for the selected object if something selected. Or else, pop the page inspector.

event Event: Design page events and their actions.

zoom Zoom: Zoom the canva.

preference Preference: Pop the preference inspector.

Content

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

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.

Click Layer List on the toolbar at bottom of screen.

Object List

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.

对象列表

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 Object 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

Zoom your design as your wish.

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

Content

Preferences

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

Content

Gestures

Gestures in Editing

Some gestures applied when editing a page.

Gestures in Presentation

Some gestures applied when presenting a project.

Content

Object Basics

An object is any item you place on a page, including images(photos), text, shapes, tables, and charts.

Selecting

Selecting Single Object via Tap

Selecting is very easy in Xpage. To select an object on the page, just tap it. Tap it again to unselect it.

💡Tips: We can select any object by tap it if it is unlocked. If there are lots of adjacent, sometimes overlapped, objects on the page, Lock the unrelated objects by Object List before selecting.

Selecting Single Object 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.

Selecting Multiple Objects via Click One by One

Touch all of targets we want one by one, until the last one has been added into selection.

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.

Objects Multi-Selection

Selecting Multiple Objects via Layer List

Finally, the Object List also can be used to select more than one object at same time.

Cancel Selections

To cancel a selection, we can tap it again. Tap the blank area will cancel all selections.

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: Don't select it before drag it. Object will NOT have a response to a gesture of dragging after it is selected.
💡Tips: Optimize your designs to make it fast. Avoid large images, disable autosave, make your operations more comfortable.
💡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.

Auto Snaping

Auto-snaping are supported during the drop and drag.

Multi-Selection

Move Precisely

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

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

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.

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

To erases the last change done to the document reverting it to an older state.

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.

Modify the grouped objects

To rename/modify the items that were grouped, or change layout of a compound item:

Multi-Selection

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

Image Fill

In Xpage, We can fill a shape object with an image.

image fill

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

Conent Mode

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

label-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. Please note that there must be some spare space on the direction of alignment to contain the text content before the text alignment.

Format

label-style

underline

single underline and double underline.

strikethrough

strike-through.

autowrap

auto-wrap if the height is large enough.

Data Source

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

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

page action property

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.

回到目录

Status Bar

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

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.

image stretching
image stretching

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

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. This operation is not related to the Style system.

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

Each variable is a data buffer. If an object is data-driven, it support data binding that up to one or more variables.

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

General Variables

There are three general-purpose variables in Xpage. They are ofen used to change text or numbers dynamically.

data binding

Content

Color Variable

The variable of color is often used to change the color of during the 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 changing the color of the variable, then post Event 1.

Content

Fill Variable

In presentaion, a variable of fill is used to store a fill. We ofen 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 changing the fill of the variable, then post Event 1.

Instead of the Color Variable, the variable of fill can filled by solid color, gradient color or pattern image.

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.

回到目录

Conditions for Actions

We can set one or more conditions for our actions.

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

When event is triggered, take a sequence of actions. Each action is taken ONLY IF all of its conditions are met.

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 Page 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?
  1. For most objects, it will setup the first responding action for the touch event. It will be set to Segue.
  2. 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.

Hotspot
Pushes a page onto the stack.

Hotspot
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. Open quick menu > preferences > object context menu > action, enable it.
  4. Insert a basic object, such as rectangle, oval or image, etc.
  5. Click this object to show its context menu, click act > auth via bio, enable it. Post some events as your wish.
  6. Handle the events from you.
  7. 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.

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.
Title Label
💡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

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

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

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