Programmazione Dart - HTML DOM

Ogni pagina web risiede all'interno di una finestra del browser che può essere considerata come un oggetto.

UN Document objectrappresenta il documento HTML visualizzato in quella finestra. L'oggetto Document ha varie proprietà che fanno riferimento ad altri oggetti che consentono l'accesso e la modifica del contenuto del documento.

Il modo in cui si accede e si modifica il contenuto di un documento è chiamato Document Object Model, o DOM. Gli oggetti sono organizzati in una gerarchia. Questa struttura gerarchica si applica all'organizzazione degli oggetti in un documento Web.

Window- In cima alla gerarchia. È l'elemento più esterno della gerarchia degli oggetti.
Document- Ogni documento HTML che viene caricato in una finestra diventa un oggetto documento. Il documento contiene il contenuto della pagina.
Elements- rappresentare il contenuto su una pagina web. Gli esempi includono le caselle di testo, il titolo della pagina ecc.
Nodes - sono spesso elementi, ma possono anche essere attributi, testo, commenti e altri tipi di DOM.

Ecco una semplice gerarchia di alcuni importanti oggetti DOM:

Dart fornisce il dart:htmllibreria per manipolare oggetti ed elementi nel DOM. Le applicazioni basate su console non possono utilizzare l'estensionedart:htmlbiblioteca. Per utilizzare la libreria HTML nelle applicazioni web, importadart:html -

import 'dart:html';

Andando avanti, ne discuteremo alcuni DOM Operations nella prossima sezione.

Trovare elementi DOM

Il dart:html library fornisce il querySelector funzione per cercare elementi nel DOM.

Element querySelector(String selectors);

Il querySelector() restituisce il primo elemento che corrisponde al gruppo di selettori specificato. "selectors dovrebbe essere una stringa utilizzando la sintassi del selettore CSS come indicato di seguito

var element1 = document.querySelector('.className'); 
var element2 = document.querySelector('#id');

Esempio: manipolazione di DOM

Segui i passaggi indicati di seguito, nell'IDE Webstorm -

Step 1 - File NewProject → Nella posizione, fornire il nome del progetto come DemoWebApp.

Step 1 - Nella sezione "Genera contenuto di esempio", seleziona SimpleWebApplication.

Creerà un progetto di esempio, DemoWebApp. C'è unpubspec.yaml file contenente le dipendenze che devono essere scaricate.

name: 'DemoWebApp' 
version: 0.0.1 
description: An absolute bare-bones web app. 

#author: Your Name <[email protected]> 
#homepage: https://www.example.com  
environment:   
   sdk: '>=1.0.0 <2.0.0'  
dependencies:   
   browser: '>=0.10.0 <0.11.0'   dart_to_js_script_rewriter: '^1.0.1'  
transformers: 
- dart_to_js_script_rewriter

Se sei connesso al Web, questi verranno scaricati automaticamente, altrimenti puoi fare clic con il pulsante destro del mouse sul file pubspec.yaml e ottieni le dipendenze.

Nella cartella web troverai tre file: Index.html, main.dart, e style.css

Index.html

<!DOCTYPE html>   
<html> 
   <head>     
      <meta charset = "utf-8">     
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge">     
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <meta name = "scaffolded-by" content = "https://github.com/google/stagehand">
      <title>DemoWebApp</title>     
      <link rel = "stylesheet" href = "styles.css">     
      <script defer src = "main.dart" type = "application/dart"></script>
      <script defer src = "packages/browser/dart.js"></script> 
   </head>
   
   <body>   
      <h1>
         <div id = "output"></div> 
      </h1>  
   </body> 
</html>

Main.dart

import 'dart:html';  
void main() {   
   querySelector('#output').text = 'Your Dart web dom app is running!!!.'; 
}

Corri il index.htmlfile; vedrai il seguente output sullo schermo.

Gestione degli eventi

Il dart:html library fornisce il onClickevento per elementi DOM. La sintassi mostra come un elemento può gestire un flusso di eventi di clic.

querySelector('#Id').onClick.listen(eventHanlderFunction);

Il querySelector() funzione restituisce l'elemento dal DOM dato e onClick.listen() prenderà un eventHandlermetodo che verrà richiamato quando viene generato un evento click. La sintassi dieventHandler è dato di seguito -

void eventHanlderFunction (MouseEvent event){ }

Facciamo ora un esempio per comprendere il concetto di gestione degli eventi in Dart.

TestEvent.html

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "utf-8"> 
      <meta http-equiv = "X-UA-Compatible" content = "IE = edge"> 
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> 
      <meta name = "scaffolded-by" content ="https://github.com/google/stagehand"> 
      <title>DemoWebApp</title> 
      <link rel = "stylesheet" href = "styles.css"> 
      <script defer src = "TestEvent.dart" type="application/dart"></script> 
      <script defer src = "packages/browser/dart.js"></script> 
   </head> 
   
   <body> 
      <div id = "output"></div> 
      <h1> 
         <div> 
            Enter you name : <input type = "text" id = "txtName"> 
            <input type = "button" id = "btnWish" value="Wish"> 
         </div> 
      </h1> 
      <h2 id = "display"></h2> 
   </body>
   
</html>

TestEvent.dart

import 'dart:html'; 
void main() { 
   querySelector('#btnWish').onClick.listen(wishHandler); 
}  
void wishHandler(MouseEvent event){ 
   String name = (querySelector('#txtName')  as InputElement).value; 
   querySelector('#display').text = 'Hello Mr.'+ name; 
}

Produzione

↰ Previous page