bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • smx_mp04_uf3 • android_persistencia • materialize
materialize

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ó

Ambdós costats versió prèvia Revisió prèvia
Següent revisió 		Revisió prèvia
materialize [2025/11/20 19:29]
enric_mieza_sanchez [Primera plantilla Cordova + Materialize] 		materialize [2025/11/26 19:55] (actual)
enric_mieza_sanchez [Primera plantilla Cordova + Materialize]
Línia 62: Línia 62:
 ===== Primera plantilla Cordova + Materialize ===== ===== Primera plantilla Cordova + Materialize =====
 <WRAP info> <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> </WRAP>
  
-Pots fer un cop d'ull al 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>
  
-A partir d'aquesta podrem elaborar el projecte base per a una app mòbil Cordova+A partir d'aquesta podrem elaborar el projecte base per a una app mòbil Cordova:
  
 <WRAP prewrap> <WRAP prewrap>
Línia 80: Línia 82:
     <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">     <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
     <title>Materialize 2025</title>     <title>Materialize 2025</title>
-    <link +    <!-- Fonts Google -->
-      rel="stylesheet" +
-      href="https://cdn.jsdelivr.net/npm/@materializecss/materialize/dist/css/materialize.min.css" +
-    />+
     <link     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"       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>   </head>
   <body>   <body>
Línia 98: Línia 100:
     <script src="cordova.js"></script>     <script src="cordova.js"></script>
     <!-- Compiled and minified JavaScript -->     <!-- 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 -->     <!-- init -->
     <script src="js/index.js"></script>     <script src="js/index.js"></script>
 +        
   </body>   </body>
 </html> </html>
Línia 107: Línia 109:
 </WRAP> </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> <file javascript index.js>
Línia 134: Línia 136:
   $ cordova plugin add cordova-plugin-device   $ cordova plugin add cordova-plugin-device
 </WRAP> </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 ===== ===== 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: 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: 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> <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. [[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//): 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) => { window.onload = (event) => {
     console.log("Pàgina carregada completament. Inicialitzant..");     console.log("Pàgina carregada completament. Inicialitzant..");
Línia 200: Línia 215:
     var instance = M.Tabs.init(el, options);     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'': 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. 
- 
  
  
materialize.1763666944.txt.gz · Darrera modificació: 2025/11/20 19:29 per enric_mieza_sanchez

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki