Professional ASP.NET 3.5 in C# and Visual Basic Part 91 pps

First, because there is no way that a single chapter can begin to cover the entire breadth of HTML and CSS, if you are looking for an in-depth discussion of these topics, you can check o

Trang 1

<form id="form1" runat="server">

<div>

<asp:WebPartManager ID="WebPartManager1" runat="server">

<StaticConnections>

<asp:WebPartConnection ID="WebPartConnection1"

ConsumerID="ModifyableCalendar1"

ConsumerConnectionPointID="CalendarTitleConsumer"

ProviderID="TextBoxChanger1"

ProviderConnectionPointID="TextBoxStringProvider">

</asp:WebPartConnection>

</StaticConnections>

</asp:WebPartManager>

<table cellpadding="3">

<tr valign="top">

<td style="width: 100px">

<asp:WebPartZone ID="WebPartZone1" runat="server">

<ZoneTemplate>

<connectionControls:TextBoxChanger

ID="TextBoxChanger1"

runat="server" Title="Provider Web Part" />

</ZoneTemplate>

</asp:WebPartZone>

</td>

<td style="width: 100px">

<asp:WebPartZone ID="WebPartZone2" runat="server">

<ZoneTemplate>

<connectionControls:ModifyableCalendar

ID="ModifyableCalendar1" runat="server"

Title="Consumer Web Part" />

</ZoneTemplate>

</asp:WebPartZone>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

This ASP.NET page that utilizes Web Parts contains a single two-cell table Each cell in the table contains

a single WebPartZone control —WebPartZone1andWebPartZone2

Before connecting the Web Parts, the new custom Web Part controls are registered in the ASP.NET page using the@Registerpage directive This directive simply points to the namespace

Wrox.Connection-Management This is the namespace used by the interface and the two custom Web Part controls

Each of the custom Web Parts is placed within its own WebPartZone control The two Web Part controls are tied together using the WebPartManager control

Trang 2

Chapter 17: Portal Frameworks and Web Parts

The WebPartManager server control nests the defined connection inside of the<StaticConnections>

section of the declaration The definition is actually accomplished using the WebPartConnection server

control This control takes four important attributes required in order to make the necessary connections

The first set of two attributes deals with definitions of the consumer settings Of these, theConsumerID

attribute references the name of the control on the ASP.NET page (through its ID attribute) and the

ConsumerConnectionPointIDreferences the ID of the object working as the connection point for the

consumer Looking back, you find this is theRetrieveTitle()method shown in the following code

snippet:

<ConnectionConsumer("Calendar Title Consumer", "CalendarTitleConsumer")> _

Public Sub RetrieveTitle(ByVal Provider As IStringForCalendar)

_myProvider = Provider

End Sub

The second set of attributes required by the WebPartConnection deals with the provider Web Part The

first attribute of this set is theProviderIDattribute that makes reference to the name of the control on the

ASP.NET page, which is considered the provider The second attribute,ProviderConnectionPointID

is quite similar to theConsumerConnectionPointIDattribute, but theProviderConnectionPointID

attribute references the ID of the object working as the provider in the connection process

<ConnectionProvider("Provider for String From TextBox", "TextBoxStringProvider")> _

Public Function TextBoxStringProvider() As IStringForCalendar

Return Me

End Function

Running this page gives you the results illustrated in Figure 17-25

If you type any text string in the text box in the provider Web Part on the page and click the button

within this control, the Calendar control uses thisStringvalue as its value for theCaptionproperty

This is demonstrated in Figure 17-26

As you can see from this example, you take a lot of steps to take to make this happen, but the steps aren’t

too difficult In this example, a simpleStringobject was passed from one Web Part to another You

could, however, use the exact same process to pass more complex objects (even custom objects) or larger

items such aDataSetobject

Understanding the Difficulties in Dealing with Master Pages

When Connecting Web Parts

You should note one final consideration about dealing with connecting Web Parts on your ASP.NET

pages You might have already realized that this process gets rather difficult when you are working with

ASP.NET pages that make use of the master page capability provided by ASP.NET

858

Trang 3

Figure 17-25

Figure 17-26

You are allowed only a single WebPartManager control on an ASP.NET page Many times, when you

are working with master pages, it makes a lot of sense to put this control in the master page itself rather than in the content pages that make use of the master page If you are taking this approach, it does not

make much sense to start using WebPartConnection controls within the master page You can easily

have controls with the same ID on multiple content pages If you do so, the references made within the WebPartConnection control might not be meant for these other controls For this reason, you need to

make use of the ProxyWebPartManager control

Trang 4

Chapter 17: Portal Frameworks and Web Parts

Suppose you have a master page with a WebPartManger control In this case, the WebPartManager

control can be rather simple, as shown here:

With this WebPartManager control on your.masterpage, you ensure this single instance manages the

Web Parts contained in each and every content page making use of this particular master page

Next, if a content page making use of this master page is attempting to connect some Web Parts, you

must place a ProxyWebPartManger control on the content page itself This instance of the

ProxyWeb-PartManager is where you define the connections for the Web Parts on this particular content page This

is illustrated in the following code snippet:

<asp:ProxyWebPartManager ID="ProxyWebPartManager1" runat="server">

</asp:ProxyWebPartManager>

Summar y

This chapter introduced you to the WebPartManager, WebPartZone, and the WebPart controls Not only

do these controls allow for easy customization of the look-and-feel of either the Web Parts or the zones in

which they are located, but also the framework provided can be used to completely modify the behavior

of these items

This chapter also showed you how to create your own custom Web Part controls Creating your own

controls was always one of the benefits provided by ASP.NET, and this benefit has been taken one step

further with the capability to now create Web Part controls Web Part controls enable you to take

advan-tage of some of the more complex features that you do not get with custom ASP.NET server controls

You may find the Portal Framework to be one of the more exciting features of ASP.NET 3.5; you may like

the idea of creating completely modular and customizable Web pages End users like this feature, and it is

quite easy for developers to implement Just remember that you do not have to implement every feature

explained in this chapter; with the framework provided, however, you can choose the functionality that

you want

860

Trang 5

HTML and CSS Design

with ASP.NET

When HTML was first introduced by Tim Berners-Lee, it was intended to be a simple way for

researchers using the Internet to format and cross-link their research documents At the time, the

Web was still primarily text-based; therefore, the formatting requirements for these documents

were fairly basic HTML needed only a small handful of basic layout concepts such as a title,

paragraph, headers, and lists As the Web was opened up to the general public, graphical browsers

were introduced, and as requirements for formatting Web pages continued to expand, newer

ver-sions of HTML were introduced These newer verver-sions expanded the original capabilities of HTML

to accommodate the new, rich graphical browser environment, allowing table layouts, richer font

styling, images, and frames

While all of these improvements to HTML were helpful, HTML still proved to be inadequate for

allowing developers to create complex, highly stylized Web pages Therefore, in 1994 a new

tech-nology called Cascading Style Sheets was introduced CSS served as a complementary techtech-nology

to HTML, giving developers of Web pages the power they needed to finely control the style of their

Web pages

As the Web has matured, CSS has gained popularity as developers realized that it has significant

advantages over standard HTML styling capabilities Unlike HTML, which was originally

con-ceived as primarily a layout mechanism, CSS was concon-ceived from the beginning to provide rich

styling capabilities to Web pages The cascading nature of CSS makes it easy to apply styles with a

broad stroke to an entire application, and only where necessary override those styles CSS makes

is easy to externally define Web site style information, allowing for a clear separation of Web page

style and structure CSS also allows developers to greatly reduce the file size of a Web page, which

translates into faster page load times and reduced bandwidth consumption

While the point of this chapter is not to convince you that CSS is the best solution for styling your

Web site, it will help you understand how you can leverage these technologies in your

ASP.NET-based Web applications It will start with a brief overview of CSS and how it works with HTML,

and then move into creating Web sites in Visual Studio using HTML and CSS Finally, you look at

Trang 6

Chapter 18: HTML and CSS Design with ASP.NET

Caveats

While this chapter includes a lot of great information about HTML and CSS, and how you can use

them in conjunction with ASP.NET and Visual Studio 2008, there are several caveats you should be

aware of

First, because there is no way that a single chapter can begin to cover the entire breadth of HTML

and CSS, if you are looking for an in-depth discussion of these topics, you can check out the Wrox title

Beginning CSS: Cascading Style Sheets for Web Design, 2nd Edition, by Richard York (Wiley Publishing,

Inc., 2007)

Second, because CSS is simply a specification, it is up to each browser vendor to actually interpret and

implement that specification As is so often the case in Web development, each browser has its own quirks

in how it implements (or sometimes does not implement) different CSS features While the samples in

this chapter were tested on Internet Explorer 7, you should make sure to thoroughly test your Web sites

in multiple browsers on multiple platforms in order to ensure that your CSS is rendering appropriately

in each browser you are targeting

Finally, the DOCTYPE you use in your Web pages can influence how the browser applies the CSS styles

includes in your Web page You should understand how different DOCTYPES influence the browser’s

rendering process in your Web page

HTML and CSS Over view

From the beginning of the Web, continuing to today, HTML serves as the primary mechanism for

defin-ing the content blocks of your Web page, and is the easiest way to define the layout of your Web page

HTML includes a variety of layout tags you can use, including Table, List, and Grouping elements You

can combine these elements to create highly complex layouts in your Web page Figure 18-1 illustrates a

single Web page that defines a basic layout using a variety of HTML elements

While this layout is interesting, it lacks all but the most basic styling To solve this problem, many

devel-opers would be tempted to start adding HTML-based formatting tags For example, if I wanted to change

the font and color of the text in the first paragraph, I might change its HTML to something like this:

In fact, in the early days of Web design tools, this is what most of them generated when the user added

styling to their Web pages, and for a while, using Font tags looks like a great solution to the problem

of styling your Web pages

Web developers and designers quickly learned, however, that using the Font tag quickly leads to a mess

of spaghetti HTML, with font tags being splattered throughout the HTML Imagine that if, in the previous

example, you not only wanted to set the control and color, but some of the work needed to be bold,

others needed to be a different color or font face, some a different font size, some underlined, and some

displayed as superscript Imagine how many font tags you would need then and how it would increase

the weight of the Web page and decrease its maintainability Using Font tags (and other style-related

tags) meant that there was no longer a clear and clean separation between the structure and content of

the Web page, but instead both were mashed together into a single complex document

862

Trang 7

Figure 18-1

Introducing CSS

The introduction of CSS to the Web development and design world brought it back to a clean and elegant solution for styling Web pages CSS meant a style could be defined in a single location for the entire

Web site, and simply referenced on the elements requiring the style Using CSS brought back the logic

separation between Web page content and the styles used to display it

Creating Style Sheets

Like HTML, CSS is an interpreted language When a Web page request is processed by a Web server,

the server’s response can include style sheets, which are simply collections of CSS instructions The style sheets can be included in the servers’ response in three different ways: through external style sheet files, internal style sheets embedded directly in the Web page, or inline styles sheets

External Style Sheets

External Style Sheets are collections of CSS styles stored outside of the Web pages that will use them —

generally files using the css extension Visual Studio makes it simple to add external style sheet files to your application by including a Style Sheet file template in the Add New Item dialog box, as shown in

Figure 18-2

Trang 8

Figure 18-2

Once the Style Sheet is created by Visual Studio, it’s easy to insert new styles Visual Studio even gives

you CSS IntelliSense when working with styles in the document, as shown in Figure 18-3

Figure 18-3

External style sheets are linked into Web pages using the HTML<link>tag A single Web page can

contain multiple style sheet references, as shown in Listing 18-1

864

Trang 9

Listing 18-1: Using external style sheets in a Web page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>CSS Inheritance Sample</title>

</head>

<body>

<div>Lorum Ipsum</div>

</form>

</body>

</html>

You can add multiplelinktags to a single Web page in order to link several different style sheets into

the page You can also use the CSSimportstatement directly in your style sheet to actually link multiple style sheets together

@import url("layout.css");

Using theimportstatement has the advantage that you can alter the style sheets linked together without having to modify every Web page in your site Instead, you can simply link each page to a master external style sheet, which in turn will use theimportstatement to link in other external style sheets Note that

older browsers may not understand this syntax and will simply ignore the command

Using external style sheets in your Web site offers several advantages First, because external style sheets are kept outside of the Web pages in your site, it is easier to add a link tag to all of your Web pages rather than trying to manage the styles directly in each page This also makes maintenance easier because,

should you decide to update the style of your Web site in the future, you have a single location in which styles are kept Finally, using external style sheets can also help the performance of your Web site by

allowing the browser to take advantage of its caching capabilities Like other files downloaded by the

browser, the style sheets will be cached on the client once they have been downloaded

Internal Style Sheets

Internal style sheets are collections of CSS styles that are stored internally in a single Web page The

styles are located inside of the HTML<style>tag, which is generally located in the<head>section of the Web page An example of internal style sheets is shown in Listing 18-2

Listing 18-2: Using internal style sheets in a Web page

Continued

Trang 10

div { font-family:Arial;

}

</style>

</head>

<body>

<div>Lorum Ipsum</div>

</form>

</body>

</html>

It is important when you create internal style sheets that when you create style blocks, you make sure to

include thetypeattribute with the style tag so the browser knows how to properly interpret the block

Additionally, as with external style sheets, Visual Studio also gives you IntelliSense support to make it

easy for you to add properties

Inline Styles

Inline styles are CSS styles that are applied directly to an individual HTML element using the element’s

Styleattribute which is available on most HTML elements An example of inline styles is shown in

Listing 18-3

Listing 18-3: Using inline styles in a Web page

</head>

<body>

<div style="font-family:Arial;">Lorum Ipsum</div>

</form>

</body>

</html>

CSS Rules

Regardless of how they are stored, once CSS styles are sent from the server to the client, the browser

is responsible for parsing the styles and applying them to the appropriate HTML elements in the Web

page If a style is stored in either an external or internal style sheet, the styles will be defined as a CSS

rule Rules are what the browser uses to determine what styling to apply, and to what HTML elements

it should

Inline styles do not need to be defined as a rule because they are automatically applied to the element they

are included with Therefore, the browser does not need to select the elements to apply it to.

866

Định dạng
Số trang	10
Dung lượng	354,94 KB