Wavemaker evolve e introduce il Theme Builder

Crea temi per le app WaveMaker senza alcuna codifica

La creazione e la personalizzazione dell’aspetto delle applicazioni che è possibile costruire facilemente con WaveMaker è ora a portata di clic. Abbiamo introdotto uno strumento per la creazione di temi per modificare le combinazioni di colori e creare specifiche di branding. Il generatore di temi porta i vantaggi della creazione di temi senza codice in pochi semplici passaggi. Con un editor di codice integrato, è possibile apportare modifiche e vedere gli stili personalizzati applicati istantaneamente ai componenti Web.

WaveMaker è una piattaforma aperta e come tale aggiunge funzioni che elevano l’agilità dello sviluppo low-code. Un tema è un pacchetto predefinito contenente dettagli di aspetto grafico. Viene spesso utilizzato per modificare l’aspetto di più elementi contemporaneamente, il che rende gli elementi meno granulari rispetto al consentire all’utente di impostare ciascuna opzione singolarmente. Ad esempio, puoi specificare i colori del marchio della tua azienda per il tuo progetto.

Nel rendere omogenee anche le applicazioni più grandi questo diventa importante per dare un singolo repository dei layout tra i microservizi che contengono anche i front-end.

Trovate l’app me la crezione di nuovi stili al link: http://apps.wavemakeronline.com/Theme_Builder/#/Dashboard

costruttore di temi

Personalizza colore, tipografia e stile

Per iniziare a personalizzare un tema, è possibile modificare i valori per colore, tipografia e stile. Per impostazione predefinita, l’applicazione di anteprima inizia con il tema del materiale applicato. Siamo in grado di passare tra diversi stili di temi e visualizzare immediatamente in anteprima le modifiche.

anteprima del tema

Colori

Per modificare i colori del tema, sostituire il codice colore #HEX predefinito con un colore personalizzato.

Il colore primario è associato a tutti i componenti e gli elementi attivi come (pulsanti primari, schede selezionate, elementi di navigazione, ecc.), Mentre il colore secondario accentua i colori dell’icona per la selezione di data e ora. Il colore di sfondo si applica al contenuto scorrevole, mentre il colore del testo è mappato al corpo del testo e ai sottotitoli utilizzati nell’applicazione.

I colori di intestazione e di navigazione a sinistra definiscono lo schema di colorazione per lo sfondo, il testo e i collegamenti attivi. Abbiamo anche più opzioni per gestire la notifica e disabilitare i colori di stato.

applicare i colori

Tipography

Per cambiare la tipografia del tuo tema, scegli le opzioni dal menu a discesa, che si tratti della famiglia di caratteri o della dimensione delle intestazioni e del testo del corpo.

applica carattere

Stile

SI possono applicare stili diversi come Flat, Material, and Gradient. Questo ti aiuterà a capire come cambiano i componenti. Ogni selezione sovrascriverà il comportamento esistente degli elementi visualizzati nella sezione di anteprima.

Flat: il tema flat include uno sfondo solido agli elementi con stati attivi. Aggiunge inoltre un bordo delineato per gli input dell’utente.

Material : il tema del material ha una finitura elegante con ombre elevate per comprendere l’importanza relativa di ciascun elemento e focalizzare la sua attenzione.

Gradient : il tema del gradient riempie i blocchi di contenuto con una sfumatura lineare che parte dall’alto verso il basso.

applicare lo stile

Come costruire un tema

  1. Vai su https://apps.wavemakeronline.com/Theme_Builder/#/Dashboard
  2. Fai clic su Esplora / Crea temi
  3. Nella pagina Editor, personalizza i valori #HEX con i colori del tuo marchio.
  4. Seleziona la famiglia di caratteri e le dimensioni applicabili per i contenuti e i testi delle intestazioni.
  5. Passa da un tipo di stile all’altro in base alle tue esigenze.
  6. Sono in corso modifiche alle icone (presto in arrivo)
  7. Fare clic su Fine e assegnare un nome al tema appena creato dalla finestra di dialogo.
  8. Importa e applica il tema scaricato in una qualsiasi delle tue applicazioni WaveMaker.

La modifica di tutte le variabili nel tuo editor creerà il tuo nuovo tema pronto per il download. Una volta fornito un nome, il tema verrà scaricato come file .zip. Importa e applica alle applicazioni integrate di WaveMaker.

Bingo! Siamo pronti con il tema.

Quale è il prossimo passo?

Nella prossima versione di rilascio, presenteremo le icone e altre opzioni di stile.

Guarda anche come create un tema altamente personalizzato

Wavemaker basa la creazione dei temi su componenti standard come Bootstrap, Angular ecc… Questo permette di creare temi e distribuirli tra il tuo team di sviluppo e condividerli (nella versione enterprise) nella tua ENTERPRISE DEVELOPMENT NETWORK. Questo autmenta la coerenza degli stili per le tue applicazioni enterprise, focalizzando gli skills sul flusso di business.

Per ulteriori informazioni sullo sviluppo di temi, vedere Creazione di temi .