Working with ATLAS Control Toolkit - Part 1
 
Published: 09 May 2006
Unedited - Community Contributed
Abstract
In this article, Mohammad Azam demonstrates the workings of Collapsible Panel and Confirm Button functionalities included with the ATLAS Framework with the help of examples.
by Mohammad Azam
Feedback
Average Rating: 
Views (Total / Last 10 Days): 48209/ 168

Introduction

The ATLAS Control Toolkit came out with many new controls that can help developers quickly create highly interactive applications in less time.  In this article I will introduce you to some of the new controls of the Atlas Control Toolkit.

Downloading ATLAS Control Toolkit

The first step is to download and install the ATLAS framework.  You can use the following link to download the ATLAS Framework.  The download link for the ATLAS April CTP also contains the Control Toolkit.  Once you have downloaded the ATLAS Framework, simply click on the setup file which in turn will pop open a wizard.  Follow the wizard steps which will lead you to installation.

Setting Up the ATLAS Control Toolkit

The next step is to set up the ATLAS Control Toolkit.  First you will need to make an ATLAS web application.  This can be done by simply creating a website of type ATLAS using your Visual Studio 2005 and by choosing the ATLAS website from the project templates page.  For more details on getting started, see A First Look into Atlas.  After creating the ATLAS website project, you will need to add references to the ATLAS libraries.  Right click on your Toolbox in the design view and select "Choose Items."  A window will open which will allow you to add the libraries.  Now add a reference to the following libraries.

Microsoft.AtlasControlExtender.dll

AtlasControlToolkit.dll

Once you have added a reference to the libraries, you will see that all the new ATLAS controls are added to your toolbox and the above libraries are added to your bin folder.

Configuration in Web.config

The last configuration that you need is in the web.config file.  Simply add the following lines of code in the Configuration section of the web.config.

Listing 1 – ATLAS Configuration

<configSections>
  <sectionGroup name="microsoft.web"
type="Microsoft.Web.Configuration.MicrosoftWebSectionGroup">
  <section name="converters"
type="Microsoft.Web.Configuration.ConvertersSection"
requirePermission="false"/>
  <section name="webServices"
type="Microsoft.Web.Configuration.WebServicesSection"
requirePermission="false"/>
  <section name="authenticationService"
type="Microsoft.Web.Configuration.AuthenticationServiceSection"
requirePermission="false"/>
  <section name="profileService"
type="Microsoft.Web.Configuration.ProfileServiceSection"
requirePermission="false"/>
  </sectionGroup>
</configSections>

Also add the following configuration inside the <system.web> tags in web.config file.

<pages>
<controls>
<add namespace="Microsoft.Web.UI"assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
<addnamespace="Microsoft.Web.UI.Controls" assembly="Microsoft.Web.Atlas"tagPrefix="atlas"/>
</controls>
</pages>

Now you are ready to use the ATLAS control toolkit.

Collapsible Panel

The Collapsible Panel control allows you to show and hide the contents of the page.  In the demo below I will create a GridView inside the Collapsible Panel which will appear and disappear based on the user’s selection.

Registering ATLAS Script

The first thing that you need to do is register the ATLAS script using the ScriptManager control.  This can be done by a single line of code, as shown below.

Listing 2 – Registering ATLAS with the ScriptManager Control

<atlas:ScriptManager ID="MyScriptManager"runat="server" />

After registering the ATLAS scripts, the next task is to create and populate the GridView control.

Populating the GridView Control

There are several ways to populate the GridView control.

Listing 3 – Populating the GridView Control

private void BindData()
{
  SqlConnection myConnection = newSqlConnection(ConnectionString);
  SqlDataAdapter ad = new SqlDataAdapter("SELECT* FROM Categories",myConnection);
  DataSet ds = new DataSet();
  ad.Fill(ds);
  MyGridView.DataSource = ds;
  MyGridView.DataBind();
}

Below is the HTML code generated for the GridView.

Listing 4 – HTML Generated by the GridView control

<asp:GridView ID="MyGridView"runat="server" CellPadding="4"ForeColor="#333333" GridLines="None" >
  <FooterStyle BackColor="#990000"Font-Bold="True" ForeColor="White" />
  <RowStyle BackColor="#FFFBD6"ForeColor="#333333" />
  <SelectedRowStyleBackColor="#FFCC66" Font-Bold="True"ForeColor="Navy" />
  <PagerStyle BackColor="#FFCC66"ForeColor="#333333" HorizontalAlign="Center" />
  <HeaderStyle BackColor="#990000"Font-Bold="True" ForeColor="White" />
  <AlternatingRowStyleBackColor="White" />
</asp:GridView>

At this point the GridView is populated with data and now we are ready to use the Collapsible Panel control.  Before you start using the Collapsible Panel you must understand how it works.

How Collapsible Panel Works?

The Collapsible Panel consists of two panel controls, the outer panel and the inner panel.  The outer panel contains buttons which will make the inner panel visible and invisible.  The inner panel contains the data or the control which displays the data (which in this case is the GridView control).

Creating the Outer Panel Control

Let us first make the outer panel control which will contain the inner panel and then make a button to trigger the visible and invisible task.

Listing 5 – Outer Panel Control

<asp:Panel ID="panelCategories"runat="server">
<asp:LinkButton ID="linkButton1"runat="server" ForeColor="#804000">
<asp:Label ID="Label1"runat="server">Show Details..</asp:Label>
</asp:LinkButton>
<asp:Panel ID="collapsedPanel"Height="0" runat="server">
[This area will contain the data or the controlwhich displays the data]
</asp:Panel>
</asp:Panel>

Analysis

In the code above I have created the outer panel, "panelCategories," which contains a LinkButton control and the Label control.  The panelCategories also contains another panel, collapsedPanel. The inner panel, collapsedPanel, is used to display the data.  Let us add the GridView to the inner panel.

Adding GridView to the Inner Panel

Listing 6 – Inner Panel Control with GridView

<asp:Panel ID="panelCategories"runat="server">
<asp:LinkButton ID="linkButton1"runat="server">
<asp:Label ID="Label1"runat="server">Show Details..</asp:Label>
</asp:LinkButton>
<asp:Panel ID="collapsedPanel"Height="0" runat="server">
<asp:GridView ID="MyGridView"runat="server" CellPadding="4"ForeColor="#333333" GridLines="None" >
<FooterStyle BackColor="#990000"Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#FFFBD6"ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66"Font-Bold="True" ForeColor="Navy" />
<PagerStyle BackColor="#FFCC66"ForeColor="#333333" HorizontalAlign="Center" />
<HeaderStyle BackColor="#990000"Font-Bold="True" ForeColor="White" />
<AlternatingRowStyleBackColor="White" />
</asp:GridView>
</asp:Panel>
</asp:Panel>

Analysis

In the code above I have added the GridView control inside the inner panel.

Adding the CollapsiblePanelExtender Control

The final item that you need to add is the CollapsiblePanelExtender Control.  This control is responsible for showing and hiding the data in the panels.  To add this, drag and drop the CollapsiblePanel control from the toolbox onto the designer and set the following properties.

Listing 7 – Adding CollapsiblePanelExtender Control

<cc1:CollapsiblePanelExtenderID="cPanel" runat="server">
<cc1:CollapsiblePanelProperties SuppressPostBack="true" CollapsedText="Show Details.."
ExpandControlID="linkButton1"CollapseControlID="linkButton1"
ExpandDirection="Vertical"Collapsed="true"
CollapsedSize="0"AutoExpand="false" ExpandedText="Hide Details.."
TargetControlID="collapsedPanel"TextLabelID="Label1"/>
</cc1:CollapsiblePanelExtender>

Analysis

Let us take a look at some of the properties that we have set.

ExpandControlID: The ID of the control which will expand the panel.

CollapseControlID: The ID of the control which will collapse the panel.  If CollapseControlID is the same as the ExpandControlID then the panel will automatically toggle its state on each click.

ExpandDirection: The direction in which the panel will expand.

ExpandedText: The text to be shown when the panel is expanded.

TargetControlID: The ID of the panel which will be collapsed.

TextLabelID: The ID of the Label where the ExpandedText and CollapsedText messages are displayed.

SurpressPostBack: When set to true, the postback happens on the client side.

When all the necessary properties are set, we are ready to run the application.

Run the Application

First open the webpage in the browser.  Initially you will see the message “Show Details…” printed on the screen, as shown below.

Figure 1

When you click on the "Show Details…" link the inner panel is shown.  Please check out the screen shot below:

 

Figure 2

Also note that the message "Show Details..." automatically changes to "Hide Details…"  The CollapsiblePanel control can work with any type of control which displays data.  You can even use DIV elements inside the inner panel to display the information. 

Confirm Button Control

Let us take a look at the Confirm Button control which is much simpler then the Collapsible Panel.  The purpose of the Confirm Button control is to give the user a confirmation message after they click the button.  The message contains two choices, "OK" or "Cancel."  If the user selects "OK," then the operation is completed. If "Cancel" is selected then the operation is aborted.

Creating a Simple Button Control

Our first task is to create a very simple button control.

Listing 8 – HTML of the Button Control

<asp:Button ID="Button1"runat="server" Text="Press Me!"OnClick="Button1_Click" />

Now add the ConfirmButtonExtender control from the toolbox.

Listing 9 – ConfirmButtonExtender Control

<cc1:ConfirmButtonExtenderID="ConfirmButtonExtender1" runat="server">
<cc1:ConfirmButtonPropertiesConfirmText="Are you sure?" TargetControlID="Button1" />
</cc1:ConfirmButtonExtender>

Analysis

TargetControlID: The ID of the button control from which will pop the confirmation box.

ConfirmText: The text shown to the user when they click the button.

Figure 3

Downloads

Conclusion

The ATLAS Control Toolkit contains more cool controls that enhance the user experience.  In the next part of this series I will explore other controls of the ATLAS Framework.



User Comments

Title: rrr   
Name: r
Date: 2012-05-30 9:48:58 AM
Comment:
rr
Title: atlas   
Name: ashwin
Date: 2008-05-13 2:50:56 AM
Comment:
excellent information on atlas control
Title: dragpanel   
Name: antonio
Date: 2008-02-25 2:01:13 PM
Comment:
i dont know write in English. but i will try.

i have a problem with dragpanel.
first. i have a proyect, that have windows or panel, that made with ajax. and its can not move. y i wanne move. and i dont know how i do it?.
Title: i need to maintain the state of collapsed or expanded state on post back   
Name: Praveen
Date: 2007-09-24 7:18:58 AM
Comment:
Plz let me know how to maintain the state of the collpsible panel extender on postbacks so that it could be user friendly. One way is through web service n other is to store client state but im not getting with both
Title: Nice one..   
Name: Ruja Vaidya
Date: 2006-11-20 5:54:41 AM
Comment:
Hi..
Gr88 job..
Thanx


Ruja
Title: hi azam...nicely explained   
Name: Naga
Date: 2006-09-25 8:18:08 AM
Comment:
Nicely explained the concept.
gr8 job..
Title: sample code   
Name: Salman
Date: 2006-09-20 6:47:30 AM
Comment:
hello
can we create webpart like live.com or google.com/ig
we have create the webpart but their pick and drop is not easy for newbie,
Can we make it easy for user to pick and drop the webpart easily on other place
thanks
Title: RE: Thanks   
Name: AzamSharp
Date: 2006-09-02 10:10:53 PM
Comment:
Hi,

I am glad that you liked the article.
Title: Excellent   
Name: Eren Cetin
Date: 2006-09-02 5:09:52 PM
Comment:
Everything is excellent.. Thank you Mohammad.. "Allah" bless you..
Title: Thankyou for example on Collapsible panel   
Name: kishore
Date: 2006-07-31 4:35:47 PM
Comment:
one minor suggestion, when I copied the code as it is from this site it didnt worked, as there is no space between the properties.it showed Errors.
ex:-

...CollapsedSize="0"AutoExpand="false" ...

Here there is no space between "0" and AutoExpand, as I am new it took me some time to understand this error.

ThankYou
Title: good   
Name: good
Date: 2006-07-18 6:23:43 AM
Comment:
goood
Title: Collapsible Panel   
Name: kapil Sharma
Date: 2006-06-16 4:24:45 PM
Comment:
hi!
i m very thankful 2 u 4 the detailed and sample of the code.it really help me in making the project
kapil.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-04-20 6:32:39 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search