ATG教程-DEV1 Chapter 3: Dynamic Pages

Chapter 3: Dynamic Pages

Catching Up

If you were unable to complete the exercises from the previous chapter

1. Complete the “Getting Started” instructions from the previous chapter

2. Copy the CONFIG.properties file from the solutions\chapter02 directory to <ATG9.1dir>\Dynamusic\config.

3. Copy the FeaturedSongs.properties file from the solutions\chapter02 directory to <ATG9.1dir>\Dynamusic\config\dynamusic\.

(I have finished all of them .so I can start with the following learning procedure)

Exercise 1: Using tag libraries in J2EE web applications

Exercise Objective

After completing this exercise, you will be able to add tag libraries in a J2EE application.

Getting Started(基本素材准备)

Now that you have learned about dynamic pages, you will no longer work with the static html pages you copied into your project in an earlier exercise. You will now work exclusively with JavaServer pages (JSPs). To save you some time in this and future exercises, several JSP starter files for the Dynamusic application have been provided for your use.

(To based on the JSP pages)

1. Copy the JSP files from <atgdir>\Training\DEV1\src\chapter03(就是传给我的DEV1 文件包，从DEV1开始，前面的路径直接忽略) to <ATG9.1dir>\Dynamusic\j2ee-apps\dynamusic-j2ee\dynamusic-web.war\.

2. Copy the JSP files from <atgdir>\Training\DEV1\src\chapter03\common to <ATG9.1dir>\Dynamusic\j2ee-apps\dynamusic-j2ee\dynamusic-web.war\common.

（已经复制完毕）

Problem Statement

Add the DSP tag library to the Dynamusic project and set the welcome page.

（I will learn to use the DSP tag library in the JSP pages）

Guided Instruction

1. Open <ATG9.1>\Dynamusic\j2ee-apps\dynamusic-j2ee\dynamusic-web.war\WEB-INF and make sure there are tld and lib files.

(Yes ,I have found these tld and lib files here)

2. Open web.xml and change <welcome-file-list> <welcome-file>home.jsp</welcome-file> </welcome-file-list>.

3. Restart ATG.

(As I have said before, every modification should let the ATG to be restarted to take effort)

Exercise 2: Creating simple dynamic pages（Using DSP）

Exercise Objective

After completing this exercise, you will be able to create basic dynamic JavaServer pages (JSPs) that display properties of Nucleus component beans.

Problem Statement

Create a personalized Dynamusic homepage that displays a custom welcome message using the Profile component.

(learn the usage of Profile component)

(Why change from ACC but not directly from the Eclipse?)

Guided Instruction

Modify home.jsp to welcome the user by name

You are now going modify your Dynamusic home page to dynamically display the name of the user in a welcome message.

1. In the ACC, select Pages and Components > J2EE Pages.

(So here we can refer to all the pages in all the modules ,we can update some of them as we like,then it is more convenient for us to change them compared with change them from the eclipse)

2. Double click Dynamusic: j2ee-apps/dynamusic-j2ee.(our application)

(Dynamusic 是项目名， dynamusic-j2ee是模块名)

（有问题啊，这些jsp文件时位于 dynamusic-web子模块的，为什么在这里直接显示在dynamusic-j2ee模块里面而无法导向到子模块呢）

3. Edit home.jsp.

4. Declare the DSP tag library at the top of the page, using the taglib directive. (This line must appear first in the JSP.)

<%@ taglib uri="/dspTaglib" prefix="dsp" %>

(It will activate the function of DSP)

5. Enclose the entire page within <dsp:page> … </dsp:page> tags.

6. Select the welcome message (“Welcome Arthur”) and use the insert value button to replace the static message with the user’s name using a <dsp:valueof> tag. Select the All Components tab (make sure view By Path option is selected), navigate to atg\userprofiling, and select the Profile component. Under Component Properties, select the First name property. Hit OK.

(So ,this show as how to designate a dynamic value instead of a static value ,the value of it can be refered by the desired component’s attribute.We just make a link of it ,then we can figure out the <dsp:valueof> tag)

7. Save your page .

Alternately, you could use the Available Page Values window to import the atg\userprofiling\Profile bean, and then use the Imported Beans menu of the insert value wizard to select the First name property of the Profile component.

(To be continued tomorrow)

8. To test your work, in the ACC select People and Organizations > Users. Click on the List button and select a user.

9. Click on the preview icon. Select a document root of Dynamusic.com and the home.jsp document. Click OK. (You will only have to select the document root the first time you select a document; subsequent times, your most recently chosen document root will be displayed. You can click the Show All Document Roots button to select a new document, or choose from recently used document roots.)

10. Verify your customized welcome message is displayed.

Exercise 3: Using servlet beans in dynamic pages

Exercise Objective

After completing this exercise, you will be able use servlet beans in dynamic JavaServer pages (JSPs).

Problem Statement

Modify the Dynamusic home page to display the custom welcome message only if the user is logged in. In addition, display a dynamic list of featured songs.

Guided Instruction

When displaying the welcome message it’s a good idea to add an additional check to first make sure that the user is logged in. One way to accomplish this is to use a Switch servlet bean to check the Profile object’s transient property. The transient property will be true if the user is NOT logged in. You will learn more about this property in an upcoming chapter.

11. Edit home.jsp. Use the insert servlet bean button to insert a Switch servlet bean where the welcome greeting is displayed. Select the Servlet Beans category to find the Switch component.

You can also use the By Path view to select the droplet instead, by navigating to /atg/dynamo/droplet/Switch.

12. Switch on Profile.transient. If true, indicating that the user has not logged in yet, display a generic greeting. If false, display the user’s name using a <dsp:valueof> tag.

13. Test your page from the ACC by choosing a profile via Users and previewing home.jsp. Also test that the page works if there’s no user logged in by bringing up a new browser and viewing the page directly, without selecting a user in the ACC (http://localhost:8080/dynamusic/home.jsp).

Dynamically display multi-valued component properties

You are now going to replace the static “Featured Song” values on your home page to use the dynamic values you created in a previous exercise. Since the songs property of the FeaturedSongs component is multi-valued, you will need to use a ForEach servlet bean to loop through the array and display each song.

14. Edit home.jsp and import the FeaturedSongs bean (component). Using the insert servlet bean wizard, replace the static list of featured songs, just under the welcome greeting, with a ForEach servlet bean. Loop over FeaturedSongs.songs, displaying each song in a formatted list.

15. Preview the home.jsp page again to test your work.

You can also test your work by loading the Dynamusic home page from your browser. If you modify and save a JSP, you can simply reload it from you browser to test your changes.

16. Use the ACC to modify the array of songs in FeaturedSongs. Save your changes and preview the page again. Your new song titles should now be displayed.

Exercise 4: Using page fragments as building blocks

Exercise Objective

After completing this exercise, you will be able include a page fragment within a JSP, passing a parameter value to the fragment, and using that parameter within the fragment.

Problem Statement

Change the Dynamusic home page to use a common sidebar menu and page header. Pass the page header fragment the name of the page.

Guided Instruction

Use page fragments to display a common sidebar menu and page header

You will now add a standard sidebar to your site which will provide quick navigation links to the major Dynamusic functional pages. You will also add a standard header to the top of your home page. As this header will be used by multiple pages in your site, you will want to dynamically display the name of the current page (Home Page, Profile Page, etc.) by passing in a parameter from the parent page.

1. Edit common/sidebar.jsp and change all the page links to point to the JSP (vs. HTML) version of each page. Declare the DSP tag library and enclose the page in a dsp:page tag.

2. Modify home.jsp to include sidebar.jsp in place of the individual html page links.

3. Browse to http://localhost:8080/dynamusic to test the page.

4. Modify common/header.jsp, replacing the static “Home” string with a dsp:valueof tag displaying the value of a parameter called pagename. Make sure you declare the DSP tag library and enclose the page in a dsp:page tag.

5. In home.jsp, use the insert document button to add a <dsp:include> tag to include the common/header.jsp page.

6. Add a dsp:param tag to the dsp:include tag inserted in the previous step. The param tag should pass a parameter called pagename to the header page with a value set to the name of the page currently being displayed, such as “Home Page”.

7. Reload the Dynamusic home page and verify your changes.