April 29, 2013, 3:50 pm
So I started to look at writing an Android app. I took a class on Android and wrote a prototype Android App in fall of 2011. Well, I have a need to write an Android App again.
I am a C# developer and while I am comfortable with Java, I prefer C# so I am going to use MonoDroid.
I installed everything very easily using the MonoDroid installer. However, when I went to launch an Android Virtual Device (AVD) it seemed to start but even after leaving it over night, it didn’t finish booting.
So I did some research and the recommendation was to install the Hardware Accelerated Execution Manager.
So I had to:
1. Open the Android SDK Manager and install the Intel x86 Emulator Accelorator (HAXM).
2. Run the installer I found here:
C:\Users\jbarneck\AppData\Local\Android\android-sdk\extras\intel\Hardware_Accelerated_Execution_Manager\IntelHaxm.exe
After that, opening an AVD was plenty fast.
April 11, 2013, 6:31 am
In the example below, radio buttons selection list is created by binding to a list in the view model. I show how to bind to both the selected radio button’s value and name. I also show how to disable a button unless the radio button is selected.
<!-- Step 1 - Create the HTML File or the View -->
<!DOCTYPE html>
<html>
<head>
<!-- Step 2 - Include jquery and knockout -->
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="scripts/knockout-2.2.1.js"></script>
<!-- Step 3 - Add script to run when page loads -->
<script type="text/javascript" >
$(document).ready(function(){
<!-- Step 4 - Add a RadioButtonModel -->
function RadioButtonModel(inText, inValue, inGroupName) {
this.text = inText;
this.value = inValue;
this.name = inGroupName;
}
<!-- Step 5 - Create ViewModel -->
function SurveyViewModel() {
var self = this;
<!-- Step 7 - Create an observable list -->
this.list = ko.observableArray([
new RadioButtonModel("Good", 10, "Q1"),
new RadioButtonModel("Average", 5, "Q1"),
new RadioButtonModel("Poor", 1, "Q1")
]);
<!-- Step 8 - Create a selected item -->
this.selected = ko.observable(0);
<!-- Step 9 - (Optional) Create a computed value to get the selected text -->
this.selectedtext = ko.computed(function() {
var text = "";
ko.utils.arrayForEach(this.list(), function(item) {
var selectedItem = self.selected();
if (selectedItem == item.value)
text = item.text;
});
return text;
}, this);
<!-- Step 10 - Create a computed value to require a selection before submitting -->
this.canClick = ko.computed( function() {
return this.selectedtext() != "";
}, this);
}
<!-- Step 10 - Create a computed value to require a selection before submitting -->
ko.applyBindings(new SurveyViewModel());
});
</script>
</head>
<body>
<!-- Step 11 - Create a div containing the html for one radio button and bind to foreach: list -->
<div data-bind="foreach: list">
<input type="radio" data-bind="attr: {name: name}, value: value, checked: $root.selected" /><span data-bind="text: text"></span>
</div>
<!-- Step 12 - Add html elements to see other properties -->
<p data-bind="text: selected"></p>
<p data-bind="text: selectedtext"></p>
<!-- Step 13 - Add a button and bind its enable state -->
<button type="submit" id="btnSubmit" data-bind="enable: canClick">Submit</button>
</body>
</html>
Hope this helps you.
April 9, 2013, 9:17 pm
The MVVM pattern is an excellent pattern for separating the UI or View and the Code or ViewModel and Model.
With Knockout.js the MVVM pattern can be used with HTML5.
Previously I wrote this post: Using jQuery to enable/disable a button based a text box
This same thing could be done using binding and the MVVM pattern, with jQuery and Knockout.js.
Here is a single file example of using knockout.js and with databinding.
<!-- Step 1a - Create the HTML File or the View -->
<!DOCTYPE html>
<html>
<head>
<!-- Step 2 - Include jquery and knockout -->
<script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="scripts/knockout-2.2.1.js"></script>
<!-- Step 3 - Add script to run when page loads -->
<script type="text/javascript" >
$(document).ready(function(){
<!-- Step 4 - Create a ViewModel -->
function BasicViewModel() {
<!-- Note: In this case the model is just a string and a bool -->
<!-- Step 5 - Create a text property to bind the text to -->
this.text = ko.observable('');
<!-- Step 6 - Create a bool property to bind the button enabled state to -->
this.canClick = ko.computed(function() {
return this.text() != null && this.text() != '';
}, this);
}
<!-- Step 7 - Activates knockout.js bindings -->
ko.applyBindings(new BasicViewModel());
});
</script>
</head>
<body>
<!-- Step 8 - Create a HTML Elements with bindings -->
<input data-bind="value: text, valueUpdate:'afterkeydown'" />
<button type="button" id="btnEnter" data-bind="enable: canClick">Enter</button>
</body>
</html>
Anyone who knows MVVM will surely realize that while this example is all in a single file, it is likely that you will have a separate viewmodel javascript file in a production environment.