Alan Le

Atlas: Using the DragOverlayExtender with the ASP.NET Profile Service

My last two posts on Atlas has been well received. I plan to continue writing quick demos as I explore more about the Atlas Framework.

Today, I've been looking into the DragOverlayExtender to see how it works with the ASP.NET Profile Service. I've came up with the following example in my exploration. The demo is a simple draggable puzzle that will remember the puzzle piece location so that you can go back to it at a later time. In this post, I will share how I built it using ATLAS and the DragOverlayExtender.

You can check out the demo in the link below. It should work in both IE and Firefox. I'm still learning about Atlas, so if you have any suggestions, pointers or corrections, please feel free to add comments to my post.

Demo: http://atlas.vertigosoftware.com/atlasdragoverlay/dragoverlayextender.aspx
Source: http://blogs.vertigosoftware.com/files/alan/atlasdragoverlay.zip

Screenshot:

In order for the the Atlas Framework to retrieve and modify the profile properties I need to first enable the profile service in web.config. To find more information about working with Profiles in Atlas, please see the Using the "Atlas" Profile service documentation.

Since I did not add a ProfileProvider, the default SQL Express provider will be used. The corresponding ASPNETDB database, which contains the tables for aspnet_profile and other ASPNET services, will automatically be created and added to the App_Data folder when I build and run the app. If you want to use a different Profile Provider, you can check out this msdn reference article: http://msdn2.microsoft.com/en-us/library/ms164644.aspx.

I did not plan to add membership and login so I enabled anonymous identification. Now ASPNET will save the profiles even for anonymous/unathenticated users that visit my demo site.

Then, I add the profile properties for the drag location for each of the puzzle pieces.

Finally, I associate the accessors for the profile properties with the profile service.

<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>

...

<microsoft.web>
  <anonymousIdentification enabled="true"/>
  <profile>
    <properties>
      <add name="DragLocation1" allowAnonymous="true" type="String"   />
      <add name="DragLocation2" allowAnonymous="true" type="String"   />
      <add name="DragLocation3" allowAnonymous="true" type="String"   />
      <add name="DragLocation4" allowAnonymous="true" type="String"   />
      <add name="DragLocation5" allowAnonymous="true" type="String"   />
      <add name="DragLocation6" allowAnonymous="true" type="String"   />
      <add name="DragLocation7" allowAnonymous="true" type="String"   />
      <add name="DragLocation8" allowAnonymous="true" type="String"   />
      <add name="DragLocation9" allowAnonymous="true" type="String"   />
      <add name="DragLocation10" allowAnonymous="true" type="String"   />
      <add name="DragLocation11" allowAnonymous="true" type="String"   />
      <add name="DragLocation12" allowAnonymous="true" type="String"   />
    </properties>
  </profile>

...

<profileService enabled="true"
                setProperties="DragLocation1;DragLocation2;DragLocation3;DragLocation4;DragLocation5;DragLocation6;DragLocation7;DragLocation8;DragLocation9;DragLocation10;DragLocation11;DragLocation12"
                getProperties="DragLocation1;DragLocation2;DragLocation3;DragLocation4;DragLocation5;DragLocation6;DragLocation7;DragLocation8;DragLocation9;DragLocation10;DragLocation11;DragLocation12" />

For the puzzle pieces, I took a picture taken at Vertigo, chopped it into 12 equal chunks, and placed them on the page with the standard <img> tags. The images need to be set runat="server" so that I can reference the images in the dragoverlayProperties for the TargetControlID property.

<img src="images/213z.png" runat="server" id="Img1" alt="puzzle piece" />
<img src="images/3243.png" runat="server" id="Img2" alt="puzzle piece" />
<img src="images/879h.png" runat="server" id="Img3" alt="puzzle piece" />
<img src="images/asdf.png" runat="server" id="Img4" alt="puzzle piece" />
<img src="images/berx.png" runat="server" id="Img5" alt="puzzle piece" />
<img src="images/d4dq.png" runat="server" id="Img6" alt="puzzle piece" />
<img src="images/g3xb.png" runat="server" id="Img7" alt="puzzle piece" />
<img src="images/hhjy.png" runat="server" id="Img8" alt="puzzle piece" />
<img src="images/nyui.png" runat="server" id="Img9" alt="puzzle piece" />
<img src="images/yuij.png" runat="server" id="Img10" alt="puzzle piece" />
<img src="images/zxc5.png" runat="server" id="Img11" alt="puzzle piece" />
<img src="images/zxcv.png" runat="server" id="Img12" alt="puzzle piece" />

To expose the ASP.NET Profile Service that I've enabled in web.config to the web client, I added the Atlas ProfileScriptService. AutoSave is set to true which will automatically save the drag location is changed.

<atlas:ProfileScriptService ID="profile" runat="server" AutoSave="true">
</atlas:ProfileScriptService>
<atlas:DragOverlayExtender ID="DragOverlayExtender1" runat="server">
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img1" ProfileProperty="DragLocation1" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img2" ProfileProperty="DragLocation2" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img3" ProfileProperty="DragLocation3" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img4" ProfileProperty="DragLocation4" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img5" ProfileProperty="DragLocation5" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img6" ProfileProperty="DragLocation6" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img7" ProfileProperty="DragLocation7" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img8" ProfileProperty="DragLocation8" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img9" ProfileProperty="DragLocation9" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img10" ProfileProperty="DragLocation10" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img11" ProfileProperty="DragLocation11" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img12" ProfileProperty="DragLocation12" />
</atlas:DragOverlayExtender>

Javascript
I wrote a javascript scramble function to make it easy to scramble the puzzle pieces. It uses a helper randomize function to distribute the puzzle pieces. Since I named my image controls as Img1, Img2, etc... I can easily just iterate through the pieces and set the x and y positions. The function call is set on the onclick even of my scramble button.

    <script language="javascript" type="text/javascript">
    function scramble() {
        var totalPieces = 12;
        var pieczeSize = 125;
        for (i=1; i<=totalPieces; i++) {
            x = randomize(document.documentElement.clientHeight - pieczeSize);
            y = randomize(document.documentElement.clientWidth - pieczeSize);

            img = $('Img'+ i);
            img.style.top = x + 'px';
            img.style.left = y + 'px';
        }
    }

    function randomize(max) {
        rnd = Math.random();
        return rnd * max;
    }
    </script>

The styles are not really necessary for this demo. I only included it for the guide box to place the puzzle pieces in.

<style type="text/css">
#puzzlebox
{
height: 331px;
width:500px;
border: solid 1px #000;
padding: 1px;
text-align: center;
position: absolute;
left: 100px;
top: 100px;
color: gray;
}
</style>

• The puzzle pieces will return to their original positions if they are dragged outside of the browser body area.
• After being scrambled, the puzzle pieces will returned to their saved profile locations if the page is refreshed.

Atlas: Creating Better Looking Checkboxes with the ToggleButtonExtender

With the ToggleButtonExtender from the Atlas Control Toolkit, you can easily create nice looking checkboxes. The ToggleButtonExtender styles ASP.NET Checkbox controls with images. In this post, I'll show you how easy it is to create the following styled checkboxes.

You can see it in action here:

You can try it here:
http://atlas.vertigosoftware.com/AtlasToggleButton/ToggleButton.aspx

ASPX Code
The aspx code contains four ASP.NET Checkboxes and the ToggleButtonExtender. The ToggleButtonExtender contains three properties to configure the image replacement for the three corresponding checkboxes.

<atlas:ScriptManager ID="ScriptManager1" runat="server" />
<div class="togglebutton">
    <asp:CheckBox ID="CheckBox1" runat="server" Text="Default ASP.NET Checkbox" /><br /><br />
    <asp:CheckBox ID="CheckBox2" runat="server" Text="Improved Checkbox with the ToggleButtonExtender" /><br />
    <asp:CheckBox ID="CheckBox3" runat="server" Checked="true" Text="Can extend multiple checkboxes" /><br />
    <asp:CheckBox ID="CheckBox4" runat="server" Text="Any icon can be used" />
</div>
<atlastoolkit:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server">
    <atlastoolkit:ToggleButtonProperties TargetControlID="CheckBox2" CheckedImageUrl="images/checked.png"
        UncheckedImageUrl="images/unchecked.png" ImageHeight="16" ImageWidth="16" />
    <atlastoolkit:ToggleButtonProperties TargetControlID="CheckBox3" CheckedImageUrl="images/checked.png"
        UncheckedImageUrl="images/unchecked.png" ImageHeight="16" ImageWidth="16" />
    <atlastoolkit:ToggleButtonProperties TargetControlID="CheckBox4" CheckedImageUrl="images/ToggleButton_Checked.gif"
        UncheckedImageUrl="images/ToggleButton_Unchecked.gif" ImageHeight="19" ImageWidth="19" />
</atlastoolkit:ToggleButtonExtender>

Design Time Support
One of the neat things about the extender model is that Visual Studio will recognize that there is a checkbox extender on the page and will expose the ToggleButtonextender's properties to any of the ASP.NET Checkboxes.

ASPX Code-Behind
There is no code-behind as no logic is necessary on the server.

Styles
Here is the corresponding styles for my toggle butons, mostly to control spacing.

<style type="text/css">
body {
font:normal 10pt/13pt Arial, Verdana, Helvetica, sans-serif;
color:#666;
margin:20px;
}
.togglebutton {
padding-top:13px;
}
.togglebutton label {
padding-left:8px;
}
</style>

Source Code

You can download the source to this demo at:

Source: http://blogs.vertigosoftware.com/files/alan/atlastogglebutton.zip

Two new Atlas "How Do I" Videos

Joe Stagner, a member of the Microsoft Product Team, has published two videos about Atlas in the "How do I" video series . In the first video, Joe goes through downloading and the installation of the Atlas framework, Visual Studio Developer edition, and a quick demo of Atlas with the Update Panel for partial updates. In the second video, Joe downloads and sets up the Atlas Control Toolkit framework in Visual Studio. He highlights the ConfirmButtonExtender and the TextboxWatermark control with a quick code demo.

These new "How Do I" videos are good videos to get your feet wet with Atlas. He will be publish two new videos every week. You can find them at:
http://www.asp.net/learn/videos/default.aspx?tabid=63

Don't forget to check out the other "How Do I" videos on ASP.NET 2.0 from Vertigo's very own Scott Stanfield. These videos are on the same site.

Atlas: Creating a Confirmation Using the ModalPopup Extender

I've been looking into Atlas Framework recently, specifically around the idea of how to apply it to future projects. Today I want to show how to use the Modal Popup Extender found in the Atlas Control Toolkit to create a modal confirmation box.

Although, there is a ConfirmButton Extender that uses the built-in javascript confirm function, I find this type of confirmation really limiting. There is no way to customize the look and feel of the popup. The popup window size is constrained which limits the text you can write in your message. You can only have "Okay" and "Cancel" text for the buttons, when in most cases the action requested is of a "Yes\NO' type.

For my confirmation, I want the following features:

• Has to be modal
• Fully customizable with css
• Has to have "Yes" and "No" buttons
• Postback if the user clicks "Yes"
• No postback if the user clicks "No"
• Provide feedback to the user of the action taken.

ASPX Code
The code on the ModalConfirm.aspx page is fairly straightforward. I have a Panel control which will be my popup box. It contains the popup text, the Yes button, and the No button. I'm using the ModalPopupProperties on the ModalPopupExtender to configure the confirmation box. The Delete button will trigger the confirmation and the Yes/No buttons will dismiss it. When the user clicks "Yes", a javascript function called onYes will be called, and likewise when the user clicks "No".

Notice the settings for the various class attributes. This provides the flexibility to use css to style the confirmation box. Also notice the Style="display: none" attribute to hide the confirmation until the user clicks on the delete button.

<asp:Panel ID="ConfirmtionPanel" runat="server" CssClass="modalPopup" Style="display: none">
    <div class="modalPopup-text">
        Are you sure you want to delete this item?<br />
        <br />
        <asp:Button ID="YesButton" runat="server" Text="Yes" OnClick="YesButton_Click" />&nbsp;&nbsp;
        <asp:Button ID="NoButton" runat="server" Text="No" />
    </div>
</asp:Panel>
<atlastoolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server">
    <atlastoolkit:ModalPopupProperties TargetControlID="DeleteButton" PopupControlID="ConfirmtionPanel"
        OkControlID="YesButton" OnOkScript="onYes()" CancelControlID="NoButton" OnCancelScript="onNo()"
        BackgroundCssClass="modalBackground" />
</atlastoolkit:ModalPopupExtender>

ASPX Code-Behind
In the code-behind, I need to expose the asp.net client-side __doPostBack function in the Page_Load event so that I can programmatically call it from javascript later using Atlas client scripting. I also have the event handler for my YesButton_Click event which will perform the deletion by calling a middle tier object to delete the item. As a last step, I inform the user that the deletion has been performed.

    protected void Page_Load(object sender, EventArgs e)
    {
        // Expose the __doPostBack function to programmatically call it from javascript
        Page.ClientScript.GetPostBackEventReference(this, String.Empty);
    }

    protected void YesButton_Click(object sender, EventArgs e)
    {
        // Code to delete the item goes here...

        Label1.Text = "Item deleted";
    }

Javascript
I have a script block in my header. The block has the two functions that has been mentioned earlier. The onYes function creates a PostBackAction object with the target control set to the YesButton. The performAction method will call __doPostBack. The onNo function simply sets the label text.

<script type="text/javascript">
    function onYes() {
        var postBack = new Sys.WebForms.PostBackAction();
            postBack.set_target('YesButton');
            postBack.set_eventArgument('');
            
            postBack.performAction();
    }
    
    function onNo() {
        //no postback necessary
        $('Label1').innerText = 'Action canceled';
    }
</script>

Modal Confirmation Styles
Here is the corresponding styles for my confirmation box.

<style type="text/css">
body {
font:normal 10pt/13pt Arial, Verdana, Helvetica, sans-serif;
color:#666;
margin:20px;
}
    
/*Modal Popup*/
.modalBackground {
background-color:#000;
filter:alpha(opacity=80);
opacity:0.8;
}
.modalPopup img {
border:solid 5px #fff;
}
.modalPopup-text {
display:block;
color:#000;
background-color:#fff;
text-align:center;
border:solid 2px #000;
padding:10px;
}
.modalPopup-text input {
width:75px;
}    
.feedback
{
color: #00cc00;
font-weight: 700;
}
</style>

End Result

You can try it here:
http://atlas.vertigosoftware.com/atlasmodalconfirm/modalconfirm.aspx

Source Code

I have created a zip file with the source code to this sample. In order to run this sample, you will need:

• Atlas June CTP
• Atlas Control Toolkit

Source: http://blogs.vertigosoftware.com/files/alan/atlasmodalconfirm.zip

Microsoft.com preview site

http://preview.microsoft.com/en/us/default.aspx

It looks like Microsoft is using parts of the Atlas framework to replace the navigation menu with a site guide.  The guide collapses, expands, and opens an inline div layer with links and image preview to the other sites on the Microsoft.com network.  The rotating arrow icon as you collapse and expand is a cool detail.  

While I think the redesign and addition of Atlas are a nice touch overall, it looks like there is much more work for this preview site.  It only works on IE at the moment and will redirect you to a 404 page in Firefox.   The transitions seem sluggish.  

Microsoft.com Preview


Current Microsoft.com