Google I/O 2011: GWT + HTML5: A web developers dream!

Google I/O 2011: GWT + HTML5: A web developers dream!

JOHN LABANCA: All right. Well welcome to the GWT, Google
Web Toolkit, and HTML5 session here at Google I/O. Ought to be a fun time. What we’re going to talk about
today is we’re going to talk about how do you use
HTML5 in GWT. So we’re not going to have a
lot of flashy demos, but we are going to have a lot
of practical examples. I’m going to start off by taking
you through an overview of what is HTML5, a very
brief overview. And then we’re going to
get right into it. We’re going to talk about how
do you use local storage. And we’re going to focus on
local storage for performance. Then we’re going to talk about
Canvas and focusing on visualization. So no video games, but
some practical stuff. We’ll talk about using audio and
video in your application. How you can enhance your
app doing that. And then we’re going to talk
about drag and drop support, which is pretty cool. Finally all the stuff we’re
going to talk about here, with their HTML5 features, they’re
not available in legacy browsers, so we’ll talk about
how to handle that. And then finally I’ll make some
comments about CSS3, and how we’re using that in GWT. So some housekeeping. If you’re using Twitter,
if you’re tweeting, here’s the tags. I don’t tweet. I’m not really sure
what these mean. But if they make sense to you,
they make sense to you. Here’s the link for feedback
with the URL. I’ll leave this up
for a second. I think it’s only available
after the fact. And I would like to point out
that the top link is for positive feedback. I’m glad you’re laughing. This is as good as
it gets guys. So an overview. First of all, I’m
John Labanca. If you’re active on our forums,
when I’m not busy, you’ll see me replying
to some email threads and stuff like that. I’ve been at Google for five
years on the GWT team. And so that’s kind
of a long time. And it’s long enough to see
a huge transition in the way we do things. When I started it was all about
trying to get things to work on all different
browsers. And that usually led to a least common denominator approach. So basically we were the– well, we made it work. We’ll leave it at that. Now with HTML5, that’s not such
a big problem anymore. Things generally work
pretty consistently. Now it’s about trying to
maximize using HTML5 to its full potential. So what are you going
to expect? Like I said, lots of demos,
practical examples of how to use this stuff and lots
of code examples. So by the end of this, you
should know how to go out and add some of these HTML5 features
to your GWT app. So what is HTML5? You may have seen slides
like this 1000 times. It’s basically these media-rich
DOM elements, audio video, stuff like that, a
lot of useful new APIs. And we’re going to talk
about some of those. And we bundle CSS3 into
the HTML5 theme. So support is increasing
very rapidly. Even though some legacy browsers
don’t support HTML5 features, the number of people
on those legacy browsers is rapidly declining. And if you use HTML5, you can
have one of these sexy apps that really stand out
in the crowd. Local storage. We’re going to talk
about that. Now local storage. You’ll see every time we switch
topics, I have the columns on the right,
which are not icons for trademark reasons. But so they are these
ugly text. But supported on all browsers
including IE8. So this is pretty widely
supported. And the first question I asked
when I started looking into this is why not just
use cookies. And as it turns out, there’s
a very good reason. Cookies are part of the HTTP
protocol, not part of the client protocol. And so every single cookie is
sent with every single request to the server or almost every
request. As you can see here as we’re sending RPC requests,
we have a list of tasks, a list of data we want to save.
And it’s going to the server every single time. And in a bandwidth-constrained
environment, let’s say a mobile device, that’s probably
not what you want. So local storage, on the
other hand, gives you much more data. And it’s shared between
browser window. It’s designed to be able to save
in one browser window and load it in another. So how do you do it in
Google Web Toolkit? Pretty straightforward. If you want to save an item,
you get the local storage implementation that you
want to use, you check if it’s null– I’ll get to that
in one second– and you just set a string value
pair, a key value pair of strings. We’ll get into more
later about what partial support means. But in general you’ll see that
because storage is not supported on all browsers, you
have to actually check if it’s null before you use it. Getting an item. The same thing. Get storage. You pass the key. You get the value out. OK. So key value pairs of strings. That kind of sounds
like a string map. And as it turns out GWT does
provide a storage map implementation, which
of a Java util map. And it’s very useful if you’re
used to that interface. What’s cool about this is that
the code was contributed by somebody named Bart Guijt. Sorry. Who up until Monday, when I
actually met him, I pronounced it Bart Gwit because that just
sounded better for our team. But so our external community
is very active. And a lot of our contributions,
a lot of the things that are in GWT started
from the external community. So if you have something that
you think is useful, and you can genericize it, set up
a code site project, or send it to us. And we’re happy to incorporate
it into GWT. How do we use local storage? The way we’re going to use it in
this example is to improve performance. If you think about your
traditional app, you’re Google Web Toolkit app, you
load your app. You load the UI frame. And then in step two, you send
a RPC request for the data to populate it. Wait for that to come back. And then push the data
into the view. That RPC request could
be kind of heavy. It could take a while. If we use local storage though,
we can create our GWT app and immediately go to local
storage for some cache data to show on the page. Now of course that data is
going to be a little bit stale, but depending on how
your app is designed that might be OK especially if the
data is specific to the current user. We then pushed local data to the
view and then send our RP request basically at
the same time. And we update the data
once it’s available. So a demo. So here we have the cloud task
ultra awesome with CSS3 rounded transition
stuff GWT app. And what I’m going to do, I’m
going to refresh the app. And if you notice, my
task takes a half a second to come in. But that’s not good
enough for me. What I want to do, now I have
storage turned on, I’m going to refresh, and the apps
are there immediately. What’s happening is we’re
loading the task from local storage, and then the reason
it keeps spinning, we are sending the RPC request. So you
immediately see the task. It’s instantaneous. And then eventually the RPC
comes back, and we just repopulate the list
with any updates. I don’t have a demo for this,
but obviously local storage is also useful for improving
the user experience. So if you think about what gmail
does and a lot of other apps, as you’re typing stuff
in, it saves to the server. Well if you lose your network
connection that doesn’t help you. So you can also save
to local storage. And that way if a user– if their computer dies, you
can come back to it. So now we’ve seen performance. What about just making things
look better using Canvas? I’m going to focus entirely on
visualizations here because that’s the type of app were
targeting is these business logic apps. OK. This slide is boring as denoted
by the bullet point. And the key here that when you
look at this table, you don’t know what’s important. It seems like a task with no due
date is the most important thing because it has
a six next to it. But if we switch that out with
a canvas, a very simple visualization, we can see that a
large portion of our data is red, which probably means
that it’s bad. And that no due date
actually turns out that it’s greyed out. It probably doesn’t matter. So visualization can really
bring out data. And now we’re going
to do a demo. OK. Watch this. Ready? It’s going to happen fast.
No visualization. Visualization. All right? What we did here is we used
up space that was unused. And in doing so, we added
kind of a lot of data. This list on its own means
nothing, but this means a lot. So let’s say I want
to call my Mom. And I say, you know what. I’m going to edit that, and I’m
going to push the due date out later because I don’t
call her enough. And I click done. And well there’s a lot of tasks,
but it did update. Oh, there it goes. So it updated. It updated after it
re-requested the task from the server. OK. So now we canvas. So how do we actually
use a canvas in GWT? I had never used
Canvas before. It took me about an hour
to create that chart. I’m not saying that it’s super
cool, but if you want to create a custom chart,
don’t be afraid. It’s very easy to
do with Canvas. Having done it once, I think I
could probably do it again in 20 minutes. And so what I’m going to walk
you through, we’re basically going to create this– if you have a half pie chart’s
worth of data, you’ll want to pay close attention
to these slides. There’s basically four
steps to a canvas. You initialize the canvas. You calculate the values
for the new shape. Clear the current canvas
if you need to. And then you draw
the new shape. So here’s the code. The first thing we’re going to
do is we are going to create a Canvas widget. And we’re going to set two
things, the coordinate space and the pixel size. If you haven’t heard this
already– some other talks mentioned it, but it
is important– you draw to a virtual, if you
will, coordinate space, and then the DOM or the pixel size
is what you actually see. The browser scales the canvas
up to that size. The reason that is really
important is if your canvas resizes with the window, you
don’t want to redraw it every single time. Let the browser figure
that out. So we calculate our positions
and stuff like that. We do that based on the
coordinates space. Here we’re getting the radius
and the center coordinate. We clear the canvas. Pretty straightforward. And then finally we draw
that half arc. And this code, you can read
through it and sort of see what it’s doing. It’s drawing an arc, and
it’s filling it. But this stuff doesn’t
necessarily need to make sense to you in this context because
if you want to draw any shape, you can basically use– you can see the name
is down there. It’s called Google. You can just search for any
shape you want to draw on Canvas, and you’ll find a
code snippet to draw it. So this is a semi-circle. It’s probably the wrong way
to do it because I’m not a Canvas expert. But you can go online and find
more patterns to follow. So getting back to the
coordinate space. What does it really mean? At the bottom of this screen,
you can see what happens if we draw into a 300×300 DOM. That’s the size of the
canvas in our demo. You can see what happens if we
use a 300×300 coordinate space versus 30×30. Obviously the higher coordinate
space is better. But it comes at a cost. A large coordinate space is
going to be higher quality, but it’s slower to render. So if you only have one
visualization in your app, go ahead and use a large
coordinate space. But if you have a lot of them,
or you’re refreshing them rapidly, you’re going to want to
match the coordinate space to the DOM size. And you can do that in
one of two ways. You can set the DOM size. That’s what we did
in the demo. We set it to 300 pixels. Or you can catch resize events,
such as Window resize events, and adjust the
DOM size accordingly. Now into more fun stuff. Audio, I think, is one
of the least utilized parts of the web. One of the least utilized
senses on the web. And the new HTML5 audio widget
or element allows you to embed audio. And you have to think of it
as really two things. It is a widget or an element. And it’s also an API
for playing audio. You can call, play, pause,
stuff like that. It’s designed primarily
for use– I should say, it was primarily
thought of as a way to stream music, but in this example I’m
going to show you how to just play a simple sound bite
in an application. So here’s the demo. So let’s say I want to
create a new task. And I come here. And I say, call Dad because
I don’t call him often enough either. I set a due date, and
then I click done. And did you all here that? Neither did I. [SOUND OF SAD TROMBONE] JOHN LABANCA: Oh there we go. OK. I will point out that
the delay was not because of the HTML5. It’s because it took that long
for the request to go to the server and come back because
they gave all of you guys network connected devices. But why sound bites? Well I think that there
is a market. There are a lot of people
who use streaming audio. And I certainly think there’s
a lot of use for that. But I also think that adding
sound to your app can really enhance your app. I think it’s totally
underutilized. And if you think about just the
ability to alert somebody when they app isn’t
in the focus– the way like chat and stuff like
that work– that’s just an awesome thing to add
to your application. So audio. As you can see here, browser
vendors sort of disagree on which is the best format. And so you can choose– you must
choose at least two of the three main formats. Which you choose is entirely
up to you. But choose. In HTML this is how we create
an audio element. Basically the spec understands
that the browser vendors are still discussing this. And so there is a way to specify
multiple source files, and the browser will choose
the best one. But here’s something that’s
really important. The type. You have to specify the type,
or the browser will download all of the source files. And the reason for that is you
can’t necessarily infer the type from the file name. The file name could be something
like file?ID=8210. And so specify the type. It will allow the browser to
make a smarter decision. So in GWT we create
our audio widget. It is a widget. You can attach it to the page. And we add three
sources to it. And you can see we’re
using the– we’ve static typed the types. We add our three sources. Optionally you can
set controls. Actually I can catch up. You can set controls and
return the audio. Very straightforward. Very easy to do. Now with that sound clip even
though it took a delay for the RPC request to come back, you’ll
have to take my word for it that as soon as we knew
we wanted to play the sound, we were able to play
the sound. I’m sorry. I’m getting ahead of myself. So I showed you on this slide
how to let the browser download files for you
and figure out which files to download. The problem is not all browsers
are super intelligent about how they do this. They may download all the
files anyway, which is probably OK for a small
sound clip. But if you have a large sound
clip or a very large file, you want to be very sure that you
only download one file. So you can manually
choose which file you want to download. And to do that you ask
the browser, can you play this type. And it responds, probably,
maybe or empty string. As you might expect. And so here’s what we can do. We can replace that part in
the center, the ad source, with a bunch of if-else
statements. Where first we take all
our files that we– our types and say, can
you play this. And if the browser says,
probably, we probably want to use that file. If nothing says probably, we go
through again and say, can you maybe play this type. And then if you maybe can play
this type, then we play it. We don’t need to check the nos
because you don’t need to. I will say that in practice the
browser seems to return maybe if they can
play it or no. I have yet to see the browser
return probably. So keep that in mind. Don’t skip our on the maybes. Now this is go back to what
I was trying to say, and I skipped ahead. Our sound file played
immediately after our RPC call came back and said that there
was a validation error. So we can preload. Now we can let the browser
decide when to preload, the set preload. But the only arguments
are auto and no. And so this could be useful
if this is what you want. I believe the browser might
preload when you actually attach the audio to the page. But if you want to guarantee
that you preload the file, use audio.load. What we did in the demo is when
the user went to the edit view, we call audio.load to make
sure we’ve got that file. And then when the violation
error comes back, then we just play it. We talk about audio. What about video? Oh look. Can you guys see that? All right. Well let’s pretend it’s some
dark, shadowy figure. So you get embed video. There’s not a whole
lot to say here. It’s basically the same as
audio except with video. And I do have a demo
of that as well. Let’s say I’m using
my application– and I’ll preface this by
saying there are a lot of uses for video. I’m not going to
get into them. But the one I like is video
tutorials because I see that a lot with Google Applications. And it seems to work. It’s a lot better than
just reading through a bunch of text. So here let’s say I don’t
know how to add a task. So I’m going to click on
Tech support. This is John. Oh. You again. JOHN LABANCA: Hey John. I’m here at Google I/O. And I’m trying to create
a task, but I’m not sure how to do it. VIDEO JOHN LABANCA: Seriously? JOHN LABANCA: Yeah. Do you think you can
help me out? VIDEO JOHN LABANCA: Did
you try clicking the button in the menu? JOHN LABANCA: Which menu? Which button? VIDEO JOHN LABANCA: The
one in the menu. JOHN LABANCA: This menu? VIDEO JOHN LABANCA:
The other menu. On the left. JOHN LABANCA: Your
left or my left? VIDEO JOHN LABANCA:
Right there. That way. JOHN LABANCA: Oh OK. But there’s two buttons. VIDEO JOHN LABANCA: Seriously? You want to add a task. Right? JOHN LABANCA: Yeah. That’s right. VIDEO JOHN LABANCA: So
maybe the button that says, add task. JOHN LABANCA: Oh yeah. That works. Thanks I appreciate it. VIDEO JOHN LABANCA: Is
there anything else I can help you with? No? Good. [END OF VIDEO PLAYBACK] JOHN LABANCA: OK So– [APPLAUSE] JOHN LABANCA: I wouldn’t
necessarily do that in your own company. That may not be the most
effective use of your time, but at Google that kind
of stuff flies. I recorded that off my laptop. So it’s very easy to
record videos. Except, it’s not always easy to
know which encoding to use. So like like audio there’s a
little bit of a disagreement. They’re still talking
about this– about which files you can
play on which browser. And so in this case you can
choose any two as long as one of them is MP4 because Internet
Explorer and Safari currently only support MP4. Safari will play anything that
QuickTime will play, but if you don’t choose MP4, you’re
kind of taking your chances. Everything else about video
is the same as audio. Create if supported. We add our files. You can do the same trick
to choose a file manually if you want. And we set controls and
return the video. So pretty straightforward. Now let’s get into
some cool stuff. Drag and drop. Drag and drop is obviously
a newer HTML library. Very powerful. It is supported in most
browsers, but it is currently not supported in Opera. So keep that in mind if
you want to have a fallback for Opera. And here’s how it
basically works. Again we have our task list.
We click on something. And we go to drag it. And there’s a couple key
features you’ll note here. One is the thing we’re dragging,
we can actually make that or anything else appear
beneath the cursor. And it’s very easy to do that. The other thing is so
what does it really mean to drag something. You’re going to click, and
you’re going to do a drag sequence, and then you’re going
to drop somewhere else. So you have draggable things. You have drop targets. And you have all the
events in between. And there’s tons of events. There’s drag start, drag end,
drag move, drag enter, drag leave. And that means that you
have tons of control over how you adjust your UI and things
like that to show the user what they’re actually doing. And one key point is that when
we drag, we can save data that is persistent throughout the
entire drag sequence. But what you really probably
want to save is some unique ID. Don’t create a huge JSON object
and associate it with this drag sequence. Just set an ID. And on the drop, you
can get that ID. And then you can get whatever
data you need. Oh, and a demo. All right. Now I know how to
create a task. Once again I’m going to click on
something and drag it over and drop it. Pretty straightforward. OK. Wow. OK. So the first thing we need to do
when we’re dragging is make something draggable. And in order to make something
draggable, we have to do a few things. We have to do all the things. They’re not optional. First we have to set the
draggable attribute to true. On some elements, that’s
already set. But if you want to say drag a
div element, you have to set its draggable attribute
to true. You must add a drag start
handler, or the browser will not know that the thing you’re dragging is actually draggable. Sort of weird, but
it’s important. And then in Firefox, you
have to set data. So make sure that you– and you will always want to. There’s really no point
in not setting data. But you do have to set
data or else the thing will not be draggable. So let’s walk through
a simple example. Here we have our label. A label in GWT is a widget. It just shows text. It’s just a div. And because it’s not natively
draggable, you have to call a set draggable on that element. And as you can see here, it’s
not part of the widget API. So just if you’re not familiar
with it, you can go down to the element level, the div
itself, and call this set draggable attribute. Then we add our drag
start handler. Pretty straightforward. We have a method to add
a drag handler. And the first thing we need
to do is we set data. Now here this takes
two arguments. The first one is a string, which
is like the key, but pretty much always
had to be text. Apparently you can set some
other ones, but if you go to creative and say, my ID,
Internet Explorer will croak. So just say text. And then in that text you
can put a string. Here we put Hello World. What you probably want to
do is put a unique ID. And that data, that refers to
the transfer data object. That’s going to be persistent
throughout the drag and drop sequence. This is cool. So this is optional. You can set what appears
behind the cursor while you’re dragging. And you can also specify its
offset, whether you want it to be in the middle or not. And what we did here is we
actually passed an element. The browser will take
effectively a screen shot of that element at that time. And that’s the image it uses. If you specify an image element,
it will just download the image from the server. So now we can drag something
around our screen. Now we need a DL. We need a place to drop it. DZ. To do that we need
to do two things. We need to add a drag
over handler. We don’t actually need to use
it, but we do need to add it. And we also need to add a drop
handler to actually say that we can drop on this target. So drag over handler. You can see what we’re
doing here. We’re changing the
background color. You can see in the
demo the input is change background color. You have to add this. You don’t even have to actually
change anything, but all browsers seem
to require this. And then we add our
drop handler. You probably want to prevent
the default. And here’s what happens
if you don’t. On most browsers it
will be fine. But if the user selects text and
drags the text along with the draggable thing and then
releases it inside of a input element, what will end up
happening is you’ll get the drop event, do whatever you
plan to do, and then additionally it will copy and
paste the text as part of the browser’s normal handling
of that. So you probably want to prevent default on these events. And then the last thing we
do, which is the sort of culmination of this drag and
drop sequence, is we’re going to get our data out of
the data transfer object, out of the event. And that data is the same data
that we sat in our drag start. Now not all GWT widgets
support the– has drag handlers and
stuff like that. So this trick is something that
you can do for any DOM event, which includes click,
mouse, mouse events, click events, keyboard events,
all the native stuff. You can add a DOM handler. You call it widget.addDomHandler
and add that handler. And it basically takes
one extra argument. It take the event type, and as
you can see here, it’s just a static getter. We walked through a few
different HTML5 libraries and features, and how do
you them in GWT. Now we’re going to talk about
how do you handle browsers that don’t support
these features. Unlike most GWT APIs up until
this point, we used to take a least common denominator
approach, which basically means we would make it
work consistently– theoretically– consistently across
all browsers. With these new HTML5 libraries
doing that, in many cases, would be impossible or
very, very difficult and a waste of time. So what we’ve done instead is
we’ve created the APIs and let you check if they’re
supported. And all these libraries have
two static methods. Is supported and some variation of create if supported. And so using those
you can check– one returns a bullion, and one
returns the object or null. You can fall back to one
of these three recipes. Do nothing. Disable the feature. Or fall back to another
implementation like Flash. Or suggest that the user upgrade
to a newer browser. Or just tell them to
upgrade to Chrome. So here we’ve created
our canvas. We check if our canvas
is null. And if it is null, we’re
going to create an image out of the data. So we’re assuming here that
there is some image, URL API, which would allow us to create
an image URL out of the data. What if we want to disable
the feature? Well then we set
canvas to null. And we return– I hope everyone understands
this code. It’s pretty straightforward. More of a design decision
than anything else. And finally the upgrade
to a newer browser slash Chrome is awesome. The last thing I want to
talk about is CSS3. I only have one slide on this. But it’s something to note. Up until this point
GWT has used a– similar to all the APIs– we’ve used a minimal
set of CSS. And something that would be–
we could make it look identical across all browsers. We sent out a survey to some GWT
users and asked them if we should use HTML5 in our latest
theme to clean GWT theme. And it was almost unanimous. Everyone said use HTML5 in
browsers that support it and just have the other browsers
fall back to something else. So here you can see where we
used to have just a button, we now have buttons with
rounded corners. But in older, legacy browsers,
those corners will be squared off. In going forward, we’re going
to leverage CSS3 even more. We’ll use transitions. We’ll use the new features. And so we’ll make sure that
they’re usable in all the older browsers we support
all the way back IE6. But we’ll definitely leverage
CSS3 where possible. So a recap. We talked about local storage,
and how you can use it to improve performance. Then we talked about using
Canvas to create visualizations in GWT. We talked about audio
and video. I showed you an example
of drag and drop. And there are some gotchas that
you need to be aware of. And then we did a brief overview
on how CSS3 is going to be used in GWT. And of course you have
to check for support. So if you have any positive
feedback– and really, negative feedback
is OK too, but I won’t read it– just go to this link
at the bottom. And if you want to try GWT,
you can download GWT– the reason I pause every
time I say GWT is because we call it gwit. And I was told not to do that. So I have to think about it. Download GWT, but really gwit,
from our homepage. One thing to note is that
GWT 2.4 just went into beta this week. But many of the things I
talked about here were introduced in GWT 2.4. And the reason for that is
because we thought a lot of it was done in 2.3. And then we built this demo and
realized there were a lot of features to add. So if you want to try some
of this stuff out, go download GWT 2.4. It should be very compatible
with 2.3. And try out the code snippets
from this presentation. I will mention that if you stay
in this room for another apparently 30 minutes– I talk kind of fast– if you stay in this room, the
next presentation in this room is high performance GWT, where
David Chandler is going to talk about some really cool
optimizations, really obscure things that can have a
significant impact on your application. And I will be talking– I’ll have a short snippet
on cell tables so you’ll definitely want to
stay for that. And that’s it. This presentation went
kind of quick. The timer is only
at 28 minutes. But if you guys have any
questions, please feel free to ask. [APPLAUSE] JOHN LABANCA: Go ahead. [INAUDIBLE] JOHN LABANCA: Geolocation? [INAUDIBLE] JOHN LABANCA: OK. So the question was what about
geolocation for HTML5. And so far these are the only
HTML5 libraries that we’ve added to GWT. But we do plan on to continue
add more in the future. Like always– [INAUDIBLE] JOHN LABANCA: The follow-up
question is what about a road map. The answer is we generally
don’t put out a road map because we’d go off road
every two months. And if you’ve ever talked to us,
you can see that we have a lot of plans, and then
like three months later we switch around. The reason for that is we have
to stay pretty dynamic. Our things that we’re working
on change rapidly. But hopefully we’ll be able
to get those things in. We’ll continuously add some
of these APIs and stuff. Yes. [INAUDIBLE] JOHN LABANCA: Say it again. [INAUDIBLE] JOHN LABANCA: Oh,
can you guys– I’ll repeat your question. But if you have any more
questions, stand at the mic so that they can get it on the
audio and the video system. But the question is when will
GWT support Web GL. And the answer to that
is again same thing. We’re working on these things. I wish I had a better answer. But we’re working on them. The thing with Web GL and like
web sockets and stuff is we don’t want to introduce APIs
too, too early before they’re sort of at least usable across
the main browsers. So we’re not in a huge
rush to add Web GL. Go ahead. Hi. When will you support drag
and drop for cell table? JOHN LABANCA: OK. So The drag and drop example
in here was actually a cell list. OK. JOHN LABANCA: So there
is a way to do it. Basically the cell itself can
say, I want to handle the drag start event, and it
will be draggable. For cell table it’s a
little different. And so I will work on that
maybe in Q3 just as a proof of concept. But I did try that first. And I
got it to the point you can play around with it, the cell
can take drag start events. And because you can associate
with an ID, I was able to get it to the point where you could
drag it into like a spreadsheet and drop it into the
spreadsheet, and it would copy it over. The problem is that doesn’t seem
to work on all browsers. It seems some browsers I think
their security model sandboxes you from doing that. And so it’s something that we’ll
be playing around with for a while. If it’s all internal to the
same cell table, we could probably figure out
a way to do it. Is that true? JOHN LABANCA: Yeah, yeah. The cells can sync for
a drive start event. Just [INTERPOSING VOICES] handlers, and it
should be fine. JOHN LABANCA: Yep. General question
about geometry. I haven’t used GWT. I have used Java. Does it support affine
transform, general 2D rotation scaling, that type of class. JOHN LABANCA: In CSS3? GWT compiles Java into Java
script, so I’m wondering what coverage it is has for, for
example, the affine transformation class. That’s 2D rotation, scaling,
skewing, et cetera, arbitrary two-dimensional raster
transformations. JOHN LABANCA: I’m not familiar–
is this the Web GL, or is this the CSS? I’m not familiar with
it I guess. It’s CSS? Anything you can do in CSS,
you can do in GWT. I mean you still have
CSS files in GWT. So you can do transformations. You can do rotations of divs
and stuff like that. So yeah I mean you can do
all that stuff in GWT. We don’t have an API around
the stuff that you can do in CSS. RAY RYAN: Are you asking about
a specific existing Java physics library? I’m talking about Java
not about CSS. RAY RYAN: The general answer is
lots of people have ported existing Java libraries of
various kinds for geometries and physics to GWT. If you look online– I don’t remember where–
you’ll find what the limitations of our Java
emulation are. But most of the gaming
demonstrations and so on that have happened have been because
of importing existing Java libraries to GWT without
too much effort. OK. Thanks. JOHN LABANCA: Ray Ryan is our
project leader for everything that we work on. RAY RYAN: That’s not true,
but thank you. JOHN LABANCA: OK. Something like that. I don’t get the titles right. But OK. Anyone– oh go ahead. Real quick question on the audio
files and local storage. Is it possible to load those
audio files into local storage and then call them from
local storage. JOHN LABANCA: That’s
a good question. I’m not sure. Well local– [INAUDIBLE] JOHN LABANCA: What? [INAUDIBLE] JOHN LABANCA: Yeah there is
a file API that you use– I only learned about the file
API in another session. But there is a file API that
you can use to save data. One of the problems with local
storage, or one of the restraints, is that it’s limited
to five megabytes unless you install the app
from the Chrome store. So you might fill that up kind
of quickly with audio files. But look into the file API. I have one question on Canvas. We use a Canvas library a lot
in GWT even before 2.2. At that time I think for IE6
that Canvas use webmail I just want to know this. I saw you have a new API called getCanvas and support it. Just wondering for IE6, will
that return now, or it’s return webmail implementation? JOHN LABANCA: We’re
not going to– so Canvas is only supported
on IE8 and newer versions. So we don’t support
the SBG versions. There was an experimental
project where we create an SBG layer on top of Canvas
so you can use SBG– or one way or the other– so you
could use SBG across it. But the performance was so bad
on the non-SBG browsers that we kind of abandoned it. In IE6 you’ll have to fall back
to something else like Flash or an image. Is the drag and drop
support also HTML5? And do we go through the same
API to test for support or– JOHN LABANCA: The drag
and drop support, it’s an HTML5 feature. And basically what it
is is it’s event. So you have to set
some attributes. But essentially you add a drag
start event to an element so you know when it starts
dragging. You add a drop event. So it’s a bunch of events. They’re in GWT 2.3, but you’ll
definitely want– drag and drop in particular– you’ll want to upgrade to GWT
2.4 if you plan to use those a lot because the 2.3
had a couple bugs that we fixed in 2.4. Go ahead. Are there any compatibilities
in the jar files for 2.4 that’s not in 2.3 or 2.2? I downloaded 2.4 and ran into
some problems with some jar files that I imported. And I didn’t know– I went online and looked. And they said that there was
some incompatibilities with certain jar files with 2.4. But they said you guys
were working on it. This was online. I didn’t know if there was still
any resolved issues, or you heard of anything
regarding that. I don’t remember the
exact jar files. I wish I could tell you. But it was a few weeks
ago, and I forgot. But I just wanted to find out. JOHN LABANCA: I’m not sure
what the status is. It could be a Java
1.6, 1.5 thing. I’m not sure what the
status of that is. I’ll have to find out. OK. Just a quick question
regarding Canvas. So when you resize the browser
window, and you want to resize the actual number of pixels on a
canvas, do you actually have to redraw all the primitives
in there? And is there an efficient
way of caching that? Or you actually have to
keep them yourself and redraw them all? JOHN LABANCA: Well there’s a
lot of different options. So one is you have to basically
redraw the canvas. But it will automatically
scale. So if you set your coordinate
space to something large enough to handle whatever size
you go to, then when you shrink, you’ll scale down. And when you expand,
it will scale up. The only problem with that is
if you’re refreshing your canvas, and it’s usually pretty
small, then you’re going to get lower performance
because you’re drawing like 1000 pixel coordinate space
into a 300 pixel canvas. But if you’re just drawing it
once, or you only draw it and refresh it very infrequently,
then it’s probably safe to just use a larger canvas. All right. Any other questions? Well thank all of you for coming
and staying until the end of the questions.


  1. You describe drag and drop support in GWT starting in GWT 2.3, however I've not been able to find any documentation for this online. I don't even see and Drag/Drop related classes in the downloadable version of 2.4. Where can I read more about this functionality?

  2. The subtitles are pretty bad, at least around the questions and answers towards the end. The question about Canvas in IE6.

Leave a Reply

Your email address will not be published.