7. Building Games with HTML5 and Dart | Learning Dart

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Learning Dart

4.4 (10)

Learning Dart

4.4 (10)

Overview of this book

Mastering Dart by Projects is a step-by-step guide that aims to give you hands-on knowledge about programming in Dart using an example-based approach.If you want to become a web developer, or perhaps you already are a web developer but you want to add Dart to your tool belt, then this book is for you. This book assumes that you have at least some knowledge of HTML and how web applications work. Some previous programming experience, preferably in a modern language like C#, Java, Python, Ruby, or JavaScript, will also give you a head start. You can also work with Dart on your preferred platform, be it Linux, Mac OS X, or Windows.

Preface

Preface

Spiral approach

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Dart – A Modern Web Programming Language

1. Dart – A Modern Web Programming Language

What is Dart?

Dart is a perfect fit for HTML5

Getting started with Dart

Getting a view on the Dart tool chain

A bird's eye view on Dart

Making a todo list with Dart

Summary

2. Getting to Work with Dart

2. Getting to Work with Dart

Variables – to type or not to type

Built-in types and their methods

Documenting your programs

Changing the execution flow of a program

Using functions in Dart

Recognizing and catching errors and exceptions

Summary

3. Structuring Code with Classes and Libraries

3. Structuring Code with Classes and Libraries

A touch of class – how to use classes and objects

Summary

4. Modeling Web Applications with Model Concepts and Dartlero

4. Modeling Web Applications with Model Concepts and Dartlero

A short introduction to Git and GitHub

What a model is and why we need it in programming

Model concepts – a graphical design tool for our models

Dartlero – a simple domain model framework

An example of using Dartlero

The categories and links application

Summary

5. Handling the DOM in a New Way

5. Handling the DOM in a New Way

Finding elements and changing their attributes

Creating and removing elements

Handling events

Manipulating the style of page elements

Animating a game

Summary

6. Combining HTML5 Forms with Dart

6. Combining HTML5 Forms with Dart

Spiral 1 – the power of HTML5 forms

Spiral 2 – how to validate data with Dart

Spiral 3 – how to store data in local storage

Spiral 4 – reading and showing data

Spiral 5 – changing and updating data

Spiral 6 – working with a list of bank accounts

Summary

7. Building Games with HTML5 and Dart

7. Building Games with HTML5 and Dart

The model for the memory game

Spiral 1 – drawing the board

Spiral 2 – drawing cells

Spiral 3 – coloring the cells

Spiral 4 – implementing the rules

Spiral 5 – game logic (bringing in the time element)

Spiral 6 – some finishing touches

Spiral 7 – using images

Adding audio to a web page

Using an audio library – Collision clones

Adding video to a web page

Summary

8. Developing Business Applications with Polymer Web Components

8. Developing Business Applications with Polymer Web Components

How web components change web development

Web components with Polymer.dart

Two-way data binding in Polymer.dart

Creating the polymer_links project

Using Polymer for the category links project

Applying web components to the project tasks app

Summary

9. Modeling More Complex Applications with Dartling

9. Modeling More Complex Applications with Dartling

The Dartling domain modeling framework

Design of the Travel Impressions model in spirals

Generating Travel Impressions code from the model

Initializing the Travel Impressions model with Data

Testing the Travel Impressions model

Defining and using the MVC pattern

The TodoMVC app

Summary

10. MVC Web and UI Frameworks in Dart – An Overview

10. MVC Web and UI Frameworks in Dart – An Overview

DQuery

Bootjack

Dart Web Toolkit (DWT)

Dart widgets

Bee

HTML components

Rikulo UI

Hipster-mvc

Puremvc

StageXL

Flash Professional CC – toolkit for Dart

Angular.dart

Summary

11. Local Data and Client-Server Communication

11. Local Data and Client-Server Communication

The options for browser storage

Asynchronous calls and Futures

Using IndexedDB with Dart

Using Lawndart

A Dart web server

Using JSON web services

Summary

12. Data-driven Web Applications with MySQL and MongoDB

12. Data-driven Web Applications with MySQL and MongoDB

Database drivers for Dart

Storing todo data in MySQL

Dartlero tasks – a many-to-many model in MySQL

MongoDB – a NoSQL database

Using the mongo_dart driver to store the todo data in MongoDB

Summary

Index

Index

Adding video to a web page

Adding video to a web page is as easy to do as adding audio: just add a <video> tag to the HTML with an embedded <source> tag specifying src and type, and Dartium renders this nicely (see video01.html):

<video poster="wildlife.jpg" controls>
  <source src="wildlife.ogv" type='video/ogg; codecs="theora,     vorbis"' />
  <source src="wildlife.webm" type='video/webm; codecs="vp8,   vorbis"' />
     The video tag is not supported in your browser. Download the   video <a href="wildlife.webm">here</a>.
</video>

Note

For code file of this section, refer to chapter 7\video\ in the code bundle.

The poster attribute from <video> serves to provide the initial image, see the following screenshot:

The poster image with the <video> tag

The three important formats you should care about are WEBM, MP4, and OGV. For MP4, use the following type:

  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'

Both <audio> and <video...

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Learning Dart

Search

Your notes and bookmarks