FxBlog


Carlo Licciardi's Blog

[EN] Simple Microsoft Volta Example using a Javascript library

[C# Sources here]

In this post  I’m going to show how to create a simple Volta application with a DragPanel-like object on the page. You can see how ASP.NET AJAX Toolkit DragPanel works here.

This is a very practical example, if you need explanations about Volta architecture and stuff like that; you better go to the Microsoft Live Labs Volta Website

First of all, you have to download and install Volta CTP, you can find it here.

 Volta works only with Visual Studio 2008 RTM or Beta2

Step 1: Create Volta application

You have to create a new project, and then select “Volta Application”.

 Step 2: Design User Interface

You have to design the user interface; you can use every HTML designer. In this case we will use Visual Studio HTML designer.

You have to modify Page.html.

Thanks to Volta, HTML interface is totally detached from the rest of the application. As we will see, the UI code will be standard HTML 4.01. with no   tags or something like that.

 This is how we want to make our application looks like.

This is the HTML code

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

  "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>VoltaApplication1title>

    <style type="text/css">

        #DraggableDiv

        {

            width: 264px;

            height: 149px;

            position: relative;

            background-color: #003399;

            color: #FFFF00;

            text-align: center;

        }

        #Handle

        {

            border-color: #000000;

            background-color: #C0C0C0;

            color: #000066;

            text-align: center;

            border-width: thin;

            border-style: solid;

        }

    style>

head>

<body>

    <div id="DraggableDiv">

        <div id="Handle">

            <b>Drag Me!b>

        div>

    div>

    <p>

        <button id="ButtonEnable">

            Enable drag

        button>

    p>

body>

html>

We have 2 “div” tags. The first is  DraggableDiv” which  is the main container, the second is ”Handle” which is the handle used to drag “DraggableDiv”.

We also have a button: "ButtonEnable" which will be used to enable dragging capabilities on “DraggableDiv”.

Step 3:Import Javascript library

Dom-Drag.js

In this example I’m going to use DOM-DRAG, made by Aaron Boodman. You can find a guide about it here. Direct link to download it is here

The file is dom-drag.js.

To activate dragging capabilities we just have to call Drag.Init javascript function. Here there is an example of how to use it:

 Drag.init(document.getElementById("Handle"),document.getElementById("DraggableDiv"));

 

 The first parameter is a reference to the Handle div, the second one is a reference to the main container.

In this example we are going to call Drag.Init from C# code instead of Javascript code, to make this possible we have to make a “wrapper” C# class.

Adding dom.drag.js and modifying AssemblyInfo.cs

You have to add dom-drag.js to your project and then you have to add this line to your AssemblyInfo.cs:

[assembly: ScriptReference("dom-drag.js")]

 

Creating C# Wrapper Class

You have to add a simple C# class to your solution and to call it DomDrag

This is the code of the class

    class DomDrag

    {

       

        [Import("Drag.init")]

        public static extern void Init(HtmlElement handle, HtmlElement container);

 

    }

With  the “import” attribute you tell the Volta rewriter  that Init method wraps “Drag.Init” Javascript function defined in dom-drag.js.

“Drag.Init” needs 2 main parameters (there are others available but in this case we are going to use just 2 of them): “handle” and  container” which are two references to our html div elements.

Step 4: Write the code behind UI

In the 4th step we are going to write the code behind “Page.html”, all this C# code will be compiled in MSIL by C# 3.0 compiler and this will be rewritten  in Javascript code by Volta recompiler.

Here is the code of VoltaPage1.cs

    public partial class VoltaPage1 : Page

    {

        Button butEnable;

        HtmlElement dragDiv;

        HtmlElement dragHandle;

 

 

        public VoltaPage1()

        {

            InitializeComponent();

        }

 

       

        partial void InitializeComponent()

        {

            /*

              Here we get the references to our

              html controls using GetById generic methods

             */

            butEnable = Document.GetById<Button>("ButtonEnable");

            dragDiv = Document.GetById<Div>("DraggableDiv");

            dragHandle = Document.GetById<Div>("Handle");

 

            //We create our Click handler

            butEnable.Click += ButtonEnable_Click;

           

        }

 

         void ButtonEnable_Click()

        {

 

            //Calls the init function

            DomDrag.Init(dragHandle, dragDiv);

            butEnable.Disabled = true;

 

        }

       

    }

Finally you have to manually copy dom-drag.js in "bin\Debug\Volta". I’m looking for a  workaround but I haven’t  found  it  yet.

Done!

Press F5 and enjoy your new Volta application.

Categoria: .NET
sabato, 22 dic 2007 Ore. 01.04
Archivio Posts
Anno 2007

Anno 2006
Statistiche
  • Views Home Page: 23.782
  • Views Posts: 16.990
  • Views Gallerie: 0
  • n° Posts: 12
  • n° Commenti: 7
Calendario
settembre 2020
lmmgvsd
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011
Mappa
Blogs Amici
Links
    Copyright © 2002-2007 - Blogs 2.0
    dotNetHell.it | Home Page Blogs
    ASP.NET 2.0 Windows 2003