WWDC2004 Session 401

Transcript

Kind: captions
Language: en
hi everyone welcome to advanced web site
development technique
in this talk we're going to talk about
how to make great sites with Safari but
before I tell you more about that let's
go over all the Safari and WebKit
sessions that will be presented during
this worldwide developers conference
first is this one right here the next
session will be best practices and
website development that talk is going
to cover not only how to make good sites
making good use of CSS and HTML but also
talk about some particularly snazzy
visual techniques that you can use to
make your site's look really good after
that taking advantage of the new web kit
features is going to talk about a lot of
new things we have including scripting
integration and the canvas as mentioned
invert ron's keynote next plug in
development for WebKit and Safari which
is going to talk about how to make cool
plugin for safari and discuss some new
technologies we have for that and
finally the really vaguely named
advanced web kit features which we'll
talk all about how to use HTML editing
and the new Dom API from your custom
applications and these talks are going
to cover both Safari and how to make use
of it using HTML and making documents
for Safari and WebKit the engine inside
Safari all right advanced website
development techniques what exactly are
we talking about here we're talking
about techniques for web applications
for more advanced sites that aren't just
a collection of web pages and web
documents that really go beyond that to
give the user a richer experience
they're particularly useful for
data-intensive and highly interactive
site all these techniques that I'm going
to discuss today work in Safari and
other webkit based applications and many
are also supported in other browsers and
i'll try to mention throughout the tops
which are supported in which browsers
and finally we're going to have really
in-depth coverage here today we're going
to go through a lot of code samples and
hopefully by the time you leave this
talk you should know how to use all
these techniques in your own web
applications
what are we going to cover specifically
first live connect a technique that you
can use to communicate between
JavaScript on the page and java applets
we're going to talk about drag and drop
how did you drag and drop in your web
pages two different ways we're going to
talk about HTML editing and how to use
that inside your own web pages for
pieces of the document to make them
editable we're going to talk about xml
httprequest which is a technique you can
use for back end server communication
and finally we'll talk a little about
putting it all together and how to
combine these techniques to make a good
web application and don't forget this
stuff is also really useful for
dashboard widgets so if you want to win
that power book or that ipod pay
attention the first topic we're going to
cover is live connect now live connect
is kind of a catch-all term people use
it to refer to many different things but
in Safari when we say live connect we
mean Java to JavaScript communication
some of you may be interested in plug-in
script ability if so make sure to catch
the plug in development for WebKit and
Safari session later during this
conference what's a live connect good
for exactly you may wonder well one
thing it's good for is you can connect
to existing Java applets if you already
have a Java applet around that does
something useful and you'd really like
to integrate that functionality into
your web page then live connect can be a
good way to go instead of trying to
totally reimplement it it's also good
for going beyond what you can really
practically do in javascript and HTML
web technologies are really great but
javascript is a fairly slow interpreted
language and there's certain things that
just won't cut it for for example 3d
graphics that's a little beyond what you
can do with javascript but with java you
can do it cryptography again a little
too computation intensive to do with
javascript and finally advanced
networking with javascript you can
connect back to pages on the original
website but maybe you want to do some
networking that isn't URL base like
telnet or SSH
here's a very simple diagram of how life
connect work javascript in your page can
call the Java applet and the Java applet
can call javascript in your page that's
it they're all solvers to it it's very
straightforward so let's look at a
simple code example to talk to a
javascript applet you just get the
object for it out of the applets array
and start making method calls on it like
this you may notice i put the may script
tag the may script attribute on the
applet tag here to make it scriptable
and then later from javascript just
start calling methods so let's see a
little demo I'm going to have Kevin
Decker come up here to the stage to help
me out I thought take hey Kevin hi okay
so what we have here is we have this
applet which is right here oh wait for
them to put it on the screen all right
there we go and I'm gonna go ahead and
start the applet and show you what it
does and so we have this nice little
world here and its parameters are
derived from the stop of script and I've
got the source handy for you right here
and this is an example of communication
from JavaScript to Java so here's all
the important parts so this applet was
actually created by NASA it lets you
make your own custom 3d models and
specify them in JavaScript and then Java
does the animation so you I can imagine
lots of cool things you could do with
this you could have you know controls in
the web page that you set up what
exactly the model is and then use Java
to animate it all right that's all there
is to it live connects go backslide
alright and if you're interested in
learning more about live connect there's
a nut scape live connect overview
available at this extremely long URL
I'll go over the documentation URLs
again at the end of the talk the next
topic we're going to discuss is drag and
drop all right drag and drop support in
the latest safari in the tiger WWDC feed
we have much better drag and drop
support and when you use drag and drop
on your web application you can get sort
of more of a desktop native app feel in
your web application we provide a more
convenient API for drag and drop and
will even let you drag between windows
including between different applications
we're going to talk about two different
techniques for drag and drop the first
technique is Mouse event-based dragging
this just uses the classic JavaScript
mouse events mouse down mouseup mouse
move and so on to simulate a drag and
you can use this to drag or resize
elements inside a page again as I said
it uses the standard Mouse handlers and
its really only good for in page drag
you can't use this to drag between
different frames or to drag to other
apps we're also going to talk about
advanced drag and drop events now these
events give you a lot more detailed
control over the drag and let you do
much fancier things they let you provide
a custom drag image if you want custom
drag type like you can specify whether
you're dragging text or URL and so forth
and they let you drag between frames
between windows between applications so
first let's talk about drag and drop
using Mouse events the first thing you
have to do to do this is add a mouse
down handler to the appropriate element
it's very simple just like this one
other thing I've highlighted here
besides this the mouse handler is that
the element is absolute positioned it's
important to you some kind of
positioning on the element so that when
you add
we change the position it'll be
reflected because if the element is in
the normal HTML flow then the position
attributes will have no effect so the
mouse down handler first saves the
initial position of the mouse cursor it
wants to know where the mouse cursor is
relative to the element so when you
finally do the drop you can correctly
compute the new position and this is
just some simple math here next it
temporarily installs a non select
handler this is just to prevent
accidental text selection from happening
while you're doing the drag since this
is just keying off the normal Mouse
events and needs to make sure to prevent
the default action now on select start
is supported in internet explorer but in
mozilla this event is not defined having
a handler for it will make no difference
but the way to actually prevent
selection is to return false from the
mouse down event handler and here's the
example very simple we've got the
function defined here and we add an
event listener using the standard Dom
call highlighted in orange there all
right there's more next you install
mouse move and mouse up handlers and
these just compute the new position and
place the element right there so here it
goes here I'm showing you the move
handler and the up handler is doing
pretty much the same thing again it's
got that initial saved position now i'm
using a trick here called nested
functions in JavaScript if you define
one function inside another and then
attach it as a handler it actually has
access to the parameters of the nested
function so this way we have access to
this initial event and also to the
initial offset variables that I defined
a couple of slides ago and you'll be
able to see more of this in the code
samples once they are downloadable
finally the mouse up handler removes all
the temporary event handlers that you
installed after finally dropping the
element it takes all these off now one
thing I should mention about these is
that they've been install
is capturing handlers that means that
they actually intercept the event before
they even get to the elements can side
contained inside the body so this is a
technique that's used to totally
override mouse move and mouse up
handling for the whole document
temporarily during the drag now let's
look at a diagram of this i'm going to
show you all the different events that
take place during the dragon process and
how they relate first we have the mouse
down event and this happens on the drag
source is just a normal event and the
main role for this is to add the
handlers for the other events now we
have all these other events that are
installed as capturing events on the
body we have the mouse move handler
which sets the new position the mouse up
handler which removes all these
temporary handlers and the select start
handler which prevents accidental text
selection during the drag so that's it
for the first dragging technique let's
go on to number two drag and drop using
drag events so dragon drops using drag
events provides a very large number of
events you can use but you don't really
need to hook up to most of them but
first of all let's start by going over
the exhaustive list at the drag start
site where the drag is going to
originate you have on drag start on drag
and on drag end the way these fire is
that on drag start fires when you first
begin dragging the element on drag fires
continuously while you're continuing to
drag it around and on drag n fires when
the drag completes either by dropping
the item or by the user cancelling the
drag on the drag target site you have
even more event you have on drag enter
which fires whenever the drag enters the
element which might be a possible drag
target you have on drag over which fires
continuously while you're still over the
element and you have on drag leave when
you leave the element without dropping
and finally on drop if you actually do
the drop so let's look at how you make
use of these
Oh before that I have to talk about the
data transfer object attached drag event
is a data transfer object this lets you
set the data to actually be dragged you
don't have to drive just whatever the
element happens to be you can set any
custom data it lets you customize the
appearance of the drag and also other
parameters about it like what operation
is it doing is it a copy a move this
will affect the cursor you see while
you're doing the drag and finally on the
receiving end you can actually get the
data from the data transfer object once
the drag takes place so now let's look
at the actual code samples the first
thing you do is set event drag handlers
at the drag source like this I've said
all three here but again on drag start
is probably the only one that's really
important where you need to fill in the
data and set up the drag appearance and
on drag and on drag end as I've shown
here you might use to give some kind of
feedback at the source while the drag is
still going on now you have to fill in
the data transfer object at the drag
source so here's a couple of things
we're doing we're setting a custom drag
image not just using the default we're
setting the type of data and the actual
data content here I've used a mime type
text plane in Safari these drag event
support arbitrary mime types in internet
explorer the only types allowed our text
and URI list and Safari also supports
those for compatibility and finally here
I've set the drag operations allowed
which is a copy so you'd see the little
plus icon next you have to set the
appropriate event handlers at the drop
target the place where you drop again
here I've shown event handler set for
all of them but you don't need to use
them all on drop is the only one that's
really really important to handle the
drop and finally you have to use the
data transfer object at the drop site to
get the data out here it is you can do
whatever you want with it once it's
dropped
okay time for another diagram this one's
going to be a little fancier we're going
to look at first the events off that the
event handlers that you set on the drag
source on drag start sets up the data
transfer object on drag can optionally
show some feedback while you're dragging
and on drag end is going to end the
feedback if any that you were showing it
was lots of being optional then there's
all the event handlers that you might
have with the drag target you have
dragged enter which you get when you
first enter and you might use that to
show some kind of feedback that this is
a valid drop target or not drag over
which fires continuously while you're
over the element drop which fires only
if you actually drop inside the target
or alternately you get dragged leave if
the user leaves the element without
actually performing the drop so that's
it now let's look at a little demo here
what we have is a shared annotation
server that lets you mark up a copy of a
web page with little notes and this is
going to use both drag and drop
techniques and again Kevin Decker's
going to help me out with demoing this
so this is really cool we've basically
built in stickies to this common website
here so I can just drag this right here
and I'll be like another one that's
showing the second drag-and-drop
technique cross frames the top section
there is actually different frames and
here we're demonstrating the in page
drag that's just a normal Dom element
we've hooked up to the mouse events on
it you can also resize them using that
resize corner and you may notice these
things are translucent that's using some
of the new opacity features in Safari
and if you're interested in more stuff
like that and how to make things look
really cool make sure to catch Dave hi
it's talk on making visually compelling
websites okay that's it for now back to
slides
all right now again there's
documentation on this there's an
overview of these custom drag events and
we'll go back to that at the end the
next topic I'm going to talk about is
HTML editing now I'm going to talk about
HTML editing mainly as it applies to
editing within a page a particular
section inside a page later on during
this conference there's going to be a
talk but it's currently vaguely called
advanced web kit features which is going
to cover how to use editing from your
own custom app if you want to use it the
way mail is going to for instance so you
can use this to support rich text
editing and web pages now one of the
most obvious ways to use this would be
for a comment box for example on a
bulletin board site or a web blog many
of them are limited to plain text right
now but with this feature you could
actually let the user it do rich text
editing and submit arbitrary HTML like I
just said and in addition to just the
basic editing operations we provide a
programmatic interface formatting
commands and we provide some copy and
paste integration
so the most basic thing here is how to
make an area editable and what you start
out with is you set the content editable
property this is a tri-state property it
can be set to true false or inherit
depending on whether you want the object
to be editable you can set it just like
this as an HTML attribute or you can
also set it on the object through
JavaScript by saying whatever Dom
element content editable equals true so
this is the way to make an area editable
you may notice I've also put an ID
attribute on it so I can later find this
div and perform other operations on it
now one thing you want to do is if you
have a fixed size area that you want to
edit you want it to be scrollable by
default when you have an HTML element
and its contents are too big to fit
inside it they'll just spill right
outside that area and go all over the
rest of the page that's not what you
want but if you set the overflow auto
CSS property then automatically once
there's too much stuff to fit in the box
you'll get scroll bars now in addition
that's all you need to do to get a basic
editable area you make it editable you
make it overflow auto give it a
particular size and you have pretty much
the rich text equivalent of a text field
but you want to do more than that you
want to give the user ways to make
things bold and italic you can create
buttons like this that use exec command
to make text bold or italic exec command
is actually part of a family of
functions that have a whole bunch of
commands available to them you can look
this up on the net this is also
implemented in internet explorer and
mozilla so you can find a lot of docs on
this sort of de facto standard way of
doing it you can use it to set indents
styles to start new paragraph to add
line breaks but for now these two
examples now there's other ways to use
that it's ten commands besides just
executing them you can use these very
same command choices to tell whether
command is an a
bold which means can I apply this
command right now is it available as a
current choice for the selection I have
and for bold for example that would
depend on having either an editable
piece of text selected or having a
blinking carrot in the middle of some
editing editable text you can also check
whether the point it's hard to read that
monitor you can check whether the
command is currently applied to a
particular region or indeterminate
meaning it's mixed you can check whether
it's supported at all and you can check
the value which means what's the current
state now once you've done all this
editing you have to actually get the
content out you can use just the
innerhtml property which would be
familiar to many of you for that you
just get the element using normal Dom
techniques and use the innerhtml
property to extract it now here I've
shown an example of a function you might
have if you're doing a form submission
you might extract the HTML content of
the element you're submitting place them
in a hidden text field and then just let
that submit as part of the form and now
we're going to demo editing in the very
same shared annotation demo once again
Kevin Decker to help me out okay so here
we have our nice little sticky so I'm
just going to type in here a quick brown
fox jumped over the lazy dog and to
illustrate what matcha was talking about
with bold you notice here we have bold
we also the button up here we added for
italicize so I'll just take this and go
like quick brown ugly select Lord's will
make that bulb and we'll take this part
and we'll italicize it and there we go
and actually it's really cool because
not only can you just pack right there
but it's WYSIWYG it's what you see is
what you get so if I want to do
something like this you know copy this
part I'll copy there and put in this
note and then there you go so anything
I'm pretty much on the page images all
that stuff right there so there go
[Applause]
all right next topic our final topic is
going to be xmlhttprequest now this is
sort of the most abstract of the things
you're going to talk about sort of the
least visual so may require a little
explaining to explain what this is and
what really is good for xmlhttprequest
is a way to talk back to the web server
without actually having to load a page
or image or anything you just open a
direct connection send a request and get
the reply can use it to silently make an
HTTP connection without disturbing the
user with a page or frame load it also
offers optional xml serialization if
you'd like to send XML data to the
server and XML parsing if the server
again replies with XML that you'd like
to process it's sort of good for
behind-the-scenes communication when you
want to have some operation in the web
page and respond to it in some way on
the server but not sort of put it in the
users face and it can also be good for
hooking up a web application to an
existing XML feed so let's look at some
diagrams of how this works before xml
httprequest the way you do things is you
start with a user action this makes an
HTTP request to the server the server
saves the changes whatever was reported
by the action it generates a new page it
sends an HTTP reply and then finally the
client shows the results on a whole new
page an example of a site that works
like this that you may know about is
Amazon your shopping cart whenever you
remove an item from the shopping cart
you have to select it and then you have
to do a save and wait for the server to
process that and actually show you the
new page but with xml httprequest you
can actually do things in a better way
you start with the user action right
away you can use Dom commands to reflect
that in the UI and then in the
background you use XML HTTP request to
make a request to the server server save
the changes
and it makes a reply and the client can
choose whether or not to make use of
that one example of a website that's
already using this technique is orchid a
social networking site that some of you
may have heard of when you go to the
section where you rate your friends you
can click from one to three stars or
whatever to right people and you may
have noticed when you do that the page
doesn't load a new page it just
automatically saves but you're not
disturbed at all and that's a great way
to set up your website people don't have
to wait for the page load you can just
automatically save their data now let's
look into specifically how you'd make
use of xmlhttprequest the first step is
to create an xml httprequest object and
then start the load now the way to
create an xml httprequest object is a
little tricky there's two different
techniques depending on whether you're
using safari or mozilla or other
standards-based browsers or if you're
using Internet Explorer in Windows ie
xmlhttprequest is actually an activex
control so you have to use this wacky
activex gobbledygook to create it in
other browsers you can just directly
create the object so this try-catch
block just encapsulate solve that and
then you open it you tell it what HTTP
method to use to do the load and what
document you want to load so once you've
ticked off this load you probably want
to get the data when it's actually
loaded and here's how it goes you hook
up a function to the onreadystatechange
property of the request before actually
sending it and that works just like an
event handler whenever the state changes
of the request whenever more data comes
in or the load kicks off or whatever you
get an update and stink for happens to
be I'm all done loading so this function
just waits until you get into state for
and then it can just use the response
text property on the request to get the
data back out
all right now you may want to actually
parse XML response data instead of just
sending simple text messages or looking
at raw XML you may want to parse it in
some interesting way so to do that you
just get the response XML property
instead of response text and that's a
dom document you can use any normal Dom
call on that the example I've shown here
is get element by ID so that's an
example of how you might use XML HTTP
requests to load something in the
background but what if you want to save
well it's very similar you set up the
request in this case instead of a get
I've used the post method just like an
HTTP forum post to post to a script a
CGI script running on the server and to
send instead of just passing null you
can actually pass it some body data to
send as the contents of the post well
other than that is set up pretty much
the same way as a load again if you want
to use XML then you can set up a
document and attach it to the request
and send it which again instead of
sending texts as the body here we're
sending a document for just using normal
Dom calls to create that and build it up
and now let's look at a demo a little
sticky out as you can see like we said
we can resize all this and you can edit
it but wait there's more because what
what we what ma che was alluding to was
using this H xmlhttprequest all this is
really saving in the background so you
know even if your browser should crash
which Safari never really never never
happened so we're going to simulate the
crash with a force quit yeah just to
prove those no like smoke and mirrors
going on we'll go ahead and crash this
or I mean force quit
you may want to use the docs menu to
force clean yeah okay here we go there
you go you have to force quit force quit
now okay so okay actually crash bar is
gone and let's bring it back so here we
go and then all that stuff is still
there saved all along and now it's
loaded when you load the page again
actually it's a little bit smaller but
that's because I had to draw one to open
before I had a full size so you guys can
see it so that's that's actually not
really a bug it's a feature there you go
it's all saved it's really really cool
stuff okay hey Kevin stay up here since
I've gone through all my stuff and we
have a bunch of time left let's actually
take a look at the code of the demo sure
why don't you just view source on this
page actually you're going to report on
the studio you're going to want to show
the top free header framework so let's
do that and let's make the groups we've
actually done show some examples of
applying these techniques in practice
here's the finished draft move the motto
here's the dragon drops that I talked
about first with the simple move based
drag and drop technique you can see all
that saying stuff I talked about before
just the normal mouse event hooked up
and then we've used the same thing for
resize which I briefly alluded to in the
talk in which we showed and really you
could use this drag for any kind of way
of manipulating the elements on your
page you can have a draggable handle and
have something else completely different
move okay find where xmlhttprequest is
in the page well explode and save okay
go again that's where we're doing the
save just like I talked about host to a
script up there it's actually creating
an XML document
let's go ok that's enough demo isn't
this cool this is cool stuff and so on
to the summary all right and again
xmlhttprequest Apple has some docs
online you can find them here all right
summary so we looked at all these
different web features that you can use
and how you can use them in your web
application and you may have seen a hint
of how you can put these together to get
something that is a lot fancier than the
typical web page and does a lot more we
combine drag-and-drop editing and xml
httprequest to get in effect it's really
a lot more like a desktop app then like
what you expect from a web page and you
know you can also use the stuff for
dashboard widgets so you may be
wondering when do you get all these
features well they're all going to be
available in the safari 2 point 0 in
your tiger WWDC seed they'll be
available in the Safari 1.3 developer
beta on Panther that's going to be
released soon that'll be up on the
website for download soon and xml
httprequest and live connect are
actually already in Safari 1.2 so in
closing let me talk a little about the
progress of Safari so far let's look at
a graph of awesomeness versus time now
Safari 1 point 0 is already pretty darn
awesome 1.1 45% more awesome 1.2 was
sixty-nine percent more awesome than
that and one point three and two point
oh who knows how awesome they will be
once they shift but one thing I want to
mention is the version of Safari on your
tiger speed and the developer beta that
will be coming out soon are not the
final versions yet some of these new
features that we've talked about may
have holes in them they may be buggy
they may not be perfect and we
appreciate it if you try them out give
them a spin and report all your bugs and
oh yeah legal made me add this
disclaimer all right so here's all the
reference materials we talked about
during the talk if you want to quickly
note these down or look at them later on
the DVD is all the information available