ict.ken.be

• Install Visual Studio 2012 Color Theme Editor
• Add registery key:
  HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\11.0\General\SuppressUppercaseConversion
  REG_DWORD value: 1
• Select Theme - Blue

• Automatic platform specific styling of form elements
• Supported inputs: text, password, search, url, email, number, tel, file, date, time, month
• Transitions: slide, zoom, fade, overlay (direction, reversible) at application or element level

</div>

PhoneGap.com

• Developed by Nitobi which was bought by Adobe who renamed it to Cordova
• One solution development for iOS, Android, Windows Phone 7, Blackberry, ...
• Native shell -> Browser -> Packaged HTML App
• Supports: Accelerometer, Camera, Capture, Compass, Connection, Contacts, Device, Events, File, Geolocation, Media, Notification, Storage

• Where native feel isn't important
• You want to re-use your html and javascript skills
• Deploy to multiple devices and app store in one go
• You need offline data and function not available to the web
• You deploy to more then 2 platforms
• You don't need the maximum performance of the device
• You don't need some of the more device specific features

• Install Windows Phone Sdk
• Download PhoneGap and copy CordovaStarter-2.0.0.zip from lib/windows into %userprofile%\Documents\Visual Studio 2010\Templates\ProjectTemplates\

 <Capabilities>
      <Capability Name="ID_CAP_IDENTITY_DEVICE" />
      <Capability Name="ID_CAP_IDENTITY_USER" />
      <Capability Name="ID_CAP_LOCATION" />
      <Capability Name="ID_CAP_NETWORKING" />
      <Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />
      <Capability Name="ID_CAP_APPOINTMENTS"/>
      <Capability Name="ID_CAP_CAMERA"/>
      <Capability Name="ID_CAP_CONTACTS"/>
      <Capability Name="ID_CAP_ISV_CAMERA"/>
      <Capability Name="ID_CAP_MEDIALIB"/>
      <Capability Name="ID_CAP_MICROPHONE"/>
      <Capability Name="ID_CAP_PHONEDIALER"/>
      <Capability Name="ID_CAP_PUSH_NOTIFICATION"/>
      <Capability Name="ID_CAP_SENSORS"/>
      <Capability Name="ID_HW_FRONTCAMERA"/>      
</Capabilities>

• https://gist.github.com/476358 - allows calls to be made to PhoneGap without causing JavaScript errors and displays an alert instead.
• https://github.com/alunny/stopgap - wipes out the PhoneGap object and fires the ondeviceready event.

• http://jquerymobile.com
• http://www.sencha.com/products/touch
• http://jqtouch.com
• http://www.kendoui.com/mobile.aspx

• Do not use cdn, but add full jquery and jquery mobile + css
• Use jQuery mobile Metro to emulate native graphics

	<div id="home" data-role="page">
            <div data-role="header">
                <h1>Home Page</h1>
            </div>
            <div data-role="content">
                Hello <div id="user"></div>
                <a href="#newpage" data-role="button">new page</a><br />
                <ul data-role="listview" data-theme="b" data-filter="true">
                    <li><a href="">One</a></li>
                    <li><a href="">Two</a></li>
                    <li><a href="">Three</a></li>
                    <li><a href="">Four</a></li>
                </ul>
            </div>
            <div data-role="footer" data-position="fixed">
                <a href="#dialogpage" data-rel="dialog" data-icon="plus">Add something</a>
            </div>
        </div>
        <div id="newpage" data-role="page">
            <div data-role="header">
                <a href="#home" data-icon="delete">cancel</a>
                <h1>New Page</h1>
                <a href="#home" data-icon="save">save</a>
            </div>
            <div data-role="content">
                <label for="name">What is your name?</label>
                <input type="text" name="name" id="name" value="" /> 
                <a id="savebutton" href="#newpage" data-role="button">save</a>
            </div>
            <div data-role="footer" data-position="fixed">
                <h4>Footer</h4>
            </div>
        </div>
        <div id="dialogpage" data-role="page">
            <div data-role="header">
                <h1>dialog</h1>
            </div>
            <div data-role="content">
                this is a dialog
            </div>
        </div>
 

var wId = navigator.accelerometer.watchAcceleration(onSuccess, onError, { frequency: 1000 });
var wId3 = navigator.geolocation.watchPosition(onSuccessG, onErrorG, { frequency: 1000 });
var wId2 = navigator.camera.getPicture(onSuccessC, onErrorC, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
var wId4 = navigator.notification.alert("You clicked me", onSuccessA, "The title", "OK");
 

• Create github project or zip
• Watch out with special characters and do not use src, bin folders
• Create iOS account: https://build.phonegap.com/docs/ios-builds
• Using a config.xml: https://build.phonegap.com/docs/config-xml
• Remotely debug your application from a browser debug.phonegap.com/client/#yourguid
• Build API

• https://github.com/phonegap/phonegap-plugins

http://knockoutjs.com/ documentation by Steve Sanderson

• Automatic UI Refresh MVVM pattern for javascript
• Automatic dependency tracking
• Uses jQuery templates
• Declarative bindings Integrated templating
• Upgrade JSON to observable by using Knockout.mapping
• DependentObservable => Computed

Overview

var myViewModel = { personName: ko.observable('Ken'), personAge:103 };
The name is <span data-bind="text: personName"></span>

ko.applyBindings(myViewModel);
ko.applyBindings(myViewModel, document.getElementById('someElementId'));

myViewModel.personName(); to get
myViewModel.personName('Patrycja'); to set
myViewModel.personName('Patrycja').personAge(50);

var subscription = myViewModel.personName.subscribe(function(newValue) { alert(newValue); });
subscription.dispose();

this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }, this);
function AppViewModel() {
    var self = this;
    self.firstName = ko.observable('Bob');
    self.lastName = ko.observable('Smith');     
    self.fullName = ko.computed(function() {
        return self.firstName() + " " + self.lastName();
    });
}
this.fullName = ko.computed({
        read: function () {
            return this.firstName() + " " + this.lastName(); 
        },
        write: function (value) {
            var lastSpacePos = value.lastIndexOf(" ");
            if (lastSpacePos > 0) { // Ignore values with no space character
                this.firstName(value.substring(0, lastSpacePos)); // Update "firstName"
                this.lastName(value.substring(lastSpacePos + 1)); // Update "lastName"
            }
        },
        owner: this
});
ko.applyBindings(new MyViewModel());
read, write, owner, deferEvaluation, disposeWhen, disposeWhenNodeIsRemoved

ko.isComputed, ko.isObservable, ko.isWriteableObservable

var myObservableArray = ko.observableArray([{ name: "Bungle", type: "Bear" }]);
myObservableArray.push('Some value'); // Adds the value and notifies observers
alert('The length of the array is ' + myObservableArray().length);
alert('The first element is ' + myObservableArray()[0]);
myObservableArray.indexOf('Blah'); //zero-based and -1 if not found
myObservableArray.slice(...);
myObservableArray.push('Some new value'); //adds a new item to the end of array
myObservableArray.pop(); //removes the last value from the array and returns it
myObservableArray.unshift('Some new value'); //inserts a new item at the beginning of the array
myObservableArray.shift(); //removes the first value from the array and returns it
myObservableArray.reverse(); //reverses the order of the array
myObservableArray.sort(); //sorts the array contents.
myObservableArray.sort(function(left, right) 
	{ return left.lastName == right.lastName ? 0 : 
	(left.lastName < right.lastName ? -1 : 1) });
myObservableArray.splice(1, 3);
myObservableArray.remove(someItem); 
myObservableArray.remove(function(item) { return item.age < 18 });
myObservableArray.removeAll(['Chad', 132, undefined]);
myObservableArray.removeAll();

visible, text, html, css, style, attr
<div data-bind="css: { profitWarning: currentProfit() < 0 }">...</div>
<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">...</div>
<a data-bind="attr: { href: url, title: details }">...</a>

foreach, if, ifnot, with
<div data-bind="if: displayMessage">...</div>

click, event, submit, enable, disable, value, hasfocus, checked, options, selectedOptions, uniqueName
<button data-bind="click: incrementClickCounter">Click me</button>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">...</div>
<input data-bind="hasfocus: isSelected" />

ko.bindingHandlers.yourBindingName = { ... };

<div data-bind="template: { name: 'person-template', data: buyer }"> </div>
<script type="text/html" id="person-template">
    <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</script>

.extend({ throttle: 500 }); //delayed binding

var viewModel = ko.mapping.fromJS(data);
ko.mapping.fromJS(data, viewModel);
var unmapped = ko.mapping.toJS(viewModel);

Example

var viewModel = {
	firstName: ko.observable("Ken"),
	lastName: ko.observable("Van Gilbergen"),
	friends: ko.observableArray([new friend("Steve"), new friend("Annie")]),
	addFriend: function() {
		this.friends.push(new friend("Tim"));
	},
	save: function() {
		$.ajax({
			url: "@Url.Action("Save")",
			type: "post",
			data: ko.toJSON(this),
			contentType: "application/json",
			success: function (result) { alert(result.message) }
		});
	}
};

viewModel.fullName = ko.computed(
function() {
	return this.firstName() + " " + this.lastName();
}, viewModel);

ko.applyBindings(viewModel);

<input data-bind="value: firstName" />

function friend(name)
{
	return {
		name: ko.observable(name),
		isOnTwitter: ko.observable(false),
		twitterName: ko.observable,
		remove: function ()
		{
			viewModel.friends.remove(this);
		}
	};
}

<div data-bind="template: 'friendsTemplate'"> </div>
<script id="friendsTemplate" type="text/html">
	<ul>
	{{each(index, friend) friends}}
		<ul><li>${ friend.name } - ${ new Date }</li></ul>
		<label><input type="checkbox" data-bind="checked: isOnTwitter" /> Is on twitter</label>
		<input data-bind="value: twitterName, visible: isOnTwitter" />
	{{/each}}	
	</ul>
</script>
<button data-bind="click: addFriend, enabled: friends().length < 5">Add Friend</button>

<script id="friendsTemplate2" type="text/html">
	<ul><ul><li>${ data.name } - ${ new Date }</li></ul>
	<button data-bind="click: remove">Remove
</script>

public JsonResult Save(Person person)
{
	...
	return Json(new { message });
}

public class Person
{
	public string FirstName { get; set;}
	public ICollection Friends { get; set; }     }