2435109.pdf

7/28/2019 2435109.pdf

1/16

Contents

Overview 1

Developing Web Parts Using

FrontPage 2003 2

Demonstration: Creating a SharePoint

Site with FrontPage 2003 3

Using FrontPage Data View 5

Demonstration: Creating and Configuring

a Data Source from a Web Service 6

Demonstration: Inserting and Configuring

1a Data View Web Part 8

Packaging and Re-Deploying a Site 11

Discussion: Developing Web Parts with

FrontPage 2003 12

Course Evaluation 14

Unit 9: Developing Web Parts UsingFrontPage 2003

7/28/2019 2435109.pdf

2/16

Information in this document, including URL and other Internet Web site references, is subject to

change without notice. Unless otherwise noted, the example companies, organizations, products,

domain names, e-mail addresses, logos, people, places, and events depicted herein are fictitious,

and no association with any real company, organization, product, domain name, e-mail address,

logo, person, place or event is intended or should be inferred. Complying with all applicable

copyright laws is the responsibility of the user. Without limiting the rights under copyright, no

part of this document may be reproduced, stored in or introduced into a retrieval system, or

transmitted in any form or by any means (electronic, mechanical, photocopying, recording, or

otherwise), or for any purpose, without the express written permission of Microsoft Corporation.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual

property rights covering subject matter in this document. Except as expressly provided in any

written license agreement from Microsoft, the furnishing of this document does not give you any

license to these patents, trademarks, copyrights, or other intellectual property.

2004 Microsoft Corporation. All rights reserved.

Microsoft, MS-DOS, Windows, Windows NT, Windows Server, C#, FrontPage, SharePoint,

Visual Basic, Visual Studio, and Windows Mediaare either registered trademarks or trademarks of

Microsoft Corporation in the United States and/or other countries.

The names of actual companies and products mentioned herein may be the trademarks of their

respective owners.

7/28/2019 2435109.pdf

3/16

Unit 9: Developing Web Parts Using FrontPage 2003 1

Overview

*****************************ILLEGAL FOR NON-TRAINER USE******************************

Microsoft FrontPage enables you to modify and present live data from a range of sources to build

rich, interactive, data-driven, Web sites.

ObjectivesAfter completing this unit, you will know how to:

Develop Web Parts using FrontPage.

Create a SharePoint

Site with FrontPage. Use FrontPage Data View.

Create and configure a data source from a Web Service.

Insert and configure a Data View Web Part.

Package and re-deploy a site.

Understand the issues around developing Web Parts with FrontPage.

7/28/2019 2435109.pdf

4/16

2 Unit 9: Developing Web Parts Using FrontPage 2003

Developing Web Parts Using FrontPage 2003


With Microsoft Windows SharePoint Services and Windows Server 2003 connected toFrontPage, you can modify and present live data from a range of sources, including XML, to build

rich interactive data-driven Web sites. Users can post to the Web using just their browsers, whilechoosing from a broad range of publishing options.

By using FrontPage in concert with Microsoft Windows SharePoint Services, you will be able to:

Allow users to post to your Web site using just their browsers. Users can create Web logs, issue-

tracking lists, and news and reviews sites.

Insert data views and configure data sourcesincluding XML varieties, Windows SharePoint

Services data, Web services, and OLE Database (OLEDB) data sources.

Handle XML data and authoring and XSLT formatting directly in the FrontPage Design view to

create XML data-driven Web sites.

Show or hide items or reformats based on data values or position in the data view by using

Dynamic conditional formatting.

Build Web Parts Pages by creating Web Parts Zones and inserting and connecting to Web Parts in

other products, including Microsoft SharePoint Portal Server, Windows SharePoint Services, and

FrontPage.

7/28/2019 2435109.pdf

5/16


Demonstration: Creating a SharePoint Site withFrontPage 2003


FrontPage provides rich new support for designing SharePoint sites and Web Part Pages. You canfollow the steps outlined below to create a SharePoint site and a page that performs a keyword

search for books by calling the Module 9 Web service.

When developing Web Parts in FrontPage, you will either open the site that contains the Web Part

Pages you wish to modify, or you can create a SharePoint site specifically designed for your needsas you create and modify your Web Parts.

In this demonstration, you will see how to create a new SharePoint site using FrontPage, how to add

Web Part zones and then Web Parts to the Web Part Page. Finally, you will see how to modify theproperties of the Web Parts; modifying the Web Part properties enables them to be customized in

the desired manner later in this unit.

In this demonstration, your instructor will create a new SharePoint site in which to develop theModule 9 Web Parts.

To Create a Windows SharePoint Services site with FrontPage 2003

1. Log the Paris virtual computer on to PARIS (this computer) with a user name of

NWTRADERS\Administrator and a password ofP@ssw0rd.

2. Open FrontPage 2003.

3. On the File menu, clickNew. In the New task in the New Web site section, clickSharePointteam site.

4. In the Web Site Templates dialog box, type http://paris/Module9 for the location of the new

site and clickOK. When prompted enter the Administrator credentials.

5. Double-click the default.aspx page.

7/28/2019 2435109.pdf

6/16


6. On the Data menu, then clickInsert Web Part Zone. Click the Click to insert a Web Partlink. From the Web Parts task pane, with Northwind Traders Gallery selected, drag a Form

Web Part into the Zone 1 Web Part zone. Notice that the Form Web Part contains a text box

and a button.

Note You are not required to use Web Part zones when inserting Web Parts in

FrontPage. You can add Web Parts directly to pages, if you prefer.

7. Right-click the Form Web Part and clickWeb Part Properties. In the Form Web Part dialogbox, expand the Appearance node and edit the Title to read, Enter CustomerID. ClickOK.

8. Click the text box in the Form Web Part. The tag corresponding to the text box is

highlighted at the top of the design window. Click the drop-down arrow next to the highlighted tag and clickTag Properties.

9. In the Text Box Properties dialog box, edit the Name from T1 to CustomerID. Leave the

Initial value field blank. Enter5 in the Width in characters field, and clickOK.

10. On the File menu, clickSave.

7/28/2019 2435109.pdf

7/16


Using FrontPage Data View


Creating a hand-coded custom Web Part is not the only way to consume an XML Web service froma Web Part page. One easy alternative is to make use of the Data View Web Part, which you can

configure in FrontPage without writing any code. The Data View Web Part provides a generic shellfor retrieving and displaying data. You can also use the generic Form Web Part to supply parameter

data to a Data View Web Part.

You can customize Data Views to create custom displays of your data in format by using theFormatting toolbar. You can also perform more advanced customizations by using the Data View

Details task pane. The formatting toolbar and the Data View task pane enable you to perform thefollowing customizations to your Web Parts:

Style Choose a formatting style from a gallery of pre-designed list view styles. You can also add a

toolbar for site visitors to perform custom filtering on the list.

Filter Specify criteria to display a subset of the data in the Data View.

Sort & group Display items in a particular order and optionally group them on a Web page

beneath collapsible headings.

Conditional Format Set conditions for the data in your Data View.

Note Windows SharePoint Services provides the component-based platform

required for FrontPage data-driven functionality.

7/28/2019 2435109.pdf

8/16


Demonstration: Creating and Configuring a Data Sourcefrom a Web Service


To add a Data View Web Part to your page, you must first create a Data Source, which retrievesdata from a SharePoint list, a document library, an XML file, a Web service, or by running server-

side script. In this demonstration, your instructor will show you how to create the data source.

To Create a Data Source to retrieve data from a Web service

1. Verify that the Default.aspx page you created in the previous demonstration is open.

2. Click the Data menu, and then clickInsert Data View to display the Data Source Catalog

task pane.

3. Click the XML Web Services node, and then click the Add to Catalog link that appears.

4. In the Data Source Properties dialog box, type the following URL and clickConnect Now:

http://paris:8080/connectable.asmx?WSDL

FrontPage retrieves the specified Web Services Description Language (WSDL) file from the

Connectable Web Service and displays the service's parameters.

7/28/2019 2435109.pdf

9/16


5. Once connected, click the OKbutton. In the Data Source Catalog under the XML Web Services

node, you will now have an entry called Connectable on paris:8080.

Note If you call a Web service from behind a proxy server, you mustadd an entry to the

Web.config file found in the following path:

Local_drive:\Program Files\Common Files\Microsoft Shared\Web Server

Extensions\60\Config\.

Use the following syntax to specify the address and port of your proxy server:


7/28/2019 2435109.pdf

10/16


Demonstration: Inserting and Configuring a Data ViewWeb Part


The Data View pane provides a graphical UI for creating XSLT to customize the display of XMLdata. You can use property settings to control which data is displayed and how it is formatted on the

page. Now that you created your data source, you will insert the Customers Web Part that displaysthe data.

To insert data into the Customers Web Part

1. In the Data Source Catalog task pane, point to the Connectable on paris: 8080 item and clickthe drop-down arrow to view the menu, then clickShow Data. The display changes to show the

Data View Details task pane, which includes a tree view of the XML data returned by the Webservice.

Caution If you see an error message rather than a tree view in the Data ViewDetails task pane after clicking Show Data, this probably indicates that the

Connectable Web service timed out. Wait a few seconds and try again.

2. In the tree view of the XML returned by the Web service, verify that following items are

selected: CustomerID, CompanyName, ContactName, ContactTitle, and Address.

3. In the Design pane, clickZone 1 to select that Web Part zone, and in the Data View Detailspane, clickInsert Data View to insert a Data View Web Part that displays the data you

selected.

Caution When performing step 3, make sure to select Zone 1, notthe Web Part

contained in Zone 1. If you select this Web Part the Insert Data View linkwill be

disabled and you cannot continue until you deselect the Web Part and select Zone 1.


7/28/2019 2435109.pdf

11/16


To insert the OrdersCellConsumer Web Part

1. Click the Data menu, and then clickInsert Web Part Zone. Click the Click to insert a WebPart link.

2. From the Web Parts task pane, with Virtual Server Gallery selected, drag the

OrdersCellConsumer Web Part into the Zone 2 Web Part zone.

Caution You may receive an error message when performing this procedure thatstates:

A Web Part or Web Form Control on this Web Part Page cannot be displayed or

imported because it is not registered on this site as safe.

As a work-around for this error, you can perform the following steps to complete this

procedure:

1. Open Internet Explorer.

2. Type, http://paris/module9/Default.aspx in the Address Bar, and then clickGO.

3. ClickModify Shared Page.4. Point to Add Web Parts, and then clickBrowse.

5. ClickVirtual Server Gallery.

6. Drag the OrdersCellConsumer Web Part into the Zone 1 Web Part zone.

7. Close Internet Explorer.

8. In FrontPage, click the View menu, and then clickRefresh. You areprompted with a message stating that the page has changed. You are then

asked whether or not you want to revert to the saved page, clickYes.

The OrdersCellConsumer Web Part displays on the page.

7/28/2019 2435109.pdf

12/16


One final requirement is to connect the two Web Parts on the page.

To connect two Web Parts on the page

1. Right-click in the TextBox in the Enter CustomerID Web Part, then clickWeb Part

Connections.

2. In the Web Part Connections Wizard, select Provide Form Values To in the source actiondrop-down list, and then clickNext.

3. Verify the Connect to a Web Part on this page radio button is selected, and then clickNext.

4. Select OrdersCellConsumer as the Target Web Part. Select Get Customer ID from as the

Target action, and then clickNext.

5. Verify that CustomerID is the selected column in the OrdersCellConsumer, CustomerID

drop-down list, and then clickNext.

6. ClickFinish.

7. Click the Save icon to save the page design.

8. Open a browser window (by pressing the F12 key) and enter the Administrator log oncredentials in the Connect to Paris dialog box. ClickOK

9. Type a CustomerIDin the text box (e.g. ALFKI) and then clickGo. The OrdersCellConsumer

Web Part retrieves data for that CustomerID entry and formats the data.

Caution You may find that you cannot open a page containing the example Connectable WebParts in Front Page. A known bug affects Web Parts that cache objects defined within the Web

Part. This problem occurs if the Web Part is installed in the BIN directory and if Web Partcache storage is set to Database.

7/28/2019 2435109.pdf

13/16


Packaging and Re-Deploying a Site


When you are finished working with your Web Part pages in FrontPage, the final task is to deployyour pages onto SharePoint Portal Server.

If you create a new SharePoint site on a server that was notrunning as your SharePoint Portal jobserver, you will be required to package your site and re-deploy it to the server that is running asyour SharePoint Portal job server.

During the demonstrations in this unit, a new SharePoint page was created directly on theSharePoint Portal job server itself. Hence, there is no need to package or re-deploy the page as it

already resides on the host server. You need only to save and close the page.

To save your Web Part pages

On the File menu, clickSave.

7/28/2019 2435109.pdf

14/16


Discussion: Developing Web Parts with FrontPage 2003


As more data is exposed through Web services, it becomes increasingly common for developersand users for SharePoint Products and Technologies to want to work with Web Parts that retrieve

data by making SOAP.(Simple Object Access Protocol) calls over HTTP. SOAP enables a programrunning in one kind of operating system (such as Windows 2003) to communicate with a program

in the same or another kind of an operating system (such as Unix) by using Hypertext TransferProtocol (HTTP) and Extensible Markup Language (XML) as the mechanisms for informationexchange.

The Module9WS Web services demonstrated in this unit provided a good example of the power andvalue of Web services.

The Data View Web Part enables non-programmers working with Microsoft Office FrontPage to

configure Web Parts that display data retrieved from a variety of data sources, including Webservices.

Data Views also make it very easy to create customized formatting, filtering, grouping, and

sorting.

Both experienced and inexperienced programmers alike gain the opportunity to create complex

XSLT using a graphical user interface.

FrontPage also provides dialog boxes for configuring the exchange of data between Data Views

and other Web Parts.

7/28/2019 2435109.pdf

15/16


Additional Reading

For the comprehensive guide to Microsoft FrontPage 2003, please read:

Buyens, Jim. 2003.Microsoft Office FrontPage 2003 Inside Out. Microsoft

Press. ISBN: 0-7356-1510-1.

For specific information about developing Web Parts for SharePoint Portal

Server in FrontPage 2003, please refer to the following articles located in theAdditional Reading section of your the Student CD:

Overview of Web Parts Framework

Connecting Web Parts

Customizing Web Parts

Working With Web Part Pages

Working With Web Part Libraries

Building Accessible Web Sites with FrontPage 2003

Backing Up and Restoring Web Sites Created With Windows SharePoint

Services Data Solutions with FrontPage 2003:

The Database Interface Wizard and the Data View Web Part

Building XML Data-Driven Web Sites with FrontPage 2003

Using FrontPage 2003 to Design Customized Web Sites Created WithSharePoint Portal Server

Using FrontPage 2003 to Design Customized Web Sites Created WithWindows SharePoint Services

7/28/2019 2435109.pdf

16/16


Workshop Evaluation


Your evaluation of this workshop will help Microsoft understand the quality of your learningexperience.

To complete a workshop evaluation, go to http://www.CourseSurvey.com.

Microsoft will keep your evaluation strictly confidential and will use your responses to improveyour future learning experience.

THIS PAGE INTENTIONALLY LEFT BLANK

2435109.pdf

Documents