Welcome to session 426, HTML editing with Web Kit. I am Ken Kocienda and I work on the Safari team working on HTML editing this year. And so the first question you may have when thinking about editing and looking at it is, well, how did we do it? How did we add editing to Web Kit? Well, we extended the Web Kit APIs that we introduced here at the developer conference last year. Very, very simple, very, very straightforward. We just took those APIs and extended them, adding and editing.

So then the next question is maybe you're asking is, well, why did we do this? Why, you know, of all the things that we could possibly do with web technology, you know, why did we choose editing as the thing to focus on next? Well, the answer is very simple.

We want Mail.app to use HTML as its format for rich text. Steve Jobs mentioned-- Glad you like that. And as Steve Jobs mentioned in the keynote on Monday, this is a feature to really, really help us interoperate out there on the internet with folks using mailers on a variety of platforms. And so thanks. That's all I have today.

I figure it's Friday, you know, you've seen a lot of slides, lots of transitions and things, you know, probably sick to take a look at that. Well, you know, really, you know, nice WWDC slide. Well, anyway. It is a developer conference, so I figure, well, what about the developers? Right? Well, this whole thing, editing, whatever.

So I figured we could do a little Q&A. Well, OK, so now the real content here, HTML editing. And an important thing I want to say before I get into the real guts of it is that HTML editing will be available on Tiger with Safari 2.0, and it will be available in Safari 1.3 on Panther.

So everything that I'm talking about here today will be available on the two releases. There's other Safari 1.3 is already available for you to download. There's a developer preview, I think is what we're calling it on, you know, through your developer account. Okay, so that's really, really important.

Everything that you see here today will be available on Tiger and Panther. Now, really starting to get into it here, when we thought about HTML editing, we figured we have really two audiences. There are application developers, people who want to take, you know, take a view, slap it in their application, and do editing in that application and have the result be HTML when you're all done. And then there's also web page developers taking an application like Safari, it already exists, and then developing content that can be viewed in Safari and then including editing in that content.

So there's really two audiences, and as you see as we go, as I'll go through the presentation, there will be something for you to do. There's something for each of you, you know, depending on which audience you are. Many of you may be both, so in that case, there's no falling asleep then. Okay, so now for application developers, we want you to be able to use a web view just like in an S-text view, okay? And then you will go forward and program with that with Objective-C.

Now, for web developers, use an application, as I said, like Safari, and your focus will really be much more in JavaScript, you know, what can you do with JavaScript and how can you kind of get in there and start doing neat editing things and without really having, again, direct access to the host application.

So there's something in there for both of you. Now, as that last slide shows, the real, the core of this is Safari, the Safari technology. You've probably seen this slide a whole bunch of times. WebKit is really the engine inside of Safari that makes everything go, but what you probably haven't seen is that Behind this-- Oh, I hate that guy. Oh, that's me, right? Anyway, so yeah. I'm going to leave that up there a little bit so we get a little more footage on that one. Okay. Okay.

So now... So now there's a bunch of cool stuff. All seriousness, there's a bunch of cool stuff that we're doing in HTML editing. And really a good way to think about it is that there's three different areas where there is this cool stuff, where that cool stuff lives.

There's WebView in Web Kit, there's JavaScript, and then there's Document Object Model, the DOM. So now in WebView, just at a very, very high level, you may have sort of gotten a hold of this idea by now, WebView can now edit. And there's lots of new API in WebView that allows you to control that editing process.

And then something which you as, of course, developers are going to be using this in your app, I hope, will be really interested in is that there's a Web Kit editing delegate so that you can get control of the editing process and make it do what you want for your program.

There's also a lot of interesting new stuff in JavaScript. There's a new selection object. I know that's already been asked for -- by folks coming up and asking questions in other sessions. There are other editing extensions which we'll go into, and there's also improved -- the DOM underneath when you call into it with lots of bug fixes and new things in the DOM. Speaking of the DOM, there is full DOM Level 2 support now available to you.

I know that's something that a lot of you asked about last year at the developer conference. I want access to the DOM. Well, now you have it. And you have it through an Objective-C binding. And we've also included support for many, many popular extensions. I'll go into this in more detail and tell you really what's in there later in the talk.

Okay. So now with that as a sort of an introduction, for the rest of the talk, really what I'd like to do is step through a number of HTML editing scenarios, things that you may want to do as developers of apps and as web pages and getting all that stuff working together.

And so, again, you're going to step through a bunch of these scenarios throughout the rest of the talk and really spend a lot of time looking at code. So now the first one I'd like to talk about is editing with WebView. Now, there's a new method on WebView that if you're--an application--if you're using WebView, you're going to have to do a lot of things. And so, again, I'll go into that in just a moment. And I'll talk about that later.

So, again, I'll talk about that later. And so, again, I'll talk about that later. And so, again, I'll talk about that later. And so, again, I'll talk about that later. And then, if you're an application developer, okay, one of those two audiences is really now speaking to you as application developers.

There's a new method on WebView, setEditable. You pass in yes and every page that then will be loaded in that WebView will be editable. This is very, very simple. It's just like one big switch, ka-chunk. Every page will then be editable. So let's take a quick look at that. Let's look at the demo machine.

Okay. So I have a little program here that I'll be using a bunch to demo editing. And I tell you what, why don't we even just start that up and let you see what this is going to do before we get into the code. So now here's a very, very simple application.

And all this has in it is a web view. That's it. It's the simplest little nib file you could have basically. And let's see here. As you'll see what I'm going to try to type -- I cannot type. I'm a very bad typist. So it starts to -- the behavior of the application is very, very much like a text editor. I can come back here and undo, bring up the font panel, bring up the color panel, and my selection there. I cannot -- yes, it's true.

I really cannot -- let's make that a little bit bigger. I cannot type. So you see, very, very simple. So now let's, you know, sort of like even do a little undoing there and even just save this out just to show that this is actually, actually truly HTML.

So it's just putting in HTML, putting in some spans. You see the style there, making it red, and so forth. Very, very simple, very, very straightforward. And the output, of course, is HTML. Now, as I said in that slide before I transitioned over to the demo, here's this, for this app, the call-out for the document framework in App Kit will call out to this code here.

Window controller did load nib, and all I'm doing right there is, boom, right? Web view, set editable, yes. Every page that then is loaded into that application will be editable. And as an example of that, it's not just, you know, creating a... a new document and typing in it. I can also just come over here and, you know, load a page off the... off the web. And as you can see, I could just start coming in here and start editing Yahoo, which I think is pretty neat.

So now I'm going to take a walk in the wild side. I don't actually know that this is 100% going to work. But just to show you that this really is, this is not just a parlor trick, folks. I'm going to select all and change the font. So this isn't as fully optimized as we would like it yet. So I've still got a little job security going here.

But as you can see, just select all on Yahoo, change the font, and every font on the page changes. I can just go back and undo it, and there you go. Okay, so this is real, real stuff here. Real, real editing. Okay, so now... This is the point here, however, that it just very, very simply, one line of code, every page that's loaded then becomes editable. Okay, so let's go back to the slides, if you will.

So it's really, really simple to get up and running with this and go and try it out, see what the features are. Now, sort of the next step is that now you've got that WebView in your app and it can load content and you can start editing with it.

Well, what are some of the things that you can do with it as a developer to start changing that content around? And I'd like to start talking about all of those, and I'd like to call those WebView editing methods, right? These high-level editing methods available on WebView. And these methods operate on the current selection, and they're undoable.

There's some work that we did to hook in these methods into the undo system, and I think in a way that I think you'll find very, very convenient to use as a programmer. So now, here's an example of one. WebView, replace selection with markup string, and you could just pass a little hunk of HTML in that string. And the WebView will go and hand that string off.

And you can go back to the parser and put that content right into the document in the place where you have a selection. Now, beneath there are sort of the steps that, again, are really pretty high level of what is actually going on on your behalf. When you make a call like that, selection is saved off. The selection is removed.

Markup is parsed. Insert new content. And you could just then very, very quickly undo that, and all of that will get undone and put back. Now, here is some of those high-level editing methods. That really looks. Like all of them that are available to you on WebView. And so how many people are paying attention, right? You are having fun now. No. OK. Well, anyway, so now let's take a little bit of look at how these guys work.

Okay. So now, what I'm going to do is just close that down and create a new document, show you how this works before we go in and take a look at the code. So I've got this little demo menu here that I've put in the app, and I'm just going to start jabbering.

And I've got a keyboard command there, so I can just start jabbering, and all it's going to do is just put nonsense content into the document. And then I've got another one here, it's a jabber in style, and so I can do that a couple times and get some stuff in there.

And, you know, just undo, I'm just going to undo that, I can redo, so I'm at number five there now, I had a bunch more than that, so now I'm at 13 and undoing, you see I go back to five, so the whole undo thing works. Just very, very simple, very, very straightforward thing to do. So now let's take a look at how that works in the code.

So that menu command is just hooked up to this one liner there. I just have this function here to just go and pick out, you know, make this little random jabber string out of a dictionary that I put into the app. And it's just very, very simple. There's one little call. You'll see the one beneath it. I just make a little markup string just right there. It's just hard-coded, color red, font style italic. Just get that jabber string in there, and then I make that other call replace selection with markup string.

So, again, it's just really, really simple to now, you know, put make the WebView editable as a first step, and then as a second step, start getting in there and start modifying the content around. It's very, very simple. You'll see that there's no code in here to actually make those things undoable. That's just done for you.

So, again, you know, go back to this app, you know, go and jabber and undo. You didn't need to do anything to make that work. It's just a nice convenience for you if your needs are simple. And, of course, as I said, that operates on the current selection. So I have select all. You know, I can just come in here, and it just operates on the... Each one of these operate on the current selection. So again, just a very, very simple, straightforward way to start getting into the code and start making things happening in editing.

Let's go back to the slides, please. Okay, so now,

Can you see all that? Now, these are all of the classes that we've added. It's really all of those classes from all of those DOM modules. So it's over 100 new classes that you can use from Objective-C. There's a lot of stuff you can get into and start manipulating documents. Now, not only that, now all of that stuff on that last slide was all of the stuff from the standard IDL.

And as the W3C put it out, but of course, you know, if you've done any, you know, programming on the web at all, you know that there are non-standard extensions, sort of DOM level zero stuff and things that have come in even after that. And we're supporting some of those as well, and there's a listing of those on the screen. So there's lots and lots of good DOM stuff to get into.

This is just a very, very small look at what we're doing. Taking the source of a document, going over and making the DOM tree out of it. And that's really all the DOM is, is a tree made up of nodes. And I just want to introduce a little bit of terminology that I'll be using again for those of you who might not be so familiar with it. DOM is a tree of nodes, and some of those nodes are elements.

Okay, now, what is an element? Well, an element is a node that can have attributes, and attributes customize the elements, just like the image tag has a source attribute and an alt attribute, and of course, many others are available to you. Again, so to just introduce some terminology there that I'll be using quite a lot.

And then also, sort of this first object that, you know, if you want to get into the DOM, you start using it from Web Kit, this is the object that you really, really need to get a handle on first. The DOM document, because it's the bridge into the rest of the DOM.

You know, the DOM being a tree, of course, the document is going to be at the root of that tree, and it's just going to be your way to get in and start interacting with the DOM. And of course, that line of code underneath there is the way that you do that. WebViews mainframe, get the DOM document off of that.

Okay. So now here's just a little code snippet and we'll be looking at a real world version of this, but just to give you a little bit of an idea of what you can do, get the DOM document there, create a node iterator, just a way to just iterate over all of the nodes in the DOM and then sort of do something with each node. So really, really simple, just a few lines of code, you can start doing some pretty neat things. So let's take a look at a demo of that.

Okay. Quitting. I don't need that. Okay, so let's take a look at an example of this. I'm just going to go back and... I've got a good example here, I think. Go look at Pixar's website. I can't really wait for this movie to come out. Okay. So now, all right, let me get rid of the font and color stuff. All right. So now, back in my demo menu.

What I've got here is a little link inspector. And what this thing does, it just iterates over the DOM and it goes, you'll actually see that some of the text, as I selected here in the inspector, is highlighting. It'll actually even highlight the images in the document. I didn't really put the images in the link menu there. I'm sorry, I just didn't get around to it. But you see there, though, that the content is selecting as you go in there. And let's take a look at how that's done.

So now using the DOM, Okay. So now, if we go and look at that code example that I had up there on the screen before, this chunk of code here is really very, very much like it. It's very, very similar to what was on the screen before. Very, very simple to go in and get a hold of the DOM document, create a node iterator with it.

You see that I've got a couple of parameters. I only want to see elements, only elements with attributes because obviously a DOM node, if it's a link, it's got to have an href, so it's an element, an href being an attribute. And now I have this little thing here. It's a DOM node filter, a very, very simple little part of the code that we're making available. This filter will be consulted for each DOM node that the iterator returns to see whether or not the node is accepted or not.

And you see here that all I'm doing is asking whether or not the node name, again, part of the API we're making available, is an A tag. And if it is, I accept it. If not, well, then not. I probably should have even checked to see that the A had an href to make it really correct as a link instead of just an anchor.

You see, that's really pretty simple to get going. And then, of course, it just reloads the table. Now, to do the business of is the director of the Department of Web Design at the University of Michigan. He's the director I wrote the code, but I don't even remember where I put it. I think I put that in this one here.

Yeah, there it is. Okay. Every time I click in the table, again, just a little hunk of DOM, go in there and create a DOM range. And again, one of the objects we're making available, select that node and now call one of the WebView methods that... Sort of again, sort of bridges the world of Web Kit and the DOM. Just go in and say pass off that range and select that DOM range. is very, very simple sort of stuff. It just takes a few lines of code to make these things happen.

And again, kind of the interesting ways that, you know, the DOM starts getting glued together to the world of Objective-C and, you know, and Web Kit. There's one other thing that I would like to point out to you before we move on, and that's You'll notice here in this call to create the DOM node iterator that we have these bare colons.

And this was the strategy that we took for mapping the W3C IDL interfaces into Web Kit. Of course, now naturally, the IDL is really sort of more of a, you know, it would probably map pretty well into a language like C++ or Java or something like that just because of the, you know, the way the arguments are listed in Objective-C, you know, has sort of another way of doing that with the labels and the colons.

And so we just decided to leave that off. So that's just one thing that you should kind of be aware of when you're looking at the API, when you're starting to go and look at all of the headers that, well, just be aware of that. It's not really very complicated but just something worthy of note. Okay.

Good. Can we have the slides back now? Okay, so we looked at a little bit of DOM, and now let's look at a little bit at using the DOM and using all this code to start styling text. Now, all of the styles in editing in Web Kit are all based on CSS. Okay.

And here's the--here's

Two different little snippets of CSS there. And so, just very, very simply put, the computed style is the style you see on the screen. Okay, so we're going to provide you access to get into that as well with this method. So you can get a DOMCSS style declaration, computed style for element, and it will return it to you. And then you can query that style and find out exactly what the text looks like on the screen.

Okay. And then here's another example of one of those high-level editing methods. Very, very simple to work with the style system. You want to make some text blue. Well, you just build up that little CSS style snippet, style declaration with text, little method to create a style declaration, and then just go and apply that style, and it'll operate on the selection, as I said.

Okay. You could also, as an alternative, use the DOM to access style attributes. So again, this is just now going in and using the straight-up DOM element get attribute style and set attribute. The style attributes, you're setting it directly. So you have a bunch of options for working with that. And now let's do a demo of this.

Okay, so I have a, just a very simple document here and I have in my demo window, I have a little style inspector. So you can see that the idea is very, very similar to what we had before. It's just going to go through all of the elements in the document and start telling me some style information about it.

So now if you see that as I go and I select this span, of course you can't see the span in the document, but there is actually a span just around that little bit of text in the document. And so if now, if I just go and type in here a little bit of CSS, this is all hooked up to just go and make that, go and make that red.

I can take this span here and say font family times and that will update and become times. So just very, very simple. Again, CSS is the, is the way that we're going to be styling things in, in the document. So now you can also see that if I click on this, if I come over here and make something bold, well, I get a new bold element in the, in the style inspector.

So again, there's, it's kind of this interesting combination in a way of, of using CSS, but there is then some other things, and this is something that really we would like some feedback on. It's just that, you know, in order to be fully compatible, you know, we want to be able to, you know, use this in mail and write up a mail message and send this mail message off and have other HTML and HTML files that are HTML renderers, other HTML engines work with it. So instead of saying font-weight-bold there, we're thinking that for some things we want to use sort of the more traditional, sort of old style way of styling things.

And so we, you know, starting to make some choices on this, but of course as you'll see in a little bit, a little bit later that with our delegates code, you can exercise some control over this. So let's just take a little bit of a look at how this is done in the code itself.

Okay, really pretty simple. It's just going in. When I typed into the table itself, I was using just the straight-up DOM to set the style attribute, as you can see. and, ah, there's one more thing I can show you here. So now if I come down here, you'll see that This sort of little text area on the bottom here is starting to show-- you can see that the color is changing. And that's all about computed style.

So as you can see now, this is the hunk of code that is doing that. You see computed style for element. And now I am just going and getting the property value from the style and then just building up a string. Not particularly elegant programming, but you can see that it is just pretty simple to get in there and start working with the computed style for an element based on something like is selected in a table. Pretty simple to get in there and start working with that.

Okay. Okay, good. Can we have the slides back, please? So now, as I just mentioned, we're going to be making some choices about how to apply markup based on some things that you ask, particularly when you use one of these high-level editing functions. So now, this is going to be some information about how you can get in there and start modifying what it is that we choose to do so that it can really work for you in the way that you want. And there's two kinds of editing delegate methods, ones that are going to ask you, "Should I do this?" And then you can answer. And those that are just going to tell you about things that happen, like for instance, when the selection changes.

So now, ask methods, again, are all about pending changes. We'll call out to you and put you in control of whether or not the change will actually take place. And here's just a little diagram. The WebView will come over and ask you, as the editing delegate, now, of course, you have the option to do nothing and not implement anything. And then we'll just, again, go forward and do a default behavior. So the editing delegate is, you know, you can just implement as much or as little as you want in sort of standard Cocoa fashion.

Now, if you do choose to implement an editing delegate method, you can do one of three things. You can say, well, yes, go ahead, I approve that change, go ahead and make it. You can say no, it's just basically a straight up veto, don't do that. Or you can do, take an alternative action and return no. So we'll present to you a kind of a change that we want to make, and you can actually go and make a sort of a different change, rejecting the change that we proposed to you.

So now, here are the, is a listing of things that we're going to do. So we're going to be asking you whether editing should begin and end, so forth, changing the typing style, whether the selection should change off of a particular DOM range, whether we should insert a node or should insert a markup string and so forth, whether certain content should be deleted. So there's quite a number of things. You can get a lot of work done with that stuff, and let's take a little bit of a look at that now.

Okay. Okay, so actually I need to -- oops, return, yes, return, no. Okay, so now -- I You'll see here now that what I've done is there's a delegate call for whether you should insert text. And all this is called, this is called when you type. You can see I'm such a good typist. And very, very simple. If you would like to make, change the app to be a read-only, Very, very simple. No typing now. So now, it's actually kind of better for me. No bugs. No bugs this way.

100% perfect. OK, so now, that's pretty simple and straightforward. Now, let's take an alternative action. So now you'll see that what I'm going to do is return this alternative action. And all I'm going to do is do something very, very simple. I'm going to look at the text that's passed in, see if it's either the number 1, 2, or 3, and just replace that with text instead and return no. So we'll see that. Let's compile that up and see that work.

So you see, you know, typing goes on as usual, but if I type a number one, it does one, two, or three. I'm not that fast of a typist. Just look, one finger. And so that's just very, very simple. So is that for the code or for the typing? I don't know.

And again, just really, really important to, you know, we feel to give you the kind of control that you need to actually make this so that if you think we're dumb in the kind of choices we make, you can kind of fix it. So lots and lots of delegate methods available.

Can we go back to the slides, please? So again, you know, lots and lots of control for you, selection changes, whether style should be applied. You could apply an alternative style if you don't want any B tags, if you want to make a document that is only using the latest web standards, that would be your opportunity to get in there and say, "I don't like the way Apple is applying styles by default.

Here's how I want you to apply the style instead." Okay. So lots of good stuff there. Okay. Not another demo. We're going to go on to the--a little bit more information about the editing delegate. So you may be asking, "When do these ask methods get called?" And we've made a design decision to call them only when the user initiates action.

So it's--when you as a developer are using the Web Kit API to say, "Replace node," we're not going to call the delegate. That's the presumption being, "Well, you just made this call. Why are we going to call you to ask you whether or not it's okay to do this thing you just asked to do?" However, when you're just responding to events, keyboard events and, you know, menu events, you know, user interface gestures, things like that, well, you will not have had an opportunity to look at what might be done yet. So we're going to, you know, respond to those events and sort of generate some stuff to do and then give you an opportunity to look at it.

Okay, so that's when those ask methods get called. Now, those tell methods, they are always sent. And we use the NS Notification System to do that. And again, in sort of standard Cocoa fashion, if you set a delegate on the WebView, you get auto-registered for the notifications that we send. And here's what we have for that. So begin editing, end editing, changing typing, changing the selection, and so forth. Okay, and so let's do a little demo of that. It's actually, to be honest, really already did a little demo of that.

Back when I was looking at the computed style for an element, the--

Ah, yes, this is--excuse me, so now when you arrow through the--through the document, you'll see that I'm not in bold text. So what I've done here is I've made a little--a little window for text style, sort of mimicking the basic sort of bold, italic thing that you'd see in just a text editor.

So you'll see as I--as I arrow through the document that the--that the little bold button updates. So now if I kind of select some of this and make that italic, you see that, you know, that the buttons are updating just as I'm going through and through the--through the document. And again, all this is happening is as the selection is changing, it's throwing off a notification, that little text window is listening to that notification, looking at the computed style of the content and updating the button accordingly.

So it's--in many ways, it's stuff that we've already looked at in code before and it just is, you know, another little way to show you how to hook in and start getting the kind of basic--the basic--the basic information that you need to be able to get the content. So, you know, I'm going to go ahead and show you how to do that.

So, I'm going to go ahead and show you how to do that. So, I'm going to go ahead and show you how to do that. So, I'm going to go ahead and show you how to do that. So, I'm going to go ahead and show you how to do that. So, I'm going to go ahead and show you how to do that. So, I'm going to go ahead and show you how to do that.

So, I'm going to go ahead and show you how to Okay. Can I have the slides back, please? Okey-doke. So now, you've seen in the beginning of the talk where I talked about the high-level editing operations about how it just really took care of setting up undo for you. So now, I think a pretty-- one of the interesting things that we thought of along the line is that it should be possible for you to put together a bunch of DOM calls and make them easily undoable as well. So that's what this section is about.

and kind of just going over again what I've already said. These methods use the DOM and their compound operations more than one DOM call and that they're undoable. Again, just very, very simple code example of how you could do it. You could call WebView delete selection and then just call undo manager and tell it to undo. So now, when you want to start making your own undoable DOM operations, it's really, really important--this is really, really important for you to know is that you have to put the DOM back exactly as it was before.

Making the DOM equivalent is just not good enough. And again, this is just part of the reason, you know, the DOM is a tree and lots of links between elements in the DOM. If you want to make undo work right, you have to put things back exactly as they were. You can't just save off the text, for instance, of a selection that you deleted, create a new DOM node for that later, and reinsert that when you undo.

You have to put back that same DOM node. So let's have a demo of this. Sounds like it might be sort of complicated and odious to do, but in practice, it's really not so bad, as I hope you will see. All righty. So let's look at an example of this.

I'll give somebody a dollar if they can name the song. But so now you'll see that I have a little, menu command there that just deletes a node. So I can just go and delete a node. And all this does, it's just a very, very simple operation. All it's going to do is go and look for a particular element in the DOM and just delete the last node from it. Just very, very simple stuff. But you see that the undo is working and this is done just using straight up DOM calls.

So let's take a look at the code to make that happen. So I've got this-- A little class here that's called Undoable Delete Node Operation. Where did I get the name for that from? Okay. And so you see this class, all that it does is hangs on to the web view and it's going to hang on to the node that it actually went and deleted.

And when I call the menu command, it just creates one of these things and says, do your action. And the action just goes and gets the container. Again, this is kind of a canned example. It just goes and gets an element by ID in that document that says container.

and it's going to look and get the last node, last child of that container and retain it. This is again, and so that I can put it back just the way that it was before. Now I remove it, I retain it because the document is probably the only thing hanging onto it. It's probably the only thing that has refed that node. So I retain it.

and then make it undoable by just saying, OK, we'll just go and register and undo with the target in just a sort of standard Cocoa fashion. Undo action. So that when I go and undo, I just go in and put that thing back. Just append node. Again, just using the Objective-C DOM. And register for redo.

The redo itself, it just takes the node out again. It's already got a reference to it, so it's just even simpler than the action itself. Go and do that. The neat thing is you can delete and you can go and do other things, and it all just works with the undo system as you would expect. Just very, very simple and very, very straightforward to start now wrapping your own custom DOM operations and getting them to work with undo.

Look, I even deleted it when I was done. Wow. That's careful programming, huh? Even--that's just, you know, it's just--we do it because we care. Okay. Okay, great. That's what I have for that. Let's go back to the slides. Okay. So now there's a bunch of scenarios we've gone through that are all about you as an application developer, getting you interested, giving you some of the, you know, a little bit of a taste of what's available.

for taking this new technology and putting it into your application. So now I'm going to switch gears a little bit and start talking about what you can do as a web developer to start working with this technology. It's all about making web pages editable. So, okay, so now just stepping back a little bit to do a little DOM terminology, HTML and DOM terminology. So that little HTML snippet there, we have a block. That div is a block. Of course, P tags are blocks. Body is a block. And then we have an inline. That little B tag, that's a block.

making that text bold, that's an inline, right? So now, as we looked at before, attributes, customize elements. Okay, so now, content editable is an editing attribute that you can apply to a block to make that block editable. Okay. It doesn't apply to inline, so you can't put it on spans, you can't put it on B tags or image tags. You kind of need to maybe make the image editable, but we're not doing that, not this time around.

And so content editable is the little HTML attribute that you need to put on an element, a block, block level element, like the body in this example. This whole document is editable. Content editable equals true. So here's just another example. The first line of text in the body is not editable. Of course, that text inside that content editable div is. Okay. So let's take a look at that.

Okay, so in order to do this, I have to use my favorite web browser, which is Safari. You may have...

is the founder of WebKit. He's the founder of WebKit. He's the founder of WebKit. He's is editable and the bar is not. Poor bar. Okay, so now I come up here and I can start typing in the wonderful way that I do. And of course the bar is not editable.

Okay, so now if I were to just grab that content editable out and put it on the body instead, then lo and behold, of course, everything is editable, including the bar text. Where's the build button? Maybe I can build that software. Yeah, let's type that in. Okay, so again, just a really pretty simple example.

So now, Let's see, let's, let me save that example. Yeah, let me save that example for a second. Can we go back to the slides for a second? So now, you may be asking about Content Editable and Set Editable. Well, as a developer, which one--which one do you want to use? Which--what's, you know--and the kind of a very simple way of thinking about it is that Set Editable is for you if you're an app developer and Content Editable is for you if you're a web developer.

It's just sort of your hooks, your sort of one-line hooks to get into the features that editing makes available. Okay, so if you're an app developer, you're probably not going to be interested in content editable because you're going to be doing things in IB and writing Objective-C code.

But as a web developer, Content Editable is really sort of important for you. Now, one interesting note about Set Editable, or actually three interesting notes about Set Editable, is that the setting lasts for the life of the web view. You throw that switch once, and it's all done. You don't have to do anything else.

An interesting thing about it, too, is it doesn't alter the DOM. You might think that it's sort of a naive sort of first cut at Set Editable. It just goes in and sticks Content Editable in on the body tag of the document, but it doesn't do that. It sort of does things sort of underneath the covers in Web Kit.

So the idea behind that is that we want you to be able to load documents from the net, for instance, into an editable web view, and then save it out, and then not have it be editable by every single time. So we can do that with everybody who might load that in some other app, which maybe is not an editor, but just a viewer. One last thing is that setEditable overrides any document attribute that may set contentEditable, for instance, to false.

Okay? So, Settable is, again, is a big switch. And, again, is used primarily for use for you as app developers. Okay. So let's talk a little bit about editing with JavaScript. So now we do have a new selection object available in JavaScript. And we support these editing commands, these JavaScript editing commands, which you may have seen before.

These were made available first, I believe, by Microsoft. The documentation that we used to figure out what we're going to do with this feature is the Microsoft documentation on editing commands for JavaScript. Now, the first one there, that exec command, is one that we're going to look at a little bit further in the demo. And here's an example of one, one use of it.

So now in JavaScript, of course, you just get an element by ID using the DOM. You get a selection. You set the position. And now you just say document exec command, insert text, and there you go. Now, the interesting thing--one of the interesting things about this is that this works just like the high-level editing commands that we looked at in Web Kit. It just operates on the current selection. Okay, so that selection object is really essential in many ways to making this work.

Okay? And so these are the command identifiers that we support. By command identifier, insert text in this exec command example is a command identifier. So these are the command identifiers that we support. You will note, if you were to go and do a comparison with the command identifiers that Microsoft makes available on their website, that this is only a selection of them. But these are the ones that we found for right now, the ones that are going to be most useful to us in sort of getting to where we want to go for this release.

Okay, there's a bunch of neat things that you can do there, and let's have a little demo of this. No, I don't want to close. Or maybe you do, maybe you just kind of want to leave. We can just go to the closing now. Okay, so, Okay. So let's take a look at this.

Wow, that's really exciting, isn't it? Wow. But what this is doing is this actually starts as a much sort of simpler document. Let's take a look at this. And I've set this up so that I can make each one of the JavaScript editing commands that I issue wait a little bit before issuing the next one.

And so that document, as you can see, is completely built up using the JavaScript editing commands. As you see here down on the bottom-- I can make this even a little bit bigger. Yeah, I can. Let me make it bigger. Good? Good size? All right. So you can see the document starts with just an empty div. There's nothing in it at all.

And the onLoad handler in the document just goes and says, you know, "Run editing demo." And all that it does is, you know, starts going and, you know, I've got these character, you know, type character command. It's really, you know, it's a little bit... takes a little bit of looking to see here let me just take off the wrap to see How that all works, there's some stuff in there to make the delay work correctly, but as you can see, it's just Document Exec Command, Insert Text, and then I've got a CAN string that I'm inserting. So that's all it does there. You see the bold command. I've got it selecting all and making everything bold.

and blue document get it open by ID. You can see that not only can you use the new JavaScript editing commands that we're making available, the exec command and family, but you can also use just the straight up sort of JavaScript DOM. Here's now some JavaScript CSS support to just go in and just set the style on an element just by using the JavaScript support that we have available. Setting something blue and that's it. So you see that I just go in here and type a command, make it bold and then make it blue. That's all that it does.

But I think you can see that with the support for going in and making selections bold, it'd be pretty simple to go in and make that sort of that little, you know, bar, you know, bold, italic, underline, maybe some font information up in there, and pretty simple to make an editor in a web browser.

That can support rich text editing. So now, going back to that other demo that I skipped before, you know, something that, you know, may be interesting to you is to say, well, okay, so now I've got an editable widget in my document. Now, how do I get that content out? Let's say you want to make a little blog poster or something and you want to have rich text post for your blog. So now you've got a content editable div.

I mean, this is just the simplest example that you can imagine. So now I type foo, foo in there. And now I just hit a button and now I've got that content out. So just really, really simple to do that. Let's just go and take a look at that.

No, not that one. Simple as can be, you see that little submit button is not even a-- well, it's a button on click submit. And so submit, all that it really does is it gets the document by ID, the widget, and then the result, and then just sets the inner HTML from one to another.

So again, this new inner HTML support Just allows you to just go and get the HTML that's inside one of your editing elements. And you could, of course, I didn't do so here, but really just go forth and then do a post and submit that up to a web server somewhere. really, really just simple and easy to do. And of course, that's the inner HTML of whatever is in that content editable widget. As you can see, right, that widget was content editable.

Okay. Good. Can we have the slides back? Okay. Closing. I think we've got a lot of interesting stuff available in WebView, JavaScript, and in the DOM. Lots and lots of new interesting stuff for you to start using. Again, I want to say to you that all of the things that you've seen demoed today, available Safari 2.0 and Tiger, Safari 1.3 on Panther. That Safari 1.3 release is already available to you as a developer preview from the ADC site. And in the end, I think, well, I think HTML editing is good.

So now for more information about all of this. See, how fast can you type? Is that fast enough? Well, really, to just step through this here a little bit, there's lots of good information available on editing. You'll see that last note there is using Web Kit with scripting, some interesting stuff going on in talks earlier this week. There's using the document object model API. There's just a ton of new API available there for you. If you've not used the DOM before and you want to start getting into this, boy, there's a lot of neat stuff.

And then there's simple code. The examples that I've used up here on stage, I'll be working with some of our friends to make this available to you so that you can download it and see what a bad coder I am so that you can berate me next year.

That's my manager's manager's clapping for the bad coding. So this is my grand manager, right? So now, if you have questions, here's a point of contact for you. If you have apps that you want to start using this, you want to start getting into there, you want to really, really get involved with what we're doing, here's a good point of contact for you. And maybe we can hear some of your valuable feedback.