Come creare un menu in c3

Continua la mia esplorazione di Svelte e mi sono lasciato un po’ distrarre. Uno dei motivi, se non il motivo principale, per il quale ho ricominciato ad aggiornare il mio blog è l’obbligarmi a concludere (in qualche forma) i progetti che comincio. Ho la tendenza a tralasciare i miei esperimenti quando sono quasi conclusi, quando mancano i dettagli più noiosi. Quindi ho dovuto sforzarmi per completare questo template. Ma è completato, è utilizzabile e penso che lo userò in qualche altro progetto.

Come dicevo la settimana scorsa il mio scopo è ottenere un metodo semplice per creare dei menù da usare in C3. Per farlo ho creato un componente riutilizzabile con Svelte, l’ho inserito in C3 e ho creato un progetto di Construct 3 per documentarne l’uso,

In questo post voglio riportare le basi di questo template. Servirà al me futuro per ricordare come creare un menù dinamico in Construct 3.

Per prima cosa mi servono due file: menu.js e menu.css. Sono due file creati e compilati con Svelte: contengono il codice necessario per gestire il menu.

Dopo averli importati in Construct posso cominciare a impostare il progetto. Il file CSS va caricato una sola volta, all’avvio:

Per quanto riguarda il file JS conviene registrarlo in un file con purpose “Imports for Events”:

import * as svelte from "./menu.js";

Per mostrare il menù è sufficiente una riga di codice:

menuSvelte.visible.true();

Allo stesso modo per nasconderlo basta

menuSvelte.visible.false();

Nel file di esempio creo diversi menù usando diverse tecniche di conseguenza ogni volta richiamo il comando

menuSvelte.items.clearMenu();

per eliminare tutte le voci del menù stesso. Poi uso il comando

menuSvelte.title.setTitle("Main Menu");

per personalizzare il titolo del menù. Inoltre, sempre per mostrare le varie possibilità, imposto le colonne da mostrare nel menù:

menuSvelte.columns.setColumns(["icon", "label", "description"]);

Ci sono 5 “colonne” disponibili: icon, label, description, rightIcon, rightImage. Inoltre c’è un contenitore, textual, per i componenti testuali.

Per inserire i vari elementi nel menù si possono usare alcuni comandi, che ricalcano in parte quelli già in uso per gli array.

menuSvelte.items.push({
	icon,
	label: "Fonts",
	description: "Choose Font Family for the Menu",
  rightIcon,
  rightImage,
	onClick: "g_runtime.callFunction('showFonts')"
});

Il comando items.push(newItem) permette di inserire un nuovo elemento nel menù. Accetta un oggetto le cui proprietà ricalcano le colonne che saranno visualizzate nel menù. Ce ne è una nuova, però: onClick. Come è facilmente intuibile dal nome, serve per definire la funzione da eseguire quando clicchiamo sull’elemento.

Ho implementato questi comandi:

push(item: ItemType)
unshift(item: ItemType)
shift()
pop()
addItemAtIndex(index: number, item:ItemType)
updateItemById(id:string, item:ItemType)
updateItemByLabel(label:string, item:ItemType)
updateItemByIndex(index: number, item:ItemType)
removeItemById(id: string)
removeItemByLabel(label: string)
removeItemByIndex(index: number)
loadItemsFromArray(arrayItems:ItemType[])

Un’altra cosa utile è la possibilità di modificare lo stile di molti degli elementi del menù. Per farlo è possibile usare dei comandi simili a questo:

menuSvelte.css.changeStyle("menu-width", "360px");

I comandi disponibili sono:

changeStyle(style: string, value: string)
changeFontTitle(value: string)
changeFontItems(value: string)
changeFontTitleAndItems(title: string, items: string)
themeStandard(theme:string)
loadTheme(customTheme: Styles, standard:string = “Light”)

I primi 4 servono per modificare solo un singolo aspetto del menù. Per cose un po’ più elaborate conviene però usare gli ultimi due comandi.

menuSvelte.css.themeStandard("Dark");

menuSvelte.css.themeStandard(theme) serve per impostare uno dei temi di colore predefiniti. Posso scegliere tra 9 temi diversi: Dark, Light, Bouron, Gold Miner, Oscar, Herrera Yellow, Herrera Green, Herrera Blue, Herrera Magenta.

menuSvelte.css.loadTheme(customTheme, standard) serve invece a caricare un tema personalizzato a partire da un file JSON. È possibile, per esempio, creare un tema simile a questo:

{   
	"color-primary": "#2e257d",
  "color-background": "#aaa8bd",

  "font-title": "Roboto, sans-serif",
  "font-items": "Roboto, sans-serif",
    
  "modal-background": "#0f0c45bf",

  "menu-border-radius": "32px 0px 32px 0px",
  "menu-border-style": "solid",
  "menu-border-width": "1px",

  "item-height": "64px",
  "item-icon-size": "48px",
  "item-image-size": "64px"
}