Weblog Home
Markdown Monster
Html Help Builder
West Wind WebSurge
Anti-Trust MusicDynamically creating TabPages with the wwWebTabControl
July 04, 2008 •
The Web Connection Web Control Framework includes a Tab control, which is essentially a tab strip control. This means that the control itself manages the display of the strip, but doesn't internally manage creation of containers that are displayed as 'pages' for the actual content.
There have been a number of questions on how to dynamically create tab pages, which is not directly supported by the control. However the process to do so is relatively straight forward if you have a basic understanding of how the Web Control Framework works using containership to hold content.
So, to dynamically create tabs and tab pages you can start with a set up like the following in HTML markup:
<body style="margin-top:0px;margin-left:0px">
<form id="form1" runat="server">
<ww:wwWebErrorDisplay runat="server" id="ErrorDisplay" />
<h1>Tab Test</h1>
<div class="containercontent">
<ww:wwWebTabControl runat="server" ID="Tabs">
</ww:wwWebTabControl>
<ww:wwWebPanel runat="server" id="TabContainer"
OverrideNamingContainer="true">
</ww:wwWebPanel>
</div>
</form>
</body>
The highlighted controls are an empty Tab Control and a Panel, which will serve as a location to add additional pages in the form of panels.
To create tabs and pages dynamically you can now use code to add tabs to the tab control and panels to the tab container in the form of Panel controls.
*****************************************************************
* OnLoad
****************************************
FUNCTION OnLoad()
FOR lnX = 1 TO 5
lcX = TRANSFORM(lnX)
*** Start by adding a new tab
this.Tabs.AddTab("Page " + lcX,"","Page" + lcX)
*** Create a panel that will hold our content
loPanel = CREATEOBJECT("wwWebPanel")
loPanel.Id = "Page" + lcX
loPanel.cssClass = "tabpage"
*** Add some content to the panel
*** Note you could also add a composite user control here
loLabel = CREATEOBJECT("wwWebLabel")
loLabel.Text = loPanel.id
*** And add the label to the Panel
loPanel.AddControl(loLabel)
*** Add our new Panel to the TabContainer
this.TabContainer.AddControl(loPanel)
ENDFOR u
ENDFUNC
* Onload
The resulting display looks like this:
The code is pretty straight forward. It basically creates a new tab for each iteration of the for loop. It also creates a new panel as well via CreateObject("wwWebPanel") and we then add some content into that panel – a label in this case which is then added to the panel via AddControl. As you probably know the Web Control Framework is based on content containers that can hold content so everything you want to add to the page somehow must be a control. A label can hold anything – usually HTML or you can use literal controls for raw HTML if you don't want to style the text. But you can also add a more complex control into the panel – for example a user control that contains page content that was pre-created in the designer and with other controls/expressions embedded, or even a custom composite server control that generates meta driven data (which is what I'm doing at the moment with a customer and what brought this up). Lots of options for generating the content into the page.
Finally, once the panel's been created the new panel needs to be added to the page by call this.TabContainer.AddControl(loPanel) which completes the addition of the panel and its content to the page. AddTab() links to this panel via its third lcClientID parameter which then manages the initial display and activation of the tab page.
While this is not as easy as say adding a new page frame in a VFP desktop form it's not difficult either. Regardless of approach you still need to add controls to containers, so adding and extra Panel isn't really any more complicated.
Check this out – it's a great way for meta driven applications to add complex content to a page, potentially even dynamically as the content is needed.