So welcome to Text Input on iPhone. I'm Ken Kocienda. And let's get started. So you've got your terrific iPhone and you Start it up. Start up one of the apps on the iPhone. Say something like SMS. Safari, you do a search or enter in a URL, or you go into Maps and you type in a map location, or you're in Contacts and you enter in a phone number for somebody.

So, what's the common task in all of these things? Well, it's the keyboard and text input. So, during this session, that's what we're going to be talking about. I got out my purple crayon just so that we could kind of really focus in on that area, the keyboard and text input. So, that's what it's all going to be about, text input on iPhone.

And here is really an overview of everything I'd like to cover during this session. So to start off, we'll be looking at text input on iPhone from a user perspective, okay, as you are using the phone, interacting with the applications. And then I'd like to change over from that and look at what you can do as developers.

Look at things from the developer perspective, what the big pieces are, and how you start hooking things up so that you can take advantage of all the features that we've got on the platform for text input. And then after this, we'll be going over some examples, be looking at some code, and then finally, I'd like to look at some things that sort of go beyond those very first steps and tips. And tricks, so that you really get going and take advantage of what we've got and get started making your own applications. So if you look at things, I can't go back to this for a second, look now from the user perspective first.

The question that you might ask yourself first, if you've never seen an iPhone or you've picked it up for the first time in the store, is that, you ask yourself, how does it work, and what are the features? It's a different text input system than it is available naturally in a computer and certainly other cell phones.

So let's go over that a little bit. The first thing, of course, you'd notice is that the keyboard is virtual and that it appears when needed. Okay? Whenever you sort of go from an application into a situation where you need to enter text, the keyboard appears. Naturally, when you turn the phone into landscape mode, the keyboard appears.

In landscape mode, we've got portrait and landscape keyboards for all of our languages. Okay? You then note if you, once you've got some text typed in, that, well, we've got a very simple selection model. You use this text loop or magnifier to move the insertion point around to make a correction, move to someplace else. So a very simple selection model. Ken Kocienda Okay, we've got many keyboard types here, and that those keyboard types are adapted to the task at hand.

Here, you see just an SMS, a sort of free-form text situation, right, just a plain sort of QWERTY keyboard. Ken Kocienda If you go over into Safari and you enter in a URL, you'll see that that area on the bottom, right, changes from the space bar. It divides up into the three keys that are really going to be optimized for entering text. Ken Kocienda And you also notice that the return key, right, changes from return to go, really, again, adapted to the task. Email, very similar situation. Those keys on the bottom are adapted then to typing in an email address, space, add, and dot.

Ken Kocienda Okay, this is a keyboard also optimized for typing in phone numbers, okay? And we've also got a couple different looks, actually two different looks. The standard ones that we've seen, sort of that standard blue look, but then this is a look that is suitable for alerts.

Okay, so type in a password as an alert. You just get that keyboard. And then, of course, we've got this really sort of highlights the fact that these alert keyboards are translucent. Some of the content from behind can show on through. So we've got a whole number of keyboards available, and they adapt to the task at hand. Now, changing from that to where the text is going.

Okay, so we've got single line editing fields. We've got multi-line editing fields, right? And one thing that is worth pointing out in this situation here, there's only one text style per container. So if you've got a text view or a text field, right, just one style in there, one font at one size.

There are also quite a number of settings available. So if you go into the Settings application and go and click on the keyboard section, we've got a couple of controls there that can change the behavior of text input in subtle but useful ways. And then if you click through, you'll see that we've got this long list of keyboards and input methods available for a wide variety of languages.

It's really very exciting to announce that we've got support now in iPhone OS 2.0 for 20 different languages, and that there's full dictionary support for each. And that is new for iPhone OS 2.0. And here is the full list of languages that we have available. Hopefully, there's no Klingon up there, so I don't know if you need to squint to see it, but we've got a nice full list of languages available. Hopefully, one of those will be available. And that will be your favorite. Now, about the keyboards themselves.

So now we've got English standard, QWERTY keyboard standard for English. We've got French, a XERTY keyboard standard for French. We've also got a lot of support for languages. You'll notice that as we switch to the Swedish keyboard, the return key and the space key change to be in the appropriate language for the text that's being input. We've also got Russian support. We've got a Cyrillic keyboard now, support for Korean text input.

And that really sort of covers the different keyboard options that we have. But of course, some languages really sort of need more help than just a standard keyboard. You really need sort of a full input method, and we have that also available now on iPhone OS 2.0. Ken Kocienda And that really sort of covers the different keyboard options that we have.

But of course, some languages really sort of need more help than just a standard keyboard. You really need sort of a full input method, and we have that also available now on iPhone OS 2.0. We have Chinese pinyin, and we have, it's very, very exciting, Chinese handwriting recognition, both for simplified and traditional. So what I'd like to do is to just give you a quick demo of some of those things in case you've not seen it before. So if you can go to the demo machine.

You'll see here now that as I type the phonetics for Tokyo, it comes up as the candidate. I can click it. And then there's another wonderful feature here, which is after I've typed Tokyo, it gives me an option for, well, what are some things that would follow on after Tokyo? I don't know how well you can see in the back, but I've accepted the Tokyo. And then the first suggestion here is for station. So maybe I want to talk about Tokyo station, go and catch a train to meet up with Tokyo. some people, something like that.

Okay, and then lastly, I would like to, oh, maybe before lastly here, just show you a very, very little bit about Japanese KANA input. Maybe an example like, like, like, yeah, here, a single character. And then, let me just go back and go over that more slowly. So now I've got this one syllable. Now, naturally, there are a large number of characters, which might be the one that I'm looking for.

And so we've got this expanded candidate user interface in case the character that I was looking for did not appear in those first couple of choices under the text input right as I typed in the character. So you see here I've got quite a number of characters. Sure, eight is the one that I was looking for.

Okay, and then lastly, it's going to be a little bit hard doing it with the mouse in the simulator, but you'll see that even so, that with Chinese... Handwriting recognition that even with the mouse it recognizes the character that I'm looking for. Middle, and again similar to Japanese text input, we've got these suggestions which come after you choose and confirm a candidate. Here I can go very, very easily and type in the three characters for Chinese person. Okay, by just typing in the one character and then choosing the selections from those follow-on suggestions.

Okay. Can we go back to the slides then, please? So from the user perspective, here are just some of those top ideas that will come up. What do you think about when you think about the text input and the keyboard experience on the iPhone? Well, first of all, the keyboard appears when it's needed. It's adapted to the task at hand.

Hopefully it supports your language, so I support for several languages there. And then, as I highlighted in particular for the new Asian language support, how it provides assistance to you. Not only assistance in recognizing your handwriting, but then assistance in following on, helping you enter in the text that you want to enter.

And then, of course, it should also be clear to you, hopefully that's one of the reasons why you're here, is you think that text input is essential to your application, whether it be Mail, Safari, those really, really popular built-in applications. But then, of course, your application, the applications that we hope to see from you after you leave this conference and go back and start getting busy, getting to work.

So with that as an overview of just give you a little, you know, a view of what those new features are if you've not seen them yet for iPhone OS 2.0, just cover those from the user perspective. Now changing over to the developer perspective, to your perspective, as you're going to be making use of all of these features, well, the question that you have to be asking, well, how do I control all this? Well, first of all, I'd like to say before we sort of dip into what these features are, there are some things that, well, the frameworks and the system will do for you automatically, like this keyboard animation. Sort of a typical scenario in application. Application is notes here. If we go and click on that Done button in the upper part of the screen, you click on the Done button, the keyboard will just animate out automatically. That's not anything that you need to worry about.

The keyboard comes and goes as it's needed. We'll talk about that in some detail as we go later on. Another important thing to point out... is that there are aspects of the system that are not under your control. And really, a couple of these settings here are good examples of that.

But really, most importantly, it's the language and the input method. That's under your user's control. So there is no programmatic way to say you must use Chinese handwriting here or you must use English or anything like that. The language and the input method, and it's particularly important for those languages that have more than one input method, as we saw, like with Japanese, that is always under the user's control.

Okay, so then what is under your control? Now to talk about that, I'd really like to focus the discussion on the text containers themselves. So what do I mean by text containers? Well, things like the single line editing field that you'll see on the top of many applications. That is a UI text field, and that's a standard class in UIKit for single line editing. Okay, for multi-line editing, as you'll see in notes, UI text view. That's the class in UIKit for multi-line editing.

OK? And then also, really, we have some amount of control also over form input elements in web pages. So those also sort of count as the text input or the text container form input elements in web pages. So text containers. Now, if we sort of take a look inside of these, Here's really where we start getting into the developer control, what you have available to you to sort of make what you will of these text containers.

And really, for those of you who are familiar with Cocoa programming, this will seem very, very familiar. These classes are Objective-C classes. They're UI kit classes. And the way that you manipulate them is mostly delegates, notifications, and methods. Again, very, very familiar to Cocoa developers. And to those of you who are new to Cocoa, I'm sure you're hearing a lot about these kinds of things in other sessions. So that's really pretty standard.

But then what's new and different for text input on the iPhone are these things called text input traits. What are those text input traits? Well, text input traits are represented by a protocol in UIKit. And that protocol is conformed to by UI text field and UI text view. So they both adopt this protocol, UI text input traits.

And here's what these text input traits are. There are these aspects of text editing, sort of the characteristics of a text input container that then sort of adapt and change what the keyboard does and what the text input experience is. This is really the way that, if you remember those slides that I showed before about how the keyboard adapts to the task at hand, well, this is really your main control for making that happen.

text input traits. And so here's an example of text input traits in action. You're in Safari. And you click up on the URL bar, and you'll notice that when the keyboard appears, that it shows the space bar. In place of the space bar, it has the special function keys, the dot, the slash, and the dot com. And that the return key turns from return into a Go button.

What's really good about this view is that if you then just go and click in that Google field right beneath it, naturally the keyboard changes. Sort of back to the default keyboard, back to the regular space bar, but then the return key changes to be a search specific button, in this case Google.

Okay, so now those are really the pieces that are under your control for sort of starting to get into this text input system and making it work for your application. Okay, so now you start, you know, if we want to start now thinking about, well, what's the process for using these things? Well, one of the interesting things that we realized as we were putting this system together is that really designing your text input is really, is a design time activity. It's something that you do in Xcode, in Interface Builder, as you're building your application, as you're designing how it looks and how it works. Okay? And so let's take the example of wanting to make a URL field like is in Safari that has a URL.

And so you're going to have a button and a go button. So you put this together either in Xcode, in code, by writing the code, or in Interface Builder by using Interface Builder's inspectors to set that up. Now, at runtime, after you've built this and you've debugged it, and now you've started up that app, now at runtime, when that text field becomes first responder, right, when the user indicates that, yes, this is the thing that I want to be in focus, right, that first responder, terminology, I don't know, folks who are new to Cocoa, don't let that throw you.

All that means is that I've clicked in that text field, and I'm going to get the little blinking insertion point there, yeah, now, and, right, the user has indicated that that's the thing they want to look at. Now, what just happened when that text field became first responder, right? Text field becomes first responder, and the keyboard automatically appears.

And then that process of those text fields and the keyboard hookup finishes, and the keyboard will adopt those traits that we've assigned to that text field. And so, yes, again, right, in this situation, that's how the space bar changes to those special function keys, and that's how the return key takes on that go label, right, by doing those traits. And again, right, same thing here.

By clicking down, you change the first responder, you change the area of user focus, and of course, the keyboard will adapt accordingly. Okay? So here are the three main pieces, text field, text view, and web forms, and the four sort of main pieces of developer control. So, there is just a very quick overview of what you've got at your disposal to start making text input work for you.

What I'd like to do next is take a look at some common tasks. How do we really put this into action in a real example? Okay. So to do that, I'd like to give two quick demos. What is going to be a UI text field demo, and then we'll have a quick web demo.

So now, about this UI text field demo. What is it? What am I going to show you? Well, I'm going to show you an application, very, very simple application that looks like this. It's got a text field on top and sort of just this color field beneath it. And what I'd like to do is that when I click into that text field and type a color into it, that then the field beneath it will change to correspond to that color, either red or blue, so forth. OK, so now let's take a look at that.

Okay, so let me just sort of start up this demo first here. Now, it doesn't work right now exactly as I showed in the slides. There is actually a text field there, but it's sort of not showing up, and it's not really going to look and feel and sort of be as easy to use or as helpful as we saw in the slides. So let's take a look at how to really make that happen.

Okay, so really here is pretty much all of the code in the application so far. But you saw that the text field when I was running the application didn't show up. And so I've got a couple of snippets of code here that I'm going to add in that are going to help us out a little bit.

Okay, now thinking back to that slide that we've got methods and delegates and notifications and traits, right, as our main pieces that we've got for developer control over these things. Well, here's an example of using some methods on UI text field. Okay, so I'm changing the border around the field to make it a bezel, make it visible. I'm also adding a placeholder, a little piece of descriptive text that will show up in the field when the field isn't active or when there's no text in it to sort of help the user, prompt the user for what kind of information should really go in there.

And then I've also used another method on UI text field to set a clear button. So that just is sort of automatic feature that's available as part of UIKit so that you don't have to do it. Sort of a common piece of functionality we've built in a little clear button.

Okay, so let me just build and run this to show that we're getting a little bit closer to where we want. So now that field is visible, and again, I've got that placeholder in there. I click into the field. I type something. The clear button shows up. I can click the clear button, and the text goes away. So great.

So that's making some good progress. So now the next thing that I'd like to do is point out that I've also taken advantage of some of the traits that are available on the text field. I've picked out a couple of traits that control the auto-correction behavior and the auto-capitalization behavior, sort of these assistive bits of technology here. This is just an example of me turning them off.

Okay, so if that's something that is important to your application, a lot of times use cases things like entering in URLs or, you know, maybe if you have a license code for, you know, an application or something, something that's free-form text but isn't anything that really the dictionary could guess at, you can turn off auto-correction or auto-capitalization like that. Okay.

Now, one other trait that's illustrated there is auto-enabling the return key. So now when a text field is empty, this will actually disable the return key so that pressing it just won't do anything. And you'll see that now I've changed the return key to go. So let's just sort of go back to the application as it's running, and you'll see that the return key is disabled with no text in it. Now it enables as soon as I type a character.

Click the clear button, it disables again. Okay, and then lastly, what I've said, I'm now setting this up for delegation. So this object, this sort of application delegate here is now going to be the delegate of that text field, and that's just sort of setting us up for some later work.

So now, what part is that later work going to play? Well, you'll see that if I actually type red in here and click go, well, nothing happens. And it's actually two bits of nothing happen there. Well, first of all, I clicked the go button, and we didn't go, right? And second of all, I typed in a color that the application should recognize by design, but the field is still gray. Okay, so now let's go and take care of that.

So now back in my example code, I've got a couple of other little snippets here. One for setting up a couple of delegates. Okay, so now I've got two delegates, one that is going to respond, that's going to, the delegate is going to get this callback when the user hits the return key in a text field.

And another, or I should point out in that delegate, one of the important things that I do, one of the two important things that I do, and there are two lines of code, is that I resign first responder. Okay, so this is just a method that's on UI responder, UI text field subclasses UI responder.

This is the way to make the keyboard go away. Okay, the keyboard appearance is again automatic, and it's tied to whether a text container is the first responder. So here, by clicking the return button, you resign first responder, the keyboard goes away. Okay, very, very simple to do. This is how you do it.

Okay, and then next I've just got a little bit of processing after the field end goes, go and read out the value of the text field and do some sort of trivial little string matching and set the color of that field appropriately. So let's actually build and run this version.

Okay, so now I click up in the text field. Naturally, again, you see that the keyboard comes on to screen when the text field becomes active. And now, when I go and click go, the two correct things happen. The field changes to red, and the keyboard is dismissed.

Okay, now one last thing that I'd like to point out here is that, right, so I click the go button, and you'll see that this field is taking up Really all of the content area on the screen. And when I click back in to the text field and the keyboard comes back onto the screen, well, that field is really still behind there.

And there are going to be times in your application where that's fine, and there are going to be other times when that doesn't really work. What you'd like to do is you'd like to change your application so that you're really just using the amount of space not taken up by the keyboard. Okay? So there's a way to do that as well. Let me illustrate that. The way we do it is that we've got some notifications that get sent.

When the keyboard appears, when it's about to appear, and after it's appeared, and then also when it's about to hide and after it's hidden. So here what I've done is I've added just some very, very simple standard notification signups here, adding observers for UI keyboard did show and UI keyboard did hide. And then I've got a couple of method implementations down here that are going to run when those notifications get sent.

Okay, and really what I'd like to point out is that in this UI keyboard did show, all I'm going to do is I'm going to take that color field and I'm going to adjust the size of its frame. So that it's sort of more suitable to the amount of area that's left after the keyboard has come onto the screen. So let's build and run that.

Okay, so now when I click into the text field, you'll see that the field changes size, sort of animates up. I type this time, let's say, blue. And I go, the field changes color appropriately, and then after the keyboard orders out, it adjusts back down to full size.

Okay. Good. Okay, can we go back to the slides, please? Okay, so now what did this show? This actually showed examples of all of these traits, methods, delegation, and notifications, an example of really all of them. Really, the tools that you have available to you to really make the most out of text input on the iPhone.

Now what I'd like to do is really kind of just go over this code a little bit more, but really with the purpose of focusing on, well, where can you find this code and information about it in all of the APIs and the API documentation? So if we go and take a look at this sort of text field setup, you'll see that right there I used methods on UI text field. So you can find that in the UI text field documentation. The traits can be found in UI text input traits. That protocol is documentation.

And then the delegate, there's again documentation on UI text field delegates. So that's where you find out methods like text field should return and text field did end editing. Okay, and then finally, these UI keyboard hide and show notifications are actually documented as part of UI window. So I just want to make sure that as you leave here, if you're going to try to put some of this together, that you realize that there are sort of different places where the documentation are. And sort of that you have a good idea of how you can gather all of this together and actually make use of the code.

OK. Right, so those pieces again. OK. So now, one thing I want to point out is that even though my example was about UI text field, if you wanted to make a very similar example with UI text view, there's very, very little that you'd have to do. Instead of looking at the UI text field methods and delegation, you look at the UI text view methods and delegation, the traits, and the keyboard notifications, that's pretty much the same.

Okay, so now there's an example that uses Xcode to sort of type all of these things out. Well, what about Interface Builder? Well, Interface Builder actually has very, very good support for the things that we've looked at so far. So you can just use drag and drop and then use the Interface Builder inspectors to set up many of the things like placeholders and borders on the text field and return key auto-enabling and so forth. Okay, so now that's about UIKit. What about the web? So if we can go back, yes, thank you. Back to the demo machine. I've got a little example here in Safari, a very, very simple web document that's got a form in it.

And when I click in the form, naturally again the keyboard shows up, and I can type in, and I've typed in RHE, yes, and I get my nice auto-correction to the again, right? So we've got those same... The same sort of assistive technologies available for entering text in the

There are two that I would want to point out to you. One is control over auto-correction, and one is control over auto-capitalization.

As you can see here in this example, I've got auto-correction on. I can turn auto-correction off and sort of reload that document, and you'll notice that then I type my RHE example, and it just leaves it as RHE. So again, this would be most useful to you if you have sort of a piece of text that really isn't part of any language, maybe a URL or some, you know, maybe some string for a game that you're writing or some such like that.

OK, can I go back to the slides, please? OK, so the story is a lot simpler when you are doing web page design. The text input story is a lot simpler. Now, I do want to point out one thing, is that we had some documentation that was out there that maybe if you're really enthusiastic about text input and web page documents, that for a while there we were looking at the name attribute on form elements. And unfortunately, our experience shows that that really doesn't work.

It's not a very useful heuristic. And so it no longer looks at the name value of a form field to sort of decide what keyboard to show. We had some code that would show if you had a zip field that would show the numbers. And again, that heuristic was not powerful enough.

So I guess one of the things that I would ask from you all is help us improve this and sort of bring some more of these text input controls over to web page documentation. I'd really love to get your feedback on that, either in this session or in the future. I think we'll have a lot of questions about that in the next session or later on in bugs. Okay, so there's common tasks.

And so finally, what I'd like to do is talk about some tips and tricks, some things that Now that you've sort of gotten the basics and you sort of understand, you started maybe developing your application and you've got the basics up and running, that first version, what are some of those things that maybe you might want to know to sort of enhance your application and really make it better, really sort of bring it up to the level that you'd like to deliver to your users? Now, the first thing that I would like to urge you to do, if you have sort of more interest in this area, is to come to the Text Input Lab tomorrow at 2 p.m.

So now getting into the tips themselves. We saw the example of a UI text field about placeholders. So if you're going to put a UI text field into your application, use that placeholder text. Okay, it's really, you know, if you sort of think about the iPhone sort of user interface sort of scenario, you just don't have as much screen space to have that descriptive text next to your text field as you would say in a Mac application. So this placeholder text really takes the place of that feature or sort of that user interface paradigm on the Mac. So use that placeholder text. UI text view, however, does not have placeholders.

And that's just usually because of the scenarios that we found, it's just been sort of easier to sort of introduce. It's sort of clearer. You open up notes, and it's very, very clear that you type into the note, whereas in UI text field, many times you have many of them, say, in like an address form. Really very helpful to have that placeholder text there.

But don't go looking for it on UI TextView because it's not there. So now, I guess what should be obvious is that if we're looking at text input, which is what we've been talking about all along here, is that, well, that's in the situations that you need to edit text.

Well, what about those situations where you simply maybe want to display text instead of editing it? So I thought it would maybe be a good idea to take a quick diversion off into some of the support that we have in UIKit for text display. Okay, and here are the three pieces: UILabel, the NSString additions, which are defined in the UIStringDrawing.h header, and UIWebView. So now, what are the three use cases for these? Well, if you want to draw static text, I suggest you use UILabel.

If you want to draw and measure text, perhaps dynamic text that you're generating from inside of your application, use these NSString additions defined in the UIStringDrawingHeader in UIKit. And then finally, if you want to draw multi-style text, right? If you remember I said before, and of course, if you're already familiar with the iPhone, there is just one text style per container. But in those situations where you do need to display text with multiple styles or sizes or colors, what have you, you can use UI WebView for text display. Okay? So I've got an example where I show that. Let's get rid of this other one.

Okay. So just build and run this. I've got a demo for each of UILabel and UISTringDrawing and UIwebView. Let's just go and look at UILabel. Here's just a very, very simple situation where I've got, again, just two sizes, a large size and sort of the smaller size text beneath it.

Static text, it's not editable, I can click on it all I want and the keyboard won't come up. And of course this is just very, very simple to use. It does have some useful features though, particularly in this multi-line label example. I just want to highlight that there's more text in that label than is being displayed.

And if we click back on that field, you see that I've limited it to four lines and that we've got some truncation on the end there. So that can be very useful if, again, you're generating some text in your program, and you know it needs to fit in a certain amount of space.

And perhaps it's even text that you're accepting from your users. Maybe they type it into some other field, and then you display it elsewhere. So this can be a very useful way to sort of manage your space and display the text in a way that's suitable for your application. Static text.

OK, and then the string drawing-- this is an example which measures text, that again, that I'm going to be typing into the application and then displaying it. What I'd like to do here also is sort of, I guess, a diversion on a diversion, is that you'll notice that all of the demos that I've been showing so far, and unfortunately I don't have one of those cool projectors in this room, but it's good for that reason because I get to demo the wonderful iPhone simulator, which is running all of these demos.

And it's really great for developing. Well, one of the features that you'll see me using now is that I'm going to use the keyboard on my laptop here to just type in really quickly. And you'll see that as I did that, that I'm getting autocorrection, that I type in this and that field is set up to do autocapitalization. So the full engine is running, even though I'm not actually poking with the mouse.

So it's really sort of a really fully featured, fully integrated simulator environment. So I'm just going to type a little bit of text in here and then click the Go button. And then here's an example of measuring and laying out and drawing some dynamic text with a little bit of a-- where each word is in a bubble. If I click back in the field and sort of type there, you'll see that it just sort of updates and measures the text and can redraw it.

So again, just sort of focusing in on the important parts of this little demo, the big important parts that I'd like to point out are measuring, getting the size of an NSString in a certain font. The font is just the bold system size, 24 points. And this is just a little method that does a little bit of very, very simplistic line layout, as you can see. And then when it comes time to draw, that I just call this draw at point in my drawRect method of these individual word bubbles.

Alright, so there's just a little bit of a demo on using UIKit to measure and draw text dynamically that you're getting from your user in your application. Okay, and then finally, is a very, very, just about the most trivial example, but here's a web document. Well, you never know that I worked on Safari for years.

This was the web document that I came up with. But again, the example is just to show that you can display static multi-style text. In your application, if that's necessary. Here, I just loaded it from a markup file that is on disk in my project, but then here are the two important pieces.

Create a UI web view and load an HTML string that I built up, or in this case, just loaded a static one off disk. Right, so there's just a quick example of drawing multi-styled text. And I do want to point out that since you're using UI WebView, you have, you can certainly make a much more complicated example than I've shown here. You have full access to the entirety of WebKit there, all of the CSS and style features that WebKit supports.

to draw your multi-style text. Okay, can we go back to the slides, please? Okay. So moving on from that, I'd like to talk about text container positioning. Now, I showed a little bit of an example of that earlier with the keyboard when that color field changed its size according to the constraints, really, of the keyboard appearing and taking up a large amount of the screen real estate.

So as you're thinking about designing your application, you do need an application that uses text input, you do need to think about, well, how is this all going to work? How is my application content still going to be visible as the keyboard comes and goes as the user uses it? So you do need to deal with keyboard geometry.

As you design your application now, figure your developers, you want to know, well, what are the numbers? So here are the numbers. The keyboard in portrait orientation is 216 pixels high in all of the variations. So even the Chinese handwriting keyboard, it's 216 pixels tall and the full width 320 pixels.

When you change over to landscape, the keyboard is 162 pixels. This is actually new for iPhone OS 2.0. We actually made it a little bit shorter. And sort of being baseball fans, I pushed very heavily to make it 162. Baseball fans out there? No. Nobody gets that. I'll make even a worse joke, which was I was pushing for 154 because I really like sort of Babe Ruth.

We were going to have to put an asterisk. No, never mind. Okay. So 162 pixels tall, 480 pixels wide. But now really, I tell that to you because probably you want to know. But really, if you're going to be making sort of a best practice in using the geometry of the keyboard, you're going to want to know what the geometry of the keyboard is. So you really should be listening to the keyboard notifications. I showed, again, the example of that in the earlier demo.

And the one thing that I didn't sort of dip into just to keep the demo simple was that that notification passes you as part of the info dictionary on the notification, the geometry of the keyboard. So that's really what you should be tying into and listening to and adjusting your user interface accordingly.

Okay, so there's no real guarantee. I mean, as I just said, the landscape keyboard changed dimensions from iPhone OS 1.0 to 2.0, and there's no guarantee that that won't happen again, particularly as we add support for more languages and more input methods, we may change the geometry. If you have, again, you know, this is a great area, if you have real interest in this, to come to the lab, and we can talk through the issues that you have.

So now moving on to the next tip. Well, what about text input in tables? Now, this is sort of the two things that I would advise you to think about as you're going to maybe make an application that does this, is that you want to create a custom table cell for your text input. And of course, again, you need to deal with the keyboard geometry in most cases. So let's, I've got a demo of that. Let's take a look at that.

Okay, so the first suggestion, right, is that you create an editing cell. And this is just a very, very simple subclass of UI table view cell. I've implemented the UI text field delegate protocol, and I've got a UI text field as an IVAR in this editing cell. And I've done some very, very simple setup on it, as should now be familiar to you, the kinds of traits and methods and borders and font setups. That are very typical uses of UI text field. Okay, so now, very simple. Okay, so now, dealing with the keyboard geometry. Well, how about I run this application so that we can actually see what it does? Okay, so what I've got here is a list.

of letters. OK. So now if I click in any one of these rows, what you'll see is that the keyboard comes up. Now in many situations, right, you know, I click on, you know, epsilon, and great, you know, there's no real geometry challenge there. But you'll notice that as I fumble, as I scroll down to the very bottom.

Well, what about omega? You'll see that as I'm sort of bottoming out on this table, there is no more there there. There's no more area to scroll. So now if you click into omega, well, now you need to do a bit of work to sort of make some room available, sort of adjust the size of that table in very, very much the same way that the sort of more trivial color field example did before.

Okay, so adjusting that, you'll notice that, of course, if I, you know, just type in there and click done. So now I click done, and the table resizes now to take full advantage of this full screen real estate that's available now that the application, excuse me, now that the keyboard has been dismissed by clicking the done. Okay. And really, you know, it's very, very simple. You'll see that I've got, as before, a UI keyboard will hide. All I'm doing is adjusting the height of that table.

And the show is just a little bit more code, but really not very much more complicated. There's just a check in here to sort of see if we need to make any change to the size of the table. But really, as you can see, if it's on one screen, very, very simple little bit of code. Now, you might ask yourself, well, how come we're not doing this then automatically? And it's just experience shows that there are so many different sort of interactions with views and tables that as of right now, it's really sort of an exercise that's left for you.

But as you can see, not a very difficult exercise to just do a little bit of math and make sure that it works with the details of your application's design. Okay. Yeah, as you can see, a very, very simple little application that's really all there is to it.

Can we go back to the slides, please? OK. Right. So if you want to implement text input in tables, make that UI table view subclass for editing, and then again dealing with the keyboard geometry. OK, and then really about future directions. If you saw Bertrand Serlet's keynote on Monday, when he talked about APIs, he was very clear in saying that we make APIs that we're prepared to commit to, and that we certainly realize that we don't have everything.

And so we really, really want you to get this SDK and dig into it and make some terrific apps, and that while you're doing that, give us your feedback for what you want in the future. We definitely want your feedback, and it really is important to us to know what's most important to you. So we definitely want to get your feedback on future directions.

Okay, and yeah, if you have those pressing questions right now, come to the lab tomorrow. Okay, and that sort of wraps up what I have for today on tips and tricks. Right, if you have, if you want more information, Derek Horn, the Application Technologies Evangelist, and that we've got a lot of documentation available actually on developer.apple.com/iphone. There we go, Q&A.