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 [2025/11/20 19:30]
enric_mieza_sanchez [Primera plantilla Cordova + Materialize]
+++ materialize [2025/11/26 19:55] (actual)
enric_mieza_sanchez [Primera plantilla Cordova + Materialize]
@@ Línia 65: / Línia 65: @@
 </WRAP>
-Pots fer un cop d'ull al Starter-Template al final d'aquesta pàgina: https://materializeweb.com/getting-started.html (millor no, el starter-template a Novembre de 2025 no és correcte).
+<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>
 A partir d'aquesta podrem elaborar el projecte base per a una app mòbil Cordova:
@@ Línia 80: / Línia 82: @@
     <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
     <title>Materialize 2025</title>
-    <link
+    <!-- Fonts Google -->
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@materializecss/materialize/dist/css/materialize.min.css"
-    />
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
     />
-    <link href="css/style.css" rel="stylesheet" media="screen,projection" />
+    <!-- CSS materialize -->
+    <link rel="stylesheet" href="css/materialize.min.css" />
+    <!-- CSS personalitzat -->
+    <link rel="stylesheet" href="css/style.css" media="screen,projection" />
   </head>
   <body>
@@ Línia 98: / Línia 100: @@
     <script src="cordova.js"></script>
     <!-- Compiled and minified JavaScript -->
-    <script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize/dist/js/materialize.min.js"></script>
+    <script src="js/materialize.min.js"></script>
     <!-- init -->
     <script src="js/index.js"></script>
   </body>
 </html>
@@ Línia 107: / Línia 109: @@
 </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 index.js>
@@ Línia 134: / Línia 136: @@
   $ cordova plugin add cordova-plugin-device
 </WRAP>
-<WRAP info>
-ULL, perquè el "include" del codi i CSS de l'exemple l'estem descarregant de la CDN, en concret en aquestes línies:
-<file html index.html>
-<!-- head CSS -->
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@materializecss/materialize/dist/css/materialize.min.css"
-/>
-<!-- Compiled and minified JavaScript (al final de l'arxiu HTML) -->
-<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize/dist/js/materialize.min.js"></script>
-</file>
-Si executéssim l'app en algun lloc sense cobertura, no funcionaria ja que li faltaria poder accedir a la llibreria de Materialize. Seria més adient descarregar els arxius a les carpetes locals ''js'' i ''css'' i carregar-les així:
-<file html index.html>
-<!-- head css -->
-<link rel="stylesheet" href="css/materialize.min.css" />
-<!-- Compiled and minified JavaScript -->
-<script src="js/materialize.min.js"></script>
-</file>
-</WRAP>
 \\
@@ Línia 165: / Línia 141: @@
 ===== Navbar, Sidenav i Tabs =====
-Tenim una app buida.
+Si has seguit fins aquí, hauries de tenir una app buida.
 Aplicarem una Navbar i Tabs per disposar d'una plantilla d'app força complerta:
-  * https://materializeweb.com/navbar.html
+  * [[https://materializeweb.com/navbar.html|Navbar]]: barra de menú de navegació superior.
-  * https://materializeweb.com/sidenav.html
+  * [[https://materializeweb.com/tabs.html|Tabs]]: accés a les diferents pantalles de l'aplicació.
-  * https://materializeweb.com/tabs.html
+  * [[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}}
 <WRAP todo>
@@ Línia 184: / 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ó.
+===== 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''.
+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 3
+var tabs = document.getElementById("id_element_tab_ul");
+var tabsInstance = M.Tabs.getInstance(tabs);
+tabsInstance.select("id_del_tab3");
+</code>
+Si ho volem fer amb jQuery també tenim aquesta alternativa, més concisa:
+<code javascript>
+$('#tabs-swipe-demo').tabs("select", "id_del_tab3");
+</code>
+\\
+===== 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.
+\\
+===== Pestanyes lliscants =====
 [[https://materializeweb.com/tabs.html#swipeable|Materialize implementa tabs amb efecte de desplaçament]] força vistosos.
@@ Línia 193: / Línia 208: @@
 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//):
-<sxh js>
+<code javascript>
 window.onload = (event) => {
     console.log("Pàgina carregada completament. Inicialitzant..");
@@ Línia 200: / Línia 215: @@
     var instance = M.Tabs.init(el, options);
 };
-</sxh>
+</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 230: / 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