Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- materialize [2024/12/03 15:29]
enric_mieza_sanchez [Pestanyes d'aplicació (tabs)]
+++ materialize [2025/11/26 19:55] (actual)
enric_mieza_sanchez [Primera plantilla Cordova + Materialize]
@@ Línia 62: / Línia 62: @@
 ===== Primera plantilla Cordova + Materialize =====
 <WRAP info>
-L'objectiu ara serà crear una aplicació Cordova que utilitzi correctament la plantilla de MaterializeCSS. Necessitem fusionar adequadament els arxius d'ambdós //templates//.
+L'objectiu ara serà crear una aplicació Cordova que utilitzi correctament MaterializeCSS. Necessitem fusionar adequadament els arxius de Cordova i Materialize.
 </WRAP>
-Descarrega el Starter-Template al final d'aquesta pàgina: https://materializeweb.com/getting-started.html
+<WRAP download>
+Ves a [[https://materializeweb.com/getting-started.html|Getting Started]] i descarrega els arxius de la darrera versió de Materialize. Afegeix-los a la carpeta ''www'' del projecte Cordova.
+</WRAP>
-Copia els arxius CSS i JS a les carpetes del projecte cordova (www).
+A partir d'aquesta podrem elaborar el projecte base per a una app mòbil Cordova:
-Pel què fa a index.html no el podem copiar directament ja que necessitem barrejar els dos arxius.
-Fes un backup del template ''index.html'' de Cordova i llavors sí, copia ''index.html'' del template de MaterializeCSS
-Comprova que el visualitzem correctament:
-  $ cordova platform add browser
-  $ cordova run browser
-Copiem els ''tags meta'' que hi ha a la capçalera per ajustar les condicions de seguretat de Cordova. A més, caldrà afegir l'origen de les fonts que necessita el template, en particular ''https://code.jquery.com https://fonts.gstatic.com'' i ''https://fonts.googleapis.com''. Al final, aquesta secció hauria de quedar aproximadament així:
 <WRAP prewrap>
 <file html index.html>
-  <meta http-equiv="Content-Security-Policy" content="default-src https://code.jquery.com https://fonts.gstatic.com 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src https://fonts.googleapis.com 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
+<!DOCTYPE html>
-  <meta name="format-detection" content="telephone=no">
+<html>
-  <meta name="msapplication-tap-highlight" content="no">
+  <head>
-  <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
+    <meta charset="utf-8">
-  <meta name="color-scheme" content="light dark">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com https://fonts.gstatic.com https://cdn.jsdelivr.net https://fonts.googleapis.com 'unsafe-eval'; style-src https://cdn.jsdelivr.net https://fonts.googleapis.com 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
-</file>
+    <meta name="format-detection" content="telephone=no">
-</WRAP>
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
+    <title>Materialize 2025</title>
+    <!-- Fonts Google -->
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <!-- CSS materialize -->
+    <link rel="stylesheet" href="css/materialize.min.css" />
+    <!-- CSS personalitzat -->
+    <link rel="stylesheet" href="css/style.css" media="screen,projection" />
+  </head>
+  <body>
+    <!-- AQUI VAN ELS CONTINGUTS -->
-Engega-ho en el browser i assegura't que no hi ha cap missatge d'error a la consola JavaScript i que els continguts es veuen bé. Comprova també que si redueixes la pantalla del navegador o et poses en mode responsive enlloc del menú superior **ens apareix el clàssic "hamburger menu"**.
-Afegeix també els scripts al final de la pàgina, hauria de quedar algo així:
+    <!-- cordova lib -->
+    <script src="cordova.js"></script>
-<WRAP prewrap>
+    <!-- Compiled and minified JavaScript -->
-<file html index.html>
+    <script src="js/materialize.min.js"></script>
-  <!--  Scripts  -->
+    <!-- init -->
-  <script src="cordova.js"></script>
+    <script src="js/index.js"></script>
-  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
-  <script src="js/materialize.js"></script>
+  </body>
-  <script src="js/init.js"></script>
+</html>
 </file>
 </WRAP>
-A ''init.js'' li afegirem el codi que també tenim a l'aplicació original de Cordova, hauria de quedar així:
+A ''index.js'' li afegirem el codi que també tenim a l'aplicació original de Cordova, hauria de quedar així:
-<file javascript init.js>
-(function($){
-  $(function(){
-    $('.sidenav').sidenav();
-  }); // end of document ready
-})(jQuery); // end of jQuery name space
+<file javascript index.js>
+// Wait for the deviceready event before using any of Cordova's device APIs.
+// See https://cordova.apache.org/docs/en/latest/cordova/events/events.html#deviceready
 document.addEventListener('deviceready', onDeviceReady, false);
@@ Línia 121: / Línia 122: @@
     //document.getElementById('deviceready').classList.add('ready');
 }
+// init Materialize
+M.AutoInit();
 </file>
@@ Línia 133: / Línia 137: @@
 </WRAP>
+\\
-<WRAP info>
+===== Navbar, Sidenav i Tabs =====
-Ull, perquè el "include" del codi de jQuery (que hem copiat del //starter template//) l'estem descarregant de la CDN, en concret en aquesta línia:
-<file html index.html>
+Si has seguit fins aquí, hauries de tenir una app buida.
-<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
-</file>
+Aplicarem una Navbar i Tabs per disposar d'una plantilla d'app força complerta:
+  * [[https://materializeweb.com/navbar.html|Navbar]]: barra de menú de navegació superior.
+  * [[https://materializeweb.com/tabs.html|Tabs]]: accés a les diferents pantalles de l'aplicació.
+  * [[https://materializeweb.com/sidenav.html|Sidenav]]: menú lateral que s'activa al prémer el botó de "menú hamburguesa" o quan llisquem des de la banda esquerra.
+Si seguim els exemples bàsics hauríem d'aconseguir una app com aquesta:
+{{materialize-navbar-tabs.png?200|Navbar + Tabs}}
+{{materialize-sidenav.png?200|Sidenav}}
-Si executessim l'app en algun lloc sense cobertura, no funcionaria ja que li faltaria la llibreria de jQuery. Seria més adient descarregar la llibreria a la carpeta ''js'', com les altres, i carregar-la en local.
-<file html index.html>
-<script src="js/jquery-2.1.1.min.js"></script>
-</file>
-</WRAP>
 <WRAP todo>
-Segueix totes les passes indicades per disposar d'una app Cordova amb el //starter template// de MaterializeCSS.
+Segueix totes les passes indicades per disposar d'una app Cordova amb Sidenav, Sidebar i Tabs.
 Comprova que funciona correctament:
@@ Línia 156: / Línia 164: @@
 \\
-===== Pestanyes d'aplicació (tabs) =====
-El primer que necessitarem per tenir una aplicació mòbil decent serà disposar de diversos TABs o pestanyes o seccions de l'aplicació.
-[[https://materializeweb.com/tabs.html#swipeable|Materialize implementa tabs amb efecte de desplaçament]] força vistosos.
+===== Obrir una pestanya des del codi (canvi de pantalla) =====
+Si volem obrir una pestanya des d'una altra, caldrà fer una crida a l'objecte ''Tabs''.
-Elimina els continguts interns del projecte (deixa els encapçalaments, navbar i sidenav) i implementa els tabs "swipeables" amb les 3 pàgines.
+Mirant la [[https://materializeweb.com/tabs.html|doc de Tabs]] veurem que per saltar de pestanya farem el següent:
-Aquest component (els tabs) necessita ser inicialitzat amb les opcions adequades. Per activar-ho hauràs d'aplicar un codi similar a això a ''init.js'' (observa les ''options'' perquè s'activi l'efecte //swipe//):
+<code javascript>
+// canviem al tab 3
+var tabs = document.getElementById("id_element_tab_ul");
+var tabsInstance = M.Tabs.getInstance(tabs);
+tabsInstance.select("id_del_tab3");
+</code>
-<sxh js>
+Si ho volem fer amb jQuery també tenim aquesta alternativa, més concisa:
-    var options = { "swipeable": true };
+<code javascript>
-    var el = document.getElementsByClassName('tabs');
+$('#tabs-swipe-demo').tabs("select", "id_del_tab3");
-    var instance = M.Tabs.init(el, options);
+</code>
-</sxh>
-Com pots veure, Materialize pot utilitzar jQuery però tampoc és imprescindible (a la majoria de plugins).
+\\
-Si volem utilitzar la versió jQuery sería d'aquesta manera:
-<sxh js>
+===== Mes widgets! =====
-    $('.tabs').tabs({"swipeable":true});
-</sxh>
-Si volem que aquest codi s'executi quan acabi de carregar-se la pàgina HTML sencera, seria qüestió de posar-ho d'aquesta manera:
+Per tenir una aplicació a full ens caldran aquest tipus de recursos, molt ben estilitzats. Fes-li un cop d'ull a tots ells, imprescindibles!
-<code javascript>
-(function($){
-  $(function(){
-    // s'executa quan s'acaba de carregar el document HTML sencer
+  * [[https://materializeweb.com/grid.html|Grid i containers]] per aprendre com administrar els continguts del cos de forma responsive.
-    $('.tabs').tabs({"swipeable":true});
+  * [[https://materializeweb.com/collections.html|Collections]] per fer llistes d'elements.
+  * Els imprescindibles [[https://materializeweb.com/buttons.html|Buttons]] amb icones i efectes xaxis.
+  * El famós [[https://materializeweb.com/floating-action-button.html|Floating-Action Button]] a baix a la dreta, amb desplegable d'accions i tot.
+  * Obrir un [[https://materializeweb.com/modals.html|diàleg modal]] per demanar accions a l'usuari sense canviar de pàgina o pestanya.
-  }); // end of document ready
+I no deixeu d'investigar la pàgina de materializecss.com , està plena de recursos ben fets.
-})(jQuery); // end of jQuery name space
+\\
+===== Pestanyes lliscants =====
+[[https://materializeweb.com/tabs.html#swipeable|Materialize implementa tabs amb efecte de desplaçament]] força vistosos.
+Elimina els continguts interns del projecte (deixa els encapçalaments, navbar i sidenav) i implementa els tabs "swipeables" amb les 3 pàgines.
+Aquest component (els tabs) necessita ser inicialitzat amb les opcions adequades. Per activar-ho hauràs d'afegir aquest codi al ''init.js'' (observa les ''options'' perquè s'activi l'efecte //swipe//):
+<code javascript>
+window.onload = (event) => {
+    console.log("Pàgina carregada completament. Inicialitzant..");
+    var options = { "swipeable": true };
+    var el = document.getElementsByClassName('tabs');
+    var instance = M.Tabs.init(el, options);
+};
 </code>
 I finalment, per aconseguir que cadascuna de les seccions ocupin l'alçada de la pantalla, caldrà afegir aquestes línies al l'arxiu ''style.css'':
@@ Línia 220: / Línia 245: @@
 \\
-==== Obrir una pestanya ====
-Si volem obrir una pestanya des d'una altra, caldrà fer una crida a l'objecte Tabs. Inicialment (a la versió 0.100) aquest objecte només es podia utilitzar amb jQuery, però des de la v1.0.0 s'ha dissenyat per no dependre de jQuery. Algunes funcions continuen podent-se cridar amb jQuery, però concretament aquesta canvi de pestanya el mostrem amb JS normal (sense jQuery).
-Mirant la [[https://materializeweb.com/tabs.html|doc de Tabs]] veurem que per saltar de pestanya farem el següent:
-<code javascript>
-// canviem al tab 2
-var tabs = document.getElementById("tabs-swipe-demo");
-var tabsInstance = M.Tabs.getInstance(tabs);
-tabsInstance.select("tab2");
-</code>
-Si ho volem fer amb jQuery també tenim aquesta alternativa, més concisa:
-<code javascript>
-$('#tabs-swipe-demo').tabs("select", "tab2");
-</code>
-\\
-===== Menú lateral (sidenav) =====
-Mira el [[https://materializeweb.com/sidenav.html|plugin Sidenav de MaterializeCSS]] per veure les diverses opcions de la Navbar que ja porta implementada la plantilla de Starter Template.
-Implementa un menú més complert amb diversos menus disponibles.
-\\
-===== Mes widgets! =====
-Per tenir una aplicació a full ens caldran aquest tipus de recursos, molt ben estilitzats. Fes-li un cop d'ull a tots ells, imprescindibles!
-  * [[https://materializeweb.com/grid.html|Grid i containers]] per aprendre com administrar els continguts del cos de forma responsive.
-  * [[https://materializeweb.com/collections.html|Collections]] per fer llistes d'elements.
-  * Els imprescindibles [[https://materializeweb.com/buttons.html|Buttons]] amb icones i efectes xaxis.
-  * El famós [[https://materializeweb.com/floating-action-button.html|Floating-Action Button]] a baix a la dreta, amb desplegable d'accions i tot.
-  * Obrir un [[https://materializeweb.com/modals.html|diàleg modal]] per demanar accions a l'usuari sense canviar de pàgina o pestanya.
-I no deixeu d'investigar la pàgina de materializecss.com , està plena de recursos ben fets.

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina