NtsceDocumenta

And Good Now widen that little bit and pull ow tighten bit little tighter

Like that

Yeah uh okay Mike go ahead and just describe that that button bar

Okay when you were talking to Scott earlier he was he was explaining his routine

that took view of buttons and rearranged and resized and laid them out in such way

that uh you know they had icons and text or just text only or whatever and they were

sized sized appropriately and tiled correctly to look nice tVS and so that is all just

that one routine that something starts doing something else

completely just given

with it Urn but what that relies on is all of this uh all of these objects to be laid out first

Um in sort of user interface specification tool We use program called contstructor

have
um which takes these individual objects like Scott was describing things that

properties and allows you to visually rnove them around on the screen so that
you can

easily see where they where they should go rather than just saying uh maybe this

should go at 60 pixels left and 30 to the right you can just drag and drop it there Urn

so this-this toolbar is-uhcontains the buttons that are passed off to Scotts routine and

like urn the-sort of his analogy where you know lines of code are like rnusical notes

and-and that these buttons

laying out
like these-this-this is
things Basically layout tool

like taking instruments the functions and putting thern in certain spaces around the uh

around the music hall Say okay want these trombones to go here and want these

saxophones to
go here Urn and so then once-once you have all that you can uh you

can just start acting on thern

So lets just sort of back up So those pictures those boxes are in essence the

Each one of these is single button that Scotts routine acts on So like this our back

button This is our forward button This is the-the reload button And-and so on and so

forth

So this is the net This is at the very top..

This the very top of the-of the toolbar

Page
Netscape Documentary
Tape 104

So were not just talking about the-what we were looking at was uh another

toolbar We were looking at..

Right this is the toolbar that Scott was showing you right This top one here

He was showing us uh which one was that

dont think we-we didnt see that That wasnt the one we were..

He-he was sh..

Oh really okay

He was showing us the-the other one He was showing us one that had history

urn..

Oh not centered on the side Okay

Yeah What was that one

That was uh can show you here Computer noises That was this one here

Uh yes uh..

This is-this is history and bookmarks and..

Yes

Okay urn but in-in that spirit of re-use we use the same code for-for both of them

Okay good

Urn where you know these are icons and-with titles that need to be laid out in uh this

case vertical fashion Urn we can re-use that same routine for the top level-the top-

level toolbar

Right

Urn because its-its just got objects that need to be laid out sequentially

Right

Urn and so part of the work thats different in-in user interface design rather than just

straight coding urn is

you get to-get to have chance to lay out all of these things and do

things thats not just writing lines of code in You actually get to-get to participate

Page
Netscape Documentary
Tape 104

in the-in the look and feel and the design and constructing things and putting things

together like..

So this is like another-this is another uh code writing language This is the uh-do

you combine with-is this object uh some sort of object programming like..

Kind of but its not really language its more of you drag objects where you want

them to go and then at run time the program reads them in and then routines can work

with them

see

So theres really no extra programming here which is why its-its kind of nice-its-its

break from..

Right

From writing

Lets pan down this here and just click down on those-those buttons there

Starting from the top

Yeah

Yeah Okay uh is that at the top

Mmm Hmm

Mike eah why dont you just start at the top and just click down one after the

other

Okay uh should explain them as go or..

Sure

Okay Um this
top level is called toolbar dragbar and its basically an object that

knows to be dragbar because you can drag our toolbars around

Yeah

So you place one of these in the view and now you have new-a new toolbar that can be

dragged around Um and the two components-the two subcomponents of that toolbar are

the guppy pain the little control on the left side that-that
you use to drag which we-we

Page
Netscape Documentary

Tape 104

call the grippy And then another view inside that contains all of these
affectionately pain

different buttons You know the back button and the forward button and the reload

button and search and-and all of that And then sort of attached to each little button is-is

another small attachment and little bit of code that can sort of be glummed on anywhere

you want Uh that does tooltips and so we just sort of stick one of these in in

Constructor and our button automatically gets tooltip

And tooltip is a..

Little bit of descriptive text to say you know this button does such and such Urn..

Do ou want to do one shot just going down the whole list Just click click click click

click

Sure

Yeah just you know do yeah

How-how quickly should go

seconds

Okay To-for each one or..

Yeah yeah and next

Okay

Yeah

Thats good speed

Alright sound of clicking

So Mike how would you describe this-this element of the process Urn the-this-this

is not

Right

This comes after youve-after youve written the code for it

Um it can actually-it can before or it can come after It doesnt really matter

Right It doesnt matter

Page
Netscape Documentary
Tape 104

Urn sometimes it comes before when you know basically you want to get an idea for

how something will look but you dont really have the code behind it You can

prototype it out little bit like this

Mmm hmm
And then fill in the code later

Sure

Or you could know exactly how its going to look and write the code and then go back in

and create this hierarchy to uh to do what you want with the pieces have
you already

Okay Okay now next step next uh window

Okay urn so the oh let me bring this one over The main browser window uh is sort

of three-three Theres whole toolbar

large components the area in here Theres the

HTML area here and then the status bar area down at the
very bottom And each one of

those is-is an contains of other objects

just object that hierarchy that we lay out with

with Constructor And the-its-the isnt whats actually laying it out we-we it
lay

out you know visually Um and then the HTML pane is actually little bit more

complicated Heres the HTML part and this is where the-the actual HTML is displayed

when the user clicks on link But then we have of this here which
all is the new stuff in

Five Oh this is Aurora where the bookmarks and and

you see history all of that stuff

And we this treeview we

got This is the treeview that
got from in Four Oh that we

were able to build on-build on top of Um and we just dropped it in and started going

and we knew we had so we could added

already it
just it in here as we were starting up

Mmm hmm And can you show how this relates to the buttons Is there

connection

Urn this specifically doesnt The-the buttons are in this view up here

Right

And this view is uh sort of blow up almost of what goes-what in there

goes

Its macroview of the browser

Page
Netscape Documentary

Tape 104

Yeah Yeah

Right Gotcha Okay

And uh where is that drawbutton graphic Here we go And theres routine here called

Drawbutton Graphic which is you know fairly simple Its probably 20 lines total of

code using whole bunch of different objects to-to draw the icon and draw it

animating Urn we found out that the-the OS supply button can pretty much do all of

this for us already So we can remove this entire-we can remove this entire drawing

routine

And how do you connect it to the code and the operating system Do you have to

refile..

Thats where-thats-we do that in Constructor Urn part of each button has a-has whole

bunch of information and uh part of that is class ID and this class ID says what kind of

thing is this You know is this button is this scroilbar is this something weve

created And by specifying certain class ID we can say use the operating systems

version rather than the one that we wrote

Right Okay Lets do couple of-So Mike what was-so tell us what-how this all

connects then Do you have-we have layers of programming and of program

language and other uh..

Layout tools

Layout tools Right Just describe how they all interconnect and how-how much in

fact complexity there is to that part of the..

Okay um the laying out is fairly simple urn its just dragging components off of

toolbar say and then dropping them into window Um and then just placing them where

you want to go and specifying all of their-their attributes Um and so we do that say for

toolbar We drag buttons from palette and drop them into a-drop them into

container toolbar container um and give them buttons narnes and specify their icon

IDs and what cornrnand they should be-what they should call when theyre clicked and

Page
Netscape Documentary
Tape 104

that happens
all that stuff And then while the program is actually running all
you

know beforehand and while the program is actually running urn we call different

routines on urn the toolbar as whole which goes through each button one at time

like you know Scotts routine does it

goes through things that work on toolbar buttons

and resizes them and them out and rnoves thern appropriately urn to get them to-to
lays

look right um and so its a-a combination of high-level layout tools interacting with low-

level that knows what to do with each of these beasts while-while the programs

going on

Urn is there any-you know think we take all of this stuff for granted mean

because we have to Its beyond our comprehension But at some level there is uh

uh this sort of tremendous integration of-of urn commands and urn of-and its-and

it reflects lot code writing over long period of time Is there way for someone

Tara was just describing how the higher-level code writing languages are more-

are closer to English than the sort of base-level ones which are very simple

commands

Right or symbols or.. right

Or yeah symbols rather Is this the-where code writing heading ultimately to you

know something where it will be accessible to people who..

Well different-different languages serve different purposes Urn them are the more

general-purpose high-level languages urn Java and those Urn and think to

stay powerful and widely-accepted there needs to be rnix of feeling like English but

still not just being English Because there are lots of ambiguities in spoken language and

all of that Which with mathematics and the language of mathematics definitely urn

definitely solves So theres always going to be some mix between uh real-world

languages and symbols symbology Urn there are other languages which are incredibly

popular incredibly powerful like Pear Pearl is loaded with tons of wacky symbols

and you know name any symbol in the alphabet you know that
you can type on a-on

Page
Netscape Documentary

Tape 104

some meaning in Pearl Urn but you know that doesnt mean that
keyboard and its got

Pearl isnt very powerful that just means its little more difficult to a-to ramp up on

And there have been lot of attempts to make very English-like languages In fact

have things dialects which allow to

Script even you
called if
with Apple tried to
Apple

understand it
right um specify the scripting language so that it more closely follows

that want There would be an English dialect and so Apple

any language you-you

Scripts written to that would look like English Urn you know with the speech patterns

and the word ordering Or you could have a-a different dialect urn you know Russian

of something where is completely different and things written in that dialect

everything

would read and look like Russian Urn it was very very lofty goal and they didnt

quite get there But urn but it

definitely made it easier for lots of people to sort of get on

board Urn..

This is the rub in programming that you have to-that-that-that you want it be

familiar on one level but it has to be abstract on another in order to accommodate

the levels..

Right Thats why its-its very difficult sort of to write-to create general purpose

programming language that everyone is going to use and thats why there arent 250

general purpose programming languages that

everyone uses urn you know theres

couple and theres 250 that people use when they need to do something specific that

theyre-you know that they know that field already urn or that they take to the time to

learn because its very powerful like Pearl know is-is for scanning text and
you great

is great for doing lot of scripting like things Urn you know but youd never write

communicator in Pearl because its unreadable for the most part unless youre Scott

but thats another story Urn so there-theres-theres this balance and think it shows

that that balance is very hard to achieve by the fact that theres so few general quote

unquote purpose programming languages

Page
Netscape Documentary

Tape 104

here What-what the you know the joy and challenge of

Urn one last question is

and-and what drives code writers if its possible to generalize

code writing

Sigh Well what drives me is interesting stuff interesting work interesting ideas um

here Urn but one the masons why like UI

you know theres certainly lot of that like

programming rather than just writing algorithms for someone you know to use is that

of these different to mix high-level layout tools with

you get to mix all things you get

low-level code and urn youre not just writing code 24 hours day you actually

code and of draw

stop writing code
sometimes get at sort pretty
to stop looking just

pictures for awhile And its-its mix between urn you know the hard-core developer

and And even second level like that You

the artist though rny art skills are at

know and thats what keeps me going because thats really sort of really interesting to

me

Excellent

Okay

Page