Javascript, HTML, CSS e... !
0 commenti

Mantenere separati i file HTML e CSS

Applicare i CSS ad un file HTML con Google Apps Script

Per una qualsiasi applicazione web basata su HTML, CSS e Javascript, una best practice è quella di evitare di avere un unico file contenente insieme tutti questi codici in quanto una tale struttura può rendere i progetti difficili da leggere e sviluppare.

Apps Script, per sua logica, richiede che il codice che sarà eseguito lato client sia inserito in file .html (che può quindi contenere HTML, CSS e/o Javascript) distinto dal codice lato server presente in file con estensione .gs. Questo comunque non vieta di poter separare ulteriormente il CSS (ma anche il codice JavaScript) lato client in file diversi per garantire una migliore leggibilità (come suggerito anche dalla documentazione ufficiale, in particolare 'HTML Service: Best Practices').

I file separati possono poi essere inclusi nell'HTML principale utilizzando le scriptlets, come mostrato nell'esempio di seguito:

File HTML (index.html)

<!DOCTYPE html>
<html>
  <head>
    <title>CSS in HTML con Google Apps Script</title>
    <base target="_top">
    <?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>
  </head>
  <body>
    <h1>Benvenuto</h1>
    <p>Esempio di integrazione dei CSS in un file HTML con Google Apps Script</p>
  </body>
</html>

La riga di codice fondamentale per l'inclusione del file CSS (chiamato stylesheet.html, da notare che il file è in formato .html e non .css in quanto Apps Script non lo prevede) è la seguente:

<?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>

Come descritto sotto, al fine di garantire ordine e leggibilità nei vari file, il codice appena presentato poteva essere inserito nel file .gs all'interno di una funzione richiamata poi dal file HTML passando come parametro il nome del file .html contenente gli stili:

// Al posto della seguente riga di codice esplicita:
<?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>

// Avrei potuto inserire una chiamata ad una funzione, come ad esempio
<?!= include('stylesheet') ?>

// Ed inserire nel file .gs la relativa funzione
// che accetta in ingresso un parametro corrispondente al nome del file
// in modo da poterla riutilizzare per il caricamento di altre risorse: CSS o JS

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

Ed infine il file contenente i CSS:

File CSS (stylesheet.html)

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
p {
    font-size:16px;
    color:#333333;
}
</style>

Da notare che all'interno di stylesheet.html è possibile inserire non solo il codice CSS contenuto tra i tag di script ma vi è anche la possibilità di linkare una risorsa esterna, nel caso specifico:

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

La risorsa in questione, per completezza di informazione, è un CSS Package per le Add-ons realizzate su Google Sheets, Docs o Forms al fine di mantenere la grafica degli elementi aggiunti con le nostre funzionalità (testi, bottoni, ecc...) in linea a quella degli elementi nativi dei tools della G Suite.

Tags

Michele Pisani

Michele Pisani

Sviluppatore Javascript ed esperto in Digital Analytics

L'esperienza nel settore Digital Analytics unita ad anni di sviluppo in Javascript ha trovato la massima espressione in Google Apps Script che mi ha permesso, con estrema facilità e poche righe di codice, di realizzare potenti applicazioni interattive e processi automatizzati integrati con i prodotti della G Suite.

Come contattarmi
scrivi un commento

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

scrivi un commento

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato.I campi contrassegnati da un * sono obbligatori
Puoi utilizzare i seguenti tag nei commenti:
[bold]testo[/bold] se vuoi evidenziare un testo con il grassetto[code]function helloworld() { }[/code] se vuoi pubblicare una porzione di codice[url]http://www.appsscript.it[/url] se devi riferirti ad un indirizzo web