Professional Documents
Culture Documents
blogdart.es librodart.es
PRESENTACIÓN DE
MOISÉS BELCHÍN
!
PARA PRESENTAR EL LENGUAJE DART EN
EL EVENTO DART FLIGHT SCHOOL MADRID 2014
ORGANIZADO POR GDGMADRID
!
La presentación ha sido complementada con diapositivas
explicativas para entender el contenido esquemático de la
presentación
legibilidad
HTMLElement Element
ownerDocument document
XMLHttpRequest HttpRequest
CSSStyleSheet CssStyleSheet
getElementsByTagName('tag') querySelectorAll('tag')
getElementsByName('name') querySelectorAll('[name="name"]')
getElementsByClassName('class') querySelectorAll('.class')
querySelector() y querySelectorAll().
elem.getAttribute('name')('tag') elem.attributes['name']
JavaScript Dart
Sin duda algo que hará las delicias de muchos. Un código más claro, limpio y
que permite paralelizar tareas de manera muy simple.
Si antes teníamos un código como en que acabamos de ver, ahora tendríamos
el siguiente:
void getResult() {
var xhr = HttpRequest.getString('http://www.google.es')
..then((resp) => print(resp))
..catchError((e) => print('Error!'));
}
Soporte multi-navegador
import 'dart:html';
!
void main() {
var text = document.querySelector('#sample_text_id');
text.text = 'Bienvenido a Dart !';
text.lang = 'ES';
text.attributes.forEach((k, v) => print('$k: $v'));
text.style.backgroundColor = '#f87c45';
}
2014 | Moisés Belchín - librodart.es | blogdart.es
Permite un manejo estructurado de todas las propiedades
del DOM, como hemos visto en el ejemplo anterior.
Encapsular
Estructura, estilo y comportamiento
Reutilizar
Vincular interfaz y lógica
(Data Binding)
CSS
(estilo)
!
fichero
DART
2014 | Moisés Belchín - librodart.es | blogdart.es
Ahora vemos la parte HTML, una parte del CSS (solo un
fragmento para que puedas hacerte a la idea) y el
archivo Dart
</div>
</template>
<script type="application/dart" src="login.dart"></script>
</polymer-element>
2014 | Moisés Belchín - librodart.es | blogdart.es
/* CSS Document */
a { text-decoration: none; } CSS
h1 { font-size: 1em; }
h1, p {
margin-bottom: 10px;
}
span {
color: #5a5656;
font-weight: lighter;
}
strong {
font-weight: bold;
}
.uppercase { text-transform: uppercase; }
!
/* ---------- LOGIN ---------- */
#login {
margin: 50px auto;
width: 300px;
}
…
2014 | Moisés Belchín - librodart.es | blogdart.es
import 'package:polymer/polymer.dart';
!
DART
/**
* Polymer Login System Element.
*/
@CustomTag('login-usuario')
class LoginUsuario extends PolymerElement {
@observable String usuario;
@observable String password;
@observable bool error = false;
@observable String login_error = '';
!
LoginUsuario.created() : super.created();
<login-usuario></login-usuario>
!
</body>
</html>
}
2014 | Moisés Belchín - librodart.es | blogdart.es
¿Cómo se
trabaja con
?
2014 | Moisés Belchín - librodart.es | blogdart.es
Ahora pasamos a la parte práctica, donde
haremos un rápido tour por el lenguaje.
!
Chromium + DartVM
Aritméticos Asignación
Test de tipado De Bits
Condicionales
De igualdad y relacionales
+ Suma
- Resta
-expr Signo negativo
* Multiplicación
/ División
~ División entera
% Resto de la división
“==" Igualdad
!= Distinto
> Mayor que
< Menor que
>= Mayor o igual
<= Menor o igual
& AND
| OR
^ XOR
Pre-expresiones y post-expresiones
++expr expr++
--expr expr--
Asignación [=]
[*=], [/=], [~/=], [%=], [+=], [-=], [<<=],
[>>=], [&=], [^=], [|=]
main() {
final app_title = 'Mi primera app Dart';
final String app_subtitle = 'Dart mola !’;
const pi = 3.14159265358979;
}
String bool
num DateTime
int List, Set
double Map
2014 | Moisés Belchín - librodart.es | blogdart.es
Bucle For
var lista = ['uno', 'dos', 'tres', 'cuatro'];
!
for (var i=0; i < lista.length; i++) {
print('${i} :: ${lista[i]}'); // 0 :: uno
// 1 :: dos
// 2 :: tres
// 3 :: cuatro
}
saluda(nombre:'Pedro');
saluda(apellidos:'García', nombre:'Pedro');
saluda(apellidos:'García', edad: 29, nombre:'Pedro');
saluda();
!
!
Nota: observa que no importa el orden en el que pases los parámetros a la
función.
// Constructor.
Persona() {}
Las librerías, permiten crear código modular, que pueda compartirse y reutilizarse
fácilmente. Una librería no es más que un paquete que creas a partir de interfaces,
clases y funciones globales que empaquetas para reutilizar en otro proyecto bajo la
palabra reservada library seguido de un nombre.
!
Este es un ejemplo sencillo de creación de librería, en el que hemos omitido la
implementación de las clases o de las funciones globales.
dart:async dart:indexed_db
dart:collection dart:io
dart:convert dart:isolate
dart:core dart:js
dart:html dart:math
! 2014 | Moisés Belchín - librodart.es | blogdart.es
Recursos:
• dartlang.org
• api.dartlang.org
• blogdart.es
• librodart.es