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.
the layout view should be parse differently if the page is the last child of the tree
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 |
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 |
The audio page have only the list view available
The grid view in the Image Gallery is a 3 columns view or 4 columns on big devices
The grid view for news page is a view where the title is overlapped on the image bottom
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":{ "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 } |
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 |
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 |
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 |
Premesse:
1 anche in caso di overlay = true
NOTA (in caso di layout list, fixedmenu, lowpanel4, lowpanel5): in questi casi devono essere utilizzate solo le chiavi di seguito specificate
un array di interi contenente larghezza ed altezza dell'immagine, da utilizzare sempre in caso di
"overlay" = true e "img-style" = "fill-resize" ?
Il primo elemento dell'array rappresenta la larghezza, il secondo l'altezza [width,height]
chiave | valore | ruolo |
---|---|---|
text_position | "top" | "bottom" | "right" | "left" | posizione del blocco del testo rispetto all'immagine |
cell_valign | "top" | "middle" | "bottom" | allineamento del contenuto della cella rispetto ad essa
|
text_valign | "top" | "middle" | "bottom" | allineamento verticale del blocco del testo rispetto alla cella da utilizzare soltanto
|
img_style | "default" | "fill" | "fill-resize" | riempimento dell'immagine rispetto alla cella |
imgsize | [int,int] default [80,80] | |
img_valign | "top" | "middle" | "bottom" | allineamento verticale dell'immagine rispetto alla cella da utilizzare soltanto
|
img_halign | "left" | "center" | "right" | allineamento orizzontale dell'immagine rispetto alla cella da utilizzare soltanto
|
overlay | true | false | overlay del testo rispetto alla cella |
text_align | "left" | "center" | "right" | allineamento del contenuto all'interno del blocco del testo |
bg_bgcolor (era:bgcolor) | string | colore da utilizzare come sfondo della cella |
bg_bgalpha (era: bgalpha) | float | trasparenza del colore di sfondo della cella |
text_bgcolor | string | colore da utilizzare come sfondo del blocco di testo |
text_bgalpha | float | trasparenza del colore di sfondo del blocco di testo |
title_color | string | colore da utilizzare per il titolo della cella |
title_alpha | float | trasparenza del colore per il titolo della cella |
desc_color | string | colore da utilizzare per la descrizione della cella |
desc_alpha | float | trasparenza del colore per la descrizione della cella |
tablet_bgcolor | string | colore da utilizzare come sfondo della cella nei tablet |
tabtet_bgalpha | float | trasparenza del colore di sfondo della cella nei tablet |
tablet_title_color | string | colore da utilizzare per il titolo della cella nei tablet |
tablet_title_alpha | float | trasparenza del colore per il titolo della cella nei tablet |