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
Premesse:
- tutte le chiavi seguenti sono contenute in una chiave "cell" che si trova nella hash della categoria (allo stesso livello di layoutoption)
- il blocco del testo avrà sempre larghezza uguale a tutto lo spazio disponibile nella cella (100% della cella quando "text-position" = "top" | "bottom" 1, la larghezza della cella meno la larghezza dell'immagine quando "text-position" = "left" | "right")
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
- list, fixedmenu: text_position (con valore di default "right"), text_align (con valore di default "left"), text_bgcolor + text_bgalpha, title_color + title_alpha, desc_color + desc_alpha), imgsize
- lowpanel4, lowpanel5: text_position (con valore di default "bottom"), text_align (con valore di default "center"), text_bgcolor + text_bgalpha)
un array di interi contenente larghezza ed altezza dell'immagine, da utilizzare sempre in caso di
- "overlay" = false
- "overlay" = true e "img-style" = "default"
"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 |