“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?”


About these ads

6 Responses to ““Hello World” in Atlas”

  1. Seree Says:

    This is a nice helpful topic. Atlas newbies should read!

  2. Alan Thompson Says:

    The code links go to a dead site with a Network Solutions placeholder page. :(

    Article is pretty much useless now.

  3. Serafino Raimondo Says:

    they only wanna do you dir. Serafino Raimondo.

  4. Useful AJAX Links | pc-aras Says:

    [...] “Hello World” in Atlas (Coding [...]

  5. Donita Says:

    I’m just visit & read your articles. thank you.

  6. SportBoy Says:

    Thanks for the info. I appreciated all these Post


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: