!
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.
Non ci sono commenti
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
scrivi un commento