Get Started with “Atlas” video series

Few days ago I was over at 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
“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 page that will asynchroniously call web method
  • Create a class that will asynchroniously return the result to the 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 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 page. You will also see this part of code which is used to do any declarative scripting on your page :


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 :


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


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 class that will asynchroniously return the result to the 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.


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

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