Friday, 10 October 2014

Basic Navigation in Ionic

On this post we will see how to do basic navigation in Ionic Framework.

1. First we need to configure the routes in AngularJS:
app.config(function($stateProvider, $urlRouterProvider) {
  .state('home', {
    url: '/',
    templateUrl: 'home.html'
  .state('pageOne', {
    url: '/page1',
    templateUrl: 'one.html'
  .state('anotherPage', {
    url: '/whatever',
    templateUrl: 'myhtml.html'
In the example we use UI Router to manage our routes. Each route has a state name, a defined url and an actual path for the view content. In the end, we also define the default url to be called when a url targeted does not match any in configurations.

2. Then on our main page, we just need to use
It will be useful to add a navigation bar with back button and also to have an animation effect like this:
<ion-nav-bar class="bar-positive">
        <ion-nav-back-button class="button-icon ion-arrow-left-c">

    <ion-nav-view animation="slide-left-right"></ion-nav-view>
When we use Ionic navigation back button, the scripts behind it automatically do the job in storing page histories and pulling out the previous page as well as redirecting to the page when clicking the element.

3. Finally create each partial view using
    . . .

For a complete working example, please see here in Plunker.

Friday, 3 October 2014

Navigation in MVVM Light using Messenger

There are a few ways to implement navigation in MVVM Light based application. One of them is to use the Messaging framework of the toolkit. We will see a simple example of how to do this on Windows Phone.

1. First, in our view, we need to register to listen for a message that we want to receive :
(uri) => NavigationService.Navigate(uri)
We can put this in the view constructor or OnNavigatedTo() method. This code is saying that I want to register to receive any message that delivers uri type that uses 'MyToken' token. If there is any then I will execute an action which in this case is calling NavigationService.Navigate(uri).

2. Then in the view model, we need to create a command to trigger the message that will be broadcasted.
We add a RelayCommand property for a navigation command:
public RelayCommand NavigateCommand { get; private set; }
Then in the view model constructor we initialise that (or could be on the property getter above):
NavigateCommand = new RelayCommand(() =>
Messenger.Default.Send<uri>(new Uri("/PageName.xaml", UriKind.Relative), "MyToken");

3. Finally bind the command property to a control on the view xaml file using:
Command="{Binding NavigateCommand}"

Soon we will have many repetitive codes in our views, so we could put the codes to register for the message in a base class like this:
public class BasePage : PhoneApplicationPage
 protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
 Messenger.Default.Register<uri>(this, "MyToken", uri => NavigationService.Navigate(uri));

 protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
So we just need to make our views inherit from this class.

On our xaml files, we also need to replace

and also

Another way to do navigation is by creating our custom navigation service to be used in our view models. This nice article, explains how to implement it in details.

Thursday, 2 October 2014

Getting Started with Cordova and Ionic in Visual Studio

On this post, we will see how to install Visual Studio Apache Cordova tool and Ionic framework and get started with a sample application.

1. First we need to download and install Apache Cordova tool from here. At the time of writing, the version is CTP 2.0.

2. Then once completed, open Visual Studio to create a new project. On the New Project dialog, go to JavaScript project templates then Multi-Device Hybrid App. Select Blank App (Apache Cordova) then create a project.

3. Install Ionic through NuGet. At the time of writing, the latest version is v1.0.0.0-beta.1. This will add many AngularJS and Ionic files into our project.

4. Install Ionic on local machine so that we could create some sample applications with particular templates and use some of the files in our project. To do this, open Node.js command prompt then run this command:
npm install ionic -g
-g is used to install the package globally

5. On the command prompt, go to a directory where you want to have Ionic sample applications then run this command:
ionic start SideMenuAppExample sidemenu
This command will generate a sample Ionic application with side menu navigation.

6. Go to the generated app folder then to 'www\js' folder then copy app.js and controllers.js into our project.

7. Also copy the whole 'templates' folder and its content into our project.

8. Then on our project index.html file:
- add a reference to 'Content/ionic.css'
- add a reference to 'scripts/ionic.bundle.js'
- add references to the two JavaScript files that we have copied over (app.js and controllers.js)
- add 'ng-app="starter"' in the body
- add <ion-nav-view></ion-nav-view> inside the body content

Once finished, we will have something like this on our index.html:
<!DOCTYPE html>
    <meta charset="utf-8" />

    <link href="Content/ionic.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
<body ng-app="starter">

    <!--library scripts references-->
    <script src="scripts/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <!--custom scripts references-->
    <script src="app.js"></script>
    <script src="controllers.js"></script>

Then run the application. We should see a sample app with side menu running.

Wednesday, 17 September 2014

ObservableCollection Example

ObservableCollection is a built in collection type that raises change notification if any element in the collection is changed or deleted or a new element is added to the collection. If we want to create a custom collection type that raises change, we need to use INotifyCollectionChanged.

Below is a simple example of using ObservableCollection:
private ObservableCollection<string> names = new ObservableCollection<string>() { "aaa", "bbb", "ccc" };

public MainWindow()
 listBox1.ItemsSource = names;

private void Button_Click(object sender, RoutedEventArgs e)
        names[0] = "ABC";
and on the view:
<ListBox x:Name="listBox1" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" />
<TextBox x:Name="textBox1" HorizontalAlignment="Left" Height="23"  TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<Button Content="Add Name" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="100" Click="Button_Click"/>            

Thursday, 11 September 2014

Using INotifyPropertyChanged to Notify Value Change

Recently I start learning more on Windows development so will write more about this topic from now to the near future.

Among the first things that I have learned is how to use INotifyPropertyChanged to raise notification whenever a property value of a single object changes.

How to Implement The Interface
The steps of how to use this interface:
- first we need to inherit our class from this interface
- include the interface's PropertyChanged event property
- write a method to raise value change notification, i.e.; RaisePropertyChanged()
- call that method from each property that we would like it to have this feature
public class User : INotifyPropertyChanged
 private string _firstName;

 public string FirstName
  get { return _firstName; }
  set { 
   _firstName = value; 

   // this is the old way to do

   // this is now possible in C# 5 that we don't need to specify the property name

 public string LastName { get; set; }

 public event PropertyChangedEventHandler PropertyChanged;

 /* // this is the old way to do
 private void RaisePropertyChanged(string propertyName)
  if (this.PropertyChanged != null)
   this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

 // this is now possible in C# 5 that we don't need to specify the property name
 private void RaisePropertyChanged([CallerMemberName] string caller = "")
  if (PropertyChanged != null)
   PropertyChanged(this, new PropertyChangedEventArgs(caller));

Then on the view we specify the class instance as the data context. One simple way to do this is by initialising it in the view code behind constructor. Note that we are only using the simple way here, not a MVVM approach.
DataContext = user;

Then in our .xaml file we can bind the property(ies) to a control(s).
 <TextBlock Text="{Binding FirstName, Mode=OneTime}" HorizontalAlignment="Left"  TextWrapping="Wrap" VerticalAlignment="Top"/>
 <TextBlock Text="{Binding FirstName, Mode=OneWay}" HorizontalAlignment="Left"  TextWrapping="Wrap" VerticalAlignment="Top"/>
 <TextBlock Text="{Binding FirstName}" HorizontalAlignment="Left"  TextWrapping="Wrap" VerticalAlignment="Top"/>
 <TextBox Text="{Binding FirstName, Mode=TwoWay}" HorizontalAlignment="Left" Height="23"  TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
 <Button Content="Button" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="75"/>
In the example above, when we try to change the value in the textbox, the new value will be propagated to other controls after we move focus from the textbox. A button is included so that we could click the button after changing the textbox value or press 'tab' key to move the focus away from the textbox.

Binding Modes
Notice that the binding modes specify the direction the change flows:
- TwoWay - data change flows in both directions between source and target properties.
- OneWay - data change only flows from source to target property. This is commonly used for readonly controls.
- OneTime - data change only flows once from source to target property when the control is initialised
- OneWayToSource - the reverse of OneWay mode
- Default - use the default binding mode of the control. If a mode is not specified then the default value is used.
To avoid performance overhead, we should use the mode that is really needed. From the lightest to the heaviest are OneTime, OneWay and TwoWay.

Usage in Collection
If we have a collection of objects which class implements INotifyPropertyChanged then when one of its properties value changes, the change will propagate too. As long as the property raises changes (by calling a raise notification method) like our FirstName property calls RaisePropertyChanged() method, then it will propagate.

Below is a codes example of a collection of users in a List type that will notify change when one of its first names is changed:
<ListView Name="listView1">
    <TextBlock Text="{Binding FirstName}" FontWeight="Bold" />
<Button Content="Change User" HorizontalAlignment="Left"  VerticalAlignment="Top" Width="100" Click="Button_Click"/>

private List<User> users = new List<User> { new User { FirstName = "first", LastName = "last" }, new User { FirstName = "second", LastName = "last2" } };

public MainWindow()

 listView1.ItemsSource = users;

private void Button_Click(object sender, RoutedEventArgs e)
 users[0].FirstName = "CHANGED";

Friday, 15 August 2014

Bundling and Minification Feature in MVC

On this post we will see how to implement CSS and JavaScript files bundling and minification feature in MVC.

1. Add files
First, we need to add the files inside RegisterBundles() method of App_Start\BundleConfig.cs class. Make sure that our web project has installed Microsoft.AspNet.Web.Optimization library. If not then we can use NuGet to install it.

1.1. Adding CSS files
We use StyleBundle class to add the CSS files. First we specify the bundle name and the relative path where it is going to be generated from. Then we add the intended files to it using relative path url.
StyleBundle cssBundle = new StyleBundle("~/Styles/bundledcss");
 . . .

1.2. Adding JavaScript files
This time we use ScriptBundle class. The process is similar as adding CSS files above.
ScriptBundle scriptsBundle = new ScriptBundle("~/Scripts/bundlescripts"); 
 . . .
We can also use -{version} syntax when including a file. For example; ~/Scripts/jquery-{version}.js
When using this, the '.min' version will be used in release mode and normal version will be used in debug mode. The '-vsdoc' version for IntelliSense will be ignored.

In addition, wildcard character '*', can be used as well when including files to include all matching files.

2. If using Debug mode, set BundleTable.EnableOptimizations
If we want to see bundling and minification in action in debugging mode ('compilation debug="true"' is set in web.config file) then we need to set
BundleTable.EnableOptimizations = true;
otherwise each file will be called individually like before.

In my development environment, I set up a release and a debug build configurations with 'compilation debug="true"' in my web.config. In the Build section of the project properties, the debug build configuration has 'Define DEBUG constant' checked. Then I do
#if !DEBUG
BundleTable.EnableOptimizations = true;
so that I could have the bundling and minification work when I use release build configuration and off when using debug build configuration.

Below are the complete codes from the steps above.
public class BundleConfig
 public static void RegisterBundles(BundleCollection bundles)
  StyleBundle cssBundle = new StyleBundle("~/Styles/bundledcss");
   . . .

  ScriptBundle scriptsBundle = new ScriptBundle("~/Scripts/bundledscripts"); 
   . . .

  #if !DEBUG
  BundleTable.EnableOptimizations = true;

3. Include that method in Application_Start() in Global.asax.cs
protected void Application_Start()
 . . .
 . . .

4. Render the bundle on the view
We render the styles bundle with Styles.Render() method and JavaScript files bundle with Scripts.Render() method, passing the same bundle name and path as when it was created.


Files ordering
The optimisation library uses some predefined rules for ordering the files that we include. If we found that our site breaks because of the files were ordered differently from the ones we specify then we need to do a little tweak to override the default ordering. To do this, we need to implement a custom class inherited from IBundleOrderer, then just simply return the files as they are in its OrderFiles() method.
public class AsListedOrderer : IBundleOrderer
 public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
  return files;
Then set the custom orderer in our bundle. For example:
public class BundleConfig
 public static void RegisterBundles(BundleCollection bundles)
  ScriptBundle scriptsBundle = new ScriptBundle("~/Scripts/bundledscripts"); 
  scriptsBundle.Orderer = new AsListedOrderer();
   . . .
  . . .

What about the minification?
When we are using StyleBundle or ScriptBundle type to create a bundle, the minification feature is already included in it. However if there is a syntax error in one of our files then the minification might not be applied and we could see the warning when we open the bundle uri on a browser to see the content.

If for a reason, we do not want to apply minification in our bundle, then we could use Bundle type instead. In fact, StyleBundle and ScriptBundle types inherit from Bundle type.

Bundle versioning
When the library creates a bundle, it will add calculated hash result of the files content as a querystring. For example; "/Scripts/bundledscripts?v=8mW7h5gn2CgW9MkumYwMSzClMgRORVfdSNBsizgxyoU1"
So if we make a change in our files, the generated hash value will be different. This is another good benefit for us so that we do not need to worry about our content being cached by browsers thus the latest changes will always be rendered.

Friday, 8 August 2014

Some Selenium Code Examples

Below are some Selenium code examples:
var driver = new FirefoxDriver();

// select an option on a dropdown list by its text
new SelectElement(driver.FindElement(By.Id("lstStatus"))).SelectByText("Active");
// another example
driver.FindElements(By.CssSelector("#dvSelectListItems li")).Where(elem => elem.Text.Trim() == "some text").FirstOrDefault().Click();

// get text from a table in its second row and second column
driver.FindElement(By.CssSelector("#tbSearchResults tr:nth-child(2) td:nth-child(2)")).Text

// check whether an element is displayed
driver.FindElement(By.CssSelector("div.accordionContent")).Displayed == false

// fill an input field with text

// get a td element that has a particular title attribute value
driver.FindElement(By.CssSelector("td[title='a title']"));

// trick to do hover on a menu
Actions actions = new Actions(driver);
var profileMenu = driver.FindElement(By.LinkText("Profiles"));

// wait for maximum ten seconds until an element is displayed
var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
wait.Until(d => d.FindElement(By.Id("divDashContainer")).Displayed);

// navigate to an url
driver.Navigate().GoToUrl("some url");