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