WWDC2004 Session 426

Transcript

Kind: captions
Language: en
welcome welcome to session for 26 HTML
editing with WebKit I am kenka shenda
and I work on Safari team working on
HTML editing this year and so the first
question you may have when thinking
about editing and looking at it as well
how did we do it how did we add editing
to WebKit well we extended the WebKit AP
is that we introduced here at the
developer conference last year very very
simple very very straightforward we just
took those api's and extended them
adding and editing so then the next
question is maybe you're asking is well
why did we do this well you know of all
the things that we could possibly do
with web technology you know why did we
choose editing as the as the thing to
focus on next well answer is very simple
we want mail app to use HTML as its
format for rich text Steve Jobs make
glad glad you glad you like that and as
Steve Jobs mentioned in in the keynote
on Monday this is a feature to really
really help us interoperate out there in
the internet with with folks using
mailers on variety of platforms and so
thanks that's that's all I have today
where is Friday you know you've seen a
lot of slides lots of transitions and
things you know probably six tickets are
that well you know really you know nice
WWE see slide well anyway wait is the
developer conference so I figure well
well what about the developers right way
you just hold the editing whatever so I
figured we could do a little Q a yeah
well okay so now the real the real
content to your HTML editing and
important thing I want to I want to say
before I get into the real the real guts
of it is that HTML editing will be
available on tiger that's with safari 2
point 0 and it will be available in
Safari 1 dot 3 on Panther
so everything that I'm talking about
here today will be available on the 222
releases there's no this if re 1 dot 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 year 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 when we thought about HTML editing we
figure we have really two audiences
there are application developers people
who want to take you know take you know
of you slap it in their application and
do editing in that application and have
the result the 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 something for each
of you you know depending on which
audience your 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 ms text view
okay and and then you will go forward in
program with that with Objective C now
for web developers use an application as
I said like Safari and and your your
focus will really be much more in
JavaScript who know what can you do with
JavaScript to kind of get in there and
and start doing need editing things and
without really having again direct
access to the host application so
something in there for for both of you
now as that last slide shows the real
the core of this is is Safari the Safari
technology you've probably seen this
slide a whole bunch of times the WebKit
is really the engine inside of Safari
that makes everything go but what you
probably haven't seen is that behind
this
oh yeah I hate that guy yo that's me
right yeah yeah anyway so um so yeah so
I'm going to leave that up there a
little bit so you get a little more
footage on that one okay okay so now so
now dears there's a bunch of cool stuff
they're all seriousness there's a bunch
of cool stuff that we're doing in HTML
editing and and really a good way to
think about it there's three different
areas where there is this cool stuff
where that cool stuff lips there's
webview in WebKit there's JavaScript and
then there's document object model the
Dom ok so now in webview just as a very
very high level as you may have sort of
god no gotten ahold of this idea by now
web you 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 WebKit
editing delegates so that you can get
control of the of the editing process
and make it make it do what you want for
your for your program there's also a lot
of interesting new stuff in javascript
is 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 will go into and
there's also improved the Dom underneath
when you 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 two support now available to you
okay 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 there's 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 before 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 to
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 is editing with with web
view now there's a new method on web
view that if you're an application
developer k one of those two audiences
is really now speaking to you as
application developers there's a new
method on web view set editable you pass
in yet and in every every page that then
will be loaded in that web view will be
editable this is very very simple as
just like one big switch could 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 that's
up yes good okay so I have a little
program here that that I'll be using a
bunch to 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 web view that
that's it it's the simplest little nymph
I'll you could have basically and let's
see here I as you'll see what I'm going
to try to type I cannot type a very bad
typist so you know it starts to you know
the behavior of the application is very
very much like a text editor I can come
back here and undo yeah you know bring
up the font panel bring up the color
panel and I mean my selection there I
cannot yes it's true I I really cannot
let so let's make that a little bit
figure I cannot type so you see very
very very very simple so now let's um
let's you know to 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 they're making
it read 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
over to the demo here is this for that
for this at the the call out for the for
the you know the the document framework
and a nap kit will call out to this code
here window controller did load nib and
all I'm doing right there is home right
webview said edible yes every page that
then is loaded into that application
will will be editable and as an example
of that it's not just you know creating
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 and
as you can see I could just start coming
in here and start editing start editing
yahoo which i think is pretty neat so
now so now I'm going to take a walk in
the wild side I I don't actually know
that this one hundred percent gonna work
but let's just to show you that 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 you
know fully you know sir optimizes we
would like it yet so I've still got a
little job security going here but as
you can see just select all yahoo
changes the font and every file every
font and the chain on the page changes I
can just go out 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 it's just
very very simply one line of code every
page that's loaded then is 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 to see
what the features are now sort of the
next step is that now you've got that
web view 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
these I'd like to start talking about
all of those and and I'd like to call it
a webview editing methods right these
high level editing methods available on
on web view and these these methods
operate on the current selection and
they're undoable there's 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 web view
replace selection with markup string and
you could just pass a little hunk of
HTML on that string and the web you will
go and hand that string off to the
parser n puts that content right into
the document in the place where you have
a selection now beneath there are sort
of the steps that again a really pretty
high level of what is actually going on
on your behalf when you make a call like
that selection is saves off the
selection is removed markup this parse
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 web
view and so how many people are paying
attention right you're here you are
having fun now no okay 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 put in the app and and I'm just going
to start jabbering so and I've got a
keyboard come in 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 is a jabber in style and until 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 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 I'm doing you say 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 dysfunction
here to just go and pick out you know
make this little random jabber string
out of a dictionary that I put it
program 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 mark up 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
train string so again it's just really
really simple to now to you know put
make the webview editable on as a first
step and then as the 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
go and Jabbar and undo you didn't need
to do anything to make that work it's
just a nice convenience for you if your
if your needs are simple 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 each one of these operate on
the current selection so again just a
very very simple straightforward way to
start getting into the into the code and
start making things happening in in
editing okay let's go back to the slides
please okay so now we started kind of
doing some simple things with with
editing now let's get into something
that's you know some stuff that's
starting to get a little bit more
interesting and that's using the Dom
from objective-c okay so now this is
really using the Dom again we're still
on that sort of application developer in
stuff right now okay so this is again
using the Dom from objective-c as an
application developer now the dumb of
course for those of you who aren't quite
so familiar whether it's a document
object model at the web standard put
forward by the w3c same folks that do
xml and HTML and so forth and it's just
a programmatic interface to documents
now before tiger and really before of
course everything is is both going to be
available in Safari 1 dot 3 and Safari
20 so it's really just before those you
know the new work that we've done this
year this one method in blue there is
really the only way from web kit that
you could get in and and get into the
dom and that was through a little sort
of sideways door there by executing some
javascript and using using the dom from
javascript and passing that string off
to be evaluated by by WebKit it was
really the only way to get into the dom
now as I said before WebKit web kid 444
tiger covers all of Dom level two and
here are all of the Dom level two pieces
all of them little two modules that were
supporting and we've done as sort of
taken a pretty light touch on bringing
this code over into objective-c it's
just a very very simple mapping there
were a couple of things we needed to do
in order to know to resolve name
conflicts and things like that with some
constants but you'll see that you know
it's a very very simple straightforward
mapping of the w3c IDL files that you
can get off their website into Objective
C so now can you see all that now these
are are all of the classes that we've
added it's really all of those classes
from all of the
dawn modules so it's over a hundred new
classes that you can use from
objective-c let's search 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 with all
of the stuff from the standard IDL okay
as the w3c put it out but of course we
you know if you've done any you know
programming on the web at all you know
that there are non-standard extensions
there 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 on
the screen there's lots and lots of good
Dom stuff to get into now he's just a
you know a very very small you know look
at you know what we're doing you know
taking the source of a document you know
going over and making you know the Dom
tree out of it and that's really all the
DOM 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 don was a tree up of
nodes and some of those nodes are
elements okay now what is an element
well in element is a node that can have
attributes and attributes customize the
elements just like the image tags 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
this first object that you know if you
want to get into the dom you start using
it from web kids this is the object that
you really really need to get a handle
on first the domdocument because it's a
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 web views mainframes get the
domdocument off of that okay so now
here's just a little code snippet and
we'll be looking at our 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 their 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
start doing some pretty neat things so
let's take a look at a demo of that okay
quitting don't eat that okay so let's
take a look at an example of this i'm
just going to go back and i got a good
example here I think let's go look at
the pic stars website I can't really
wait for this movie to come out okay so
now all right then get rid of the font
and color stuff alright so now back in
my demo menu what I've got here is a
little lint link inspector and what this
what this thing does it just iterates
over all over the DOM and it goes you'll
actually see that some of the text is I
selected here in the in the inspector is
highlighting I'll actually even
highlight the images in the document I
didn't really do to 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 as you go in there and
let's take a look at how how that's done
so now using the Dom ok so now if we go
and look at that code example that I had
up there on the screen before this chunk
of co here is 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
domdocument create a node iterator with
it you see that there I've got a couple
of parameters I only want to see
elements only elements with attributes
because obviously a dom node is if it's
a link it's gotta have an HR appt so
it's an element nature of being an
attribute and now i have this little
thing here it's a it's a a dom node
filter a very very simple little part of
the code that we're making available
this will this filter will be consulted
for each Dom node that the iterator
returns to see whether or not the note
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
where we're making available with an a
tag and if it is I accept it if not well
then not I probably should have even
check to see that the a had an H
f to make it really correct as a link
instead of just an anchor we see that's
really pretty simple to get to get going
and then of course it just reloads the
table now to do to do the business of
selecting the Dom node that I select in
the table there's this little guy here
and why I wrote the code but I don't
even remember where I put it I think I
put that in in this this one here yeah
there it is okay every time I click in
the table again just a little hunk of
dumb go in there and create a Dom range
and again one of the objects were making
available select that note and now call
one of the one of the webview methods
that sort of again sort of bridges the
world of WebKit in the Dom just go in
and say pass off that range and select
that Dom range it's 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
and WebKit there's one other thing that
I would like to point out to you before
we move on and that you'll notice here
in this call to create the Dom node
iterator that that we have these bare
colons and this was the strategy that we
took for mapping the w3c IDL interfaces
into WebKit of course now naturally the
the IDL is really sort of more of a you
know it would probably Matt 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 as sort of another
way of doing that with the labels and
the colons and so we just decided to 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 we
you've known okay good can we have the
slides back then okay so looked a little
bit of a DOM and now let's look at a
little bit at using using the DOM and
using using all this code to start
styling text now all of the styles in
editing and WebKit are all based on CSS
okay and here's the jersey okay thanks
so now so now here is the object that we
use to to interact with the styles and
CSS Dom CSS style declaration it's used
to both get and set styles so now here's
a little example you'll see the the text
in the boxes this is some styled text
and here's a little snippet of CSS that
was used to style that text and taken
together that would be a CSS style
declaration and now you'll see that in
the CSS style declaration we have
properties and values we have font
family would be a CSS property and the
value of course would be x see that font
weight bold properties and values okay
so now here's another little example and
I'd like to introduce another idea
something that probably a lot of you are
familiar with but maybe not everyone and
this is the you know the notion of how
CSS you know styles are inherited as you
go down the Dom tree so we have the divs
which this was it surrounds this entire
piece of text is providing the font and
the font weight but the span just on the
blues text itself that's providing the
the color blue so now I'd like to talk
about a little bit about computed style
so now we can use CSS to set a style to
say well you're going to be bold but you
don't know really exactly how those
styles are going to work out until you
actually compute everything you compute
the whole the whole style tree
and so that text Blues is taking its
style again from two different two
different little snippets of CSS there
and so just very very simply put the
computed style of this file 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
dial Don CSS style declaration computed
style four elements 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 to work with the Sol system
you want to make some text blue well you
just build up that little CSS style
snippet style declaration with text
little methods 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 dome to access
style attributes so again this is just
now going in and using straight up Dom
element getattribute style and set
attribute the style attribute is just
setting it directly so you have a bunch
of options for working with that and now
let's do a demo of this
ok
okie dokie okie
okay so i have 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 which is going to go
through all of the all the elements in
the document and start telling me some
styling for 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 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 read I can
take this span here and say font family
times and that will update and become
time so it's 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 come over
here and make something bold well I get
a new bold elements in the and the style
inspector so again there's it's kind of
this interesting combination in a way of
of using CSS but there is sin 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
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 their 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 is that with our
delegates code you 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 in the code itself
okay really pretty really pretty simple
it's just going in when I typed into the
table itself i was using just the
straight-up Dom to just set the style
attribute you can see and ah there's one
more thing I can show you here so now if
i come down here you'll you'll you'll
see that this sort of little text area
on the bottom here is 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 from it for an element based on
something like it's selected in the
table pretty simple to get in there and
start working with that okay okay good
can we have the slides back please
okay so now as I just mentioned you know
we you know we're going to be making
some choices about how to apply markup
you know based on based on some things
that you that you asked when you
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 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 that 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 are again are all about
pending changes will 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 go and 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 into a default behavior
so the editing delegate is you can just
implement as much as much or as little
as you want in sort of standard Coco
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 Vito don't
do that or you can do take an
alternative action and return though 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 we propose to you so now here
are the is a listing of things that
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 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 lips
return yes return though okay so now
you'll see here now that what I've done
is there is a delegate call for whether
you should insert text and all this is
called this is called when you type you
can see on such a good typist and very
very simple if you would like to make
change the apt to be a read-only very
very simple eyes you no no no typing now
so now it's actually kind of kind of
better for me no bugs no bugs this way
one hundred percent perfect okay so now
let's say that's pretty simple and
straightforward now let's let's let's
let's do take an alternative action so
now you'll see that what I'm going to do
is we you know 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 one two or three
and just replace that with text instead
and return know so we'll see that lets
compile that up and see that see that
work look and so you see you know typing
goes on as as usual but if i type a
number one that does one two or three
i'm todd todd faster the typist just
look one finger and and so that's just
very very simple so so is that for the
code or for the typing whatever 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 and the kind of choices we
make it you can kind of fix it so so
lots and lots of delegate methods
available CLE 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
I an alternative style if you don't want
any D 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 lots of
good stuff there okay not another demo
we're going to go on to the little bit
more information about the editing
delegate so you may be asking when do
these asked 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 using the WebKit
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 no
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 asking methods gets
called now those towel methods they are
always sent and we use the NS
notification system to do that and again
it's a standard Coco fashion if you set
a delegate on the web view you get auto
registered for the notifications that we
that we send and here's what we have for
that so begin editing and 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 it do a little
demo of that back when back when I was
looking at the at the computed style for
for an element the you know when come in
here and you know make something bold
and then go over and and and select this
well it's actually that's that's not
not a hundred percent true
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 textile sort
of mimicking the basic sort of bold
italic thing that you'd see in just a
text that array so you'll see as I as I
arrow through the document that the
that's a little bold button update 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 so 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 you'd 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 behaviors that
you're probably going to want to
probably going to want to do in your
application okay kind of the slides back
please
okay okay 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 one of the interesting things
that 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 what
I've already said these methods used to
DOM and their compound operations more
than one Dom call and that they're
undoable again just very very simple a
code example of how you could do it you
could call webview delete selection and
then just call undo manager and tells
you undo so now when you want to start
making your own undoable Dom operation
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 dump
equivalent is just not good enough and
again this is just part of the 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're 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 you
as I hope you will see all righty
so let's look at an example of this
right
I 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 delete the 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 is working and this is done just
using straight up Dom calls so let's
take a look at the at the code to make
that happen so I've got this little
class here that's called undoable delete
note operation where do I get the name
from that from okay and so you see this
class all but 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 what 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 on to it it's probably the only
thing that is rest that node so I retain
it and then make it undoable by just
saying okay well just go and register an
end do with with target in just as sort
of standard Coco fashion undo action so
that when i go and undo i just go in and
put that thing back just a pen node
again just using the objective-c dom and
register for redo the redo itself it
just takes a note out again it's already
got a reference to it so it's just even
simple
in the action itself and go and do that
so now that you know the kind of you
know the neat thing is you can you can
delete and you know you can go and you
know do other things and it just all
just works with the with the undo system
as you would 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 we just you know it just
could we do it because we care okay okay
great that's what what I have for that
let's go back to the slides okay so now
is a bunch of scenarios you'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 in a fork in taking this new
technology and putting it into your
application so now going to switch gears
a little bit and start talking about
what you can do is a web developer to
start working with this technology it's
all about making web pages editable okay
so now just stepping back a little bit
to do a little dumb terminology HTML and
Dom terminology so that little HTML
snippet there we have a block that div
is a block of course P tags or blocks
body is a block then we have an inline
that little D tag that's making that
text bold that's an inline right so now
as we looked at before attributes
customize elements ok so now content
editable is in editing attribute that
you can apply to a block to make that
block editable ok it doesn't apply to in
line so you can put it on spans you
can't put it on beat eggs or image tags
I guess it's kind of need to maybe
making image editable but we're not
doing that not this time around and so
content editable is the the little HTML
attribute that you need to put on an
element of blah
block level elements 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's not editable
of course that text inside that content
editable div is ok 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 used that before
okay that's actually a let me even do
this one first okay so this is a pretty
simple example looks just like the slide
really you'll see that the the foo is
editable and the bar is not poor bar
okay so now I come up here I can I can
start typing and 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 including the bar text
where's the build button maybe I can
build that software here type that in ok
so again just a really really pretty
simple example so now let's say let's
let me save that example
yeah let me let me let me save that
example for a second we go back to the
slides for sir ok so now you may be
asking about content editable and said
editable well as a developer which one
which one do you want to use which
what's you know and it kind of a very
simple way of thinking about it is that
said 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 hook you're sort of
one line hook to get into the features
that editing makes available ok so if
you're an app developer you're probably
not going to be interested in
contenteditable because you're going to
be doing things in ivy and writing
objective-c code but as a web developer
content editable is really sort of
important for you now one one
interesting note about said editable
look actually three interesting notes
about said edible is that the setting
last for the life of the webview you
throw that switch once that'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 first at said editable just goes
in and sticks contenteditable in on the
body tag of the document but it doesn't
do that it's sort of those things sort
of and you know underneath the covers in
WebKit okay so the idea behind that is
that we want you to be able to load
documents you know from the net for
instance into an editable webview and
then save it out and then not have it be
editable by everybody who might load
that in some other app which maybe is
not an editor but just a viewer okay one
last thing is that said editable
overrides any document attribute that
may set contenteditable for instance to
false okay so senator ball is again is a
big switch and again is yours primarily
for use for you as app developers okay
so let's do a talk a little bit about
editing with JavaScript so now we do
have a new selection object available in
JavaScript and we support these these
editing commands these JavaScript
editing commands which you may have seen
before
these were made available first i
believe by by microsoft the
documentation that that we used to
figure out what we're going to do with
this feature is the microsoft
documentation on 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 in
the demo and here's an example of 11 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 a document exact
command insert text and there you go now
the interesting send one of the
interesting things about this is that
this works just like the high level
editing commands that we looked at in
WebKit 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 identify insert text in this
exact 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 the
web 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
and 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 it oh no I
don't want to close huh or maybe you do
maybe it's kind of run away where you
just go to the closing now okay so
okay so let's take a look at this well
that's really exciting isn't it well
well what this is doing is this actually
start as a much sort of simpler document
let's take a look at this and I 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 you can make
this even a little bit bigger yeah I can
only 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 but 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 it's a little bit takes a little
bit of looking to see here let me just
take off the rap 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 there's not 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 D 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
javascript dumb here's nothing
JavaScript CSS support to just go in and
just set the style on an element's 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 you know type of command
make it bold and then make it blue and
that's all that it does
but I think you can see that with the
command 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 to just bar
you know bold italic underline maybe
some fonts information up in there and
pretty simple to make a editor in a web
browser that can support rich that's
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 I know aight aight
foo a foo in there and now i just hit a
button and now i've got that content 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 it
can be you see that that that little
submit button is not even a buzz is well
it's a button on click Submit and so
submit all that it really does is it
gets the gets the document and 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 up to a web server somewhere
really really just simple and easy to do
and of course that's the innerhtml of
whatever is in that content editable
widget as you can see right that widget
with content editable
okay good can we have the slides back
okay clothing 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 got
all of the things that you've seen demo
today available safari 2 dot 0 and tiger
safari 13 on Panther that Safari one not
three 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 is good
so now for more information about all of
this see how how fast can you type that
well really to just step through this
here a little bit there's a lots of good
information available on on editing
you'll see that last note there is using
a web kit with with the scripting some
interesting stuff going gone on and
talks earlier this week is using the
document object model API there's just a
ton of new API available there for you
if you've not used it on before and you
want to start getting into this for
there's a lot of neat stuff and then
there's a simple code the examples that
I've used up here on stage you'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 quarter i
am so as you can to rate me next year
yeah yeah that's my managers managers
clapping for the bed coating so there's
my grand manager right so now if you
have 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 their you
want to really really get involved with
what what we're doing here's a good
point of contact for you and you know
maybe we can you know hear some of your
valuable feedback