The original address: blog.sethladd.com/2012/11/you…

The original author: www.blogger.com/profile/139…

Published: November 6, 2012

With all the power we get from HTML5 and modern Web platforms, you can’t easily do simple things like extend

Network component basics

The Web’s component model, also known as Web Components, is a collection of specifications that allow developers to build reusable, encapsulated, and declarative widgets.

When people talk about “Web Components, “they usually mean these four concepts.

  • The template, which defines lazy tag blocks but can be activated for later use.
  • A decoratorApplying templates allows CSS to affect document-rich visual and behavioral changes.
  • Custom elements, allowing authors to define their own elements, including new representations and apis, that can be used in HTML documents.
  • The shadow of the DOM, which defines how decorators and custom elements behave and behave together in the DOM tree.

Custom elements

I’m most interested in custom elements because they allow me to build, share, and use < X-Fancy-button > in my application.

Custom elements encapsulate the structure, style, and behavior of user-defined tags. The structure, or all nested divs and Spaces, are hidden inside the custom element and not immediately visible in the DOM of the page. CSS styles can be restricted to this new element to prevent leakage to other parts of the document. Custom behavior, through JavaScript or Dart, can be attached to an element’s API for further specialization.

Data binding

Most developers want a way to update the view (that is, the HTML page) when the model (that is, the ordinary Dart object) changes, and vice versa. This technique is called data binding, and most modern MVC-style frameworks have some support to make it easy.

While not a specific part of the Web component page ‘o technique, model-driven views are an important aspect of the emerging modern Web application stack. MDV, also known as MDV, uses a declarative syntax to implement one-way and bidirectional data binding of data and views.

Use Web Components today

The Dart team has been working hard to build a Web UI in Dart that builds on Web components and ADAPTS them to today’s modern browsers. Writing your first component is easy; let me show you how.

The following assumes that you have the Dart Editor installed and can use it. While this is not a requirement, the editor makes things easier thanks to its automated build system.)

1) Create a new project

Create a new project in the Dart Editor and check “Generate basic Web application content” and “Add Pub support”.

2) Add the Web Components package

Open the pubspec.yaml file and add the dependencies to the web_Components package.

name: App  
 description: A sample application  
   
 dependencies:  
  web_ui: any  
Copy the code

3) Install dependencies

In the editor to choose pubspec yaml file, and then enter the Tools | Pub Install. Assuming it works, you will see a new package folder in your application with web_Components and all dependencies.

4) Add build scripts

Web Components need to be compiled into Vanilla Dart (and then JavaScript) and HTML. To make this process easier, the editor can run a build script when the file changes. Don’t worry, it’s very fast.

Add this file as build.dart to the root of your application (in parallel with Web/and Packages /).

import 'package:web_components/component_build.dart';  
 import 'dart:io';  
   
 void main() {  
  build(new Options().arguments, ['web/App.html']);  
 }  
Copy the code

5) Add custom components

This example uses a custom component for a clickable button and its output. It’s not the most exciting thing in the world, but it’s small and it’s all on its own.

Create a click.html file in the Web/directory and add the following.

 <html><body>  
  <element name="x-click-counter" constructor="CounterComponent" extends="div">  
   <template>  
    <div>  
     <button on-click="increment()">Click me</button>  
     <span>(click count: {{count}})</span>  
    </div>  
   </template>  
   <script type="application/dart">  
    import 'package:web_ui/web_ui.dart';  
   
    class CounterComponent extends WebComponent {  
     int count = 0;  
     void increment(){ count++; }}</script>  
  </element>  
 </body></html>  
Copy the code

The

tag defines a new custom element, in this case extending the

element. The structure of this new element can be found in the

Increment method is called on the element when

The {{count}} syntax is the data binding between the count field of an element (also defined in

6) Clean up the editor’s default template

Remove the following files from your project; they are not needed in this example.

web/App.dart
App.html
App.css
Copy the code

7) Use custom elements

Create a Web/app.html and use the following code.

 <! DOCTYPEhtml>  
   
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>App</title>  
   <link rel="components" href="click.html">  
  </head>  
  <body>  
   <h1>Web Components FTW!</h1>  
     
   <x-click-counter></x-click-counter>  
     
   <script type="application/dart">main() {}</script>  
   <script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>  
  </body>  
 </html>  
Copy the code

Notice how the Web component itself is included in this document through the tag in . My favorite part is the

in the middle of the document.

Note the empty main() function in the

8) Run the application

The build script should already have generated all the necessary code, but if not, you can right-click build.dart and choose Run.

You should see a Web /out directory with a web/out/ app.html.html file. Right click on app.html. HTML and select “Run in Dartium”.

Here’s an embedded demo.

Sethladd.github.com/dart-web-co…

Click the button and the number of clicks will be updated.

If you can’t see the embedded demo above, you can try the live demo.

9) Run the application in Firefox

Of course, it’s fun to run Dart code natively on a virtual machine, but it’s even more fun to run Dart applications using Web components in other modern browsers.

Right click on app.html. HTML and select “Run as JavaScript”. This compiles your application into JavaScript and launches your default browser. You can then copy the URL and paste it into other modern browsers. I’ve tried it with stable Chrome, Firefox and Safari.

conclusion

There’s more to come, but hopefully you can see how easy it is to build Web Components with Dart and compile them into code that runs in modern browsers.

You can read more about Web Components, or more about Dart + Web Components, or more about Dart + Web Components + Tools. You can access the open source Dart Web UI project and even see TodoMVC built with Dart + Web Components.