WWDC2000 Session 416

Transcript

Kind: captions Language: en my name is Kelly Kazan I'd like to welcome you this morning to designing reusable components not to get used to this thing how many people here are currently building web objects applications wow that's cool this session was really designed for you to give you some practical techniques and ideas for better leveraging the power of reasonable components how many people here are using Java as their primary development language how about objective-c any web script phew okay well all the examples that we're going to go through in the session are based on Java but for those of you that are objective-c programmers I want to make sure that you understand that everything we talk about is applicable to all of the programming languages that we're going to talk about the topics we're going to go through we're going to start with the basic architecture overview talk about how you take reusable components and package them in the frameworks show you how to put those on pallets talk about component synchronization in depth some state ideas for managing state between components a cool demo on dynamic reusable components we'll component content then we're going to finish up with some performance debugging and design ideas so to start this thing off we're going to do kind of the three amigos thing it's going to be myself and two of my associates doing the presentation starting with Scott sweet who's going to go into reasonable component architecture and show you how to put your components on the pallet and create frameworks out of them Scott thank you it's interesting because I just came from Louisiana and with everybody here from international I was there for about a week and a half and I started talking really funny because they started standing like them from Louisiana and then I come here and everybody is international in our engineering group so if you can imagine all the different languages and people talking different languages all in one sentence it would be rather interesting I can't do it I'm not going to try but anyways with that one of the things about reusable components and many of you probably are well we're first most important is reusability obviously it's the whole point but one of the things to think about is your ability to organize those components not only within an application but across multiple applications across an enterprise and these are one of the beautiful things and as you go through the session today you're going to learn some bits and bytes about the advantages and how to make sure you use design issues along those things the other thing that's really good is rapid development I'm going to go through an example and build some really simple components but the idea here is once you create a group of components frameworks of components now when you start creating very complex applications say like a login screen and these kinds of things you can put a lot of functionality into those just drag that into your application and not have to spend a lot of time coding debugging testing etc so let's talk about the architecture one of the things that's important to understand about a component is it can be a piece of a page or it can be the entire page okay so if we look on the right-hand side I'm showing the parent component as being a full page but inside of that we have things like header components and footer components and keep in mind our original baseline element is dynamic elements right and so with reusable components that we're doing is taking these dynamic elements grouping them together and creating complex functionality so the header and the footer for example would be things like menu bar and background color and your time and your date all those kinds of things that might be common across a lot of your single application or your enterprise but then inside of that query component is where you're going to get a lot of different kinds of things that may be used across your application or specific to a particular developer and what they're using them for so the next question is what's the process how do you do this and the first thing and most important thing this is really very important build and test your component in your application don't start with the component put all these components into your application you have all these bugs and I got to figure out where it's coming from so start in the application build it test it make sure that it actually works and then move it into the component environment so then you make it a reusable component again test it again make sure you go a little simple app bring that component in wire it up make sure it actually works as a component and I will do that in the demo in a few minutes finally put this into a framework this is where you're going to really get your power because now what happens is is you'll have a framework with lots of objects and these reusable components now on that framework can be shared among all the developers either among your friends or what have you across your application and so on the next step would be to palletize them now with a palletizing there's a couple advantages here palletizing your components are going to give you the ability to share them among developers at a pallet level let's say for example within your company you're trying to come up with a standard of look and feel and you could use a pallet as a means to make sure that they use the same background color they use the same menu bar and all these sorts of images and so on putting them on a pallet makes it a very easy way to share that and then finally you're going to go across multiple applications and this is an iterative process clearly you're not going to do this just only once as you build your application you're going to find places of reuse break them out as a component put it into a framework so once you have this is going to be an idea here of a reasonable component the top three parts should look really familiar to you since you've been through several sessions here the one thing that's different about a reusable component is the very bottom which is the API file and this is how you actually expose a particular object or a particular variable to the outside world that you're going to use for binding and we're going to look at that a little later one of the very important things about the components is your synchronisation Kelly's going to spend a great deal of time about this but one of the things that is important is that web objects is automatically synchronizing your parent to your child so when you're using a component at the child level under the covers web objects is automatically taking care of that for you and Kelly's going to get into a lot of detail of actually some of the advantages and disadvantages of automatic synchronization as well as manual synchronization here's some code here just to give you an idea of communicating back up to the parent one of the things that's neat about web objects is our ability to get your information at the child level via the parent rather than actually having to have an instance variable at the child level again parent-child communication here this is a way you would actually traverse that and be able to get that information okay so let's go ahead and ship to switch to machine 3 my Windows machine what I'm going to do is real quickly create a very basic application now one of the first things that I want to do here is I've got a data model fiddling over here and I'm just going to go ahead and add that you guys probably know how to do that already we've seen that through several of the sessions already okay so I have my data mala one of the real simple quick stuff let's go ahead and create a form inside that form let's go ahead and trick a little text box let's go ahead and add a submit button there next thing I want to do is go ahead and add a display group let's go ahead and take that display group and wire it up to my entity and now what I'm going to do is go ahead and wire up my display group up to two these two objects that I have up there so the first one I want to do is I'm going to do a search screen and I'm going to switch the search on company name and the second thing I want to go ahead and do is take my submit button and I'm going to put that on my qualified data source all right so I have my search screen now next thing I want to do is go ahead and brag in bring in a reusable component that we give you out of the box which is the direct - web stuff so let's go ahead and add that in there we're going to go ahead and wire this up and what I'm interested in looking at in the display group is a an attribute called company name and I'm going to go ahead and define go ahead and save that okay so let's just go ahead and start with this we're going to go ahead and compile so while we're doing that one of the things is that what you want to check out is we've getting a lot of reusable components right out of the box I didn't go through all the pallets up here but those of you who are new to web objects in version 4.5 we've added a lot of new stuff than the whoa extensions also the JavaScript stuff that I know that you folks saw the thing was yesterday so check it out go in there go into the examples and see what's in there so you get an idea of some of the things that we're actually giving you right out of the box so you don't go off and build them on your own okay so we're going to head it bring up the application now really simple it's nothing really advanced basically of a search screen to access see my database the direct to web component is going to display those values for me on the screen okay so just to see here I'm going to go ahead and do a query to see that it's working properly okay so we've got our basic app now what I want to do is turn that search screen into a reusable component so that's going to be my second step so I'm going to go ahead into my application here I'm going to call this thing simple search I'm going to go ahead and open this up first step one of the most important things in doing this is make sure you create this component as a partial document okay this gets rid of the body tags and the head tags and the idea here is when a component you got to think about what am i dragging this into on my HTML page and typically those those tags are already there so making it a partial document will take care of that second thing is I'm just going to go ahead and take this from my original let's go ahead and get rid of it there put it in my new component now one of the things I'm going to do is here I you notice I have my display group is specific to the application well I'm going to make a generic one let's just call it my DG and now I'm going to go ahead and modify each of these bindings to be specific to this display group okay so that's the second step so I've got this bound up to my component now the third step is exposing what I'm interested in for binding purposes when I include this into another component so the API editor is something that's new in version 4.5 and one of the things that's really cool here is it just brings up all the different variables you'd see down here up into the API editor so I'm going to go ahead and make my my display group required I go click on the validation tag one of the things that's real interesting is you can go in here and make business rules that are going to be associated with validation and then we click on the display here what I want to do is go ahead and put a icon what I want to use when I actually use this component let's go ahead and save that okay finally now what I want to do is take that reusable component and put it into my first application and we see here right away that that component is already appearing we'll go ahead and add that let's go ahead and wire that up this is the binding that I expose with the API editor and let's go ahead and rebuild our app I do need to recompile because I added a new component I also added the new display group so I will have to actually recompile this and now we have the same exact application now using my reusable component okay let's go back to the display now our presentation thank you okay so the next step is how do I set this up so that I can actually do reusability with it so what we want to do is we've gone through the step of actually debugging these at the application level we're now going to put it into a framework we're going to do that in a couple of minutes one of the important things with the framework is to do a step called make install okay so there's one part of actually making the actual framework itself for compiling purposes but then you have to install it into the directory that webobjects uses when the application is actually running and so we're actually take a look at that and then of course we can palletize them if we want to so a couple of key things for again for palletizing you know create custom to palettes that are multiple ones for different developers you know sometimes in your environment when you're doing team development you're going to have different kinds of developers who have different levels of expertise and so you can use palettes as a means to break those up so you can do that according to your skill sets the other thing is it also really helps you to organize things you can create multiple palettes based on organization and one of the things that's really nice you'll see here is using those custom images that will show up so this weather than it just being a picture of a component the name of it you can put a picture on it and use your graphic artist expertise there to help you along those lines okay so let's go ahead and go through that step so what I'm interested in actually doing at this point let's clean this up a little bit so I want to create a brand new project that's actually for a framework so let's go over here into our project builder and this is the drop down to allow you to pick and choose so when you actually create a framework you'll see that one of the options down here on the bottom is web objects framework as opposed to web of objects application and we're going to go ahead and put this in here we're going to call this reuse framework okay so now when we do the framework step it's pretty simple easy stuff so what we're looking for three basic files first thing we want to do is actually pick up the Java class that's associated with the reusable component and that's this one right here let's just go ahead and drag that into my framework the second thing that we want to do is actually bring in the component itself so let's drag the component in and the third thing that we need to have is the API file okay once we have that down we have our basic framework we're going to go ahead and bring up the bill the remember I talked about you can compile the framework itself or you can actually do the install and this little tag here is where you actually would see that this is a checkbox so we're going to go ahead and do install one of the things that we'll do is both the compile and the install for us okay so basically I built the framework now it's gone ahead and actually installed it into a directory that we're going to use in a second so now let's that's that step right there the next thing that we need to do is put this thing onto a pallet so that we can actually reuse it so I have a pallet sitting over here let's go ahead and make my pallet editable and I want to go ahead and bring in that component and put it on to my pallet so in the file system here the default directory that Apple wants to go look in is Apple local library frameworks that's where by default will install your frameworks when you actually make them now you do have the option if you wish to change that have multiple locations and so on and inside of here we have our component sitting here that we want to go ahead and use let's just go ahead and drag that on so we have that in our pallet now and down below I have a logo that I've built and we'll put drag that on let's go ahead and save our pallet and make it read-only so now we actually have our component on a pallet that I can reuse that's actually referencing my framework now and let's just to make sure that this thing is actually working we're going to come down here and I have an application called final and I've already kind of pre built a lot of stuff here so we don't have to repeat everything let's go ahead and bring up main and we see I have some of the things already wired up and let's just drag my component and off my pallet and one of the things you'll notice here is it's adding the framework I'm going to take a look at the project in a minute to understand that but one of the things that will happen is that the framework that the component is referencing is not already in your project it will add it for you and we go ahead and wire this up and save it we go back to our project and one thing I'll go ahead and bring up the inspector inside of here there is an option under project builder called framework search order and by default if you go in and look in your project you will not see this there so it's important that if you're going to do that be sure you go in and add that default directory so that it can reference it properly okay let's go ahead and compile our app and we have the same component now running as a reasonable component from a framework okay it worked that's cool okay what I'd like to do now is to go a little bit deeper bring a Kelly back up to go into the inter component synchronization thanks Scott okay so component synchronization why is it important it's important because if you're going to create very complex components or deeply nested components component synchronization plays a big part in how efficient those components are going to execute at runtime obviously you want to build very scalable apps that run fast and prior to web objects for O the framework wasn't really optimized for very deeply nested components and they added some support for that to make it a lot better in forw so basically there's two methods of synchronization there's automatic synchronization which you're used to now web object performs synchronization automatically between the parent and the child there's nothing you really have to do to implement that other than declare your bindings however under certain circumstances that you could run into some performance issues if you have lots of bindings and deeply nested components the other type of synchronization is called manual synchronization this is effectively where you disable the automatic synchronization that web objects will do however you're going to have to do a little bit more work to decide when you want to perform the synchronization and which variables you want to perform the synchronization on and it gives you bet just basically more control over how it's happened so if we look at automatic synchronization basically the web objects framework will attempt to synchronize bindings between parent and child components up to six times for a given iteration of the request baan sloop so this can really add up to quite a bit of overhead if you have lots of components and lots of bindings per component the other issue you run into is since you don't have control over when these synchronizations occur if you have any kind of application logic and your access or methods those are likely to be executed redundantly multiple times and that may be something you don't want so we look at an example here basically there's kind of three things this example once to point out to you and one is the fact that it's possible to pass in null values from the parent to the child okay because you don't have control over the synchronization for instance if there was a textbox in the parent component and you didn't enter any text into that and you submitted a null value may get synchronized into the child component and then when you go to execute some logic on that you're going to get a runtime exception I've actually seen deployed apps where that wasn't caught because they never tested it that way the other two things that this shows is the fact that that logic in the child component and actually what we see here is that child components like a beautify string components all it does is that a string gets passed in from the parent and what it'll do is attempt to beautify it for you but what will happen is that logic to beautify the component will be executed multiple times redundantly so that's something that of course is going to cause some unwanted overhead and the third thing is the fact that since the synchronization is two-way that once the child component beautifies the string it's going to pass it back into the parent component that may be an unwanted side effect so the first fix is to basically check for null values if you're going to perform some method or operation on the instance variable in the child component after the synchronization occurs you definitely want to check for null so you don't get runtime exceptions then to fix the other two issues we want to do what's called disable synchronization and that's fairly simple to do what you do is you override a method in your child component it's in white text there synchronizes variables with bindings and have that return false that automatically tells the framework web objects framework that your components not to be synchronized automatically once you go to a manual synchronization though you need to perform the pushing and pulling of the attributes between the parent and the child yourself I mean that's where the value for binding method comes in okay so in this case you pass the value for binding method the name of the attribute in the in the log file in this case it's a string and it will return the parents bound attribute and you can perform some operation on it once you go to this manual synchronization and you start using the value for binding you don't really need to have a declared instance variable in your child component anymore so something to think about the other thing is you need a way to get values back into the parent some time so in this case you probably don't want to do it but if you wanted to have that beautified string passed back into the parent you'd use a set value for binding method and that's how you manually push the values back from the child into the parent basically what you do is you just pass it the value and the name of the binding another thing to consider is if you're going to pass into the child something like an EO or a dictionary and that child component is going to be doing operations on that object whatever it is maybe you're going to call display all of its attributes in the case we have here you maybe you're calling you know attributes on it 20 times the display name you know address city state and in this example here what would happen is you'd be calling value for binding multiple times right once for every time the low string fires off which probably isn't too expensive on its own but if on the other side there's an access or method with some kind of business logic then that's going to start getting expensive so one thing you can do here is cache the value okay so yeah you declare an instance variable do a value for binding check to see if it's null if it's not null you go ahead and load the value in and then cache it in the child component if you're going to do that of course you want to remember to reset the value at the end of the current request response loop append a response is a good place to do that and then I thought I'd throw this in as well around the subject of manual synchronization the idea of carat notation if all you have are kind of wrapper methods for value for binding and set in value for binding and all they're doing is calling those two methods you can shorten this by using what's called carat notation in the bindings and the child okay so this saves you having to have these wrapper methods there and all the overhead those will incur kind of a neat little trick in webobjects I think was four oh they introduced the idea of stateless components now there's two kind of notions of stateless components what is a regular component that just has no state variables but there's also this kind of formalized notion of a stateless component in webobjects where if you declare your component to be stateless there will only be one shared instance of that component for all your user sessions or if you're running in a multi-threaded environment there will be a pool of these components the benefit here though is that web objects doesn't at runtime doesn't have to keep creating new instances and garbage collecting these it doesn't have to incur the overhead for doing that so it becomes very efficient so this is kind of like the best way to create the most efficient reusable component it's important to note that you can have instance variables in these stateless components for doing local things but the state is not guaranteed to be valid beyond the current phase of the request/response loop so you want to consider that so to make the component stateless you basically implement a method called is stateless return true automatically your component stateless you want to remember to implement a reset method and clear out or null out any instance variables you have in that component so you don't have any side-effects in other sessions that are going to access that component and one thing I discovered as well is once you create a stateless component it automatically uses manual synchronization so if you just go ahead and make a component stateless that wasn't stateless before you probably won't synchronize any of your bindings you're going to have to do call value for bindings that value for binding and another thing I learned as well is if you're gonna use a stateless component all the components child components of that need to be stateless as well okay so if we're gonna give you the stateless components or even stateful components sometimes it's nice to have some flexibility to be able to communicate and share state outside the component you might have multiple components that need to share some data and just basically be able to access data outside of the component itself and even the parent so one thing you might want to do is maybe the component needs to access the application some data in the application to configure itself just an idea so you can there's a convenience method on a component called application you can call value for key set value for key or just call a caste and call some method on application you need to remember though you might need a lock if you're running multi-threaded anytime you go outside your session in a multi-threaded app you're probably not thread safe so kind of remember that another idea is if you have two components that need to share some kind of state you can set up an instance variable in the parent and access it that way using the parent method and the component yet another idea that I've seen used a lot is to use some shared state and session dictionary when you do this you kind of want to be careful to have some namespace considerations because it is a shared dictionary between all the pages and it's possible to get the wrong values back and another thing I've seen done that's kind of neat is the idea of this user info dictionary and the request object request object once it comes in in the current request is usually pretty much intact so you can kind of and every single component has access to it so you can kind of move information around through that user info dictionary and share information that way kind of a more stealthy way of doing things the way you Dax s it is through the context typically context you can access the request and then from the to get to the user info dictionary okay with that I'm going to ask Bob Frank to come up and give you some demos and talk about low component content with switch component and some of the cool dynamic features of reasonable components Thank You Kelly I think I get to talk about what are probably two of the least understood reusable components that ship with web objects will switch component and will component content I also think I get to the newest demo of this presentation whoa switch component then let's see what is well switch component well switch component is a component that will allow you to swap in or out different components in place how often have you been writing a component and thinking I wish that I had the ability at runtime to dynamically choose a different component for example this could be used in personalization if you have a generic user toolbar and for power users or administrators you have some sort of additional super user functionality instead of having a toolbar component with a thousand conditionals in it based on some sort of State you could actually have your pages use a the well switch component to call in different toolbars based on some sort of your own business logic in addition with the ability to switch in and out different components you can have additional bindings there's a couple of things to be aware of is that if you have additional bindings in your whoa switch component and this is the wild file it's a fairly simple binding you have to make sure that all of the components that you are possibly binding to with this will switch component share the exact same set of bindings there are a couple of techniques to get around this you wish to have ones that have different sets of bindings Kelly just talked about some shared state strategies with the application or the session you could store a variety of values that way and then each component would know how to retrieve whatever pieces of information needs or another possibility is that you could pass a single dictionary to the components that are being swapped in and this way each of them would pull out the values they want and you're only passing one binding the next component I'm going to be talking about I think this is very hard to get your brain around it could be a lot easier to see in the demo whoa component content allows you to take a component and create a wrapper component so that way you could have a all of your components designed for their functionality and a set of wrapper components designed for their user interface and I'm going to take Scott's application and wrap it with a some user interface and you'll see that you can put them together using a combination of wolfs which component and will component content you could easily take a very small set of components that provide a look and feel for your entire site or a combination of sets of looks and feels for your entire site and on the fly at runtime swap them in and out what you see here on this screen is is actually a very simple search field wrapped by a wrapper and that wrapper is going to actually provide the rest of the body for the page and the search field is going to get dropped in to the wrapper component which looks like this when you have a low component content the content that you have wrapped gets dropped in and in web object builder will be represented by a small little placeholder since it doesn't know what you're wrapping and he doesn't know what it's going to look like it just has this placeholder in fact let's see how that works can we go to the demo machine let me clean up a few things and I have a few things that I have pre-built but I love NT we have a small framework with a few wrapper components that I have already built and in order to use it I have to add my framework to the project and since I'm adding a framework before we can go ahead and run I'm going to have to recompile but just to show you that it's the same application let me add a simple wrapper to the components that Kelly wrote I'm going to Center this it looks better with mine and add the IR apper so may look familiar to you oh I'm save may look the wrapper that we're using may look a little bit familiar I hope yeah yeah oh and look it's the works we have s and the actual application that I'm sorry Scott wrote is the same now let's say for instance you actually want to know how to do what I just did if you have a variety of people working on your user interface and you want to go ahead and take the completed page and well gee this looks like really good why don't we go ahead and use a page here and say these are the very expensive graphic designers that we hired and create a component and simply take a look at the HTML that is in the blank component don't care about any of it at all delete that and paste in the HTML that you've been provided don't forget to save and when you're done even with a complicated web page web object builder does a fairly good job at rendering it and specifically I'm going to go take a look at this table right here and insert my wall component content there we go right there and to make it look better I'm going to Center it in fact I'm going to Center everything inside this table to a bhavish builder does a very good job at and don't forget to save at this point I need to drop in a few pieces of code and don't worry I'm not going to do anything magical behind the scenes but I will show you the finished product first and then go ahead and explain the few pieces that I have done this goes here and one other piece from the wad I have a component that combines the wall switch component and the wall component content that is allows us to switch between various rappers that we have and go ahead and use a pulldown a whoa switch right here they will pop up list that there we go okay since I added some classes we have to recompile but that is all that's involved in taking an HTML page dropping in some component content and making it into a wrapper hopefully this will be nice to me this morning the default page that comes up has no wrapper down at the bottom here oh I'll show you it still works s yay down at the bottom here we have a variety of wrappers and tada the one piece of magic that isn't really that magical that I added is this class dynamic wrapper Java and I will make the font a little bit bigger so you can see it and all it really does for the application is it looks for the name of the wrapper that I want to use using that action method that I had bound in that form I was setting the name of the wrapper into the session and we were pulling out here one nifty little piece of code that I added just last night was the ability to take the value from your URL tada and this is just done using form value for key nothing very special at all and that is the entire demo of how to combine voltage component and well rapper can I go back to the presentation [Applause] one last thought on creating a reusable components and reasonable toolkits in general is there's a few pieces of code that saw me copy and paste there are a large amount of things that you can do for yourself to make reusable components even more reasonable for yourself one of the things that I like to do is have a copy a personal copy of a subclass of whoa-whoa component that has a variety of convenience methods everybody has certain things that you're going to find yourself reimplemented time and time again you can carry this around with you even subclassing application or session to provide convenience methods that you know will be available for you everywhere for example if you want to go through your application a common example would be the ability to set certain pages to expire and set certain pages not to expire if you've got customer data that you don't want the browser to cache you could set it on a page-by-page basis there's a few other simple examples going back to the previous page these are convenient things that over time I found that reimplemented frequently these are this is a at this point I'd like to call back Kelly on stage and have him talk some more about additional reusable component [Applause] okay I'm going to finish this up with some tips on performance and debugging and get into some ideas on some design ideas the bugging of course we get gdb if you're doing objective-c jdb if you're doing Java JDBC and of crappy I think but if you are going to use jdb make sure you enable gdb and you also have to set other Java tool flags equal

• G in your make file type preamble if

you want to be able to access local variables my favorite system.out.print 'ln seems like half my code these days is system.out.print line there's also log string which is kind of a platform-independent way to do logging and web objects and then there's debug string that works in conjunction with low debug enabled so you can set this flag at runtime and turn your debugging on and off it will another technique I use if I have deeply nested components or very complex components is to use comments to isolate different portions of the HTML I'm getting some kind of really weird browser output sometimes it's nice to be able to go in and just comment out sections and kind of isolate where the problem is another thing that I found when I was researching this session is whoa debug it's basically a binding attribute that you can add to any component whether it's a reasonable component or a dynamic element and essentially what you do is either in the wad file or in the inspector just add this attribute set it to yes and what it'll do for you is log on the console all of the synchronizations between the parent and the child it's a very useful feature to have and you can see the wad all down there you can actually see the attribute on the child's side the attribute on the parents side it actually shows you the values that it's pushing and pulling both way so it's very useful thing to have to know about performance tips the first two things we already really covered disable binding synchronization of stateless components I wanted to put them on here just kind of check off things to think about when you're looking at performance issues the other one is kind of obvious is component definition caching by default it's turned off so when you're in development mode if you make changes to your WOD file or make changes to your component template web objects will pick those changes up without you having to restart the application which is kind of a nice feature but when you go to deploy you want to set low caching enabled to yes on the command line or set it the method which I think's an application method to true that'll make your application run a little bit faster although once web objects determines that the component hasn't changed it doesn't really go and reparse at every single time anyway but it does check to see if the files changed on disk so there is a little bit overhead disable various debugging modes you know you want to make sure your console logging is off that really gets expensive if you forget to turn that stuff off you don't realize it's spewing all that stuff we had a couple good sessions that went into performance on web objects and I know they covered the will event logging stuff that's something to really consider using when you're evaluating performance of your components I've got an example of a URL for getting to the setup page it's really intuitive to use maybe not so easy to interpret the results but this is pretty nifty to have pitfalls to avoid these are things that I've run into and a lot of developers that I've worked with run into several times I thought I'd list here the first one take values from request isn't always invoked so take values from request is only invoked if they're reformed values coming in in the request so for example the URL you submit to a web Bob's accept that starts your session there is no take values from request method invoked on your component so if you put logic in their thinking that's going to happen you might want to think twice about that initializing variables too early especially if you're using automatic component synchronization you might initialize a variable that's part of a binding attribute it may be a constructor or something just to have it over overwritten by the synchronization process so it's best to kind of initialize your variables on a lazy basis initialize them when you need them returning self or this from files components pretty common mistake basically nothing will crash when you do that but what will happen is for example you'll all of a sudden just get your child component displayed in your browser and your main page is gone it's pretty easy to fix you typically want to return null or return some new page from an action method nested form tags when you develop a component a reasonable component what you want to do is decide if if it's going to have form elements if you want to include form tags in the child component or if that child component is designed to live inside a parent component that's going to have form tags otherwise what you end up with and I've seen this a lot is form tags within form tags and that doesn't work too well you submit buttons won't work one option you might want to consider is to if the reasonable component is going to be shared across applications is to have an option to either generate the form tags conditionally or not generate them and I have a URL here for a little example I whipped up on generating conditional forms uses a couple low component contents in a couple of low conditionals so it's kind of cool you can just say you know sit your binding to yes or no and basically the component will generate the form tags or not generate them and the example can really be extended to create any kind of kind of a conditional container so kind of a useful little thing the other thing it's pretty common your child components not a partial document which means you forgot to pull out the HTML body tags pretty common surprisingly at least an internet explorer I've seen like three sets of HTML and body tags and doesn't seem to really care but I'm sure there's browsers it'll choke on that another things not too common but you can get yourself into these retained cycles which are essentially circular references between objects for instance if you try and store the session in a page or you trying to store the application in the page what will happen is since these objects are referencing each other they may not get garbage collected at the end of the whatever the whatever time it is to get rid of them the end of the request response cycle or the end of the session you start getting memory leaks so it's best not to do that there's a lot of convenience methods and components for like application and session and parent things like that so you don't really need to store that kind of stuff in your components a few design issues to consider when building components my favorite really is to take a building block approach start with really small components build those into bigger components and then build those in the bigger components I mean it really is a kind of a cool way to build UI and really reusable and would give the ability to create very efficient components with some of the things we talked about you really pull it off and do some kind of cool stuff a couple questions to ask yourself when you design your component is the component designed to be reused across applications you know not everybody is going to use reusable components in more than one application if you are you might want to consider you know having features and the reasonable component to turn different things on and off to allow the programmer to control how it's going to behave decide how you want to manage state you want to really think about that you want to pass everything into the bindings or do you want to use some kind of shared State idea another thing to consider is binding validations if other people are going to be reusing your reasonable components there is the API validation feature in WebLogic builder I wanted to point out that it's a design time only error check so if you validate the rules on your component at runtime you're not going to know the difference in I don't know if you've ever noticed but like on the dynamic elements if you don't do the bindings right or if you leave a binding out you'll get a runtime exception you might want to provide that sort of error checking on your own in your own reasonable components there's a couple methods you can call can get value for binding can set and value for binding so and if it's required that the developer bind and attribute that the child can sit back in the parent you might want to make these call these methods and then raise some kind of runtime exception if they don't return the right value and then namespace conflicts if you're creating frameworks of reusable components you want to be you know give them some kind of unique names so they don't conflict with the components in your current application or in other frameworks that's about it that's what I does QA you