Layout Definition
Each Page have a layout definition described in the layout and layoutoption keys.
The first page of the page have this infos in the App JSON root hash.
Layout key
the layout view should be parse differently if the page is the last child of the tree
Category Page
Value | Description | Exception |
---|---|---|
list | a list view | default |
grid1 | a grid view with 1 column | |
grid | a grid view with 2 columns | |
grid3 | grid view with 3 columns | |
grid4 | grid view with 4 columns | |
grid5 | grid view with 5 columns | |
tabslide | top slider | |
lowpanel | tab panel | only available on the first page |
fixedmenu | the app have a fixed menu with a list layout accessible using the top left button | only available on the first page |
fixedmenu-grid | the app have a fixed menu with a grid layout accessible using the top left button | only available on the first page |
Content Page
Value | Description | Exception |
---|---|---|
list | the page should be represented with a list view | default |
grid | the page should be represented with a grid view | |
slider | the page should show directly the first element content |
Audio Page
The audio page have only the list view available
Image Gallery Page
The grid view in the Image Gallery is a 3 columns view or 4 columns on big devices
News Page
The grid view for news page is a view where the title is overlapped on the image bottom
Layoutoption key
The layoutoption key is an hash containing information to extended the selected layout
key | value | description |
---|---|---|
rotation | boolean | enable rotation (global value to set on homepage) |
hideTitle | boolean | hide cell title |
hideDescription | boolean | hide cell description |
nrows | int | numbor of visibile rows |
row_height | int | rows height |
valign | "top" | "middle" | "bottom" | table vertical alignment |
halign | "left" | "center" | "right" | table horizontal alignment |
width | int (Es. 80 ->80%) | table width |
scroll | "vertical" | "horizontal" | scrolling direction |
cell_margin | [int,int,int,int] | cell margins [margintop, marginright, marginbottom, marginleft] |
colorscheme | see below | background color for odd / even rows
|
banners | hash (see below) | banners options |
tabslide | hash (see below) | tabslide options |
lowpanel | hash (see below) | lowpanel options |
fixedmenu_width | int | fixedmenu size in pixel |
banners
- banners are shown under the header bar;
- there can only be one banner of type "web" or "text", while if there are more "image" ones a horizontal slider is used;
- in case of type "web" or "text" the webview height is defined in %.
"banners":{ "portrait":[{ "type":"web", "url":"an_url", "height":20 },{ "type":"text", "txt":"base_64_encode_txt", "height":20 }], "landscape":[{ "type":"image", "url":"an_image_url" },{ "type":"image", "url":"another_image_url" }], "shadow":true|false }
Colorscheme
1 index based, so first row and column are odd
key | value | description |
---|---|---|
row_odd_bgcolor | string | odd row background color |
row_odd_bgalpha | float | odd row background color alpha |
row_even_bgcolor | string | even row background color |
row_even_bgalpha | float | even row background color alpha |
col_odd_bgcolor | string | odd column background color |
col_odd_bgalpha | float | odd column background color apha |
col_even_bgcolor | string | even column background color |
col_even_bgalpha | float | even column background color apha |
tabslide
key | value | description |
---|---|---|
bg_bgcolor | string | background color |
bg_bgalpha | float | background color alpha |
text_color | string | text color |
text_alpha | float | text color alpha |
selected_color | string | selected element color |
selected_alpha | float | selected element color alpha |
lowpanel
chiave | valore | ruolo |
---|---|---|
bg_bgcolor | string | background color |
bg_bgalpha | float | background color alpha |
text_color | string | text color |
text_alpha | float | text color alpha |
selected_bg_bgcolor | string | selected background color |
selected_bg_bgalpha | float | selected background color alpha |
selected_text_color | string | selected text color |
selected_text_alpha | float | selected text color alpha |
Cell
key | value | description |
---|---|---|
overlay | true | false | text overlayed on image |
text_position | "top" | "bottom" | "right" | "left" | position of the text relative to the image |
cell_valign | "top" | "middle" | "bottom" | vertical alignment of the cell content |
text_valign | "top" | "middle" | "bottom" | text vertical alignment |
img_style | "default" | "fill" | "fill-resize" | image styling |
imgsize | [int,int] default [80,80] | |
img_valign | "top" | "middle" | "bottom" | image vertical alignment |
img_halign | "left" | "center" | "right" | image horizontal alignment |
text_align | "left" | "center" | "right" | text alignment |
bg_bgcolor (era:bgcolor) | string | cell background color |
bg_bgalpha (era: bgalpha) | float | cell background color alpha |
text_bgcolor | string | cell text background color |
text_bgalpha | float | cell text background color alpha |
title_color | string | cell title color |
title_alpha | float | cell title color alpha |
desc_color | string | cell description color |
desc_alpha | float | cell description color alpha |
tablet_bgcolor | string | tablet cell background color |
tabtet_bgalpha | float | tablet cell background color alpha |
tablet_title_color | string | tablet cell title color |
tablet_title_alpha | float | tablet cell title color alpha |