YUI3 and AlloyUI Introduction for Pernambuco.JS 2012

YUI3 e AlloyUI

Eduardo Lundgren
Liferay Inc.
@eduardolundgren

Pontos principais

1. Introdução YUI e AlloyUI
2. Primeiros Passos
3. Por que utilizar YUI?
4. Exemplos
5. Conclusão

O que é AlloyUI?

• Extensão para YUI
• Open Source (BSD)

YUI: Componentes

• Utilities
• Selectors
• DOM
• Events
• Effects
• Ajax / pjax
• Muito mais

Alloy: Componentes

• Calendário
• Carousel
• Image Gallery
• Progress Bar
• Resize
• Scheduler
• Muito mais

YUI: Primeiros passos

<!doctype html>
<html>
<head>
<title>Demo</title>

<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js">

</head>
<body>
<script>
// Your code here!
</script>
</body>
</html>


<!doctype html>
<html>
<head>
<title>Demo</title>

<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js">

</head>
<body>
<script>
// Your code here!
</script>

20KB!
</body>
</html>

jQuery
$(document).ready(function(){
// Your code here
});

YUI3
YUI().use(‘widget’, function(Y) {
// Your code here
});

YUI Sandbox

// Your code here
var widget = new Y.Widget();
});

YUI Sandbox

// Your code here
});

Alloy Sandbox
AUI().use(‘widget’, function(A) {
// Your code here
var widget = new A.Widget();
});

jQuery vs. YUI
jQuery:

$.foo.bar()

YUI3:

YUI().use('node', 'module2', function (Y) {
Y.foo.bar()
});

jQuery vs. YUI

jQuery:

$('div.foo:first')

YUI3:

Y.one('div.foo')

jQuery vs. YUI

jQuery:

var foo = $('div.foo:first');
foo.someMethod();

YUI3:

var foo = Y.one('div.foo');
if (foo) { foo.someMethod(); }

jQuery vs. YUI

jQuery:

$('div.foo')

YUI3:

Y.all('div.foo')

jQuery vs. YUI

jQuery:

.find('p.foo:first')
.find('p.foo')

YUI3:

.one('p.foo')
.all('p.foo')

jQuery vs. YUI

jQuery:

$('<div/>')

YUI3:

Y.Node.create('<div/>')

jQuery vs. YUI

jQuery:

.html('foo')
.text('foo')
.val('foo')

YUI3:

.setHTML('foo')
.set('text', 'foo')
.set('value', 'foo')

jQuery vs. YUI

jQuery:

.html()
.text()
.val()

YUI3:

.getHTML()
.get('text')
.get('value')

jQuery vs. YUI

jQuery:

parent.append('<div/>');
child.appendTo(parent);

YUI3:

parent.append('<div/>');
child.appendTo(parent);

jQuery vs. YUI
jQuery:

.click(fn)
.focus(fn)
.blur(fn)
.mouseout(fn)
.mouseover(fn)

YUI3:

.on('click', fn)
.on('focus', fn)
.on('blur', fn)
.on('mouseout', fn)
.on('mouseover', fn)

jQuery vs. YUI

jQuery:

$('#message').load('/ajax/test.html');

YUI3:

Y.one('#message').load('/ajax/test.html');
Y.one('#message').load('/ajax/test.html', '#foo');

jQuery vs. YUI
jQuery: YUI3:

$('#foo').animate( Y.one('#foo').transition({
{ width: 100,
width: 100, opacity: 0.5,
opacity: 0.5 duration: 0.6
}, });
{
duration: 600,
easing: 'swing'
}
);

Por que usar YUI3?

• Built-in Lazy Loading
• Base
• Widget
• Graphics
• Custom Events
• Muito mais

Por que usar YUI3?
Loader Module

YUI().use(‘mod1’,‘mod2’, function(Y) {
// Your code here
});

Scripts block downloads in
IE6&7, Firefox 2&3.0, Safari
3, Chrome 1, and Opera

Scripts downloads in parallel

Por que usar YUI3?
Y.Base
Y.User = A.Component.create({
NAME: 'User', var user1 = new Y.User({
nome: ‘Eduardo’
ATTRS: { });
nome: { value: 'Default name' }
},

EXTENDS: Y.Base,

prototype: {
initializer: function() {}
}
});

Por que usar YUI3?
Y.Widget
A.Calendario = A.Component.create({
NAME: 'Calendario', var c1 = new Y.Calendario({
date: ’10/10/2012’
ATTRS: { });
date: { value: '' }
}, c1.render();

EXTENDS: A.Widget,

prototype: {
initializer: function() {},
renderUI: function() {},
bindUI: function() {},
syncUI: function() {},
destroy: function() {}
}
});

O que queríamos?

• Como expressar ideias mais eficientemente?
• Construir visualmente um fluxo para a engine de
workflow do Liferay

Workflow
Definição
<?xml version="1.0"?>

<workflow-definition>
<name>Single Approver</name>
<description>A single approver can approve a workflow content.</
description>
<version>1</version>
<state>
<name>created</name>
<metadata>
<![CDATA[{"xy":[78,53]}]]>
</metadata>
<initial>true</initial>
<transitions>
<transition>
<name>review</name>
<target>review</target>
</transition>
</transitions>

Diagram Builder

• Drag-and-drop interface
• HTML5 and web standards (no flash)
• Support modern browsers and devices
• HTML vs Graphic API
• Flexible and extensible API

Diagram Builder Y.DiagramBuilder

Diagram Builder

Y.Widget

Y.DiagramBuilderBase Y.FieldSupport
‣ addField(field, index);
‣ removeField(field);
Y.DiagramBuilder

Diagram Builder

Available Fields

Diagram Builder
Y.AvailableField

Available Fields

Y.Base

Y.AvailableField

Y.AvailableField

Diagram Builder
Y.DiagramNode

Arquitetura: Node Y.Overlay

Y.DiagramNode

Y.DiagramNodeState

Y.DiagramStart

Y.DiagramEnd

Y.DiagramJoin

Y.DiagramFork

Y.DiagramTask

Y.DiagramCondition

Arquitetura: Node

.yui3-widget .aui-diagram-node
.aui-diagram-node-content

<svg:svg />

Diagram Builder

Y.Connector

Connector Architecture

Y.Base

Y.Connector Y.Connector

Diagram Builder Canvas === Y.Graphic

O que queríamos?
google calendar

Calendário

• Serviço de agenda e calendário on-line
• Adicionar, controlar eventos,
compromissos, compartilhar
programação

Obrigado!

• Pernambuco.JS
• Liferay Inc.
• YAHOO!
• YUI Team

Referências

• Liferay Portal http://github.com/liferay/liferay-portal
• AlloyUI http://github.com/liferay/alloy-ui
• AlloyUI API http://deploy.alloyui.com/api

• Twitter: @eduardolundgren
• E-Mail: eduardo.lundgren@liferay.com
• Github: http://github.com/eduardolundgren

• YUI3 vs. jQuery? http://www. jsrosettastone.com

YUI3 and AlloyUI Introduction for Pernambuco.JS 2012

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to YUI3 and AlloyUI Introduction for Pernambuco.JS 2012

Similar to YUI3 and AlloyUI Introduction for Pernambuco.JS 2012 (20)

Recently uploaded

Recently uploaded (20)

YUI3 and AlloyUI Introduction for Pernambuco.JS 2012

Editor's Notes