---
title: WWDC2000 Session 402
framework: wwdc
role: article
path: wwdc/wwdc2000-402
---

# WWDC2000 Session 402

## Transcript

Kind: captions Language: en how many of you made it to the keynote this morning good selection all right got some very cool things happening we're excited with the power everywhere to give us tends to do you more deployments on Mac os10 although of course we're always continuing to supporting pure Java deployments with everyone else where everyone's everyone here yesterday pretty much or at least try to squeeze in here yesterday my name is Renford Baca I am the product line manager for web objects and development platform it's our pleasure to welcome you to the second day of the web objects track to down 16 to go for those of you keeping score at home and we have some really exciting stuff for you today just a one quick note we do want to try and keep the aisles clear there are a number of empty seats here I'm sure these are all real friendly people if you're standing in the aisles please come and grab a seat or not please grab some seats in the overflow section because we need to keep the aisles clear so the fire marshal does not get very upset at us again so with that I want to turn the stage over to James Dempsey one of our trainer extraordinaire and he'll explain to you about the very cool stuff happening with web objects builder thank you very much thanks a lot Ernie ah good afternoon i am james Dempsey and let's see how this all works great I'm a developer trainer with Apple I services I am much more used to talking to a room of 17 to 20 developers with a big whiteboard behind me and every once in a while asking are there any questions today I may slip up and say are there any questions I don't mean it just wait and hold them until the end please because I can't even see your hands really actually I can't see your hands a little bit so first thing I want to do is just find out how many of you attended Steve Heymann session yesterday the technical overview okay which is most of you terrific um I don't know if you noticed but in that session Steve managed to cover just about every new feature in web objects-- builder in 4/5 which is what my sessions about so I'm just going to tap dance for you oh no actually it's actually very good Steve had a lot of great stuff in that presentation a technical overview that kind of gave you a very quick brief look at how web objects were what we're going to do today is twofold we are going to take a look at web objects builder but web objects builder is a tool that you use to create something called components and components are really the heart and soul of a web objects application so we're going to take this time in this hour or in this session to go through very specifically and find out just what's going on in web objects we're going to go start at a high level get down to the nitty gritty and then we're going to take a look at the end at the new features in web objects builder so I probably should have advanced the slide already we're going to talk about components we're going to build some components using web objects builder and then finally we're going to take a tour of some of the new features okay that's also what you're going to learn so in a web objects application the heart and soul of a web objects application is this request response Luke if you don't understand that you're just not going to be a very good web objects programmer so let's just start from the top and walk through at a very high level we have a client web browser we have a web server running on a machine and then you have your web objects application running typically on another box now for the web serve to talk to the application we provide something called the web objects adapter which is a CGI that is going to just route the requests from the web server to the application so generally things going to work like this the web browser clicks on the URL of your application in comes a request the web server passes it to the adapter the adapter passes it to your application your application processes the request creates an HTTP response stuffs it full of stuff typically HTML and send it back and the user gets a web page that's one go-round of the request response loop all your application does is sit there and do that over and over and over again if in a desktop application your application has an event loop that's just sitting there waiting for the next event keystroke or mouse down event same here we're just listening on a port for that HTTP requests to come flying in so we can handle it and send back an HTTP response so let's take a little drop out that infrastructure and just focus in on the application itself now another difference between a web objects app and a desktop app is that in a web objects app we can have multiple users actually here we have two we can scale up to thousands millions of users here represented to users by two different browsers and we need a way to keep track of different users stuff essentially so when a new request comes in from a user we create or the framework creates a session for that user and a session is an object you add instance variables to the session as places to hold the user stuff it might be their shopping basket their preferences their personalization info the request gets routed in processed and a response gets sent back to the user the other user shows up is a very small low volume site here it gets processed and sent back now how do we keep track of this it happens automatically for you every session has an ID that ID is either stuck in a URL or it's stuck in a cookie your choice so now we have kind of the general infrastructure of what's going on in a web objects application we know how the request comes in we can keep everybody stuff separate using sessions but we still don't know what's really going on because sometimes you come to a presentation and you get all this arrows flying around but you don't know how does that really work that's what we're going to try to do today and what's really interacting with the user is something called a component if there was a movie the web object movie the component would be one of the leading roles everything we've seen so far the only reason all of it exists is so a component can do its job all of that infrastructure is there to support the component in interacting with the user so components a little bit important okay now how does a component interact with the user it does so in three basic steps there are three things that a component always does to interact with the user first thing it does is it generates some HTML out for the user and there it goes get stuffed into an outgoing response I should say and the user gets some HTML that they can interact with so the component starts the interaction with the HTML then the user interacts with that HTML in this case we have a login page and Fred is going to login type in his password submit it might be hyperlink something you click on as soon as you click on something or submit a form it sends a request gets routed back to the right session and finally back to the same component that originally started this thing that originally sent out the HTML so now the component has two more things that it needs to do it started this interaction now it's got to finish it the first thing that happens when that request comes back in our second phase is it pulls any form values out of the request so in this case Fred typed in his name the password is the name of his cat and what happens is that gets stored typically in a variable somewhere when the component is done with this phase we're now certain that all of the state that the user typed in in the browser is now synchronized on the server side which leads us to our third and final phase the last thing that happens is a method is invoked this is the wild-card phase because it's a method that you are going to write it's a standard method just a function for your procedural folks in the audience just a standard old method that's going to do whatever you want in this case that method might go check Fred's username and password you could also fetch things from the database validate credit card information take whatever the user is looking at and put it up in there or so that they can check out later you can associate one of these methods for every item that you can click on in the webpage and since it's a method that essentially gets executed based on a user action we have a special name for these in web objects development we call them action methods and that's it that really is the core heart and soul of web objects programming that is all there is to it rest of the time you have free go go away that's it um no there's just a little more but honestly that is what's going on a component generates HTML lets the user interact with it if there are form values it pulls them out and then it invokes this action method there's one missing wrinkle though this is one interaction how do we move on and interact with another component and the answer is very simple that action method has one particular requirement which is it has to return the next component that's going to interact with the user and there it is so that very last method or that very last line in the method is going to say return some component and at that point when we end that method we no longer care about that old component it's yesterday's news who cares that's the last request that came in now the golden child of the request response loop is that component this new component and now it's going to interact with the user going through that same process beginning with generating some HTML and this page welcomes Fred it's a very very you know we could take this app and like go out get an IPO within six weeks I'll become very very rich and famous um doubtful okay so let's review those again why because it's all that's going on Steve Heymann yesterday talk about a steep web objects learning curve I always think that it steeps not because any one particular thing in web objects is really hard it's just that there's a lot of it but if you sit down and kind of commit these to memory and what order they happen in everything else you learn in web objects on the web integration side is really just a refinement of these phases in addition to these phases are some variation on this theme so it's a very nice framework conceptual model in your mind on which you can hang all the other pieces of information of web objects off of so again they are generate some HTML user interacts in comes the request if there are form values the component pulls them out and then finally invoke some action method and that action method is where you're going to write a lot of code your custom processing that's kind of the you write your code here part of the of this whole deal and finally we have to return the next component to interact with each user so that's the conceptual piece each of these maps to a method that is sent automatically to your component so that it knows when to do this stuff and those are append two response is sent to a component to tell it to add its HTML into this response take values from request and invoke action now it's important to note you don't send these messages they're automatically sent to your component in the process of this request response cycle however as you start doing web objects development and start chatting with web objects developers they're going to be using these terms all over the place things say well after append a response then I'm going to put this header into the response in blah blah go on and on and on it all just stems from this one other note is that we have been or I have been talking a lot about this word component and we know that the word component really it's a very overloaded word in many different venues it means many different things so let me be very specific very precise in web objects when I say components there's a class in the framework called woh component and that is the class that implements those methods upended response take values from request invoke action it's also the object that implements that basic interactive behavior and so when you write a web objects application you're going to be sub classing low components by convention the first component that a user interacts with is called main as we'll see you as we build a project but of course for every page that you want generated you typically are going to create a separate component the only thing you need to be concerned about is they need to be uniquely named and so here we have the main component and then in our former example moving to a component named welcome page now since the request response loops really all I got we're going to go through it once again very quickly quick review so the user clicks an eight URL in their browser in comes a request a session is created a main component is always created it is sent to pend a response and so it generates HTML the HTML flies down to the browser the user fills out the form submits it in comes a request a side note this time around Fred typed in the wrong password we'll see how that's going to show up later all right the request comes in the components told to take values from the request it pulls out the values stores them in a variable is then told to invoke an action and that action determines our custom code determines hey Fred typed in the wrong password we don't want to let them go on to the welcome page we want main to have another shot at interacting with Fred maybe a slightly different page with an error message or one of those red asterisks turned on to let Fred know that he screwed up and so the convention in web objects is instead of returning a component at the end of that action method we return null we say nope you're not getting a new component I'm going to re interact with the user and so in that case if we return null from that action the same component instant gets used again its sent append a response again and it starts its interaction with the user and now fred has a slightly different login page alright let's build that so if we could switch to number four wow it's like magic great all right so we'll start in project builder make a new project call this thing no assistance Java is our language and if we look at the classes in project builder you'll notice some familiar items there's the application that we had seen before the session and there's also main Java and I described a component in this case main as a class as a type of object and you'll see that indeed main extends whoa components and it's a very boring component at the moment does not have any additional instance variables or methods we're going to change that in a moment but a component is more than just a class there are two other files that describe or make up a component they're stored in web components in a dot wo directory and there's an HTML file and that HTML file is a template that shows what main is going to look like and then we know there's a Java file that defines all the state that we can store in main and all of its behavior and there's a third file called a bindings file which is that connection between the user interface and the states we're going to talk about those and look at those in a little more detail for now we're just going to open up main dot low in web objects builder the other star of our show great so for those of you who are relatively new to web objects web objects builder the top half is it's an HTML editor a graphical HTML editor so we could type in some static stuff please log in and of course we can make it bold and now we don't wanna Center it make it larger change the font beautiful I don't want to center that either and we're going to put in a form this bottom row our item is called dynamic elements and these are object-oriented placeholders of where something dynamic is going to show up so user name password I'll add in some dynamic text fields and a dynamic submit button okay we've now built our award-winning user interface and now we're going to have to worry about where are we going to put those values when they come in this bottom panel is called the object browser and we notice the first column is labeled main and in fact this column is a graphical representation of all of the values and all of the methods that are in the main class now you'll notice that we have two already their application and session however the main class there is nothing between those curly braces every single component is able to access its session and application automatically its behavior that's gotten from the superclass whoa component however we do need a place to stick the user name and we can add and edit that Java file right from here we'll add key called user name it'll be a string and we only need an instance variable for that and it adds is here we take a look at the source code you'll notice that indeed it has added that instance variable to our source and it works in both ways so if I type something in manually like my other variable that I need to store the password when I head back to web objects builder it shows up so there's a direct course bond is between this column and the code in the component that I'm editing now we need to connect this text field so that the values here show up in this variable to do that we just drag on up and every dynamic element has a bunch of attributes required attributes show up in red if they're not already bound so we're going to make the value of this text field get stored in that variable username do the same for password and there we go so we're now worried about or now we're done with the state storage the only thing we need to do now is get to the point where I can click on that submit button and go to that welcome page so let's add an action we will call it login a we're going to add it and notice that it's added this login method here there's a line everything above the line you can think of as a value everything below the line you can think of as an action method we're just going to hook that up to the submit button as it's action and we're ready to roll let's go take a look at that source and notice that it has indeed added a method we're going to add one line of code this line of code automatically creates and initializes that welcome page the next line of code we're just going to pass the user name along to the next page so it can display it so set user name to our value of username so wait a minute you may be thinking where'd Welcome page come from and why does it have a method called set user name well at the moment there is no such thing as the Welcome page we're about to create it and we got to make darn sure that actually has that method in it so let's set about to do that right now web components file new and projects will call this welcome page no assistance in Java and then we'll open it up in web objects builder alrighty we're going to need a place to store that username string we're going to generate source for the instance variable and methods accessor methods as well we'll add that let's build our user interface welcome I'm going to add a dynamic string element and hook that up now let's make all that really big let's enter it change the fonts change the size change the color great view the source and it has indeed added that instance variable and accessor methods that's all that we need to do so let's build and run you'll notice what did we do really we kind of define two HTML pages some very basic ones we added a couple instance variables a couple accessor methods one of these action methods that's automatically generated for us and we typed in one line of code so let's take a look username Fred password oh no our password field is in a password field not a problem one of the very neat things about web objects development is now let me minimize that is that a lot of it is not compiled code for example our HTML template is not compiled so we can come into web objects builder select something and inspect it and a text fields while an inspector has all of the attributes that you have set or not set and all of the bindings we can switch to a static inspector and in this case turn our text field into a password field and let's say we want to change the submit button so that it's label says login well in 4:5 we can double click on an item to have the inspector show up and we'll change the value lips to login we can type in a literal value instead of having it go to at some method or some variable I would just save our change I'm going to Mai's mein and when i refresh it automatically updates which is pretty nifty password and we're welcoming Fred now let's just take a moment to go through bla bla bla that request/response loop so as soon as I click this Return button and that URL comes and we make a new session mein is created mein is sent append the response it generates its HTML we put in a value login soon as we hit login that request comes in the username and password are pulled out of the incoming request our login method is executed it creates a welcome page passes the name along and returns it in that final phase we're now done with mein and the Welcome page starts its interaction by generating its HTML and we get a dynamic page any questions all right let's go back to mean Steve showed you this yesterday but some of you might not have been here we can switch from a nice GUI editor to raw text mode the HTML is just plain stock HTML with the addition of a web object tag one additional tag that says hey something dynamic is going to go here a web object tag is one attribute which is a name a unique name and that name maps to an entry in this second file this bindings file where we find out hey that web object tag what kind of thing is it is it a form is it a dynamic submit button and also all of those attributes that you saw in the inspector they are all present here so that that dynamic element knows where to get its information or where to put information at runtime okay done with the demo let's go back to the slides if you understand that if going through those three phases by now bores the Dickens out of you then that's good that means you're well on your way to becoming an excellent well objects programmer because that's what's going on that's pretty much it there's additional stuff that hangs off of that but that's that's the whole shebang for the website the next session is going to be talking about the database side so if it's in your head beautiful however you might be saying well first of all let's talk about the stuff we didn't have to do we not to do anything if you notice to get all that to work we could take what we just built if we wanted to deploy it on a whole bunch of you know 16 processor Solaris boxes and let millions of people show up and type in their name and and have a page come back that says welcome it wouldn't be terribly exciting but we could we didn't have to do a whole lot we didn't have to touch the request we didn't have to touch the response we didn't have to parse the forum values all of that just happened for us because that the stuff that you have to do every single time that's the stuff that who wants to be bothered so webobjects takes care of that so you can write the cool stuff the logic the application logic the business logic that makes your web objects application useful unlike the application I just wrote and also gives value to whoever is going to be using it however we're going to dig one layer deeper and talk about what's really going on here how does it do all that well I showed you those two other files we know there's a Java file that defines the object but there are these two other files in HTML file in a wad file as it's called I always find that just a weird word to say wad file wad everybody say wad file say it loud wad file hey louder wad file even louder that's good it just sounds wrong somehow doesn't it it sounds absolutely wrong umm so what happens we know the web object tag matches up to something in the wad at runtime it's not this flat sort of to text files these get parsed at runtime and we end up is something that might look something like this where you have this flat HTML and in between you have these live objects web objects you might even call them perhaps dynamic element objects that are just placeholders they're just waiting there just waiting to generate some HTML text fields are just waiting to pull form values out of the requests because that's what they are that's what they do they don't have any other purpose in life now each of these when it gets parsed in it also has within it all of its bindings so that it knows where to get information at runtime so let's put this all together for all of those phases so when we're generating HTML and append to response what's going on well the component has this templates and when the component is told hey append of the response well they come on and says well I don't know what to do hey template pintu the response and it goes through and the static stuff gets popped into the response then the low string is told hey append your stuff to the response and the low string is like well what am i oh I got to figure out what I'm going to put in here I guess and it does its thing and then there's more static stuff that just gets thrown in because it's not dynamic then the hyperlink is told to append to the response and it has to figure out what URL it's going to use and so on down the page so every dynamic element gets its shot at appending its little chunk of HTML into the response let me go back one um just a note when a whoa-ho each of these items when it builds this nice little template has a unique element ID so whenever a hyperlink for example generates the URL that you're going to click on that element ID is in there so it can tell oh I was the thing that was clicked on and whenever a text field is generated it has a little name attribute that is the element ID so it can look into the request and say oh that's my value no real magic going on append a response when it's sent to a low string it says oh okay well I belong to a components and a dynamic element without a component is useless utterly useless they work together so when a low string is sent append a response it consultants bindings says oh my value is hooked up to username let me ask my component what's the value for username and the component gives back the answer in this case Fred low Stern goes oh now I know what to generate in the HTML that happens for every single item in the template if there are 18 bindings they would go and ask 18 different times for taking values from the request when the component is asked take values it just turns to a template of dynamic elements and asked them to take values from the request of course only in this case the text fields are going to find something there so what's going on well in comes the result we have our components to start off with the username and password have no value and in comes a request it books in takes that value Fred out of the request consultants bindings oh my values hooked up to username I'm going to tell my component hey take this value Fred for that key username and start there and so it happens and that happens for every form value that's all that's going on and then finally invoke action in this case we know the submit button was clicked how does that work well the request comes in we have a component with some action methods defined in this case login it reads in that URL so what flew by real quick let's do that again this is fast consult that says all my action tooked up the login I'll set my component login and then the component executes that method let's execute it again you know how long I take some PowerPoint that's a real pain to do do it one more time I just love that that's what's going on in web objects that's it actually that's little there's a couple other details i leaving out but this is the absolute core the absolute core of what's going on in every web objects application if you have this firm in your head you're pretty much good to go you're on the right track you can go downstairs to the lab if you're brand new to web objects and start building the little pup that i just started building now two points that I want to make on those two points are this it's kind of interesting that you know we can get to a dynamic element can get to that information in the components but we have this thing called a session and it's kind of odd that you know if main needs the username and and the welcome page needs the username that we have to write all this code to pass it from page to page what if like eight components you needed to get to the username well we might instead stick it up in the session and every component can get to its session and every component and then in the session we could store it in one place for each user now how would we hook that up well what's very nice is we have something in web objects called a key path if you recall before right the value was hooked up to user name it would ask its component hey what's your user name and it would get back a value well we have this dot separated path and so when this will string needs to find its value it asks its component hey what's your session what's your value for session then it asks the object that gets passed back hey what's your value for user name it gets back to value and voila it's kind of nifty those paths always start with the component however but let's go one step further because a username is not a very useful piece of information a username actually most websites my user name is like JD one seven two three four because all the good ones were taken right anybody like have a good use nobody does there's like one James and that's it screwed up that's all just screwed up so I don't want things saying you know welcome JD one four seven two here are the last five purchases from our site we want to group things together so in the database I might have a row right that has the user name maybe their password maybe it's encrypted a first name a last name and email address maybe a relationship that lasts five purpose purchases favorite color all that good stuff using the database chunk that's in the next section we can take that row in the database turn it into in this case maybe a customer object and store a customer in this session and a customer is going to have different properties in this case we're going to use first name as the example and to hook this up just a longer key path just kind of whisper down the chain this is seven degrees of Kevin Bacon is what I call this because it's the same exact thing it's like I'm at the component what do what key path do I need to get to the information I need and this time around she's going to ask hey component what's your session hey what's your customer what's your first name and then get back the answer this can be arbitrarily long like I've seen them eight nine that just go on forever the important thing to realize two points is that each of those things all the codes you wrote you put in an instance variable that's all you put in was one instance variable to hold the next object you don't have any all this accessor code where you have to pull the customer name into the component and the other neat thing is that this path is not compiled at all it's in that bindings file and we saw that if I make a change that I just refresh I don't have to restart the app let alone recompile it and so if I want that string to hook up to last name I've just changed at this session dot customer dot last name refresh the page and suddenly I've made a major UI change with very little work on my part very little risk as a developer and now I want to say any questions but I'm not going to I think I just did oh I'm hitting the back button how scary there we go we're going to do a demo what we're going to do is twofold we're going to implement a little password checking logic and have an error message pop up if the person types in the wrong password then when we're done that get that working we're actually going to hit the database based on the username fetch the right customer object stick it in the session and on the next page the Welcome page reach into the session and pull down their first and last name and display it so in main let's type in an error message versus make it nice and big you that is not recommended Apple UI guidelines however haven't you all wanted to put that at one point or another somewhere in your app you can apply that I don't mind I got extra time okay and then we need this is oh what'd I just do how about I explain what I'm doing in the demo that might be nice that would be a good thing I'm adding something called a conditional a conditional is an if statement in your HTML and it needs a boolean to determine whether to show or hide what's in there well we don't want everybody getting this rude message so we're going to add a boolean we'll call it a login error we type boolean we only need an instance variable and we just wire that up to the conditional we'll save that's all we need to do to our UI let's go to the source we actually have to write a little conditional logic here so matter of fact I'm an extra moment it's actually where am I there it is now that's not what I want there are many many wonderful preferences in project builder whoa okay let's just bump up that size says apply I'm going to turn off syntax coloring okay so here we go easier to see the code so the first thing we're going to do is the next page by default if they don't type in the wrong password we don't want to let them see our super secure welcome page with all that sensitive information so we're just going to return null by default and then our elaborate password checking scheme if the password they typed in equals the string password it's very elaborate then we actually are going to let them in so next page is going to equal that on the next line the actual new page and we're going to send that information along to the next page the user's name else if they screwed up and type in the wrong password login error you know set that to true we'll build this notice that what we're doing is taking some conditional action in that action method because you don't have to return one component all the time it's your code you can return whatever the heck you want let's go to omni web let's login Fred will login he won't type in the right password and now he feels really terrible because he's an idiot okay so Fred if there any Fred's in the audience I very much apologize I you're not an idiot this is a hypothetical Fred and if he types in the correct password log in there we go wonderful next step hitting the database so let's actually minimize some of these windows put that out the bookmark window on the web okay great so now what we need to do is be able to hook up to a database all will be explained in the next session but for now none will be explained we add something called a model file which is built with the OU modeler the topic of the next next session and we're going to build or we're going to add a customer dot Java file which is generated from eyo modeler which is covered in the next section so if you're curious go to the next section all right to do web components resources put everything in the right place that's very good now all that we're going to do is this we're going to first oh now I see change this we no longer need the username here very nice new feature in web they're now in addition to adding stuff to your source code you can actually delete it so we're going to delete the user name it also is going to check to make sure that these bindings that you have set do you want to unbind them or ignore it well we're going to unbind so it keeps you from having errors due to binding we'll add a second string now another nifty thing in web objects builder four or five is when I click on an item in the first column this second column is now a representation of that particular class and actually if I have source code to it I can even add stuff so I can add stuff to the session it's a contextual menu I'll add a key to the session I'll call it customer of type customer let's have methods to get and set as well which adds a customer from that customer class it knows all the stuff that's in a customer so we can display the first and last name of a customer just like that now let's uh actually we'll minimize that we turned on window shading I had the other behavior set okay now let's edit this pup login so when they log in we want to fetch there is a we're going to fetch a customer we'll call it customer as our local variable and in Java we're going to typecast what comes back as a customer we are going to use an EO utility which is a very quick one-line way to fetch in web objects vo utilities can't talk one thing and type another thing we're going to go ask for the object matching key and value in web objects in your application every session by default has this place where you can edit and fetch objects from the database called an editing context so we're going to use that to perform our fetch the thing that we're going to be fetching our customers we're going to be looking up customers based on their username part in my indentation and the actual thing that we're going to look up on is what the user typed in for username so that line is going to go get us a customer do I either oh you're right thank you mister compiler no because that's how I code I let the compiler deal with those because it's good at it better than I am apparently so here we go customer and now all we're going to do is check if the customer know so we're going to if the password that they typed in equals the customer's password then we're not going to pass anything along we're just going to stick that customer up in the session so we'll access our session and tell it to set its customer to customer so in addition of one to three lines of code let's see how this this seed of a personalization engine is working so let's go back to our good friend Fred he'll type in the wrong password we don't let Fred in he types in whiskers his correct password and voila we have our personalization engine let's get another session going brand new session this time it will be JD one two three four five oops well let's type in the wrong password voila and so we have two different sessions two different customer objects fetched from the database and we didn't do a whole heck of a lot did we I built that in I don't know 10 minutes 15 minutes now is that production code that I wrote there no we might want to check to make sure that we actually got something back from the database we might have encrypted passwords stopped by the security session later this week find out more about security and login issues with web objects or techniques however boy if you're going into a client this is a nice prototype right you whip up very quickly so that's pretty groovy um again we did a fair share of stuff here in a very short amount of time and let's switch to the slides actually and we did it all without doing all too much work we added a couple instance variables and a couple accessor methods we added one action method that took some conditional action and did a little bit of checking we set some things we got some things and we did some mysterious database stuff which will be explained later with that what I'd like to do is now you have a good idea of what the heck is a components how does it interact with a dynamic element or it's dynamic elements how do these three files as HTML file is WOD file this Java file how do they interact what's their relationship how do they interact at a runtime and where do i plug in my code what are the things I have to worry about what don't I have to worry about so at this time I'd like to bring up whoops what's a backup I should have Hey what I hit okay at this time I like to bring up Tom Naughton from the web objects builder team who's going to talk a little bit about new features in four five thank you I think my leg has gone to sleep so if I fall over don't mind me anyway I'm going to talk about the new features the golden four Oh first of all how many people have used the new four five builder good okay and how many people use the version previous to that okay so so you should be happy with new features and you'll understand what I'm talking about let's see so the goal in four five for the Builder was to improve ease of use and to improve developer productivity so to get ideas for what we needed to do to make it easier to use we wanted to observe brand-new users just learning to use the product we wanted to see what kind of issues they ran into what kind of suggestions they had so it turned out the best place to find such users was in the training courses so we signed up for them and we went to them and we paid careful attention to people's interactions with the Builder we asked them lots of questions about what they liked and what they didn't like and we got lots of useful feedback we also went to the feedback sessions for other courses that were given and incorporated feedback from that and we got a lot of feedback from the beta lists for the Foro version that were released and we took all this information and we also comb through our bug database for feature requests that we'd had from some of our older developers and narrowed it down to the features that we wanted to add four four five and came with a pretty good set and we've gotten a lot of positive feedback on them so let's see the first one whoops this was actually supposed to progressively disclose but it doesn't okay expanded source file editing options one of the things that pretty much everyone likes about the builder is the way you can use it to add code for your keys and actions people like how you can just put together the whole skeleton of your application just using the Builder you get all the methods you need you can create the components you can wire them up together but with that you couldn't you couldn't delete keys you couldn't really you couldn't undo so we added that and people are very happy contextual menu support in the course we use though in many of the courses people learn the product on Windows and they felt that it should behave a little more like the Windows application and one of the things they pointed out was that we didn't have contextual menu support so we looked for logical places where we could put that in and wherever it would make it a little more convenient we added some contextual menus so you'll find them you can click around probably right-clicking on various things and you can find where they are but we added them to the variables browser so you can add and delete keys we added them to let's see the API editor which I guess we're going to talk about in a future session we added them to the inspector so you can add and delete bindings and a few other places and it makes the a little more convenient easy to use but we never we tried to make it so that the way that you do commonly used functions is never through the context menu it's just sort of a convenience added for an accelerated way to do certain tasks table editing in previous versions of the Builder table editing was a little weird who actually first you had to select that you had to drill down to the piece of the table you wanted to edit you had to first select the table then select the row then select the cell we've gotten rid of that we made a lot more intuitive we also added a table wizard that makes it easy to create new tables you can specify various options like to turn on borders or to have repetitions around one of the rows and it makes let easy to create new tables the pellets people felt that the pellets could would be more useful if we added more pre-built elements so we added all of the more extensions to the palette we also had a brand new palette of JavaScript elements so you can drag in say a button fly over and you just wire up the images and you don't have to write any JavaScript you don't have to write any code it all just works the product so it's very convenient for people want to add JavaScript to their application that's you for HTML selection one of the problems with HTML editors in general is there's no one-to-one correspondence between a range of text on the screen and the actual elements in the HTML tree that that corresponds to for example if you select a range of bold text does that include the bold tags or is it just the text inside the bold tags builder has to make certain assumptions and sometimes it's not always exactly what you'd like so to make it easier to select containers and specify exactly which one you want to select we've added a path view which which you can see on the earlier slide basically it shows where you are in the tree and the names of all the container elements and you can click on any of those and it will select that container binding validation for people just learning the product one of the most difficult things about creating components is figuring out which bindings you actually need to set up on the various dynamic elements you know sometimes if you bind certain bindings and implies you have to bind other bindings or it'll be mutually exclusive with certain bindings and new users were run into lots of problems with this basically if you bind it wrong you get an exception page at runtime and you get to figure out what the problem is yourself so in one of the feedback sessions one of the developers suggested you know couldn't the Builder just validate your component and tell you what was wrong with it and it turns out you know that was a very good idea and so we added that and actually since we have this feature one of the trainers mentioned that in the classes now it because a little bit like the Maytag repairman people just you know solve their own problems and he doesn't have to run around and figure out what the problems are syntax coloring previous versions didn't have syntax coloring but we didn't just want to add it to make it pretty we wanted to actually make it useful so it's actually kind of smart syntax coloring it'll show you know lots lots of times when people edit HTML by hand they'll introduce errors like mismatched tags and such so the syntax colouring actually shows you the errors whenever the tokenizer runs into something that it doesn't like to parse it'll make that token red and if you might see add an extra closing tag that doesn't match an open tag it'll draw that in red so basically you can just look at your page you can see that tags are unbalanced and you can easily fix the improved binding user interface let people like the way you can just drag connect your bindings in the Builder but in previous versions you'd have to drag up select the element and then go over to the inspector and actually click which binding you want to bind to so it was a little cumbersome we made it we changed it so it's you can do all that in one gesture you just drag up a menu pops down you choose the binding you want to connect to and it's all very fluid improved font take support the built in font panel that you get from the app kit is real convenient for picking one font but for HTML you usually want to specify a list of fonts so the browser can use a different font if it doesn't have the one that you specified so we added a font panel custom-made for HTML it saves all of your font preferences so that you can use them again and again display options let's say you want okay one important thing we added was a preview mode we're always torn between do we want to make the Builder what-you-see-is-what-you-get or do we want to add lots of convenient editing widgets inviting the preview mode we can actually do it both ways if you choose preview mode the Builder makes all of its rendering decisions in favor of making it look just like it look in the browser if you choose editing mode it shows you all of your bindings it shows all the web objects and be the binding values on them that lots of convenient editing features you can also turn on options and preferences so that it'll show things that are otherwise hidden such as HTML comments or JavaScript so that you can get a better view of what your page actually looks like and then switch to preview mode and it'll again show like it looks in the browser and we also added an API editor we've had API files in previous versions of the Builder it basically it exports which bindings are available for nested components but previously the versions of the Builder didn't use it very well you had to edit the files by hand and users didn't adopt them very well so we actually added some UI to to make it easy to make the API files and you can also add your own binding validation rules just like the built-in validation rules so it makes it a lot easier to set up those files anyway I guess James has a demo now it's going to show some of the new features Thanks all right we're up to the whoop I need to click oh yes because I have to put up the very important demo slide okay we got the two-minute warning so let's fly on through this window no it's not three little objects building here we go so let's take a look at main again and I'm just going to kind of walk through some of the features that Tom had talked about the first one being that we can delete bindings so user name is hooked up we'll delete that we'll also unbind all well and good but then I say oh I didn't mean to do that I got undo and this undo is not only going to rehook up everything correctly in the bindings file but it's also going to put that thing back in my code in project builder so it's aware web objects builder is editing three files at once this undo is actually keeping those all up-to-date very nice new feature because I always make mistakes I don't know about you all every once in a while contextual menus we have them everywhere actually there you'll see them as they come up we're a little pressed for time let's add a new table take a look at the table panel we open it up we get to pick how many columns and rows we want border etc my favorite most handy thing is that your second row can be automatically wrapped in a repetition so you don't have to select it and add one because you're always repeating lists of things and your first row can be automatically header cells we're going to add just a plain two-by-two and let's move our form elements in there to neaten things up a bit where am I help okay we'll just rehook that up see even when you totally screw up it's even easier in web objects builder four or five I'm just demoing somebody screwing up in web objects builder four or five and quickly recovering so there we go we'll open the inspector we no longer have to switch some sort well first this is the path view and it's very nice I want to select the table bam I've selected the table very easy to edit the table I don't have to go to some structure editing mode I just click in the inspector add a new row let's merge these cells together let's move the login panel or the login button in there that's wonderful new stuff with the table view on the palette you have both Steve Hammonds leftover palettes from yesterday but also Java Script palettes that ship with the product including image flyovers we'll just throw one in there definitely check out these JavaScript reusable components they're very useful and there's also validation so you'll notice as soon as I drag that in this button came to life and told me that something screwed up on my page I have validation I have some required bindings of this image flyover that I have not hooked up the other nifty thing is if I click on the error it automatically selects the item that's having the problem so we have 18 hyperlinks on your page you can jump right to the right one so we're going to fix our validation problems by deleting that if the feature don't work cut it let's close up the palette let's jump over and let's look at this HTML editing nicest thing well two things one is say we screw up our HTML somehow notice that this closing tag has turned red to indicate that something is fouled up and so it's doing error checking that's very obvious in color we also have a very nice feature you triple click it'll select all the way to the matching tag so we double or triple click this table it'll select to the other end of the table tag even niftier if I triple click and drag it'll select ever enclosing tags all the way up the page and all the way back to where I originally clicked here's a nifty feature some folks like to put comments in their wad files web objects builder 4'o is notorious for when you go into graphical mode getting rid of your comments well we can type in some comments switch back switch back they're still there that's a very good thing you can applaud that was a golf game okay good thank you some other nifty things in the inspector say we want somebody to type in a date into a field we can put date for matters that's always been there but you have to remember these formatting strings well now there's a pop up of common formatting strings and examples for date formatting and number formatting makes life easier that also is true of many types like boolean types if you're picking an action you get a list of all the actions in your component to choose from without having to remember or type them in yourself so those pop-ups are very nifty and oh one of my favorites it's always kind of harder it's always been hard if you want to wrap a repetition around two rows for some reason well there are a lot of these new display options for the layout for example we can show a graphical representation of our table tags and so selecting two rows is very very easy now you say well that's great because I want to see how my tables laid out but this don't look like a table no more well that's why preview mode was added so it's going to look like rendered HTML whereas you can have all of your nice editing widgets in your graphical builder and the in the layout mode so that's another nifty one that is about all that I have for the demo that's groovy then it worked out just right thanks James everybody has a presenter scheduled today yes and to think this man gave up a lucrative career as a stand-up comedian just to become a well objects trainer thank you James we're gonna start the Q&A now so we invite anyone in the overflow room who wants to come and ask questions come up and join us again please try and use the microphones in the aisles so that people getting interpretation and recordings will be able to hear them appropriately I also have the other presenters up here if we could help answer questions thank you very much also once you do spend Haller from the robotics engineering team will be joining us as well Thomas you a slap oh do I mention the roadmap for sure let me answer this all right so roadmap next section is on the database chunk to two sessions from now is deployment you built your app now what do you do with it it covers the new deployment architecture in four five later this week integrating client-side technologies ie JavaScript and all sorts of other nice stuff smile quick time flash reusable components now we know what a component is let's make them so that we build them once and reuse them in project after project and I also did mention that security one which did it fit on this slide for more info there's that thing downstairs the big lab check it out contact him in QA and just to mention on the lab there are some problems with the the security information and so that they had that lab open for the incorrect hours apologies to anyone who got rebuffed at the door the lab is open from 11 to 2 and we have straightened things out again apologies for any inconvenience do I have any questions from the audience you