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()
{
 InitializeComponent();
 
 listBox1.ItemsSource = names;
}

private void Button_Click(object sender, RoutedEventArgs e)
{
 names.Add(textBox1.Text);
        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
   //RaisePropertyChanged("FirstName"); 

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

 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).
<StackPanel>
 <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"/>
</StackPanel>
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">
 <ListView.ItemTemplate>
  <DataTemplate>
   <WrapPanel>
    <TextBlock Text="{Binding FirstName}" FontWeight="Bold" />
   </WrapPanel>
  </DataTemplate>
 </ListView.ItemTemplate>
</ListView>
<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()
{
 InitializeComponent();

 listView1.ItemsSource = users;
}

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

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
driver.FindElement(By.Id("Name")).SendKeys("Fullname");

// 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"));
actions.MoveToElement(profileMenu);
actions.Click();
actions.Perform(); 

// 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");

Monday, 21 July 2014

TFS 2013 - Limiting Users List in User DropDown

Below is an example of how to limit users in a user selection dropdown:
<field name="Assigned To" refname="System.AssignedTo" type="String" syncnamechanges="true" reportable="dimension">
   <!-- show users that are part of the team only -->
   <validuser group="[Project]\Contributors" />

   <!-- below is another way to do that
   <allowedvalues expanditems="true">
      <listitem value="[Project]\Contributors" />
   </allowedvalues> -->

   <default from="currentuser" />   <!-- this one to have the logged on user to be automatically selected by default -->
</field>

Thursday, 17 July 2014

Modifying and Creating Work Item Type in TFS 2013

To modify a work item type in TFS 2013, we need to these steps:
- export the work item type xml file to our machines
- modify that file
- then import back the modified xml file to the TFS server

To create a new work item type, we need to:
- create a new work item type xml file
- import the new xml file to TFS server

We use Visual Studio Command Prompt to do this.

To export work item type, run this command:
witadmin exportwitd /collection:[team project collection URI] /p:[project_name] /n:[work item type name] /f:[destination file]
examples:
C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE>witadmin exportwitd 
/collection:"http://myTFSserver/tfs/DefaultCollection" /p:MyProject /n:Bug /f:C:\Users\me\Desktop\bug.xml

C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE>witadmin exportwitd 
/collection:"http://myTFSserver/tfs/DefaultCollection" /p:MyProject /n:"Product Backlog Item" /f:c:\Users\me\Desktop\pib.xml

To import work item type, run this command:
witadmin importwitd /collection:[team project collection URI] /p:[project_name] /f:[source file]
example:
C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE>witadmin importwitd 
/collection:"http://myTFSserver/tfs/DefaultCollection" /p:MyProject /f:c:\Users\me\Desktop\task.xml

To delete work item type:
witadmin destroywitd /collection:[team project collection URI] /p:[project_name] /n:[work item type name]
example:
witadmin destroywitd /collection:"http://myTFSserver/tfs/DefaultCollection" /p:"My Project" /n:"Impediment"

To rename work item type:
witadmin renamewitd /collection:[team project collection URI] /p:[project_name] /n:[existing work item type name] 
/new:[new work item type name]
example:
C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE>witadmin renamewitd 
/collection:"http://myTFSserver/tfs/DefaultCollection" /"My Project" /n:"Product Backlog Item" /new:"Enhancement"
Are you sure you want to rename the work item type Product Backlog Item to the new name of Enhancement? (Yes/No) Yes
The work item type was renamed. 

To export process configuration:
witadmin exportprocessconfig /collection:[team project collection URI] /p:[project_name] /f:[destination file]
example:
C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE>witadmin exportprocessconfig 
/collection:"http://myTFSserver/tfs/DefaultCollection" /p:MyProject /f:c:/Users\me\Desktop\ProcessConfiguration.xml

To import process configuration:
witadmin importprocessconfig /collection:[team project collection URI] /p:[project_name] /f:[source file]
C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE>witadmin importprocessconfig  
/collection:"http://myTFSserver/tfs/DefaultCollection" /p:MyProject /f:c:/Users\me\Desktop\ProcessConfiguration.xml


Reference:
MSDN: Import, export, and manage work item types [witadmin]

Thursday, 26 June 2014

Watching Attribute Value with $observe

Below is an example of how to watch for an attribute's value and do something every time it has changed. To do this we would use $observe function.

<!-- origin markup in the view -->
enter a colour: <input class="observe-test" data-ng-model="inputValue" title="{{inputValue}}"/> 
<br />
value typed: <span></span>

// directive codes
myApp.directive('observeTest', function () {
    return {
        restrict: 'C',
        link: function (scope, element, attrs) {
            attrs.$observe('title', function (newValue) {
              attrs.$set('style', 'color:' + newValue);
              element.parent().find('span').text(newValue);
            })
        }
    }
});

See the example in Plunker

Monday, 23 June 2014

More Advanced AngularJs Directive

Isolate Scope
scope option is useful for creating directive's internal variables or functions from outer values or functions.
<!-- origin markup in the view -->
<scopetest a-value="controllerData" the-value="{{controllerData}}" show-value="showPopup()"></scopetest>

// these codes are inside the controller
$scope.controllerData = 'Oii';
$scope.showPopup = function () {
    alert($scope.controllerData);
}

// directive codes
myApp.directive('scopetest', function () {  // would work as well if I had used myApp.directive('showValue' . . . restrict: 'A'
    return {
        restrict: 'E',
        template: "<p>controllerData: {{controllerData}}</p> <p>data: {{data}}</p> <p>theData: {{theData}}</p> <p>sameData: {{sameData}}</p> <button type='button' ng-click='showData()'>Click Me!</button>",
        scope: {
            data: "=aValue",
            theData: "@theValue",
            sameData: "&aValue",    // doesn't work. Seems only work for method.
            showData: "&showValue"
        }
    }
})

See the example in Plunker

In this example we use '=' to pass the value of an outer variable specified in an attribute in the origin markup. I.e., data: "=aValue" will create an internal variable called 'data' and get the value of the outer variable (an AngularJs $scope variable) specified in the 'a-value' attribute in the origin markup. The attribute name referred to follows the same matching pattern as the matching pattern of a directive name (i.e, 'aValue' matches 'a-value' in the origin markup).

'@' is used if we want to copy the literal value (copy the text) of an attribute in the origin markup. If we want to pass a value of an AngularJs variable then we need to use {{ . . . }} to get the value first before passing it to the directive. I.e., <scopetest the-value="{{controllerData}}" />

'&' is used to pass a function of an attribute in the origin markup.

If the attribute name being referred to is the same as the internal variable name then when defining the internal variable, we don't need to specify the attribute name after the symbol. E.g., aValue: "="; is the same as aValue: "=aValue";

When we are using isolate scope, external variables will not be available inside the directive. Only the variables that are declared inside scope: { . . . } will be available.


Transclude
This option is used to pass the matched origin markup and its inner content into a directive template. The parent-to-be element in the template needs to be decorated with ng-transclude attribute. All the inner content of the parent-to-be element will be overwritten with the passed markup. The directive also needs to set transclude: true to activate this option.

<!-- origin markup in the view -->
<trancsludetest>
  <div>
 This is a content from origin markup. 
 <br />
 Try to print a value: {{value}}
  </div>
</trancsludetest>

// code inside controller
$scope.value = 'controller value';

// directive codes
myApp.directive('transcludetest', function () {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div class="fancy-class" style="border: 2px solid black; padding: 2px"><div class="another--class" style="border: 1px dashed blue" ng-transclude>content inside this div will be ignored</div></div>',
    link: function (scope, element) {
      scope.value = 'directive value';
    },
    //scope: {}   // if this is used then only external values are considered
  };
})

See the example in Plunker


Priority and Terminal
priority option is useful for directives (more than one) that are defined in a single DOM element. The option is used to determine the order of how they are going to be applied, especially for their link and compile functions. The compile and pre-link functions are executed from the greatest number while post-link functions are executed from the smallest number.

If not defined, the priority default value is 0. If the directives have same priority values then it seems that they are executed in alphabetical order.

If terminal option is used then directives that have lower priorities will be disregarded.

<!-- origin markup in the view -->
<div second-priority first-priority></div>

// directive codes
myApp.directive('secondPriority', function () {
    return {
        restrict: 'A',
        link: {
          pre: function (scope, element, attrs) {
            alert('preLink - two');
            element.append("<br/>preLink - two");
          },
          post: function (scope, element, attrs) {
            alert('postLink - two');
            element.append("<br/>postLink - two");
          }
        },
        priority: 1
    }
})
.directive('firstPriority', function () {
    return {
        restrict: 'A',
        link: {
                pre: function (scope, element, attrs) {
                  alert('preLink - one');
                  element.append("preLink - one");
                },
                post: function (scope, element, attrs) {
                  alert('postLink - one');
                  element.append("<br/>postLink - one");
                }
        },
        priority: 2,
        //terminal: true
    }
});

See the example in Plunker


Require
This option is used to pass other directive's controller into the link function of the directive where the option is specified. The other directive could be a sibling directive or a directive in one of parent elements.
The require option can take a single string or an array of strings of directive names to be found.
The string name can be:
- not prefixed - to find a sibling directive
- prefixed with '?' - return 'null' if the intended sibling directive is not found
- prefixed with '^' - find the directive in one of parent elements
- prefixed with '^?' - return 'null' if the intended directive is not found in any parent elements

<!-- origin markup in the view -->
<div parent-directive>
  <div>
 <div>
   <div sibling-directive require-test></div>
 </div>
  </div>
</div>

// directive codes
myApp.directive('parentDirective', function () {
    return {
      restrict: 'A',
      controller: function ($scope) {
        this.parentData = "<br />parentDirective data.. ";
        this.parentFunction = function(param) {
            return param + "<br />   - Hi there, this is parentDirective";
        };
      }
    };
})
.directive('siblingDirective', function () {
    return {
      restrict: 'A',
      require: '^parentDirective',
      link: function (scope, element, attrs, controller)
      {
        element.append(controller.parentData);
        var test = controller.parentFunction('<br />Hello this is siblingDirective');
        element.append(test);
      },
      controller: function ($scope) {
        this.siblingFunction = function(param) {
            return param + "<br />   - Hi there, this is your sibling directive";
        };
      }
    };
})
.directive('requireTest', function () {
    return {
        restrict: 'A',
        require: ['?^parentDirective','siblingDirective'],
        link: function (scope, element, attrs, controller)
        {
          element.append(controller[0].parentData);
          var test = controller[0].parentFunction('<br />Hello this is requireTest');
          element.append(test);
          test = controller[1].siblingFunction('<br />Hello this is requireTest');
          element.append(test);
        }
    };
});

See the example in Plunker