Difference between revisions of "Pages"
| (41 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
| − | [[Category: | + | [[Category:User Interface]] |
| − | + | Interfaces are organized in pages. | |
| − | + | There are three types of pages: '''[[#Menu|menu]]''', '''[[#Page|page]]''', '''[[#Overlay|overlay]]''', '''[[#Popup|popup]]'''. | |
| + | |||
| + | Each page is identified by an '''id'''. The "menu" and "overlay" ids are reserved for '''menu''' and '''overlay''' pages. | ||
| + | |||
| + | Page ids are always automatically prefixed with "page:", so to set an attribute with a UISet, use the full id (ex. "page:menu"). | ||
| + | |||
| + | If the project supports the orientation mode, pages (all but popups) can have two versions with the same id and an orientation that can be portrait or landscape. When opening a page with a specific id, the page with the corresponding id and current orientation will be chosen. If it's missing, the page with same id but different or missing orientation value will be chosen instead. | ||
| + | |||
| + | Pages (of '''page''' and '''menu''' types) can also have custom gestures defined with the '''gestures''' attribute. | ||
| + | |||
| + | Performing a gesture when a popup is open will close it. | ||
== Menu == | == Menu == | ||
| − | + | Main page of the project. The home link on the interface's top bar leads to this page. | |
| − | Main page of the project. | ||
There has to be one menu in each project. | There has to be one menu in each project. | ||
There can be a landscape and a portrait version, specified with an attribute. | There can be a landscape and a portrait version, specified with an attribute. | ||
=== Parameters === | === Parameters === | ||
| + | *'''page type''': menu, page, overlay or popup | ||
| + | *'''orientation''': if the project is orientation enabled, specifies the orientation (landscape or portrait) | ||
*'''gestures''': list of gestures that can be performed on the page (see [[gestures]]) | *'''gestures''': list of gestures that can be performed on the page (see [[gestures]]) | ||
| Line 18: | Line 29: | ||
... | ... | ||
(endofmenu) | (endofmenu) | ||
| − | + | E.g. | |
(menu) | (menu) | ||
... | ... | ||
| Line 30: | Line 41: | ||
A generic page, identified by a name. | A generic page, identified by a name. | ||
If the project is orientation-enabled, the orientation can be specified (if omitted, the default is landscape). | If the project is orientation-enabled, the orientation can be specified (if omitted, the default is landscape). | ||
| + | In this mode, rotating the device will show the page with the same id and matching orientation, if it exists. | ||
| + | If an "alternative page" is specified, rotating the device will show the specified page. | ||
| + | |||
=== Parameters === | === Parameters === | ||
| − | *'''page type''': | + | *'''page type''': menu, page, overlay or popup |
| + | *'''id''': identifies the page. It's used on [[link]] objects to link it | ||
| + | *'''title''': title shown at the top of the page, if the skin includes it | ||
*'''orientation''': if the project is orientation enabled, specifies the orientation (landscape or portrait) | *'''orientation''': if the project is orientation enabled, specifies the orientation (landscape or portrait) | ||
| + | *'''locations''': locations assigned to this page | ||
| + | *'''protected''': can be null or pin. If set to "pin", the user's PIN is requested when entering the page | ||
| + | *'''alternative page''': if the project is orientation enabled, specifies the id of a page with an opposed orientation: when the device is rotated, this is the page that will be displayed | ||
*'''gestures''': list of gestures that can be performed on the page (see [[gestures]]) | *'''gestures''': list of gestures that can be performed on the page (see [[gestures]]) | ||
| + | *'''scope list''': list of scope ids | ||
=== Syntax === | === Syntax === | ||
(page) defines the beginning of the page. Orientation is specified as (page#landscape) or (page#portrait) when the project is orientation-enabled. | (page) defines the beginning of the page. Orientation is specified as (page#landscape) or (page#portrait) when the project is orientation-enabled. | ||
| − | (endofpage) defines the end of the page. | + | (endofpage) defines the end of the page. Locations, gestures and scope are defined through meta tags. |
| − | (page[#<orientation>]) | + | (page[#<orientation>] <id>; <title>; [<protected>]; [<alternative page>]) |
| + | [(#location <locations>)] | ||
| + | [(#gestures <gestures>)] | ||
| + | [(#scope <scope list>)] | ||
... | ... | ||
(endofpage) | (endofpage) | ||
| − | + | E.g. | |
| − | (page) | + | (page page1; Page 1) |
... | ... | ||
(endofpage) | (endofpage) | ||
| − | (page#portrait) | + | (page#portrait; Page 1 Portrait;; menu) |
... | ... | ||
(endofpage) | (endofpage) | ||
| − | + | ||
=== UI Attributes === | === UI Attributes === | ||
| − | {{ | + | Page ids are always automatically prefixed with "page:", so to set an attribute with a UISet, use the full id (ex. "page:menu"). |
| + | {{UI Object Attributes (Page)}} | ||
| + | |||
| + | == Overlay == | ||
| + | A special page that is always visible on top of the other pages. Place here objects that stay visible throughout the interface. | ||
| + | There can be a landscape and a portrait version, specified with an attribute. | ||
| − | |||
| − | |||
| − | |||
=== Parameters === | === Parameters === | ||
| − | *'''page type''': | + | *'''page type''': menu, page, overlay or popup |
*'''orientation''': if the project is orientation enabled, specifies the orientation (landscape or portrait) | *'''orientation''': if the project is orientation enabled, specifies the orientation (landscape or portrait) | ||
| − | |||
=== Syntax === | === Syntax === | ||
| − | ( | + | (overlay) defines the beginning of the page. Orientation is specified as (overlay#landscape) or (overlay#portrait) when the project is orientation-enabled. |
| − | ( | + | (endofoverlay) defines the end of the page. |
| − | ( | + | (menu[#<orientation>]) |
... | ... | ||
| − | ( | + | (endofoverlay) |
| − | + | E.g. | |
| − | ( | + | (overlay) |
... | ... | ||
| − | ( | + | (endofoverlay) |
| − | (page# | + | (overlay#portrait) |
| + | ... | ||
| + | (endofoverlay) | ||
| + | |||
| + | == Popup == | ||
| + | A popup page, identified by a name and a popup type: simple or modal. | ||
| + | It can have a close button, if it's necessary or if specified by the ''closebutton'' attribute. | ||
| + | ==== Simple Popup ==== | ||
| + | A simple popup opens up next to the object that generated it (eg. a [[link]] or [[user]] object) and it's closed by the same object. If there's no space, the popup will be opened at the center of the page, with a close button to close it. | ||
| + | ==== Modal Popup ==== | ||
| + | A modal popup is an exclusive popup that will open in the center of the page, while the background is grayed out. | ||
| + | To close it, click on the background or on the close button (if it's visible). | ||
| + | |||
| + | === Parameters === | ||
| + | *'''page type''': menu, page, or popup | ||
| + | *'''id''': identifies the page. It's used on [[link]] objects to link it | ||
| + | *'''title''': title shown at the top of the page, if the skin includes it | ||
| + | *'''size''': width and height of the popup | ||
| + | *'''type''': popup type: simple or modal. The default is simple | ||
| + | |||
| + | === Syntax === | ||
| + | (popup) defines the beginning of the page, (endofpopup) defines the end of the page. | ||
| + | A size [[Directives|directive]] is used to define the popup's size. | ||
| + | (popup <id>; <title>) | ||
| + | (#size <width>x<height>) | ||
... | ... | ||
| − | ( | + | (endofpopup) |
| − | + | E.g. | |
| + | (popup mypopup; My Title; modal) | ||
| + | (#size 300x250) | ||
| + | ... | ||
| + | (endofpopup) | ||
| + | |||
=== UI Attributes === | === UI Attributes === | ||
| − | {{ | + | Popup ids are always automatically prefixed with "page:", so to set an attribute with a UISet, use the full id (ex. "page:mypopup"). |
| + | {{UI Object Attributes (Page)}} | ||
| + | |||
| + | ==== Popup attributes ==== | ||
| + | {| class="wikitable" | ||
| + | !Name | ||
| + | !Value | ||
| + | !Description | ||
| + | |- | ||
| + | |rowspan="2"|popuptype | ||
| + | |simple | ||
| + | |[[#Simple Popup|Simple Popup]] | ||
| + | |- | ||
| + | |modal | ||
| + | |[[#Modal Popup|Modal Popup]] | ||
| + | |- | ||
| + | |||
| + | |dirs | ||
| + | |list of any directions (up,right,down or left) | ||
| + | |Specify the priority by which the opening direction of the popup is chosen. E.g. if dirs is ''up,down,right'', when opening the popup it will try to position it on top of the object that generated it. If there's not enough space (if the popup exceeds the page area), it will try opening it below the object. If there's still not enough space, it will try on the right. If all the directions fail, it will open it at the center of the page, showing a close button to close it. | ||
| + | |- | ||
| + | |||
| + | |rowspan="2"|locked | ||
| + | |true | ||
| + | |Locked: the close button is hidden and the popup can't be closed by a back gesture or by clicking on the background (if it's a modal popup). | ||
| + | |- | ||
| + | |false | ||
| + | |Default behaviour: the popup can be closed by a back gesture or by clicking on the background (if it's a modal popup) | ||
| + | |- | ||
| + | |||
| + | |||
| + | |rowspan="3"|closebutton | ||
| + | |auto | ||
| + | |The close button is visible only when needed (on modal popups and on simple popups that are shown at the center of the page) | ||
| + | |- | ||
| + | |true | ||
| + | |The close button is always visible | ||
| + | |- | ||
| + | |false | ||
| + | |The close button is never visible | ||
| + | |- | ||
| + | |||
| + | |width | ||
| + | |<width> | ||
| + | |Popup's width in pixels | ||
| + | |- | ||
| + | |||
| + | |height | ||
| + | |<height> | ||
| + | |Popup's height in pixels | ||
| + | |- | ||
| + | |} | ||
| + | |||
| + | == Watch Page == | ||
| + | An [[Apple Watch Interface]], available through the [[HSYCO App for iOS Devices]]. | ||
| + | The Project Editor allows the creation of this page in the same way as other pages, but it won't generate the same structure in the index.hsm file. Instead, it generates a [[Project#Apple_Watch_support.2C_the_app_watch_attribute|Project UISet]]. | ||
| + | |||
| + | A Watch page has specific objects, different than normal pages. | ||
| + | To read more about creating and using the Watch interface, read the [[Apple Watch Interface]] documentation. | ||
Latest revision as of 09:17, 23 June 2020
Interfaces are organized in pages. There are three types of pages: menu, page, overlay, popup.
Each page is identified by an id. The "menu" and "overlay" ids are reserved for menu and overlay pages.
Page ids are always automatically prefixed with "page:", so to set an attribute with a UISet, use the full id (ex. "page:menu").
If the project supports the orientation mode, pages (all but popups) can have two versions with the same id and an orientation that can be portrait or landscape. When opening a page with a specific id, the page with the corresponding id and current orientation will be chosen. If it's missing, the page with same id but different or missing orientation value will be chosen instead.
Pages (of page and menu types) can also have custom gestures defined with the gestures attribute.
Performing a gesture when a popup is open will close it.
Contents
Menu
Main page of the project. The home link on the interface's top bar leads to this page. There has to be one menu in each project. There can be a landscape and a portrait version, specified with an attribute.
Parameters
- page type: menu, page, overlay or popup
- orientation: if the project is orientation enabled, specifies the orientation (landscape or portrait)
- gestures: list of gestures that can be performed on the page (see gestures)
Syntax
(menu) defines the beginning of the page. Orientation is specified as (menu#landscape) or (menu#portrait) when the project is orientation-enabled. (endofmenu) defines the end of the page.
(menu[#<orientation>]) ... (endofmenu)
E.g.
(menu) ... (endofmenu) (menu#portrait) ... (endofmenu)
Page
A generic page, identified by a name. If the project is orientation-enabled, the orientation can be specified (if omitted, the default is landscape). In this mode, rotating the device will show the page with the same id and matching orientation, if it exists. If an "alternative page" is specified, rotating the device will show the specified page.
Parameters
- page type: menu, page, overlay or popup
- id: identifies the page. It's used on link objects to link it
- title: title shown at the top of the page, if the skin includes it
- orientation: if the project is orientation enabled, specifies the orientation (landscape or portrait)
- locations: locations assigned to this page
- protected: can be null or pin. If set to "pin", the user's PIN is requested when entering the page
- alternative page: if the project is orientation enabled, specifies the id of a page with an opposed orientation: when the device is rotated, this is the page that will be displayed
- gestures: list of gestures that can be performed on the page (see gestures)
- scope list: list of scope ids
Syntax
(page) defines the beginning of the page. Orientation is specified as (page#landscape) or (page#portrait) when the project is orientation-enabled. (endofpage) defines the end of the page. Locations, gestures and scope are defined through meta tags.
(page[#<orientation>] <id>; <title>; [<protected>]; [<alternative page>]) [(#location <locations>)] [(#gestures <gestures>)] [(#scope <scope list>)] ... (endofpage)
E.g.
(page page1; Page 1) ... (endofpage) (page#portrait; Page 1 Portrait;; menu) ... (endofpage)
UI Attributes
Page ids are always automatically prefixed with "page:", so to set an attribute with a UISet, use the full id (ex. "page:menu").
Page attributes
| Name | Value | Description |
|---|---|---|
| focus | <field id> | If the page is open or whenever the page is opened, focus the field with the specified id. |
| <empty> | No field will gain focus when the page is opened (default value). | |
| gestures | list of ids and values | List of gestures.
E.g. swipeup=page:menu; pinchin=user |
Overlay
A special page that is always visible on top of the other pages. Place here objects that stay visible throughout the interface. There can be a landscape and a portrait version, specified with an attribute.
Parameters
- page type: menu, page, overlay or popup
- orientation: if the project is orientation enabled, specifies the orientation (landscape or portrait)
Syntax
(overlay) defines the beginning of the page. Orientation is specified as (overlay#landscape) or (overlay#portrait) when the project is orientation-enabled. (endofoverlay) defines the end of the page.
(menu[#<orientation>]) ... (endofoverlay)
E.g.
(overlay) ... (endofoverlay) (overlay#portrait) ... (endofoverlay)
Popup
A popup page, identified by a name and a popup type: simple or modal. It can have a close button, if it's necessary or if specified by the closebutton attribute.
Simple Popup
A simple popup opens up next to the object that generated it (eg. a link or user object) and it's closed by the same object. If there's no space, the popup will be opened at the center of the page, with a close button to close it.
Modal Popup
A modal popup is an exclusive popup that will open in the center of the page, while the background is grayed out. To close it, click on the background or on the close button (if it's visible).
Parameters
- page type: menu, page, or popup
- id: identifies the page. It's used on link objects to link it
- title: title shown at the top of the page, if the skin includes it
- size: width and height of the popup
- type: popup type: simple or modal. The default is simple
Syntax
(popup) defines the beginning of the page, (endofpopup) defines the end of the page. A size directive is used to define the popup's size.
(popup <id>; <title>) (#size <width>x<height>) ... (endofpopup)
E.g.
(popup mypopup; My Title; modal) (#size 300x250) ... (endofpopup)
UI Attributes
Popup ids are always automatically prefixed with "page:", so to set an attribute with a UISet, use the full id (ex. "page:mypopup").
Page attributes
| Name | Value | Description |
|---|---|---|
| focus | <field id> | If the page is open or whenever the page is opened, focus the field with the specified id. |
| <empty> | No field will gain focus when the page is opened (default value). | |
| gestures | list of ids and values | List of gestures.
E.g. swipeup=page:menu; pinchin=user |
Popup attributes
| Name | Value | Description |
|---|---|---|
| popuptype | simple | Simple Popup |
| modal | Modal Popup | |
| dirs | list of any directions (up,right,down or left) | Specify the priority by which the opening direction of the popup is chosen. E.g. if dirs is up,down,right, when opening the popup it will try to position it on top of the object that generated it. If there's not enough space (if the popup exceeds the page area), it will try opening it below the object. If there's still not enough space, it will try on the right. If all the directions fail, it will open it at the center of the page, showing a close button to close it. |
| locked | true | Locked: the close button is hidden and the popup can't be closed by a back gesture or by clicking on the background (if it's a modal popup). |
| false | Default behaviour: the popup can be closed by a back gesture or by clicking on the background (if it's a modal popup) | |
| closebutton | auto | The close button is visible only when needed (on modal popups and on simple popups that are shown at the center of the page) |
| true | The close button is always visible | |
| false | The close button is never visible | |
| width | <width> | Popup's width in pixels |
| height | <height> | Popup's height in pixels |
Watch Page
An Apple Watch Interface, available through the HSYCO App for iOS Devices. The Project Editor allows the creation of this page in the same way as other pages, but it won't generate the same structure in the index.hsm file. Instead, it generates a Project UISet.
A Watch page has specific objects, different than normal pages. To read more about creating and using the Watch interface, read the Apple Watch Interface documentation.
