►
From YouTube: YUI Open Roundtable November 14, 2013
Description
YUI Open Roundtable November 14, 2013
A
A
I
have
with
me
clarence
young
from
yy
team,
one
to
puzzle
from
my
white
team
and
we
also
have,
as
our
guests,
eduardo
bruno
or
sorry
eduardo
and
zeno
from
liferay
company.
So
welcome
guys,
it's
good
to
see
you
guys
again.
Thank
you
again.
It's
glad
to
have
you
come
visit.
Did
you
see
anything
interesting
at
the
yui
camp
at
the
yahoo
campus,
when
you're
here.
A
Well,
it's
good!
Well,
it's
good
to
have
you
here,
so
basically
how
this
works
is
we
usually
start
off
with
any
demos
that
people
have
to
show
off?
Let
me
make
sure
that
things
are
going
cool
in
the
channel
nobody's
upset
there.
That's
cool,
so
yeah
feel
free
to
go
ahead
and
kick
off
the
the
demo
that
you
want
to
give.
B
So,
during
the
uri
conference
this
year
I
presented
the
new
version
of
lyui,
which
is
lyoy
2.0,
so
I
also
discussed
with
juan,
do
paso
and
other
yy
members
in
order
to
understand
what
can
we
contribute
more
to
the
core
and
what
can
we
share
with
the
community
more
easily
so
yeah
and
this
demo
I
wanted
to
go
through
some
of
our
components,
explain
how
we
did
that
what
we
can
reuse
from
them.
So
I'm
gonna
do
this
quick
demo
for
you
guys.
So
let
me
scratch
in
screenshot
here.
B
There
you
go
okay,
all
right.
So
in
january
this
year
we
released
this
new
website
aloy.com,
and
the
idea
for
this
website
was
to
simplify
documentation,
examples,
api
docs,
rosetta
stone
guides
our
css
layer
as
well
and
contributing
page
for
the
community,
because
the
first
version
was
pretty
much
hidden
inside
github,
and
then
it
was
a
little
bit
hard
for
people
come
to
both
and
play
with
it.
So
then
we
released
this
website
with.
B
I
have
some
testimonials
from
people
from
yui.
Also
we
have
some
quick
examples
of
how
to
copy
and
paste
and
use
alloy
from
our
cdn
directly.
You
can
include
the
seed
file,
which
is
pretty
much
the
yui
seed
file,
plus
our
models.
Also,
we
have
the
bootstrap
css
hosted
on
our
cdn,
which
is
just
the
css
part
of
bootstrap,
not
the
javascript,
and
then
you
can
start
playing
with
it
very
easily.
B
Usually,
those
featured
ones
are
the
newer
ones
or
some
that
is
more
used
by
the
computer
community
and
also
we
have
other
components
like
ac
editor
integration,
audio
buttons,
and
I
wanted
to
go
through
some
of
them
to
show
how
we
did
the
extension
on
yui
how
we
take
advantage
of
the
yy
source
code
in
terms
of
we
don't
extend
and
break
compatibility.
We
always
are
close
to
iy
and
then
any
feature
or
any
bug
fix
yy
ads.
B
B
Yy
has
a
calendar
and
yy
also
has
overlays,
and
you
can
combine
both
in
order
to
create
your
datepicker
widget.
So
what
we
did
here
pretty
much
was
to
connect
the
overlayability
with
the
calendar
widget
that
we
have
right
now,
which
is
in
line.
So
the
result
of
that
is
the
ability
to
render
calendars
inside
this
overlay,
and
this
overlay
also
has
a
car
and
an
arrow
like
this,
and
you
can
reposition
this
to
any
position
you
want,
because
this
is
also
inheriting
another
component.
B
So,
for
example,
this
is
the
popover
component.
This
inherits
the
css
from
bootstrap,
but
this
internally
uses
all
oi.
So
when
I
inspect
these
elements
on
my
chrome,
you
can
see
it.
It
has
a
widget
standard
mode,
it's
a
widget
and
a
pop-over,
and
it's
a
widget
positioned
in
a
widget
model
and
has
everything
from
widget
right
now.
B
Yeah,
okay,
so
yeah.
So
if
I
inspect
this
overlay
here
you
can
notice
it's
a
widget
widget
position,
widget
model.
Also
it
is
a
widget
standard
mode.
Here's
my
head
of
the
widget
he's
my
body,
so
it's
pretty
close
to
to
what
overlay
provides
internally.
We
actually
use
this
overlay
in
order
to
create
that,
so
we
are
not
going
to
further
from
what
yy
provides.
B
B
So,
basically,
now,
in
order
to
create
a
pop-over,
it's
very
simple,
because
we
are
creating
a
base
class,
a
base
creator,
a
base,
dot,
create
that
in
extends
widget.
We
call
it
popover
and
then
we
augment
with
a
lot
of
pieces.
Most
part
of
them
are
provided
by
yui
core.
So,
for
example,
position
align,
modality
position,
align
suggestion
how
that
is
provided
by
yui,
but
we
have
other
extensions.
For
example,
widget
two
bars
right:
we
have
ability
to
plug
this
extension
to
a
widget
which
uses
the
widget
standard
mode
api
to
place.
B
Two
bars
on
the
head
on
the
body
on
the
footer
of
the
overlay,
and
we
have
other
pieces
that
we
together
create
the
popover
class.
So
the
implementation,
because
of
the
yui
api,
becomes
very
simple,
and
it's
very
maintainable,
so
we
have
there
the
site,
the
renderer
phase
of
our
regis,
the
initializer.
B
B
When
we
first
created
this
widget,
we
didn't
use
bootstrap
and
then
we
we
thought.
I
want
to
style
this
as
bootstrap
css
styles,
but
I
don't
want
to
change
the
markup.
I
just
want
to
augment
the
css
class
names
are
available
in
my
markup,
so
yy
also
has
a
very
flexible
way
to
do
it,
so
we
can
specify
a
css
prefix
for
your
widget
and
then
it's
gonna
use
the
anything
you
want
here.
B
In
this
case,
we
we
are
calling
popover
and
on
the
templates
part
we
overwrite
some
parts,
header
body,
footer
narrow
in
order
to
place
the
markups.
Oh
sorry,
the
css
quests
from
bootstrap,
so
the
implementation
in
the
end
become
very
clean
and
we
heard
everything
that
yy
provides
through
the
class
of
extensions.
B
B
So
we
can
start
see
how
different
pieces
from
yy
api
combines
in
a
very
most
way
and
very
maintainable
way.
Is
the
pop
over
sensitive
to
the
viewport
yeah,
this
popover?
It
extends
to
the
viewport,
and
there
is
a
smart
calculation
which
is
provided
by
this
model.
Here
we
have
a
a
y
widget,
which
we
create
various
pieces
of
class
extensions
to
the
widget.
We
have
one
called
position
position,
align
suggestion
this
positions,
position
line
suggestion,
help
us
to
guess
the
best
position
to
fit
the
the
widget,
the
overlay
in
the
screen.
B
So
basically
what
it
does
is
this
I'm
going
to
open
this
pop
over
here.
So
if
you
augment
your
overlay
with
the
position
online
suggestion,
it's
able
to
understand
and
recalculate
if
it
doesn't
fit
in
the
screen,
so
I
will.
I
will
make
the
window
smaller
of
my
browser.
So
if
I
try
to
open
out
the
data
picker,
it
doesn't
fit
anymore
on
the
bottom,
so
it
automatically
finds
the
best
position
for
itself.
B
B
It
doesn't
need
to
be
a
alloy
widget
for
that
right.
Another
example
is
the
widget
two
bars
is
the
one
I
highlighted
few
lines
ago
this
one
these
were
just
two
bars
is
also
very
powerful,
but
it
depends
on
a
aoi
toolbar
model.
We
have
a
two
bar
class,
I'm
gonna
show
soon,
but
you
can
have
a
very
easy
api
to
display
two
bars
inside
your
popover.
So
this
is
an
example.
This
is
a
pop-over
and
because
I
argument
that
the
pop
over
is
the
two
bar
ability.
B
You
have
a
new
option
available,
which
you
can
specify
the
two
bar
in
the
section
of
the
toolbar
and
then
now
the
two
bars
available
here
you
can
add
actions
to
the
toolbar
and
those
actions
can
understand
the
scope
of
the
widget.
It's
been
called
and
execute
methods
on
the
datepicker
on
the
calendar
or
even
in
the
popover
scope.
So
two
mark
api.
Oh.
B
B
We
created
a
lazy
architecture
which
it
enters
the
the
two
bars
and
only
when
needed
it
instantiates
the
widget
or
base
class
or
boot
on
class
or
bluetooth
plugin
behind
the
scenes.
So
I'm
going
to
refresh
this
page
and
you'll
see
all
those
two
bars
took
only
46
milliseconds
to
render
because
of
this
last
aspect,
if
we
use
the
buttons
without
this
logic,
this
can
takes
few
hundred
milliseconds
and
because
of
this
we
needed
another
way
to
easily
plug
to
bars
inside
widget,
not
only
buttons,
and
also
it
has
other
abilities.
B
For
example,
you
can
create
select
buttons
like
this
on
the
toolbar.
You
can
create
radio
buttons
like
this
one.
Oh
no,
this
is
selection.
This
is
radio,
see
you
only
can
select
one
you,
we
can
create
red
go
to
bars.
We
can
create
verticals
in
horizontal
two
bars
together,
so
we
need
all
that
ability
to
be
simplified
in
the
implementations
and
through
the
widget
portals.
We
didn't
have
all
that,
so
the
widget
toolbar
gives
this
kind
of
ability.
So
let
me
show
the
code
I'm
going
to
the
demos
folder
toolbar.
B
So
this
is
the
two
bar
demos,
widget
toolbar.
So
in
the
toolbar
api
you
you
can,
you
can
create
like
a.
Let
me
show
a
simple
one.
First,
oh
this
one's
good.
This
is
a
two
bar.
You
create
a
two
bar
class.
You
can
specify
the
children,
so
you
can
pass
a
bluetooth
instance
here,
it's
fine,
but
we
don't
need
to
render
this
boot
on
ahead
the
instance
or
even
instantiate
the
this
class
ahead,
and
then
you
can
specify
for
this
button
group.
So
this
array
means
this
is
a
button
group.
B
So
what
is
this
here?
I
have
the
label
type
it
button.
I'm
gonna
put
here
yy
three
just
to
sim
to
show
the
boot
in
the
browser.
When
I
go
here.
Why
why
trees
is
this
button
here
type
a
y3?
So
you
see
button
and
type
it
both
on
yy3.
They
are
grouped
inside
this
button
group
and
from
the
api
level
it's
because
on
the
children,
aha
array,
I
grouped
in
another
array.
This
is
another
button
group
here
I
have
the
icon,
camera
label
click
and
the
other
is
icon
print.
D
B
B
D
B
B
Okay
yeah,
so
basically,
what
I
was
saying
is
that
from
the
toolbar
api
you
have
the
ability
to
specify
json
object,
which
is
a
hint
that
we
can
render
the
toolbar
based
on
that.
But
how
it
does
behind
the
scenes
is:
lays
instantiate
the
information
here,
the
class
for
booth
for
you
so
juan
answering
your
question.
That's
why
we
have
this
widget
to
bar
class
augmentation.
Instead
just
use
the
widget
buttons,
because
we
want
to
inherit
all
this
ability
and
performance
benefits
in
the
implementation
of
the
toolbar.
B
B
C
B
Right
so
yeah,
so
in
general
we
have
two
bars
buttons
button
groups,
and
this
is
all
can
be
pluggable
through
any
widget,
like
I
showed
in
the
data
picker
example,
okay,
so
that
picker
was
one
one
of
the
first.
I
would
like
to
show
you,
and
just
one
more
thing
about
this-
is
that
the
date
picker
in
order
to
build
the
date
picker
more
human
friendly?
We
didn't
want
to
use
just
like
buttons,
for
example.
B
This
is
a
button
and
you
can
select
a
date,
but
this
is
not
very
human,
because
sometimes
you
want
to
input
the
date
yourself
as
a
user,
and
we
want
we
needed
to
be
able
to
place
a
date
on
a
component
like
input
element
like
input
field,
so
you
can
just
type
your
date,
for
example
87
instead
of
85
and
then
the
dates
parsed.
But
in
order
to
do
this
conversion
from
a
string
to
a
data
object,
we
didn't
have
anything
on
the
yui
core
that
was
able
to
parse
strings
to
date.
B
We
have
on
yui
right
now
on
yy
core
the
opposite.
You
can
specify
a
mask
in
the
str
format
and
this
mask
also
receives
a
data
object,
and
then
you
output,
a
string
for
the
date,
but
the
opposite
was
not
true.
We
didn't
have
any
way
to
write
a
date
in
any
mask
in
any
language
like
japanese
or
portuguese
or
english,
and
convert
this
mask
sorry.
This
is
string
to
our
data
object,
so
we
had
to
also
work
on
a
on
a
component
called.
B
Date
parser,
so
we
have
a
data
type
date
parser,
which
we
developed
integrated
with
the
yui
date
format,
so
you
can
use
both
in
combination.
So
if
you
see
the
date
format
from
yy,
so
here
is
the
yy
version,
so
on
the
oi
version
you
can
specify
on.
Second,
let
me
find
the
method
you
can
invoke.
This
method
format
specify
a
date
and
a
configuration
object
in
this
configuration
could
be
a
mask
and
then
you
can
convert
this
data
object
to
string.
B
That's
that's
pretty
useful,
but
the
opposite
was
not
true
like
expand,
so
we
had
to
do
the
opposite.
We
had
to
had
a
way
that
we
can
say
parse
and
this
parse
receives
a
pattern
which
is
a
mask
using
a
star
str
format
and
the
text,
which
is
the
string
from
my
put
element,
for
example-
and
this
should
return
me
a
date
object
so
for
that
we
need
to
implement
this
compiler
for
the
date
date
tokens
and
then
here
you
can
see.
We
have.
B
B
This
x
is
a
aggregator
for
a
different
format,
so
it
expands
the
aggregator
as
well
support
aggregators
support
everything.
It
has
and
returns
you
a
date
object,
and
this
is
very
useful
because
you
can
create
very
human,
friendly
input
fields
and
also
we
have
tests
already
unit
tests
for
everything.
B
So
we
have
a
pretty
dance
testing,
and
this
also,
this
also
works
for
many
different
languages,
and
we,
when
we
created
the
time
picker
component
time
picker.
What
is
it
here?
We
we
would
like
the
ability
to
have
more
nice
labels,
for
example,
check
this
first
one
is
like
a
2.
12
am
12
30,
and
this
is
integrated
with
the
auto
complete.
E
B
There
is
a
fallback
as
well
for
html5
input.
So
if
your
browser
supports
html5
the
same
api,
you
use
for
this
type
of
desktop
ui.
You
can
use
for
the
html5
input.
So,
for
example,
here
can
select
an
hour
like
one
I
can
put
a
30
30
pm
or
am
and
then
here's
my
callback
1
30
pm
html5-
and
this
is
nice
for
mobile-
that
picker
has
the
same
ability
the
picker.
You
can
fall
back
to
html5
and
on
mobile
you
can
you
don't
need
to
think
about
it?
B
F
B
E
B
Exactly
and
the
the
in
the
only
test
we
I
was
showing
you,
we
have
actually
a
a
test
that
is
in
in
another
language.
There
is
a
japanese
test
here
somewhere,
so
yeah.
Indeed,
we
covered
the
tests
as
well,
so
you
can
use
any
language
in
library
we
have
more
languages
available
than
in
the
yy
card,
for
example,
and
this
is
being
able
to
to
even
add
more
locales
and
it's
working
fine.
You
think
you
can
put
check
that
into
y
core
yeah.
I
I
would
love
to.
B
I
was
talking
to
juan
in
order
to
at
least
have
this
date
parse
in
the
car
yeah,
because
because
this
is
something
I've
been
talking
to
jenny
and
satya
on
the
side
for
a
few
years,
we
we
needed
that
two
years
ago
and
we
didn't
have
anything
and
then
ended
up.
We
had
to
write
this
because
we
are
improving
the
usability
of
the
live
reporter
right
now,
and
this
was
something
very
important
and
then
we
had
to
write,
but
it
was
ended
up
being
very
fun.
B
Yeah
good
to
know
so
we
can
start
the
discussions,
maybe
with
juan
or
someone
else
that
can
help
us
to
to
put
this
into
like
we
did
in
the
resizeable.
I
was
working
very
close
with
david
glass
by
then.
So
we
can.
We
can
start
the
conversation
about
it,
but
yeah.
We
would
love
to
contribute
that
to
the
car
and
remove
from
alloy.
F
D
So
as
part
of
the
the
work
on
actually
understand
some
work,
at
the
same
time
of
the
ecmascript
6
specification,
another
group
inside
ecma
started
working
on
an
internationalization
api
that
they're
standardizing.
I
think
they
finished
their
work
three
four
months
ago,
maybe
and
it's
basically
an
api
for
dealing
with
different
locales
and
it
chips
with
it'll
ship
with
with
browsers
really
soon.
D
So
the
idea
is
that
a
fairly
good
chunk
of
localization
code
can
be
done
with
native
apis
and
we're
working
on,
or
at
least
tony's
working
on
polyfilling,
this
and
including
it
into
yui
and
into
the
other
projects
that
we're
working
on.
So
if
this
is
part
of
what's
in
the
internationalization
api,
maybe
we
can
just
leverage
it.
If
not,
then
it
definitely
should
it
definitely
goes
kind
of
hand
with
it
so
yeah.
It
definitely
may.
F
Be
a
failover
type
thing
too
yeah
from
taking
a
quick
look
at.
It
looks
like
there's
additional
date,
parsing
stuff
for
iso
8601
inside
of
esx,
so
it
might
look
like
there
actually
might
be
something
that
we
can
use
there
if
it
falls
back
or
even
if
it
just
needs
a
little
bit
of
adjustment.
That's
something
that
we
can
pull
in
and
use
yeah.
B
D
A
D
B
We
probably
need
to
to
improve
some
parts
of
it,
like
maybe
use
the
same
class
names
for
for
both
date,
speaker
and
date,
picker
native,
and
make
it
transparent,
because
right
now
it
requires
a
feature
checking
to
see
which
one
you
want
to
use
in
your
code,
but
it's
something
that
we
can
probably
fix
very
easily
but
yeah.
It
does
conditional
loading
awesome.
D
B
D
D
B
Know
yeah
this
position
suggestion
we
are
using
in
many
different
elements.
The
toe
tip
is
another
example
of
it.
So
let
me
expand
this
screen.
So
two
tip
is
also
is
also
an
overlay
and
it
has
the
the
same
base
of
the
popover.
The
difference
is
that
it
doesn't
stick
in
the
the
view,
but
we
also
have
the
to
tip
delegation,
and
if
I
show
you
the
same
demo,
I
showed
it
to
you
before.
So,
for
example,
this
large
tip
is
on
the
top,
I'm
gonna
scroll.
B
B
This
model
is
being
used
everywhere
in
life
free
and
we
also
have
resize
abilities
and
modality,
so
you
can
constrain
you
can
you
can
also
do
remember
the
widget
two
bars
I
showed
before
we
can
plug
as
well
here
in
this
widget
standard
mode.
So
you
can
have
two
bars
in
the
body
in
the
header
or
in
the
bottom,
and
it's
when
you
load
it
automatically
focus
the
the
prior
primary
button.
So
you
can
just
press
enter
and
use
your
keyboard,
so
we
have
features
like
this,
and
the
source
code
is
also
simple.
E
B
So,
for
example,
as
soon
as
you
augment
your
widget
with
widget
two
bars,
you
can
use
the
constructor
to
specify
the
widget
or
you
can
use
the
add,
toolbar
method
in
this
case.
What
I'm
doing
is,
I
am
adding
a
toolbar
and
the
label
is
console
of
the
first
button.
The
other
is
okay
and
it's
a
primary
button.
B
For
example,
this
primary
button
is
something
we
augment
the
ui
button,
because
I'm
not
sure
if
why
button
have
it,
but
they
didn't
when
we
first
make
our
buttons,
so
you
had
to
add
on
our
implementation,
but
this
by
default
ads
on
the
footer,
but
you
can
specify
this
section
as
well.
If
you
want
to
specify,
if
you
want
to
add
these
two
bar
to
the
head
or
to
the
body,
you
just
need
to
pass
an
extra
argument
with
the
widget
standard
mode
class.
B
Dash
whatever
like
a
head
or
yeah,
maybe
forgot
the
name,
but
you
can
specify
this
section
here
so,
and
this
can
take
advantage
of
two
bars
and
models
together.
So
yeah
we
can
start
combining
the
the
elements.
Let
me
show
you
one
demo
that
combines
a
few
of
them
this
component,
this
this
one
is
farm
builder.
I
won't
show
the
formula,
because
this
one
is
a
good
example
of
a
lot
of
components
together.
B
So
here
we
it's
a
more
high
level
widget,
because
I
would
call
this
application,
but
we
still
handle
as
a
widget
in
the
in
the
library,
but
it
combines
tabs.
This
is
the
yy
tabs
installed
with
yy
markup
same
thing.
We
did
with
the
other
component.
We
have
this
element
here
which
we
are
con
grid
and
these
grids
we
have
these
icons
and
those
elements
are
just
a
regular
widget
standard
mode,
not
in
line.
So
when
I
click
in
one
of
those
or
when
I
use
my
keyboard
to
navigate
like
focus.
B
So
if
I
use
my
keyboard
to
navigate,
I
can
add
those
elements,
and
this
element
here
is
the
data
table.
But
it's
not
a
regular
data
table,
it's
a
data
table
that
we
extended
and
we
created
an
element
called
property
list
and
this
property
list
you
can
have
editables
for
for
the
cells,
and
you
can
also
have
options
like
this.
You
can
say.
B
E
B
Yeah
this
is
this:
is
the
overlay
as
well,
and
when
I
save
it,
my
options
are
here,
so
I
can
start
playing
with
it.
Also
I
can
order-
and
there
is
also
one
nice
feature
on
this,
which
is
the
selection.
So
when
you
select
an
element
like
this,
we
highlight
in
this
blue
box,
but
this
blue
box
is
not
it's
not
how
we
it's
not
inside
that
table,
it's
a
plugin
that
we
can
plug
to
the
data
table.
B
B
So
let
me
show
one
example,
los
angeles
if
I
inspect
here
this
this
laws.
Let
me
click
here
as
nicely
when
I
inspect
this.
It's
a
this
is
at
the
table
right,
but
in
order
to
place
this
these
boxes
here,
if
you
inspect,
I
actually
have
a
div
that
represents
my
top
and
then
I
have
the
four
axis
that
are
positioned
around
my
cell
and
why
this
is
important.
B
This
is
important
because
I
can
do
multiple
selections
like
this
and
they
and
they
in
the
api
gives
me
the
coordinates
of
the
selection
and
the
values
that
it
reads
from
the
model
list.
So
with
this,
you
can
have
very
good
performance
when
you
navigate
in
the
data
table
and
you
can
select
very
fast,
the
cells
without
compromise
the
performance
of
the
rendered
table
from
the
data
table.
Can
you
select.
B
Yeah
right
now
you
we
just
can
select
one.
On
the
other
hand,
we
can
make
the
logic
and
use
the
listeners
like
control
if
you
press,
ctrl
or
shift
or
whatever
we
can
re-render
the
same
logic,
but
this
is
not
supported
yet,
but
it's
a
good
feature
right,
so
you
can
also
say
to
select
rows
instead
of
cells
and
then,
when
you
drag
and
drop
like
this,
it
will
select
the
entire
rows.
So
this
is
another.
B
This
is
another
feature
that
we
use
inside
those
components
like
for
form
builder,
so
this
form
builder
going
back
to
this.
We
have
fields
that
we
can
register
more
fields
and
you
can
drag
and
drop
more
types
like
field
set
or
radio
button
or
textiaria,
and
you
can
also
nest
them,
so
you
can
put
one
inside
the
other
and
you
can
clone.
So
let's
say
I
wanna
clone
this
this
block
here,
so
it
clones
only
this
block.
If
I
wanna
clone
delete,
I
can
delete
the
element
if
I
wanna
clone
this
entire
block.
B
B
Yeah,
that's
a
good
question.
We
have
a
form
builder.
Has
I
think
it
yeah
formulas
here.
So
we
have
a
two
get
fields:
yeah
fields,
yeah.
We
have
these
get
fields,
and
these
get
fields
gives
you
an
array
list.
Oh,
I
see
get
fused
dot
to
json,
I
believe
yeah.
So
you
can
get
the
the
2json
of
the
fields
and
if
you
navigate
in
this
three
it's
a
tree.
I
have,
for
example,
this
form.
Is
this
one?
But
if
I
get
the
fields
of
this,
I
have
those
two.
B
A
Or
I
think
what
we
need
to
do
like
is
pinpoint
a
couple
engineers
on
the
live
freight
team
and
get
them
up
to
committer
status
yeah.
I
thought
that
was
my
team.
No
I'm
sorry.
I
think
that
that
would
be
like
one
of
the
I
think,
that'd
be
the
shortest
path
too
much.
You
know
getting
a
lot
of
things
that
you
want
back
in
the
core,
so
you
wouldn't
have
to
wait
for
full
requests
per
se.
You
know
or
someone
else
to
check
it
in.
B
It
has
some
kind
of
accessibility,
but
it's
not
very
well
tested
yet
so
we
you
can
navigate
so
I'm
gonna
do
a
demo
here.
So
I'm
using
my
keyboard
right
now,
so
you
can
probably
you
can
use
like
your
keyboard
to
to
navigate,
but
it's
not
a
very
still
very.
We
still
need
some
work
on
accessibility
on
this
yeah.
So
there
is
a
method
that
you
can
extract
the
json
here
I
can.
I
can
tweet
later
the
method
name.
Okay,
so
let
me
see
some
other
components.
We
have
this
color
picker.
D
D
D
B
B
This
is
a
small
change
that
we
can
expose
on
the
ui
api
to
be
public
and
saves
a
lot
of
code,
because
let's
say
I
have
an
attribute
called
title
and
when
you
change
title,
if
it's
not
a
ui
trs
attribute,
we
have
to
bind
a
change
event
for
the
title
title
after
change
and
also
we
have
to
on
the
initialize
on
the
render
phase
of
the
widget.
We
have
to
invoke
the
render
for
the
title
for
to
render
the
title
inside
the
widget
like
this
one
here
and
also
on
the
after
chain
listener.
B
We
have
to
invoke
again
this
manually,
so
you
have
to
bind
you
have
to
invoke
once
the
title.
Also
in
the
render
phase
you
have
to
invoke
again
and
maybe
depending
on
the
logic
you
need,
you
have
to
invoke
on
the
initializer
so
and
the
ui
ttr
api
that
you
guys
have
as
a
private
functionality
on
the
widget.
If
it's
exposed
it
can
help
a
lot
of
develops
to
develop
a
faster
widget
like
very
large
that
one
or
two
lines
of
code
is
very
important
in
the
overall
implementation.
B
B
F
Yes,
so
just
a
really
quick
question,
so
you
guys
are
using
like
bootstrap
for
the
css,
which
is
pretty
cool,
so
just
the
css.
So
one
of
the
things
that
I
was
wondering
if,
if
I
have
my
own
like
custom
like
bootstrap
skin,
like
do
you
guys,
keep
the
same
class
names
as
bootstrap.
So
I
can
just
like
switch
out
like
the
default
bootstrap
skin
with
my
custom,
skin
and
it'll
still
work
with
alloy
right.
B
If
you
do
it,
you
can
go
to
the
bootstrap
watch
website,
bootstrap
or
any
bootstrap
page.
That
has
these
themes
and
you
can
get
end
of
the
css
and
use
on
your
on
your
alloy.
So,
for
example,
this
amelia
one.
This
is
a
very
different
one.
If
I
include
the
css,
it's
gonna
work,
the
reason
we
keep
a
bootstrap
version
ourselves
like
this
is
because
we
we
decided
to
use
the
sas
version
of
bootstrap,
not
the
last
version.
That
is
much
popular,
but
they
have
an
official
fork
that
maintains
it
in
sas.
B
B
A
B
Up
to
you,
yeah,
I
think
I'm
almost
done.
I
just
want
to
show
a
few
others,
so
this
component
is
also
very
very
used
by
our
community
is
the
wrapper
we
have
for
ac
editor.
We
embedded
this
editor
here
inside
alloy
and
you
can
use
ac
editor
with
the
api
of
our
yui.
So
here's
the
code,
let
me
increase
the
line,
so
you
can
create
like
a
new
ace
editor.
You
can
bound
in
box
mode
javascript
and
valid
and
you
can
use
all
the
listeners
like
you
are
using
yy.
B
So
this
is
very
useful
because
you
don't
need
to
learn
ac,
edit
or
javascript
api.
You
don't
need
to
include
yourself.
You
inherit
the
loader
to
load
their
css,
so
this
is
used
everywhere
in
library
another.
Let
me
see
if
I
have
something
more.
We
have
like
carousels
chuck
counters
nice
image.
Cropper
is
also
one
that
I
like
a
lot.
B
This
is
used
on
if
you
want
to
crop
some
person
like
this,
you
can
crop,
and
this
is
the
resizable
from
the
core
we
have
pagination
pagination
is,
is
the
use
the
css
from
bootstrap
again,
but
we
implemented
a
an
api
ourselves
and
this
api
is
very
flexible
because
we
can
combine
different
strategies
for
our
pagination
because
we
expose
offset
so
you
can
specify
the
offset
of
your
page,
the
total
of
visible
elements
to
represent
the
pages
and
the
current
page.
So
you
have
strings
for
represent
the
next
and
prep
values.
B
B
We
have
other
things
that
are
more
low
level,
for
example,
sortable
layouts
right
this
co,
this
sortable
layout,
it's
an
extension
of
the
drag
and
drop
api,
so
you
can
say
like
sort
bully
out
and
then
you
can
specify
what
are
your
drag
nodes,
our
sections?
What
are
your
drop
nodes?
Are
my
columns,
you
can
lazy
start
or
it
means
that
you
can
lase.
You
use
like
a
drag
delegation
or
just
instant
sheet
right
away.
B
You
can
use
your
prox
node
and
you
have
a
lot
of
listeners
like
placeholder
align
quadrant
over
quadrant
enter
quadrant
exit.
So
basically,
with
this
api,
you
are
able
to
create,
drag
and
drop
interfaces
for
your
portal,
so
I
can
drag
and
I
can
listen
if
I'm
dragging
to
a
quadrant
or
to
another
column
and
the
the
placeholder
is
positioned
based
on
the
best
match
for
the
fitting.
B
B
We
have
multiple
views
so,
for
example,
you
can
create
elements
here.
You
can
have
intersections
of
events
like
this
and
it
finds
the
best
fit
for
you
always
see
the
information
of
the
event,
so
you
can
also
navigate
different
days
like
this
or
switch
views.
So
if
I
click
here
under
a
header
15
or
in
day,
I
can
go
to
the
day
view.
B
So,
in
the
day
view
very
awesome,
it's
inherits
from
the
same
view
from
the
week.
The
difference
is
that
the
weekly
view
is
imperative
iterative
and
it
looks
the
amount
of
days
you
want,
but
it's
the
same
engine
behind
the
same
implementation,
and
you
can
also
go
to
the
mass
view.
Oh
there
is
another
nice
thing
so
this
on
the
header.
Here
you
have
a
different
view,
which
has
abilities
to
create
events.
All
the
events
like
this
and
this
view
is
the
same
view
we
also
use
in
the
month.
B
B
B
E
B
Okay,
so
can
delete.
You
can
change
the
title
like
this
right,
so
we
we
can
have
different
colors
and
you
can
also
support
multiple
calendars
inside
your
your
implementation.
So
when
you
see
the
source
code
for
this,
scheduler
is
very
small.
The
usage
you
just
need
to
specify
the
array
of
items
which
is
a
model
list
and
you
have
specified
the
bounty
box,
the
items
and
you
can
plug
views
you
want.
B
So
you
can
just
extend
the
base
view
and
create
your
own
view,
so
you
have
week
view
day
view
month,
view
and
agenda
view,
and
you
can
also
plug
the
avent
recorder.
This
seventh
recorder
is
this:
is
this
balloon?
It's
it's
just
a
pop
over
which,
when
you
click
on
the
buttons,
it
injects
a
new
element
in
the
model.
So
it's
a
very
simple
implementation
for
the
event
recorder.
You
can
implement
you
on
your
own
event.
Recorder.
You
can
specify
first
day
of
week
you
can
specify
the
active
view
and
you
can
also
listener.
B
B
B
In
the
scheduler
event,
we
have
a
lot
of
information,
such
as
like
title.
You
can
specify
title
description,
start
date
and
date.
You
can
specify
the
format
for
the
dates.
So
here
in
the
week
view
I
have
1
to
4
30
the
title,
but
if
I
go
to
day
view
or,
for
example,
month
view
which
is
display
different,
we
have
a
more
short
way
to
display
the
hours
of
the
title.
This
is
the
same
element,
it's
just
styled
differently,
so
we
can
change
the
format
like
this.
B
We
have
much
more
information
that
it's
available
in
the
api
docs
this
one,
the
last
one
just
to
to
finish.
I
want
to
call
with
this.
One
is
the
diagram
builder.
This
one
is
is
used
on
liferay
to
generate
flows
for
your
process,
your
business
process-
and
this
is
diy
graphics,
api
with
some
addition
we
made,
for
example,
to
render
those
arrows.
We
had
to
implement
some
some
extra
classes
to
handle
the
math
for
bezier,
and
you
can
have
these
nodes.
B
You
can
drag
and
drop
like
this
and
create
a
new
node
or
you
can
register
more
information
register.
The
icon
for
this-
and
this
is
how
html5
with
in
this
case
we
are
using
the
y
api
behind
to
render
our
graphics
it's
vml
right
now,
oh,
not
pml!
It's
svg!
If
you
go
to
ie,
it
goes
to
vml.
The
oda
is,
if
you
don't
have
it,
renders
in
canvas.
B
So
it's
very
powerful
because
behind
we
are
using
the
wy
graphql
api
yeah,
so
I
think
that's
pretty
much
what
we
have
been
doing
guys
in
this
past
release
and
we
are
want
to
invest
a
lot
right
now
in
websites
and
documentation
for
our
users.
So
this
week
we
have
a
lot
of
people
working
on
the
documentation
for
the
version
2,
which
will
release
the
past
week
before
yy
conf
and
keep
done
it
because
we
are
going
to
update
the
api
docs
and
the
documentations
in
the
website.
F
So
yeah
as
someone
that's
using
yui
as
a
yui
developer
like-
and
I
want
to
like
start
using
like
a
bunch
of
these
alloy
ui
widgets
like
what's
the
best
way
to
go
for
that,
would
it
be
like?
Is
there
a
way
that
I
can
combine
them
both
together
or
should
I
just
you
so
does
the
alloy
ui
cdn
also
have
all
the
modules
that
the
yui
cdn
does.
B
Yeah,
so
that
I
can
answer
this,
showing
the
what
we
do
right
now
for
our
build
process.
So
in
alloy,
when
you
download
alloy
repo,
the
source
folder
only
contains
alloy
models,
aoi
with
the
prefixes
a
y.
So
what
happen
is
we
have
this
alloy
json
file,
which
maps
metadata
for
our
project?
So,
for
example,
for
yy
version?
B
We
are
using
the
311
version
right,
but
we
we
always
download
the
version
from
our
fork
because
sometimes
happens
for
us
to
have
to
patch
some
bug
fix
before
yyyy
team
is
able
to
to
merge
into
the
master
of
your
project.
So
we
have
two
patch,
but
this
is
the
3.11
version.
So
what
what
happens
here
is
when
we
initialize
the
project
alloy
and
it's
very
simple-
you
just
need
to
from
your
command
line-
run.
Grant
you
need.
B
So
if
you
run
granting
it,
it's
gonna
download
all
these
dependencies
for
you
and
will
build
your
build
folder.
So
when
I
it
builds
the
build
folder,
it
has
all
the
components
from
yui
3.11
here.
So
it's
the
same
thing
of
you,
download,
yui
and
use
your
yourself
because
we
actually
are
grabbing
the
fresh
y
version
from
your
repo.
You
can
even
change
this
yy
to
be
yy
here
and
then
change
this
to
be
v311
and
that's
it.
B
We
are
going
to
use
the
pyy
version
instead
of
our
fork,
so
we
don't
do
anything
hooking
y
y
or
changing
y
behavior,
how
the
aoi
dot
mean
file
does
because,
if
you
see
in
the
website,
we
recommend
people
to
include
the
aoi
min.js
how
this
file
it
does.
I
can
even
show
you
this
is
very
simple:
it
just
concatenates
the
yy.js
with
with
these
aliases
from
alloy,
and
also
these
models
from
alloy.
That's
how
it
does
we
don't
have
any
information.
That
is
not
welcome
on
your
project.
B
Exactly
we're
not
augmenting
any
source
code,
just
adding
stuff
and
if
you
don't
load
anywhere
any
model
that
starts
with
a
y.
Your
yy
is
just
the
same
version
you
use
from
ioi
directly.
If
you
do
this,
if
you
don't
use
a
ui
button,
your
button
is
going
to
look
like
your
old
buttons.
If
you
say
ay
button,
it's
gonna
style,
like
alloy
buttons
in
this
sandy
box,
so
you
can
even
have
mixed
alloy
buttons
with
yy
boots
in
different
sandboxes
when
they're
in
the
same
page,
and
they
will
not
hurt
each
other.
D
A
That's
that's
amazing.
Yeah,
like
I
said,
I
think
that
that
one
of
the
next
steps
you
should
do
is
target
one
of
your
developers
and
just
get
them.
You
know
work
on
whatever
it
takes
to
get
them
commit
access
and
so
that
you
can
move
forward
like
if
there's
a
patch
that
you
want
to
get
in,
you
won't
have
to
wait,
for
you
know
a
third
party
to
do
that.
You'll
just
be
able
to
go
for
the
right
process.
B
Yeah,
that's
that's
really
awesome.
I
I
need
to
to
learn
the
new
process.
The
last
time
I
I
committed
to
the
core
was
like
few
months
ago
when
we
did
the
results,
but
I
can
update
or
get
those
up
to
date
with
juan
or
some
other
diy
chamber
team
that
can
teach
us
but
yeah.
Thank
you
very
much
for
the
opportunity,
guys
and
yeah.
Let
us
know
because
we
are,
we
are
really
willing
to
contribute
as
much
as
possible
to
the
community.
A
F
A
B
Yeah,
so
this
this
year
is
it
was
like
every
year.
It
was
very
good.
When
I
got
back
from
diy
conf,
I
realized
that
I
actually
went
to
the
all
the
5y
comps
you
guys
had
because
the
first
one
was
in
2009
and
the
last
one
was
this
year,
so
it
was
5y
conferences
and
all
of
them
were
amazing,
the
qualities
this
year.
I
liked
it
a
lot
the
quality
of
the
talks,
because
they
were
also
talking
about
other
topics
besides,
why?
Why
so?
B
For
example,
the
complexity
analysis
for
javascript
that
aria
talked
was
very
interesting,
and
things
like
that.
That
brings
other
information
not
only
related
to
ioi
api.
So
this
is
this
is
becomes
a
a
better
conference
in
terms
of
learning
other
stuff
and
having
fun
which
meeting
diy
team
and
everything.
So
we
really
enjoyed
it.
It's
cool.
I
missed.
D
D
So
it
was
kind
of
a
shame
that
he
didn't
going
to
death
about
their
for,
for
instance,
their
their
review
process
for
their
apps
and
and
all
the
the
typical
criticism
that
firefox
os
gets
for
being
so
open
because
you
know
anyone
can
start
any
app.
So
it's
kind
of
like
the
opposite
of
the
apple
store
of
the
apple
app
store.
Well,
they've
got
killer.
F
Yeah,
so
what
was
your
opinion
of
wow
yeah,
like
like
guadalupe
said,
like
arya's
talk
was
like
amazing.
I
also
really
liked,
like
I
felt
like
there
was
a
lot
of
like
variety
like
this
was
my
first
like
white
icon.
By
far
like
there's,
like
a
lot
of
like
different
topics
like
testing
using
it
on
mobile
like
and
especially
like
eric's
talk,
I'm
sure
that
was
pretty
popular
too,
like
talking
about
like
yui
and
all
like
the
direction
that
we're
heading
towards
with
web
components
and
all
that
did
any.
A
D
D
A
F
A
A
A
B
A
A
We've
done
most
recently
we'll
be
cutting
a
short-lived
release
branch
and
be
starting
to
do
testing
browser
testing
on
that
release
branch
and
then
the
commit
freeze,
pull
request,
deadline
for
that
is
november
20th,
then
the
final
commit
freeze
for
that
will
be
22nd,
and
then
we
should
have
stable
release
out
by
the
25th,
see
how
that
goes
all
right.
So
thanks
everybody
for
coming
and
we'll
see
you
next
week.