HTML Handling with Google Dart

We have previously written a start-up tutorial in Google Dart – which is – Google Dart – language of Structural Web ApplicationsIn Current Post we will try to explain the basic handling of HTML DOM Elements with Google Dart.

Google Dart

To do DART programming, we are having a very nice editor – Dart Editor . By Starting the editor, if we make a new web application, we will have default html and and the corresponding dart file.

The important file to start an DART application is – pubspec.yaml. Here all the dependencies of the application are declared. Below is a commented such file.

name: DartUser    // Application Name
description: A sample web application // Description of the Application
dependencies:
  browser: any  // The application will be optimised for any browser

Now the specific html file for which we have tried the DART programming in Web Layer of an application.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DartUser</title>
        <link rel="stylesheet" href="dartuser.css"> <!-- Any specific css file for element styling-->
    </head>
    <body>
         <h1>Enter name :</h1>
         Firstname : <input type="text" name ="firstname" id="firstnameid" value="" />
         Lastname : <input type="text" name ="lastname" id="lastnameid" value="" />

         <button id="getValue" >Get Value</button>
         <button id="deleteall" >Delete All</button>

         <p id="changedtext">Current Text is empty</p>

         <ul id="verticalList"></ul>

         <script type="application/dart" src="dartuser.dart"></script> <!--The new application extention -DART -->
         <script src="packages/browser/dart.js"></script>
    </body>
</html>

The Above HTML file consists of two text inputs to take the first and last name and the names will be added in a list – within a combinations of ul and li elements. On initialisation with “Run as javascript”, the above file will look like –

Initial Web Page

Now the most interesting part is the .dart file. The programming in this file actually define the behavior of the HTML DOM Elements in the Web page – for which we find Google dart as a structured language in web. We will explain those in the comment section of the .dart file below.

import 'dart:html';                 // Importing of DART html package to get access of HTML DOM Elements Libaries

TextInputElement firstname;         // HTML Dom Element Reference in DART Library (TextInputElement)
TextInputElement lastname;
UListElement ulm;
void main() {
    // Initialisation
    // How can we have handle of HTML DOM Elements in the Application? 
    // 1st Type
    // var userid = query("#userid");           // Showing example of accessing elements
    // userid.value = "This is desired value1";

    //2nd Type
    //var userid = query("#userid");
    //(userid as TextInputElement).value ="This is desired value2"; // Typecasting of Element to specific 
                                                                    // HTML Control

    //3rd Type
    //TextInputElement userid = query("#userid");  // Converting directly to specific DOM Element   
    //userid.value ="This is desired value3";

    firstname = query("#firstnameid");             // Our application code- get handle of firstname
    firstname.value ="First name ";

    lastname = query("#lastnameid");
    lastname.value ="Last name ";

    var btn = query("#getValue");
    btn.onClick.listen(changeParagraph);          // Register a DART function to the onclick listener of button.

    query("#deleteall").onClick.listen((e) => query("#verticalList").children.clear()); //Delete all child of UL
                                                                                        // i.e. the li elements
    query("#changedtext").text = firstname.toString();
}

void changeParagraph(Event e)
{
    var allText = "The firstname and lastname are ";
    allText = allText + firstname.value;
    allText = allText + " ";
    allText = allText + lastname.value;

    query("#changedtext").text = allText;

    var addLiElement = new LIElement();
    addLiElement.text = "Name is " + firstname.value + " " + lastname.value;
    addLiElement.onClick.listen((e) => addLiElement.remove());   //Adding remove behavior against onclick listener

    firstname.value = '';
    lastname.value = '';

    ulm = query("#verticalList");
    ulm.children.add(addLiElement); // Adding the LI element in the children collection of UL element  

}

The overall application will look like the following –

Dart on Web

We will write on use of templates in DART Application in our next posts.

For other advanced concepts like sharing package etc. reader should go thoroughly –

https://www.dartlang.org/docs/tutorials/get-started/

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address:

Delivered by FeedBurner

3 thoughts on “HTML Handling with Google Dart

Leave a Reply

Your email address will not be published. Required fields are marked *