hqdev
asked on
Custom control absolute positioning
Hi,
I've build a couples of web controls and I was wondering how can we made those control behave like MS builtin controls with absolute positioning.
I think I should implement top and left properties in my controls and then render the server "style" tag, but I don't really know how to do that.
Here's the code of one of the simpliest control.
Option Explicit On
Option Strict On
Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls
Public Class ctlStatus
Inherits Control
Dim _message As String
Dim _icon As Integer
Dim _pict As String
Dim _col As String
Dim _style As String
Property Message() As String
Get
Return _message
End Get
Set(ByVal Value As String)
_message = Value
End Set
End Property
Property Icon() As Integer
Get
Return _icon
End Get
Set(ByVal Value As Integer)
_icon = Value
Select Case _icon
Case 0
_pict = "./images/stats_nothing_bi g.png"
_col = "#cdcbbc"
Case 1
_pict = "./images/stats_warning_bi g.png"
_col = "yellow"
Case 2
_pict = "./images/stats_error_big. png"
_col = "red"
Case 3
_pict = "./images/stats_critical_b ig.png"
_col = "red"
Case 4
_pict = "./images/stats_info_big.p ng"
_col = "green"
Case Else
_pict = "./images/stats_nothing_bi g.png"
_col = "#cdcbbc"
End Select
End Set
End Property
Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
writer.Write(("<span id=""Label1"" style=""Z-INDEX: 101; LEFT: 124px; POSITION: absolute; TOP: 760px"">") & vbCr)
writer.Write(("<DIV style=""Z-INDEX: 101; WIDTH: 100%; POSITION: relative;HEIGHT: 36px"" >"))
writer.Write((" <TABLE id=""Table3"" style=""BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; Z-INDEX: 101; LEFT: 0px; BORDER-LEFT: gray 1px solid; WIDTH: 100%; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; TOP: 6px"""))
writer.Write((" borderColor=""black"" height=""21"" cellSpacing=""0"" cellPadding=""0"" width=""100%"" bgColor=""" & Me._col & """"))
writer.Write((" border=""0"">"))
writer.Write((" <TR>"))
writer.Write((" <TD style=""WIDTH: 5%; FONT-FAMILY: tahoma"" align=""left""><P align=""center""><FONT style=""FONT-SIZE: 9pt; FONT-FAMILY: tahoma"" face=""Times New Roman"" size=""3""></FONT> </ P>"))
writer.Write((" </TD>"))
writer.Write((" <TD id=""status_msg"" style=""FONT-WEIGHT: bold; FONT-SIZE: 9pt; WIDTH: 95%; FONT-FAMILY: tahoma"" align=""left"">" & Me.Message & "</TD>"))
writer.Write((" </TR>"))
writer.Write((" </TABLE>"))
writer.Write((" <IMG id=""status_img"" style=""Z-INDEX: 102; LEFT: 0px; WIDTH: 51px; POSITION: absolute; TOP: 0px; HEIGHT: 31px"""))
writer.Write((" alt="""" src=""" & Me._pict & """></DIV>"))
writer.Write(("</span>"))
End Sub
End Class
Thanks
I've build a couples of web controls and I was wondering how can we made those control behave like MS builtin controls with absolute positioning.
I think I should implement top and left properties in my controls and then render the server "style" tag, but I don't really know how to do that.
Here's the code of one of the simpliest control.
Option Explicit On
Option Strict On
Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls
Public Class ctlStatus
Inherits Control
Dim _message As String
Dim _icon As Integer
Dim _pict As String
Dim _col As String
Dim _style As String
Property Message() As String
Get
Return _message
End Get
Set(ByVal Value As String)
_message = Value
End Set
End Property
Property Icon() As Integer
Get
Return _icon
End Get
Set(ByVal Value As Integer)
_icon = Value
Select Case _icon
Case 0
_pict = "./images/stats_nothing_bi
_col = "#cdcbbc"
Case 1
_pict = "./images/stats_warning_bi
_col = "yellow"
Case 2
_pict = "./images/stats_error_big.
_col = "red"
Case 3
_pict = "./images/stats_critical_b
_col = "red"
Case 4
_pict = "./images/stats_info_big.p
_col = "green"
Case Else
_pict = "./images/stats_nothing_bi
_col = "#cdcbbc"
End Select
End Set
End Property
Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)
writer.Write(("<span id=""Label1"" style=""Z-INDEX: 101; LEFT: 124px; POSITION: absolute; TOP: 760px"">") & vbCr)
writer.Write(("<DIV style=""Z-INDEX: 101; WIDTH: 100%; POSITION: relative;HEIGHT: 36px"" >"))
writer.Write((" <TABLE id=""Table3"" style=""BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; Z-INDEX: 101; LEFT: 0px; BORDER-LEFT: gray 1px solid; WIDTH: 100%; BORDER-BOTTOM: gray 1px solid; POSITION: absolute; TOP: 6px"""))
writer.Write((" borderColor=""black"" height=""21"" cellSpacing=""0"" cellPadding=""0"" width=""100%"" bgColor=""" & Me._col & """"))
writer.Write((" border=""0"">"))
writer.Write((" <TR>"))
writer.Write((" <TD style=""WIDTH: 5%; FONT-FAMILY: tahoma"" align=""left""><P align=""center""><FONT style=""FONT-SIZE: 9pt; FONT-FAMILY: tahoma"" face=""Times New Roman"" size=""3""></FONT> </
writer.Write((" </TD>"))
writer.Write((" <TD id=""status_msg"" style=""FONT-WEIGHT: bold; FONT-SIZE: 9pt; WIDTH: 95%; FONT-FAMILY: tahoma"" align=""left"">" & Me.Message & "</TD>"))
writer.Write((" </TR>"))
writer.Write((" </TABLE>"))
writer.Write((" <IMG id=""status_img"" style=""Z-INDEX: 102; LEFT: 0px; WIDTH: 51px; POSITION: absolute; TOP: 0px; HEIGHT: 31px"""))
writer.Write((" alt="""" src=""" & Me._pict & """></DIV>"))
writer.Write(("</span>"))
End Sub
End Class
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Sounds good - a much better approach (although you'll find that if you go with FlowLayout, you'll be happier in the long run - but no biggy - the big thing was getting it out of your code-behind).
Ted
Ted
Uh, my response was what the asker ended up implementing so I believe I should receive the points.
Thanks,
Ted
Thanks,
Ted
ASKER