My First Dart Polymer Element

Let’s get started with building the first Dart Polymer element.

The component is responsible for calculating squared value of a number.



The element’s code is of course pretty simple:

 

void calculate(Event e, var detail, Element target) {

   String data = (target as InputElement).value;

   value = int.parse(data);

   square = value * value;

   if(value == null){

     summary = "No text entered";

     return;

   }

   summary = value.toString() + " squared = " + square.toString();

 

 }

 

This function is binded throw the square element :

<polymer-element name="square-calculator" >

<template>

  <div>

    Enter number: <input type="number" on-change=""  >

   </div>

   <button>Calculate</button>

   <div>

     

   </div>

 </template>

 <script type="application/dart" src="squareCalculater.dart"></script>

</polymer-element>

 

Then the component can be added to the html file:

 

<html>

 <head>

   <meta charset="utf-8">

   <title>Sample app</title>

   <link rel="stylesheet" href="squarecalc.css">

   

   <!-- import the click-counter -->

   <link rel="import" href="squareelement.html">

   <script type="application/dart">export 'package:polymer/init.dart';</script>

   <script src="packages/browser/dart.js"></script>

 </head>

 <body>

   <h1>Calculate Square Value</h1>

   

   <p>Let's calc!</p>

   

   <div id="calc_id">

     <square-calculator ></square-calculator>

   </div>

 

 </body>

</html>

 

You can view the code in this link.

If you want to download the Javascript artifacts  click here.

Thank you for your interest!

We will contact you as soon as possible.

Send us a message

Oops, something went wrong
Please try again or contact us by email at info@tikalk.com