WWDC2000 Session 402

Transcript

Kind: captions
Language: en
how many of you made it to the keynote
this morning good selection all right
got some very cool things happening
we're excited with the power
everywhere to give us tends to do you
more deployments on Mac os10 although of
course we're always continuing to
supporting pure Java deployments with
everyone else where everyone's everyone
here yesterday pretty much or at least
try to squeeze in here yesterday
my name is Renford Baca I am the product
line manager for web objects and
development platform it's our pleasure
to welcome you to the second day of the
web objects track to down 16 to go for
those of you keeping score at home and
we have some really exciting stuff for
you today just a one quick note we do
want to try and keep the aisles clear
there are a number of empty seats here
I'm sure these are all real friendly
people if you're standing in the aisles
please come and grab a seat or not
please grab some seats in the overflow
section because we need to keep the
aisles clear so the fire marshal does
not get very upset at us again so with
that I want to turn the stage over to
James Dempsey
one of our trainer extraordinaire and
he'll explain to you about the very cool
stuff happening with web objects builder
thank you very much thanks a lot Ernie
ah good afternoon i am james Dempsey and
let's see how this all works great I'm a
developer trainer with Apple I services
I am much more used to talking to a room
of 17 to 20 developers with a big
whiteboard behind me and every once in a
while asking are there any questions
today I may slip up and say are there
any questions I don't mean it just wait
and hold them until the end please
because I can't even see your hands
really actually I can't see your hands a
little bit so first thing I want to do
is just find out how many of you
attended Steve Heymann session yesterday
the technical overview okay which is
most of you terrific
um I don't know if you noticed but in
that session Steve managed to cover just
about every new feature in web objects--
builder in 4/5 which is what my sessions
about so I'm just going to tap dance for
you oh no actually it's actually very
good Steve had a lot of great stuff in
that presentation a technical overview
that kind of gave you a very quick brief
look at how web objects were
what we're going to do today is twofold
we are going to take a look at web
objects builder but web objects builder
is a tool that you use to create
something called components and
components are really the heart and soul
of a web objects application so we're
going to take this time in this hour or
in this session to go through very
specifically and find out just what's
going on in web objects we're going to
go start at a high level get down to the
nitty gritty and then we're going to
take a look at the end at the new
features in web objects builder so I
probably should have advanced the slide
already we're going to talk about
components we're going to build some
components using web objects builder and
then finally we're going to take a tour
of some of the new features okay
that's also what you're going to learn
so in a web objects application the
heart and soul of a web objects
application is this request response
Luke if you don't understand that you're
just not going to be a very good web
objects programmer so let's just start
from the top and walk through at a very
high level we have a client web browser
we have a web server running on a
machine and then you have your web
objects application running typically on
another box now for the web serve to
talk to the application we provide
something called the web objects adapter
which is a CGI that is going to just
route the requests from the web server
to the application so generally things
going to work like this the web browser
clicks on the URL of your application in
comes a request the web server passes it
to the adapter the adapter passes it to
your application your application
processes the request creates an HTTP
response stuffs it full of stuff
typically HTML and send it back and the
user gets a web page that's one go-round
of the request response loop all your
application does is sit there and do
that over and over and over again if in
a desktop application your application
has an event loop that's just sitting
there waiting for the next event
keystroke or mouse down event same here
we're just listening on a port for that
HTTP requests to come flying in so we
can handle it and send back an HTTP
response so let's take a little drop out
that infrastructure and just focus in on
the application itself
now another difference between a web
objects app and a desktop app is that in
a web objects app we can have multiple
users actually here we have two we can
scale up to thousands millions of users
here represented to users by two
different browsers and we need a way to
keep track of different users stuff
essentially so when a new request comes
in from a user we create or the
framework creates a session for that
user and a session is an object you add
instance variables to the session as
places to hold the user stuff it might
be their shopping basket their
preferences their personalization info
the request gets routed in processed and
a response gets sent back to the user
the other user shows up is a very small
low volume site here it gets processed
and sent back now how do we keep track
of this it happens automatically for you
every session has an ID that ID is
either stuck in a URL or it's stuck in a
cookie your choice so now we have kind
of the general infrastructure of what's
going on in a web objects application we
know how the request comes in we can
keep everybody stuff separate using
sessions but we still don't know what's
really going on because sometimes you
come to a presentation and you get all
this arrows flying around but you don't
know how does that really work that's
what we're going to try to do today and
what's really interacting with the user
is something called a component if there
was a movie the web object movie the
component would be one of the leading
roles everything we've seen so far the
only reason all of it exists is so a
component can do its job all of that
infrastructure is there to support the
component in interacting with the user
so components a little bit important
okay now how does a component interact
with the user it does so in three basic
steps there are three things that a
component always does to interact with
the user first thing it does is it
generates some HTML out for the user and
there it goes
get stuffed into an outgoing response I
should say and the user gets some HTML
that they can interact with so the
component starts the interaction with
the HTML then the user interacts with
that HTML in this case we have a login
page and Fred is going to login type in
his password submit it might be
hyperlink something you click on as soon
as you click on something or submit a
form it sends a request gets routed back
to the right session and finally back to
the same component that originally
started this thing that originally sent
out the HTML so now the component has
two more things that it needs to do it
started this interaction now it's got to
finish it the first thing that happens
when that request comes back in our
second phase is it pulls any form values
out of the request so in this case Fred
typed in his name the password is the
name of his cat and what happens is that
gets stored typically in a variable
somewhere when the component is done
with this phase we're now certain that
all of the state that the user typed in
in the browser is now synchronized on
the server side which leads us to our
third and final phase the last thing
that happens is a method is invoked this
is the wild-card phase because it's a
method that you are going to write it's
a standard method just a function for
your procedural folks in the audience
just a standard old method that's going
to do whatever you want in this case
that method might go check Fred's
username and password you could also
fetch things from the database validate
credit card information take whatever
the user is looking at and put it up in
there or
so that they can check out later you can
associate one of these methods for every
item that you can click on in the
webpage and since it's a method that
essentially gets executed based on a
user action we have a special name for
these in web objects development we call
them action methods and that's it that
really is the core heart and soul of web
objects programming that is all there is
to it rest of the time you have free go
go away that's it um no there's just a
little more but honestly that is what's
going on a component generates HTML lets
the user interact with it if there are
form values it pulls them out and then
it invokes this action method there's
one missing wrinkle though this is one
interaction how do we move on and
interact with another component and the
answer is very simple
that action method has one particular
requirement which is it has to return
the next component that's going to
interact with the user and there it is
so that very last method or that very
last line in the method is going to say
return some component and at that point
when we end that method we no longer
care about that old component it's
yesterday's news
who cares that's the last request that
came in now the golden child of the
request response loop is that component
this new component and now it's going to
interact with the user going through
that same process beginning with
generating some HTML and this page
welcomes Fred it's a very very you know
we could take this app and like go out
get an IPO within six weeks I'll become
very very rich and famous um doubtful
okay so let's review those again why
because it's all that's going on Steve
Heymann yesterday talk about a steep web
objects learning curve I always think
that it steeps not because any one
particular thing in web objects is
really hard it's just that there's a
lot of it but if you sit down and kind
of commit these to memory and what order
they happen in everything else you learn
in web objects on the web integration
side is really just a refinement of
these phases in addition to these phases
are some variation on this theme so it's
a very nice framework conceptual model
in your mind on which you can hang all
the other pieces of information of web
objects off of so again they are
generate some HTML user interacts in
comes the request if there are form
values the component pulls them out and
then finally invoke some action method
and that action method is where you're
going to write a lot of code your custom
processing that's kind of the you write
your code here part of the of this whole
deal and finally we have to return the
next component to interact with each
user so that's the conceptual piece each
of these maps to a method that is sent
automatically to your component so that
it knows when to do this stuff and those
are append two response is sent to a
component to tell it to add its HTML
into this response take values from
request and invoke action now it's
important to note you don't send these
messages they're automatically sent to
your component in the process of this
request response cycle however as you
start doing web objects development and
start chatting with web objects
developers they're going to be using
these terms all over the place things
say well after append a response then
I'm going to put this header into the
response in blah blah go on and on and
on it all just stems from this one other
note is that we have been or I have been
talking a lot about this word component
and we know that the word component
really it's a very overloaded word in
many different venues it means many
different things so let me be very
specific very precise in web objects
when I say components there's a class in
the framework called woh component
and that is the class that implements
those methods upended response take
values from request invoke action it's
also the object that implements that
basic interactive behavior and so when
you write a web objects application
you're going to be sub classing low
components by convention the first
component that a user interacts with is
called main as we'll see you as we build
a project but of course for every page
that you want generated you typically
are going to create a separate component
the only thing you need to be concerned
about is they need to be uniquely named
and so here we have the main component
and then in our former example moving to
a component named welcome page now since
the request response loops really all I
got
we're going to go through it once again
very quickly quick review so the user
clicks an eight URL in their browser in
comes a request a session is created a
main component is always created it is
sent to pend a response and so it
generates HTML the HTML flies down to
the browser the user fills out the form
submits it in comes a request a side
note this time around Fred typed in the
wrong password we'll see how that's
going to show up later all right the
request comes in the components told to
take values from the request it pulls
out the values stores them in a variable
is then told to invoke an action and
that action determines our custom code
determines hey Fred typed in the wrong
password we don't want to let them go on
to the welcome page we want main to have
another shot at interacting with Fred
maybe a slightly different page with an
error message or one of those red
asterisks turned on to let Fred know
that he screwed up and so the convention
in web objects is instead of returning a
component at the end of that action
method we return null we say nope you're
not getting a new component I'm going to
re interact with the user and so in that
case if we return null from that action
the same component instant gets used
again its sent append a response again
and it starts its interaction with the
user and now fred has a slightly
different login page
alright let's build that so if we could
switch to number four wow it's like
magic
great all right so we'll start in
project builder make a new project call
this thing no assistance Java is our
language and if we look at the classes
in project builder you'll notice some
familiar items there's the application
that we had seen before the session and
there's also main Java and I described a
component in this case main as a class
as a type of object and you'll see that
indeed main extends whoa components and
it's a very boring component at the
moment does not have any additional
instance variables or methods we're
going to change that in a moment but a
component is more than just a class
there are two other files that describe
or make up a component they're stored in
web components in a dot wo directory and
there's an HTML file and that HTML file
is a template that shows what main is
going to look like and then we know
there's a Java file that defines all the
state that we can store in main and all
of its behavior and there's a third file
called a bindings file which is that
connection between the user interface
and the states we're going to talk about
those and look at those in a little more
detail for now we're just going to open
up main dot low in web objects builder
the other star of our show great so
for those of you who are relatively new
to web objects web objects builder the
top half is it's an HTML editor a
graphical HTML editor so we could type
in some static stuff please log in and
of course we can make it bold and now we
don't wanna Center it make it larger
change the font beautiful I don't want
to center that either and we're going to
put in a form this bottom row our item
is called dynamic elements and these are
object-oriented placeholders of where
something dynamic is going to show up so
user name password I'll add in some
dynamic text fields and a dynamic submit
button okay we've now built our
award-winning user interface and now
we're going to have to worry about where
are we going to put those values when
they come in this bottom panel is called
the object browser and we notice the
first column is labeled main and in fact
this column is a graphical
representation of all of the values and
all of the methods that are in the main
class now you'll notice that we have two
already their application and session
however the main class there is nothing
between those curly braces every single
component is able to access its session
and application automatically its
behavior that's gotten from the
superclass whoa component however we do
need a place to stick the user name and
we can add and edit that Java file right
from here we'll add key called user name
it'll be a string and we only need an
instance variable for that and it adds
is here we take a look at the source
code you'll notice that indeed it has
added that instance variable to our
source and it works in both ways so if I
type something in manually like my other
variable that I need to store the
password when I head back to web objects
builder it shows up so there's a direct
course
bond is between this column and the code
in the component that I'm editing now we
need to connect this text field so that
the values here show up in this variable
to do that we just drag on up and every
dynamic element has a bunch of
attributes required attributes show up
in red if they're not already bound so
we're going to make the value of this
text field get stored in that variable
username do the same for password and
there we go so we're now worried about
or now we're done with the state storage
the only thing we need to do now is get
to the point where I can click on that
submit button and go to that welcome
page so let's add an action we will call
it login a we're going to add it and
notice that it's added this login method
here there's a line everything above the
line you can think of as a value
everything below the line you can think
of as an action method we're just going
to hook that up to the submit button as
it's action and we're ready to roll
let's go take a look at that source and
notice that it has indeed added a method
we're going to add one line of code this
line of code automatically creates and
initializes that welcome page the next
line of code we're just going to pass
the user name along to the next page so
it can display it so set user name to
our value of username so wait a minute
you may be thinking
where'd Welcome page come from and why
does it have a method called set user
name well at the moment there is no such
thing as the Welcome page we're about to
create it and we got to make darn sure
that actually has that method in it so
let's set about to do that right now
web components file new and projects
will call this welcome page
no assistance in Java and then we'll
open it up in web objects builder
alrighty we're going to need a place to
store that username string we're going
to generate source for the instance
variable and methods accessor methods as
well we'll add that let's build our user
interface welcome I'm going to add a
dynamic string element and hook that up
now let's make all that really big let's
enter it change the fonts change the
size change the color great view the
source and it has indeed added that
instance variable and accessor methods
that's all that we need to do so let's
build and run you'll notice what did we
do really we kind of define two HTML
pages some very basic ones we added a
couple instance variables a couple
accessor methods one of these action
methods that's automatically generated
for us and we typed in one line of code
so let's take a look
username Fred password oh no our
password field is in a password field
not a problem
one of the very neat things about web
objects development is now let me
minimize that is that a lot of it is not
compiled code for example our HTML
template is not compiled so we can come
into web objects builder select
something and inspect it and a text
fields while an inspector has all of the
attributes that you have set or not set
and all of the bindings we can switch to
a static inspector and in this case turn
our text field into a password field and
let's say we want to change the submit
button so that it's label says login
well in 4:5 we can double click on an
item to have the inspector show up and
we'll change the value lips to login we
can type in a literal value instead of
having it go to
at some method or some variable I would
just save our change I'm going to Mai's
mein and when i refresh it automatically
updates which is pretty nifty password
and we're welcoming Fred now let's just
take a moment to go through bla bla bla
that request/response loop so as soon as
I click this Return button and that URL
comes and we make a new session mein is
created mein is sent append the response
it generates its HTML we put in a value
login soon as we hit login that request
comes in the username and password are
pulled out of the incoming request our
login method is executed it creates a
welcome page passes the name along and
returns it in that final phase we're now
done with mein and the Welcome page
starts its interaction by generating its
HTML and we get a dynamic page any
questions all right
let's go back to mean Steve showed you
this yesterday but some of you might not
have been here we can switch from a nice
GUI editor to raw text mode the HTML is
just plain stock HTML with the addition
of a web object tag one additional tag
that says hey something dynamic is going
to go here a web object tag is one
attribute which is a name a unique name
and that name maps to an entry in this
second file this bindings file where we
find out hey that web object tag what
kind of thing is it is it a form is it a
dynamic submit button and also all of
those attributes that you saw in the
inspector they are all present here so
that that dynamic element knows where to
get its information or where to put
information at runtime okay done with
the demo let's go back to the slides if
you understand that if going through
those three phases by now bores the
Dickens out of you then that's good that
means you're well on your way to
becoming an excellent well objects
programmer because that's what's going
on that's pretty much it there's
additional stuff that hangs off of that
but that's that's the whole shebang for
the website the next session is going to
be talking about the database side so if
it's in your head beautiful however you
might be saying well first of all let's
talk about the stuff we didn't have to
do we not to do anything if you notice
to get all that to work we could take
what we just built if we wanted to
deploy it on a whole bunch of you know
16 processor Solaris boxes and let
millions of people show up and type in
their name and and have a page come back
that says welcome it wouldn't be
terribly exciting but we could we didn't
have to do a whole lot we didn't have to
touch the request we didn't have to
touch the response we didn't have to
parse the forum values all of that just
happened for us because that
the stuff that you have to do every
single time that's the stuff that who
wants to be bothered so webobjects
takes care of that so you can write the
cool stuff the logic the application
logic the business logic that makes your
web objects application useful
unlike the application I just wrote and
also gives value to whoever is going to
be using it however we're going to dig
one layer deeper and talk about what's
really going on here how does it do all
that well I showed you those two other
files we know there's a Java file that
defines the object but there are these
two other files in HTML file in a wad
file as it's called I always find that
just a weird word to say wad file wad
everybody say wad file say it loud
wad file hey louder wad file even louder
that's good it just sounds wrong somehow
doesn't it it sounds absolutely wrong
umm so what happens we know the web
object tag matches up to something in
the wad at runtime it's not this flat
sort of to text files these get parsed
at runtime and we end up is something
that might look something like this
where you have this flat HTML and in
between you have these live objects web
objects you might even call them perhaps
dynamic element objects that are just
placeholders they're just waiting there
just waiting to generate some HTML text
fields are just waiting to pull form
values out of the requests because
that's what they are that's what they do
they don't have any other purpose in
life now each of these when it gets
parsed in it also has within it all of
its bindings so that it knows where to
get information at runtime so let's put
this all together for all of those
phases so when we're generating HTML and
append to response what's going on well
the component has this templates and
when the component is told hey append of
the response well they come on and says
well I don't know what to do hey
template
pintu the response and it goes through
and the static stuff gets popped into
the response then the low string is told
hey append your stuff to the response
and the low string is like well what am
i oh I got to figure out what I'm going
to put in here I guess and it does its
thing and then there's more static stuff
that just gets thrown in because it's
not dynamic then the hyperlink is told
to append to the response and it has to
figure out what URL it's going to use
and so on down the page so every dynamic
element gets its shot at appending its
little chunk of HTML into the response
let me go back one um just a note when a
whoa-ho each of these items when it
builds this nice little template has a
unique element ID so whenever a
hyperlink for example generates the URL
that you're going to click on that
element ID is in there so it can tell oh
I was the thing that was clicked on and
whenever a text field is generated it
has a little name attribute that is the
element ID so it can look into the
request and say oh that's my value no
real magic going on append a response
when it's sent to a low string it says
oh okay well I belong to a components
and a dynamic element without a
component is useless utterly useless
they work together so when a low string
is sent append a response it consultants
bindings says oh my value is hooked up
to username let me ask my component
what's the value for username and the
component gives back the answer in this
case Fred low Stern goes oh now I know
what to generate in the HTML that
happens for every single item in the
template if there are 18 bindings they
would go and ask 18 different times for
taking values from the request when the
component is asked take values it just
turns to a template of dynamic elements
and asked them to take values from the
request of course only in this case the
text fields are going to find something
there so what's going on well in comes
the result we have our components
to start off with the username and
password have no value and in comes a
request it books in takes that value
Fred out of the request consultants
bindings oh my values hooked up to
username I'm going to tell my component
hey take this value Fred for that key
username and start there and so it
happens and that happens for every form
value that's all that's going on and
then finally invoke action in this case
we know the submit button was clicked
how does that work well the request
comes in we have a component with some
action methods defined in this case
login it reads in that URL so what flew
by real quick let's do that again this
is fast consult that says all my action
tooked up the login I'll set my
component login and then the component
executes that method let's execute it
again you know how long I take some
PowerPoint that's a real pain to do do
it one more time I just love that that's
what's going on in web objects that's it
actually
that's little there's a couple other
details i leaving out but this is the
absolute core the absolute core of
what's going on in every web objects
application if you have this firm in
your head you're pretty much good to go
you're on the right track you can go
downstairs to the lab if you're brand
new to web objects and start building
the little pup that i just started
building now two points that I want to
make on those two points are this it's
kind of interesting that you know we can
get to a dynamic element can get to that
information in the components but we
have this thing called a session and
it's kind of odd that you know if main
needs the username and and the welcome
page needs the username that we have to
write all this code to pass it from page
to page what if like eight components
you needed to get to the username well
we might instead stick it up in the
session
and every component can get to its
session and every component and then in
the session we could store it in one
place for each user now how would we
hook that up well what's very nice is we
have something in web objects called a
key path if you recall before right the
value was hooked up to user name it
would ask its component hey what's your
user name and it would get back a value
well we have this dot separated path and
so when this will string needs to find
its value it asks its component hey
what's your session what's your value
for session then it asks the object that
gets passed back hey what's your value
for user name it gets back to value and
voila it's kind of nifty those paths
always start with the component however
but let's go one step further because a
username is not a very useful piece of
information a username actually most
websites my user name is like JD one
seven two three four because all the
good ones were taken right anybody like
have a good use nobody does there's like
one James and that's it screwed up
that's all just screwed up so I don't
want things saying you know welcome JD
one four seven two here are the last
five purchases from our site we want to
group things together so in the database
I might have a row right that has the
user name maybe their password maybe
it's encrypted a first name a last name
and email address maybe a relationship
that lasts five purpose purchases
favorite color all that good stuff using
the database chunk that's in the next
section we can take that row in the
database turn it into in this case maybe
a customer object and store a customer
in this session and a customer is going
to have different properties in this
case we're going to use first name as
the example and to hook this up just a
longer key path just kind of whisper
down the chain this is seven degrees of
Kevin Bacon is what I call this because
it's the same exact thing it's like I'm
at the component what do what key path
do I need to get to the information I
need
and this time around she's going to ask
hey component what's your session hey
what's your customer what's your first
name and then get back the answer this
can be arbitrarily long like I've seen
them eight nine that just go on forever
the important thing to realize two
points is that each of those things all
the codes you wrote you put in an
instance variable that's all you put in
was one instance variable to hold the
next object you don't have any all this
accessor code where you have to pull the
customer name into the component and the
other neat thing is that this path is
not compiled at all it's in that
bindings file and we saw that if I make
a change that I just refresh I don't
have to restart the app let alone
recompile it and so if I want that
string to hook up to last name I've just
changed at this session dot customer dot
last name refresh the page and suddenly
I've made a major UI change with very
little work on my part very little risk
as a developer and now I want to say any
questions but I'm not going to I think I
just did oh I'm hitting the back button
how scary there we go we're going to do
a demo what we're going to do is twofold
we're going to implement a little
password checking logic and have an
error message pop up if the person types
in the wrong password then when we're
done that get that working we're
actually going to hit the database based
on the username fetch the right customer
object stick it in the session and on
the next page the Welcome page reach
into the session and pull down their
first and last name and display it so in
main let's type in an error message
versus make it nice and big you
that is not recommended Apple UI
guidelines however haven't you all
wanted to put that at one point or
another somewhere in your app you can
apply that I don't mind I got extra time
okay
and then we need this is oh what'd I
just do how about I explain what I'm
doing in the demo that might be nice
that would be a good thing I'm adding
something called a conditional a
conditional is an if statement in your
HTML and it needs a boolean to determine
whether to show or hide what's in there
well we don't want everybody getting
this rude message so we're going to add
a boolean we'll call it a login error we
type boolean we only need an instance
variable and we just wire that up to the
conditional we'll save that's all we
need to do to our UI let's go to the
source we actually have to write a
little conditional logic here so matter
of fact I'm an extra moment it's
actually where am I
there it is now that's not what I want
there are many many wonderful
preferences in project builder whoa okay
let's just bump up that size
says apply I'm going to turn off syntax
coloring okay so here we go easier to
see the code so the first thing we're
going to do is the next page by default
if they don't type in the wrong password
we don't want to let them see our super
secure welcome page with all that
sensitive information so we're just
going to return null by default and then
our elaborate password checking scheme
if the password they typed in equals the
string password it's very elaborate then
we actually are going to let them in so
next page is going to equal that on the
next line the actual new page and we're
going to send that information along to
the next page the user's name else if
they screwed up and type in the wrong
password login error you know set that
to true we'll build this notice that
what we're doing is taking some
conditional action in that action method
because you don't have to return one
component all the time it's your code
you can return whatever the heck you
want let's go to omni web let's login
Fred will login
he won't type in the right password and
now he feels really terrible because
he's an idiot
okay so Fred if there any Fred's in the
audience I very much apologize I you're
not an idiot this is a hypothetical Fred
and if he types in the correct password
log in there we go wonderful next step
hitting the database
so let's actually minimize some of these
windows put that out
the bookmark window on the web okay
great so now what we need to do is be
able to hook up to a database all will
be explained in the next session
but for now none will be explained we
add something called a model file which
is built with the OU modeler the topic
of the next next session and we're going
to build or we're going to add a
customer dot Java file which is
generated from eyo modeler which is
covered in the next section so if you're
curious go to the next section all right
to do web components resources put
everything in the right place that's
very good now all that we're going to do
is this we're going to first oh now I
see change this we no longer need the
username here very nice new feature in
web they're now in addition to adding
stuff to your source code you can
actually delete it so we're going to
delete the user name it also is going to
check to make sure that these bindings
that you have set do you want to unbind
them or ignore it well we're going to
unbind so it keeps you from having
errors due to binding we'll add a second
string now another nifty thing in web
objects builder four or five is when I
click on an item in the first column
this second column is now a
representation of that particular class
and actually if I have source code to it
I can even add stuff so I can add stuff
to the session it's a contextual menu
I'll add a key to the session I'll call
it customer of type customer let's have
methods to get and set as well which
adds a customer from that customer class
it knows all the stuff that's in a
customer so we can display the first and
last name of a customer just like that
now let's uh actually we'll minimize
that we turned on window shading I had
the other behavior set okay now let's
edit this pup login so when they log in
we want to fetch there is a
we're going to fetch a customer we'll
call it customer as our local variable
and in Java we're going to typecast what
comes back as a customer we are going to
use an EO utility which is a very quick
one-line way to fetch in web objects vo
utilities can't talk one thing and type
another thing we're going to go ask for
the object matching key and value in web
objects in your application every
session by default has this place where
you can edit and fetch objects from the
database called an editing context so
we're going to use that to perform our
fetch the thing that we're going to be
fetching our customers we're going to be
looking up customers based on their
username part in my indentation and the
actual thing that we're going to look up
on is what the user typed in for
username so that line is going to go get
us a customer do I either oh you're
right thank you mister compiler no
because that's how I code I let the
compiler deal with those because it's
good at it better than I am apparently
so here we go customer and now all we're
going to do is check if the customer
know so we're going to if the password
that they typed in equals the customer's
password then we're not going to pass
anything along we're just going to stick
that customer up in the session so we'll
access our session and tell it to set
its customer to customer so in addition
of one to three lines of code let's see
how this
this seed of a personalization engine is
working so let's go back to our good
friend Fred he'll type in the wrong
password we don't let Fred in he types
in whiskers his correct password and
voila we have our personalization engine
let's get another session going brand
new session this time it will be JD one
two three four five oops
well let's type in the wrong password
voila and so we have two different
sessions two different customer objects
fetched from the database and we didn't
do a whole heck of a lot did we
I built that in I don't know 10 minutes
15 minutes now is that production code
that I wrote there no we might want to
check to make sure that we actually got
something back from the database we
might have encrypted passwords stopped
by the security session later this week
find out more about security and login
issues with web objects or techniques
however boy if you're going into a
client this is a nice prototype right
you whip up very quickly so that's
pretty groovy
um again we did a fair share of stuff
here in a very short amount of time and
let's switch to the slides actually and
we did it all without doing all too much
work we added a couple instance
variables and a couple accessor methods
we added one action method that took
some conditional action and did a little
bit of checking we set some things we
got some things and we did some
mysterious database stuff which will be
explained later with that what I'd like
to do is now you have a good idea of
what the heck is a components how does
it interact with a dynamic element or
it's dynamic elements
how do these three files as HTML file is
WOD file this Java file how do they
interact what's their relationship how
do they interact at a runtime and where
do i plug in my code what are the things
I have to worry about what don't I have
to worry about so at this time I'd like
to bring up whoops
what's a backup I should have Hey what I
hit okay at this time I like to bring up
Tom Naughton from the web objects
builder team who's going to talk a
little bit about new features in four
five thank you
I think my leg has gone to sleep so if I
fall over don't mind me
anyway I'm going to talk about the new
features the golden four Oh first of all
how many people have used the new four
five builder good okay and how many
people use the version previous to that
okay so so you should be happy with new
features and you'll understand what I'm
talking about let's see so the goal in
four five for the Builder was to improve
ease of use and to improve developer
productivity so to get ideas for what we
needed to do to make it easier to use we
wanted to observe brand-new users just
learning to use the product we wanted to
see what kind of issues they ran into
what kind of suggestions they had so it
turned out the best place to find such
users was in the training courses so we
signed up for them and we went to them
and we paid careful attention to
people's interactions with the Builder
we asked them lots of questions about
what they liked and what they didn't
like and we got lots of useful feedback
we also went to the feedback sessions
for other courses that were given and
incorporated feedback from that and we
got a lot of feedback from the beta
lists for the Foro version that were
released and we took all this
information and we also comb through our
bug database for feature requests that
we'd had from some of our older
developers and narrowed it down to the
features that we wanted to add four four
five and came with a pretty good set and
we've gotten a lot of positive feedback
on them so let's see the first one
whoops this was actually supposed to
progressively disclose but it doesn't
okay expanded source file editing
options one of the things that pretty
much everyone likes about the builder is
the way you can use it to add code for
your keys and actions people like how
you can just put together the whole
skeleton of your application just using
the Builder you get all the methods you
need you can create the components you
can wire them up together but with that
you couldn't you couldn't delete keys
you couldn't really you couldn't undo so
we added that and people are very happy
contextual menu support in the course we
use though in many of the courses people
learn the product on Windows and they
felt that it should behave a little more
like the Windows application and one of
the things they pointed out was that we
didn't have contextual menu support so
we looked for logical places where we
could put that in and wherever it would
make it a little more convenient we
added some contextual menus so you'll
find them you can click around probably
right-clicking on various things and you
can find where they are but we added
them to the variables browser so you can
add and delete keys we added them to
let's see the API editor which I guess
we're going to talk about in a future
session we added them to the inspector
so you can add and delete bindings and a
few other places and it makes the a
little more convenient easy to use but
we never we tried to make it so that the
way that you do commonly used functions
is never through the context menu it's
just sort of a convenience added for an
accelerated way to do certain tasks
table editing in previous versions of
the Builder table editing was a little
weird who actually first you had to
select that you had to drill down to the
piece of the table you wanted to edit
you had to first select the table then
select the row then select the cell
we've gotten rid of that we made a lot
more intuitive we also added a table
wizard that makes it easy to create new
tables you can specify various options
like to turn on borders or to have
repetitions around one of the rows and
it makes let easy to create new tables
the pellets people felt that the pellets
could would be more useful if we added
more pre-built elements so we added all
of the more extensions to the palette we
also had a brand new palette of
JavaScript elements so you can drag in
say a button fly over and you just wire
up the images and you don't have to
write any JavaScript you don't have to
write any code it all just works
the product so it's very convenient for
people want to add JavaScript to their
application that's you for HTML
selection one of the problems with HTML
editors in general is there's no
one-to-one correspondence between a
range of text on the screen and the
actual elements in the HTML tree that
that corresponds to for example if you
select a range of bold text does that
include the bold tags or is it just the
text inside the bold tags builder has to
make certain assumptions and sometimes
it's not always exactly what you'd like
so to make it easier to select
containers and specify exactly which one
you want to select we've added a path
view which which you can see on the
earlier slide basically it shows where
you are in the tree and the names of all
the container elements and you can click
on any of those and it will select that
container binding validation for people
just learning the product one of the
most difficult things about creating
components is figuring out which
bindings you actually need to set up on
the various dynamic elements you know
sometimes if you bind certain bindings
and implies you have to bind other
bindings or it'll be mutually exclusive
with certain bindings and new users were
run into lots of problems with this
basically if you bind it wrong you get
an exception page at runtime and you get
to figure out what the problem is
yourself so in one of the feedback
sessions one of the developers suggested
you know couldn't the Builder just
validate your component and tell you
what was wrong with it and it turns out
you know that was a very good idea and
so we added that and actually since we
have this feature one of the trainers
mentioned that in the classes now it
because a little bit like the Maytag
repairman people just you know solve
their own problems and he doesn't have
to run around and figure out what the
problems are syntax coloring previous
versions didn't have syntax coloring but
we didn't just want to add it to make it
pretty we wanted to actually make it
useful so it's actually kind of smart
syntax coloring it'll show you know lots
lots of times when people edit HTML by
hand they'll introduce errors like
mismatched tags and such so the syntax
colouring actually shows you the errors
whenever the tokenizer runs into
something that it doesn't like to parse
it'll make that token red and if you
might see add an extra closing tag that
doesn't match an open tag it'll draw
that in red so basically you can just
look at your page you can see that tags
are unbalanced and you can easily fix
the
improved binding user interface let
people like the way you can just drag
connect your bindings in the Builder but
in previous versions you'd have to drag
up select the element and then go over
to the inspector and actually click
which binding you want to bind to so it
was a little cumbersome we made it we
changed it so it's you can do all that
in one gesture you just drag up a menu
pops down you choose the binding you
want to connect to and it's all very
fluid improved font take support the
built in font panel that you get from
the app kit is real convenient for
picking one font but for HTML you
usually want to specify a list of fonts
so the browser can use a different font
if it doesn't have the one that you
specified so we added a font panel
custom-made for HTML it saves all of
your font preferences so that you can
use them again and again
display options let's say you want okay
one important thing we added was a
preview mode
we're always torn between do we want to
make the Builder
what-you-see-is-what-you-get or do we
want to add lots of convenient editing
widgets inviting the preview mode we can
actually do it both ways if you choose
preview mode the Builder makes all of
its rendering decisions in favor of
making it look just like it look in the
browser if you choose editing mode it
shows you all of your bindings it shows
all the web objects and be the binding
values on them that lots of convenient
editing features you can also turn on
options and preferences so that it'll
show things that are otherwise hidden
such as HTML comments or JavaScript so
that you can get a better view of what
your page actually looks like and then
switch to preview mode and it'll again
show like it looks in the browser and we
also added an API editor
we've had API files in previous versions
of the Builder it basically it exports
which bindings are available for nested
components but previously the versions
of the Builder didn't use it very well
you had to edit the files by hand and
users didn't adopt them very well so we
actually added some UI to to make it
easy to make the API files and you can
also add your own binding validation
rules just like the built-in validation
rules so it makes it a lot easier to set
up those files anyway I guess James has
a demo now it's going to show some of
the new features
Thanks all right we're up to the whoop I
need to click oh yes because I have to
put up the very important demo slide
okay we got the two-minute warning so
let's fly on through this window no it's
not three little objects building here
we go so let's take a look at main again
and I'm just going to kind of walk
through some of the features that Tom
had talked about the first one being
that we can delete bindings so user name
is hooked up we'll delete that
we'll also unbind all well and good but
then I say oh I didn't mean to do that
I got undo and this undo is not only
going to rehook up everything correctly
in the bindings file but it's also going
to put that thing back in my code in
project builder so it's aware web
objects builder is editing three files
at once this undo is actually keeping
those all up-to-date very nice new
feature because I always make mistakes I
don't know about you all every once in a
while
contextual menus we have them everywhere
actually there you'll see them as they
come up we're a little pressed for time
let's add a new table take a look at the
table panel we open it up we get to pick
how many columns and rows we want border
etc my favorite most handy thing is that
your second row can be automatically
wrapped in a repetition so you don't
have to select it and add one because
you're always repeating lists of things
and your first row can be automatically
header cells we're going to add just a
plain two-by-two and let's move our form
elements in there to neaten things up a
bit where am I help okay we'll just
rehook that up see even when you totally
screw up it's even easier in web objects
builder four or five
I'm just demoing somebody screwing up in
web objects builder four or five and
quickly recovering so there we go we'll
open the inspector we no longer have to
switch
some sort well first this is the path
view and it's very nice I want to select
the table bam I've selected the table
very easy to edit the table I don't have
to go to some structure editing mode I
just click in the inspector add a new
row let's merge these cells together
let's move the login panel or the login
button in there that's wonderful new
stuff with the table view on the palette
you have both Steve Hammonds leftover
palettes from yesterday but also Java
Script palettes that ship with the
product including image flyovers we'll
just throw one in there definitely check
out these JavaScript reusable components
they're very useful and there's also
validation so you'll notice as soon as I
drag that in this button came to life
and told me that something screwed up on
my page I have validation I have some
required bindings of this image flyover
that I have not hooked up the other
nifty thing is if I click on the error
it automatically selects the item that's
having the problem so we have 18
hyperlinks on your page you can jump
right to the right one so we're going to
fix our validation problems by deleting
that if the feature don't work cut it
let's close up the palette let's jump
over and let's look at this HTML editing
nicest thing well two things one is say
we screw up our HTML somehow notice that
this closing tag has turned red to
indicate that something is fouled up and
so it's doing error checking that's very
obvious in color we also have a very
nice feature you triple click it'll
select all the way to the matching tag
so we double or triple click this table
it'll select to the other end of the
table tag even niftier if I triple click
and drag it'll select ever enclosing
tags all the way up the page and all the
way back to where I originally clicked
here's a nifty feature some folks like
to put comments in their wad files
web objects builder 4'o is notorious for
when you go into graphical mode getting
rid of your comments well we can type in
some comments switch back switch back
they're still there that's a very good
thing you can applaud that was a golf
game okay good thank you some other
nifty things in the inspector say we
want somebody to type in a date into a
field we can put date for matters that's
always been there but you have to
remember these formatting strings well
now there's a pop up of common
formatting strings and examples for date
formatting and number formatting makes
life easier that also is true of many
types like boolean types if you're
picking an action you get a list of all
the actions in your component to choose
from without having to remember or type
them in yourself so those pop-ups are
very nifty and oh one of my favorites
it's always kind of harder it's always
been hard if you want to wrap a
repetition around two rows for some
reason well there are a lot of these new
display options for the layout for
example we can show a graphical
representation of our table tags and so
selecting two rows is very very easy now
you say well that's great because I want
to see how my tables laid out but this
don't look like a table no more well
that's why preview mode was added so
it's going to look like rendered HTML
whereas you can have all of your nice
editing widgets in your graphical
builder and the in the layout mode so
that's another nifty one that is about
all that I have for the demo that's
groovy then it worked out just right
thanks James everybody has a presenter
scheduled today yes
and to think this man gave up a
lucrative career as a stand-up comedian
just to become a well objects trainer
thank you James
we're gonna start the Q&A now so we
invite anyone in the overflow room who
wants to come and ask questions come up
and join us again please try and use the
microphones in the aisles so that people
getting interpretation and recordings
will be able to hear them appropriately
I also have the other presenters up here
if we could help answer questions thank
you very much also once you do spend
Haller from the robotics engineering
team will be joining us as well Thomas
you a slap oh do I mention the roadmap
for sure let me answer this
all right so roadmap next section is on
the database chunk to two sessions from
now is deployment you built your app now
what do you do with it it covers the new
deployment architecture in four five
later this week integrating client-side
technologies ie JavaScript and all sorts
of other nice stuff
smile quick time flash reusable
components now we know what a component
is let's make them so that we build them
once and reuse them in project after
project and I also did mention that
security one which did it fit on this
slide for more info there's that thing
downstairs the big lab check it out
contact him in QA and just to mention on
the lab there are some problems with the
the security information and so that
they had that lab open for the incorrect
hours apologies to anyone who got
rebuffed at the door the lab is open
from 11 to 2 and we have straightened
things out again apologies for any
inconvenience do I have any questions
from the audience
you