Risorse e CSS

Un ulteriore elemento dei progetti Instant Developer Cloud sono le risorse: file di diverso contenuto che vengono utilizzati dal codice dell’applicazione come dati, elementi grafici, personalizzazioni, eccetera.

La creazione di una risorsa avviene generalmente trascinando il file dal proprio desktop nell’albero degli oggetti del progetto. In quel momento il file viene caricato nel cloud e diventa parte del progetto.

Se la risorsa viene caricata all’interno di una specifica applicazione, verrà inclusa quando l’applicazione viene installata. Se invece viene inserita in una libreria, essa verrà resa disponibile in ogni applicazione contenuta nel progetto.

Le risorse sono di tipo diverso e, in base al tipo, hanno comportamenti specifici. Vediamo ora una rassegna dei tipi di risorsa disponibili.

Risorse di tipo CSS #

Le risorse di tipo CSS contengono definizioni di stili aggiuntive a quelle standard del progetto. Per creare una risorsa di tipo CSS è possibile trascinare un file CSS esistente nel progetto, oppure crearne uno vuoto tramite il menu contestuale dell’oggetto applicazione.

Se il file CSS viene creato all’interno dell’IDE, esso viene considerato come stringa CSS e non viene salvato come file vero e proprio. In ogni caso viene incluso nella pagina web dell’applicazione.

Si consiglia di inserire risorse CSS solo a livello di applicazione o di libreria. Si tenga conto che, anche creandole a livello di videata o di classe, esse verranno applicate fin dall’inizio della sessione.

Alcuni file CSS vengono inclusi nel progetto al fine di aggiungere icone invece che definizioni di stile. In tal caso si consiglia di indicare come tipo di contenuto il valore Icona, così sarà possibile selezionare le classi corrispondenti tramite gli strumenti dell’IDE dedicati alla selezione visuale delle icone.

Risorse di tipo immagine #

Le risorse di tipo immagine rappresentano elementi grafici utilizzabili nel progetto. Dopo aver caricato una risorsa immagine, essa può essere referenziata nei file CSS del progetto, negli stili o nel codice utilizzando la notazione $<nome>, come mostrato nell’esempio seguente.

.mycls {
  background-image: url('$logo');
}

Risorse di tipo font #

Vengono utilizzate per aggiungere la definizione di un nuovo font all’applicazione. Come nome della risorsa occorre indicare il nome del font nella stessa forma della dichiarazione font-family. Come indirizzo del font, indicare l’URL del file CSS che ne specifica l’import.

Per importare un font da Google Fonts, si consiglia di ottenere la direttiva di importazione, come mostrato nell’esempio seguente per il font Otomanopee One:

Otomanopee One
<style>
@import url('https://fonts.googleapis.com/css2?family=Otomanopee+One&display=swap');
</style>

La risorsa font da creare dovrà quindi avere come nome ​​Otomanopee One e come URL https://fonts.googleapis.com/css2?family=Otomanopee+One. A questo punto potrà essere utilizzata sia nei file di tipo CSS che nella barra di stile dell’IDE.

Per fare in modo che il font sia disponibile anche per applicazioni offline, è necessario utilizzare il comando Crea copia locale nel menu contestuale della risorsa. Tale comando converte in risorse locali tutti i riferimenti remoti al font, scaricando anche i file binari di definizione. Prima di effettuare questa operazione, è necessario verificare di avere i permessi di licenza necessari.

Risorse di tipo definizione SVG #

Le risorse di tipo definizione SVG contengono un file di testo che specifica le icone in formato SVG disponibili per l’applicazione. È importante specificare il valore Icona come tipo di contenuto della risorsa in modo da poter selezionare le varie icone tramite gli strumenti dell’IDE.

Un esempio di file di definizione icone è il seguente:

<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-logo" viewBox="0 0 40 40">
      <path d="M32 11.7v15..."/>
    </symbol>
    <symbol id="icon-main-dashboard" viewBox="0 0 40 40">
      <path d="M33.923 35h-10.77C21.724 ..." fill-rule="evenodd"/>
    </symbol>
  </defs>
</svg>

Esistono diversi strumenti online per la composizione dei file di definizione icone, ad esempio: icomoon. 

Risorse di tipo ACS #

Una risorsa di tipo ACS (Access Control Sheet) contiene le specifiche degli elementi dell’interfaccia utente in funzione dei ruoli, del nome dell’utente o della lingua della sessione. Tramite queste risorse è possibile personalizzare in modo dichiarativo le proprietà degli elementi dell’interfaccia utente, attivando o disattivando le varie funzioni in relazione all’utente collegato. Per maggiori informazioni su questa funzionalità è possibile vedere il progetto acs-design-patterns.

Risorse di tipo HTML #

Una risorsa di tipo HTML rappresenta un nuovo file HTML disponibile nel progetto. Tale risorsa può essere referenziata con la notazione $<nome> nel progetto.

Risorse di tipo testo #

Una risorsa di tipo testo rappresenta un file di testo disponibile nel progetto. Tale risorsa può essere referenziata con la notazione $<nome> nel progetto. Il seguente codice, ad esempio, legge e converte in oggetto un file di testo in formato JSON caricato come risorsa.

// Lettura file JSON
var f = app.getResourceFile($italy_regions);
yield f.open();
var s = yield f.readAll();
yield f.close();
//
// converto in oggetto
var list = JSON.parse(s);
console.log(list);

Risorse di tipo file #

Sono simili alle risorse di tipo testo, ma contengono un file di tipo generico..

Risorse di tipo file server #

Le risorse di tipo file server vengono installate nella root directory dell’applicazione, sovrascrivendo eventualmente quelle esistenti. In questo modo è possibile caricare, ad esempio, un file index.html personalizzato. 

Queste risorse devono essere utilizzate con cautela in quanto possono invalidare il funzionamento dell’applicazione. Inoltre, se si aggiorna il server IDE o il server di produzione ad una differente versione di Instant Developer Cloud, occorre nuovamente verificare che le proprie risorse di tipo file server siano allineate con i funzionamenti della versione appena installata.

Risorse di tipo script client #

Le risorse di tipo script client vengono usate per aggiungere al progetto elementi visuali personalizzati. È possibile fare riferimento al progetto extensibility-design-patterns per un esempio di utilizzo.

Risorse di tipo script server #

Le risorse di tipo script server vengono usate per aggiungere codice di base al framework del progetto. Il codice contenuto potrà essere utilizzato nel codice applicativo. È possibile fare riferimento al progetto extensibility-design-patterns per un esempio di utilizzo.

Si ricorda che è possibile aggiungere al proprio server IDE o di produzione anche pacchetti Node.js personalizzati tramite la console di controllo. Dopo aver aggiunto tali pacchetti il codice corrispondente risulta subito disponibile nel codice applicativo, anche se si dovrà essere certi che tale codice verrà eseguito solo nel container per applicazioni web e non come sessione offline.

Risorse di tipo plugin #

Le risorse di tipo plugin contengono gli script di interfaccia per un plugin nativo Cordova personalizzato. È possibile fare riferimento al progetto extensibility-design-patterns per un esempio di utilizzo.

Risorse di tipo script IDE #

Le risorse di tipo script IDE vengono usate per aggiungere un plugin personalizzato all’IDE di Instant Developer Cloud. Questi plugin possono modificare il funzionamento dell’IDE a 360° quindi si consiglia prudenza nell’utilizzo. È possibile fare riferimento al progetto extensibility-design-patterns per un esempio di utilizzo.

Risorse di tipo lingua #

Una risorsa di tipo lingua contiene i dati linguistici creati per l’applicazione tramite il sistema di gestione delle traduzioni di Instant Developer Cloud. Si consiglia di non modificare direttamente il contenuto di questa risorsa in quanto si potrebbe invalidare il sistema di gestione automatica delle traduzioni dell’interfaccia utente.