31:[{"id":"702f7c6bdce284fd6565fe62322b2b1b9c0c3934827f421a9267d3851ce148d803625cacd6ca8ac12c5e29b8b0b0d721565b76b05a56c06200ad10306e8764e2","href":"https://static.observableusercontent.com/files/702f7c6bdce284fd6565fe62322b2b1b9c0c3934827f421a9267d3851ce148d803625cacd6ca8ac12c5e29b8b0b0d721565b76b05a56c06200ad10306e8764e2","name":"snippets.png","type":"image/png","lastModified":1651076453371.714,"size":98609}] 2f:{"title":"Input e view: scateniamo la libertà degli utenti","cells":[{"id":0,"value":"# Input e _view_: scateniamo la libertà degli utenti\n\nUn notebook può essere interattivo, fornendo all'utente degli elementi di input. In Observable, possiamo usare puro _HTML_ per costruire i medesimi elementi di input che troviamo in ogni sito Web ([bottoni](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button), [menu a tendina](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select), ecc...).\n\n> 👉 Gli **input** abilitano un'**interattività user-friendly**\n\nObservable gestisce queste funzionalità con un tipo di elemento chiamato `view`.\n\n> 👉 Le **view** sono degli elementi di interfaccia che contengono **due parti**:\n> 1. 📦 L'elemento interattivo del DOM (~ _la **scatola** che contiene il valore e permette di interagirvi_)\n> 2. 📝 Il valore stesso (~ _il **contenuto** della scatola_)","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"## ⚠️ Bonus: come funziona una view dietro le quinte?\n\nPer esempio, selezioniamo una provincia da questo dropdown:","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"provincia = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"Se richiamiamo la cella `provincia` stiamo facendo riferimento alla scatola 📦 e non al contenuto!","pinned":false,"hidden":false,"mode":"md"},{"id":114,"value":"provincia","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"Possiamo usare `provincia.value` per intercettare il contenuto della scatola 📝 \n\n**Yeah! Ci siamo quasi** 🎉🎉🎉\n\n... ma dato che la scatola in sé non cambia al variare del suo contenuto, la cella contenete `provincia.value` non viene aggiornata contestualmente alla variazione di cosa ha dentro. Devo eseguirla manualmente, perdendo tutti i benefici del reactive dataflow! Prova a selezionare un provincia nel [dropdown](#provincia) e a eseguire la cella qui sotto:","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"**Mi piacerebbe visitare ${provincia.value}**","pinned":true,"hidden":false,"mode":"md"},{"id":184,"value":"Per fortuna ci viene in aiuto l'operatore `viewof`, permettendoci di definire scatola 📦 e contenuto 📝 nella stessa cella! E' come se stessimo creando una cella nascosta che mette a disposizione del notebook il contenuto della cella. \n\nEcco qui un altro esempio. Scegli di nuovo una provincia:","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"viewof provinciaBedda = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"**Mi piacerebbe visitare ${provinciaBedda}**","pinned":true,"hidden":false,"mode":"md"},{"id":295,"value":"L'esecuzione reattiva è quindi garantita! 🎉🎉🎉 🎉🎉🎉 🎉🎉🎉 🎉🎉🎉","pinned":false,"hidden":false,"mode":"md"},{"id":220,"value":"## Una libreria di input pronti all'uso!\n\nObservable mette a disposizione una vasta libreria di [input precotti](https://observablehq.com/@observablehq/inputs) da riusare nei notebook. Ecco un esempio:","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"viewof provinciaTantuBedda = Inputs.select(\n [\n \"Agrigento\",\n \"Caltanissetta\",\n \"Catania\",\n \"Enna\",\n \"Messina\",\n \"Palermo\",\n \"Ragusa\",\n \"Siracusa\"\n ],\n { label: \"Dove vuoi andare?\" }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"**Mi piacerebbe visitare ${provinciaTantuBedda}**","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"> 👉 Observable mette a disposizione una libreria di **input** pronti all'uso. Ricordiamoci di usare l'operatore **viewof** per accedere al loro contenuto interattivo\n\nPossono essere facilmente inseriti tramite gli **snippet** del menu laterale.","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"

Gli snippet sono un comodo strumento per inserire frammenti funzionali di codice

","pinned":false,"hidden":false,"mode":"html"},{"id":305,"value":"Prossima lezione","pinned":false,"hidden":false,"mode":"html"},{"id":256,"value":"### Referenze\n- 👓 [Cosa sono le `view`?](https://observablehq.com/@observablehq/introduction-to-views)\n- 📦 [Una intro a `viewof`](https://observablehq.com/@observablehq/a-brief-introduction-to-viewof)\n- 📃 [DOM e HTML](https://observablehq.com/@observablehq/introduction-to-html)\n- 🧑‍🍳 [Gli input pronti all'uso in Observable](https://observablehq.com/@observablehq/inputs)","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}