WWDC2003 Session 614

Transcript

Kind: captions Language: en okay enough we've all these j bottoms it we crap finally a web object session please welcome fit Kenny and David hi good afternoon good afternoon early evening my name is Brian Fitzpatrick and i'm here with kenny lee jung & david newman to talk a little bit about reusable components in web objects now there's a lot of different things that are reusable about web objection in fact even reusable about this presentation so you know looks like but some things like some reusable slides you know everyone's presentation I've done a web objects oh that's for you just had this slide in it unfortunately it's nothing to do with reusable components but they look great I mean look at the stuff you can do with web this is a really nice flight from last year wwc 2002 you know so that's another reusable slide but we'd like to move honest and reusable joke anybody who caught my presentation last year and optimizing webobjects anybody you still left so using web objects you know we had a few jokes so we have a couple questions the Q&A ok so to sort of get everybody paying attention and waked up waking up I'm going to put a question up there and I'm going to put up a couple different answers when you see the answer that you think is the correct answer I want to hear you clap ok so exactly that you rest mass No alright so the first question what's the longest was it met the name and web objects now start clapping to the answer is because these guys have prizes which are lovely web objects hat all right okay longest method even web object is it add objects to both sides of relationship with King oh it gets better it gets much better is it database context will run login talents to open database channel that's a delegate stuff kind of cheating and yeah well we've got this one adaptive channel should construct stored procedure return values nobody thinks that's the long to see empty space down there you're expecting something a little bit or well we do have one more that's a little bit too long to fit onto this one screen so anyway so what is the most popular web objects movie this summer if a lot of movies out this summer oh come on we have we have the NS matrix reloaded we have X go to code United that was the popular would I don't know any clapping NS debug rat anybody sets up terminate application free the rise of the person or is it finding EO [Applause] okay what's the best name for the release notes to get people to actually read them I just don't read me nothing to see here you editing context at Java SJ mackerel 2004 jockey or g6 specification okay we got all that's out of the way now now we're here to talk we're going to talk about actual reusable component we're going to talk about a different thing a number of different things but the first thing I want to point out is that this is an advanced session a lot of people in the past have asked for an advance session they wanted a session where we can talk about doing some stuff with web objects that you don't normally see or figure out the first six months a year or two you're using web objects so the first thing we're going to talk about is commitment okay when designing reusable components if eof is all about relationships and reusable components are about commitment and bindings you should strive for I'm going to see something in the background here you should strive for loose bindings and low commitment we mean by commitment we mean frameworks to include you want to do something funny one what am I missing here mostly men in this room oh my wife's out here somewhere about commitment frameworks to include reusable components if you really want people to reuse it to reuse your components or you want to be your own components you want to have as little commitment as possible you want to use the least amount of frameworks to include you want to have the least amount of interfaces and the least amount of bindings that are absolutely necessary so if you have a component that someone's going to drag into their other component and bind up to that you may have 5 10 20 different bindings but maybe only one or two of them are required or it only works with enterprise objects maybe that's the requirement of your component maybe you can just get by with key value coding so that's what the most important thing is it's about commitment and how do with the bindings so we're going to do a little introduction now and then Kenny's going to come on and talk about binding and how to use binding and in the most efficient manner and smart binding that sort of thing days going to come on and talk about component content I'll come back and I'm going to talk about streaming HTTP requests or we got something great there then we got some tips and different tips and tricks and a section we like to call dr. evil which is going to talk about some things that you can do with with what objects in the logics framework but a little on the edge and then finally I have a few examples to show you of reusable components so reusable components or web objects GUI widgets if you're coming from coca-cola and you've used interface builder you've got your pallets of different things you can use in web objects you've got dynamic elements reusable components involve taking these dynamic elements composing them modifying them to make more interesting reusable components that you can use we use either within your project or from project to project reusable components or subclass as a rule of low component and an important station to make is there's no there's no difference between a small reusable component that is anywhere from one character to the size of an entire page in fact when most people begin using web objects most of their components are entire pages you can edit your reusable components in web objects builder you can also use your favorite text editor Emacs VI cat stickies as the payment is pointed out in the past we talked about child components and parent components when a component is is within another component that is referred to as a child component the component that contains that component is referred to as the parent so it's a little terminology to get straight now there's no limit to how deep components can be nested they can be arbitrarily deep you can have three components deep you can go 40 50 but as you get deeper and deeper there's a performance price to be paid and you would use your reusable components just the same way that you would use low string will hyperlink and you may be used my component my string or whatnot there's a number of different design patterns that you're all familiar with from writing software and I'm going to talk just brief about some design patterns for using components in the web objects component model one thing is templates which there's different number of different ways to deal with template you know that your web objects components have three three major parts the Java file the bindings file in an HTML file now the Java file you can keep the same if you create a component and include that in 21 until into your into your project or your other component but if you need the view layer to look different if you need the template part the HTML markup to look differently what you might want to do is either subclass that component and create a new one in HTML file or you can even there are ways to dynamically replace the wad and HTML file in your component another thing another design pattern which we'll talk a little more about as many components now I've done a lot of different web objects project so one of the favorite things that I'd use is many components okay now if you put everything in a very complex page in one component not only do you wind up with an HTML file this big and a million bindings in a whole heap of Java which is a little harder to deal with it maintained but you also wind up with your everything's kind of moves together so what you start doing one of the first steps you do is you start dividing things out one of the first things people do is a header and a footer and then the other maybe they'll wrap their page in a header and a footer people will then create menu bar and navigation bar component different types of things so many components is a pattern where you create bunches of different components and compose them so it could also be called component composition so if you look up here on the screen you'll see we have a screenshot of a web objects application which has a navigation bar at the very top and it has a QuickTime VR or in this case it's an image maps you can click on and go look at the VR and we've got different pop-up menus choose a country choose a city and then we've got a search box and then below that we also have a an image map a clickable image map of the world and another search box now looking at this how many components we take on who thinks there's one to five components on this page anyone know 15 to 10 5 to 10 components anyone pretend to 15 okay we have actually click about 10 to 15 components and that isn't including the rapper component of the head HTML header and footer or whatever not so including all these components binding them together provide you a very powerful way of using using web objects components and a lot of these components are reusable it's not necessarily from one application to the next definitely within this application in other sections so it's something to think about so now to talk about bindings I'm gonna introduce Kenny Lee Jung from oh you know it's just drawing a blank who are you from solange I research institute in Southern California Thanks the bindings are really the heart of reusable components so the mechanism by which we reusable components communicate with their parents you can call them arguments to your easel to your reusable component or the API to your reusable component and like all API you could try to make them lightweight and simple we talked about bindings being pulled into the child or pushed into the parent the child being the reusable components the parents being whatever it is that you're using it in the child is in full control of pulling and pushing of the bindings and not the parent the parent really can't do anything about that now and I've seen even experienced developers a neglect this last point you should fill out the API for your components that whoa in web objects filter that's the little puzzle piece in the toolbar and when you push it when you get as a little panel that pops up and and you can basically document the bindings that your reusable component requires not only that's like you can you can make it so that marks some of them as required make it so that if one is is found and the other another one must be found if one is found another one can't be bound so it so it really gives you gives the person using it a lot of clues as to how to do a good documentation without without their having to remember what all the bindings are so if you've got a big one that has a ton of bindings and I've got a little request to the wob teams actually allow us to put health in there as well now there are many ways of handling bindings you see or model synchronization to all kinds of stuff more than we can fit on a page here unfortunately there's not one way we can say is better than all the rest except to say that auto synchronization is probably not good not a good idea for your reusable components now you basically the best thing to do is learn how they all work and apply them properly in all situation in the right situation and in the interest of time I'm not going to go through all these so don't be surprised if we skip a couple along the way so what is auto synchronization its web object mechanism for automatically put pushing and pulling the bindings at the appropriate times within within the request response loop bindings are pulled at the beginning and end of the three phases of the request response loop take values from requests invoke action for a question attend to response they're actually pulled at the beginning of take dollars from a quest pushed at the end of take values from a quest and likewise in the other two in the other two phases it's the it's the web objects default but it's important to note that it doesn't preclude if you have turn on it doesn't preclude manual synchronization so you have these six points where things get to get synchronized for you but if you need to do it at some other point in within your request response loop you can you can still call a value for binding set value for binding it doesn't interfere one way or the other with with your getting a binding values and in the grand tradition of extra long gratuitous Lee long method names we can override synchronizes variables with bindings to return false and reusable component to go fully manual now why why is Otto Otto synchronization undesirable for reusable components one thing is it's it's really magical for people first coming into web objects they're like how does this work how does it know exactly when to stuff values into and out of my visa components so by doing all of all the handling of bindings yourself you know exactly when they happen whether it's going on and it takes all the mystery out of it which i think is a good thing yeah another reason is it happens more often than necessary if you add it all up you know it's six times per component / for every request response loop that and that can really add up for display only components you can usually get away with just one poll per request response loop and there may be a lot of bindings that depending on the values of other bindings that you'll never grab so you can get away with just not doing any single nation on those bindings the other thing is you may have to worry about side effects on your access your method you know if you increment something inside an access to a method or something that you that you really only expected to get called once during a request response which now gets called three times so you can so it's just more stuff for you to worry about and certain probably the most important bit here is that the order in which bindings are pushed and pulled is indeterminate so if you have some kind of behavior or value that actually depends on the values of two bindings like if one if finding one is now inviting two at the value or if binding to is known buying one has a value you do something when your access or method gets called for forced a binding to you can't be sure that binding that the value for binding one has the right value at that point so I'm going go on and talk about access to methods with cash as one of the techniques for handling bindings if you look at the examples that come with webobjects you'll feel that a lot of them use this technique and it's not rocket science it's very simple we use caches to improve improve performance and we flush the caches at the beginning of the pen to response now there's a good reason for of doing it at that point but I we're not going to get into that here take a look at a little code example I'm going to try to use my wimpy little laser I don't know if you can see it here where sharks with lazers cotton coming off their heads when you need them so here it's very simply we just say if binding equals nulls and binding equals value for binding binding I thought when we turn the binding in the set in the set binding method we say set value for binding to push the value back up to the parent and then the ped response we just to empty the cache miss a binding equals null as the kind of extensions is we can have default values values for binding this is really good in in keeping with the low commitment part of philosophy that if you if the component itself provides the I a default value is one less thing that the consumer needs to need to provide and again it's very simple we just say if after checking after doing values for binding we check again to see if the binding is no and if it is no we just do set finding and as in previous example set binding we'll just we'll just push our default value back up to the parent if it's found which is a which is it gets you know the parent will need to know what what that value is next talked about page level binding so the typical way in which we see this is you that you've created a you know beautiful input component it has a flag on it you can you can have it either in a display mode or editable mode and you want to drop a whole bunch of these things into a page and you'd like to control them all by just throwing one the one switch on the page but you know it becomes a pain to bind up editable to all of these little components you and you know it's all air it Sarah phone another extra thing to do and if you nest them inside other components you can have to propagate that editable flag all the way down it's much more convenient to how just how the component crawl up to the page that it's in and and ask for the editable flag itself it's just a little impulsive thing that it automatically knows about we can still allow manual overrides by explicitly providing a binding to want to be so if you want for instance to have 40 reasons have one of the fields not be editable while the rest are you can easily control that similarly you can have session and application level bindings work where a component can just go to the section or the application for a flag and or some value and figure out what to do now looking at example here so we check if we have a certain binding by using has binding and if we have the binding me to return value for binding this is our manual override and then if we don't we just return route value for key for the flag delete that we're looking for now route is just a little recursive method i'm not going sure here that just crawled up calls parent continually until until it gets to the top and again with the low commitment philosophy we catch an ascii value coding on unknown key exception so that if the page were embedded in doesn't actually implement editable everything is so cool we just keep on going and i'm going to turn it over today to talk about component I can't forward that ok ok before component content came around there was a thing called the switch component and the switch component existed to allow you to create reasonable components that had a region of dynamic content something that you as a component designer didn't provide and you wanted to consumer to to be able to provide this thing it had and still exists I shouldn't say had it has some complexities and make it a little bit inconvenient to use for that purpose as it turns out one it requires the existence of some other reasonable components so if you have a page and you use this reasonable component and you want to use some customized stuff you've got to have this other component around just to switch into it also your switch components it defines a set of bindings and your reasonable component design says I have blinding type a B C and D and that means any component that you provide to customize to switch in also at stay here to those limitations so later on in history of web objects something called comp ono content came around and it lets a parent to find anything i wanted right there in the template and there was no constraint on the dynamic area you could do anything you wanted and it wasn't even the need for passing bindings because the customized stuff was defined right in the parent directly now having said that dissing the switch component let me just say that it is actually so useful for certain things you might want a component at inside a framework to express itself in a certain limited number of ways and you want to just get some type of polymorphic effect where you just have certain discrete kinds of components that do one particular thing and do it in that particular way just inside your framework there's also the situation where you created a reasonable component that had this dynamic capability and you didn't want the consumer to have to customize anything to them you want to just to look like a black box and the other one that's still relevant today is the need to have one more than one dynamic region okay and it's to address that one that I want to introduce this con it's called multiple component content I'd imagine anyone who's used will component content has probably wanted to have more than one of these things that they could put in there so the parent could define more than one template in which to customize irritable component and this concept we call that I'm calling multiple compliments of content removes this type of constraint and in an example app that will be demoing in parts and that you'll be able to download there's a source for a couple dynamic elements that implement this concept okay and they're called once called our key component content any others are see template so it i'm going to give you an example of where this might come in handy in on the screen here we've got a page template almost every web objects application tends to have something like this and the typical way this would be implemented today would be you'd have a low component content for the body and you might mean you'd switch components for the header and for the menu and what i'm saying here with multiple component content the parent page that incorporated this template reasonable component could define all three of those regions right there in the inside the parent itself so what does this look like from a development perspective I've got on here the definitions for a reasonable component it's up we've got the component HTML and the component that wad file and the this is a trivial example but I just want to illustrate what's going on so I've got a table and got two cells one's got a top template and one's got a bottom template and the reasonable component that wad file a declaration file has instead of one wool component content it has to RC component contents and there's one new thing here what campana content didn't have a name but multiple compliments of content does in this case I've named the first one to top template in the other one bottom template and what this looks like to the consumer the parent they put one of these reasonable components on the page and you may recall for low component content I don't need the nested elements that you see here I there's there's only one element so I don't need a one nested template to define it anything between the opening and closing tags other simple component is enough to define the the customized content but in this case we've got more than one so in this example you see two things up there but imagine there were four or five or more defined and an example below you see in the parent i wad file we've got to RC templates and they have a template name the top template and bottom template and this is how your parent tells a reasonable component I want this content to go here and I want this content to go there okay so so go to demo okay right I'm going to kind of not show so much as just a introduced this is the example that you'll be able to download that has the example code this is an example of a open auto be familiar to some people in the room but anyway this is a page template that defines a look it's a complex formatted table and I've got content here in the header and the left and in the body it is all defined in the parent the table itself everything you see on the outline with a sort of aqua effect is in the reusable component okay and to better identify what is dynamic in terms of the compounded in the page we look to show you this one if you make this a little bit bigger so the correct doesn't look so weird with the same reasonable comp owner but different content inside both of the cells there's also a notion of what a this allows you to implement something or more easily implement a concept that called view inheritance don't have time to talk about this whole sort of abstract thing now but maybe we can talk about it afterwards or in the QA there's also the notion of you can have conditional content this is an example of a reasonable compliment that has two templates and the reasonable component decides to only show one of them based on some conditional and there's some other examples here that usable complement content but I just sort of wanted to give you a little overview of where it's been used and illustrated juices inside the example here back to the slide thank you and this is sort of review what's in multiple components why you might like this it allows you to do away with a switch component so you can have just your parent you can have your three regions of dynamic content and you're pretty much done there's no other components that are needed and therefore you get less complexity in this type of solution so let me move on to streaming requests and responses where Brian will come up and take care of this area thanks day so before I start talking about streaming request responses who in this room has used a non streaming will file upload and run on a memory in their machine anyone who's asked for this streaming adapter for the last year I've been one of the people asking for this ok hit Francois that new Francois we now have streaming file uploads and it's all thanks to carl sue in front swazi oh let's give a big hand please all these guys Carl Carl almost didn't so physically harmed by working so hard on this work hours and hours and hours just poor hand we now have streaming requests in responses so for those of you who are relatively new to web objects in the past if someone uploaded a file to your web objects application that was pretty big let's say someone uploaded a 50 megabyte file in your application the web objects adapter in the web server would suck it all in and it would shift it over to your web objects application which would have a copy of this 50 megabyte file in this request object and then when it went through and did take values it would create another copy of this 50 megabyte file for you to just walk about what to do what you wish which you can then shoot to a file a database another server that sort of thing ok with this going on you pretty quickly went on a memory garbage collection or not so now we have streaming requests and responses you can't it when it when someone uploads you can use a very usable component now this is a component that is way we usable will file uploads depending on what you bind to it you can get the standard no streaming web objects file upload binder the data binding you get just what you used to have which is fine for a lot of different things if you know people are only going to be uploading small objects or small files and that sort of thing you can use the stream file path binding which is allows you to just simply pop I specify a path and the file will get shot off to that you can use the output stream binding or the input stream binding so there's a little there's been some confusion about which one it does what so we'll start off talking about streaming the file path which there are actually I believe there's an issue or two with stream to file path but that's being worked on right now you provide a path where Bob's extremes are data to it it's just that simple come up with a simple java.lang.string and your data is going to wind up there you don't have to create any stream objects you just come up with a filename you can also set the override bindings wonder if you want to make sure that the user doesn't overwrite a existing file and other neat thing about this is that you know Kenny said earlier that you don't know it's non deterministic which order the bindings on a particular component are filled out how just make sure that the filename binding is set first for you so that you can take a look at that binding and perhaps come up with a different output stream I'm sorry a different file path to write to based on that inputstream voice vs output stream so output stream is the easiest way to take advantage of streaming request the data is streamed for you during take values you have to by the time your action gets ahold of the request the data is already where it was supposed to be so piece of cake you're ready to go however you need to create the output stream so you have to come up and create a Java output stream which might be to a file to another server to a database of whatever not it's up to you and the other nice thing about this is you can have more than one file upload on your form and it can be in any order you can have text boxes here file upload more text boxes buttons multiple submit that sort of thing so if you really need a lot of control about data that someone's uploading you might want to use input stream now input stream is really fascinating because you are sort of taking part in to the whole take values request you're really you're really getting in I'm sorry you're taking part in processing the request you're getting in and handling part of the the take values section so what you do is you set up this input stream and then you read from it well objects points the data at it you read from it and then you decide what to do with it now this is this is really fascinating because which you can do in either component or a direct action is you can get ahold of this input stream and say hang on a second I want to make sure that nobody's sending me up you know a copy oracle8 so you get your request object then you get your multi-part iterator object and you can ask how many bytes are remaining in your clear in your request and it'll tell you with almost it's very close exactly so it's not it's not exact about how much is what left in your request okay so that's a great thing for people have talked about in the past of having issues with and someone mistakenly uploading something really huge other thing to remember with this is that you can only use one file upload in a request and you can't use multiple submit so you get more control using inputstream you maybe don't want to write anything in full maybe you want to process the data or send it to another server so you can do all these different different things with your input stream now one of the things I want to point out is that you can also you can use these as a component action or compound in action and some people say or you can use them as a direct action now if you use a direct action at with an input stream you can use the multi-part iterator which is which is documented beautifully to go through to basically do the take values part yourself you get a hold of situating you say give me the next thing give you the next thing it'll hand you all the form values and then it will hand you the file upload which you can stream off to somewhere and then you can continue going more for values another file upload so that you should only use with direct action that's the wool multi-part iterator really great stuff so streaming responses ok so if streaming requests weren't enough these guys decided to go ahead and implements and streaming responses in the past if you had a file to download to the user for example dynamically created graphic jpg or PNG or gif or something what you would do is you'd override a pendant responses in your offending response new component you do set content on the response you set your your content type and then you shuffle it off and you're done with it however that means of course you have to have in memory the entire thing that you're going to stream down at the client with streaming responses you create an inputstream assign it to a well respond by using set content stream and you return the response and you're done it's just that easy and your memory is going to stay at a concentrate so that's it for for the streaming requests and responses again thanks to the fence want Carl for the hard work [Applause] okay I've got a couple topics and Ken's going to kennys going to come here and give a couple topics what I want to talk to us about something I've seen by looking at various code bases over the years people have difficulty sometimes creating reasonable components because of they trip over what I call just initialization of a certain thing and in the crux of the problem comes because you start creating pages and then later you may start creating reasonable components and even though they're the same thing and that they both inherit from a little component there are differences in how you interact with them when you're creating them so you know with a page you create it you set stayed into it and then you return it and with reasonable compliments that appears on the page the system is doing the creation and bindings are the things that are being pushed into it and you don't have like direct control over so the question becomes when is it safe to initialize supporting structures this is more than just getting buying the interiors it's it's creating that list to strive in a pop-up button it's still Turing something a bunch of Singleton's just creating a bunch of stuff that's basically one-time-only creation you don't want to necessarily do it over and over again in creating these supporting structures you may need bindings you may not may involve going to the database that could be expensive so you only would want to redo it unless it was absolutely necessary so I'm going to actually give you a solution the one that I prefer the way I've approach this problem and that's just to construct things lazily this is a pattern use throughout webobjects an eof it's not just for performance it's it's a something I found simplifies this whole problem so basically the way it works is it's an extension of a pattern that can t talk about earlier list of stuff if it's not there create it and if it is there just return it now you know why go to the trouble of having that method with that the type of a format when there's a constructor laying around I just want to sort of go over some of the things where I've seen people try to do the same thing in different places and some of the pitfalls with that so why not a constructor one reason is when you're in the constructor you don't actually have access to the binding so suppose you needed access to that then you know you couldn't put it there it if you didn't need bindings you still would probably want to do it in the thing I suggested rather than this because you might create objects unnecessarily you're in the constructor the page hasn't rendered at all yet and made sure not you don't need half the things that are on the page that could be on the page because they're being hidden by conditionals or something and then the point that another point there is like what if you need to change the list later there's issues there with cash and validation since the Constructors after all call the only want the other thing is well ok fine I'll put it an awake but you still some of the same problems again bindings aren't available by the next best place to try and put this sort of thing is an append response but again you might create objects unnecessarily because if you put it in a pending response you need to do this before you call super so the reason up well I guess I want to one more thing to talk about here this is a workaround I've seen and just don't do this but anyway this is something I've seen I just want to highlight it cuz they can be seen it in your code and you maybe you should pull it out but people want to use that constructor really bad you know they want to put the stuff in the constructor but they don't have access to bind us if you say I know I know what I'll do I'll take this stuff i'll put it in the session and then i'll put these things in the session in my page then return my page and then the compliment will construct itself it'll pull this stuff out of the session and hey I've got any problem I've avoided the whole deal with and I've been having access to bindings and like instructors on like old one and the downside to this is I've got a more complex session there's what's reusable that there's it's less reasonable because now you've got all this external coordination that's required the page that's returning this thing has got to know something about the components that are on the page that you're returning and again you have some of the other limitations i mentioned on the previous slide so summarize advantages of lazy initialization instead of coordinating you let your reasonable component coordinate things itself constructions deferred until bindings are available okay that means the only time you would ask for a list of states that are popular in a pop-up button they fetch from a database would be in either take valuation request in bulk action or penned response and those are also the places where bindings are available so that that problem is kind of solved and if the list is never needed it's never so this is one of those rare situations where the thing that is good for performance is also good for making your code as simple as possible and the fourth point there's a bit subtle you get easy cash and validation instead of you going every time you make a change explicitly changing something or rebuilding at every request and append a response or some other place all the change agent does the code that makes the effecting change all that code does is nulls out an instance variable and if the new list is never needed it's never constructed and more importantly from a simplicity standpoint as long as consumers are only asking for the access ER and they're never actually asking for the instance variable then the consumer never worries about what's going on underneath it so getting to this next topic topic number two I call this thing the mysterious take values failure and I couldn't think of a better name for it and I even kind of got the criticized for this but you know maybe someone will I don't give me a better name but anyway let me just summarize the problem here some but not all the changes are missing like you fill out some stuff on the page you submit the page and some stuff and this text field shows up and this check box shows up but these other things aren't there okay that's weird number two on occasion you see exceptions thrown in the take the elation request process right in take the ocean request your code isn't even called in or like is this book and web objects what's going on and then then the third point there's a and this is the kicker you've noticed that you rearrange elements may be surely by accident and the problem goes away so like what's going on to illustrate what's going on let me give you a more concrete example let's have to assume a very simple page you've got a checkbox you've got a conditional and inside that conditional de text field and it turns out that the setting then check box controls whether or not the ax text field is visible so it's checked the user sees a check to check box when they uncheck it and they type some stuff in the text field it hit submit and what happens on the server is a server extracts that value from the check box and as far as the server is concerned the textual doesn't exist anymore it's hidden that the user sees it in the browser but as far as the server's concerned that thing's gone so not going to ask for the value the values in the request everything went over okay everything was fine on the browser it's just that the page it's at the very last minute nap i'm not going to pull that you know so the solution to this would be rearranging the page you might just if you put the check box after the text field in this example then it would in fact get the value in the text field and the value in the check box and doesn't in to summarize the basic condition of the problem is if you are doing things and take knowledge from request if the user is submitting changes which change the structure of the page you know you could be headed for this problem so there's two solutions to this there's the brittle solution which is well I don't have a lot of times I'm just going to take the check box and I'm going to move it down here done I'm going to I'm going skiing I'm going to the beach but by you know that's it but that kind of falls apart because you know you're but it's going to get chewed out on Monday when the design people like rearrange the page and everything looks better to them and your app doesn't work you know or worse someone did this in design and they didn't even bother sending through QA because they didn't change any code so hey there's no big problem and though these exceptions are flying all over the place and you got to come home from tahoe so you know that's no fun so what I suggest you guys do is um if you have things like the check box example take that state put it in a holding variable and in a take valuation request in your reasonable component before you call super extracting the whole in variable and put it in the ultimate storage that way if you're retrofitting that's back onto an app that may have more than one action you put the change in one place and all the rest of your code on the page doesn't have to change if you only have one action that it's okay to put this kind of thing in the action method if that's more convenient getting on to the next topic is Kenny so the next topic is obtaining values from objects it seems deceptively simple why am I even talking about it typically you run into you run into this when you're you have a component that displays a list of objects or it takes it takes an array of objects for a binding so it's trying to display a list custom pop up but another table component or something like that and the problem arises I think because people try to encapsulate too much into their reusable component whole idea is for to be functional so they try to try to insulate the consumer from the innards as much as possible so so what beginners typically do is they have a binding for the array of objects and then they have a key binding which which they take in in and as the component the reusable component iterates over the list they they call value for key on the object to get a value to display as it turns out this isn't the this isn't very flexible it's it's better to let make the consumer provide the item and a display string binding instead of instead of a key and the guy the advantage being the objects being displayed then don't have to actually respond to key value coding because you're not calling Valley 44 into it web objects has another neat trick to do key value coding on objects that don't actually respond to key value coding and and also the parent is free to use custom methods to generate the value so for you know if you want to derive some value awesome attribute of the object that's not already in the object this gives you a lot more flexibility let's take a look an example here of the not so flexible situation so we have the list binding and the display key binding and in the parent when you where you use it in the reusable component we have we're repeating over a label and in the water the reusable component we have value equals display string for the for the string we want to display and we're doing Valley for key here in in the reusable components Java the more flexible version is we make the consumer provide an item an item binding and now the display strings of being a constant is it says this display string so bind to my method display string and the HTML stay the same the important thing here is the wad you see that item the item binding the repetition is now carrot item which means it's pushing that item back up into the consumer every time during the repetition and the display string is also carrot display string which means instead of using my method to get the display string use my binding value of display string and in the parent here if you see it's returning the name bracketed by square brackets so a little example of derived value now if you didn't want to have a custom about a custom value for the display string you can just here in the parents wad you can say display string equals item name instead of display string and you can get rid of the display string method in the parent all together it makes things lighter weight for everybody okay the next tip is using wool component content in tables it's kind of an extension of the same mentality because before people tend to when they write their first table component have a dual repetition inside inside their table component and they and they they repeat all the cells within within their reusable component what then what ends up happening is while they want some they want this column to be left justified in this company right justified so they add those justification binding and in the end they want one to have bold font so they add font finding and they want another one to have a larger a larger font size so they have a size finding and then it eventually gets to where you have an infinite number of bindings to try to configure your table and it's still not it's still not as flexible as you want it to be so the solution is to put more work on to the consumer and how the consumer provides the table cells themselves in wool component content and this allows the parent to do anything you can put images in your cells hyperlinks you can make multi multi line cells color tell backgrounds whatever it is you want so in taking example as or take a looking taking a look well that's the not so flexible exact version whoops you see here that the list is passed into the reusable component and the parent passing in headers display key display a line display style and then the reusable component has the dual repetitions of the row repetition and the column repetition with the the TD tags and the treo tags being repeated in the more flexible version we see that the now the parent it has a lot more stuff in it it in the HTML it now is bolding the first column and centering the second column and right aligning the third column and we have a finite list of bindings and the table the the reusable component now just contains the TR tags and not the TD tags and this example will be broken forgot the old repetition takes but it maintains control of the TR tag so you can still do things like alternate roll colors and highlight a role for selected for selected row ok that brings us to the dr evil segment you know sometimes there are some techniques that are so handy that you just have to use them even though you know you're going to go to hell for doing it so the first one is a parent talking to the parents talking directly to reusable component i said before that the child is totally in control of communicating with a parent be of bindings of course as in all things that's not quite true like what we can do is in at the beginning of a pendant response we can do set Valley for binding this to a binding value now what then whatever the parent has found two to that binding value takes on the value of its of the the sub components and the parents can start talking to the sub component you might want to use this in cases where no no number of bindings is flexible enough you just need to be able to talk directly to to the object and it's important to note that the value is not available until the child start generating its response so you may want to do you may want to do your communication like inside a set method or something like that or when after the child's after the child starts depending to response it may get a binding which will signal to the parent that it can start now talking to to the child as they as a fall out of this you can do something that's also otherwise impossible allow to sibling components to communicate on the page if you know if I as the page is generating its response the first sibling will push itself into a binding some other some other component further down the page can pull the binding and suddenly you have two siblings talking directly to each other be careful when doing this next topic is is array bindings a lot of times you have a lot of bindings that are just simply a raise of string constant and you don't want to write a whole bunch of little bits of tedious code to create a raise of string constants because the syntax in Java is almost as bad as is and see so what we can do is just use a little trick use a method called you know we can call it a raise array binding named and it just checks a binding to see if it's of the type NS array it is it just passes it on through and if it's not if it's a string then it just assumes it's a comma separated list and uses a component separated by string to pass a to pass an array back and now I'm going to bring a Dave and Fitz up and going to talk about the recipes okay one more thing and then we'll get on to a just kind of going to the example a little bit and supposed to be too close of the formal part of this I want to talk about smart bindings this is this name mechanic come up with I'm really bad at naming things so anyway I want to address the situation that you may or may not have I've ever need a situation where I've had hundreds of stuff on the page and I just need to do some trivial thing you know and I want to like hell to stick it in the declaration file but we don't do that a declaration file so you end up having a whole bunch of trivial methods to do that sort of thing and the kind of thing I'm talking about is a I can example we'll see up there might have a path one might want to append something to the front you might have a lot of low strings and you want to end up having the you want to have the same basic method but it takes arguments you have like a gazillion different constant arguments and you need to pass to it now the solutions to this type of a miniature problem is you can create a little component that performs the intervention and then you don't you're not adding code your page but now instead of having a low string you've got your special trivial string you know that you got everywhere that's kind of unsatisfying the alternative is a dozens of trivial methods but there's one other alternative called the smart binding and can illustrate what that means is I want to give you an example from something I had to deal with I had this page and it had a customer's order history and therefore they're an enormous amount of total money totals on the page and I ended up having to have literally hundreds of methods like those up there order detail subtotal blah blah blah and all these guys did was turn around and do value for key pad on the page got some value and then they did some currency conversion on it so with the smart binding technique you can have a bindings like that and in do away with the methods and what you can get away with this is a realizing effect that on a page if you override value for key path this is the way that all the key value coding happens from your component into everything else you might override it and do certain special stuff like in this case it looks for native currency in the app sign inside the key pass and if it finds that it does some special processing now there's a version of this kind of taken to its logical obnoxious extreme called whoa-oh GNLA believe it's part of a certain project in traditional marriages but anyway it's that even if you don't go all you know use that technique business can be quite useful imagine sticking something like this and another a lot of similar things in an abstract component that I just used you know throughout the application and then you know you've done away with lines and lines of code Churchill code ok so now if if Kenny is going to hell for what he did I'm sure I'm going to be submitted to something much worse like having to write VB code for the rest of my life or something for this one well this is sort of just like plant a seed in your head about some of the things you can do to really abuse with objects framework what about this component the dynamic elements that ship with what about merely know how to to display themselves you can do like whoa string it can display a string will hyperlink knows how to display a hyperlink and how to provide a link and all the jazz to get you to another action in your web objects application you can actually develop your own components that sort of subclass whoa component so for example up here in the state screen we have low string you can make my string or my repetition in my image and that sort of thing and here's an example you can make these components that you know how to edit themselves so if you take a reusable component and say my string for example and you set it up in a little conditional so that if it's in display mode it'll display itself just like you would see when a user is looking at your page in your app but edit mode would allow the user to maybe edit the binding on the component change the content of what not and finally you could even have another mode that would write self to disk so that it would know what to do you say write yourself to disk you know so it's my image and it would point to the image that someone had configured it to point out in edit mode ok so that's and last but not least and and this is this is what I did is I created this this whole tree of component so each one had we had my string my image etc and I linked them together and I and if you add a little you know pop up of other components you can sort of allow the user in edit mode to add more components and add a repetition and then and other things with HTML around it and what you're essentially doing at this point is creating web objects components in a page of the fly and then and then archive them all an XML stickman database you can pull it out and edit it again some point right on an HTML page the example that i'm using here is is I created an application that basically gentle our people to create websites so it's really on the border of abusing web objects I'd say but you know it just it's one of the things that you can do so can't what we have got a little bit of time they look at some examples that you already seen some of mine so i watch you guys like gonna go can show okay so uh God got a couple examples here of the table component here over look at that so this is this is an example of a table component that uses wool component content for fourth columns and as you can see it's got you know it's got a row highlighting but you can still have images and bold or anything you want done this is actually showing I'm sure you're familiar with the movie database so it's actually you know able to show a to many relationship here let's see where are we here out here we go where we have more than one where we have more than one am across too many relationship and we got multiple rows going on going on and another one is a neo validation framework where you know the validation message is that aof spits out aren't we aren't the easiest show on your UI but this is a high commitment framework that involves a lot more other objects and makes you commit to to using like a subclass of EO editing context in order to in order to do this kind of stuff but you can you can make error messages that show up right beside right beside the field letter that are being entered in these are all these are actually bubbled up from the EOS themselves I've got a couple of simple little reasonable components here there's just more of examples of little widgets or whatnot you could come up with I don't know Steve Heymann here but this is one I got from him which is really a lot of fun sequel logging so you could turn that on and off at this little widget sort of a helper to help you program and so you know it's currently true and if you look up there you'll see that we print out a little bit of sequel debug stuff and turn it to false and all you see is false so it's something you know you drop in have it show up only in development mode and that sort of thing so an example of a helpful widget and also a reminder that it's sometimes it's useful to develop the tools to help yourself in developing an application this is a great when i got from david black who works in my group here which is a reasonable counter component which i've made really big and now i'm showing in any really small screen what would this this is a great example of loose bindings he's got about a million different bindings for this calendar component but all you're required to do is binding an entity and say hey this particular attribute is a date field and in this example I've selected August 1999 the movie database because it has two separate movies occurring in that month and you can't I actions which i haven't done to the movies themselves or the objects and soaps you can go look at them or take I get further information from them and you try an action to the date and go just for the stuff with that and one last quick little reasonable widget I'll point up here is not this one it's this one is a button widget okay when you're writing on a create read update delete type application you're doing a lot of you know dealing with data that type of stuff you find yourself putting the same four buttons in a page or maybe three buttons or one button so what we did is we created this button bar that when you look at it make sure it looks just like the top one right there it's like all these different buttons and then you just bind action methods from your parent or parents impotant into that and then they'll go ahead and show it so below that you see we had we only bound cancel and save and those went ahead and only showed those buttons but the same exact result it shows twice in the screen and I think we're over it gets blown out so I think that's it yeah I forgot to mention project wonder one more thing we forgot to mention project wonder if you haven't if you're not familiar with it and you're doing web objects programming you should get yourself to a web browser as soon as possible and check out the reusable component that these are guys get these guys have implemented from low commitment to high commitment stuff and though oog NL stuff which am an avid frameworks lot 1 12 years so you