5. Web Components and polymer.dart | DART Essentials

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

DART Essentials

By : Sikora

4.8 (4)

DART Essentials

4.8 (4)

By: Sikora

Overview of this book

This book is targeted at expert programmers in JavaScript who want to learn Dart quickly. Some previous experience with OOP programming in other languages and a good knowledge of JavaScript are assumed.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Getting Started with Dart

1. Getting Started with Dart

What is Dart?

Why choose Dart?

Installing the Dart SDK

The Dart language tour

Summary

2. Practical Dart

2. Practical Dart

Optimizing DOM tree manipulations

The documentation search app

Combining Dart and JavaScript

Dart MythBusters

Summary

3. The Power of HTML5 with Dart

3. The Power of HTML5 with Dart

Creating the Reddit Read Later app

Music visualizer

Other noteworthy APIs and libraries

Summary

4. Developing a Mobile App with Dart

4. Developing a Mobile App with Dart

300 ms tap delay

Basics of CSS3 transformations

A 3D bookshelf with DeviceOrientation events

Position and distance tracker with the GeoLocation API and Google Maps API

Drawing into 2D canvas using onTouch events

Summary

5. Web Components and polymer.dart

5. Web Components and polymer.dart

Web Components

The Web Components polyfill for older browsers

Basic HTML Import

Using Shadow DOM

Using Custom Elements

Polymer.dart

One-way data binding

Two-way data binding

Polymer core and paper elements

Summary

6. AngularDart

6. AngularDart

Installing AngularDart

To-do list with AngularDart

Extending the to-do list

A book component in AngularDart

What is Angular 2.0?

Performance tips for AngularDart

Summary

7. Server-side Applications with Dart

7. Server-side Applications with Dart

The standalone Dart VM

Parsing CLI arguments with the args package

Writing a chat app with the WebSockets server

Writing an HTTP server with the route package

Using Dart as a full-stack language

Summary

8. Testing and Profiling the Dart Code

8. Testing and Profiling the Dart Code

Testing strategies for web apps

Unit testing

Operator overloading and mixins

Testing AngularDart apps

Profiling with the Observatory tool

Summary

9. Writing Native Extensions for the Standalone Dart VM

9. Writing Native Extensions for the Standalone Dart VM

The structure of native extensions

Writing a minimal native extension

Writing a native fuzzy search implementation

Writing bindings for the exiv2 library

Distributing native extensions

Summary

Index

Index

Customer Reviews

4.8 (4)

5 star

75%

4 star

25%

3 star

0

2 star

0

1 star

0

Using Shadow DOM

As we want to apply styles from greeting.html only to elements in greeting.html, we'll wrap it with HTML5 Template. As we mentioned earlier in this chapter, everything inside the <template> tag will get parsed into DOM elements but won't be run. This means that styles inside <template> have no effect until we paste them outside of the template:

<!-- web/greeting.html -->
<template>
  <style>
  h1 { color: blue; }
  h2 { color: yellow; }
  </style>
  <h1>Hello, imported world!</h1>
</template>

In order to make it more like a real-world example, we'll add some styles to index.html as well:

<!-- index.html -->
<head>
  <link rel="import" href="greeting.html" id="myElementLink">
  <style>
  h1 { color: red !important }
  h2 { color: green; }
  </style>
</head>
<body>
  <h2>Greeting here</h2>
  <!-- Insert greeting here. -->
  <!-- We'll create Shadow DOM in this...

Search

Your notes and bookmarks