Page
Projects are organized in pages. There are three types of pages: page, overlay,
popup.
Page IDs are always automatically prefixed with "page:", so to set an attribute with a
UISet, use the full id (ex. "page:menu").
If a page is set as Home Page
in the project's attribute, it's the first page that
appears when the UI is opened.
Two versions of the same page can be created using the same page ID, one for portrait
and one for landscape. When the device orientation changes, the UI navigates to the
corresponding page.
Each page can be protected with a password, and can be assigned to one or more
locations.
Pages are part of the navigation stack, so they appear in the breadcrumb and can be
navigated to.
Follow this tutorial for more detailed info:
Create your first project with HSYCO
Attributes
Common
ID
Sets the object's ID.
The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.
The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.
IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dinamically attached to a set of attribute values.
E.g. the following Value Binding switches the ID of the object between mybutton1
and mybutton2
based on the value of the UISet button.address
:
Value binding:
="mybutton" + ui('button', 'address')
UISet:
UISet('button', 'address', '1')
switches the ID to mybutton1
UISet('button', 'address', '2')
switches the ID to mybutton2
Title
The page's title. Appears in the UI header and breadcrumb.
Attribute Values
Value | Description |
---|---|
<String> | Page title. |
Protected
If true, the user's credentaisl are requested when entering the page.
The default
value is: false
.
Attribute Values
Value | Description |
---|---|
false | Default value. Page is not protected. |
true | Page is protected. |
Orientation
Specifies the device orientation associated to the page. When the device orientation changes, the UI navigates to a page with the same ID as the current one, but with the corresponding orientation, if there's one.
The default
value is: landscape
.
Attribute Values
Value | Description |
---|---|
landscape | Default value. Landscape orientation. |
portrait | Portrait orientation. |
Navigation
Overlay
Specified the id of an overlay or "none" if no overlay should appear on top of this page.
The default
value is: default
.
Attribute Values
Value | Description |
---|---|
none | No overlay will appear on top of this page. |
<Overlay ID> | ID of an overlay that appears on top of this page. |
Parent Page
Specifies the ID of another page. Sets the page as the children of the specified parent page. Used to identify hierarchy in nav and breadcrumb objects.
This attribute is static
. Its value can't be changed dynamically with a uiSet command or with a value binding.
Attribute Values
Value | Description |
---|---|
<Page ID> | The parent page's ID. |
Portrait Page
Specifies the ID of a portrait page that is shown when the device orientation changes to portrait.
Attribute Values
Value | Description |
---|---|
<Page ID> | The portrait page's ID. |
Landscape Page
Specifies the ID of a landscape page that is shown when the device orientation changes to landscape.
Attribute Values
Value | Description |
---|---|
<Page ID> | The landscape page's ID. |
Options
Focus
Specifies the ID of a field that gains autofocus if the page is open or whenever the page is opened.
Attribute Values
Value | Description |
---|---|
<ID> | Target ID of the field to focus. |
History
Specifies whether the page is added to the history stack when opened.
Useful for pages that are opened from a link or command, but shouldn't be added to the history stack.
The default
value is: true
.
Attribute Values
Value | Description |
---|---|
true | Default value. Page is added to the history stack. |
false | Page is not added to the history stack. |
Transition
Specifies the transition animation when opening the page.
It's only available when the project's Page Transitions
attribute is set to true
.
The default
value is: auto
.
Attribute Values
Value | Description |
---|---|
auto | Default value. Auto, based on history and Parent Page . |
none | No animation. |
back | Fade and slide from left. |
forward | Fade and slide from right. |
up | Fade and slide from bottom. |
down | Fade and slide from top. |
Locations
Locations assigned to this page.
Attribute Values
Value | Description |
---|---|
<List of locations> | Comma-separated list of locations. |
Gestures
Comma separated list of gestures assigned to the page.
Scope
Specifies a scope.
If set, uiSets with the same scope will be enabled.
The scope is defined by the project's scope, plus the scope of the current page.
This attribute is static
. Its value can't be changed dynamically with a uiSet command or with a value binding.
Attribute Values
Value | Description |
---|---|
<string> | The name of a scope. |
<list> | A comma-separated list of scopes. |
Heartbeat
Specifies the frequency in seconds at which a heartbeat command is sent to the server. This command serves to indicate that the user is still active on the page, and is primarily used to monitor user activity on the server side.
When set to 0, no heartbeat command will be sent. When the user closes the page, the heartbeat command will cease.
The default command's name and parameters are:
- name: <project id>
- parameter: hearbeat/<page id> or, if the project is orientation-enabled:
- parameter: hearbeat/<page id>#<orientation>
Command Name and parameters can be changed with the following attributes: Hearbeat name, hearbeat parameter.
The default
value is: 0
.
Attribute Values
Value | Description |
---|---|
0 | Default value. No heartbeat. |
<int> | Hearbeat frequency in seconds. |
Heartbeat Name
Specifies the name of the heartbeat command.
The default
value is: =project:id
.
Attribute Values
Value | Description |
---|---|
<string> | Hearbeat command's name. |
Heartbeat Parameter
Specifies the parameter of the heartbeat command.
The default
value is: =heartbeat/{id}
.
Attribute Values
Value | Description |
---|---|
<string> | Hearbeat command's parameter. |
Background
Background Color
Specifies a background color that covers the area behind the page.
Background Image
Specifies an image to show as page background.
Attribute Values
Value | Description |
---|---|
<image path> | Path to the image file. Files are searched inside the project's directory first, then inside the www/img directory. |
Background Fit
Specifies how the image should be resized to fit its container.
The default
value is: cover
.
Attribute Values
Value | Description |
---|---|
fill | The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit. |
contain | The image keeps its aspect ratio, but is resized to fit within the given dimension. |
cover | Default value. The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit. |
none | The image is not resized. |
Meta
Comment
Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.
This attribute is static
. Its value can't be changed dynamically with a uiSet command or with a value binding.
Exclude
Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.
The default
value is: false
.
This attribute is static
. Its value can't be changed dynamically with a uiSet command or with a value binding.
Attribute Values
Value | Description |
---|---|
false | Default value. Object is included in the UI. |
true | Object is excluded from the UI. |