Wrox Professional Web Parts and Custom Controls with ASP.NET 2.0 phần 10 potx

tc = New System.Web.UI.WebControls.TableCell

tc.Controls.Add(lblNameLb)

tr.Cells.Add(tc)

tc = New System.Web.UI.WebControls.TableCell

tc.Controls.Add(lblName)

tr.Cells.Add(tc)

tbl.Rows.Add(tr)

In C#:

System.Web.UI.WebControls.Table tbl = new System.Web.UI.WebControls.Table();

System.Web.UI.WebControls.TableCell tc;

System.Web.UI.WebControls.TableRow tr;

tr = new System.Web.UI.WebControls.TableRow();

tc = new System.Web.UI.WebControls.TableCell();

tc.Controls.Add(lblNameLb);

tr.Cells.Add(tc);

tc = new System.Web.UI.WebControls.TableCell();

tc.Controls.Add(lblName);

tr.Cells.Add(tc);

tbl.Rows.Add(tr);

The final step is to add the Table (rather than the individual controls) to the Control’s collection of the

custom control as this Visual Basic 2005 code does:

Me.Controls.Add(tbl)

In C#:

this.Controls.Add(tbl)

The result is shown in Figure 12-8.

Figure 12-8

398

Chapter 12

19_57860x ch12.qxd 10/4/05 9:28 PM Page 398

Rather than repeat this code over and over, a smarter approach is to write a routine that, when passed

two labels and the table, adds the labels to the Table in a new row. The Visual Basic version of that rou￾tine looks like this:

Private Function AddToTable(ByVal Table As System.Web.UI.WebControls.Table, _

ByVal Label As System.Web.UI.WebControls.Label, _

ByVal Data As System.Web.UI.WebControls.Label) As WebControls.Table

Dim tc As System.Web.UI.WebControls.TableCell

Dim tr As System.Web.UI.WebControls.TableRow

tr = New System.Web.UI.WebControls.TableRow

tc = New System.Web.UI.WebControls.TableCell

tc.Controls.Add(Label)

tr.Cells.Add(tc)

tc = New System.Web.UI.WebControls.TableCell

tc.Controls.Add(Data)

tr.Cells.Add(tc)

Table.Rows.Add(tr)

Return Table

End Function

In C#:

private WebControls.Table AddToTable(System.Web.UI.WebControls.Table Table,

System.Web.UI.WebControls.Label Label,

System.Web.UI.WebControls.Label Data)

{

System.Web.UI.WebControls.TableCell tc;

System.Web.UI.WebControls.TableRow tr;

tr = new System.Web.UI.WebControls.TableRow();

tc = new System.Web.UI.WebControls.TableCell();

tc.Controls.Add(Label);

tr.Cells.Add(tc);

tc = new System.Web.UI.WebControls.TableCell();

tc.Controls.Add(Data);

tr.Cells.Add(tc);

Table.Rows.Add(tr);

return Table;

}

The routine is called by passing the two labels that go into a row and the table that the row is to be added

to. The routine returns the updated Table object so that it can be passed to the routine for the next call

(this avoids having to declare the Table object as a module level variable).

In Visual Basic 2005:

tbl = AddToTable(tbl, lblNameLb, lblName)

tbl = AddToTable(tbl, lblEmailLb, lblEmail)

...rest of the labels...

399

A Custom Control Case Study

19_57860x ch12.qxd 10/4/05 9:28 PM Page 399

In C#:

tbl = AddToTable(tbl, lblNameLb, lblName);

tbl = AddToTable(tbl, lblEmailLb, lblEmail);

Using Absolute Positioning

A third option is to use cascading stylesheet absolute positioning. This option, while providing the

finest-grained control, is also the solution most likely to have compatibility problems among browsers

(especially, of course, with older browsers that don’t support CSS).

In this solution, the code adds three attributes to each constituent control’s Style object:

❑ absolute: Set to “position”

❑ top: Set to the distance that the constituent control is to be placed from the top of the custom

control

❑ left: Set to the distance that the constituent control is to be placed from the left-hand side of the

custom control

This Visual Basic 2005 code positions the data control for the name 5 pixels from the top of the control

and 15 pixels from the left-hand edge:

lblName.Style.Add(“position”,”absolute”)

lblName.Style.Add(“top”,”5px”)

lblName.Style.Add(“left”,”15px”)

In C#:

lblName.Style.Add(“position”, “absolute”);

lblName.Style.Add(“top”, “5px”);

lblName.Style.Add(“left”, “15px”);

At run time, your custom control is represented by a <span> tag. The positions of your constituent con￾trols will be calculated as offsets from the upper-left corner of your custom control.

Tweaking the various positions of your controls can be time-consuming. A faster method is to open a

new form, turn on absolute positioning, and then drag and drop controls onto the user control to match

the final layout of your control. You can then, in Source view, read the values generated by Visual

Studio 2005 and use those in your code.

While absolute positioning provides a solution for some of the positioning problems in a custom control,

there are some problems with using absolute positioning:

❑ Older browsers may not handle absolute positioning correctly (or at all).

❑ Controls that use absolute positioning can display oddly in WebPartZones.

❑ It can be difficult for developers to manipulate controls with absolute positioning in Visual

Studio 2005 display controls at design time.

400

Chapter 12

19_57860x ch12.qxd 10/4/05 9:28 PM Page 400

There aren’t solutions to the first two problems (other than to use the previous two mechanisms for posi￾tioning constituent controls). However, the third problem does have a solution.

At design time, with absolute positioning, your control is represented as a tiny square in the upper-left

corner of the control, with the constituent controls spread out below that “anchor” square. Figure 12-9

shows the CustomerInformation control, using absolute positioning. Developers can find it difficult to

figure out where to click so that they can drag the control on the page.

Figure 12-9

If you do decide to use absolute positioning, to make life easier for developers using your control you

should consider creating a panel and adding all of your constituent controls to the panel (after setting

the constituent control’s positioning settings). You need to make sure that you size the panel so that it is

large enough to hold all of the controls. After the panel has had the constituent controls added to it, you

add the panel to the custom control’s Controls collection.

This Visual Basic 2005 code creates a panel, adds the first two labels to it, sets the panel’s size, and adds

the panel to custom control’s Controls collection:

Dim pnl As New System.Web.UI.WebControls.Panel

pnl.Controls.Add(lblNameLb)

pnl.Controls.Add(lblName)

...add the rest of the labels to the panel...

pnl.Height = 150

pnl.Width = 320

Me.Controls.Add(pnl)

In C#:

System.Web.UI.WebControls.Panel pnl = new System.Web.UI.WebControls.Panel();

pnl.Controls.Add(lblNameLb);

pnl.Controls.Add(lblName);

...add the rest of the labels to the panel...

pnl.Height = 150;

pnl.Width = 320;

this.Controls.Add(pnl);

401

A Custom Control Case Study

19_57860x ch12.qxd 10/4/05 9:28 PM Page 401

The result, at design time, is shown in Figure 12-10. While there is no change to the display in the browser

(unless you override the Panel control’s default style settings), at design time the control appears with a

border around it. Developers can now click the border to drag your control on the page.

Figure 12-10

As with the table-based solution, it makes sense to create a routine that handles positioning the con￾stituent controls. This Visual Basic 2005 routine accepts a number that specifies which line the control

appears on and the two labels to be positioned on the line. The code calculates the vertical setting for the

control by multiplying the line number by a fixed amount and then sets the positioning properties on

the controls passed to the routine:

Private Sub AddPositioning(ByVal LineNumber As Integer, _

ByVal Label As System.Web.UI.WebControls.Label, _

ByVal Data As System.Web.UI.WebControls.Label)

Dim intVerticalOffset As Integer

intVerticalOffset = LineNumber * 25

Label.Style.Add(“position”, “absolute”)

Label.Style.Add(“top”, intVerticalOffset.ToString & “px”)

Label.Style.Add(“left”, “0px”)

Data.Style.Add(“position”, “absolute”)

Data.Style.Add(“top”, intVerticalOffset.ToString & “px”)

Data.Style.Add(“left”, “70px”)

End Sub

In C#:

private void AddPositioning(int LineNumber,

System.Web.UI.WebControls.Label Label,

System.Web.UI.WebControls.Label Data)

402

Chapter 12

19_57860x ch12.qxd 10/4/05 9:28 PM Page 402