To use NetJsWire in no time you just need to follow these simple steps:

*This instructions are for Visual Studio (2008-2010) or Visual Web Developer Express, the same instructions apply for both but you can use other IDEs too, like SharpDevelop.

  • Create a class library project
    First we will create a class library project, this project will hold our UI definitions, to do this we go to: File->New->Project… in Visual Studio main window.
    Give it a meaningful name, I’ll name it: UIProject (I know…).
  • Add needed references
    Once this project is created the first thing we need to do is add a reference to NJSW dll, go to Solution explorer and right click in the References node, select “Add reference…”
    Then click on the “Browse” tab, navigate to the folder where you extracted NJSW and find the “NetJsWire.dll” (in the bin/Debug folder of NetJsWire) file, click accept and repeat the operation for selecting a reference but this time click on “.NET” tab and look for “System.Windows.Forms.dll” and “System.Drawing.dll”, select both (to select both, click on one and then CTRL+click on the second), click “Add” and we’re set.
    *Note: System.Windows.Forms and System.Drawing are needed for design to work within the IDE.
  • Add NJSW widgets to the Toolbox
    In order to do this, go to Toolbox tab in VS main window, right click an empty space (if Toolbox is not visible, you can go to: View->Toolbox) and select: “Add tab”, name it “NetJsWire”, click accept, and right click on the title of your new tab "(NetJsWire), click “Select items…” a window will open, at the bottom of that window you’ll see a button named “Browse…”, click on it and locate “NetJsWire.dll” in your downloaded folder, click Accept, Accept again and we’re set.
  • Configuring the main class (this is the application entry point)
    Rename the auto-created Class1.cs (no real need to rename but it is still a good idea for clarity purposes), to do that you just need to go to Solution explorer, expand the UIProject node, right click on “Class1.cs” and select: “Change name…”, name it MainClass.cs and click yes on the dialog asking to change the class name also.
    Give the class a default parameter-less constructor, so the class definition will look like this:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    
    namespace UIProject
    {
        public class MainClass
        {
            public MainClass()
            {
                
            }
        }
    }
    Ok, with that ready now we can add a ClientDocument instance to the UI (ClientDocument represents the browser document in the server side)  in order to do that,go to Solution explorer, right click on UIProject and select: “Add->Component…”, change the name to something better, like: MainViewport.cs,  click on accept and the component will be added to UIProject, now, still in Solution explorer, right click in MainViewport.cs and click on “View code”, we need to do two things here, first add a using statement for NetJsWire.Widgets.Core and then, change the base class from “Component” to “ClientDocument” so the resulting class looks like this:
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Diagnostics;
    using System.Linq;
    using System.Text;
    using NetJsWire.Widgets.Core;
    
    namespace UIProject
    {
        public partial class MainViewport : ClientDocument
        {
            public MainViewport()
            {
                InitializeComponent();
            }
    
            public MainViewport( IContainer container )
            {
                container.Add( this );
    
                InitializeComponent();
            }
        }
    }
    Now, back to MainClass.cs, we need to let the WebApplication know that we want to use our MainViewport as the ClientDocument, this is really simple, just go to our default constructor and add this sentence: “NetJsWire.JsonRpcHandler.WebApplication.Instance.ClientDocument = new MainViewport(); “, so the result looks like this:
    public MainClass()
    {
        NetJsWire.JsonRpcHandler.WebApplication.Instance.ClientDocument = new MainViewport();
    }
    *Note: MainViewport is now a designable item, you can double click it in Solution explorer and start adding NJSW widgets to it as you would with any Winforms control.
    With that in mind, lets add a button, make sure you are in design mode designing MainViewport, now, from the Toolbox, in the NetJsWire tab, select “Button” (not “ButtonLW”, we will cover that later) and drag it on the MainViewport, with the button selected change Text property to “Click me”, now double click the button in the designer to add a “Click” handler, this will be translated to JS and the framework automatically creates a callback to our handler from JavaScript, now in our handler, we are going to simply show a MessageBox, we can do that with this sentence: NetJsWire.Widgets.Ui.MessageBox.MessageBox.Alert( "Hello world from NetJsWire" ); so our handler code will look like this:
    private void button1_Click( object sender, EventArgs e )
    {
        NetJsWire.Widgets.Ui.MessageBox.MessageBox.Alert( "Hello world from NetJsWire" );
    }
    Ok, thats enough for now with the UI.
  • Create the web application project
    Now we need to create a web project to be the backend for our UI, simple as before, go to File->Add->New project… and select: “Empty ASP.NET web application” from the list of available project templates, again give it a meaningful name, I’ll name it WebProject…
  • Adding references to WebProject
    Now we need to add references to the web project, first of all we need to add a reference to our just created UI project, to do that, go to Solution explorer, expand the web project and right click on “References”, select “Add new reference…”, click on “Projects” tab and select UIProject from the list. And now, we need to add NJSW references to the web project, in order to do that, go again to Solution explorer and expand your web project (WebProject) and right click on the references node, select “Add new reference…”, click on “Browse” tab and find the folder where you have NJSW, select “NetJsWire.dll” and click “Add” button, now repeat the steps and add a reference to “Newtonsoft.Json.dll” and “Jayrock.Json.dll” (both under “Depends” folder in your main NJSW folder. Jayrock will be eliminated from the dependecies soon but for now, it is still needed).
  • Configuring Web.config
    Now we need to setup our web.config, this is really easy, we just need to add a ConfigSection to our web.config to indicate to NetJsWire the entry point of our application, lets do it: Go to Solution explorer, Expand your WebProject and double click Web.config in order to start editing it, now your web config should end up looking like this:

    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      <configSections>
        <sectionGroup name="NetJsWireSettings">
          <section name="NetJsWire" type="NetJsWire.JsonRpcHandler.Util.SettingsHandler, NetJsWire, Version=1.0.0.0, Culture=neutral" allowLocation="true" allowDefinition="Everywhere" />
        </sectionGroup>
      </configSections>
      <system.web>
        <compilation debug="true" targetFramework="4.0" />
      </system.web>
      <location path="webapp">
        <system.web>
          <authorization>
            <allow users="*" />
          </authorization>
          <httpHandlers>
            <add path="*.ashx" verb="*" type="NetJsWire.JsonRpcHandler.Handlers.CSHandlerFactory, NetJsWire" />
          </httpHandlers>
        </system.web>
      </location>
      <NetJsWireSettings>
        <NetJsWire MainClassName="UIProject.MainClass,UIProject" Library="Ext" ImagePath="images/toolbar/" />
      </NetJsWireSettings>
    </configuration>
  • Final steps, adding Ext to WebProject
    In your download you should have received a copy of Ext with the demo WebProject, to add Ext to our just created WebProject we will add a folder to it first, to do that go to Solution explorer and right click on WebProject, select "Add->New folder..." and name it "Scripts", now open a Windows Explorer and find the folder where you unzipped downloaded NJSW, navigate to WebProject/Scripts and select all the content (this is “ExtNET.js” + Ext folder), hit CTRL+C (or right click the selection and select “Copy”) and go back to VS, now open Solution Explorer, locate the Scripts folder you just created, right click on it and select “Paste”, when the process finish you should have almost everything you need to run the web site, just one final step away.
  • Final step, create Default.aspx
    We need to add a web page to navigate to and that loads all the scripts we need, to get that working go to Solution Explorer and right click on WebProject, select “Add->New element”, chose “Web Form” from the list of templates and name it “Default.aspx”, click on “Accept” and then, still in Solution Explorer, select (maybe you need to click on the ‘+’ sign in Default.aspx) Default.aspx.cs (and optionally if it got created, Default.aspx.designer.cs) and hit “Del” or right click on one of those and select “Delete”. Now, double click in Default.aspx to start editing it, if it starts in design mode, switch to code view by selecting the corresponding tab at the bottom of the designer, now change Default.aspx code to look like this:
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>NetJsWire - Hello world sample</title>
        <link rel="stylesheet" type="text/css" href="Scripts/Ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="Scripts/Ext/ext-base-debug.js"></script>
        <script type="text/javascript" src="Scripts/Ext/ext-all-debug.js"></script>
    </head>
    <body>
        <script type="text/javascript" src="Scripts/ExtNET.js"></script>
        <script type="text/javascript" src="webapp/ExtDirectApi.ashx"></script>
    </body>
    </html>
    Now, you just need to set WebProject as the Startup project for the solution, go to Solution Explorer, right click on WebProject and select "Set as startup project", you done, now hit CTRL+F5 to test your application.
  • Adding Windows to our project
    Ok, so we have our application running but... ¡¡¡I want Windows!!!

    Adding Windows to our UIProject is not hard at all, the easiest way is to install the templates but, lets do it the hard (not so) way.
    Go to Solution explorer, right click on UIProject and select: “Add->New element…”, chose “Windows Forms” and name it “TestWindow.cs”, click on “Add”, now right click on the designer and chose “View code”, change the base class from “Form” to “NetJsWire.Widgets.Ui.Window.Window”, so your code will look like this:

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Data;
    using System.Drawing;
    using System.Linq;
    using System.Text;
    
    namespace UIProject
    {
        public partial class TestWindow : NetJsWire.Widgets.Ui.Window.Window
        {
            public TestWindow()
            {
                InitializeComponent();
            }
        }
    }
    Now we have a NJSW Window that will be represented as an Ext.Window in the client side, lets check how that works out for us:  First of all we need a way to instantiate our new Window and show it on the client, easy, lets go back to our MainViewport designer, if it is not open go to Solution Explorer, expand the UIProject node and locate MainViewport.cs, double click on it to show the designer, now in design mode, add another Button from the NetJsWire tab, change its text to: “Show window” and double click on the button to add a “Click” handler (reorder your buttons so both are visible and not overlapped), now in the click handler we gonna put our code to instantiate the Window we just created, so your final handler code will look like this:
    private void button1_Click( object sender, EventArgs e )
    {
        var win = new TestWindow();
        win.Show();
    }
    We're done, just hit CTRL+F5 and click your new button, you should see the Window that we just created. Now play with it, add Widgets from the NetJsWire tab and test how it translates all your work in a simple way to JavaScript so you don't have to write any glue code, the framework will handle passing EventHandlers and values from server to client and viceversa. Enjoy!

    Note: You can debug your application in the same way you’ll do it with any Winforms app, just hit F5 and start debugging.
  • Last edited Apr 11, 2011 at 2:12 AM by VoidMain, version 5

    Comments

    No comments yet.