---
title: WWDC2004 Session 401
framework: wwdc
role: article
path: wwdc/wwdc2004-401
---

# 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