Boxing using a user control

Last post 05-03-2006 4:56 PM by MorningZ. 2 replies.

Sort Posts:

  • Boxing using a user control

    05-03-2006, 9:07 AM
    • Member
      332 point Member
    • Bow99
    • Member since 05-19-2004, 10:56 AM
    • Posts 79

    Hi there I have been using user controls quite alot recently but I have a quick question...

    I want to do some look and feel controls so that I can put a graphical box around logical bits of information. Is there a way to have a usercontrol and define the information in the header and footer. For example I have the following html code:

    <table>
    <tr><td><img src="TopLeft.gif"></td><td><img src="Top.gif"></td><td><img src="TopRight.gif"></td></tr>
    <tr><td><img src="Left.gif"></td><td>
    HERE IS WHERE THE TEXT WHICH WILL BE BOXED WILL GO
    </td><td><img src="Right.gif"></td></tr>
    <tr><td><img src="BottomLeft.gif"></td><td><img src="Bottom.gif"></td><td><img src="BottomRight.gif"></td></tr>
    </table>


    so that I can use the user control something like

    <

    uc1:Boxed id="Boxed1" runat="server" Area="">
    HERE IS WHERE THE TEXT WHICH WILL BE BOXED WILL GO
    </uc1:Boxed>

    Im sure there is a sime solution to this but scratching my head a bit here 

     

  • Re: Boxing using a user control

    05-03-2006, 12:02 PM
    • Star
      8,834 point Star
    • MorningZ
    • Member since 07-22-2002, 10:39 AM
    • Fort Lauderdale, FL
    • Posts 1,815

    A custum WebControl is a good solution for what you want to do..

    shoot me an email (my username @ my username . com) and i'll send you over some code where i do something exactly like that, except i used <div>'s instead of <table>

    "If you make it idiot proof, they'll build a better idiot"
  • Here, I was able to get my code

    05-03-2006, 4:56 PM
    • Star
      8,834 point Star
    • MorningZ
    • Member since 07-22-2002, 10:39 AM
    • Fort Lauderdale, FL
    • Posts 1,815

    So I have a class like this that inherits from WebControl

        ''' <summary>
        ''' A custom control that will spit out a Tabbed Table (really div tags)
        ''' </summary>
        ''' <remarks></remarks>
        <ParseChildren(False)> _
        Public Class MZTabbedTable
            Inherits WebControl

            Private _HeaderText As String
            Public WriteOnly Property HeaderText() As String
                Set(ByVal value As String)
                    _HeaderText = value
                End Set
            End Property

            Private _Text As String = String.Empty
            Public Property Text() As String
                Get
                    Return _Text
                End Get
                Set(ByVal value As String)
                    _Text = value
                End Set
            End Property

            Private _TabWidth As Int32 = 746
            Public WriteOnly Property TabWidth() As Int32
                Set(ByVal value As Int32)
                    _TabWidth = value
                End Set
            End Property

            Protected Overrides ReadOnly Property TagKey() As HtmlTextWriterTag
                Get
                    Return HtmlTextWriterTag.Div
                End Get
            End Property

            Protected Overrides Sub OnPreRender(ByVal e As EventArgs)
                Me.Width = Unit.Pixel(_TabWidth)
                MyBase.OnPreRender(e)
            End Sub

            ''' <summary>
            ''' Render all the rows
            ''' </summary>
            Protected Overrides Sub RenderContents(ByVal writer As HtmlTextWriter)
                'Header
                writer.AddAttribute(HtmlTextWriterAttribute.Class, "MZTblTop")
                writer.RenderBeginTag(HtmlTextWriterTag.Div)
                writer.Write("<img src=""/images/icons/arrow.gif"" alt="""" class=""imgMid"" />")
                writer.Write(_HeaderText)
                writer.RenderEndTag()

                'Content
                writer.AddAttribute(HtmlTextWriterAttribute.Class, "MZTblMiddle")
                writer.RenderBeginTag(HtmlTextWriterTag.Div)
                If String.IsNullOrEmpty(_Text) Then
                    MyBase.RenderContents(writer)
                Else
                    writer.Write(_Text)
                End If
                writer.RenderEndTag()

                'Footer
                writer.AddAttribute(HtmlTextWriterAttribute.Class, "MZTblBottom")
                writer.RenderBeginTag(HtmlTextWriterTag.Div)
                writer.Write(Draw1Px())
                writer.RenderEndTag()
            End Sub
    End Class

    Some notes about the class
    - The CSS classes added on have the graphics/styles to finish up the control.... 
    - The If String.IsNullOrEmpty in the "Content" area allow the code to read an assigned ".Text" property or will grab all the text inside the opening and closing tags for the control
    - Obviously the control defaults to a width of 746px, but it can be over ridden

    Declaring the control in the ASPX or ASCX page:
    <%@ Register Namespace="MZControls" TagPrefix="mz" %>

    Using the control just like you would any other control, on this page I am just showing a DataList:
    <mz:MZTabbedTable id="MZNewest" runat="Server">
              
    <asp:DataList ID="ListPosts" runat="Server" ShowFooter="false" ShowHeader="true"
                    CssClass
    ="FrontPagePosts" DataKeyField="TopicID" RepeatColumns="2" RepeatDirection="Vertical">
                             
    <ItemTemplate>
                                    
    <%# BuildLink(Container.DataItem) %>
                             
    </ItemTemplate>
              
    </asp:DataList>
    </
    mz:MZTabbedTable>

    In the code behind I am assigning the HeaderText property, just as well could be in the code above as well (if it was static)

    MZNewest.HeaderText =
    String.Concat(ViewState("PostsFrontPage"), " Newest Topics")

    And the resultant output (please note, this is a few-day-old version, i have since fixed the middle content's right hand border)

    Screenshot

    See? pretty easy :-)

     

    "If you make it idiot proof, they'll build a better idiot"
Page 1 of 1 (3 items)