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