Hello World Application on OS X in HTML & JavaScript with node-webkit

JavaScript is the current programming hot potato, it's already possible to build Windows 8 applications in HTML & JavaScript with the excellent tools and training that Microsoft provide but what about OS X & Linux?

Another interesting way of writing HTML & JavaScript applications for OS X (and indeed Windows & Linux) is by using node-webkit.

This tutorial steps through creating a simple hello world style application and then using node-webkit to package and run it on OS X.

Full source code can be downloaded from here.

Prerequisites

Download node-webkit from here: https://github.com/rogerwang/node-webkit

Download the latest version of jQuery from here: http://jquery.com/

Step 1- Create our Hello World web application

What we want is quite simple, a button that has a click event that updates a label.

Let's get started with some HTML, create a file called index.html and populate it with this html:





We also need to create the JavaScript that deals with the button click event.

Create another new file and save it as index.events.js and populate it with this JavaScript:




Now open index.html and press the button:

Not very exciting, but it can be seen here that it's working and running in Safari. 

Step 2 - Bundle our web application as a node-webkit application

To create a node-webkit application we need to create one further file called package.json:

Now we have four files in our directory:

    index.html
    index.events.js
    jquery-1.8.3.min.js
    package.json

Create a ZIP file with the above four files and call it HelloWorld.nw.

Copy the node-webkit application into the above project directory and run it:

And there we go - our Hello World application running on OS X - source code for this demo here.



For more information on running and packaging the application see these links:

https://github.com/rogerwang/node-webkit/wiki/How-to-run-apps

https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps

Scheduling with Quartz and Mono on OS X

Quartz.Net is a brilliant library for scheduling in .Net and a great addition to the tool kit when developing C# applications on OS X.

At the time of writing the latest version is 2.0.1. Getting this to run on Mono is a little tricky though, for starters it uses a call to a method in the System.TimeZoneInfo that at the time of writing hasn't been implemented in Mono 2.10:

public static DateTimeOffset ConvertTime (DateTimeOffset dateTimeOffset, TimeZoneInfo destinationTimeZone){throw new NotImplementedException();}

So we have a few options, trying to implement the missing feature is a little daunting so I took a shortcut and downloaded the previous version of Quartz.net 1.0.3, tweaked my code so that it used the old feature set and discovered that it works!

using System;
using Quartz;
using Quartz.Impl;
namespace Quartz
{
    class MainClass
{
        private static IScheduler _scheduler;
 public static void Main (string[] args)
 {
     ISchedulerFactory schedulerFactory = new StdSchedulerFactory(); 
     _scheduler = schedulerFactory.GetScheduler();
     _scheduler.Start();
     Console.WriteLine("Starting Scheduler");
     AddJob();
 }
public static void AddJob()
 {
     JobDetail job = new JobDetail("job1", "group1", typeof(MyJob));
     Trigger trigger = TriggerUtils.MakeSecondlyTrigger("MyTrigger", 10, 10);
     DateTime ft = _scheduler.ScheduleJob(job, trigger); 
}
}
    internal class MyJob : IMyJob
{
        public void Execute(JobExecutionContext context)
 {
     Console.WriteLine("In MyJob class");
     DoMoreWork();
 }
 public void DoMoreWork()
 {
     Console.WriteLine("Do More Work");
 }
}
internal interface IMyJob : IJob
{
}
}

Here is it running:

OS X - Running StyleCop in MonoDevelop on C# code

When developing on Windows I find StyleCop to be a really useful tool for keeping code consistent throughout projects and I sorely miss it when developing C# projects on OS X with MonoDevelop.

I knew about a StyleCop addin for MonoDevelop here but at the time of writing it's not compatible with the latest version of MonoDevelop (3.0.3.5).

Time to get my hands dirty then! I forked the project on GitHub and modified it so that it works with MonoDevelop 3.0.3.5, the repository is here.

Upgrading the project was relatively easy, just tweaking a few version numbers in the addin manifest and reset the references. I also adjusted the StyleCop violations to output as Warnings rather that Errors, this suited the way I like to see the violations.

Getting the addin to run is another matter though - StyleCop uses the registry. Mono has a registry implementation but I found there were security issues involved with non admin processed reading and writing to it so in order to install the addin a little tweak to the registry permissions was required:

Navigate to the registry file:

On my machine it was here:

/Library/Frameworks/Mono.framework/Versions/2.10.9/etc/mono/registry/

Then adjust the security:

sudo chmod 777 last-btime

Here is a screen shot of it running:

Download and build from here:

https://github.com/mattlaver/Stylecop-Monodevelop-Addin

MonoMac - Open File Dialogs

Another common feature of applications are file dialogs. This blog post shows how easy it is to use them in our MonoMac applications.

The NSOpenPanel class is used here, the documentation can be seen on the Apple developer library here NSOpenPanel.

Without further ado, let's get stuck in!

1. Create a new MonoMac Project

As per the Hello OS X tutorial, edit the MainWindow.xib in xcode and add a button and an action called _OpenClick and a label called _Label1 with an outlet:

2. A small bit of coding

Add the handler for the button action to MainWindowController.cs:

partial void _OpenClick(NSObject sender)

{

        var openPanel = new NSOpenPanel();

        openPanel.ReleasedWhenClosed = true;

        openPanel.Prompt = "Select file";

       var result = openPanel.RunModal();

       if (result == 1)

       {

             _Label1.StringValue = openPanel.Filename;

       }

}

Now Run the application and test the code - pressing the Open button should invoke the Open File Dialog:

Select a random file and observe the Label being updated:

3 Additional notes

The NSOpenPanel can also be used to specify if it is for selecting just files or directories using these properties:

CanChooseDirectories

CanChooseFiles

Also note that the NSSavePanel can be used for saving files.

MonoMac - Getting started with Main Menu Items

Following on from the last post, here is a quick example demonstrating how to add a new items to the application Main Menu. Here we explore using the AppDelegate to pass a NSMenuItem Action to the MainWindowController.

1. Create an Empty project

Create a new MonoMac Project and double click on MainMenu.xib

2. Configure Xcode

From Xcode click the button in the bottom left ("Show Document Outline") and expand the Main Menu:

3. Create the new NSMenuItem place holder

Drag a NSMenuItem from the Object Library and drop it below the "Menu Item - Help" object:

4. Create the Drop down menu

Drag a NSMenu onto the NSMenuItem created in step 3 and set the title of the NSMenu to "My Menu" and the title of the first NSMenuItem to be "MenuTest":

5. Create the NSMenuItem Action


Display the AppDelegate.h file and then hold down [ctrl] and drag the "MenuTest" NSMenuItem onto the code window. Change the Connection to "Action", the Name to _MenuTestClick and then press connect:

6.  Add a label to the MainWindow

Select MainWindow.xib (via the navigation  menu at the top of xcode) and add a label. Create an outlet by holding down [ctrl] and drag it onto the MainWindowController.h. Call the outlet _Label1:

See the hello-os-x-from-c-five-steps example for more detailed steps on adding label outlets ro rge MainWindowController.h file.

Save Changes and move back to MonoDevelop.

7. One small bit of coding

From Mono Develop, Open MainWindowController.cs  and add this method:

public void MenuTestClick()

{

    _Label1.StringValue = "Menu Clicked!";

}

Open AppDelegate.cs and complete the implementation of the partial method _MenuTestClick (see the designer for the implementation of this partial method):

partial void _MenuTestClick (MonoMac.Foundation.NSObject sender)

{

    mainWindowController.MenuTestClick();

}

Now Build and run the application:

Marvellous, a working Main Menu!

Hello OS X from C# (Five Steps)

Here is a gentle introduction to developing OS X applications with C#. Hopefully this is useful and gets some more people started with the technology.

To start with, I'm brushing over the technology, the philosophy of design patterns like MVC and how the nuts and bolts work - this is a quick and dirty guide to getting stuck into a simple hello world style application with minimal effort.

Before I begin, there are some prerequisites:

- OS X operating system - I currently use OS X Lion running on a Macbook Pro.
- XCODE 4
- Mono 2.10.8
- MonoDevelop 2.8

XCode, Mono and MonoDevelop are available to download for free and they all installed fine on my mac.

1. Create a Project

Open MonoDevelop and goto File -> New -> Solution:

Select a MonoMac Project, give it an appropriate Name and select Forward and the OK  on the project features tab.

Marvellous, we now have a project:

Check it works by right clicking on the project and selecting Run Item:

Exciting eh?

Let's get back to the task in hand. Stop the application from running by going to Run -> Stop.

2. Design the Graphical User Interface (GUI)

Double click on MainWindow.xib and wait for Xcode to open:

In the botton right hand corner is the Object Library (at least on my setup). Drag a NSButton and a NSTextField onto the Window.

Now press the Show the Assistant Editor button to get the hybrid view of the Window and the Code editor:

At the top of the code window there are arrow buttons, use them to cycle through the code files until MainWindowController.h is displayed.

3. Add the Label Outlet

Select the NSTextField on our Window, hold down the [ctrl] button and drag onto the code window. In the Popup window set the Name to be _Label1:

Now press the Connect button and the code should look like this:

@interface MainWindowController : NSWindowController {

    IBOutlet NSTextField *_Label1;

}

4. Add the Button Action

Select the NSButton on our Window, hold down the [ctrl] button and drag to the code window. Change the Connection to Action, the Name to _ButtonClick. The Type box should automatically change to id.

So the Code should now resemble:

@interface MainWindowController : NSWindowController {

    IBOutlet NSTextField *_Label1;

}

- (IBAction)_ButtonClick:(id)sender;

@end

Save (File -> Save) and then go back into MonoDevelop.

5. Wiring up the Button Click Event

When MonoDevelop is refocused it should update it's code files form the changes made in Xcode.

Double click MainWindowController.cs and add the following method:

partial void _ButtonClick(NSObject sender)

{

         _Label1.StringValue = "Hello";

 }

So in the editor it looks like this:

Now run the application again and press the button:

So as you can see, it's actually quite easy.