Get Started with “Atlas” video series

Few days ago I was over at asp.net just to find out that tey started a new video series named Get Started with “Atlas”. The author of the series is Joe Stagner and apparently he will be publishing two videos per week for next few months.

I’ve watched the first two videos and they are great in explaining how to start to work with atlas, so from now on I’ll use them as a reference for how to setup an atlas project and other basic tasks.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Selecting date with Asp.Net calendar and AtlasToolkit CollapsiblePanel

The task of letting users to select date through Asp.NET calendar was always a bit tricky. First of all, the calendar control is big, so you don’t really want it to be displayed all the time (this is particularly the case when you need to select several dates). The other problem was that every time you changed month, postback would occur so if user needed to change several months that was not all that user friendly. People came up with many different solutions to this problem, some even developed a little applications that did this for you… Most of the time you needed to use Javascript as well.

Here is the Atlas solution to this problem, however it’s not by using PopUp Control, which may have come as a first option to your mind. Namely, there is a bug with it, described here on asp.net forums.

What we’ll do to make it work is use CollapsiblePanel extender. First thing you need to do is download AtlasControlToolkit if you haven’t done that so far and install it. Then you need to set up the environment and a really simple walkthrough on how to do that can be found here.

Now the real stuff. First make a textbox where you want the date to display when selected. Call it “txtDate”.

OPEN CODE IN NEW WINDOW

Right from the textbox set up the panel control. This panel control will be used as the collapsible panel where we will keep our calendar. First thing in your panel will be some kind of a status bar, which will contain the image button for expanding/collapsing the calendar and a label where we’ll display the current status of our calendar. Just under that we’ll add the asp.net calendart control. It’ll look something like this :

OPEN CODE IN NEW WINDOW

Now, all that we have done so far is nothing special really. Just a textbox, imagebutton, label, panel and a calendar. Here comes the really interesting part. Now we are going to add a CollapsiblePanelExtender, that will extend our panel „pnlTest“ into a collapsible panel. The code for it looks like this :

OPEN CODE IN NEW WINDOW

The TargetControlID property of the extender determines which panel it is that we want to make collapsible. CollapsedSize property sets the size of panel when collapsed (I’ve put 30 px there, so that our status bar is visible) and ExpandedSize sets the size of panel when expanded (in pixels). Collapsed set’s the initial state of panel, if true panel will initially be collapsed. TextLabelID is the ID of the control where we are going to display the status message. Now if you go back to the part of the code where we have created the status bar, you’ll see there is a label with ID lblCalendarMessage. Now the properties CollapsedText and ExpandedText set the text of that label, when panel is expanded or collapsed respectively. Finally we have ExpandControlID and CollapseControlID properties. So when we set ExpandControlID to “imbCalendar” that means that our panel will expand when that image button is clicked. Same goes for the CollapseControlID. Now, the really nice thing is that if you set both of these properties to the same ID, you’ll have a toggle button.

Ahh yes… final note. Don’t forget to wrap this whole code in atlas:UpdatePanel control otherwise you’ll be seeing postbacks.

YOU CAN DOWNLOAD THE WHOLE PROJECT HERE


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


The code examples to be moved to reBlogger lab

I like wordpress… it’s nice, except when you try to post some code examples. Then it sucks, tends to drive me absolutely insane and it really shakes my decesion to quit smoking.

So, hopefully by the end of this week, all the code examples will be posted over at reBlogger Lab, and this place will be a blog. Place where I will mostly ramble about different things that are even remotely tied to Atlas and reBlogger.

The code examples will still be explained and mentioner here, but I can’t be bothered to spend 2 hours negotiating with the wordpress text editor.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Pageflakes

So you want to see what you can do with atlas? You think my examples are not cool enough? Well… they aren’t to be honest.

Go to Pageflakes.

It’s definetly an interesting experiment, but I have hard time believing anyone will ever find a good use for this site. The problem with these, I don’t know how to call them,
web portals 2.0 (?!), is that they are limited. I mean, ok my mom would probably like the idea to have “internet”
(here is a definition of internet by Ted Stevens for those of you who are
not familiar with the term :)) on one page, but I can’t bother to be limited by the current number of available flakes (moduls).

Don’t get me wrong, I’m a big fan of PageFlakes… but this is more from the programer’s standpoint, not as a user.

So perhaps, aiming lower and trying to fix the annoying details with atlas would be more appropriate at this moment, rather than trying to change the way we think of internet and use it.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


“Hello World” in Atlas

Apparently, every programming language or framework in our case, is best explained by “Hello World” example. In this example, I’m going to show from the beginning to the end how to :

  • Set up Atlas Project in Visual Web Developer (it’s free)
  • Create an asp.net page that will asynchroniously call web method
  • Create a vb.net class that will asynchroniously return the result to the asp.net page

So, under the assumption you have downloaded the Visual Web Developer or have Visual Studio , next thing you should do is download the laters core Atlas files (at the moment of writing this post, this is ”Atlas” Setup – June CTP).

You can download AtlasSetup.msi from here.

 

Set up Atlas Project in Visual Web Developer

Once you’ve installed AtlasSetup (if VWD was open during the setup, make sure you restart it) click on File > New Web Site > and then select “Atlas Web Site” under My Templates.

The language should be set as Visual Basic to complete this tutorial.

Create an asp.net page that will asynchroniously (without postback) call web method (retrieve “Hello World”)

You’ll see several files and and folders already created in your project. Open the default.aspx page. Here you already have registered ScriptManager, which is a control that you need to have always on top of the page (just under the form tag) whenever you are going to use atlas in your asp.net page. You will also see this part of code which is used to do any declarative scripting on your page :

OPEN CODE IN NEW WINDOW

We will create a simple GUI, consisting only of one label and button, but keep in mind that since this is atlas, you will represent label with <span> tag and button by <input> tag (their HTML equivalents). So you will paste this in the body of your page :

OPEN CODE IN NEW WINDOW

Now, what you need to do is add the actual atlas code (declarative code in this example) that will show „Hello World“ in lblGreeting span, when „btnGreeting“ button is clicked.

This is how it looks like (you can paste this at the end of the page, after the </form> tag)  :

OPEN CODE IN NEW WINDOW

So, here you can see that we’ve only changed the part between the <components> tags. The rest looks like it looked when we first opened the page.

It is important to note that you are not working with the <input> or <span> tags that we had in our html code, but rather their atlas representations, so you need to declare every element that you with to work with. So we start with btnGreeting, we also set click event for it, which basically says when this button is clicked invoke method on HelloWorldService compontent (we’ve specified that in target attribute).

Then we declare our label (which is represented by the span tag in html and it has to have the same ID – that’s how they are tied together). We declare binding for it, as shown.

Lastly, we declare our service method that we will use to retrieve a string from our WebService file which will be created in the next step.

Create a vb.net class that will asynchroniously return the result to the asp.net page

We’ll add a new file to our project > HelloWorldWS.asmx. This file will look like following, and all it will contain is one string function (named HelloWorld) that will return „Hello World!“ when called.

OPEN CODE IN NEW WINDOW

And that is it. You can download the whole working project from reBlogger Lab.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Using Atlas:AutoCompleteExtender to simplfy browsing large lists

After people started to use our application reBlogger extensively and filled it with hundred of feeds, it become quite difficult to find a particular feed if someone requested it (for example, one blogger emailed us asking to remove his feed from reBlogger). The obvious solution for this problem whas to provide users with auto complete textbox, that will let them easily find a particular feed. Here is the screenshot of this reBlogger feature :

To achieve this, you need a classic Asp.NET text box, whose functionality you will later extend with Atlas:AutoCompleteExtender. So first the textbox :

OPEN CODE IN NEW WINDOW

There are few attributes here that you need to pay attention to. First of all it is TargetControlID, where you need to set the ID of the TextBox control that you want to extend (in our case, that is txtBlogTitle). Second attribute is the ServiceMethod, which is the name of the function that will return array of type string with suggested value (I’ll explain this function later in the post, so keep reading). Then we have ServicePath, which is nothing more than relative path for the .asmx file where GetBlogTitlesForAutoComplete function is located. Lastly, we have MinimumPrefixLength attribute. Obviously, this determines how many characters need to be entered by user so that the textbox starts suggesting results. For very large lists you may want to set this even higher (3 or 4), to increase performance, but bear in mind that it’ll be less useful at the same time.Now, that’s all we need to do in the .aspx page. Now, let’s turn to the manage_blogs.asmx file that actually returns the values to the AutoComplete textbox. I’ll write the whole function here first and then explain it.

OPEN CODE IN NEW WINDOW

The code is commented so you should have no problems understanding it. This is of course, just one way of doing it. The main thing is that you return a string array back. Also, it is important to note that you need to have the function with the signature as shown. 


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Use UpdatePanel controls to quickly ajaxify your existing Asp.NET code

When we decided that we are going to use Atlas in development of the new version of reBlogger we’ve already had 3 versions of that application after us. What we were looking for was to improve the “admin” area of application with ajax (atlas, better to say), but the idea of rewriting all that code over was quite terrifying.

Luckily, atlas:UpdatePanel control allowed us to make our application “do it’s thing” without rewriting all from the scratch.
Yes, update panel with it’s partial rendering concept is not THE BEST way performance-wise, but in most of cases if you apply it correctly it works like a charm…

So, here is a brief example of one of the functionality we were able to do without postbacks (page refreshing itself) with altas.

We had just a normal datagrid with list of blogs that reBlogger is “reading” every day. Alongside each blog there was a “Delete” button. What we wanted is that when user deletes a blog is for that blog to be deleted and datagrid refreshes without page flashing/refreshing. Same goes for paging and sorting of the datagrid. While that operation was happening, we wanted a little progress gif to display (  Loading Image  ).

So after setting up the web.config file for atlas (you can download the atlas control toolkit, it has an example web.config file which you can use to start out), we modified the .aspx page that contained that particular datagrid. Here are the steps you need to do :

1. In between head tags (we put it right under the title tag), you need to register atlas scripts. You do that by pasting following code :

<atlas:ScriptManager runat=”server” ID=”scriptManager2″ EnablePartialRendering=”true”>
</atlas:ScriptManager>

Make sure you have the EnablePartialRendering attribute set to true! 2. Next thing we’ve done is surround our datagrid with the atlas update panel tag

<atlas:UpdatePanel ID=”up_GridBlogs” runat=”server” Mode=”Conditional”>
… here goes the old data grid code …
</atlas:UpdatePanel>3. Last thing you need to do is add the atlas:UpdateProgress control. That control will display the “loading…” image when user presses “delete” button. What is really cool about this control is that it is damn smart :), namely it knows when there is asynchronous operation happening and it displays the image automatically. Then when the asynchronous operation is
over it hides it. Now, that’s the way all programming should be done 🙂<atlas:UpdateProgress ID=”prgs” runat=”server”>
<ProgressTemplate>
<img id=”add_blog_loading” src=”assets/loading.gif” mce_src=”assets/loading.gif” alt=”” />
loading data, please wait…
</ProgressTemplate>
</atlas:UpdateProgress>

Obviously, inside of the “ProgressTemplate” you’ll put any HTML that you want to be displayed while there asynchronous updating on your page.

Ok, that’s it. Now, since this just saved you 4 hours of coding today, turn off your computer and go to see a movie! 😉


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”