Using Notepad++ to write C# code

Notepad++ is a free source code editor that runs on the Windows operating system. It has become the standard text editor on most developer’s machines and it has replaced the lowly Notepad tool that comes with any Windows OS.

Notepad++ is not only my favourite text editor but it is my favourite tool for development after the Visual Studio IDE.

Features

It is very versatile in looking at all types of files and it has many programming language syntax highlighters built in. It also supports many plugins that can make tedious tasks very simple. Some of my favourites are Compare (for file comparisons), NppFTP (for moving and editing files on different systems) and JSON Viewer (for formatting JSON).

Although I have explored many files with the program I have never tried to write a complete Hello World in C# with it before. This article will explore some of the neat things that you can do with Notepad++ and how we can leverage the tool to write a simple program. We will then compile it using the C# compiler that is available on the Visual Studio Developer Command Prompt.

With Notepad++ you get some of the same features you would with the Visual Studio IDE including:

  • Support for C# keywords including color coding
  • Collapsing of methods and regions to make examining code much easier
  • Auto completion (similar to IntelliSense) for C# keywords and .NET namespaces

To enable syntax highlighting for your Hello World project make sure you set the language to C#.

C# Language

Auto Completion

To enable auto complete while coding in any language within Notepad++ press the CTRL + Space bar keys to see the list. You can then arrow up and down within the list to see your options. From there you can hit Enter to insert your selection into the document.

Notepad++ auto completion

Developers can also modify and extend the auto completion options available to them by editing the XML file associated with the language they are working in. You can find this file in the Notepad++ install directory on your computer. Normally this would be the default location of C:\Program Files (x86)\Notepad++\plugins\APIs\

Below you can see what the C# file (cs.xml) looks like when it is opened.

C# Auto Complete XML

As you can see from the list both of the new .NET 4.5 keywords for Async and Await are not available to the user. You could simply add them here to start working with the newest functionality of .NET within Notepad++.

Compilation

Let’s now return to our Hello World program that we are writing. Notice I have added a second Using statement to the class file below to allow me to raise a message box as well as print the results out to the console. To compile this file you must save it as a *.cs file. You will see I named mine HelloWorld.cs.

Hello World Completed Code

Now open up the Visual Studio Developer Command Prompt and cd into the directory where your saved file is located.

For this next part we will use the command line C# Compiler to make our code executable. The C# Compiler allows us to understand how C# compiles our code and it gives us a deeper understanding of the .NET Framework. While I would not use it for huge projects it is nice to know I can create a C# project without the Visual Studio IDE.

From the command prompt you can run the csc –help command to see the full list of options available to the developer. For general purposes though you will only need a few items:

  • /out allows you to set the file name of the assembly to be created. If not specified then the output is the same as the initial *.cs file name
  • /target:exe allows you to set the default assembly output to an executable. This is the default and it can be removed for this type of application
  • /target:library allows you to set the assembly output to a *.dll
  • /target:winexe prevents the console application from appearing in the background

We can now compile our HelloWorld.cs file into an executable. To do this we can simply enter the following into the command prompt:

csc HelloWorld.cs

Visual Studio Developer Command Prompt CSC Command

We will produce a file in the same locale named HelloWorld.exe.

If we want to be more verbose or if we want to change output names then we can do the following:

csc /target:exe /out:HelloWorld_New.exe HelloWorld.cs

Visual Studio Developer Command Prompt CSC Command With Outputs

This will produce a file in the same locale named HelloWorld_New.exe.

If we run either of these Hello World executable files we will get “Hello” written to the console and “World” written to a message box.

Hello World

In this article I have showed you how to create a C# class file and how to compile it into a Hello World application. Hopefully you have found this blog post useful. If you have other Notepad++ tips please leave a comment below as I would love to read them.

Advertisements

Using Dropbox, Site44 and Google Drive to create a quick registration site

I recently came across a new company called Site44 and they have come up with a very neat product. By connecting your existing Dropbox account their site acts as a website hosting service for your HTML pages. This means that in mere seconds you could have a functioning website up and running that you can modify by simply overwriting your existing HTML file with a modified one that incorporates your new changes.

In this blog post I will delve into all three technologies and show how we can link them easily to create a quick user registration site for any community event or contest you might be running. By harnessing the power of Google and Site44 you can give your organization a free online website simply and easily. For less technical people you could even choose to create your webpage with Microsoft Word and save it as an .htm file. For this demonstration though I will code a simple site using Notepad++ and I will also include some CSS, JavaScript and jQuery elements to show you the power of Site44.

Dropbox

Dropbox was founded in 2007 and it is a free cloud storage file system. Much like Microsoft’s SkyDrive or Google Drive you can upload numerous types of files to the Dropbox server so that they are accessible to your account anywhere is the world. It comes with 2GB of space initially. You can synchronize your files by using their web interface to upload and download items or you can install their program onto your machine which will create a Dropbox folder structure for you. You can then drag files into this folder and Dropbox will sync your items for you.

Dropbox allows both folder and file sharing with anyone, even if they are not Dropbox users. You can choose to make folders public or private and then you can share links to these items. For the purposes of this demonstration you will need a Dropbox account. You can create a Dropbox account here. (Full disclosure: this is my referral link).

Site44

The tag line for Site44 is “absurdly simple web hosting.” In essence the company’s service turns Dropbox folders into websites. Having played with the site for a little bit I can honestly say that their tag line lives up to its name. It was easy to get started and I had my test site loaded within minutes. In fact it took me longer to code the HTML page than it did to prep the site. As you will see in the demo below the process could not simpler!

It is free to use Site44 and with the unpaid account you get five websites and a data transfer limit for all sites of 100MB/month. A word of warning from the Site44 team though. The service is still in beta and so they have posted this disclaimer: “Although it has undergone significant testing and is not expected to change significantly prior to general release, the use of Site44 is not recommend for production environments. You are encouraged to use Site44 for testing and non-critical purposes only.”

Due to the bandwidth restrictions on the free Site44 account you will not want to stress the system out by placing large files or pages with heavy content on your site as you might run the risk of maxing out your limit. As Site44 says their service is for lighter loads and is an excellent way to debug some of your code. You could also use the service to house any non-sensitive project proposals or mock-ups that you might want to demonstrate to clients.

Finally, Site44 only supports client-side scripting which includes JavaScript. Any server-side scripting of PHP or ASP.NET pages is not allowed. Placing such pages on your site will not fail but will simply show the page code to the viewer.

Google Drive

Google Drive was released in April 2012 and it is similar to Dropbox in that it is a free cloud-based file storage system. Like SkyDrive and Dropbox it also provides a synchronization service from your computer to their servers. They offer an initial 5GB of space. Google Drive is an extension of Google Docs which is a set of tools that allow you to create and collaborate online to generate documents, spreadsheets, presentations, etc.. Files created in Google Docs get housed in Google Drive automatically. They can then be downloaded to your personal computer for editing. Both of these features are accessible to anyone with a Google or Gmail account.

Tutorial

Let’s first create the HTML page that will house an introduction, some instructions and the link to our Google Docs file. When it is rendered it will appear as a form on the page so people can enter their information. I will also include on this page some calls to CSS, JavaScript and jQuery to demonstrate that all three are supported on Site44. (Note: all of the example code used in this demonstration will be available for download at the end of this post.)

Listed below is the HTML for my site. As you can see it is pretty vanilla code that invites people to register for  a fictitious Windows 8 workshop that I am hosting. If you scan the code you will see I reference CSS, JavaScript and jQuery.

<html> 
<head> 
    <title>Beginning Windows 8 Workshop</title> 
    <link href="Site.css" rel="stylesheet" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

    <script type="text/javascript"> 
        $(document).ready( 
            function () { 
                $('#animate') 
                    .animate({ width: '+=150px' }, 2000) 
                    .animate({ width: '-=150px' }, 2000) 
            }); 
    </script>

    <script type="text/javascript"> 
        function ShowDate() { 
            var mydate = new Date(); 
            var year = mydate.getYear(); 
            if (year < 1000) { 
                year += 1900 
            } 
            var day = mydate.getDay(); 
            var month = mydate.getMonth(); 
            var daym = mydate.getDate(); 
            if (daym < 10) { 
                daym = "0" + daym; 
            } 
            var montharray = new Array("January", "February", "March", "April", "May", "June", 
                "July", "August", "September", "October", "November", "December"); 
            document.write(montharray[month] + " " + daym + ", " + year) 
        } 
    </script> 
</head> 
<body> 
    <h4> 
        <script type="text/javascript">ShowDate()</script> 
    </h4> 
    <div id="animate"> 
        <img src="windows8logo.jpg" alt="Windows 8 logo" /></div> 
    <h2> 
        Beginning Windows 8 Workshop 
    </h2> 
    <p> 
        <h3> 
            <b><u>Details:</u></b></h3> 
        <br /> 
        Holiday Inn<br /> 
        Grand Ballroom<br /> 
        123 Anylane Road<br /> 
        AnyTown<br /> 
        AnyProvince<br /> 
        A1A 1A1<br /> 
        Canada<br /> 
        <br /> 
        Friday July 27, 2012<br /> 
        Event starts at 6 pm 
    </p> 
    <p> 
        Seating is limited so act fast! 
    </p> 
    <p> 
        Please register below for my Windows 8 Workshop for beginners: 
    </p> 
</body> 
</html>

I am using JavaScript to show the current date on the page and jQuery to animate the Windows 8 logo upon $(document).ready. I have placed both of these client-side scripting items on the page to show that they can work on Site44 and that they can combined if needed. If you find though that one item is not responding you might need to use jQuery.noConflict to return control of the $ back to the other library.

The rendered HTML page will look like this:

HTML Page

This page is almost done but I need to add in my Google document. We will build this now to complete the site.

To create our registration form navigate to the Google Drive website. Click the red Create button on the site and choose Form. You will then get a template similar to this in which two fields are already created:

Empty Form

We can then edit this form to add a title and as many sections as needed. You can also select various input methods including text, checkbox and radio button under Question Type. Fields can also be marked as required to ensure a successful submission. To add subsequent sections click the Add Item button in the upper left. For my site I wish to collect the following items from each registrant:

  • First Name
  • Last Name
  • Email
  • Phone Number
  • Company
  • Poll – Is your company planning to switch to Windows 8?

The finished form will then look something like this:

Finished Form

The title you place on your Form page is the subsequent title of the file. If you close the form editor and return to your Google Drive page you will see the registration form you created in your list of documents. Clicking on the form will take you to the responses page.

Form Spreadsheet

This page is effectively an Excel spreadsheet. Notice how each field on your form is a column on the sheet. Every registration will be contained in a single record in this document. Once I have closed registration for this event I can then go to File | Download as to export all the responses to any file type listed there. If I choose something like .xls I could then use this spreadsheet to track attendance at my event. To edit the form or add additional fields just click Form | Edit form. Use this Help Center for more information on Google Docs.

Now that our Google form is ready we can embed the form’s link in our HTML page. This will make the form render on our registration page so that prospective registrants can start signing up for my course. To embed a Google document you need to find the key to the document. To find the link to our form click Form | Embed this form in a webpage. A dialog box will appear with an IFRAME link. Copy this link and paste it into your HTML page wherever you want your form to appear. In my HTML page I am pasting it at the bottom as the last paragraph. The IFRAME’s source attribute looks like this:

src="https://docs.google.com/spreadsheet/embeddedform?formkey=KEYVALUE
width="760" height="689" frameborder="0" marginheight="0" marginwidth="0"

Your form will appear at the bottom of the page like this:

HTML Page With Form

Notice though the title we gave the form appears on the page. As well, the default width has pushed the form off to the left and is out of skew with the centered text on my page. I also get a vertical scroll bar. I will adjust the width to be 400px and I will append &ttl=0 to the src attribute of the IFRAME which will hide my form’s title on the page. (See more examples here of how else to modify Google Docs.)

My IFRAME source attribute now looks like this:

src="https://docs.google.com/spreadsheet/embeddedform?formkey=KEYVALUE&ttl=0" 
width="400" height="689" frameborder="0" marginheight="0" marginwidth="0"

And my page looks like this:

HTML Page With Form Modified

The next step we need to do is sign up of for Site44. To do this we will go to Site44.com. Make sure you have created and are logged into you Dropbox account. On the Site44 page you will see a button called “Sign in with Dropbox to get started.” This will allow Site44 to create a trusted link with your Dropbox account. Note though that you are NOT giving them access to your entire Dropbox contents. They will only create and share one folder that is necessary to build your websites.

Once the link is made you will see a page called Your Websites. Click the Create a new website button to start building your first site. A dialog box will appear and on this page you can create a free site44.com page or you can use a custom domain if you own one. We will choose a free site for this demo. I will use the site name windows8workshop.site44.com. I did not include the words “Beginner” to my site name so as to keep the webpage generic. This way if I want to add more advanced workshops later on I can keep my same site but just update my registration page as needed.

Once the site is created Site44 takes me to my new webpage. The page contains some default text including the URL of the site and where it is housed on Dropbox.

Website Default Page

If we now move to our Dropbox account we can see that Site44 has created a new root folder called Apps. If we drill down into this folder you will a site44 folder and then a folder for your new webpage. Within this page there will be an index.html file. This is the default page shown above. You can edit this page or remove it all together.

Now depending on if you have installed Dropbox onto your computer or not (if not you can use the web interface) upload your HTML page and any resource files you might need to run your site. If your site is large enough you can create subfolders to house your images or style sheets if you want but just keep in mind that you will also need to update your source paths in your web page. My site folder now looks like this:

Dropbox Folder

When we return to windows8workshop.site44.com we get a 404 error as I have removed the index.html file. I could use a landing page to redirect users but for this demo we can just go right to our new page at windows8workshop.site44.com/Registration.htm We will now see the following:

Complete Website

And if I register myself on the site my Google Docs form responses page will display my registration like this:

Form Spreadsheet With Entry

So, in this tutorial we saw how we could use Dropbox, Site44.com and Google Docs/Google Drive to create a quick registration site. We were able to incorporate both JavaScript and jQuery into the site as well as CSS. Let me know what other creative uses you can think of for using Site44 by leaving a comment below.

Sample Code