Biblioteques d'interfícies d'usuari per al desenvolupament d'aplicacions web

Els elements interactius bàsics són aquells que permeten que l’usuari interactuï amb una pàgina web de manera dinàmica i intuïtiva. Cal aprendre a utilitzar diferents biblioteques i entorns de treball (frameworks) per crear elements interactius a les pròpies pàgines web, així com a implementar-los de manera eficient i atractiva per als usuaris. Amb jQuery es poden crear dissenys d’interfície d’usuari dinàmics i atractius. La combinació d’Angular i Material permet crear aplicacions web modernes i reutilitzables. També React.js permet crear interfícies d’usuari altament interactives i personalitzades.

Totes aquestes tecnologies permeten implementar elements interactius per a les pàgines web.

Disseny d'interfícies d'usuari amb jQuery

Un dels llenguatges de programació més utilitzat per crear interacció i dinamisme a les pàgines web és Javascript. Permet desenvolupar funcionalitats com formularis interactius, animacions, etc. No obstant, la programació amb JavaScript pot ser complexa i repetitiva en molts casos, especialment quan es volen manipular elements HTML.

Aquí entra en joc jQuery, una biblioteca de JavaScript que proporciona una manera més senzilla i eficient de manipular elements HTML. jQuery facilita les tasques com seleccionar elements, afegir i eliminar classes, afegir esdeveniments o animacions, i moltes més. Això fa que sigui una eina indispensable per a molts desenvolupadors web. A més, jQuery és compatible amb gairebé tots els navegadors, i això la fa una opció ideal per crear aplicacions web que funcionin en molts entorns diferents.

A jquery.com trobareu tota la documentació de la biblioteca així com exemples, connectors (plug-ins), fòrums de suport, etc.

jQuery és una de les biblioteques més populars i àmpliament utilitzades per desenvolupar aplicacions web. Va sortir al mercat el 2006 i des de llavors ha guanyat molta popularitat entre els desenvolupadors d’interfícies web. La seva gran quantitat de funcions i la facilitat d’ús permeten crear aplicacions web interactives i dinàmiques sense haver d’escriure una gran quantitat de codi.

Actualment encara es fa un ús molt ampli de jQuery en molts projectes de disseny d’interfícies web. Això es deu en gran part a la seva capacitat per simplificar les tasques complexes i proporcionar una interfície senzilla i accessible per a moltes funcions avançades. A més, la gran quantitat de recursos disponibles i la seva comunitat activa de desenvolupadors garanteixen que seguirà sent una de les eines més importants en el futur. No obstant això, amb el temps altres tecnologies, com ara altres biblioteques i entorns de treball o frameworks Javascript com React, Angular, Vue i d’altres, s’han fet més populars i hi ha qui prefereix utilitzar-les en lloc de jQuery. En general, però, jQuery encara és una eina molt valorada i àmpliament utilitzada en el disseny d’interfícies web. Molts dels principals llocs web de la xarxa, com Amazon, BBC.co.uk, Wikipedia, Udemy, Stack Overflow, Airbnb i Twitch fan servir jQuery en la seva implementació.

jQuery facilita la manipulació del DOM (Document Object Model), la manera com es representa una pàgina web al navegador. A través de jQuery es pot seleccionar qualsevol element de la pàgina, modificar-ne el contingut i afegir-hi interactivitat; i tot això de manera molt més senzilla que amb JavaScript pur. Això fa que sigui molt útil per dissenyar interfícies d’usuari web, ja que permet afegir dinamisme i interactivitat a la pàgina de manera ràpida i senzilla.

Una de les funcionalitats que inclou jQuery és la capacitat de seleccionar i manipular aquests elements fàcilment, ja sigui per modificar-los, per eliminar-los o per afegir-ne de nous.

S’han de tenir en compte dues coses abans de treballar amb jQuery:

La biblioteca s’ha de carregar abans de fer-la servir.
El DOM (estructura del document) ha d’estar completament carregat.

El model d’objectes del document, més conegut com a DOM per les seves sigles en anglès, és una interfície que facilita treballar amb documents HTML, entre d’altres.

El DOM defineix els mètodes i les propietats que permeten accedir i manipular el document com si es tractés d’un arbre de nodes, on l’arrel és el node document, que pot contenir qualsevol quantitat de nodes fills, i les fulles són els nodes que no tenen cap descendent (generalment, el contingut dels elements HTML).

Encara que el primer punt sembla obvi, com que és possible carregar els fitxers amb el codi de manera asíncrona, és molt probable que el fitxer amb el codi JavaScript acabi de descarregar-se abans que la biblioteca perquè és més lleuger. El segon punt pot fer aparèixer problemes de dificil detecció, ja que pot ser que comenci a executar-se el codi abans que s’hagi generat completament el DOM. Per aquesta raó, sempre s’ha d’afegir el codi dins de la funció cridada pel mètode ready de jQuery, que és cridat una vegada s’ha generat completament el DOM.

<!DOCTYPE html>
<html>
<head>
  <title>La meva pàgina web</title>
  <!-- Referència a la biblioteca jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
    $(document).ready(function() {
    //Codi jQuery
    });
</script>
</head>
<body>
  <!-- Aquí hi ha el contingut de la pàgina. -->
</body>
</html>

Una vegada inclosa la biblioteca, ja es pot començar a utilitzar jQuery en l’arxiu JavaScript associat a la pàgina. Per fer-ho, es pot utilitzar el símbol $ com a abreviació de la funció jQuery(), que permet seleccionar elements HTML i aplicar-hi diferents mètodes. En aquest cas, el símbol $ és una drecera per a jQuery, així que $(document) crida la funció jQuery(document).

Cal tenir clar que aquest paràmetre ha passat a la funció jQuery. Quan una pàgina web es carrega en un navegador, el codi es converteix en una estructura de dades similar a un arbre: el DOM. El node arrel d’aquest arbre és l’anomenat document, i la resta d’elements pengen de l’arrel dins d’aquesta estructura. Vegeu una representació d’aquest arbre a la figura.

Figura Representació del DOM per a un document HTML

Quan es fa servir el mètode ready sempre es passa l’objecte document com a paràmetre, ja que és el responsable d’indicar quan s’ha acabat de generar l’arbre perquè tots els elements de la pàgina són descendents seus.

En síntesi, aquest exemple li “diu” a jQuery ($) que es vol executar el codi (function() {};) una vegada el document (document) estigui llest (ready).

El mètode ready(), encara que té una funció similar a <body onload=“funcioACridar();”>, és incompatible. Si se’n fa servir un, no s’ha de fer servir l’altre.

S’han de distingir dues parts en aquest codi. Per una banda, es fa una crida a la funció jQuery, que retorna un objecte, i després es crida un mètode d’aquest objecte (en aquest cas, ready). La funció jQuery converteix el paràmetre en un objecte jQuery, i aquest paràmetre pot ser un node com document, una cadena de text amb un selector CSS, com per exemple p, o una cadena de codi HTML, com per exemple <p>Hola, món</p>.

Per exemple, a partir de la següent estructura HTML:

<div id="contenidor">
  <p>Aquest és el contingut del contenidor.</p>
</div>

Per seleccionar l’element amb l’ID “contenidor” i canviar-ne el color de fons a vermell, es pot utilitzar el següent codi jQuery. Vegeu que inserim el codi dins de la funció $(document).ready per assegurar-nos que el codi s’executarà quan la pàgina s’hagi carregat completament.

$(document).ready(function() {
  $('#contenidor').css('background-color', 'red');
});

S’ha d’incloure de la següent manera al document HTML:

<!DOCTYPE html>
<html>
<head>
  <title>La meva pàgina web</title>
  <!-- Referència a la biblioteca jQuery -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
  $('#contenidor').css('background-color', 'red');
});
</script>
</head>
<body>
    <!-- Aquí hi ha el contingut de la pàgina. -->
    <div id="contenidor">
        <p>Aquest és el contingut del contenidor.</p>
    </div>
</body>
</html>

Aquest codi utilitza el mètode css() de jQuery per modificar la propietat background-color de l’element seleccionat. També s’ha utilitzat l’esdeveniment ready de jQuery, que es dispara quan la pàgina s’ha carregat i està llesta per ser manipulada. Això és important per garantir que se seleccionin correctament els elements i es puguin aplicar els mètodes de jQuery de manera correcta.

Selecció d'elements amb jQuery

Un dels grans avantatges de jQuery és que permet seleccionar qualsevol element de la pàgina amb una sintaxi molt simple i intuïtiva. Això és possible gràcies a la funció jQuery()(o la seva forma curta: $()), que es pot utilitzar amb diferents paràmetres per seleccionar diferents tipus d’elements.

Algunes de les maneres més comunes de seleccionar elements amb jQuery són:

Per ID: per seleccionar un element amb un determinat ID, es pot utilitzar el símbol # seguit de l’ID de l’element. Per exemple, per seleccionar l’element amb l’ID contenidor, es pot utilitzar el següent codi:

$('#contenidor');

Per classe: per seleccionar tots els elements d’una determinada classe, es pot utilitzar el símbol . seguit de la classe de l’element. Per exemple, per seleccionar tots els elements amb la classe “destacat”, es pot utilitzar el següent codi:

$('.destacat');

Per etiqueta: per seleccionar tots els elements d’un determinat tipus d’etiqueta, es pot utilitzar directament el nom de l’etiqueta. Per exemple, per seleccionar tots els elements <p>, es pot utilitzar el següent codi:

$('p');

A més d’aquestes tres formes bàsiques de selecció, també es pot utilitzar la funció jQuery() amb expressions complexes per seleccionar elements amb més precisió. Per exemple, es pot utilitzar l’expressió $('#contenidor p’) per seleccionar tots els elements <p> dins de l’element amb l’ID contenidor, o $('.destacat:first’) per seleccionar el primer element amb la classe destacat.

Una vegada seleccionats els elements, es poden aplicar diferents mètodes de jQuery per modificar-los o interactuar-hi. Per exemple, es pot utilitzar el mètode css() per modificar els estils dels elements seleccionats o el mètode click() per afegir un gestor d’esdeveniments quan es faci clic sobre els elements.

Vegeu un exemple de selecció de diferents elements HTML amb jQuery:

Exemple de selecció d'elements HTML amb jQuery

A partir de la següent estructura HTML:

<div id="contenidor">
  <p class="destacat">Aquest és el primer paràgraf.</p>
  <p class="destacat">Aquest és el segon paràgraf.</p>
  <p>Aquest és el tercer paràgraf.</p>
</div>

Amb jQuery, podem seleccionar els dos primers paràgrafs i modificar els estils de la següent manera:

$(document).ready(function() {
  // Selecciona els elements amb la classe "destacat" dins de l'element amb l'ID "contenidor"
  var paragrafs = $('#contenidor .destacat');
 
  // Modifica els estils dels elements seleccionats
  paragrafs.css({
    'color': 'red',
    'font-size': '20px',
    'font-weight': 'bold'
  });
});

Podeu observar el funcionament d’aquest script a: https://codepen.io/iocdawm9/pen/LYBbMWy

També permet afegir un gestor d’esdeveniments per canviar el color del fons quan es faci clic sobre els paràgrafs seleccionats:

$(document).ready(function() {
  // Selecciona els elements amb la classe "destacat" dins de l'element amb l'ID "contenidor"
  var paragrafs = $('#contenidor .destacat');
 
  // Afegeix un gestor d'esdeveniments "click" als elements seleccionats
  paragrafs.click(function() {
    // Modifica el color de fons dels elements quan es fa clic
    $(this).css('background-color', 'yellow');
  });
});

Vegeu aquest exemple en funcionament a: https://codepen.io/iocdawm9/pen/rNrWoWO

En aquests exemples de codi amb jQuery, CodePen inclou l’opció de carregar automàticament algunes de les biblioteques externes més populars (vegeu la figura), com és el cas de JQuery i jQuery UI. Per aquesta raó no s’inclou la càrrega a la finestra del codi d’exemple, perquè es carreguen automàticament.

Modificació d'elements amb jQuery

Després de seleccionar els elements amb jQuery, es poden aplicar diferents mètodes per modificar-los o interactuar-hi. Això és molt útil per afegir dinamisme a la pàgina i per crear interfícies d’usuari més atractives i interessants.

Algunes de les possibilitats que ofereix jQuery per modificar elements són:

css(): serveix per modificar els estils dels elements seleccionats. Aquest mètode accepta com a paràmetre un objecte amb les propietats CSS que es volen modificar, o bé una cadena amb el nom d’una propietat i el valor que es vol establir.

// Modifica la propietat "color" dels elements seleccionats.
$('.destacat').css('color', 'red');
 
// Modifica les propietats "font-size" i "font-weight" dels elements seleccionats.
$('.destacat').css({
  'font-size': '20px',
  'font-weight': 'bold'
});

text(): serveix per obtenir o establir el text d’un element. Aquest mètode accepta com a paràmetre una cadena amb el text que es vol establir, o bé sense paràmetres per obtenir el text actual de l’element.

// Obté el text de l'element amb l'ID "contenidor".
var text = $('#contenidor').text();
 
// Estableix el text de l'element amb l'ID "contenidor".
$('#contenidor').text('Aquest és el nou text del contenidor');

html(): serveix per obtenir o establir el codi HTML d’un element. Aquest mètode funciona de manera similar al mètode text(), acceptant com a paràmetre una cadena amb el codi HTML que es vol establir o bé sense paràmetres per obtenir el codi HTML actual de l’element.

// Obté el codi HTML de l'element amb l'ID "contenidor".
var html = $('#contenidor').html();
 
// Estableix el codi HTML de l'element amb l'ID "contenidor".
$('#contenidor').html('<p>Aquest és el <strong>nou</strong> codi HTML del contenidor</p>');

addClass(): serveix per afegir una o més classes a un element. Aquest mètode accepta com a paràmetre una cadena amb el nom de la classe o classes que es volen afegir, separades per espais.

// Afegeix la classe "destacat" a tots els elements amb l'etiqueta "p".
$('p').addClass('destacat');
 
// Afegeix les classes "vermell" i "gros" a tots els elements amb l'etiqueta "p".
$('p').addClass('vermell gros');

removeClass(): serveix per eliminar una o més classes d’un element. Aquest mètode funciona de manera similar al mètode addClass(), acceptant com a paràmetre una cadena amb el nom de la classe o classes que es volen eliminar.

// Elimina la classe "destacat" de tots els elements amb l'etiqueta "p".
$('p').removeClass('destacat');
 
// Elimina les classes "vermell" i "gros" de tots els elements amb l'etiqueta "p".
$('p').removeClass('vermell gros');

Així, podríem tenir un codi HTML com el següent:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Exemple de manipulació d''elements HTML amb jQuery</title>
  <!-- Incloem la biblioteca jQuery. -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Definim estil per a la classe 'destacat'. -->
  <style>
    .destacat {
      color: red;
      font-weight: bold;
    }
  </style>
<!-- Codi JavaScript amb jQuery -->
  <script>
    // Seleccionem el paràgraf i els dos botons.
    const paragraf = $('#paragraf');
    const btnAfegir = $('#afegir-classe');
    const btnEliminar = $('#eliminar-classe');
 
    // Afegim un 'event listener' al primer botó per afegir la classe 'destacat' al paràgraf en clicar-lo.
    btnAfegir.click(function() {
      paragraf.addClass('destacat');
    });
 
    // Afegim un 'event listener' al segon botó per eliminar la classe 'destacat' del paràgraf en clicar-lo.
    btnEliminar.click(function() {
      paragraf.removeClass('destacat');
    });
  </script>
</head>
<body>
  <!-- Codi HTML -->
  <div class="contenidor">
    <p id="paragraf">Aquest és un paràgraf.</p>
    <button id="afegir-classe">Afegeix classe.</button>
    <button id="eliminar-classe">Elimina classe.</button>
  </div>
 
</body>
</html>

En aquest exemple, tenim un div amb un paràgraf a dins i dos botons. Utilitzant jQuery, afegim gestors d’esdeveniments (event listeners) als dos botons per tal d’afegir o eliminar la classe destacat del paràgraf en clicar-los.

Per afegir la classe, cal usar el mètode addClass i passar-li com a paràmetre el nom de la classe per afegir. Per eliminar la classe, cal usar el mètode removeClass i passar-li com a paràmetre el nom de la classe per eliminar.

Vegeu l’aspecte final de l’exemple:

Podeu veure aquest codi en funcionament a: https://codepen.io/iocdawm9/pen/ZEjBVMW.

El codi de l’anterior exemple es pot millorar amb l’ús del mètode següent:

hasClass(): per comprovar si un element té una determinada classe, es pot fer servir el mètode hasClass de jQuery. Aquest mètode retorna true si l’element té la classe especificada o false en cas contrari. Per exemple, paragraf.hasClass(‘destacat’) retorna true si el paràgraf té la classe destacat i false en cas contrari.

Vegeu una nova versió de l’exemple amb tan sols un botó d’“Afegir/Eliminar classe” per afegir la classe destacat al paràgraf si aquest no la té o per eliminar-la.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
      .destacat {
        font-weight: bold;
        color: red;
      }
    </style>
    <script>
      $(document).ready(function() {
        // Seleccionem el paràgraf amb jQuery.
        var paragraf = $('#paragraf');
 
        // Afegim o eliminem la classe "destacat" del paràgraf en clicar el botó "Afegir/Eliminar classe".
        $('#afegir-classe').click(function() {
          // Comprovem si el paràgraf té la classe "destacat".
          if (paragraf.hasClass('destacat')) {
            // Si té la classe, l'eliminem.
            paragraf.removeClass('destacat');
          } else {
            // Si no té la classe, l'afegim.
            paragraf.addClass('destacat');
          }
        });
      });
    </script>  
  </head>
  <body>
    <p id="paragraf">Aquest és un paràgraf.</p>
    <button id="afegir-classe">Afegir/Eliminar classe "destacat"</button>
  </body>
</html>

Vegeu el funcionament d’aquest exemple:

Podeu veure aquest exemple a: https://codepen.io/iocdawm9/pen/MWBbZeg.

Una altra forma de simplificar encara més l’exemple anterior és amb l’ús del mètode toggleClass().

* toggleClass(): és una funció que permet afegir o eliminar una classe CSS d’un o més elements HTML. Aquesta funció és útil per canviar l’estat d’un element o un conjunt d’elements amb un sol clic o esdeveniment. Aquesta funció té dos paràmetres: el primer és el nom de la classe per afegir o eliminar, i el segon (opcional) és un booleà que indica si es vol afegir o eliminar la classe. Si no es passa el segon paràmetre, per defecte la funció toggle l’elimina si la classe ja està afegida; i si no està afegida, la afegeix.

Així que per afegir una classe “destacat” a un element amb id “element1” s’ha de fer així:

$("#element1").toggleClass("destacat", true);

Per eliminar la classe “destacat” a un element amb id “element1”, s’ha de fer així:

$("#element1").toggleClass("destacat", false);

toggleClass es pot fer servir per canviar l’estat d’un element sense haver de fer servir una variable, o fer un if-else, per exemple, per determinar si una classe està afegida o no. Amb l’ús de toggleClass s’arriba a una versió encara més simple de l’exemple anterior, perquè en fer clic ja no cal fer cap verificació i tan sols fer un toggleClass que commuti la classe del paràgraf.

    $(document).ready(function () {
      // Seleccionem el paràgraf amb jQuery.
      var paragraf = $('#paragraf');
 
      // Afegim o eliminem la classe "destacat" del paràgraf quan es cliqui el botó "Afegir/Eliminar classe".
      $('#afegir-classe').click(function () {
        // Utilitzem el mètode ''toggleClass'' per afegir o eliminar la classe "destacat" del paràgraf.
        paragraf.toggleClass('destacat');
      });
    });

Aquestes són només algunes de moltes funcionalitats que ofereix jQuery per manipular elements HTML.

Addició i supressió d'elements

En ocasions pot ser necessari afegir o eliminar elements de la pàgina web dinàmicament, és a dir, sense necessitat de recarregar la pàgina. jQuery ofereix diferents mètodes per fer aquest tipus d’operacions de manera senzilla i ràpida.

Algunes de les possibilitats que ofereix jQuery per afegir i eliminar elements són:

append(): serveix per afegir un element o un conjunt d’elements al final d’un element pare. Aquest mètode accepta com a paràmetre una cadena amb el codi HTML dels elements que es volen afegir o bé un element o conjunt d’elements que ja hagin estat seleccionats amb jQuery:

// Afegeix un element <p> al final de l'element amb l'ID "contenidor".
$('#contenidor').append('<p>Aquest és el nou paràgraf.</p>');
 
// Afegeix els elements seleccionats al final de l'element amb l'ID "contenidor".
$('#contenidor').append($('p'));

prepend(): serveix per afegir un element o un conjunt d’elements al principi d’un element pare. Aquest mètode funciona de manera similar al mètode append(), acceptant el mateix tipus de paràmetres.

// Afegeix els elements seleccionats al principi de l'element amb l'ID "contenidor".
$('#contenidor').prepend($('p'));

remove(): serveix per eliminar un element o conjunt d’elements de la pàgina web. Aquest mètode no accepta cap paràmetre i elimina tots els elements seleccionats.

// Elimina tots els elements amb l'etiqueta "p" de la pàgina.
$('p').remove();

empty(): serveix per eliminar el contingut d’un element, però mantenint l’element en si. Aquest mètode no accepta cap paràmetre i elimina tots els elements fills de l’element seleccionat.

// Elimina el contingut de l'element amb l'ID "contenidor".
$('#contenidor').empty();

Aquestes són només algunes de les possibilitats que ofereix jQuery per afegir i eliminar elements de la pàgina web. Amb poques línies de codi es poden fer canvis molt importants i afegir dinamisme a la pàgina. Es poden combinar aquests mètodes per modificar el contingut HTML d’una pàgina de forma interactiva.

Exemple d'addició i supressió d'elements HTML dinàmicament amb jQuery

Vegeu com es crea un div amb tres paràgrafs dins seu i s’hi afegeixen quatre botons que fan servir els mètodes append(), prepend(), remove() i empty() per modificar els elements HTML que hi ha dins del contenidor.

El mètode append() afegeix elements HTML al final del contenidor. Així, quan es clica el botó “Afegir al final”, es crea un nou paràgraf amb un missatge i es posa al final del contenidor.
El mètode prepend() afegeix elements HTML al principi del contenidor. Així, quan es clica el botó “Afegir al principi”, es crea un nou paràgraf amb un missatge i es posa al principi del contenidor.
El mètode remove() elimina elements HTML del document. Així, quan es clica el botó “Eliminar primer”, es busca el primer paràgraf del contenidor i s’elimina.
El mètode empty() elimina tots els elements HTML dins del contenidor. Així, quan es clica el botó “Buidar”, es buiden tots els paràgrafs del contenidor.

Aquest exemple fa servir els mètodes find() i first() per seleccionar el primer paràgraf del contenidor. El mètode find() busca elements HTML dins d’un altre element, mentre que el mètode first() selecciona el primer element d’un conjunt d’elements HTML seleccionats amb jQuery.

<!DOCTYPE html>
<html>
 
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // Seleccionem el contenidor amb jQuery.
            var contenidor = $('#contenidor');
 
            // Afegim un nou paràgraf al final del contenidor en clicar el botó "Afegir al final".
            $('#afegir-al-final').click(function () {
                contenidor.append('<p>Aquest és un nou paràgraf afegit al final.</p>');
            });
 
            // Afegim un nou paràgraf al principi del contenidor en clicar el botó "Afegir al principi".
            $('#afegir-al-principi').click(function () {
                contenidor.prepend('<p>Aquest és un nou paràgraf afegit al principi.</p>');
            });
 
            // Eliminem el primer paràgraf del contenidor en clicar el botó "Eliminar primer".
            $('#eliminar-primer').click(function () {
                contenidor.find('p:first').remove();
            });
 
            // Buidem el contenidor en clicar el botó "Buidar".
            $('#buidar').click(function () {
                contenidor.empty();
            });
        });
    </script>
</head>
<body>
    <div id="contenidor">
        <p>Aquest és el primer paràgraf.</p>
        <p>Aquest és el segon paràgraf.</p>
        <p>Aquest és el tercer paràgraf.</p>
    </div>
    <button id="afegir-al-final">Afegir al final</button>
    <button id="afegir-al-principi">Afegir al principi</button>
    <button id="eliminar-primer">Eliminar primer</button>
    <button id="buidar">Buidar</button>
</body>
 
</html>

Vegeu el comportament d’aquest codi:

Podeu veure aquest codi en funcionament a: https://codepen.io/iocdawm9/pen/YzjpBJm

Gestió d'esdeveniments

Un dels grans avantatges de jQuery és que permet gestionar esdeveniments de manera senzilla i ràpida. Això és possible gràcies a la gran quantitat de mètodes que ofereix per afegir gestors d’esdeveniments a diferents elements de la pàgina web.

Algunes de les possibilitats que ofereix jQuery per gestionar esdeveniments són:

click(): serveix per afegir un gestor d’esdeveniments quan es fa clic sobre un element. Aquest mètode accepta com a paràmetre una funció que es crida cada vegada que es faci clic sobre l’element.

// Afegeix un gestor d'esdeveniments "click" als elements amb l'etiqueta "button".
$('button').click(function() {
  // Codi que es vol executar quan es fa clic sobre el botó.
  alert('Has fet clic sobre el botó!');
});

hover(): serveix per afegir dos gestors d’esdeveniments quan el cursor passa per sobre d’un element i quan el cursor ja no és sobre l’element. Aquest mètode accepta dos paràmetres, cada un amb una funció que es crida en cada cas.

// Afegeix un gestor d'esdeveniments "hover" als elements amb l'etiqueta "div".
$('div').hover(
  // Funció que es crida quan el cursor passa per sobre de l'element.
  function() {
    // Codi que es vol executar quan el cursor passa per sobre de l'element.
    $(this).css('background-color', 'red');
  },
  // Funció que es crida quan el cursor ja no és a sobre l'element.
  function() {
    // Codi que es vol executar quan el cursor ja no sigui sobre l'element.
    $(this).css('background-color', 'inherit');
  }
);

focus(): serveix per afegir un gestor d’esdeveniments quan un element adquireix el focus. Aquest mètode accepta com a paràmetre una funció que es cridarà cada vegada que l’element adquireixi el focus.

// Afegeix un gestor d'esdeveniments "focus" als elements amb l'etiqueta "input".
$('input').focus(function() {
  // Codi que es vol executar quan l'element adquireixi el focus.
  $(this).css('border-color', 'green');
});

blur(): serveix per afegir un gestor d’esdeveniments quan un element perd el focus. Aquest mètode funciona de manera similar al mètode focus(), acceptant com a paràmetre una funció que es cridarà cada vegada que l’element perdi el focus.

// Afegeix un gestor d'esdeveniments "blur" als elements amb l'etiqueta "input".
$('input').blur(function() {
  // Codi que es vol executar quan l'element perdi el focus.
  $(this).css('border-color', 'red');
});

Exemple de gestió d'esdeveniments amb jQuery

Creem un formulari amb dos inputs i un botó “Enviar”. A continuació, amb el mètode submit(), es gestiona l’esdeveniment de submit del formulari. Així, quan es clica el botó “Enviar” es duen les accions per defecte i es mostra un missatge al div “missatge”.

També es fa servir el mètode hover() per afegir i eliminar una classe “destacat” als inputs quan el cursor s’hi posi. Així, es destaca amb una mica de color, i quan el cursor marxa torna a la seva aparença per defecte.

A més, es fa servir el mètode focus() per mostrar un missatge al div “missatge” quan es posa el focus en un input, i el mètode blur() per mostrar un missatge al div “missatge” quan es perd el focus d’un input.

Amb aquest exemple es pot veure com utilitzar la gestió d’esdeveniments amb jQuery per afegir funcionalitats a un formulari HTML i interactuar amb els usuaris de la interfície d’usuari.

<!DOCTYPE html>
<html>
 
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // Seleccionem el formulari amb jQuery.
            var formulari = $('form');
 
            // Afegim un missatge al div "missatge" en clicar el botó "Enviar".
            formulari.submit(function (event) {
                event.preventDefault();
                $('#missatge').text('S\'ha enviat el formulari');
            });
 
            // Afegim una classe "destacat" als inputs quan s'hi posa el cursor.
            formulari.find('input').hover(function () {
                $(this).addClass('destacat');
            }, function () {
                $(this).removeClass('destacat');
            });
 
            // Afegim un missatge al div "missatge" quan es posa el focus en un input.
            formulari.find('input').focus(function () {
                $('#missatge').text('S\'ha posat el focus en un input');
            });
 
            // Afegim un missatge al div "missatge" quan es perd el focus d'un input.
            formulari.find('input').blur(function () {
                $('#missatge').text('S\'ha perdut el focus d\'un input');
            });
        });
    </script>
    <style>
        .destacat {
            background-color: yellow;
        }
    </style>
 
</head>
 
<body>
    <form>
        <label for="nom">Nom:</label>
        <input type="text" id="nom" name="nom">
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <br>
        <button type="submit">Enviar</button>
    </form>
    <div id="missatge"></div>
</body>
 
</html>

Observeu el comportament d’aquesta pàgina:

Podeu veure aquest exemple a: https://codepen.io/iocdawm9/pen/LYBbqav

Animacions i transicions

Un altre dels grans avantatges de jQuery és que permet crear animacions i transicions visuals de manera senzilla i ràpida. Això és possible gràcies a la gran quantitat de mètodes que ofereix per aplicar diferents efectes i animacions a elements de la pàgina web.

Algunes de les possibilitats que ofereix jQuery per crear animacions i transicions són:

fadeIn(): serveix per aplicar un efecte de transició fade in, és a dir, de transició de transparència a opacitat. Aquest mètode accepta diferents paràmetres per configurar la velocitat de l’animació i altres opcions.

// Aplica l'efecte 'fade in' als elements amb l'etiqueta "p".
$('p').fadeIn();
 
// Aplica l'efecte 'fade in' als elements amb l'etiqueta "p" amb una velocitat de 1000 mil·lisegons.
$('p').fadeIn(1000);

fadeOut(): serveix per aplicar un efecte de transició fade out, és a dir, de transició d’opacitat a transparència. Aquest mètode funciona de manera similar al mètode fadeIn(), i accepta els mateixos paràmetres:

// Aplica l'efecte 'fade out' als elements amb l'etiqueta "p".
$('p').fadeOut
// Aplica l'efecte 'fade out' als elements amb l'etiqueta "p" amb una velocitat de 1000 mil·lisegons.
$('p').fadeOut(1000);

slideUp(): serveix per aplicar un efecte de transició slide up, és a dir, de transició de posició amb un desplaçament cap amunt. Aquest mètode accepta diferents paràmetres per configurar la velocitat de l’animació i altres opcions.

// Aplica l'efecte 'slide up' als elements amb l'etiqueta "div".
$('div').slideUp();
// Aplica l'efecte 'slide up' als elements amb l'etiqueta "div" amb una velocitat de 1000 mil·lisegons.
$('div').slideUp(1000);

slideDown(): serveix per aplicar un efecte de transició slide down, és a dir, de transició de posició amb un desplaçament cap avall. Aquest mètode funciona de manera similar al mètode slideUp(), i accepta els mateixos paràmetres.

// Aplica l'efecte 'slide down' als elements amb l'etiqueta "div".
$('div').slideDown();
 
// Aplica l'efecte 'slide down' als elements amb l'etiqueta "div" amb una velocitat de 1000 mil·lisegons.
$('div').slideDown(1000);

Vegeu l’ús d’aquests efectes a una pàgina web amb un exemple.

Exemple d'animacions i transicions amb jQuery I

Creem una pàgina web amb un paràgraf dins d’un divisor i tres botons. El paràgraf té l’efecte fadeIn() quan es carrega la pàgina, i cada botó té un gestor d’esdeveniments click() associat que aplica un efecte diferent al paràgraf: el primer botó aplica l’efecte fadeOut(), el segon botó aplica l’efecte slideUp() i el tercer botó aplica l’efecte slideDown().

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Exemple d´animacions i transicions amb jQuery</title>
    <style>
        button {
            margin: 10px;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // Aplica l'efecte "fade in" al paràgraf quan es carrega la pàgina.
            $('#contenidor p').fadeIn();
 
            // Afegeix un gestor d'esdeveniments "click" al botó "boton1".
            $('#boton1').click(function () {
                // Aplica l'efecte "fade out" al paràgraf
                $('#contenidor p').fadeOut();
            });
 
            // Afegeix un gestor d'esdeveniments "click" al botó "boton2".
            $('#boton2').click(function () {
                // Aplica l'efecte "slide up" al paràgraf
                $('#contenidor p').slideUp();
            });
 
            // Afegeix un gestor d'esdeveniments "click" al botó "boton3".
            $('#boton3').click(function () {
                // Aplica l'efecte "slide down" al paràgraf
                $('#contenidor p').slideDown();
            });
        });
    </script>
</head>
 
<body>
    <div id="contenidor">
        <p>Aquest paràgraf té l'efecte "fade in" quan es carrega la pàgina.</p>
    </div>
    <button id="boton1">Aplica l'efecte "fade out" al paràgraf.</button>
    <button id="boton2">Aplica l'efecte "slide up" al paràgraf.</button>
    <button id="boton3">Aplica l'efecte "slide down" al paràgraf.</button>
</body>
</html>

Vegeu l’aspecte final de l’exemple.

Podeu accedir al codi d’aquest exemple a: https://codepen.io/iocdawm9/pen/mdjRbqZ

animate(): és una manera senzilla d’afegir animacions a elements HTML. Aquest mètode permet modificar els valors dels atributs CSS d’un element de manera progressiva durant un període de temps especificat. Així, es pot crear un efecte d’animació que canviï l’aparença d’un element de manera suau i atractiva.

Per utilitzar el mètode animate(), cal indicar l’atribut CSS que es vol modificar, el valor final que es vol assolir i el temps que es vol emprar per a la transició. A més, es pot especificar una funció callback que es cridi quan l’animació acabi.

Vegeu un exemple d’ús del mètode animate() per moure un element amb classe “caixa” 200 píxels cap a la dreta durant dos segons:

$(".caixa").animate({
  left: "200px"
}, 2000);

També es pot utilitzar el mètode animate() per modificar múltiples atributs CSS alhora, com ara el color de fons i l’amplada d’un element.

$(".caixa").animate({
  backgroundColor: "blue",
  width: "200px"
}, 2000);

toggle(): permet intercanviar entre els estats de “visible” i “amagat” d’un element, fent servir un efecte de fade in o fade out depenent de l’estat actual de l’element.

$(".caixa").toggle(2000);

Exemple d'animacions i transicions amb jQuery II

En aquest exemple, es fa servir el mètode fadeOut() per fer que els elements amb classe “caixa” desapareguin amb un efecte de transició de 1000 mil·lisegons (1 segon), i el mètode fadeIn() per fer que tornin a aparèixer amb un efecte de transició de 1000 mil·lisegons (1 segon).

També es fa servir el mètode animate() per moure i girar els elements amb classe “caixa” amb una animació de 1000 mil·lisegons (1 segon) quan el cursor hi passi per sobre i tornar a la seva posició i orientació per defecte quan el cursor se’n vagi.

<!DOCTYPE html>
<!-- Exemple d´animacions i transicions amb jQuery -->
<html>
<head>
    <meta charset="utf-8">
    <style>
        /* Declarem l´estil per a la capa amb classe "caixa". */
        .caixa {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // Afegim una animació de 'fadeIn' i 'fadeOut' als elements amb classe "caixa" quan es faci clic.
            $(".caixa").click(function () {
                $(this).fadeOut(1000).fadeIn(1000);
            });
 
            // Afegim una animació de moure i girar als elements amb classe "caixa" quan el cursor hi passi per sobre.
            $(".caixa").hover(
                function () {
                    $(this).animate({
                        left: "200px",
                        rotate: "360deg"
                    }, 1000);
                },
                function () {
                    $(this).animate({
                        left: "0px",
                        rotate: "0deg"
                    }, 1000);
                }
            );
        });
    </script>
</head>
 
<body>
    <!-- Afegim tres elements amb classe "caixa". -->
    <div class="caixa"></div>
    <div class="caixa"></div>
    <div class="caixa"></div>
</body>
 
</html>

L’aspecte final de l’animació seria:

Teniu aquest exemple a: https://codepen.io/iocdawm9/pen/qByRWLg

Per aplicar més d’un efecte a la mateixa crida a animate(), es pot passar un objecte amb les diferents propietats que es volen animar com a paràmetre.

Vegeu un exemple que aplica aplica transicions de múltiples propietats a la vegada.

Exemple d'animacions i transicions amb jQuery III

En aquest exemple, el quadrat es mou cap a la dreta, canvia la seva forma per a fer-se circular canvia el seu color a blau durant dos segons (2000 mil·lisegons), i després es fa una animació inversa també amb moviment. Finalment es fa visible o amagat, depenent de l’estat anterior, amb un efecte de fade in o fade out durant dos segons.

Per defecte, la propietat position dels elements HTML té un valor de static, i això vol dir que no es pot modificar la seva posició amb la propietat left. Per poder moure un element amb aquesta propietat, s’ha de definir la propietat position com a absolute, relative o fixed. Addicionalment, per poder fer la transició de color, cal afegir una referència a la biblioteca jQueryUI i el seu full d’estils.

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <style>
        .quadrat {
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 25px;
            position: relative;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn-iniciar").click(function () {
                // Moure un element amb un efecte d´animació.
                $(".quadrat").animate({
                    left: "200px",
                    borderRadius: "0",
                    backgroundColor: "blue"
                }, 2000);
 
                $(".quadrat").animate({
                    left: "400px",
                    borderRadius: "25",
                    backgroundColor: "red"
                }, 2000);
 
                // Intercanviar entre estat de "visible" i "amagat" d'un element amb un efecte de 'fade in / fade out'.
                $(".quadrat").toggle(2000);
            });
        });
    </script>
</head>
 
<body>
    <div class="quadrat"></div>
    <button id="btn-iniciar">Inicia animació.</button>
</body>
</html>

Podeu accedir al codi d’aquest exemple a: https://codepen.io/iocdawm9/pen/VwBPwmL

L’animació tindrà una aspecte similar a:

Per defecte, jQuery ve amb funcionalitat de cua per a les animacions. Això significa que en escriure diverses crides animate(), l’una després de l’altra, jQuery crea una “cua interna” amb aquestes crides al mètode. A continuació, executa les crides animate una darrere l’altra. Per tant, per fer diferents animacions l’una després de l’altra es pot aprofitar la funcionalitat de cua.

Exemple d'encuament d'animacions amb jQuery

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <style>
        .quadrat {
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 0px;
            position: relative;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn-iniciar").click(function () {
                var div = $("div");
                div.animate({ height: '200px', opacity: '0.4' }, "slow");
                div.animate({ width: '200px', opacity: '0.8' }, "slow");
                div.animate({ height: '100px', opacity: '0.4' }, "slow");
                div.animate({ width: '100px', opacity: '0.8' }, "slow");
            });
        });
    </script>
</head>
 
<body>
    <div class="quadrat"></div>
    <button id="btn-iniciar">Iniciar animació</button>
</body>
 
</html>

El codi d’aquest exemple està disponible a: https://codepen.io/iocdawm9/pen/YzjNzQw

Vegeu l’aspecte de l’animació:

Amb aquests mètodes es poden crear animacions i transicions visuals atractives i senzilles d’utilitzar amb jQuery. És important no abusar d’aquest tipus d’efectes i utilitzar-los de forma moderada per millorar l’experiència d’usuari, sense sobrecarregar la interfície ni ralentitzar el rendiment.

Ús de connectors de jQuery

Un dels grans avantatges de jQuery és la gran quantitat de plug-in que hi ha disponibles per afegir funcionalitats addicionals a la interfície d’usuari. Això fa que sigui molt senzill afegir, per exemple, galeries d’imatges, menús desplegables o formularis amb autocompleció a la pàgina web.

Una de les principals biblioteques d'elements d'interfície d'usuari implementats amb jQuery és jqueryui.com

Per utilitzar un connector de jQuery, primer, s’han de descarregar els fitxers CSS i el de JavaScript del plug-in i incloure’ls a la pàgina web. A continuació, es poden utilitzar les funcions i mètodes que ofereix el connector per configurar-lo i fer-lo funcionar.

Alguns connectors de jQuery molt útils són:

Lightbox (lokeshdhakar.com/projects/lightbox2): serveix per crear galeries d’imatges amb un efecte de lightbox que mostra les imatges en una finestra flotant sobre la pàgina. Per utilitzar aquest connector, primer cal descarregar el fitxer JavaScript i incloure’l a la pàgina, i, després, afegir un enllaç amb l’atribut data-lightbox a cada imatge que es vol mostrar a la galeria.

    <!--Inclou jQuery, és important que hi sigui abans que el plug-in.-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Inclou el fitxer CSS del plug-in Lightbox. -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
 
    <!-- Inclou el fitxer JavaScript del plug-in Lightbox. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
 
<!-- Crea un divisor amb l'etiqueta "lightbox-gallery" per agrupar les imatges de la galeria. -->
<div class="lightbox-gallery">
  <!-- Crea un enllaç amb l'atribut "data-lightbox" i la clau "galeria" per mostrar la imatge en una finestra "lightbox". -->
  <a href="imatges/imatge1.jpg" data-lightbox="galeria">
    <img src="imatges/imatge1.jpg" alt="Imatge 1">
  </a>
  <!-- Crea un altre enllaç amb l'atribut "data-lightbox" i la clau "galeria" per mostrar una altra imatge a la mateixa finestra "lightbox". -->
  <a href="imatges/imatge2.jpg" data-lightbox="galeria">
    <img src="imatges/imatge2.jpg" alt="Imatge 2">
  </a>
</div>

Amb aquest exemple, quan es fa clic en una de les imatges de la galeria, es mostra en una finestra flotant sobre la pàgina amb un fons fosc. A més, es mostren controls de navegació per passar a les següents o anteriors imatges de la galeria. És important l’ordre en què s’inclouen les referències a jQuery i el connector (plug-in). Vegeu el comportament d’aquest connector:

Podeu veure aquest exemple en funcionament a https://codepen.io/iocdawm9/pen/abjpmNd (recordeu que els recursos externs són a l’opció Settings del Pen).

Slick (kenwheeler.github.io/slick): serveix per crear carrusels o diapositives d’imatges amb transicions i efectes. Per utilitzar aquest connector, primer cal descarregar el fitxer JavaScript i incloure’l a la pàgina, i, després, afegir un divisor amb l’etiqueta slick-slider i incloure dins d’aquest divisor els elements que es volen mostrar al carrusel.

<!-- Inclou els fitxers CSS del plug-in Slick. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
 
<!-- Inclou el fitxer JavaScript del plugin Slick. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
 
 
<!-- Crea un divisor amb l'etiqueta "slick-slider" i inclou dins d'aquest divisor les imatges per al carrusel. -->
<div class="slick-slider">
  <img src="imatges/imatge1.jpg" alt="Imatge 1">
  <img src="imatges/imatge2.jpg" alt="Imatge 2">
  <img src="imatges/imatge3.jpg" alt="Imatge 3">
</div>

Per configurar el connector slick hi ha diferents opcions disponibles, com ara la velocitat de transició, el nombre d’elements, els controls de navegació, etc. Per exemple:

$('.slick-slider').slick({
  // Configura la velocitat de transició en mil·lisegons.
  speed: 1000,
  // Configura el nombre d'elements. 
  slidesToShow: 2,
  // Configura la visibilitat dels controls de navegació.
  arrows: true,
});

Amb aquest exemple, es crea un carrusel amb tres imatges que es mostren cada vegada que passa un segon, amb controls de navegació per passar a les següents. Podeu veure el comportament d’aquest connector:

Podeu veure aquest exemple en funcionament a: https://codepen.io/iocdawm9/pen/mdjpGNZ

jQuery UI Autocomplete (jqueryui.com/autocomplete): serveix per crear formularis amb autocompleció que mostren suggeriments mentre l’usuari escriu. Per utilitzar aquest connector, primer heu de descarregar el fitxer JavaScript i incloure’l a la pàgina, i, després, afegir un input amb l’etiqueta input i la classe autocomplete. A més, cal configurar les dades que es mostraran al formulari d’autocompleció.

    <!-- Inclou el fitxer CSS de jQuery UI. -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!-- Inclou jQuery i jQuery UI. -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
 
<!-- Crea un input amb l'etiqueta "input" i la classe "autocomplete". -->
  <div class="ui-widget">
        <input type="text" class="autocomplete">
    </div>

       $(document).ready(function () {
       // Configura les dades del formulari d'autocompleció.
      var availableTags = [
                "Amazon",
                "AMD",
                "Apple",
                "Microsoft",
                "Motorola",
                "Mozilla",
                "Github",
                "Google",
                "GoPro"
            ];
 
            $('.autocomplete').autocomplete({
                source: availableTags
            });
        });

Amb aquest exemple, quan l’usuari escriu al formulari es mostren suggeriments segons les paraules incloses a la propietat availableTags. Si l’usuari selecciona alguna d’aquestes paraules, es mostra al formulari:

Podeu veure aquest exemple en funcionament a https://codepen.io/iocdawm9/pen/gOjoBRa.

Superfish (superfish.joelbirch.design): serveix per crear menús desplegables amb transicions i efectes. Per utilitzar aquest connector s’ha de descarregar el fitxer JavaScript i incloure’l a la pàgina, i, després, afegir un menú amb l’estructura HTML corresponent.

<!-- Inclou el fitxer CSS del plug-in Superfish. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/css/superfish.min.css">
 
<!-- Inclou el fitxer JavaScript del plug-in Superfish. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/superfish/1.7.10/js/superfish.min.js"></script>
 
 
<!-- Crea un menú amb l'estructura següent:
  - Un element amb l'etiqueta "ul" i la classe "sf-menu" per agrupar els elements del menú.
  - Un element amb l'etiqueta "li" per cada opció del menú.
  - Un element amb l'etiqueta "a" per crear l'enllaç de cada opció.
  - Un element amb l'etiqueta "ul" per crear un submenú desplegable (opcional).
-->
<ul class="sf-menu">
  <li><a href="#">Opció 1</a></li>
  <li><a href="#">Opció 2</a></li>
  <li>
    <a href="#">Opció 3</a>
    <ul>
      <li><a href="#">Subopció 1</a></li>
      <li><a href="#">Subopció 2</a></li>
      <li><a href="#">Subopció 3</a></li>
    </ul>
  </li>
</ul>

Per configurar el connector superfish hi ha diferents opcions disponibles, com ara la velocitat de transició, el tipus de transició, els submenús, etc. Per exemple:

$('.sf-menu').superfish({
  // Configura la velocitat de transició en mil·lisegons.
  speed: 'fast',
  // Configura el tipus de transició.
  animation: {
    height: 'show'
  },
  // Configura la visibilitat dels submenús.
  dropdown: true
});

Amb aquest exemple, es crea un menú desplegable amb transicions ràpides i amb la possibilitat de mostrar submenús. L’aspecte final del menú amb Superfish seria:

Podeu veure el codi complet d’aquest exemple a https://codepen.io/iocdawm9/pen/oNMpapr.

Podeu veure altres exemples de com fer servir aquest connector a superfish.joelbirch.design/examples.

Consideracions per al disseny d'interfícies d'usuari amb jQuery

Quan es dissenya una interfície d’usuari amb jQuery, hi ha algunes coses a tenir en compte per assegurar que la interfície sigui ràpida, compatible amb diferents navegadors i fàcil d’utilitzar per als usuaris:

Velocitat i rendiment: és important que la interfície d’usuari es carregui ràpidament i que funcioni de manera fluida, ja que això millora l’experiència d’usuari. Per millorar la velocitat i el rendiment, hi ha tècniques com ara la compressió d’imatges, el CDN per a fitxers externs, les versions minificades dels fitxers JavaScript, etc.
Compatibilitat amb els navegadors: és important que la interfície d’usuari sigui compatible amb diferents navegadors, ja que els usuaris poden utilitzar diferents navegadors per accedir a la pàgina web. Per assegurar la compatibilitat, hi ha tècniques com l’ús d’últimes versions dels navegadors i les capes de compatibilitat per a funcions no disponibles en alguns navegadors.
Facilitat d’ús: és important que la interfície d’usuari sigui fàcil d’utilitzar per als usuaris, ja que això millora l’experiència d’usuari. Per assegurar la facilitat d’ús, hi ha tècniques com ara seguir les normes d’usabilitat, utilitzar una disposició clara i lògica dels elements o utilitzar icones i textos clarament identificables.

Disseny d'interfícies d'usuari amb Angular i Material

Angular és un marc de desenvolupament (framework) d’aplicacions web basat en components que es va desenvolupar i és mantingut per Google. Angular utilitza TypeScript, un llenguatge de programació basat en JavaScript amb una sintaxi més estructurada i orientada a objectes. Angular és una opció popular per a la construcció d’aplicacions web modernes i escalables, ja que proporciona un conjunt complet d’eines i funcionalitats per a la creació d’aplicacions web robustes i mantenibles.

A angular.io/docs teniu tota la documentació oficial d’Angular amb tutorials sobre com començar a treballar amb aquest (framework).

Material és un conjunt de components d’interfície d’usuari dissenyats per Google que es basen en el disseny del programari de Google. Material proporciona un conjunt d’estils estètics i una biblioteca de components d’interfície d’usuari que es poden utilitzar per crear aplicacions web amb un aspecte i una sensació consistents amb el disseny del programari de Google.

Utilitzar Angular i Material junts és una opció atractiva per al disseny d’interfícies web d’usuari perquè proporciona un marc de desenvolupament d’aplicacions web modern i escalable juntament amb un conjunt complet de components d’interfície d’usuari amb un estil consistent i atractiu.

L’ús conjunt d’Angular i Material es pot fer servir per crear aplicacions web amb una funcionalitat i una experiència d’usuari excel·lents. A més, Angular i Material són compatibles amb altres eines i biblioteques de disseny d’interfície d’usuari, cosa que fa que sigui fàcil personalitzar l’aspecte i la funcionalitat de l’aplicació segons les necessitats del projecte.

Configuració del projecte Angular i instal·lació de les dependències de Material

Abans de començar a treballar amb Angular, heu de tenir instal·lat Node.js i npm a l’ordinador.

Node.js és un entorn d’execució d’aplicacions JavaScript a la màquina del servidor, mentre que npm és una eina de gestió de paquets que ve amb Node.js i es fa servir per instal·lar mòduls de Node.js i altres eines de desenvolupament.

Instal·lació de Node.js

Per instal·lar Node.js i npm, visiteu la pàgina web oficial de Node.js (nodejs.org) i descarregueu l’última versió estable. Executeu l’instal·lador i seguiu les instruccions per completar la instal·lació.

Teniu una versió catalana del web a nodejs.org/ca (vegeu la figura).

Figura Versió catalana de la web de node.js

Per començar a utilitzar Angular i Material junts, primer cal configurar un nou projecte Angular amb l’Angular CLI (línia d’ordres d’Angular). L’Angular CLI és una eina de línia d’ordres que es pot utilitzar per generar automàticament els elements bàsics d’un projecte Angular, com ara els arxius de configuració, els components i els mòduls. Per utilitzar Angular CLI, primer cal instal·lar-lo mitjançant npm o yarn. Si utilitzeu npm, podeu fer-ho amb el següent comandament per instal·lar Angular CLI:

npm install -g @angular/cli

Després podeu utilitzar la comanda ng new per crear un nou projecte Angular amb un nom determinat. Aquesta comanda genera automàticament tots els arxius i carpetes necessaris per al projecte Angular, incloent una estructura de fitxers i un conjunt de dependències bàsiques per al projecte. Per exemple, podeu utilitzar la següent ordre per crear un projecte Angular amb el nom “my-app”:

ng new my-app

Això crea una nova aplicació Angular amb el nom “my-app” al directori actual. Apareixen una sèrie de preguntes per personalitzar la configuració del projecte i, una vegada respostes totes les preguntes, Angular CLI crea el projecte i instal·la totes les dependències necessàries.

Quan el projecte Angular està creat, podeu executar-lo utilitzant l’ordre següent:

cd my-app
ng serve

Això inicia un servidor de desenvolupament local que permet veure l’aplicació en acció al navegador. Per defecte, l’aplicació se serveix a l’adreça http://localhost:4200/. Es pot canviar el port utilitzant l’opció —port de l’ordre ng serve. També es pot fer que automàticament es visualitzi el projecte amb el navegador predeterminat amb l’opció —open.

ng serve --open

Quan el projecte Angular ja està creat i executat, cal familiaritzar-se amb l’estructura del projecte (vegeu la figura).

A partir de la versió 6 d’Angular, les funcionalitats relacionades amb els tests d’integració (carpeta e2e) s’han separat de l’estructura de projecte per defecte d’Angular.

Els fitxers i les carpetes més importants d’un projecte Angular són:

src/: conté el codi font de l’aplicació.
src/app/: conté el codi font de l’aplicació, dividit en diferents mòduls i components.
src/index.html: és el fitxer HTML principal de l’aplicació que es veu quan es visita l’URL de l’aplicació.
src/main.ts: és el punt d’entrada de l’aplicació. S’executa quan es carrega l’aplicació i s’encarrega de crear i executar el mòdul principal de l’aplicació.
src/polyfills.ts: és el fitxer que conté biblioteques que permeten que l’aplicació funcioni correctament a navegadors antics.
src/styles.css: aquest fitxer conté estils globals de l’aplicació. Es carrega en tots els components de l’aplicació.

Una vegada s’ha configurat el projecte Angular, es pot instal·lar @angular/material i altres dependències relacionades amb Material amb npm o yarn.

@angular/material és un paquet que proporciona una sèrie de components d’interfície d’usuari basats en Material que es poden utilitzar en aplicacions Angular.

Vegeu a la figura el web del paquet Material per a Angular, on hi ha la referència de tots els components disponibles.

Figura Web dels components Material para Angular

També es poden instal·lar altres dependències relacionades amb Material, com ara @angular/cdk (quit de Construcció d’Angular), que proporciona un conjunt d’eines per crear components personalitzats basats en els components de Material. Per instal·lar @angular/material i altres dependències relacionades amb Material, es pot utilitzar l’ordre d’Angular CLI, ng add seguit del nom del paquet. Per exemple, podeu utilitzar la següent ordre per instal·lar @angular/material (l’heu d’executar dins de la carpeta del projecte que heu creat prèviament).

Tot el procés d’instal·lació del paquet Material per a Angular a és a material.angular.io/guide/getting-started.

ng add @angular/material

Aquesta ordre va fent una sèrie de preguntes sobre els components addicionals, temes per defecte, etc. Instal·la els paquets i totes les seves dependències en el projecte Angular i ho afegeix al fitxer package.json del projecte. Un cop s’han instal·lat les dependències de Material, es poden començar a utilitzar els components de Material en l’aplicació Angular.

Vegeu a la figura el procés d’instal·lació del paquet Material per a Angular:

Figura Instal·lació de Material per a Angular

Components de Material en les vistes de l'aplicació

Amb Angular, una vista d’aplicació és un component que s’encarrega de mostrar la interfície d’usuari per als usuaris. Aquest component és l’últim nivell de component que es mostra en pantalla i sol ser el primer component que s’executa en carregar l’aplicació.

La vista d’aplicació en Angular es compon de diferents fitxers. Els més importants són:

/nom_app/src/app/app.component.ts: és el fitxer on es defineix el component de vista d’aplicació. El component sol estar definit amb la clau @Component i conté la lògica del component.
/nom_app/src/app/app.component.html: és el fitxer on es defineix la plantilla HTML associada al component de vista d’aplicació. Aquesta plantilla conté els elements HTML i les directives d’Angular que es mostren en pantalla.
/nom_app/src/app/app.component.scss o app.component.css: és el fitxer on es defineixen els estils associats al component de vista d’aplicació. Aquest fitxer pot contenir estils CSS normals o estils SASS o LESS si aquestes eines estan configurades a l’aplicació.
/nom_app/src/app/app.module.ts: és el fitxer on es defineix el mòdul principal de l’aplicació i on es declaren els diferents components, serveis i mòduls que s’utilitzen a l’aplicació. En aquest fitxer s’hi declara el component de vista d’aplicació

Al web material.angular.io/components/categories apareixen documentats tots els components disponibles, amb instruccions sobre les importacions als projectes per fer-los servir i documentació sobre com funcionen les etiquetes i quines propietats tenen. Per exemple, hi ha tota la informació sobre com fer servir el component Menu a la següent adreça: material.angular.io/components/menu/overview:

Un cop instal·lades les dependències de Material en el projecte Angular, es poden començar a utilitzar els components de Material en les diferents vistes de l’aplicació. Primer cal importar els mòduls de Material als mòduls de l’aplicació on s’hagin d’utilitzar els components de Material. Això es pot fer afegint les següents línies de codi al mòdul de l’aplicació (fitxer /my-app/src/app/app.module.ts).

import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';

A continuació, es pot afegir el mòdul importat a la llista imports del mòdul de l’aplicació, dins del mateix fitxer /my-app/src/app/app.module.ts. Això permet utilitzar els components del mòdul en qualsevol component del mòdul. Per exemple:

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  // Altres propietats del mòdul
})
export class AppModule {}

Un cop s’han importat els mòduls de Material al mòdul de l’aplicació, es poden començar a utilitzar els components de Material en les vistes de l’aplicació. Això es pot fer utilitzant les etiquetes HTML corresponents dels components de Material en les plantilles de components. Per exemple, per utilitzar un botó de Material en una plantilla, es pot afegir l’etiqueta “mat-button” a la plantilla:

<button mat-button>Click me!</button>

O també una barra de navegació:

<mat-toolbar color="primary">
    <button mat-button routerLink="/">Home</button>
    <button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item routerLink="/page1">Page 1</button>
      <button mat-menu-item routerLink="/page2">Page 2</button>
    </mat-menu>
  </mat-toolbar>

Abans de veure pas a pas com incorporar en un projecte una barra de navegació de Material, cal tenir en compte que en aquest exemple, com que té encapsul·lats els diferents elements d’interfície d’usuari, s’hi afegeix un component del projecte que implementarà la barra de navegació Material. Així serà més fàcil reutilitzar aquest component a diferents parts del nostre projecte. L’ordre per crear un component en un projecte Angular és:

ng generate component navbar

Aquesta ordre crea a la carpeta my-app/src/app una nova carpeta amb el nom navbar i, a dins, l’estructura bàsica d’un component d’Angular, que és similar a la de la vista d’aplicació:

navbar.component.ts: és el fitxer on es defineix el component. El component està definit amb la clau @Component i conté la lògica del component, com ara les variables i les funcions associades al component.
navbar.component.html: és el fitxer on es defineix la plantilla HTML associada al component. Aquesta plantilla conté els elements HTML i les directives d’Angular que es mostren en pantalla.
navbar.component.scss o nom_component.component.css: és el fitxer on es defineixen els estils associats al component. Aquest fitxer pot contenir estils CSS normals o estils SASS o LESS si aquestes eines estan configurades a l’aplicació.
navbar.component.spec.ts: és el fitxer on es defineixen les unitats de prova per al component. Aquest fitxer conté les funcions de prova associades al component, i es fa servir per comprovar que el component funciona correctament.

Aquesta estructura de fitxers es genera per a cada component creat, i això facilita l’organització del codi i la comprensió de l’estructura de l’aplicació.

Exemple d'implementació d'una aplicació web Angular amb barra de navegació de Material

Creem el projecte angular des de la línia de comandes (recordeu que cal tenir instal·lats prèviament npm via node.js i angular/cli). Creem el projecte, de nom ng-mat, amb l’ordre següent:

ng new ng-mat

Aquesta comanda crea tota l’estructura inicial del projecte Angular. Cal indicar-li a l’assistent de creació de projectes d’Angular que no volem estadístiques de Google (opció per defecte), que volem el routing (y a la segona pregunta) i que volem estils en format CSS (opció per defecte).

Instal·lem el paquet @angular/material.

npm install @angular/material

Amb les dependències instal·lades, podem començar a treballar amb Material.

Incorporem les els mòduls de Material al fitxer /ng-mat/src/app/app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatButtonModule} from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
 
// Altres propietats del mòdul
 
 
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule
  ],

Creem el component de la barra de navegació.

ng generate component navbar

Aquest component utilitza el component de barra de navegació de Material per crear una barra de navegació amb un menú desplegable i un botó d’accés a la pàgina d’inici.

Incorporem el codi HTML a la plantilla del component de barra de navegació (fitxer /ng-mat/src/app/navbar/navbar.component.html).

<mat-toolbar color="primary">
    <button mat-button routerLink="/">Home</button>
    <button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item routerLink="/page1">Page 1</button>
      <button mat-menu-item routerLink="/page2">Page 2</button>
    </mat-menu>
  </mat-toolbar>

Aquesta plantilla crea una barra de navegació amb un botó d’accés a la pàgina d’inici que utilitza la directiva “routerLink” per navegar a la pàgina d’inici quan es fa clic. També hi ha un botó de menú que utilitza la directiva “matMenuTriggerFor” per desplegar un menú amb opcions de navegació quan es fa clic. El menú utilitza els components mat-menu i mat-menu-item per mostrar les opcions de navegació amb enllaços que utilitzen la directiva “routerLink” per navegar a les diferents pàgines de l’aplicació.

Després podem afegir a qualsevol vista de l’aplicació, per exemple a la vista principal de l’aplicació, /src/app/app.component.html amb l’etiqueta app-navbar. Això permet utilitzar la barra de navegació amb el menú desplegable en qualsevol lloc de l’aplicació. Així, incorporem la barra de navegació a la pàgina principal del projecte:

<app-navbar></app-navbar>

Addicionalment, afegim a a mode d’exemple altres elements d’interfície d’usuari Material, com etiquetes i botons.

<app-navbar></app-navbar>
 
<section>
  <div class="example-label">Raised</div>
  <div class="example-button-row">
    <button mat-raised-button>Basic</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-raised-button color="accent">Accent</button>
    <button mat-raised-button color="warn">Warn</button>
    <button mat-raised-button disabled>Disabled</button>
    <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
  </div>
 
</section>

Compilem i obrim el projecte al navegador predeterminat amb l’ordre ng-serve.

ng serve --open

L’aspecte de l’aplicació Angular amb elements d’interfície d’usuari Material és :

Podeu accedir al codi d’aquest projecte al repositori Github del mòdul: https://github.com/iocdawm9/ng-mat

Configuració d'estils de l'aplicació amb el disseny de Material

Es poden configurar els estils de l’aplicació amb el disseny de Material. La biblioteca de temes de Material permet definir els colors, les fonts i altres estils per a l’aplicació amb facilitat.

Al web del paquet Material per a Angular teniu una secció específica dedicada a la personalització de temes d’Angular-Material: material.angular.io/guide/theming

Podeu consultar els temes disponibles per a Material-Angular a: https://shorturl.at/arX48.

Exemple de creació d'un tema personalitzat per a un menú Material

Prenem l’exemple anterior del menú de navegació.

Importem el fitxer de temes de Material cap al fitxer /src/styles.css de l’aplicació:

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

També podem modificar el tema del projecte modificant la secció styles de l’arxiu angular.json amb el nom del CSS predefinit.

Això aplica el tema predefinit “pink-bluegrey” a l’aplicació. Els colors de l’aplicació canvien (vegeu la figura).

Figura Menú de navegació amb tema pink-bluegrey

Amb coneixements de SASS i treballant amb projectes creats amb fulls d’estils SCSS en comptes de CSS, que cal indicar en el moment de creació del projecte (vegeu la figura), es poden personalitzar els temes predefinits de Material-Angular.

Figura Selecció format full d’estils projecte Angular

Es pot incloure al fitxer /src/styles.scss un codi com el següent:

@use '@angular/material' as mat;

@include mat.core();
$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The "warn" palette is optional and defaults to red if not specified.
$my-warn: mat.define-palette(mat.$red-palette);
$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
   warn: $my-warn,
 ),
 typography: mat.define-typography-config(),
 density: 0,
));

// Emit styles for MatButton based on `$my-theme`. Because the configuration
// passed to `define-light-theme` omits typography, `button-theme` will not
// emit any typography styles.
@include mat.button-theme($my-theme);

Aquest codi és un exemple de creació d’un tema personalitzat utilitzant la biblioteca de temes de Material per a Angular.

La primera línia, @use '@angular/material’ as mat;, és necessària per importar la biblioteca de temes de Material.
La segona línia, @include mat.core();, és necessària per aplicar els estils de la biblioteca de temes de Material a l’aplicació.
Es defineixen les variables per a les paletes de colors primàries i accentuades, $my-primary i $my-accent, respectivament. S’utilitza la funció mat.define-palette, que necessita la llista de colors i el color seleccionat.
Es defineix una variable opcional per a la paleta d’avís, $my-warn, que per defecte és el color vermell si no s’especifica el contrari.
Es defineix el tema personalitzat amb la funció mat.define-light-theme, que necessita les variables de paletes de colors, tipografies i densitat.
Amb @include mat.button-theme($my-theme); s’estableixen els estils per als botons basats en el tema personalitzat.

Per fer que aquest codi funcioni les dependències necessàries han d’estar instal·lades i configurar el projecte perquè sigui capaç de llegir els arxius SCSS. A l’arxiu angular.json s’ha de buscar on s’especifiquen els arxius d’estils i afegir l’arxiu scss on hi ha el codi anterior, si no fos el predeterminat (/src/styles.scss).

Exemples de disseny d'interfícies web d'usuari amb Angular i Material

A partir d’alguns exemples de disseny d’interfícies web d’usuari amb Angular i Material es pot il·lustrar com utilitzar els components de Material per crear diferents tipus de elements de l’interfície d’usuari.

Si treballem amb Visual Studio Code, pot ser útil fer servir la finestra “Terminal” per executar aquest tipus d’ordres:

Per no tenir problemes de permisos amb l’execució de comandes des de Visual Studio Code, l’opció més senzilla és canviar el terminal per defecte de PowerShell a Command Prompt, el clàssic de Windows, que és menys restrictiu en aquest aspecte. Per treballar amb PowerShell, cal configurar el perfil de VS Code perquè no es restringeixi l’execució d’script afegint -ExecutionPolicy Bypass al perfil de VS Code, però és una opció força més complexa i no recomenable per a segons quins entorns. Per canviar el terminal per defecte cal anar al panell de Terminal (menú Terminal/New Terminal) i, a la part superior dreta, al costat de la creu, desplegar les opcions del terminal (vegeu la figura).

Figura Canvi de perfil per defecte del terminal de VS Code

Al desplegable de la part superior, cal seleccionar Command Prompt (vegeu la figura). Això permet obrir finestra de terminal a la carpeta del projecte actual i executar sense problemes qualsevol ordre d’Angular CLI.

Figura Selecció de perfil de terminal a VS Code

Exemple d'implementació de taules d'informació amb el component de taula de Material

Per implementar una taula d’informació amb el component de taula de Material en Angular, primer cal crear un nou projecte des de la línia de comandes.

ng new my-table-app

Després cal instal·lar el paquet material d’Angular. En aquest cas ho fem amb el gestor de paquets npm en comptes del client Angular (ng), però el resultat a efectes pràctics és el mateix.

cd my-table-app
npm install @angular/material

S’importa el component de taula, MatTableModule, al mòdul principal del projecte (fitxer /src/app/app.module.ts), que tindrà un aspecte similar al següent:

// app.module.ts
 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { MatTableModule } from '@angular/material/table';
 
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Finalment es crea un component específic per encapsular la generació de la taula i les dades que s’han de llistar. Des de la línia de comandes, dins de la carpeta del projecte, cal indicar el codi següent:

ng generate component taula

Aquesta comanda genera l’estructura de carpetes de la figura, on podeu veure la carpeta per al component taula amb els fitxers css, html i ts corresponents.

Figura Estructura fitxers projecte taula

Dins del fitxer Typescript del component s’afegeix l’estructura de dades per visualitzar en format taula. En aquest cas fem servir una estructura de dades estàtica en memòria, però podem connectar-nos a qualsevol origen de dades. El fitxer taula.component.ts presentarà el següent aspecte:

import {Component} from '@angular/core';
 
export interface Empleat {
  id: number;
  name: string;
  surname: string;
  department: string;
  salary: number;
}
 
const EMPLEATS_DATA: Empleat[] = [
  {id: 1, name: 'John', surname: 'Doe', department: 'IT', salary: 55000},
  {id: 2, name: 'Jane', surname: 'Smith', department: 'HR', salary: 45000},
  {id: 3, name: 'Jack', surname: 'Johnson', department: 'Sales', salary: 65000},
  {id: 4, name: 'Jill', surname: 'Williams', department: 'Marketing', salary: 75000},
  {id: 5, name: 'Jim', surname: 'Brown', department: 'Operations', salary: 55000},
];
 
/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'taula',
  styleUrls: ['taula.component.css'],
  templateUrl: 'taula.component.html',
})
export class TaulaComponent {
  displayedColumns: string[] = ['id', 'name', 'surname', 'department', 'salary'];
  dataSource = EMPLEATS_DATA;
}

El codi anterior:

Crea un component en Angular anomenat TaulaComponent.
Exporta una interfície Empleat que defineix l’estructura de les dades dels empleats.
Defineix l’array d’objectes empleats EMPLEATS_DATA utilitzant la interfície Empleat.
El component utilitza la directiva @Component per especificar el selector/etiqueta per a la plantilla HTML, les rutes d’estil i la plantilla HTML associades.
La propietat displayedColumns conté una llista de les columnes que es mostraran a la taula i la propietat dataSource es vincula a EMPLEATS_DATA per proporcionar les dades a la taula.

Finalment cal incorporar el codi HTML de l’element Material Table a la plantilla HTML del component.

Podeu obtenir exemples sobre com fer servir aquest element amb el codi HTML, TS i CSS a: material.angular.io/components/table/examples:

Així doncs, es pot personalitzar el codi d’exemple de la web de Material-Angular per poder visualitzar les dades. La plantilla HTML del component, el fitxer taula.component.html, serà la següent:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition". -->
 
    <!-- Columna Id -->
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef> Id </th>
        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>
 
    <!-- Nom -->
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Nom </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
 
    <!-- Cognom -->
    <ng-container matColumnDef="surname">
        <th mat-header-cell *matHeaderCellDef> Cognom </th>
        <td mat-cell *matCellDef="let element"> {{element.surname}} </td>
    </ng-container>
 
    <!-- Departament -->
    <ng-container matColumnDef="department">
        <th mat-header-cell *matHeaderCellDef> Departament </th>
        <td mat-cell *matCellDef="let element"> {{element.department}} </td>
    </ng-container>
 
    <!-- Sou -->
    <ng-container matColumnDef="salary">
        <th mat-header-cell *matHeaderCellDef>Sou </th>
        <td mat-cell *matCellDef="let element"> {{element.salary}} </td>
    </ng-container>
 
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Aquesta plantilla HTML crea una taula en Angular utilitzant el paquet Material. La taula es basa en la font de dades anterior, referenciada com a dataSource i que conté els empleats amb les propietats “id”, “name”, “surname”, “department” i “salary”. Les columnes es defineixen amb ng-container matColumnDef i el contingut de les cel·les es mostra utilitzant l’etiqueta {{element.propietat}}. Les columnes es mostren a l’encapçalament de la taula amb mat-header-cell i a cada fila de dades amb mat-cell.

Quant a CSS, la web de Material-Angular recomana el següent codi per donar amplada completa a la taula, que aniria al fitxer taula.component.css:

table {
  width: 100%;
}

Recordeu que per donar una mica de vistositat a la taula, és millor incorporar al projecte alguns dels temes predefinits de Material-Angular. Això s’aconsegueix important al fitxer /src/styles.css un dels temes predefinits.

@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

Addicionalment, es pot jugar una mica amb el CSS del component per aconseguir que les files de la taula tinguin colors alterns personalitzats. Per aconseguir-ho, tan sols s’han d’estudiar una mica les classes CSS que fa servir el component de Material i sobreescriure les classes corresponents. En aquest cas, afegint les següent regles CSS al fitxer taula.component.css es pot aconseguir l’efecte desitjat:

  .mat-mdc-row:nth-child(even){
    background-color: #30ba8c;
  }
  .mat-mdc-row:not(:nth-child(even)){
    background-color:#4f630e;
  }

Una altra funcionalitat interessant és l’ús de formularis basats en Material. Vegeu un exemple de confecció d’un formulari d’inici de sessió per accedir a una zona privada.

Exemple de programació d'un formulari d'inici de sessió

Encara es pot afegir una mica més de programació als components Material perquè la seva funcionalitat sigui més complexa. Per exemple, un formulari d’inici de sessió que doni accés a un tauler, una zona privada.

ng new aplicacio-material

És important, en aquest exemple, indicar que volem afegir el sistema de routing d’Angular, per gestionar les rutes d’accés a les diferents pàgines del projecte.

Després cal instal·lar el paquet material d’Angular (amb el client Angular). Es pot afegir el paquet amb l’ordre següent:

cd aplicacio-material
ng add @angular/material

A diferència de la instal·lació del paquet amb npm, amb aquesta comanda s’instal·la el tema predefinit que decidim i afegeix alguns components addicionals de Material, als quals diem que sí. Podem veure el procés d’instal·lació amb aquesta ordre:

Crearem un component del projecte amb tota la funcionalitat del formulari, al qual anomenarem login. Per això creem prèviament una carpeta components, amb tots els components d’aquest exemple. Això es pot fer des de la línia de comandes o des de l’editor, com per exemple Visual Studio Code (vegeu la figura).

Figura Creació d’una carpeta al projecte amb VS Code

Un cop creada la carpeta components, creem el component Login amb la següent comanda (que s’ha d’executar dins de la carpeta del projecte):

ng generate component components/login

Per treballar amb camps d’entrada de text de formularis, fem servir els components Material-Angular Form field i Input, la documentació dels quals és a: material.angular.io/components/form-field/overview i material.angular.io/components/input/overview. Afegim els corresponents import al fitxer app.module.ts del projecte, com en els exemples anteriors.

La plantilla HTML del component de formulari de login, login.component.html, presentarà el següent codi:

<div class="contenidor">
    <div class="form-login">
        <mat-spinner *ngIf="carregant" diameter="60" class="progres"></mat-spinner>
 
        <form *ngIf="!carregant" [formGroup]="formulari" (ngSubmit)="acces()">
            <img src="./assets/img/login.png" class="ancho">
            <h1>Inici de sessió</h1>
            <mat-form-field appearance="fill" class="ancho_inputs">
                <mat-label>Nom usuari</mat-label>
                <input matInput autocomplete="off" formControlName="usuari">
            </mat-form-field>
            <mat-form-field appearance="fill" class="ancho_inputs">
                <mat-label>Contrassenya</mat-label>
                <input matInput autocomplete="off" type="password" formControlName="contra">
            </mat-form-field>
            <br>
            <button type="submit"  mat-raised-button color="primary" [disabled]="formulari.invalid">Accés</button>
        </form>
    </div>
 
</div>

La plantilla inclou un div amb la classe contenidor, un contenidor central on es mostra el formulari de login.
Dins d’aquest div hi ha un altre div amb la classe form-login que conté el formulari. El form està enllaçat al formulari a través de l’atribut [formGroup] i es defineix el comportament del botó d’enviament mitjançant l’atribut (ngSubmit).
El formulari està format per un spinner (indicador de progrés), amb la directiva *ngIf, que s’executarà quan la variable carregant sigui vertadera. Això mostrarà l’spinner mentre es carrega la següent pàgina. L’element <mat-spinner> s’utilitza per mostrar aquest indicador de progrés.
El formulari també inclou una imatge, un títol, dos camps de text (usuari i contrasenya) i un botó d’accés. Els inputs per al nom d’usuari i contrasenya s’enllaçen a través d’atributs formControlName.
Els camps de text utilitzen la directiva matInput per mostrar els inputs amb un estil material.
El botó d’accés utilitza la directiva mat-raised-button per mostrar un botó amb estil material i la directiva disabled per desactivar el botó si el formulari és invàlid.
Les classes CSS especifiquen l’aparició i la disposició dels elements a la pàgina.

En resum, aquesta plantilla mostra un formulari bàsic de login que es pot personalitzar fàcilment mitjançant classes CSS i programant el comportament de l’enviament de formularis a través d’Angular.

La lògica associada a aquest component de formulari s’implementa al fitxer Typescript del component, login.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
import { MatSnackBar } from '@angular/material/snack-bar';
import { Route, Router } from '@angular/router';
 
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  formulari: FormGroup;
  carregant = false;
 
 
  constructor(private fb: FormBuilder, private _snackBar: MatSnackBar,private router:Router) {
    this.formulari = this.fb.group({
      usuari: ['', Validators.required],
      contra: ['', Validators.required]
 
    })
  }
 
  ngOnInit(): void {
 
  }
  acces() {
 
    const usuari = this.formulari.value.usuari;
    const contra = this.formulari.value.contra;
 
    if (usuari == 'iocdawm9' && contra == 'ioc@dmin-123') {
 
      this.acces_tauler();
    }
    else {
      this.missatge_error();
      this.formulari.reset();
    }
  }
 
acces_tauler(){
  //Accedim a tauler
  this.carregant=true;
  setTimeout(()=>{
    //Carreguem tauler
    this.router.navigate(['tauler']);
    },1000)
}
 
  missatge_error() {
    //Missatge d'error
    this._snackBar.open('Error en dades d´accés', '', {
      duration: 4000,
      horizontalPosition: 'center',
      verticalPosition: 'bottom'
    })
  }
 
 
 
}

El codi presenta la següent estructura:

Importacions: s’importen diferents paquets i components d’Angular i Material com ara FormBuilder, FormGroup, Validators, MatSnackBar i Router.
@Component: defineix les propietats del component, com ara el selector, la plantilla html i els fitxers de css.
Classe LoginComponent: implementa la interfície OnInit i inclou les variables i funcions necessàries per a l’inici de sessió.
Constructor: utilitza el FormBuilder per crear un grup de formularis i indicar que les dades d’usuari i contrasenya són obligatòries.
ngOnInit: s’executa automàticament quan es carrega el component i no conté cap lògica en aquest cas.
acces(): verifica si les dades d’usuari i la contrasenya són correctes i, en cas afirmatiu, redirigeix a la pàgina de tauler. En cas contrari, mostra un missatge d’error.
acces_tauler(): s’executa quan les dades d’usuari i contrasenya són correctes, activa l’spinner i navega a la pàgina de tauler. Fa servir el mòdul Router per navegar a la següent pàgina.
missatge_error(): mostra un missatge d’error si les dades d’usuari i contrasenya són incorrectes. S’utilitza el component MatSnackBar per mostrar aquest missatge.

Aquest component està construït per permetre l’accés a la pàgina de tauler després de verificar les credencials d’usuari i contrasenya.

Per personalitzar l’aparença del formulari, es fa servir el fitxer css del component, login.component.css, que presenta el següent codi:

.contenidor {
    display: flex;
    align-items: center;
    justify-content: center;
 
    background-color: #bcd2ec;
    height: 100%;
  }
  .form-login {
    width: 100%;
    max-width: 20%;
    padding: 15px;
    margin: auto;
    text-align: center;
  }
 
  .amplada {
    width: 20%;
  }
  .amplada_inputs {
    width: 80%;
  }
 
  .progres{
    margin:auto;
  }

Inclou estils per centrar, fent servir flex, el formulari verticalment i horizontalment i per establir la mida i l’espai dels elements del formulari.

Vegeu l’aspecte i el funcionament final del formulari d’inici de sessió:

A l’hora de crear el projecte hem indicat que volíem fer servir el sistema de routing d’Angular. Per tant, s’ha creat el fitxer /src/app/app-routing.module.ts, que és el mòdul de routing de l’aplicació. El routing en Angular és la funcionalitat que permet navegar entre diferents pàgines o components d’una aplicació sense haver de recarregar la pàgina completa. Aquest fitxer defineix les rutes de l’aplicació i especifica el component que es mostra quan l’usuari accedeix a una ruta determinada. El contingut del fitxer de routing del projecte és el següent:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
 
const routes: Routes = [
{ path: '', redirectTo: 'acces', pathMatch: 'full' },
{ path: 'acces', component:LoginComponent },
{path: 'tauler', loadChildren: () => import('./components/tauler/tauler.module').then(x=>x.TaulerModule) },
{ path: '**', redirectTo: 'acces', pathMatch: 'full' }];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Al codi del fitxer es comença important els components RouterModule i Routes des d’@angular/router. Després es defineix una constant routes del tipus Routes que conté una llista de rutes. Cada ruta consisteix en un objecte amb els següents atributs:

path: és la ruta que apareix a l’URL.
component: és el component que es carrega quan es fa servir aquesta ruta.

Les rutes definides són les següents:

La ruta sense camí redirigeix a la ruta acces, fent un match total (pathMatch: ‘full’).
La ruta acces carrega el component LoginComponent, que mostra el formulari d’inici de sessió.
La ruta tauler carrega el mòdul TaulerModule d’un fitxer extern mitjançant la funció loadChildren.
Qualsevol altra ruta no definida es redirigeix a la ruta acces, fent un match total.

A continuació, a través de la directiva @NgModule es configura l’aplicació per fer servir aquestes rutes. S’importa RouterModule.forRoot(routes) per a la configuració de les rutes. Després es fa export del mòdul RouterModule per permetre la seva importació en altres llocs de l’aplicació. Finalment, es defineix una classe AppRoutingModule, que exporta aquest mòdul de rutes, i que és importada des del fitxer app.module.ts de l’aplicació.

Vegeu el funcionament de l’enrutament. Redirigeix al formulari d’inici de sessió quan s’intenta accedir a una pàgina directament:

El component TaulerModule és un mòdul Angular que defineix els diferents components que el conformen . Aquest mòdul importa TaulerRoutingModule per controlar les rutes associades a aquest mòdul, i també importa diferents mòduls de Material que s’utilitzen en aquest mòdul.

El component TaulerComponent és el component principal que es mostra en la ruta /tauler. Aquest component és un component que simplement mostra la barra de navegació (encapsulada al component NavbarComponent). Així doncs, el codi de la plantilla HTML del tauler és el següent:

<app-navbar></app-navbar>

El component NavbarComponent és la barra de navegació pròpiament dita, a dalt de tot en la pàgina. Aquest component conté una barra d’eines de Material que té diferents botons per a les diferents opcions de l’usuari i un botó per fer logout. Aquest component s’utilitza al TaulerComponent per mostrar la barra de navegació en la pàgina (vegeu la figura).

El codi de la plantilla HTML d’aquest component, navbar.component.html, és el següent:

<mat-toolbar color="primary">
    <span>Tauler</span>
    <span class="example-spacer"></span>
    <button mat-button>Opció 1</button>
    <button mat-button>Opció 2</button>
    <button mat-button>Opció 3</button>
    <span class="example-spacer"></span>
    <button mat-icon-button class="example-icon favorite-icon">
      <mat-icon>logout</mat-icon>
    </button>
  </mat-toolbar>

Vegeu com es fa servir la classe example-spacer per centrar horitzontalment les opcions del menú.

Podeu consultar el codi d’aquest projecte al GitHub del mòdul a: https://github.com/iocdawm9/aplicacio-material.

Disseny d'interfícies d'usuari amb React.js

Teniu tota la informació sobre la biblioteca React.js al web reactjs.org

React.js és una biblioteca JavaScript creada per Facebook que es fa servir per construir interfícies d’usuari en aplicacions web. Això es fa mitjançant la creació de components d’interfície d’usuari, que són petits fragments de codi que es poden reutilitzar per crear elements visualment atractius i interactius a la pantalla.

Un dels grans avantatges de React.js és que és molt fàcil de comprendre i utilitzar, ja que es basa en una sintaxi simple i intuïtiva. Això fa que sigui una eina ideal per al disseny d’interfícies d’usuari, ja que permet crear interfícies molt complexes amb un codi ben estructurat i fàcil de mantenir.

React.js és diferent de les altres biblioteques front-end, com ara Angular o Vue.js, perquè es basa en components en lloc de directrius. Això fa que sigui més flexible i eficient. Els avantatges de React.js inclouen una gran escalabilitat, eficiència, flexibilitat i una gran comunitat al seu darrere. Els desavantatges inclouen una corba d’aprenentatge més alta i una complexitat addicional en comparació amb altres biblioteques front-end.

La gran comunitat d’usuaris i de recursos i eines disponibles són de gran ajuda per començar a treballar amb la biblioteca. Això inclou tutorials, documentació, exemples de codi i moltes altres eines que poden ajudar a entendre millor com funciona React.js i com fer servir la biblioteca per millorar el disseny de les interfícies d’usuari.

Instal·lació i treball amb React.js

Per instal·lar React.js cal tenir una versió recent de Node.js i npm (el gestor de paquets per a Node) instal·lats. Es poden descarregar des del lloc web oficial nodejs.org o fent servir un gestor de versions com github.com/nvm-sh/nvm.

Després cal crear un nou projecte des d’un intèrpret de comandes:

npx create-react-app nom_del_teu_projecte

npx create-react-app és una ordre que utilitza npx per crear una aplicació React.js d’una manera ràpida i senzilla. Aquesta ordre automatitza la configuració de la estructura de l’aplicació, l’entorn de desenvolupament i les dependències necessàries per començar a desenvolupar una aplicació React.js.

Així, en lloc d’haver de configurar manualment l’entorn de desenvolupament i les dependències, es pot utilitzar aquesta ordre per crear una aplicació React.js en pocs minuts. El resultat és una aplicació React.js completa i funcional, amb una estructura de directoris i arxius clars i ordenats, així com un entorn de desenvolupament configurat i en funcionament.

Un projecte React.js creat amb aquesta ordre té la següent estructura:

public/: conté arxius accessibles per a l’usuari final, com ara index.html, favicon.ico, etc.
src/: conté el codi font de l’aplicació, on es desenvoluparà la major part del projecte.
App.js: és el component principal de l’aplicació, que en defineix la lògica i la visualització.
index.js: és el punt d’entrada de l’aplicació, que importa i inicia el component principal App.js.
components/ (opcional): conté altres components de React.js que s’utilitzen en l’aplicació, com Header.js, Footer.js, etc.
node_modules/: conté les dependències del projecte, que s’instal·len amb el comandament npm install.
package.json: conté informació sobre el projecte, com ara dependències, scripts, nom, versió, etc.
package-lock.json: conté informació sobre les dependències i les seves versions exactes.

Navegant per la carpeta del projecte mitjançant la línia de comandes i executant el següent comandament podreu iniciar un servidor de desenvolupament:

cd nom_del_teu_projecte
npm start

Aquesta ordre engega un servidor web al port 3000 i assigna el projecte actual al directori arrel del servidor web. Així doncs, es visualitza una pàgina web resultat de renderitzar la pàgina /public/index.html del projecte que s’acaba de crear i executa el fitxer /src/App.js. La pàgina d’un projecte que s’acaba de crear presenta l’aspecte següent:

Es pot modificar el codi, obrint el fitxer src/App.js amb un editor de codi i reemplaçant el codi existent amb:

import React from 'react';
 
function App() {
  return (
    <div>
      <h1>Benvingut a la teva primera aplicació React</h1>
    </div>
  );
}
 
export default App;

Per afegir diferents scripts al projecte, cal afegir una capçalera a l’aplicació web amb un fitxer /src/Header.js (no crearem una carpeta específica per als nostres components, és un primer exemple). El codi serà el següent:

import React from 'react';
 
function Header() {
  return (
    <header>
      <h2>Aquesta és la capçalera del teu lloc web.</h2>
    </header>
  );
}
 
export default Header;

Cal importar el component Header dins del fitxer App.js i referenciar-lo dins de la funció App:

import React from 'react';
import Header from './Header';
 
function App() {
  return (
    <div>
      <Header />
      <h1>Benvingut a la teva primera aplicació React.</h1>
    </div>
  );
}
 
export default App;

Vegeu l’aspecte d’aquesta primera aplicació React.js a la figura:

Planificació de la interfície d'usuari

La planificació de l’interfície d’usuari és una tasca crítica en el desenvolupament d’una aplicació web amb React.js. La idea principal és dividir la interfície en components més petits i manejables que es puguin reutilitzar, fent servir una estratègia de “divideix i venç”. Això no només facilita la planificació, sinó també el desenvolupament, la depuració i la mantenibilitat del codi. Una vegada dividida l’interfície en components més petits, ja es pot començar a crear components personalitzats. Això implica escriure el codi que defineix com es comportarà i es mostrarà el component.

Vegeu un exemple de codi d’un component personalitzat. En aquest cas, la funció Welcome rep un paràmetre variable que es fa servir dins de l’HTML personalitzat del component.

import React from 'react';
 
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
 
export default Welcome;

Finalment, les interfícies també es veuen beneficiades de la utilització de biblioteques de components: Les biblioteques de components són una font valuosa de components preestablerts per a les interfícies d’usuari. Això permet estalviar temps i esforç en la creació de components personalitzats i garantir una qualitat més alta i un aspecte consistent de la interfície.

Una de les biblioteques més populars és Material-UI, que ofereix una gran quantitat de components preestablerts amb un aspecte professional. Podeu afegir-la al projecte utilitzant npm:

npm install @material-ui/core

I després importar els components necessaris per al codi:

import Button from '@material-ui/core/Button';

Vegeu com aplicar totes aquestes estratègies amb alguns exemples pràctics.

Exemple de web senzill amb l'estratègia "divideix i venç" i components personalitzats

Amb un senzill codi d’exemple d’interfície d’usuari pot demostrar com planificar la interfície d’usuari segons una estratègia de “divideix i venç” i creant components personalitzats.

Crearem tres components personalitzats: Header, Main i Footer. Cada component serà un component reutilitzable que podrà ser utilitzat en altres aplicacions de React.js. El component principal, anomenat App, farà servir aquests components personalitzats per crear la interfície d’usuari completa.

import React, { Component } from 'react';
 
// Component personalitzat "Header"
class Header extends Component {
  render() {
    return (
      <header>
        <h1>{this.props.title}</h1>
        <nav>
          <ul>
            <li><a href="#">Inici</a></li>
            <li><a href="#">Sobre nosaltres</a></li>
            <li><a href="#">Contacte</a></li>
          </ul>
        </nav>
      </header>
    );
  }
}
 
// Component personalitzat "Main"
class Main extends Component {
  render() {
    return (
      <main>
        <h2>Benvingut a {this.props.title}</h2>
        <p>Aquesta és la pàgina principal de l'aplicació.</p>
      </main>
    );
  }
}
 
// Component personalitzat "Footer"
class Footer extends Component {
  render() {
    return (
      <footer>
        <p>Copyright © {new Date().getFullYear()} {this.props.title}</p>
      </footer>
    );
  }
}
 
// Component principal "App"
class App extends Component {
  render() {
    return (
      <div>
        <Header title="Disseny d'Aplicacions Web" />
        <Main title="Aplicació de React.js" />
        <Footer title="IOC- DAW - M9" />
      </div>
    );
  }
}
 
export default App;

La idea de l’estratègia “divideix i venç” consisteix a dividir la interfície d’usuari en components més petits i manejables per facilitar la planificació i el desenvolupament. Això també ajuda a millorar la reutilització del codi i la mantenibilitat a llarg termini.

Vegeu a la figura l’aspecte final d’aquesta senzilla aplicació web amb el codi HTML generat per cada un dels components.

Figura Aspecte final aplicació web amb components personalitzats

L’exemple anterior fa servir el mètode render() en tots els components. Aquest mètode és un mètode obligatori en qualsevol component de React. Es crida automàticament per React cada vegada que s’actualitza l’estat o les propietats del component. El mètode render() defineix com s’ha de mostrar el component en pantalla i retorna una representació de l’arbre de nodes de JSX.

L’arbre de nodes de JSX és una representació abstracta del codi JSX que defineix la interfície d’usuari d’una aplicació React. Cada element de JSX en la interfície d’usuari és un node en l’arbre de nodes.

Per exemple, en el cas del el següent codi HTML generat per una aplicació React.js:

<div>
    <h1>Benvingut a la meva aplicació.</h1>
    <p>Aquesta és la pàgina principal.</p>
</div>

Aquest codi genera un arbre de nodes JSX amb un node arrel de tipus div, i dos nodes fill de tipus h1 i p, respectivament.

L’arbre de nodes és important per a React perquè permet saber com ha de renderitzar la interfície d’usuari i com ha de reaccionar a les actualitzacions en l’estat i les props. Així, React pot actualitzar eficientment només les parts de la interfície d’usuari que han canviat en lloc de renderitzar tota la interfície d’usuari de nou.

En certa manera, l’arbre de nodes de JSX és similar al model d’objectes del document (DOM) de JavaScript/jQuery. El DOM és una representació en memòria d’una pàgina web que descriu la seva estructura, contingut i estil. El DOM també permet a les aplicacions modificar la pàgina web, afegint, esborrant o modificant elements de la pàgina.

Però el DOM és una representació física de la pàgina web, i l’arbre de nodes de JSX és una representació abstracta de la interfície d’usuari d’una aplicació React. A més, l’arbre de nodes de JSX va més enfocat a les interaccions amb l’usuari, mentre que el DOM va més enfocat a la representació visual de la pàgina web.

Per això, React utilitza el seu propi arbre de nodes en lloc del DOM per descriure la interfície d’usuari i controlar la seva actualització. Això li permet a React ser més eficient en la gestió de les actualitzacions de la interfície d’usuari i proporciona una manera més fàcil i intuïtiva de programar les aplicacions web interactives.

Exemple de gestor de tasques amb React.js

Aquest exemple incorpora una mica més d’interacció amb l’usuari i de programació, i també mostra com React.js optimitza la renderització de cada un dels elements de la interfície d’usuari. A part d’il·lustrar com React.js pot ser utilitzat per crear una interfície d’usuari interactiva dividint les diferents seccions en components personalitzats, ajuda a entendre com les dades es manegen i es passen entre diferents components a través de les propietats.

El codi del fitxer /src/App.js és:

import React, { Component } from 'react';
 
// Component personalitzat "TaskForm"
class TaskForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      task: ''
    };
  }
 
  handleSubmit = (event) => {
    event.preventDefault();
    this.props.addTask(this.state.task);
    this.setState({ task: '' });
  }
 
  handleChange = (event) => {
    this.setState({ task: event.target.value });
  }
 
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Afegeix una tasca"
          value={this.state.task}
          onChange={this.handleChange}
        />
        <button type="submit">Afegeix</button>
      </form>
    );
  }
}
 
// Component personalitzat "TaskList"
class TaskList extends Component {
  render() {
    return (
      <ul>
        {this.props.tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    );
  }
}
 
// Component principal "App"
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: []
    };
  }
 
  addTask = (task) => {
    this.setState({ tasks: [...this.state.tasks, task] });
  }
 
  render() {
    return (
      <div>
        <h1>Llista de tasques</h1>
        <TaskForm addTask={this.addTask} />
        <TaskList tasks={this.state.tasks} />
      </div>
    );
  }
}
 
export default App;

Analitzem en detall el codi:

Dos components personalitzats: TaskForm i TaskList.
El component TaskForm inclou un formulari perquè l’usuari pugui afegir tasques a la llista. Utilitza un estat per mantenir el valor actual del formulari en una variable d’estat anomenada task.
Defineix dos mètodes: handleSubmit i handleChange.
- El mètode handleSubmit és cridat quan l’usuari envia el formulari i afegeix la tasca a la llista a través d’una funció addTask passada com a propietat.
- El mètode handleChange actualitzarà el valor de la variable d’estat task mentre l’usuari escriu.
El component TaskList mostra la llista de tasques en una llista no ordenada. Utilitza la funció map per crear un element li per a cada tasca de la llista.
El component principal, anomenat App, inclou l’estat que alberga la llista de tasques a la variable tasks. A més, inclou una funció addTask per afegir noves tasques a la llista d’estat. Finalment, utilitza els components TaskForm i TaskList per crear la interfície d’usuari completa.

Vegeu el funcionament d’aquesta aplicació:

La potència de React.js és la seva capacitat per interactuar amb l’usuari de forma àgil i eficient.

Exemple de visualització de taules dinàmiques amb React.js

Vegeu un exemple sobre es pot donar a l’usuari mecanismes de visualització i gestió de taules dinàmiques amb molta facilitat i una programació molt simple.

Aquest exemple crea una taula que mostra informació sobre diferents persones. La taula inclou capçaleres i files de dades, i també proporciona tres botons per ordenar les dades per nom, edat o ciutat.

El codi del fitxer /src/App.js és:

import React, { useState } from 'react';
 
const TableRow = ({ data }) => {
  return (
    <tr>
      {Object.keys(data).map((key) => (
        <td key={key}>{data[key]}</td>
      ))}
    </tr>
  );
};
 
const Table = ({ headers, data }) => {
  return (
    <table>
      <thead>
        <tr>
          {headers.map((header) => (
            <th key={header}>{header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row) => (
          <TableRow key={row.id} data={row} />
        ))}
      </tbody>
    </table>
  );
};
 
const App = () => {
  const [data, setData] = useState([
    { id: 1, nom: 'John Doe', edat: 32, ciutat: 'Nova York' },
    { id: 2, nom: 'Jane Doe', edat: 28, ciutat: 'San Francisco' },
    { id: 3, nom: 'Jim Smith', edat: 40, ciutat: 'Londres' },
  ]);
 
  const [sortBy, setSortBy] = useState('nom');
 
  const handleSort = (key) => {
    setSortBy(key);
    setData([...data].sort((a, b) => (a[key] > b[key] ? 1 : -1)));
  };
 
  const headers = ['Nom', 'Edat', 'Ciutat'];
 
  return (
    <div>
      <h1>Taula de dades dinàmiques</h1>
      <Table headers={headers} data={data} />
      <div>
        <button onClick={() => handleSort('nom')}>Ordena per nom.</button>
        <button onClick={() => handleSort('edat')}>Ordena per edat.</button>
        <button onClick={() => handleSort('ciutat')}>Ordena per ciutat.</button>
      </div>
    </div>
  );
};
 
export default App;

Les diferents funcionalitats es divideixen així:

El component App inclou l’estat que alberga les dades de les persones, i també gestiona les ordenacions clicant els botons.
El component Table mostra la taula utilitzant les dades de l’estat i les capçaleres.
El component TableRow és un component de la fila de la taula que mostra les dades de cada persona. Aquest component és reutilitzable per a qualsevol fila de dades que es vulgui afegir a la taula.
El component TableHeader mostra les capçaleres de la taula i inclou les funcions de gestió d’esdeveniments per a ordenar les dades quan l’usuari clica una capçalera.

Aquest exemple il·lustra com React.js pot ser utilitzat per crear aplicacions complexes que interactuen amb l’usuari i manipulen dades.

Vegeu el funcionament d’aquesta aplicació:

Finalment, per millorar l’aparença de les aplicacions React, es poden incorporar biblioteques de components d’interfície d’usuari. Una de les més populars és Material-UI.

Exemple de visualització de taules dinàmiques amb React.js i Material-UI

L’exemple anterior sobre taules dinàmiques, també es pot fer amb Material-UI.

S’afegeix la biblioteca Material-UI per millorar l’aparença de la interfície d’usuari. Material-UI és una biblioteca de components de disseny basats en Material Design de Google. Es fan components com ara Button, Table i TableHead de Material-UI per crear una taula més atractiva i professional. A més, es fan servir estils personalitzats per afegir un toc extra a la taula.

Recordeu que perquè aquest codi sigui operatiu, és necessari prèviament, dins de la carpeta del projecte, instal·lar el paquet de material amb l’ordre següent:

npm install @material-ui/core

Addicionalment, també hem d’afegir el paquet d’icones de Material, que no hi va per defecte.

npm install @material-ui/icons

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import IconButton from '@material-ui/core/IconButton';
import SortIcon from '@material-ui/icons/Sort';
 
const useStyles = makeStyles({
  table: {
    minWidth: 650,
  },
});
 
function TableHeader(props) {
  return (
    <TableCell align="center">
      {props.header}
      <IconButton onClick={props.sortData}>
        <SortIcon />
      </IconButton>
    </TableCell>
  );
}
 
function App() {
  const classes = useStyles();
  const [people, setPeople] = React.useState([
    { name: 'John Doe', age: 32, city: 'New York' },
    { name: 'Jane Doe', age: 27, city: 'London' },
    { name: 'Jim Smith', age: 40, city: 'Paris' },
  ]);
 
  const sortData = (key) => {
    setPeople([...people].sort((a, b) => {
      if (a[key] < b[key]) {
        return -1;
      }
      if (a[key] > b[key]) {
        return 1;
      }
      return 0;
    }));
  };
 
  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableHeader header="Name" sortData={() => sortData('name')} />
            <TableHeader header="Age" sortData={() => sortData('age')} />
            <TableHeader header="City" sortData={() => sortData('city')} />
          </TableRow>
        </TableHead>
        <TableBody>
          {people.map((person) => (
            <TableRow key={person.name}>
              <TableCell align="center">{person.name}</TableCell>
              <TableCell align="center">{person.age}</TableCell>
              <TableCell align="center">{person.city}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}
 
export default App;

Vegeu l’aspecte del llistat de taules dinàmiques després d’aplicar-hi la biblioteca de components d’interfície d’usuari Material-UI:

Hi ha moltes biblioteques de components d’interfície d’usuari disponibles per a React.js. Una altra biblioteca interessant és Ant Design, una biblioteca de components d’interface d’usuari de codi obert per a aplicacions React.js. Ofereix una gran varietat de components visuals de qualitat i personalitzables, amb formularis, botons, icones, taules, gràfics, etc. A més, Ant Design també proporciona un enfocament en la usabilitat i la consistència d’estil que ajuda a crear una experiència d’usuari coherent per als usuaris finals. La biblioteca és molt popular i és àmpliament utilitzada en aplicacions web de tot el món.

Exemple de selecció d'una data amb Ant Design

Aquest exemple il·lustra la selecció d’una data utilitzant un component de calendari i com mostrar la data seleccionada en una pàgina web.

Comencem per afegir la biblioteca de components d’Ant Design per millorar l’aparença de l’aplicació. Per instal·lar-la cal executar l’ordre dins de la carpeta del nou projecte:

npm install antd

A continuació, es programa un component que mostri un formulari amb un component DatePicker de la biblioteca Ant Design. A l’inici, l’estat del component inclou una propietat date que inicialment és buida. La funció handleChange és cridada quan l’usuari selecciona una data del component DatePicker, i aquesta funció actualitza l’estat de la data seleccionada.

El component DatePicker té un atribut onChange que apunta la funció handleChange, de manera que quan l’usuari selecciona una data del component, es crida la funció handleChange i es processa la nova data seleccionada.

Finalment, es mostra la data seleccionada a la pantalla mitjançant un element HTML de tipus p.

Vegeu el codi:

import React, { useState } from 'react';
import { DatePicker } from 'antd';
 
const App = () => {
  const [date, setDate] = useState(null);
 
  const handleChange = value => {
    setDate(value);
  };
 
  return (
    <div style={{ width: 400, margin: '100px auto' }}>
      <DatePicker onChange={handleChange} />
      <br />
      <br />
      Selected Date: {date ? date.format('YYYY-MM-DD') : 'None'}
    </div>
  );
};
 
export default App;

L’aspecte d’aquest selector de dates implementat amb la biblioteca d’interfície d’usuari Ant Design és:

Per últim, també es pot fer servir la biblioteca React-Bootstrap per millorar l’aparença de la interfície d’usuari.

Instal·lació de la biblioteca React-Bootstrap

Per instal·lar aquesta biblioteca al projecte, s’ha d’introduir l’ordre següent dins de la carpeta del projecte:

npm install react-bootstrap

Exemple de formulari de contacte amb React-Bootstrap

Aquest exemple consisteix a crear un formulari de contacte utilitzant la biblioteca de components React-Bootstrap. A través de les etiquetes de la biblioteca, com Form, Button i Col, es defineixen els diferents elements del formulari, com els camps d’entrada de text, el botó d’enviament i la disposició dels elements en una fila o columna.

L’objectiu d’aquest exemple és mostrar com React-Bootstrap pot simplificar la creació de formularis de manera ràpida i eficient, oferint una àmplia gamma d’estils i opcions per a la personalització. A més a més, ofereix una compatibilitat amb altres components de React, cosa que en facilita l’ús en projectes existents.

A diferència dels projectes anteriors, en aquest exemple crearem el component del formulari ContactForm en un fitxer separat: ContactForm.js, dins de la carpeta del projecte /src.

El codi d’aquest fitxer és:

// ContactForm.js
 
import React from 'react';
import { Form, Button, Col } from 'react-bootstrap';
 
const ContactForm = () => {
  return (
    <Form>
 
        <Form.Group as={Col} controlId="formGridEmail">
          <Form.Label>Correu electrònic</Form.Label>
          <Form.Control type="email" placeholder="Introdueix el teu correu" />
        </Form.Group>
 
        <Form.Group as={Col} controlId="formGridPassword">
          <Form.Label>Contrassenya</Form.Label>
          <Form.Control type="password" placeholder="Password" />
        </Form.Group>
 
 
      <Form.Group controlId="formGridAddress1">
        <Form.Label>Adreça</Form.Label>
        <Form.Control placeholder="Carrer, 12" />
      </Form.Group>
 
      <Form.Group controlId="formGridAddress2">
        <Form.Label>2a línia adreça</Form.Label>
        <Form.Control placeholder="Número de porta" />
      </Form.Group>
 
 
        <Form.Group as={Col} controlId="formGridCity">
          <Form.Label>Ciutat</Form.Label>
          <Form.Control />
        </Form.Group>
 
        <Form.Group as={Col} controlId="formGridState">
          <Form.Label>Província</Form.Label>
          <Form.Control as="select">
            <option>Choose...</option>
            <option>...</option>
          </Form.Control>
        </Form.Group>
 
        <Form.Group as={Col} controlId="formGridZip">
          <Form.Label>Codi postal</Form.Label>
          <Form.Control />
        </Form.Group>
 
 
      <Button variant="primary" type="submit">
        Enviar
      </Button>
    </Form>
  );
};
 
export default ContactForm;

Aquest codi crea un component de formulari de contacte anomenat ContactForm. El component fa servir les etiquetes de la biblioteca React-Bootstrap, com Form, Button i Col.

La primera part del codi utilitza l’etiqueta Form com a contenidor principal per al formulari. Dins d’aquest contenidor s’han definit diversos grups de formulari mitjançant les etiquetes Form.Group.
Per exemple, el primer grup del formulari és un camp d’entrada de correu electrònic que està definit per l’etiqueta Form.Group juntament amb la propietat controlId=“formGridEmail. L’etiqueta Form.Label s’utilitza per definir la llegenda del camp i l’etiqueta Form.Control s’utilitza per definir el camp d’entrada en si.
El segon grup del formulari és un camp d’entrada de contrasenya, que és similar al primer grup.
El tercer i el quart grup del formulari són camps d’entrada d’adreça, on s’utilitza la mateixa estructura que les etiquetes Form.Label i Form.Control per definir la llegenda i el camp d’entrada.
El cinquè grup de formulari consisteix en tres camps d’entrada: per a la ciutat, l’estat i el codi postal. Aquests camps estan definits en una columna que s’utilitza per a la disposició dels camps en una fila mitjançant la propietat as={Col}.
L’etiqueta Button s’utilitza per crear el botó d’enviament del formulari.
El codi exporta el component ContactForm mitjançant la paraula clau export default.

Aquest component es fa servir en el fitxer principal de l’aplicació: /src/App.js, que presenta el següent aspecte:

//  App.js
 
import React from 'react';
import ContactForm from './ContactForm';
 
function App() {
  return (
    <div className="container">
    <div className="App">
      <ContactForm />
    </div>
    </div>
  );
}
 
export default App;

El component ContactForm definit prèviament s’exporta. Dins de la funció App es retorna un div amb una classe container i un altre div amb una classe App. Dins d’aquest div es fa servir el component ContactForm, el qual es mostrarà en pantalla.

Addicionalment, perquè el formulari tingui l’aspecte desitjat, cal importar el full d’estils de Bootstrap al projecte, incloent al fitxer /src/index.js la següent línia de codi:

import 'bootstrap/dist/css/bootstrap.min.css';

Vegeu l’aspecte final del formulari de contacte implementat amb la biblioteca de components React-Bootstrap: