Websphere 入门基础 第十课 IBM WebSphere Studio实验指导
Lab1A(Fusion 1)：创建JKToys网站
Lab1B(Fusion2)：继续创建JKToys网站
Lab2：使用NetObjects BeanBuilder创建Applet
Lab3：WebShpere Studio & BeanBuilder with WebRunner Beans
Lab4：创建JSP页面来执行JKToys数据库上的雇员搜寻
你将用WebShpere建立JKToys（Just for Kids Toys）网站的一些部分，JKToys是一个假想的玩具公司。在将要做的所有实验里，你会需要事先准备好的许多文件。实验指导员应告诉你这些文件所在的目录，我们不妨用X：来代表这个目录。
Lab1A(Fusion 1)：创建JKToys网站
在这个练习里你将用NetObjects Fusion
1. 创建一个新的Web站点，包括：
— 一个新的站点样式
— 一个新的主控边框
— 新的HTML页面
— 页面之间的链接
2. 发表这个网站
这个网站称为JKToys（Just for Kids Toys）。在开始以前创建一个目录，例如，C:\JKToys, 来放置你的练习。
第一部分：创建一个新的NetObjects Fusion站点叫做JKToys
1. 启动NetObjects Fusion。选择Start->Programs->NetObjects->NetObjects Fusion3.0.1。你会看到“欢迎使用NetObjects Fusion”对话框。
2. 如果你还没有创建JKToys站点，选择“空白站点”，按“确定”按钮。在“新建站点”对话框中输入文件名JKToys，按“保存”按钮。
3. 如果你已经创建了一个站点，在“欢迎使用NetObjects Fusion”对话框上按“取消”按钮。从菜单上选择“文件”->“打开站点”Site。在“打开”对话框选择JKToys，按“打开”按钮。在下一个“打开”对话框，选择JKToys.nod，按“确定”按钮。
第二部分：为JKToys站点创建一个新的站点风格
1． 选择“样式”图标，然后选择菜单“样式”->“新建样式”。
2． 输入新建样式名称JKToys。选择“确定”。
3． 从左边的面板上选择你刚建立的JKToys站点样式。
4． 为这个风格创建按钮：
a. 双击右边面板上的第一级导航条.
i. 按“正常”标签右边的“浏览”按扭。浏览到包含按钮图的NetObjects目录：x:\JKToys Workshop\labs\Ex1-Fusion\Images，双击StandardButton.gif。
ii. 按“突出显示”标签右边的“浏览”按扭。浏览到包含按钮图的NetObjects目录：x:\JKToys Workshop\Labs\Ex-1-Fusion\Images，双击StandardButtonOn.gif
iii. 按“确定”
b. 双击右边面板上的第二级导航条.
i. 按“正常”标签右边的“浏览”按扭。浏览到包含按钮图的NetObjects目录：x:\JKToys Workshop\labs\Ex1-Fusion\Images,双击AltStandardButton.gif。
ii按“突出显示”标签右边的“浏览”按扭。浏览到包含按钮图的NetObjects目录：x:\JKToys Workshop\Labs\Ex-1-Fusion\Images，双击AltStandardButtonOn.gif
iii.按“确定”
5.按“设置样式”图标。
第三部分：为Welcome page创建MasterBoard
1. 在Page视图里打开Welcome page（在Site视图里双击那个页面，或在Site视图里选择那个页面，在工具栏上按Page按钮）。
2. 把MasterBorder的名字改为jkmainmb.
a) 单击MasterBorder区域（在Layout正方形外面的任意地方）。
b) 在属性对话框中，确信选中General页(如果属性对话框看不到，选择：视图->面板->属性面板).
c) 按Name field边上的Add/Edit按钮
d) 按Edit MasterBorder List对话框，选择Add按钮。
e) 在New MasterBorder对话框，在Name输入jkmainmb，按“确定”。
f) 在MasterBorder区域(在Layout正方形外面的任意地方)。从上面MasterBorder边白删除banner(the top marque with the X in it)，从左边的MasterBorder边白删除左边的navigation bar(选择每个元素，按Delete键或Edit->Clear)。
3. 把BasterBorder的尺寸改为以下(用Step 2里同样的Properties对话框的同样的面板)：Left:10;Top:170;Bottom:133,Right保留缺省值。
4. 参见图1，在Welcome页面的MasterBorder区域增加一些图(gif文件)：StaticMasterhead.gif(上边界)、toysonly.gif(下边界)、nclogo.gif(下边界)。你需要的所有图都存放在x:\labs\Ex1-Fusion\images目录(x是包含JKToys workshop CD图片的驱动器或目录)中。可从资源管理器里进行拖放来增加一个图，或者：
a) 如果页面没有被打开，在Page视图里打开页面(在Site视图里双击那个页面)
b) 在屏幕左边的Tools面板里选择Picture图标。如果面板看不到，选择View->Toolbars->Standard Tools。在toolbar选择picture按钮。
c) 在MasterBorder区域你想放图的地方单击。
d) 从File Selection对话框里选择图。
e) 把图拖到正确的地方。
5. 在页面的底部排放图。一个方法是使用Multi-Object 面板里的Position页。另一个方法是选择多个元素(SHIFT－鼠标左键用来选择多个元素)，用菜单条的Object->Distribute Object->Horizontally 或Object->Align objects->Vertical Center来排列。
6. 保存站点：File->“保存” Site。你也可以预览这个站点，如果你要的话你可以单击Preview按钮。注意，Control->Preview(在单击Preview按钮时按住Control键)预览单独一个页面。
第四部分：为JKToys站点创建初始HTML页面
1． 如果你不在Site视图，单击Site图标。把Home Page to Welcome的名字改为JKToys。要做到这一点，选择这个页，在Properties对话框，确信Page页被选中(如果Properties对话框看不到，选择View->面板s->Properties 面板)。在Name字段类型输入Welcome to JKToys(你也可以在页面图标上直接改变名字)。选择Custom Names按钮，编辑Navigation Button字段为Welcome.单击“确定”。
2． 创建5个空白页，作为Home Page的孩子；这样作：选择新的Home Page,然后：
a) 从弹出菜单选择New Page，或
b) 从菜单条选择Edit->New Page
3． 就象在step 1里所作的，把5个页面的name 和Custom Name改成以下：
|
Name
|
Custom Name->Navigation Button
|
|
JKToys Shopping
|
Shopping
|
|
JKToys Self-service
|
Self-service
|
|
JKToys Kids Zone
|
Kids Zone
|
|
JKToys Information
|
Informaiton
|
|
JKToys Search
|
Search
|
4. 创建以下的页面。这些页面里的某些没有内容，但是需要完成按钮和链接。为每一个页面选择一个父页面，然后从菜单条或弹出菜单里选择New Page。
|
Parent Page
|
New Page Name
|
Custom Names->Navigation Button
|
|
JKToys Self-service
|
JKToys Registation
|
Registration
|
|
JKToys Self-service
|
JKToys Literature
|
Literature
|
|
JKToys Self-service
|
JKToys Parts Locator
|
Parts Locator
|
|
JKToys Self-service
|
JKToys Orders
|
Orders
|
|
JKToys Self-service
|
JKToys Accounts
|
Accounts
|
|
JKToys Self-service
|
JKToys Returns
|
Returns
|
|
JKToys Kids Zone
|
JKToys Kids Zone Registration
|
Kids Registration
|
|
JKToys Information
|
JKToys Employment
|
Employment
|
|
JKToys Information
|
JKToys Store Locator
|
Store Locator
|
第五部分：完成Welcome page
1. 在Welcome page的Page视图中，在Layout区域中增加4个图：welcome.gif、links1.gif、soldier.gif、legos2.gif。用这个方法把图加到页面里：
a) 在Page视图里打开页面(在Site视图双击页面).
b) 在Windows 资源管理器里选择包含图的文件。这些文件在X:\JKToys Workshop\Ex1-Fusion\images.
c) 把文件拖到NetObjects的Layout区域.
d) 放置文件，位置如图1所示。
2. 增加文字(从Tools 面板里选择Text按钮，创建一个正方形，设置大小，在里面放置你的文字)。输入以下文字：Use our Site Map to move around the site。
3. 增加Site Map：选择View->Toolbars->Component Tools，从Component Tools 面板里选择Site Mapper。画一个正方形，在里面放置Site Map。不要担心正方形的尺寸。关闭Component Tools 面板.
4. 从菜单条选择Object->Size Layout to Objects，使Layout区域的大小适合你放进去的对象。
5. 创建三个链接，分别从Welcome页面到Shopping,Information,Store Locator:
a) 在Tools 面板单击Hotspot:Rectangle。
b) 围绕SHOP ONLINE画一个正方形，在Link对话框选择JKToys Shopping。按Link按钮完成链接。
c) 重复步骤a)，然后围绕ABOUT OUR COMPANY画一个正方形，从Link对话框的页面列表里选择JKToys Information。
d) 重复步骤a)，然后围绕STORE LOCATOR画一个正方形，从Link对话框的页面列表里选择JKToys Store Locator。
注意：你可以在NetObjects Fusion里用Follow Link功能跟踪链接。为了做到这个，或者右击一个链接元素，然后从弹出菜单选择Follow Link，或者选择元素，从菜单条里选择Go->Follow Link。为了跟踪一个文字链接，先击文字，这样文字光标出现。
6. 预览你站点：击Preview按钮。为了看到site map，你要发表站点。
第六部分：发表你的站点
1． 设置NetObjects Fusion Publish Setting
a) 从Site页面单击Publish按钮。从菜单条选择Publish->Publish Setup.
b) 在Directory Structure页，确保目录结构是By Asset Type。这会生成asset和html子目录，是JKToysMasthead applet(将在BeanBuilder里创建)正确工作所需要的。
c) 按“确定”，结束setup的这个部分。
2． 发表你的站点：从Site页面单击Publish按钮。选择Publish->Publish Site。从下拉列表里选择My Computer。如果你没有预先设置MyComputer位置，你需要执行以下的步骤：
a) 从下拉列表里选择My computer。按location旁边的Edit按钮。
b) 在Location Properties对话框里，确保Server Name是My Computer,选择Local 单选按钮按钮，规定目录为 C:\www\internet\，C:是web server安装的驱动器的。
c) 按“确定”完成编辑。
3． 按“确定”发表你站点。
4． 确保internet site的web server实例这样启动的:
a) 运行X:\JKToysWorkshop目录里的go-internet.bat。
5． 在Netscape的Location区域输入以下内容，打开主internet页面。
a) http://127.0.0.1/
b) 测试链接，确保你的所有页面正确地发表了。
Lab1B(Fusion2)：继续创建JKToys网站
按在这个练习里，你将为你的JKToys网站创建新的页面，包括：
— 图片轮放
— 图像映射
— 发布站点
并发表这个网站。这里的指导没有上一个练习那么详细。
第一部分：创建别的MasterBorders
1. 创建一个新的MasterBorder，叫做jkhowtomb。
a).打开JKToys Kids Zone页面。在Page视图，在JKToys Kids Zone的MasterBorder里单击。
b).在MasterBorder Propertises对话框的General页，按Name边上等Add/Edit按钮。
c).在Edit MasterBorder列表对话框，击Add按钮。
d).在New MasterBorder对话框，规定名字jkhowtomb，把它基于jkmainmb(从Based On输入区旁边的下拉列表选择)。选择“确定”，然后Close。这将创建一个新的MasterBorder叫做jkhowtomab,看上去跟 你为Welcome页面创建的一样。
e).用Property对话框重新设置MasterBorder的尺寸：Top:180,Left:125,Right 25,Bottom 133.
2. 在jkhowtomb MasterBorder的左边创建一个框架。
a).在MasterBorder的任何地方单击。
b).打开Properties 面板。
c).在Properties 对话框，单击AutoFrame下面的Left图标。
d).不要选Generate HTML frame borders 勾选框。
e).单击框架区域，然后在Properties 对话框的Frame页单击。
f).选择Solid Color 单选按钮。
g).为背景色选择紫色。如果你被要求使用近似的颜色，也可以。
h).从标准工具栏里选择Navigation Bar，把它垂直地放在框架里(画一个垂直长方形，把它放在里面)，Navigation Bar的顶部同Layout区域的顶部相平。
3.创建一个新的MasterBorder叫做jkinfomb.
a).打开JkToys Information页面。在Page视图,在JKToys Information页面的的MasterBorder区域。
b).在MasterBorder对话框的General页单击Name旁边的Add/Edit按钮。
c).在Edit MasterBorder列表对话框里，单击Add按钮。
d).在New MasterBorder对话框里，规定名字为jkinfomb,基于jkmainmb(从Base On 输入区域旁边的下拉列表里选择)。选择“确定”，然后Close。这将创建一个新的MasterBorder叫做jkinfomb，看上去跟你为Welcome page创建的一样。
e).用Properties对话框重新设置大小，Top:180,Left 125,Right 25,Bottom 133.
4. 在jkinfomb MasterBorder的左边创建一个框架。
a).在MasterBorder的任何地方单击。
b).打开Properties 面板。
c).在Properties 对话框，单击AutoFrame下面的Left图标。
d).不要选Generate HTML frame borders 勾选框。
e).单击框架区域，然后在Properties 对话框的Frame页单击。
f).选择Solid Color 单选按钮。
g).为背景色选择绿色。如果你被要求使用近似的颜色，也可以。
h).从Standard Tools 面板里选择Navigation Bar，把它垂直地放在框架里(画一个垂直长方形，把它放在里面)，Navigation Bar的顶部同Layout区域的顶部相平。
5.改变jkinfomb Navigation Bar来显示Child Level链接。
a).选择Navigation Bar。
b).在Properties对话框，确信Vertical Navigation Bar Properties对话框出现。
c).单击Display区域右边的Options。
d).单击Nav Bar Display对话框的Child Level 单选按钮。
e).选择Include Home Page checkbox。单击“确定”。
6.在JKToys Search页面使用jkhowtomb MasterBorder。
a).在Page视图打开JKToys Search page.
b).选择MasterBorder区域。
c).打开Properties 对话框。
d).从Name右边的下拉列表里选择jkhowtomb MasterBorder。
第二部分：完成JKToys Shopping page
1. 在JKToys Shopping页面增加一个表。
a).在Tools 面板里选择Table按钮
b).在layout区域里你想放表的地方画一个长方形。
c).在Table对话框输入2列3行，别的项目为缺省值
d).选择Tools 面板里的Text按钮，增加文字
e).重新设置表的尺寸，把文字包含进去。
|
Register Here
|
Join our club!
|
|
Guest Shopper
|
You’re JustLooking
|
|
Registered Shopper
|
JKToys Members Only
|
2. 创建从表到正确的页面的链接，对每一格：
a).双击格子里的文字，高亮它。
b).如果没有打开Properties对话框的话，打开它。
a) 单击链接
b) 从页面列表里选择链接。链接是这样的：
|
Register Here
|
JKToys Registration
|
|
Guest Shopper
|
JKToys Store Locator
|
|
Registered Shopper
|
JKToys Orders
|
3. 向JKToys Shopping page增加一个文字元素。
a).在Tools 面板选择Text工具
b).在页面上你想放文字的地方画一个边界框
c).输入图2里的文字
注意：当你加文字时，按Enter创建一个新的段落，按SHIFT Enter创建一个新的行。
4.向JKToys Shopping page 增加一个图welcome.gif
a).从Tools 面板里选择Picture工具
b).在上面的表里单击页面
c).选择X:\JKToys Workshoop\labs\Ex1-Fusion\images\welcoss.gif.
第三部分：完成JKToys Self-service page
1. 向JKToys Self-service页面增加一个Navigation Bar
a).在Page视图里打开JKToys Self-service页。
b).从Standard Tools 面板里选择Navigation Bar，把它垂直地放在紧靠在layout区域左边的框架里(画一个垂直的长方形，把它放在里面)，Navigation Bar的顶部，同Layout区域的顶部相平。
c).单击layout区域的左边。
d).打开Properties 面板
e).单击Display域旁边的Options按钮
f).选择Child Level
g).单击“确定”
2. 向图3里的页面增加4个文字元素。注意，你必需选择文字来改变它的塑性，而不只是选择文字元素。同样地，要输入文字的下一行，按住shift按Enter.
第四部分：完成JKToys Kids Zone page
1. 在Page视图打开JKToys Kids Zone页面
2. 增加图planerun.gif和twartists.gif，就象图4这样。注意，planerun.gif是一个multi-part(animated)GIF,第一帧是空的，所以在页面上什么也看不到。
3. 创建一个有小孩图案的rotating picture of the refrigerator.
a).在View->Toolbars 面板,选择Component tools，然后在Component Tools 面板单击Rotating Picture.
b).在你想放置组件的地方画一个长方形。
c).一个占位图像出现在页面上并且 Rotating Picture Properties 面板 页出现
d).在Component页里设置Rotating Picture Component参数。在External Link页输入External Link URLs:
Pause Time:2
Number of Images:3
Image 1:frkids.gif
External link URL for Image 1:www.yahooligan.com
Image 2:frsb.gif
External link URL for Image 2:www.disney.com
Image 3:frsf.gif
External link URL for Image 3:www.warnerbros.com
第五部分：完成JKToys Information page
1. 增加图5里的2个文字元素到页面上。注意，文字的被链接的四行是一个文字元素。从四个链接的文字行创建链接如下：
|
Employment Opportunities
|
JK Toys Employment
|
|
Franchise Opportunities
|
JK Toys Literature
|
|
Investing in the JKToys Company
|
JK Toys Literature
|
|
Latest new about JKToys
|
JK Toys Literature
|
2. 保存站点：File->“保存” Site
第六部分：发表你的站点
1． 设置NetObjects Fusion Publish Settings.
a) 从Site页单击Publish按钮。从菜单条选择Publish->Publish Setup.
b) 在Directory Structure页，确信目录结构是By Asset Type。这会产生asset和HTML子目录，是JKToysMasthead applet(在BeanBuilder里建成)正确工作所需要的。
c) 单击“确定”结束设置的这个部分。
2． 发表你的站点：从Site页单击Publish按钮。从菜单条里选择Publish->Publish Site。从下拉菜单里选择MyComputer。如果你没有预先设置MyComputer地点，你需要作以下的步骤。
a) 从下拉列表里选择My Computer。单击location旁边的Edit按钮。
b) 在Location Properties对话框，确信Server Name 是My Computer，选择Local 单选按钮，规定目录为C:\www\internet\，C是安装web server的目录。
c) 单击“确定”结束编辑。
3． 单击“确定”发表你的站点。
4． 再一次，确信”internet”web ser ver在运行(go-internet.bat)
5． 在Netscape的Location区域输入地址打开main internet page
a).http://127.0.0.1/
b).测试不同的链接,确信你的所有的页面已经正确地发表。
第七部分（可选）：增加Store Locator Page
1. 创建一个新的页面，作为Store Locator页面的child。命名为JKToys Store Locator.
2. 在Page视图里打开新的JKToys Store Locations页面。
3. 用Windows Explorer，把X:\JKToys Workshop\labs\Ex1-Fusion\Store.txt(X是CD的目录)拖进layout区域.格式化文字，使得state用大些的字体，颜色同city不同，city同address不同。在每一个state name的前面和旁边创建以下的anchors.要创建一个anchor,单击你要anchor的文字区域，在Properties对话框单击Anchor按钮。
|
State
|
Anchor
|
|
New York
|
NY
|
|
Pennsylvania
|
PA
|
|
Ohio
|
OH
|
|
North Carolina
|
NC
|
|
Florida
|
FL
|
|
Texas
|
TX
|
|
California
|
CA
|
4. 在原始的JkToys Store Locator页面，不是在你刚才创建的Store Location页面上。
a) 把X:\JKToys Workshop \labs\Ex1-Fusion\images\usa2.gif图加进页面。
b) 在Store Locator图的每一个红色区域，创建一个多边形Hot Spot：
c) 在Tools 面板上按住HotSpot:Rectangle按钮，然后从按钮右边显示出来的选择列表里选择Hotspot:Polygon。
d) 单击多边形的点，绘出区域轮廓.
e) 双击，结束多边形。
f) 从每一个多边形创建一个链接到JKToys Store Location页面，如上表所示的正确的state anchor，选择正确的anchor。
5. 入第六步所说的，发表站点
Lab2：使用NetObjects BeanBuilder创建Applet
1. 在这个练习里,你将用NetObjects BeanBuilder创建一个Applet， 用：
— 图
— Rollover Pictures
— URL links
— Java methods
2. 发表这个Applet来用在NetObjects Fusion
3. 增加applet到你在练习1里创建的站点。
第一部分：开始创建applet,把图载入Gallery,放在applet canvas上放一个图
1. 从开始菜单选择Programs->IBM WebSphere->NetObjects BeanBuilder 1.0->BeanBuilder启动NetObjects BeanBuilder。
2. 按“取消”按钮关闭New Applet Wizard。我们将在没有Wizard的情况下工作。如果你不想在每次启动BeanBuilder时看到这个窗口，你必须复位选择框：show this window at start time.
3. 把需要的图载入Gallery：
a) 如果Gallery窗口看不到，选择菜单条项目Window->Gallery
b) 在Gallery里单击Find图标(有一个箭头的文件夹)。
c) 从X:\JKToys Workshop\labs\Ex2-BeanBuilder\images里选择和双击任何一个图，或图上单击，然后单击“打开”。Gallery自动装载在那个目录里的所有图(X:是JKToys workshop目录所在的目录，可能是你的CD－ROM，也可能是你的硬盘上的目录)
4. 在Gallery单击jkhead.jpg，单击applet canvas(在Composer窗口的左上方的白色正方形)，把第一个图加进applet canvas.
5. 单击图jkhead.jpg，在Details 窗口的Properties页面把name设置为jkhead。
第二部分：把4 Rollover Buttons和5 URl链接放到applet canvas上
注意：作为以下指导的另一个替代，你可以在applet canvas上放1个rollover button，设置图，拷贝这个按钮三次，在每一个拷贝里手工编辑图的名字。你可以对URL链接采取同样的步骤。
1． 在面板窗口选择Multimedia页。
2． 单击Rollover图标，在Jkhead图下单击。注意applet canvas怎样重新设置尺寸接收一个新的元素。
3． 当对话框出现,用Find按钮为rollover button定位3个图：
a) Button Picture X:\JKToys Workshop\labs\Ex2-BeanBuilder\images\nbash.gif
b) Pressed Picture ：X:\JKToys Workshop\labs\Ex2-BeanBuilder\images\nbashp.gif
c) Rollover Picture：X:\JKToys Workshop\labs\Ex2-BeanBuilder\images\nbashO.gif
4． 为别的rollover buttons重复步骤2和3 三次，使用文件：
a) nbass.gif,nbassP.gif,nbassO.gif
b) nbakz.gif,nbakzP.gif,nbakzO.gif
c) nbajkt.gif,nbajktP.gif,nbajktO.gif
5． 选择所有的rollover buttons（用Shift鼠标左键单击），然后从菜单条选择Layout->Align->Top.
6． 安排rollover buttons，和jkhead图，如图1所示。确信rollover buttons没有重叠。重新设置applet canvas的大小，使得rollover buttons和图适合白色区域。
7． 在面板窗口选择NetWorking页，单击URL Link.
8． 把URL Link放在composer的任何地方(你可以放在applet的里面或外面，运行时它们是看不到的)。
9． 重复上面的步骤四次，把另外4个URL链接放进composer。
10． 在你在练习1的开头创建的目录里保存你的applet(选择“文件”>“另存为”，保存为JKToysMastHead.app).运行这个applet看看你到现在为止都做了些什么。练习的这个阶段的答案可以在x:\JKToys Workshop\Labs\Solutions\Ex2-BeanBuilder\JKToysMastHead1.app找到。
第三部分：设置所有的属性，建立URL 链接的连接
在这些URL里你不需要http:，因为你将创建一个Java方法来实际创建正确的URL。
1. 单击URL Link1，在Details窗口设置name为shoppingURL,URL address为/html/jktoys_shopping.aspl,Status Message为Go to the Shopping Page,target frame为parent frame.在这个练习里不需要target name。
2. 单击URL Link2，在Details窗口设置name为SelfServiceURL，URL地址为/html/jktoys_self-service.aspl，Status Message为Go to the Self-Service Page，target frame为parent frame.
3. 单击URL Link3，在Details窗口设置name为KidsZoneURL，URL地址为/html/jktoys_kids_zone.aspl，Status Message为Go to the Kids zone Page，target frame为parent frame.
4. 单击URL Link4，在Details窗口设置name为infoURL,URL地址为/html/jktoys_information.aspl，Status Message为Go to the About JK Toys Page，target frame为parent frame.
5. 单击URL Link5，在Details窗口设置name为homeURL，URL地址为/index.aspl，Status Message为Go to the Go to the JK Toys Home Page，target frame为parent frame.
6. 单击jkhead图，在Details窗口选择Connection页。记住总要选择这个项目，即使它显示为缺省。
a) 选择When->mouse clicked,Bean->homeURL,Do->show document.
b) 选择When->mouse entered,Bean->homeURL,Do->show status
7. 单击Rollover1
a) 选择When->mouse entered,Bean->shoppingURL,Do->show status.
b) 选择When->clicked,Bean->shoppingURL,Do->show document
8. 单击Rollover2
a) 选择When->mouse entered,Bean->selfServiceURL,Do->show status.
b)选择When->clicked,Bean->selfServiceURL,Do->show document
9. 单击Rollover3
a)选择When->mouse entered,Bean->kidsZoneURL,Do->show status.
b)选择When->clicked,Bean->kidsZoneURL,Do->show document
10. 单击Rollover4
a)选择When->mouse entered,Bean->infoURL,Do->show status.
b)选择When->clicked,Bean->infoURL,Do->show document
11. 保存你的工作，再次运行applet，看看是否Show Status功能正常。你不能检查链接是否正常，除非你在Netscape里运行applet。这个练习的这个阶段的答案可以在
x:\JKToys Workshop\Labs\Solutions\Ex2-BeanBuilder\JKToysMastHead2.app
找到
第四部分：增加两个Java方法，创建正确的URL
因为一个用户可以从不同的页面访问masthead applet，applet必须基于当前页面建立正确的URL。
1． 从菜单条选择Window->Java
2． 规定一个import语句
a) 从Java 窗口的右上角的Other Methods Choice选择imports
b) 在现存的代码行的最后加上import java.net.*;
c) 单击“保存” Method.
3． 创建第一个方法，单击New Method(最左边)图标。
4． 把Java窗口的内容换成x:\JKToys Workshop\labs\Ex2-BeanBuilder\method1.txt
a) 用notepad打开method.txt
b) 选择文件里的所有文字
c) 拷贝文字到Clipboard
d) 用shift-insert把文字粘贴到Java窗口。
5． 单击“保存” Method图标
6． 创建第二个方法，单击New Method(最左边)图标。
7． 把Java窗口的内容换成x:\JKToys Workshop\labs\Ex2-BeanBuilder\method2.txt
a)用notepad打开method.txt
b)选择文件里的所有文字
c)拷贝文字到Clipboard
用shift-insert把文字粘贴到Java窗口。
8． 单击“保存” Method图标.
9． 把applet的started event联到initialize方法：
a) 打开Details窗口
b) 单击applet canvas的空白区域(白色区域)
c) 在Details window,when之下，单击在started上。
d) 在Bean之下，单击Applet1
e) 在Do下单击initialize.
10． 保存你的工作，运行applet，看看你是否有Java错误。注意你不能测试链接是否工作直到你在Netscape里运行applet。这个练习的这个阶段的答案可以在
x:\JKToys Workshop\labs\Solutions\Ex2-BeanBuilder\JKToysMastHead.app.
第五部分：发表applet作为一个NFX组件
1． 选择File->Publish来显示Publish Wizard。在Wizard作以下的：
a) 按Next按钮
b) 在Publish As页面，规定你要applet发表为一个web的applet.
c) 按Next按钮
d) 在Local页面，规定你要发表本地文件夹，选择发表为NetObjects Fusion component.选项
e) 选择你为练习1创建的目录（也许是c:\JKToys）.
f) 在Finish上单击。
第六部分：在你在NetObjects Fusion里创建的站点里载入Applet
1. 启动NetObjects Fusion，打开你在练习1 里创建的站点
2. 打开JKToys Welcome页面.
a) 删除banner(StaticMastHead.gif)
b) 在Component tool bar单击NetObjects Fusion Components(NFX Components)图标
c) 单击MasterBorder区域里banner删除以前在的地方
d) 单击Add.选择你刚刚创建好的NFX组件(C:\JKToys\JKToysMastheadComp.nfx)
e) 单击“打开”.
f) 在Installed Components list里选择JKToys\JKToysMasthead-BeanBuilder,单击“确定”。注意：移动组件，这样它就适应MasterBorder.
3. 在page视图,放好masthead,使得它在上边界的左上角，选择Object->Size Layout to Objects.如果需要，重新设置top MasterBorder margin,直到masthead适合空间。
4. 预览页面，用Control-Proview.注意你不能在proview mode看到组件。
5. 对jkinfomb和jkhowtomb MasterBorder重复步骤a,b,c,和2的f。这些MasterBorders分别用在JKToys Information page和JKToys Kids Zone page。
第七部分：发表你的站点
1． 设置NetObjects Fusion Publish Settings.
a) 从Site页面单击Publish 按钮。从菜单条选择Publish->Publish Setup.
b) 在Directory Structure业，确信目录结构是By Asset Type。这将产生asset和html子目录，将是JKToysMasthead applet正确工作需要的。(在BeanBuilder里创建)
c) 按“确定”结束设置的这个部分。
2． 发表你的站点：从Site页面单击Publish按钮。从菜单条选择Publish->Publish Site。从下拉列表里选择My Conputer.如果你以前没有设置过MyComputer location,你需要执行以下步骤：
a) 从下拉列表里选择My Computer。按Edit按钮next to location.
b) 在Location Properties dialog,确信Server Name 是My Computer,选择Local 单选按钮，规定目录为c:\www\internet\,c是web server安装的驱动器的驱动器字母。（忽略说applet的.class文件丢掉的消息――它被放在.jar文件里〕
c) 按“确定”结束编辑。
3． 单击“确定”发表你的站点。
4． 确信“internet”site在运行，(go-default.bat)
5． 在main intenet page打开NetScape,在Netscape的Location区域输入以下：
a) http://127.0.0.1/
b) 测试不同的链接，确信所有你的页面已经被正确地发表了。
Lab3：WebShpere Studio & BeanBuilder with WebRunner Beans
在这个练习里，你将用WebRunner chart beans和NetObjects BeanBuilder创建一个商务应用，可以用IBM WebSphere Studio生成的servlet从DB2里取出数据，用图表表示。在你开始以前，把WebRunner bean加进NetObjects BeanBuilder：
a) 拷贝文件x:\JKToys Workshop\Lectures\L5-BeanBuilder\Beans\*.jar到 c:\WebSphere\BeanBuilder\Beans
b) 选择Start->NetObjects BeanBuilder 1.0->BeanBuilder启动NetObjects BeanBuilder,检验Chart Bean已经被加进Chartbb页。
第一部 分：创建Applet JKChart
1. 改变applet的布置到Border Layout.
a) 在composer窗口，选择applet(左上角的白色box)
b) 在Properties页的Details，选择layout输入区域，单击position或...按钮。当对话框出现，选择Border Layout，然后Horizontal和Vertical gap为5。
c) 单击“确定”
2. 增加webrunner chart bean到Applet
a) 在Palette窗口，选择Chartbb页.
b) 接着，在Palette窗口单击ChartBean，然后在Composer窗口单击applet的中部把bean放进applet.
c) 确信Chart Bean被放进applet的Center位置。
1) 单击Chart Bean，然后选择Details窗口的Properties页。
2) 选择size and position输入区域，改到Center(如果还没有设置为Center)
d) 选择File->“保存”保存applet.
e) 选择File->Run测试applet.
3. 改变Chart Bean的属性
a) 选择ChartBean，然后选择chartTitle域，改变值为”Sales”.
b) 选择name域，改变值为“SalesChart”
4. 创建一个方法来用applet参数设置chart数据
a) 从Composer的菜单条里选择Window->Java菜单
b) 从Java窗口的工具条上单击New Method图标。
c) 用Explorer,打开文件x:\JKToys Workshop\labs\Ex3-Studio-DB\initparam.txt,选择文件里的所有Java代码，Edit->Copy它。
d) 把Java窗口里的内容更换为从文件里拷贝来的java代码。代码看上去应该是这样的：
public Object initParms(EventObject anEvent){
int rows=
Integer.valueOf(getParameter(“NumberOfRows”)).intValue();
SalesChart.setChartTitle(getParameter(“Title”));
SalesChart.getChartLabels().removeAllElements();
SalesChart.getChartData().removeAllElements();
for (int i=1;i<=rows;i++){
SalesChart.getLabels().addElement(getParameter(“Label”+i));
SalesChart.getChartData().addElement(
Integer.valueOf(getParameter(“Value”+i)));
}
return null;
}
e) 用Java窗口的“保存”图标保存方法。
5. 从applet的started事件调用initParams方法：
a) 在Composer窗口选择applet.
b) 从Details窗口的connection页，从When列选择started。
c) 从Bean列选择Applet1 bean
d) 从Do列选择initParms方法
6. 用hard coded data测试bean
a) 选择Applet1,Details窗口，然后是Properties页。如果Details窗口还没有打开，你可以选择window->Details打开
b) 在Properties页,选择applet parameters，在值列按...按钮加名字－值对。
c) 把以下的名字－值对加进去，按“确定”按钮
Label1 Q1
Label2 Q2
Label3 Q3
Label4 Q4
Value1 138
Value2 133
Value3 102
Value4 122
NumberOfRows 4
Title Sales Targets
d) 从文件菜单选择“保存”选项(File->“保存”)保存applet的改变和hard-coded parameters
e) 选择File->Run测试applet
Lab4：创建JSP页面来执行JKToys数据库上的雇员搜寻
在这个练习里你将用Studio SQL和Data Access wizard来允许内部网用户执行雇员搜寻。这个宏从雇员服务页面/intranet/jkemp链接出来。读者应该熟悉基本SQL，HTML和浏览器来检查结果。按照这个练习，你将能用IBM WebSphere Studio来查询雇员数据。在你开始以前，请
1． 如果你的机器没有联网，设置你的浏览器的代理设置为直接连接。
2． 确信WebSphere Studio CLASSPATH正确设置来访问DB2驱动器和Studio里的类。设置运行时CLASSPATH：
a) 从Windows NT Control 面板l,(Start->Settings->Control 面板l),双击System图标打开它
b) 从显示的窗口里选择Enviroment页
c) 在User Variable部分，选择CLASSPATH variable
d) 确信c:\sqllib\java\db2jaba.zip;在Value域，c:是\sqllib所在的驱动器。如果没有，在末尾加上它
e) 按SET按钮应用你的改变
f) 关闭窗口
3． 把db2jaba.zip jar文件放在WebSphere Application Servers’ ClassPath.
a) 从Start Menu,选择Programs->Ibm WebSphere->Application Server v1.0->Administration启动WebSphere Application Server Administration页面。
b) 用admin用户ID和admin口令登录
c) 按Manage按钮到administer servlets
d) 当弹出窗口显示，选择Setup按钮和Basic选项。
e) 选择Basic页,在java ClassPath文字域，增加下面的内容到行的最后：
c:\sqllib\java\db2java.zip;
c是\sqllib安装的驱动器
4． 在这个练习里，当在Netscape里打开页面，确信你显式地用浏览器的Shift-Reload重新载入页面.这将保证你得到最新版本的页面。
第一部分：用SQL向导创建SQL查询
SQL Query是一个有.sql扩展名的文件，将被Studio Wizard用创建一个Database Servlet。所有SQL规定都放在SQL Wizard创建的.sql文件里。
1． 如果还没有启动WebSphere的话，启动WebSphere。
2． 创建一个新的项目叫做JKToysEmployees
a)从菜单条选择File->New project...。在General页，规定项目的名字为JKToysEmployees.单击OK。看图1
3． 用SQL Wizard创建一个对Sample Database里的Project Table的查询
a) 从Tools菜单选择SQL Wizard启动SQL Wizard
b) 通过向导的tabbed windows,规定下表的信息：
|
Tabbed Window
|
Action Explanation
|
|
Welcome
|
1.输入JKToysEmp作为SQL查询的名字向导会增加.sql扩展名 |
|
Logon
|
2.输入向导需要的连接数据库的信息。例如： Database name:jdbc:db2:SSDEMO01 Userid:USERID Password:PASSWORD Driver:IBM DB2 UDB Local 3.按Connect,向导把你连接到规定的数据库 注意：Userid和Password的大小写很重要――都应该是大写 |
|
Table
|
4.在Statement type单击Select 5.选择USERID.JKPDF表 这个练习会对JKPDF表使用SELECT语句 |
|
Join
|
没有动作 |
|
Columns
|
6.从表的下拉列表里选择USERID.JKPDF,选择下列列： |
|
Condition 1
|
8.从表的列表里选择表JKPDF 9.从列域里选择LNAME列 10.从opetator域里选择”start with the character(s)” 11.在值的第一个域里单击，按Parameter按钮 12.在Create New Parameter Dialog输入”Lastname”,按“确定” 13.按Find on another column按钮另一个情况――Condition 2 “Lastname”变成生成的SQL语句的一部分，最后会被从网页上来的一个值填入。这将使数据的结果集合按照输入的lastname减少 |
|
Condition2
|
14.从表的列表里选择JKPDF表 15.选择”Find more rows(OR)”单选按钮 16.从列域里选择DEPT列 17.从operator域里面选择”is exactly equal to” 18.在值的第一个入口域里单击，按Parameter按钮 19.在Create New Parameter Dialog里输入”Department”，按“确定” “Department”在变成生成的SQL语句的一部分，最后会被一个从网页里来的值填入。这会使得数据的结果集合根据输入的department number减少 |
|
Sort
|
20.从Columns box选择LNAME和FNAME 21.按Add>>按钮 被选中的列用来对取得的数据排序。在你把类Columns to sort on以后，你可以用Move Up和Move Down按钮改变它们的顺序。 |
|
SQL
|
22.按Next，不要作任何动作 |
|
Finish
|
23. 按 Finish 这个完成的 SQL 文件会作为 JKToysEmp.sql 在项目里出现 |
从WebSphere Studio File菜单里选择File->“保存” Project，保存项目
第二部分：建立Database Servlets
1. 用Studio Wizard创建一个database Servlet
a) 从WebSphere Studio主窗口选择JKToysEmployees项目
b) 从Tools菜单里选择Studio Wizard图标来Studio Wizard
c) 从Welcome页选择Database servlet，按Next
d) 通过wizard的tabbed window，规定下表的信息：
|
Tabbed Window
|
Action Expalnation
|
|
Welcome
|
1.在Name域输入JKToysHR这个值被用来作为Database Servlet文件的名字。Wizard将增加正确的文件扩展名 2.保持Java包的名字不变 3.输入一个说明“Show Employee Data” 4.让Output Folder的值保持不变 |
|
SQL
语句
|
5.按Select from an active project 6.从列表里选择JKToysEmp.sql文件 Wizard使用规定的文件里的SQL语句来从数据库请求数据 |
|
Input Page
|
7.按Yes please 单选按钮 8.选择Lastname和Departname作为你想能从网页规定输入值的域 一个input form将为这些域创建 |
|
Input Layout
|
9.输入一个Page Title为”Employee Search”为了调用数据库查询，需要一个提交按钮。重命名Reset按钮为Clear.Clear按钮将清除表格的域 |
|
Output Page
|
10.按Next,不要作任何事情 接受缺省设置将使得SQL语句里得来的所有列出现在生成的HTML页面里。 |
|
Output Layout
|
11.输入一个Page Heading为”Employee Information Query Results” 12.对别的选项接受缺省值 |
|
Custon Error Page
|
13.单击Next，不规定任何值。 |
|
Finish
|
14.单击Finish. Database Wizard将生成和编译文件 |
从WebSphere Studio File菜单选择File->“保存” Project来选择项目。
第三部分：发表生成的servlet
1. 在发表以前，生成的servlet需要改变为指向你将发表你的HTML页面的位置。
a) 在WebSphere Studio,双击JKToysEmployees\classes\JKToysEmployees\JKToysHRServlet.Servlet，在NetObjects ScriptBuilder 里打开它。
b) 找到文字<default-page>,改变跟着的行为<uri>/employee/JKToysHROutputPage.jsp</uri>
2. 发表JKToysEmployee项目
a) 选择JKToysEmployee项目，从菜单条的File菜单里单击Publish选项(File->Publish).
b) publishing server为local,按Server边上的Edit按钮
c) 在出现的对话框里，确信Local 单选按钮被选中，html的Path为c:\www\intranet\HTML\Employee，类的Path为c:\WebSphere\AppServer\classes. Employee目录也许不在你的机器上。你可以在剩下的路径里键入Employee目录名字。按“确定”按钮。
d) 在Select Publishing Server对话框，按Continue按钮，使得wizard生成文件到磁盘。如果你被要求创建Employee目录，选择Yes来创建它。
e) 在Publish to Local对话框，按Publish按钮。
第四部分：测试生成的JSP
1． 测试JSP
a) 运行c:\JKToysWorkshop目录里的go-intat.bat来启动Lotus Domino Go，运行内部网站点。
b) 在Netscape的Location区域输入以下的东西，在内部网主页上打开Netscape:
http://127.0.0.1:8080/
c) 选择Employee Service图标，去雇员服务页面。
d) 接着，选择Employee Lookup,注意你将看不到生成的页面，因为到你刚才发表的新的HTML页面的链接还没有建立。
2． 链接到调用你刚才创建的JSP的新的HTML页面
a) 选择Start->Programs->NetObjects ScriptBuilder->NetObjects ScriptBuilder 3.0，打开NetObjects ScriptBuilder
b) 选择File->“打开”来打开页面c:\www\intranet\html\intranet\jkemp.aspl
c) 找到文字Employee Lookup，改变为
<p><a href=”/employee/JKToysHRInputPage.aspl”>Employee Lookup</a> is now available.<br>
d) 选择File->“保存”保存文件，File->Close关闭。关闭NetObjects ScriptBuilder.
3． 关闭和重启Webserver和Netscape。向上面一样测试。你应该看到Employee Lo