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.

note

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.

note

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.

note

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.

note

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.