The Wall

Events visualization with EvenDrops and KoExtensions (D3 and Knockout)

<div data-bind="eventDrops: carSales, chartOptions: carSalesOptions"></div>

require(['knockout-3.2.0.debug', 'KoExtensions/koextbindings', 'KoExtensions/Charts/linechart', 'KoExtensions/Charts/piechart', 'KoExtensions/Charts/barchart'], function(ko) {
 function createRundomSales(country) {
 var event = {};
 var marks = ['Audi', 'BMW', 'Peugot', 'Skoda'];
 event.name = country;
 event.dates = [];
 
 var endTime = Date.now();
 var oneMonth = 30 * 24 * 60 * 60 * 1000;
 var startTime = endTime - oneMonth;
 var max = Math.floor(Math.random() * 80);
 for (var j = 0; j < max; j++) { var time = Math.floor((Math.random() * oneMonth)) + startTime; event.dates.push({ timestamp: new Date(time), carMark: marks[Math.floor(Math.random() * 100) % 4], price: Math.random() * 100000 }); } return event; } function createSales() { var sales = []; var countries = ['France', 'Germany', 'Czech Republic', 'Spain']; countries.forEach(function(country) { var countrySales = createRundomSales(country); sales.push(countrySales); }); return sales; } function TestViewModels() { var self = this; self.carSales = ko.observableArray([]); self.carSales(createSales()); self.carSalesOptions = { eventColor: function (d) { return d.carMark; }, eventSize: function (d) { return d.price; }, eventDate: function (d) { return d.timestamp; }, start: new Date(2014, 8, 1) }; } var vm = new TestViewModels(); ko.applyBindings(vm); }); 

Unit testing Knockout applications

function AssetViewModel(){
 var self = this;
 self.city = ko.observable();
 self.country = ko.observable();
 self.size = ko.observable();
 
 self.load = function(){
 $.ajax("/api/assets/" + self.city(), {
 data: dto,
 type: "GET", contentType: "application/json",
 success: function (result) {
 self.updateData(data);
 }
 });
 }
 self.save = function () {
 var dto = self.toDto();
 self.isBusy(true);
 self.message("Saving...");
 $.ajax("/api/assets/", {
 data: dto,
 type: "POST", contentType: "application/json",
 success: function (result) {
 self.edit(false);
 self.isBusy(false);
 self.message(result.message);
 self.update(result.data);
 }
 });
 };
 self.update = function(updateData){
 self.city(updateData.City);
 self.country(updateData.Country);
 }
 
 self.toDto = function () {
 var model = new Object();
 model.City = self.city();
 model.Country = self.country();
 return JSON.stringify(model);
 };
}

var vm;
function initTest() {
 
 var vm = new AssetViewModel();
}
$(function () {
 QUnit.module("ViewModels/AssetViewModel", {
 setup: initTest
 });
 QUnit.test("updateData sets correctly the city", function () {
 var data = {
 City: "Prague",
 Country:"Czech Republic"
 };
 vm.updateData(data);
 equal(vm.city(), "Prague");
 });
}

function initTest() {
 $.mockjax({
 url: '/api/assets/Prague',
 type: 'GET',
 responseTime: 30,
 responseText: JSON.stringify({
 Name: "Prague",
 Country: "Czech Republic",
 Size: 20
 })
 });
}
$(function () {
 QUnit.module("ViewModels/AssetViewModel", {
 setup: initTest
 });
 QUnit.asyncTest("testing the load method", function () { 
 setTimeout(function () {
 ok(true, "Passed and ready to resume!");
 start();
 vm.load();
 QUnit.equal(vm.size(),20);
 }, 100);
 });
}

var storedAssets = [];
function initTest() {
 $.mockjax({
 url: '/api/assets',
 type: 'POST',
 responseTime: 30,
 response: function (data) {
 storedAssets.push(JSON.parse(data.data));
 }
 });
}
$(function () {
 QUnit.module("ViewModels/AssetViewModel", {
 setup: initTest
 });
 QUnit.asyncTest("save asset - check the update of the size", function () {
 vm.size(10);
 vm.save();
 setTimeout(function () {
 ok(true, "Passed and ready to resume!");
 start();
 equal(storedAssets.length, 1);
 var storedAssets = storedCharges[0];
 equal(storedAssets.Size, vm.size());
 }, 100);
 });
}

{
 "Framework": "qunit",
 "References" : [
 { "Path": "../Scripts/jquery-2.1.0.js"},
 { "Path": "../Scripts/knockout-3.1.0.js"},
 { "Path": "../Scripts/jquery.mockjax.js"}, 
 { "Path": "../Scripts/tech", "Include": "*.js"},
 { "Path": "../ViewModels", "Include": "*.js"}
 ]
}

function initTest() {
 $.mockjax({
 url: '/api/assets',
 type: 'POST',
 responseTime: 30,
 response: function (data) {
 storedAssets.push(JSON.parse(data.data));
 }
 });
}

Detecting extreme values in SQL

private List ld;
public void Init()
{
 ld = new List();
}
public void Accumulate(SqlDouble value)
{
 if (!value.IsNull)
 {
 ld.Add(value.Value);
 }
}
public void Merge(Median group)
{
 ld.AddRange(group.ld.ToArray());
}
public SqlDouble Terminate()
{
 return Tools.Median(ld);
}

public static SqlDouble Median(List ld)
{
 if (ld.Count == 0)
 return SqlDouble.Null;
 ld.Sort();
 int index = ld.Count / 2;
 if (ld.Count % 2 == 0)
 {
 return (ld[index] + ld[index - 1]) / 2;
 }
 return ld[index];
}

public SqlDouble Terminate()
{
 var distances = new List();
 var median = Tools.Median(ld);
 foreach (var item in ld)
 {
 var distance = Math.Abs(item - median.Value);
 distances.Add(distance);
 }
 var distMedian = Tools.Median(distances);
 return distMedian;
}

select * from tbUsers where Height> ( Median(Height) + c*RobustVar(Height)) or Height < (Median(Height) - c*RobustVar(Height)) 

<div id="histogram" data-bind="histogram: data, chartOptions : {
 tolerance : 10,
 showProbabilityDistribution: true,min : -20,
 expected: 'median',
 useMAD: true,
 showOutliers: true}">

var exData = [3.9,3.8,3.9,2.7,2.8,1.9,2.7,3.5, 4.4, 2.8, 3.4, 8.6, 4.5, 3.5, 3.6, 3.8, 4.3, 4.5, 3.5,30,33,31];
 
function TestViewModel() {
 var self = this;
 self.data = ko.observableArray(exData);
}
var vm = new TestViewModel();
ko.applyBindings(vm);
initializeCharts();

The Use Case

• KnockoutJS - to glue the interaction on the client side. Knockout is one of the cool JavaScript MV(*) frameworks which provide a way to organise and facilitate the JavaScript development. Unlike other frameworks (Backbone or Ember) KnockoutJS concentrate itself only on binding of the data and actions between the GUI (HTML) and the ViewModel (JavaScript) and does not take care for other aspects (such as client side routing). The framework is very flexible and allows you to bind almost anything to any DOM's elenent value or style.
• RavenDB - to stored the data. RavenDB is a document database, which seamlessly integrates into any C# project.
• WebAPI - to serve the data through REST services. WebAPI is a quite new technology from MS which is meant to provide better support for building REST services. Of course we have built REST services with WCF before, so the questions is why should we change to WebAPI? WCF was created in the age of WSDL. It was adapted later to generate JSON, however inside it still uses XML as data transformation format. WebAPI is complete rewrite which also provides other interesting features.
• Bootstrap - to give it a decent GUI. As its name says, bootstrap enables a quick development of a web application's GUI. It is a great tool to all of us who just want to get the project out and we still need a decent user interface.
• D3.js - to visualize data using charts. D3JS is a JavaScript library enabling the user to manipulate the DOM and SVG elements.
• KoExtensions - very small set of tools which I have created, allowing easy creation of pie charts or binding to google maps while using KnockoutJS.

The architecture of the application

When to use Knockout or client side MV*

• You have a good server side REST API (or you plan to build one) and want to use it to build a web page.
• You are building more web-application then a website. That is to say, your users will stay at the page for some time, perform multiple actions, keep some user state and you need a responsive application for that.
• You need a really dynamic page. Even if you would use server side MVC than you would somehow need to include a lot of JavaScript for the dynamics of the page.

Data model

{
 "Name": null,
 "UserName": "test", 
 "Password": "test"
}
 

{
 "OwnerId": 1,
 "LastChargeId": 5,
 "LastRentId": 0,
 "Name": "Appartment #1",
 "Address": "5th Ave",
 "City": "New York",
 "Country": "USA",
 "ZipCode": "10021",
 "Latitude": 40.774,
 "Longitude": -73.965,
 "InitialCosts": 0.0,
 "Rents": [],
 "Charges": [
 {
 "Counterparty": "New York Electrics",
 "Type": null,
 "Automatic": false,
 "Regularity": "MONTH",
 "Id": 2,
 "Name": "Electricity",
 "PaymentDay": 4,
 "AccountNumber": "9084938890-2491",
 "Amount": 1000.0,
 "Unit": 3,
 "Notes": "",
 "End": "2013-03-19T23:00:00.0000000Z",
 "Start": "2013-03-10T23:00:00.0000000Z",
 },
 { ... },
 { ... }
 ],
 "Ebit": 0.0,
 "Size": 80.0,
 "PMS": 1250000.0,
 "Price": 100000000.0,
 "IncomeTax": 0.0,
 "InterestRate": 0.0
}

One question you might be asking yourself is why did I not use only one collection of Owners. Each Owner document would than contain all the assets as an inner collection. This is just because, I thought it might make sense in the future, to have an asset shared by two owners. The current design allows us anytime in the future, connect the asset to an collection of Owners, simply by replacing OwnerID property with and collection of integers, containing all the ids of the owners.

The Backend

The backend is composed by set of REST controllers. Here is the provided API:

• GET api/assets - get the list of all the appartment of current user
• DELETE api/asset/{id} - removing existing asset
• PUT api/asset - adding new asset
• PUT api/charges?assetID={id} - add new charge to existing asset
• POST api/charges?assetID={id} - update existing charge in given asset
• DELETE api/charge/assetID={id}?assetID={assetID} - removing charge from existing asset
• PUT api/rents/?assetID={id} - add new charge
• POST api/rents/?assetID={id} - update existing charge
• DELETE api/rents/assetID={id}?assetID={assetID} - removing rent from existing asset

Getting all the assets

[Authorize]
public IEnumerable<Object> Get()
{
 var owner = ObtainCurrentOwner();
 var assets = GetAssets(owner.Id);
 return result;
}
protected Owner ObtainCurrentOwner()
{
 return RavenSession.Query<Owner>().SingleOrDefault(x => x.UserName == HttpContext.Current.User.Identity.Name);
}
public IEnumerable<Asset> GetAssets(int ownerID)
{
 return RavenSession.Query<Asset>().Where(x => x.OwnerId == ownerID);
}
 

Opening RavenDB session

protected override void Initialize(System.Web.Http.Controllers.HttpControllerContext controllerContext)
{
 base.Initialize(controllerContext);
 if(RavenSession == null)
 RavenSession = WebApiApplication.Store.OpenSession();
}
protected override void Dispose(bool disposing)
{
 base.Dispose(disposing);
 using (RavenSession)
 {
 if (RavenSession != null)
 RavenSession.SaveChanges();
 }
}

You can notice that this ViewModel calls jQuery's $.extend method right at the begining of the function. This is one of the ways to express inheritance in JavaScript. JavaScript is prototype based language. The objects derive directly from other objects, not from classes. The extend method basically copies all properties from the object specified in the parameter.

All of my ViewModels have certain common properties such as busy or message. These are help variables which I use on all ViewModels to visualize progress or show some info messages in the GUI. The BaseViewModel is a good place to define these common properties. Notice also the selectedAsset property, which holds the currently selected AsseetViewModel (imagine user selecting one line in the table of assets).

Wihtout further examination let's take a look at the AssetViewModel. There are several self-epxlanatory properties such as address, price and similar. What is more interesting are the arrays of Rents and Charges. These are observable arrays of ViewModels which are filled during the construction of the AssetViewModel object. The data to this object is passed from the OwnerViewModel. The asset also holds its value to the owner in the parent property.

function AssetViewModel(parent,data) {
 var self = this;
 $.extend(self, new BaseViewModel());
 self.lat = ko.observable();
 self.lng = ko.observable();
 self.city = ko.observable();
 self.country = ko.observable();
 self.zipCode = ko.observable();
 self.address = ko.observable();
 self.name = ko.observable();
 self.charges = ko.observableArray([]);
 self.rents = ko.observableArray([]);
 self.parent = parent;
 
 if (data != null) {
 self.isNew(false);
 self.name(data.Name);
 //update all asset data here
 
 //fill the charges collection - note the rents are filled similarly
 if (data.Charges != null) {
 self.charges($.map(data.Charges, function (data) {
 return new ChargeViewModel(self, data);
 }));
 }
 }
}

To sum it up: When the OwnerViewModel is loaded in the screen, it immidiately starts HTTP request to obtain all the data. It will recieve a JSON which contains all the assets, each asset containing the charges and rents inside. This JSON is parsed respectively by OwnerViewModel, AssetViewModel and Charge and RetnViewModel. At the end the complete hierarchy of ViewModels is created on the client side which copies exactly the server side.

Before detailing the last missing ViewModels (Rents and Charges), let's take a look at the first part of the View. The parent layout is defined in _Layout.cshtml however the part mastered by Knockout is defined in the Index.cshtml file. The left side menu is composed of two smaller menus. One which contains the list of properties with the possibility to create new one and another one which allows to switch over details of the selected property. Here is the View representing the first menu:

<div class="well sidebar-nav">
 <li class="nav-header">Property list:</li>
 <ul class="nav nav-list" data-bind="foreach:assets">
 <li><a data-bind="text:name,click:select" href="#"></a></li>
 </ul>
 <ul class="nav nav-list">
 <li class="nav-header">Actions:</li>
 <li><a href="#" data-bind="click: newAsset"><i class="icon-pencil"></i>@BasicResources.NewProperty</a></li>
 </ul>
</div>

Foreach binding was used in order to render all the apartments. For each apartment an anchor tag is emitted. The text of this tag is bound to the name of the apartment and the click actions is bound to the select function. The creation of new asset is handled by the newAsset function of the OwnerViewModel.

The second part of the menu is defined directly as html. Three anchor tags are render, each of them pointing to different tab, using the same url pattern. For example the URL "#/{property-name}/overview" should navigate to the "Overview" tab of the property with given name.

Client side routing is used, in order to execute certain actions depending on the accessed url. In order to enable client side rendering Path.JS library is used. The attribute binding of knockout is used to render the correct anchor tag.

<div class="well sidebar-nav" data-bind="with:selectedAsset">
 <ul class="nav nav-list">
 <li class="nav-header" data-bind="text:name"></li>
 <li><a data-bind="attr: {href: '#/' + name() + '/overview'}"><i class="icon-pencil"></i>Overview</a></li>
 <li><a data-bind="attr: {href: '#/' + name() + '/charges'}"><i class="icon-arrow-down"></i>Charges</a></li>
 <li><a data-bind="attr: {href: '#/' + name() + '/rents'}"><i class="icon-arrow-up"></i>Rents</a></li>
 </ul>
</div>

You can also notice, that the with binding was used to set the current asset view model as the parent for the navigation div. The right part simply contains all of the 3 tabs (overview, charges or rents), only one of them visible at time. In order to separate the content into multiple files, partial rendering of ASP.MVC is used.

<div id="assetDetail" class="span9" data-bind="template: {data: selectedAsset, if:selectedAsset, afterRender: detailsRendered}">
 <div id="overview">
 @Html.Partial("Overview")
 </div>
 <div id="charges">
 @Html.Partial("Charges")
 </div>
 <div id="rents">
 @Html.Partial("Rents")
 </div>
</div>

Again the with binding is used as the selected apartment's ViewModel is used to back-up this part of the view.

self.save = function () {
 if (self.errors().length != 0) {
 self.errors().showAllMessages();
 return;
 }
 self.isBusy(true);
 data = self.toDto();
 var rUrl = "/../api/charges?assetID=" + self.parent.id();
 if (self.isNew())
 var opType = "post";
 else
 var opType = "put";
 $.ajax(rUrl, {
 data: JSON.stringify(data),
 type: opType, contentType: "application/json",
 success: function (result) {
 self.isBusy(false);
 self.message(result.message);
 if (self.isNew()) {
 self.update(result.dto);
 parent.charges.push(self);
 }
 }
 });
}

When there are no validation errors, the object which will be sent to the server is created from the ViewModel by the toDto method. It does not make sense to serialize the whole ViewModel and send it to the server. In the toDto method the ViewModel is converted to an JSON object which can be directly mapped to the server side entity. The ajax method of jQuery is called, which creates new HTTP request.

When the response from the server comes back, the callback is executed, which performs several operations. Besides updating the GUI-helpful variables the callback performs two different operations. If the new charge was added, then it has to be added also to the parent ViewModel(appartment - represented by AssetViewModel). The new charge also recieved the server side ID which has to be updated. All other properties are already up-to-date.

Removing charge

The delete operation is very simple. Only asset and charge ids have to be supplied to the controller. If the operation has succeed, then againg the collection of charges inside AssetViewModel has to be updated.

self.remove = function () {
 $.ajax("/../api/charges/" + self.id() + "?assetID=" + self.parent.id(), {
 type: "delete", contentType: "application/json",
 success: function (result) {
 self.isBusy(false);
 parent.charges.remove(self);
 parent.selectedCharge(null);
 }
 });
};

Charges View

The charges view is classic master detail view. We have list of items on the left side and the detail of one of the items on the right. A table of charges is rendered using the foreach binding and then the currently selected charge is rendered in a side div tag using the with binding.

<div class="row-fluid">
 <table class="table table-bordered table-condensed">
 <tbody data-bind="foreach: charges">
 <tr style="cursor: pointer;" data-bind="click: select">
 <td style="vertical-align: middle">
 <div data-bind='text: name'></div>
 </td>
 <td style="vertical-align: middle">
 <div data-bind="text: amount"></div>
 </td>
 <td style="vertical-align: middle">
 <div data-bind="text: amount"></div>
 </td>
 <td>
 <button type="submit" class="btn" data-bind="visibility: !isNew(), click:remove"><i class="icon-trash"></i></button>
 </td>
 </tr>
 </tbody>
 </table>
</div>

Using the KoExtensions

<div data-bind="piechart: charges, transformation:obligationToChart"></div>

function obligationToChart(d) {
 return { x: d.name(), y: d.amount() };
}
 

Bootstrap style date-time picker

<div class="controls">
 <input type="text" data-bind="datepicker:end">
</div>
 

Binding to the map

<div class="row-fluid">
 <div data-bind="foreach: assets">
 <div data-bind="latitude: lat, longitude:lng, map:map, selected:selected">
 </div>
 </div>
 <div id="map" style="width: 100%; height: 300px">
 </div>
</div>
 

Knockout Validation and Bootstrap styles

<tr style="cursor: pointer;" data-bind="css : {info:selected},click: select">...</tr>

self.amount = ko.observable().extend({ required: true, number: true });
self.name = ko.observable().extend({ required: true });
<div class="control-group" data-bind="css : {error:!name.isValid()}">
 <label class="control-label">Name</label>
 <div class="controls">
 <input type="text" placeholder="@BasicResources.Name" data-bind="value:name">
 <span class="help-inline" data-bind="validationMessage: name"></span>
 </div>
</div>
<div class="control-group" data-bind="css : {error:!amount.isValid()}">
 <label class="control-label">@BasicResources.Amount</label>
 <div class="controls">
 <input type="text" placeholder="@BasicResources.Amount" data-bind="value: amount">
 <span class="help-inline" data-bind="validationMessage: amount"></span>
 </div>
</div>
 

What is not described in this article

Summary

I am just starting to use the Google Drive SDK for one of my personal projects. The front-end of the application is written entirely in JavaScript. I am in the process of integrating Google Drive and it took me some time to get throw the API reference and get it to work, here are some useful code snippets. I have started with the JavaScript Quickstart available at the google sdk page and I have added couple useful methods:

The Google Drive API is a standard RESTful API. You can access the functionalities only by issuing HTTP requests, so you do not need any special SDK. However the requests have to be signed. OAuth protocol is used to secure the communication. Google provides a SDK for many languages, JavaScript being one of them. Using this SDK facilitates the creation of HTTP requests. The API provides a good compromise between the simplicity and flexibility.

The OAuth handshake

Every request has to be signed using OAuth token. The application has to first perform the OAuth handshake to obtain the token. JavaScript SDK provides gapi.auth.authorize function which can be used. This function takes the necessary parameters (OAuth client ID and the scope) and also the callback which will be executed when the handshake is over.

function checkAuth() {
 gapi.auth.authorize(
 {'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': true},
 handleAuthResult);
}
function handleAuthResult(authResult) {
 if (authResult && !authResult.error) {
 //Auth OK
 }
}

Once the client is authenticated, the SDK stores the token internally and adds it to any new request, created before the web page is closed.

Composing the Google Drive requests

Any simple request can be created with gapi.client.request function. The SDK will create a HTTP request using the supplied information. The method takes in JavaScript object. I have found that I am using mostly 4 fields in this object:

• path – the url of the request
• method – http method of the request (get/post/put/delete)
• params – any information passed here will be added to the request as URL parameter.
• headers – any information passed here will be added to the header of the HTTP request.
• body – the body of the request. Usually posted JSON.

Getting first 10 items from the drive

function getItems() {
 var request = gapi.client.request({
 'path': 'drive/v2/files',
 'method': 'GET',
 'params': {
 'maxResults': '10'
 }
 });
 request.execute(listItems);
}
function listItems(resp) {
 var result = resp.items;
 var i = 0;
 for (i = 0; i < result.length; i++) { console.log(result[i].title); } } 

Creating a folder

function createFolder(folderName) {
 var request = gapi.client.request({
 'path': 'drive/v2/files',
 'method': 'POST',
 'body': {
 'title': folderName,
 'mimeType': 'application/vnd.google-apps.folder'
 }
 });
 request.execute(printout);
}
function printout(result) {
 console.log(result);
}

In this request, nothing is passed as parameter in the URL. Instead of that JSON object containing two fields (title and mimeType) is passed in the body of the request.

Searching for folders

function getAllFolders(folderName) {
 var request = gapi.client.request({
 'path': 'drive/v2/files',
 'method': 'GET',
 'params': {
 'maxResults': '20',
 'q':"mimeType = 'application/vnd.google-apps.folder' and title contains '" + folderName + "'"
 }
 });
 request.execute(listItems);
}

You can get more information about searching the google drive here.

This post describes the integration between Google Maps and KnockoutJS. Concretely you can learn how to make the maps marker part of the View and automatically change it's position any time when the ViewModel behind changes. The ViewModel obviously has to contain the latitude and longitude positions of the point that you wish to visualize on the map.

Previously I have worked a bit with Silverlight/WPF which in general leaves one mark on a person: the preference for declarative definition of the UI leveraging the rich possibilities of data binding provided by the previously mentioned platforms. In this moment I have a small free-time project where I am visualizing a collection of points on a map. This post describes how to make the marker automatically change it's position after the model values behind changes. Just like in this picture bellow, where the position changes when user changes the values of latitude and longitude in the input boxes.

image

Since I like Model-View-ViewModel pattern I was looking for a framework to use this pattern in JS, obviously KnockoutJS saved me. The application that I am working on, has to visualize several markers on Google Maps. As far as I know there is no way to define the markers declaratively. You have to use JS:

marker = new google.maps.Marker({
 map:map,
 draggable:true,
 animation: google.maps.Animation.DROP,
 position: parliament
});
google.maps.event.addListener(marker, 'click', toggleBounce);

So let's say you have a ViewModel which holds a collection of interesting points, that will be visualized on the map. You have to iterate over this collection to show all of them on the map. One possible way around would be to use the subscribe method of KO. You could subscribe for example to the latitude of the point (assuming that the latitude would be an observable) and on any change perform the JS code. There is a better way.

Defining custom binding for Google Maps.

The way to go here is to define a custom binding, which will take care of the update of the point on the map, any time, that one of the observable properties (in basic scenario: latitude and longitude) would change.

ko.bindingHandlers.map = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
 var position = new google.maps.LatLng(allBindingsAccessor().latitude(), allBindingsAccessor().longitude());
 var marker = new google.maps.Marker({
 map: allBindingsAccessor().map,
 position: position,
 icon: 'Icons/star.png',
 title: name
 });
 viewModel._mapMarker = marker;
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
 var latlng = new google.maps.LatLng(allBindingsAccessor().latitude(), allBindingsAccessor().longitude());
 viewModel._mapMarker.setPosition(latlng);
 }
}

;<div data-bind="latitude: viewModel.Lat, longitude:viewModel.Lng, map:map" ></div>

So let's describe what is going on here. We have defined a map binding. This binding is used on a div element. Actually the type of the element is not important. There are also latitude and longitude bindings, which are not defined. That is because the map binding takes care of everything. The binding has two functions: init and update, first one called only once, the second one called every time the observable value changes.

The allBindingsAccessor parameter contains a collection of all sibling bindings passed to the element in the data-bind attribute. the valueAccessor, holds just the concrete binding (in this case the map value, because we are in definition of the map binding). So from the allBindingsAccessor we can easily obtain the values that we need:

allBindingsAccessor().latitude()
allBindingsAccessor().longitude()
allBindingsAccessor().map()

And there is one important thing to do at the end – save the marker, somewhere so we can update it’s position later. Here again KO comes with rescue, because we can use the viewModel parameter passed to the binding and we can attach the marker to the ViewModel. Here I suppose that there is no existing variable with name _mapMarker in the viewModel and JS can happily add the variable to the ViewModel.

viewModel._mapMarker = marker; 

viewModel._mapMarker.setPosition(latlng);

Almost full example

Possible improvements

One thing that I do not like about this, is the fact, that you have to pass the map as an argument to the binding and the div element has to be outside of the map. Coming from Silverlight/WPF you would like to do something like this:

<div id=”map_canvas”>
<div data-bind=”latitude: vm.Lat, longitude:vm.Lng”>Whatever I want to show on the map marker</div>
</div>

That is actually the beauty of declarative UI definition. You can save a lot of code only by composing the elements in the correct order. However this is not possible – at least I was not able to get it to work. I was close however:

init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var map = element.parentNode;
var googleMap = new google.maps.Map(.map.);
//add the pointer
var contentToAddToMarker = element;
}

Again thanks to KO, here the element variable represents the DOM element to which the binding is attached. If the div element is inside the map, than we can get the parent element (which is the div for the map) and we are able to create a new map on this element. The problem which I had is the once, the new map was created, the div elements nested inside the map disappeared. Even if that would work, some mechanism would have to be introduced, in order to create the map only the first time (in case there are more markers to show on the map) and store it somewhere (probably as global JS variable).

On the other hand, thanks to the element you can get all the div which should be for example given as the description to the marker.

Summary: KnouckoutJS is great. It lets me get rid of the bordelic JS code.

Why it is not possible to use simple JavaScript POST?

Workarounds

• HTML 5 - has a support for file uploading. Use the File API. Follow this how to. This does not work in current versions of IE (7,8,9).
• Create a hidden iFrame on the page and redirect the return of the post to this iFrame
• Use Flash, Silverlight, or Java applet
• Use some component, or jQuery plugin, which usually makes use of the preceding ones (usually the iFrame hack)

jQuery plugins

• Plupload
• JqUploader
• Uploadify
• jQuery File Upload
• jQuery Form Plugin

Using jQuery Form Plugin in ASP.NET

Client side

<form id="uploadForm" action="Upload.ashx" method="POST" enctype="multipart/form-data">
 <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
 File:
 <input type="file" name="file" />
 <input type="submit" value="Submit" />
</form>

$('#uploadForm').ajaxForm({
 beforeSubmit: function (a, f, o) {
 o.dataType = 'html'
 },
 success: function (data) {
 alert('upload OK:' + data);
 }
});

Server side

public class Upload : IHttpHandler
{
 public void ProcessRequest(HttpContext context)
 {
 System.Web.HttpPostedFile file = context.Request.Files[0];
 String filePath = "Uploads" + "\\" + RandomString(10) + "." + extension;
 string linkFile = System.Web.HttpContext.Current.Server.MapPath("~") + filePath;
 file.SaveAs(linkFile);
 context.Response.StatusCode = 200;
 context.Response.Write(filePath);
 }
}

Creating the native dll library to be called

class NATIVELIB_API CNativeLib {
public:
 CNativeLib(void);
};
extern NATIVELIB_API int nNativeLib;
NATIVELIB_API int fnNativeLib(void);
NATIVELIB_API int fnPrintToFile(void);

And here the code file:

NATIVELIB_API int fnNativeLib(void)
{
 return 42;
}
NATIVELIB_API int fnPrintToFile(void)
{
 ofstream myfile;
 myfile.open ("C:\example.txt");
 if(myfile.is_open()){
 myfile << "Writing this to a file.\n"; return 1; }else{ return 0; } myfile.close(); } // This is the constructor of a class that has been exported. // see NativeLib.h for the class definition CNativeLib::CNativeLib() { return; } 

Creating the plugin structure

The architecture of the plugin is quite complicated so to help out there is a tool called FireBreath which helps you with creation of the simple plugin.

Firebreath is written in C++ and uses Python to run PREP scripts so you will need Python to execute it. You can download Firebreath from its official page or from its GIT repository. On the official page you can find a great video works you through the process of creation of the plugin structure.

Firebreath also uses CMAKE to create a build which will fit your platform needs. CMAKE is a crossplatform build system which from one configuration written in a CMakeList.txt file will build Make file or Visual Studio Solution structure which later can be build on your system.

class MyAPI : public FB::JSAPIAuto
{
public:
 MyAPI(const OctoTestPtr& plugin, const FB::BrowserHostPtr& host);
 virtual ~MyAPI();
 MyPtr getPlugin();
 
 //call to native library to print to file
 int printToFile();
};

//add the header file
#include "NativeLib.h"
//add the function implementation
int MyAPI::printToFile()
{
 return fnPrintToFile();
}

There is one last step and that is to register this method so it will be exposed by the plugin to JavaScript calls. This is done in the constructor of the plugin:

MyAPI::MyAPI(const MyPtr& plugin, const FB::BrowserHostPtr& host) : m_plugin(plugin), m_host(host)
{
 registerMethod("printToFile", make_method(this,&MyAPI::printToFile));
}

Now you will have to add the header file to your solutions header files and than the LIB for the linker to be able to find your native library functions. To do so go to Project properties -> Linker -> Input -> Additional Dependencies and add your lib file here. One last will be to copy the NativeLib.dll to the location of you plugins generated DLL.

Now you can compile the solution (first time it will take maybe couple minutes, next time it will be faster since you are only changing one project). In the "BIN\Debug" folder you will find the DLL of your plugin. Now run regsvr32 myplugin.dll and the plugin should be registered.

Now you can locate FBControl.html (generated for you by Firebreath) which already contains your plugin so you can test it directly (you should find it in "projects\MyPluging\gen" folder). Now that file already contains a JavaScript function to get your plugin.

function plugin0()
{
 return document.getElementById('plugin0');
}
plugin = plugin0;

So in the body of the html just add a button to call the plugins function by JavaScript and show the result of the function:

<input type="button" value="Print to file" name="button2" onClick="alert(plugin().printToFile());">