Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 28 Current »

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

ValueDescriptionException
lista list viewdefault
grid1a grid view with 1 column 
grida grid view with 2 columns 
grid3grid view with 3 columns 
grid4grid view with 4 columns 
grid5grid view with 5 columns 
tabslidetop slider 
lowpaneltab panelonly available on the first page
fixedmenuthe app have a fixed menu with a list layout  accessible using the top left buttononly available on the first page
fixedmenu-gridthe app have a fixed menu with a grid layout accessible using the top left buttononly available on the first page

 

Content Page

ValueDescriptionException
listthe page should be represented with a list viewdefault
gridthe page should be represented with a grid view 
sliderthe 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
rotationbooleanenable rotation (global value to set on homepage)
hideTitlebooleanhide cell title
hideDescriptionbooleanhide cell description
nrowsintnumbor of visibile rows
row_heightint

rows height

valign"top" | "middle" | "bottom"

table vertical alignment

halign"left" | "center" | "right"

table horizontal alignment

widthint (Es. 80 ->80%)table width
scroll"vertical" | "horizontal"

scrolling direction

cell_margin[int,int,int,int]

cell margins [margintop, marginright, marginbottom, marginleft]

colorschemesee below

background color for odd / even rows

  • cella (più importante) > colonna > riga (meno importante)
bannershash (see below)banners options
tabslidehash (see below)tabslide options
lowpanelhash (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

keyvaluedescription
row_odd_bgcolorstringodd row background color
row_odd_bgalphafloatodd row background color alpha
row_even_bgcolorstringeven row background color
row_even_bgalphafloateven row background color alpha
col_odd_bgcolorstringodd column background color
col_odd_bgalphafloatodd column background color apha
col_even_bgcolorstringeven column background color
col_even_bgalphafloateven column background color apha

tabslide

key
value
description

bg_bgcolor 

stringbackground color

bg_bgalpha 

floatbackground color alpha

text_color

stringtext color

text_alpha

floattext color alpha

selected_color

stringselected element color

selected_alpha

floatselected element color alpha

lowpanel

chiave
valore
ruolo

bg_bgcolor 

stringbackground color

bg_bgalpha 

floatbackground color alpha

text_color

stringtext color

text_alpha

floattext color alpha
selected_bg_bgcolorstringselected background color
selected_bg_bgalphafloatselected background color alpha
selected_text_colorstringselected text color
selected_text_alphafloatselected 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")

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, fixedmenutext_position (con valore di default "right"), text_align (con valore di default "left"), text_bgcolortext_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_bgcolortext_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

  • se "text-posizion" = "left" | "right" e "overlay" = false, viene utilizzato come valore di default di "text-valign" e "img-valign" se questi non sono specificati in aggiunta
  • se "text-position" = "top" | "bottom" e "overlay" = false, viene utilizzato come valore di allineamento di entrambi immagine e testo
text_valign"top" | "middle" | "bottom"allineamento verticale del blocco del testo rispetto alla cella

da utilizzare soltanto

  • se "text-position" = "left" | "right"
  • se "overlay" = true
img_style"default" | "fill" | "fill-resize"

riempimento dell'immagine rispetto alla cella

Illustrazione

imgsize[int,int] default [80,80]
img_valign"top" | "middle" | "bottom"

allineamento verticale dell'immagine rispetto alla cella

da utilizzare soltanto

  • se "text-position" = "left" | "right"
  • se "overlay" = true
img_halign"left" | "center" | "right"

allineamento orizzontale dell'immagine rispetto alla cella

da utilizzare soltanto

  • se "text-position" = "top" | "bottom"
  • se "overlay" = true
overlaytrue | 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)stringcolore da utilizzare come sfondo della cella
bg_bgalpha (era: bgalpha)floattrasparenza del colore di sfondo della cella
text_bgcolorstringcolore da utilizzare come sfondo del blocco di testo
text_bgalphafloattrasparenza del colore di sfondo del blocco di testo
title_colorstringcolore da utilizzare per il titolo della cella
title_alphafloattrasparenza del colore per il titolo della cella
desc_colorstringcolore da utilizzare per la descrizione della cella
desc_alphafloattrasparenza del colore per la descrizione della cella
tablet_bgcolorstringcolore da utilizzare come sfondo della cella nei tablet
tabtet_bgalphafloattrasparenza del colore di sfondo della cella nei tablet
tablet_title_colorstringcolore da utilizzare per il titolo della cella nei tablet
tablet_title_alphafloattrasparenza del colore per il titolo della cella nei tablet
  • No labels