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

# WWDC2000 Session 405

## Transcript

Kind: captions Language: en because it's on everyone here we good morning everyone my name is Miguel Sanchez I'm a member of the web objects engineering group and with me as my cough Hines will be helping me out during the demos let me get a quick read of the audience out there how many of your web objects developers who have used web objects good how many of you have used direct web ok for those of you that haven't the first type of the talk will be an introduction to direct web so don't don't freak out but we'll also be talking about some advanced features of direct web for those users has anybody used directly web in 4 or 5 yet ok one person I'm going to be talking about some of the new features we have so what is director web director web is the Java based technology for rapid development of web of database driven web applications if you ever install whenever you install web objects on your system don't go out looking for an application called direct web because you won't find it there is no such thing director web is really a set of things it's it's a Java framework called director web it's a project builder wizard and a web assistant applet that will help you configure applications at runtime so the first thing we're going to do is we'll jump right into a demo we're going to make your head spin with demos today we have four demos so I hope we don't lose you could we get the demo machine up on screen so we're going to give you a very quick demo of what directed web can do for you we're we what we're going to do here is create a very simple database administrative application that uses a restaurants database we're going to use the restaurant database throughout all of our demo the database models restaurants and their locations and the type of food they serve and we're going to be customizing our site along the way so what we would start out doing is bringing a project builder and typing in the name of our application in this case it's going to call it's going to be called tengo hambre which in Spanish means I'm hungry we choose it to be yeah we pick the application to be of type of objects application this is the first place where you see direct web as a project builder wizard so within project builder you choose your application to be of type direct to web so we go on and here we specify the model before the wait before the demo we we created our database we created an ear model and that's pretty much the only thing that directory to every requires to jumpstart the application so might just pick the model the tengo hambre model will we'll be talking about the model a little later on and we put next we choose a look I'll talk about the looks later need to look and then we launch and that's it okay based solely on the information you gave us in the model director web has built this very generic application for you with the logins with a login page we login to the application and it automatically knows about all of the tables or the entities in your model about their attributes and it gives you a whole set of pages to do stuff with them you can query on them you can insert the lead you can list them so for example we're going to look we're going to search on restaurants we're going to go to the restaurant search page and we would look for restaurants that begin with the letter M and this is live we're hitting the database we get a list page with all the restaurants if we wanted to delete we could hit the icon on the left hands the right-hand side of the of the screen or we could drill down into a more specific record like we're going to look into my restaurant right now we goes Mexican food so we get edit pages we could let's say that my my food chain is doing so well and my chicken fajitas are hit so we add a new location actually we don't have any location so it's my first location so we have we have pages to edit to add objects with relationship to other objects okay we'll be talking more about all this right right now what I wanted to let you know is that you get all of this for free just by giving us your ear model and this is live-in hitting the database and another thing I'd like to point out could we bring up the project okay so he introduced a new location he saved the project okay the main thing I'd like to point out here is there is no code okay there is no here's your project and there's no reference to any such thing as query restaurant page headed restaurant page all of these pages are being generated generated dynamically at runtime for you okay so it's not just a wizard that dumps code on in turn your project this is all dynamic and with that what that means actually you can you can change it at runtime you can do a lot of customization without having to write any code so we'll get back to the slides now so that was a very very quick introduction to director Webb what kind of applications would you want to use director Webb for well first of all I think you should all consider director Webb as your generic database administration application for any application you do without doing anything you have this application that that gives you edit pages and query pages and delete pages and all this is probably the first step to validating your model does it work you don't have to write anything you just want to make sure that relationships point the way to what you want them to point that things make sense on the web but you can also use it to to create very real very functional intranet and work group applications this isn't just a prototyping tool and the reason for that is that we offer you an iterative application development cycle director web plugs into all the different layers that web objects producer provides you so you're not just playing around with prototypes here what are the advantages of using director well first of all you get a rich set of default pages and behaviors things you don't have to write okay hopefully this will allow you to concentrate on your business model and the specific logic of your application you also get something boy what we call wiziwig application customization ban what we mean by this is that we offer you a tool so that at runtime you can customize your application without recompiling it's a good starting point for learning with objects if you feel intimidated by the learning curve this is probably a good thing to fire up and and have a quick running application right away and don't forget it offers you a layered approach to application development if you're an experienced web object developer you can plug into the more advanced layers of director web okay director web is not just a prototyping tool what is the typical development cycle for the regular web application as we saw we begin with their director web I'm sorry with a neo model the basis of a director web application is a good good database definition with this we give you a default director web application what you saw well you get all these pages to edit and lead and administer your database then you bring up a Java applet which we call the web assistant and this applet runs alongside your browser and you can tell us to configure certain things certain things in your page the way you want them to be after having done this you have a more customized director web application notice that at this point you still haven't written any code but you can get to that there's going to be a point where you probably want to touch your HTML and you want to write your own java code or tweak some of the java we have you can do that and the end result will hopefully be a custom with objects application so remember director web offers you different layers in in which you can program you can be at the very top like a very very top layer using a java applet know code and get using all the default behavior we give you you can also work at a middle layer when you're want to change the way your pages looks with the layout and you can get down to the guts and write Java and do your own HTML so we're going to focus on layer one right now this is a zero length of code layer what we ask from you right now is to give us a model and we'll give you a lot of default behavior first of all you get three different looks that you can pick with director webs you also get nine different task pages and a web assistant to configure these with so we're going to take a look at the looks now these are the types of looks you can have in your with objects application by default this is what we call the basic look the menu bar runs across the top and the main content of your applications in the middle this is the list page for the basic look we also have the neutral look which is the one we're going to be using in our demo here where the same functionality is the basic look except that the menu bar runs across the side and there's no references to any Apple icons so this is a good starting point for customizing your own application for your corporate look and feel and the web objects look very similar to the neutral look but except that we have Apple icons here and there for those of you that have used director web in the previous versions the neutral look is new for version 4 5 once you pick the look you want for your application we give you tasks pages with those pages you'll be able to query on you'll be able to insert new entities you'll be able to associate really entities and relationships and you get all this for free but there going to be a point where the default behavior would give you is not good enough for you you want to you want to tell us a little more about how you want your attributes displayed which entities you want read-only which ones you want to rewrite for that we offer you a web assistant which is a little Java applet which you're going to show you right in a moment where you can tell us how you want certain things displayed you can make certain decisions and you can do all this without writing any any code so the web insistant allows you to configure things like your access permissions and the entities the way you want to display your attributes and general page layout issues this is the final application where we're working towards the tengo hambre application we're going to have three pages in the first page we're going to have a query page for restaurants where users can log in and and and query on a particular restaurant based based on a certain type of food or where the restaurant is after they do their query that would see the results of all the possible restaurants they can go to and then they would pick a particular restaurant and get the information such as where it is and how to get there and and the phone number so that's that's what we want to get to it can take a three demos to do that but I want you to have that in your mind this is the model we're using the main entities in our database are going to be restaurants and locations where they are each location might have a different price range depending on the city and each restaurant might have might prepare more than one type of cuisine so now we go off to demo two in the first demo we created a very generic and application that allowed us to access the restaurant database that we had created prior to the demo in this demo wrong screen no no I'm looking at the and yeah I was looking down here it's okay so in this application we're going to start a customized give our application a little more the look and feel that we want and the first thing we do is bring up the web assistant which is a Java applet runs alongside our browser just coming up we were you we're running this on michaelis server one - without any wind so here's the web assistant and the web assistant has different tabs depending on the the function you want to perform at that moment so let's look at the entities tab if you bring up this tab you'll be able to tell us which entities you want to have in your application be read/write which ones you want to read only and which ones you want to hide all together for our purposes of the demo we want everything to be read/write only we don't want the user set on internet changing our app or information on the database the next step you see is the pages the page tab here you can customize certain attributes about your whole page for example let's go to list page on restaurants let's do a query and here the notice that the live assistant is following you depending on the page you go to that's what that's the display of the live assistant so here you can tell us things like well do you want to show the banner or not what kind of color do you want for the background tables some pages even have more than one way of displaying themselves for example you can display the results of a query in a plain list format or in a master-detail format or your list page that shows the results in columns rather than rows in this case what we're going to do is get rid of the banner we do save and then we refresh notice that we changed some configuration in the live assistant we refresh the page and the banner is gone by the way the banner was the thing that said list not this thing which is called a batch navigation bar and you need that because you might have more than one page worth of results so the next tab on the web assistant is called the properties and this is probably where you're going to be spending most of your time we're going now to the query page for restaurant and the properties tab and you'll be able to see in the middle column right here you'll be able to see all of the properties that are currently displayed for that page in this case querying on an icon restaurant does not make sense that we want to get rid of that so we can hide properties right we also want the name property to be the first thing on the page so we can move it up to the top okay and then we can do click update on the web assistant or save and do a refresh and we see that change in our application at runtime okay we also have in addition to renaming them and reorder them we can we can choose to display them using different different air fields for example in the locations we don't want people to query based on street address we want them to query based on the zip zip code so we tell her you know display the zip code for this field and then for cuisines which is a too many relationship that's a very non-intuitive way of seeing all the types of food you can query on we offer you a type of component called dtw query too many relationships where you can tell it to use the text description of them are you you're still in in locations like you're still in locations yeah okay so we're picking to display cuisines using a relationship component in a browser with one column and we read this play okay okay put the zip also so too many relationship okay but what I'd like you to see here is that you're doing all these configurations with your application at runtime and your application is still life there's way too many components that we offer you here to talk about all of them during this presentation that would take all of our time so just go away with the idea that if you have numbers or strings or relationships whether they're too many or to one we offer you different types of browsers and tables and colors strings and all of these types of configurable components for you to use so this is our page now we query on American food say the app is still live where we're going to configure this page to show the locations of the restaurants so we go to the live assistant and we by default we had relationships in list pages so we tell it you know we want to see the locations of the restaurant and we want to use a display too many table to see them see overall the types of components you can use and show the city of the restaurant okay so we're doing all of this configuration at one time we pick a particular restaurant can you click on Palo Alto for example and we're going to a restaurant in spec page in this case we're going to hide all of the address attributes and we're also going to see see where it says price right here we know that in our database price holds two things it not only holds the description such as inexpensive in this case it also holds an icon showing a dollar sign or two dollar signs based on how expensive the restaurant is we can traverse to one relationships into in our pages and we can choose to display the price icon you got to get rid of the of the price first yeah you can you can say I want to choose the price relationship display its icon attribute as an image and you get to see the image okay so you get a very rich set of components that you can use that you can use here and you might be wondering well this is fine but in the first time we showed us that there was no code so where is all this information going well if we bring up the project you still you see that we still have no no references to any specific pages all of that configuration you were you were giving us goes into a model we call it the d2w model and it's nothing more than have been a text list a text file with all the rules that you're telling us for example in this role you're telling us if you're in the tasks inspect and you're in the entity is location and what you want to display is a price that icon then you have to use the display image as your component okay so all of this information your you're giving us using the web assistant is being stored in a text file so that's the end of demo to can we back to the slides so we've been working in the first layer of director web wear without writing any code and using a Java applet that wants it alongside your browser you get to customize a lot of things about your page and how you want to display parts of your attributes now we're jumping to layer two you might say well let me go that's great but you know what I don't I don't like the menu bar I want my icon my company's icon to show up on all the pages I want this banner to be here I want this this other component to be down here we understand we can't guess everything that you want right off the bat but we give you the hooks to do that so this is where layer two comes out in layer two you can begin to customize the layout of your application whether it's application wide or task specific for application wide layout for things that you want displayed on all of your pages you're going to edit something called the page wrapper the page wrapper is is a piece of HTML which is going to be inserted in your project when you create it which tells us how you want your page is laid out where does the menu go where does the content of the page go so you can you can plug in your own stuff into this page and say well I want to add icon to show up on all the pages I want this banner to show up in all the pages and that that's how you get your specific corporate look and feel and then we also have something called direct to web templates so all the web objects developers wake up this is where it gets interesting for you new and for five something called d2w templates as you might imagine director web uses very dynamic and highly configurable components in the backend to to redisplay all of this all of those pages you have this components must by definition have no reference to any particular database model because if they did they wouldn't be reusable so the very generic and some serve multiple tasks for example when you're going to we share the same component to both edit a page and put inspect the page we just have conditionals embedded in there to figure out whether they show they show a text field or just a plain string in four or five you now have access to these components so now you can edit the HTML without loosing the ability you cut to customize your page at runtime now how does a page know what to do with itself at runtime how do those how does the rule information get translated into something meaningful as we saw rules are stored in a file in text format for example here we looked we're seeing it we're looking at this rule this is very similar to what we saw in the demo if we're listing a restaurants locations then we want to use the display too many table right so that's a text file to evaluate rules at runtime we use something called a d2w context so all of the bindings in your in your HTML template that we give you are going to have reference to keys of the type d2w context at something so that you when you see d2w context that's something in your in your wot file and your bindings file for the HTML will give you that's when the rule system kicks in and we're going to show you some of this in demo 3 so in our second demo we customized the query page for restaurants to list page for restaurants and the inspect page for locations in this demo we're going to begin to give a more corporate look and feel to our application and because we start to use our own company's resources or images and our source code we need to add the framework to our project which is what my just did the first thing we do is bring up the page wrapper component which is in our project and as you can see this tells us well the layout of this application is this blue bar with a menu and then the content we don't want the menu so Michaels in there wipes out the menu component and replaces it with an image and we say that the image we want is the logo for our application which is a gift called tengo hambre 3 there it is and our marketing department decided that we also want to advertise or sponsors in our site so across the top below the content look for their content yeah we want to insert a reusable component which we wrote before it's called the add component the ad banner okay so now we've we've we've modified the HTML surrounding our layout of our application we recompile notice we haven't added any code well we have add a little bit of code where we do the the advertisement as you'll see once the application runs okay so we log in and there it is our application is starting to take more the look we want this is what this was a very simple change oh we it did was at an icon but what I want you to realize is that you have the HTML there so you can do whatever you want and we can click let's go to the restaurant list page research on restaurants and you can see that the icon here changes because our add component is kicking into place okay so that's how you use the page wrapper to customize the whole layout of your application but now let's look at this list page could you okay in our application we don't want this icon to show up okay this icon allows you to go to the inspect page of over a particular restaurant we don't want that tissue off in your case it could have been something more complex in this case we just we don't want this column to show up and we don't give you access in the weather system to get rid of that column and you're probably going to come across moments in your development cycle where you say well I really wish these guys would have given me this checkbox in the weather system to do this or to do that well that was a problem in previous releases of direct web I think it's much less of a problem now because you can bring up the web assistant is what assistant up okay I think you had to restart the web assistant yeah we do is also an error and startup so just restart here okay so what we're going to do once the web assistant comes up is we're going to go to the restaurant list page and we're going to generate a template for that page and once we generate the template we're going to have the HTML for the template and we're going to be able to edit it but it's still going to be the dynamic version of the HTML we'll be able to do stuff to it but not lose the customer whoops oh the port the port to the web assistant right yeah the problem we're having here is each time the application comes up it comes up on a different port and the web assistant connects to that port so we were restarting the app and the application had changed its port so I didn't know how to talk back we thought we had set a default for that poor bird obviously we added so we were back here we're in the list page and we say we want we hope we wish we could get to the HTML of this piece of director web so we can get rid of this of this column here so we go to the generation tab of the web assistant and we choose list and we tell it to give us the template for this component so that was a very simple operation let's see what that did if we go to the project we see that we have something called util list template and we open that in web objects builder okay can you show a little bit of the HTML going to scroll down okay actually first show the the other view to display view yeah but scroll down alright so here you have the HTML that displays the list page go down a little more a little more but notice that there's no reference whatsoever to your model there's no reference to a restaurant because this is the dynamic version of the HTML we're using indirect to web and can you go back to the bindings view now in the bindings view you will see a lot of references to things like d2 context dot component name d2w context display property keys so at runtime all of these things will be evaluated for you so okay so what's what's good about this we're going to get rid of the column we're going to get rid of this whole column to select I think that's it okay and then we recompile so we're editing the HTML in this case we're doing a very simple area we're just getting rid of a column but it could have been something much more complex in the way you want to layout your display your list display weary compile your application and we're going to go once again to the to the restaurant list page just click on restaurant right okay so we no longer see that column okay so so what right well we can still use the web assistant go back to the web assistant and we might have lost the port again right in previous versions of web of director web when you generated the HTML you had a very you didn't have the dynamic version of the HTML you had a very static it had reference to the to the type to the specific entity you wanted to display so you lost all the ability to customize it but with templates you're able to access the HTML do whatever you want to it but still be able to customize it using the web assistant which should come up in a minute so we're in the list page the redisplay of go to properties for the list page and let's say that we want to display this column just read this play let's say that we want to display the name of restaurants using a string that allows us to configure call up to it something called a style string bold italic and then justifying it to the left you read this play and there you go okay so you get you don't lose the ability to customize your pages using the web assistant and for those of you that have used the right to live in the past I hope you see the power here in in I'm not losing the customers ability so I think this is the end of our demo to rank demo 3 which number are we and I forgot so we've just finished doing the second layer of director web where we're changing the layout of our application but your old developers so you're probably eating to get to the Java code and plug in your own functionality you can do that okay you can in layer 3 or director web you can modify the behavior of your application and we offer four ways of doing that something new in version four or five is called d2w custom component we also offer the director web components as reusable components to use to use in your application as embedded components we offer direct Web API that way you can program to and you can always generate the code the to W custom component second time for developers to wake up here new and four five you can plug in your own reusable component to display a particular attribute in a page all you have to take care of is that that component implements two keys one called object and one called key that's how we're going to instantiate your component and tell you this is the object you're displaying and this is the key you want to display right now in case it's a reusable component so they say you're displaying dates and you have three instances of dates in your page you need to know which particular key we have at that moment and then you use the web assistant to configure to tell us we're going and for this property please use my component you also have all of the director web pages available to you as reusable to component in fact there's a pallet in web objects builder where you can just drag things into your HTML and do and set up all the bindings and in case you want to embed one of our list page in one of your more complex pages you have API that you can program to you can jump into the dynamic world of director web from your applications even if they didn't start out being director web applications all you have to do is add the framework to your project and you can call methods let's say that you have five pages in your application which you wrote but you like our list page you would like to do 80% of what you do but at some point have a hyperlink that jumps into the director web list page because you don't want to reproduce rewrite all that functionality you can do that and the key to doing that is messaging a class called dtw and we got a static method called Factory which gives you the main instance of the director web class and in that class you're going to find a lot of methods like this page for entity name you'll find another method called entity and query page for entity name inspect page for entity name and you give us the entity and the session and we'll give you back the page okay so from your code you can message us and we'll give you back the page for you to jump into the dynamic world of direct web and obviously each one of these pages you get back it's going to have its own Associated API in this in the case of the list page we have methods set data source and set next page so for example here you can tell us if it's a list page where are you going to get your data from after I click return on my list page what do you want me to go back to you can do that so if we weren't in inspect page you would have slightly different API but you have API to all of the pages in director web so that you can jump into them from your code and finally you can generate code you can say this is all great but I really really need I I really need to see the Java code to see how you're doing this particular component well there's a button indirect in the web assistant where you can say I'm done with all the customization you give me I click on it and we dump all the HTML and all the Java for you to see and to touch and do whatever you want with it in fact we try to remove all of the references of director web and the Java code we have so it's it's all unrolled so you can edit it without being dependent on direct to web so much the downside of this is that we don't read part we're not smart enough to reparse the code for you to be able to customize your pages using the web assistant ok so you got to give up something we give you the full access to the HTML and the Java but you can't use the web assistant to change your your pages on the fly anymore we now go to our final demo what we're going to do here is if you've been paying attention to the first page that comes up when we bring up the application the first thing that comes up after our user logs in is a query all page where they can query on all the entities this does not make sense in our demo we want the first page to be the page where they can query on a restaurant so for this we go into the login and then to the page for the login code into the code for the login page sorry and we change this method to it used to be DTW factory dot default page we now rewrite it to be d2w factory give it the direct 12 class and give me the query page for the entity that's what i want to be my default page so when this method default page is called I want you to return the query page for restaurant and I want you to that's the first thing I want to see in my change so we recompile the application again a very very trivial example but this could be any this could be your code in your method in your classes will bring up the page we login and we get an exception yeah Draco does not come with spell checking yet the yet part was a joke okay don't this is I'm not announcing new features here so when you took it too seriously there so now we now we log in and the default page is our query restaurant page we could have chosen any other page this could be your page this could be your code that could be your button and you could click on that button and choose to go to another direct page director web page you have the ability to do that you have the API now we're going to search on American food again we're going to pick cafe max in Cupertino I notice the street address here we removed all of the other fields like the city and the city code and all that we did that for a reason for this part of the demo we wrote a component that displays an address all compacted into a little safe into a little it's compacted enough to fit all here so we don't have different rows we can we can just type address and we'll see all of the address but the important thing about that that what mike is doing here is getting back to the applet viewer if you're wondering what all that spew and the screen is he's trying to get to the port of the applet viewer so he can bring it up again for this part of the demo so we're going to plug in our own component so imagine you're you're you're coding along and then you say wow I wish I could write my own component to display the address the way I wanted to display you can we wrote a component where you can display the address as a hyperlink which takes you to Yahoo and you can see a yahoo map of your of your of the address this could be any other component in your application so we go to the web assist and we say you know the street address I don't like the components you give us Miguel they're good but they're limited I want to use my own so you tell us d2w custom component and my own component is called street mapper and this component implements the object and key bindings you display at runtime and then we have our component here don't don't click on it yet so now we're we're showing the address the way we want implementing the functionality we want because what we wanted to do is for people to be able to click on that and take us to Yahoo okay so I think that's the end of our fourth actually that's the end of all of our demos we have a little summer okay so we've just finished customizing our application at the third level which is default we didn't show you by the way but it would have been just a CCE you bring up the web assistant and you could generate code and we would have dumped all of that Java and HTML for you to edit but I mean you've seen that before and you can here you can do whatever you want with it so in summary director web Java based technology for rapid development keywords here or rapid we want to do things fast for you by providing a lot of functionality now the keywords database-driven all of your direct web applications start out from a model and it gives another keywords web applications by well I mean HTML this is the HTML part of the web objects the next the next talk Java client is where we bring up to the nice Java applets which is Steve showed in his demo how do you configure things using direct web you can work if you don't want to get your hands dirty with code you can use the web assistant and to tell us how you want things to be laid out how you want things displayed that's okay you don't need to do that much you don't need to know to know much of what objects to do that but in four five we've introduced two powerful features very simple but I hope that the web objects developers out there realize how powerful these two hooks are to your applications you have access to the dynamic version of the HTML using the two W templates without loosing the ability to customize your applications using the web assistant and you have a way of plugging in your own custom components to display the attributes till the way you want and implement your own functionality you might have a hyperlink or a button in one of you custom components and do whatever else you want with the page without losing the ability to customize other parts of the page dynamically and ultimately you can do cogeneration where do you go from here the best place to start is probably go to one for center there's a new there's two new books for director web there we still have the tutorial in the web objects tools and technique part of the web objects manual we also have a new book written by Cliff Lee one of our dog people a wonderful book called developing web objects application with director web this book goes into a lot of detail about the architecture of director web and the rule system and how it works in the context and how you can override it and you can write your own task and a lot of stuff I didn't cover here because it's just too much for one hour presentation and there's also some updated reference of all the frameworks and all the classes in director website you now see that you have this API well the methods are explaining in this and what I would recommend beginning web objects developed by actually anybody that hasn't used direct the web is to just bring out bring up the movies model which ships with our product and created a generic direct web applications and start playing around with it configuring up your pages and generate code and seeing all of the functionality we give you