Angular2 - Directives

Directives give us the ability to create tags which can be directly used in the template. Since they are not HTML5 templates, we need to define how Angular can render these components In the end, they would be converted to a representation that a browser...

Neo4j – An Introduction

A graph database allows data to be saved in terms of nodes and edges and their properties. This type of database suits the business cases where entities and their relationships defines the whole concept. They are faster to query too. In addition to storing data as nodes and relationships, they provide extra-ordinary query and visualization...

NW.JS (node-webkit) – An Introduction

Node webkit allows HTML5 applications to run in a desktop. It uses NodeJS and Chromium. Both are using the same V8 javscript engine. Since this runs as a desktop application, it doesn’t have the sandbox restrictions. So in the same page, you can open a file from file-system and then render the contents in the web browser.

NW.JS allows calling node js modules directly from DOM.

In this example, we would create a sample application which would...

Creating and Deploying Local Scala SBT Packages

In the last few months we have discussed various features of scala. Some features required using other scala packages. In this post, let’s discuss how we can create our own artifacts. We can also discuss how we can use these packages in other scala projects locally.

Let’s create a sample Scala SBT project AdderLib. It is using Scala version 2.11.7 and SBT version 0.13.8. Just select auto-import ...

Apache Thrift & C#

Services are based on the idea of RPC (Remote Procedure Calls). Apache Thrift is just another framework allowing us to write services but it makes it easier to write them by enabling polyglot development.

Apache Thrift enables writing cross language services...

Using Overridden members with Partial Mocks for abstract Types

For a serious unit testing mocking framework is a required piece. It allows creating mocks for dependencies we don't want to instantiate in our code. We discussed about partial mocks long time ago [refer post]. They are specially useful for testing abstract types. Actually they provide a proxy implementation for the virtual / abstract members.

In this post we are going to discuss a special case when we have overridden some members of a parent type. We might not have overridden the other members or we just are good with the default null proxy implementation. Generally the mocking framework would just provide proxy implementation for all virtual / abstract members. How can we make sure that it uses the implementation in our type if we have provided so.

For our demo project, we are using nunit with Moq. Let's create a test project, and add the following nuget packages.



Here we have introduced BaseClass with a public member [Calculate] and two abstract members [CalculateCore and SomeOtherMethod]. It is inherited from another type ChildClass, which provides an implementation of CalculateCore only.


Now let us try to add unit tests for testing the functionality for this type. Here we have added a methods to check the result of Calculate method. Since we have added a definition of CalculateCore member, it should be adding the two parameters and just returns the result.


When we run this test, we get failure. If we look at the result, it doesn't actually make a lot of sense. Actually it is not even using the CalculateCore implementation from ChildClass.



But can we actually tell mocking framework to avoid providing implementation of overridden members. Actually Moq supports this by providing CallBase member for Mock. Here we have another implementation of the same ChildClass. The only difference is that mock has this member set. Now it should use the overridden member, CalculateCore, and test should pass.


And test passes now, Zindabad!!!

Bluetooth Smart Beacon Specifications

Apple released iBeacon with iOS 7. iOS is a very big segment of smart phone users but there is a big market for android and other OSes as well. As apple made it difficult for the iBeacon manufacturers for providing SDKs for Android, they came up with alternate specifications as a workaround. One such example is AltBeacon from Radius Network. You might...

iBeacons & Bluetooth LE

Bluetooth Low Energy (Bluetooth LE) is also known as Bluetooth Smart. It is designed to provide Bluetooth based functionality without draining the battery power of your device. Bluetooth LE is part of Bluetooth 4.0 specification. You can download the specification from Bluetooth.org. You would find three kinds of…

Running Redis Server On Windows

Redis is a high performance key / value store. It is a NoSQL database. It supports various types of values including scalar and complex data structures including list, set, sorted set and hashset. We can just serialize our (e.g. JSON or XML) and just push it to Redis.

In this post we are going to learn how we can setup Redis on a Windows machine. In some later posts, we should see how we can build some example applications using Redis...

Amazon S3 Sink for Semantic Logging Service – Enterprise Library 6

Event Source API was introduced in .net framework 4.5 to support semantic logs. It allows an application to author events. These events are generated as ETW events which can be consumed in-proc or out-proc. For a general in-proc consumption, the API has introduced EventSourceListener type.

Semantic Logging Application Block (SLAB) has developed on top of EventSource API with more focus on event’s consumption. It has introduced sinks for consumption which are utilized by ETW event listener in the application block. These events are destination specific. The Pattern & Practices (p&p) team...

Email Marketing & Amazon Simple Email Service (SES)

This is the age of social media. Our customers have myriad of different gadgets in the form of phones and tablets. But even in this day and age, e-mail promotions and marketing is still heavily used and relied upon. Do we need to delve and create innovative ways into sharing the promotions and marketing other than this? Is e-mail marketing still effective? In this post, let’s try to understand...

Android Development - Services

This is a continuation of a post for building an android app for displaying GitHub contributions of a user. We are pulling down profile and repository details of the user. As we are adding features to the app, we have been learning about android and its development model.

Currently we are at the point that we can download the data asynchronously and display it on the UI. We can also change user and the data is downloaded for the new user. In this post, we want to build up on this by moving all the heavy lifting for downloading the data to a background service...

Android Development - Offline Support

This post is amongst the series of post for discussion about development of an App in Android Platform. We have been developing an app, named GitHub Contributions as an example. In each post, we keep adding some new feature to the app, which adds to our knowledge about android.

In this post, we are going to see how we can add offline support to our app. So if a user has launched our app and there is no internet connection available, we cannot download user profile’s data from github.com. In this case, we can show any previous data downloaded for the specified user. If we are running the app for the first time for the user, then we can just show a Not-Connected message on the screen. As soon as the user connects to the network, we can attempt to download the information and show the pretty view.

Read more....

Android Development - Scheduled Execution

This is a continuation of our post discussing different areas of android development. We are getting introduced to android development while developing an application GitHub Contributions App. There are a number of ways we can delay processing of some work in android. It also allows us to execute these work items on a periodic basis. There are a number of options for an android developer for introducing scheduled execution.

Read more...

GitHub Contributions App - Android Internal file Storage

This is a continuation of a post for building an android app for displaying GitHub contributions of a user. We are using name of user for pulling down profile and repository details of the user. As we are adding features to the app, we have been learning about android and its development model.

Currently we are at the point that we can download the data asynchronously and display it on the UI. User can also change user and the data is downloaded for the new user. In this post, we want to build up on this by adding the following:

Keep the data in a file so that when the app needs it it can just be pulled from a file rather than being downloaded from the web. This can also cater to the offline scenarios when the app is launched while being disconnected from the network. We also don’t need to download data if the app is launched within 3 hours of when the data was downloaded last time.

Read more...

GitHub Contributions App - Android App Preferences

In this post we are continuing with the app. We will be updating the action bar from default to custom. Currently, you can only see author’s GitHub contributions. We will be providing a setting to change GitHub user. The feature will be provided by adding an action bar button for settings. Read more...

XAML - Designing for Automation - Exposing ControlTemplate (s)

Application design and development is an art. It requires to be adept in tools of the trade. For Xaml technologies, the better you are in writing XAML and underlying framework, the better designer you are. For developing WPF applications, very commonly, we use custom controls, control templates and data templates but they make it really difficult to automate our applications. I thought it would be a good idea to write a two-part series to discuss the roadblocks of automating UIs and their possible solutions. This is the first part of the series. Here we are discussing how to expose elements from a ControlTemplate.

For this post, we will be assuming that you have Windows SDK installed on your machine. We would be using UI Automation Verify tool from the SDK. You can download the SDK from Microsoft's download page.



Let's consider a very simple application. It just consists of a button shown in the middle. The requirements suggested that it has to be elliptical and painted as green. It has to have some text at its center with some border around. In the bottom, it should have a copyright text. As ugly as it can look, it is shown as below :)



This is the XAML used for creating the above window. Here we are using a custom button. We are not adding anything else to the button but we are setting some properties. The underlying button should use them.


Since this greatest button is not available off-the-shelf, we need to update the existing button's ControlTemplate. Here we are adding Ellipse, Border and TextBlocks to the template. In order to respect the properties defined in parent control, here we are using TemplateBinding.


Here UIAutomationButton is derived from Button. Let's keep its definition empty for now. Let us run the application now. When we try to view the hierarchy in UI Automation, it is surprising to see that we see no elements under button. We know that they are in the ControlTemplate. Now your automation guys would complain that they cannot see any elements under the button, so they cannot automate this application.



Now previously we have discussed that Microsoft has provided UIAutomation API for nearly all of its UI technologies including WPF. For exposing elements for automation, we introduce AutomationPeer for elements. Generally, there is a 1:1 correspondence between a control type and its automation peer. It is the responsibility of control authors to provide automation peer for the controls for automation. We have discussed about AutomationPeer here [Discussion about AutomationPeer].

In order to expose the elements defined under the control template, we need to introduce a new AutomationPeer for the new button type. The type inherits from ButtonAutomationPeer defined under System.Windows.Automation.Peers namespace in PresentationFramework assembly. In order to provide the automation peers for its children, an AutomationPeer needs to override GetChildrenCore method. The method returns a list of child automation peers for its children. Now don't go recursive, it just needs to do it for its immediate children.

Just look at how it is finding the expected children from Owner's Template using FrameworkTemplate.FindName() method [MSDN].


There are no AutomationPeer(s) provided for the types which are not expected to be automated. They include shapes , decorators and panels [MSDN Reference]. In this example, I have included all three of them i.e. Border(Decorator), DockPanel(Panel) and Ellipse(Shape). It is possible that we want to automate and verify some of them. In the above example, we have assumed that we don't have to expose DockPanel but we do need to do it for Border and Ellipse. Since there is no custom automation peer for them, we have just used FrameworkElementAutomationPeer for Ellipse.

Since we have to expose a child TextBlock from Border, we need to define a custom AutomationPeer for border. Here we have defined UIAutomationBorderAutomationPeer for this purpose. Since the TextBlock is directly a child of Border, we can access that using FrameworkElement.FindName() method [MSDN].


Now the control needs to tell automation framework about AutomationPeer it prefers for automating itself. It does so by returning an instance of the intended automation peer in an overridden OnCreateAutomationPeer() method [MSDN].


Now let's run it again and try to see how it has affected the hierarchy for automation. Here we notice that although the Ellipse and Border is available but there are no TextBlock(s). Now we know we have two TextBlocks in our design. But why are they not visible here?



Actually TextBlocks are not always visible for automation. I have no idea why Microsoft decided to hide TextBlocks from automation when they are part of a ControlTemplate. They are visible only when they are part of a ContentPresenter in a DataTemplate. Since Microsoft has opened up its Source code for easy reference, you can verify this from here:



Since TextBlocks are defined under a ControlTemplate, they are not available for Automation. In order to fix this, we need to add a new AutomationPeer for our TextBlocks. You don't need to provide a derived type for TextBlock. Only a child TextBlockAutomationPeer with overridden IsControlElementCore() should be enough.


We also need to update the other Automation peers to use this instead of TextBlockAutomationPeer wherever we need to expose TextBlocks.


Now the UI Automation Verify should be able to show the hierarchy as follows:



Now we just need to assign AutomationIds to these controls in order for them to be automated. Zindabad!!!

Get It from GitHub



What about Template Parts [Part_SOMETHINGS]
Now let me give you an exercise to practice what you have learned here. As an example we have this Custom ListBox with Header as a TemplatePart. We are naming it as Part_Header.


And we have the ControlTemplate for the ListBox as follows:


We are using the HeaderedListBox as follows to create our UI.


But when we look at the UI Automation Verify. The whole hierarchy under the list box is empty.



Let’s see if you can create an automation peer for this. Keep me posted.

Simple App Orientation for Windows Store Applications With Prism

In this post we are trying to focus how we can control application state for an App. We have chosen Windows Store Apps as the platform of choice. It provides SimpleOrientationSensor as the device orientation changes.

Let's start with PCL
Let's create a simple Portable class library project. We are naming it as SimpleOrientationEx.Portable. The project is supposed to hold the orientation state type. The application state would be based on an enumeration type, also defined in the same PCL project. For this simpleton project, let's use the maximum numbers of target frameworks.



These are the simple possible orientations of the app. It includes portrait, landscape and their contra-states. It also has face-up and face-down states. These are the states when the device is held in a perfect horizontal position either face-up or down. As a developer, you might have realized that it is really difficult for an app to determine how the device is being held, and should the display be using portrait or landscape layout.

Now let's introduce an interface type to hold the current application orientation. It holds the state in a CurrentOrientation property. We are naming the interface-type as IAppOrientation.

Let's implement this now. In addition to implementing the CurrentOrientation member from the interface type, it also introduces a protected member to update the current orientation of the App.


Windows Store App Orientation
As an example application, let us consider Windows Store Apps for Windows 8.1. We are creating a specialized type of AppOrientationBase class to hold the orientation state of a Windows Store App. The specialized type is named as AppOrientationWindowsStore.

Windows Store Apps can use SimpleOrientationSensor to determine the device orientation. The sensor type is available in Windows.Devices.Sensors namespace. It provides the application orientation using enumeration type.



The enumeration type has similar values as our AppOrientationState. We can define a mapping between the enumeration values of AppOrientationState and SimpleOrientation. Here MapOrientation() method is defining this mapping for us.

Let's introduce Reactive Extensions
Here we are adding reactive extensions core nuget package [Reactive Extensions Homepage]. Not only this makes throttling these events a child's play but also provides the events as Obervable.OnNext() sequence. This can be achieved using Obervable.FromEventPattern().

Since updating the layout for orientation change can be very involved process rendering heavy load elements, let us throttle the orientation changes a little. Here we are throttling the OrientationChanged event from SimpleOrientationSensor for one second. The throttled events are not raised in the publisher's thread but a different thread pool thread. Since we are updating the UI in the subscription code, we can observe the sequence using SynchronizationContext.Current. This would execute the handler code in the required UI thread.


Prism for Windows Store App
Now let us add Prism for Windows Store App nuget package. We introduce the main view model for the App. It just has a string based property to hold some text data. The view model inherits from ViewModel type from Prism.

The view model keeps the App orientation. It instantiate the member using default SimpleOrientationSensor. Like other Windows Store App sensors, SimpleOrienationSensor singleton instance can be obtained using the static GetDefault() method.

Prism for Windows Store App provides the support of restoring the application state using RestorableState attribute. We are decorating the only property with this attribute. This should restore the application state when application is restored to Running from Suspended state. [MSDN: App Lifecycle] [Handling Suspend, Resume & Activation in a Windows Store App]



Prism for Windows Store App also provides MvvmAppBase type. We can inherit from this to further control the App. Here we are overriding OnLaunchApplication and OnNavigationFailed methods. Here OnLaunchApplication is being used to navigate to MainPage.xaml as the app is launched. Based on the convention, we must have [X]Page.xaml. Here [X] is the first argument to the NavigationService.Navigate() method. We can override this mapping by overriding GetPageType() method. It is passed with the same string as pageToken and it should return the mapped Page type.

Now we add an IValueConverter to convert the enumeration value to string.


App Orientation and View Updates
Now we turn our attention to the view. We have a simple view with a TextBlock and TextBox. They are bound to the same property in the view model. Here we are using Prism's view model auto-wiring capabilities. The view model should be named following the Prism's convention. For our case, it is named as MainPageViewModel [ [X]PageViewModel ].

Here we have also introduce a RotateTransform for the Grid to the RenderTransform property. We are defining the center of the grid as the origin of the transformation by assigning RenderTransformOrigin as "0.5, 0.5".

Now we add Visual states to the page. All of these states correspond to different states in AppOrientationState enumeration. In order to keep the example simple, we are just animating the RotateTransform defined above for the Grid. It just rotates it keeping the view always upright. We are also defining transitions to these states to ease the rotation effect.


Introduce Behavior SDK (XAML) extension
Now we need to define the transitions between these states. These transitions should be based on the states in IAppOrientationState in MainPageViewModel. This is very tricky in Windows Store Apps as there is no DataTrigger support for the platform. In Visual Studio 2013, Microsoft added support for some behaviors including DataTriggerBehavior. Let us add the extension SDK using Reference Manager dialog.



In addition to DataTriggerBehavior, we are also using GotToStateAction from the same extension. This can be used to transition to a particular visual state.


Get Code from GitHub

Reactive UI - Part I [ Setting the Ground Up ]

All of us who have been designing and developing using XAML technologies use ICommand interface on a daily basis. The interface requires implementation of Execute() and CanExecute() methods. Here Execute method is used to perform an action in response to a user interaction. However, the action can only be executed if CanExecute() method returns true. You might have commonly seen a Command being bound to a button. In this case, button would be enabled or disabled based on the evaluation of CanExecute() method of the ICommand. Now let me throw the main question in the air...

Can we run into a situation when a button is enabled when it is not supposed to, and How often ICommand.CanExecute() is called?

Let me first give you the answer of first part of the question, YES, we can certainly run into situations when a button should be disabled when it is supposed to be enabled and vice versa.

The second part of the question is tricky. It is dependent upon the implementation of ICommand. Other than the required Execute and CanExecute() methods, the interface also requires implementation of CanExecuteChanged event. So CanExecute method would be called in all those instances when the command raises this event. If you look at Josh Smith's implementation of ICommand i.e. RelayCommand, here we are directly hooking it up with CommandManager.RequerySuggested event. Now all user interactions would result in re-evaluation of CanExecute(). But what if the underlying property changes value in response to an event other than any user action. In all those situations, we could face this problem.



We might have different implementations handling this differently. This is quite similarly handler in MVVMLight Libs.



And this is from Prism's DelegateCommand type. That's why we need to call RaiseCanExecuteChanged for DelegateCommand every time we need re-evaluation of CanExecute method.



In order to understand the severity of the problem, let's create a sample WPF application. The following is a sample view model with FirstName property of type string. It also has an ICommand property, SubmitCommand. Here we are using Josh Smith's implementation of ICommand i.e. RelayCommand. The code can be found at his original article on msdn. In the command's CanExecute() method, we are checking if FirstName is null or empty, we are returning false in this case. This should disable the button.


And here is the view which is using the view model, defined above, as its DataContext. It is Binding the FirstName property to a TextBox. Since UpdateSourceTrigger is set as PropertyChanged, it would continue to update the source property as user keeps modifying the text. It also has a button which binds its Command property to view model's SubmitCommand. Now clicking the button should cause running the Execute method of the command. The button should be enabled only when the command's CanExecute() method returns true.


As we are modifying the text in the TextBox, we see that as we empty the TextBox, the button is disabled, which is as expected.



Actually modifying the content of the TextBox cause CommandManager.RequerySuggested to be triggered. Since RelayCommand uses this, it causes CanExecuteChanged event to be triggered. Since the UI framework hooks up to this event. It causes CanExecute to be called.

In order to understand the problem, let's add the following code to our view model. It just flips the value of FirstName property between string.Empty and "Not Empty" literal. Here we expect that as soon as we set it to String.Empty, the button should be disabled. Here we are using a System.Timers.Timer for this purpose. Since Elapsed event is invoked on a ThreadPool thread, the value is being updated without any user interaction on a non-UI thread. Since WPF is very forgiving about PropertyChanged on a non-UI thread, we don't have Dispatcher issues for assigning a value to FirstName in this thread.


Let's run the application and see the result. As shown here, the button is always enabled. This is how we have defined CanExecuteChanged event in RelayCommand. Since MVVMLight's RelayCommand is also defined similarly, we should have the same problem there. For Prism's DelegateCommand, we need to call RaiseCanExecuteChanged(), which raises CanExecuteChanged event for the command.



Now we understand the problem. In the next post, we are going to see how we can resolve it. Stay tuned!

Viewing Markdown Text in WPF Applications

From HTML to XML, we have seen a lot of markup languages. They are generally considered as languages which have TAGS. These tags are generally angle brackets. Historically, the word came from book publishing. If you look at Wikipedia, Markup languages are defined as follows:

A (document) markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text.

So it is to provide extra information with the text in order to further define it. These annotations can be used for presentation and processing of the text. It can also set some piece of text aside from such treatment. Generally, the presentational aspect of markup are considered and used. These languages describe how some data should be formatted and displayed. They are document formatting in nature. Since we have different data display requirements in various scenarios, there are many markup languages developed to handle them. HTML describes formatting of documents displayed in a browser. So it is browser specific and cannot be used outside its context.

The idea of Markdown is considered an opposite of Markups. This was created by John Gruber in 2004. For Markdown, we describe how data should be presented, but this is not specific to any target engine. You can develop a parser to render the input text to your required format. As the world is getting older, we have more and more need to support cross platform applications as developers. So, we can write some text in a Markdown style and transform it to the format of our choice. The concept is similar to Rich Text Format (RTF) but this is not properietry. There are a number of markdown flavors but we are not going to discuss them here as they still need to be standardized.

The standard file extension of a markdown file is *.md. As Markdown has gained popularity, it has enjoyed very fast industry wide acceptance. The most popular amongst the adopters of the format is StackOverflow.com. Wordpress and other Blog Engines have plugins to support the format. Even GitHub's Read Me file uses this format. Vim , Notepad++ and Sublime editors also have plugins to support Markdown syntax highlighting and previewing.

Markdown Editors
There are many markdown editors available. They are available online and for installation. I am listing some of them here. Just search for Markdown Editors.



Let's write some Markdown now!
Let's write some markup now. Here we are using Markdown.Xaml tool. The tool can be downloaded from here.



You can download the markdown text from the following. It is in markdown format. Since we have saved it using *.md file extension, it is displayed as formatted. Just select View Raw from the following editor.


Let's see how easy it is to convert the Text to Html. We can use MarkdownSharp nuget pacakge for this purpose for our .net applications. It provides the type to transform a markdown text. The tool supports transformation to HTML format.



Let's see how the converted text looks like. Here we are previewing the converted text in Text Visualizer in Visual Studio.



How to use this for WPF?
Since this is giving output as HTML, the easiest option is to use a browser control and somehow render this converted HTML as browser already supports such formatting. What if we don't or can't use it like that. Is there a way to show it as native WPF. Yes, there is. But we need to use a solution from Bevan Arps. There is currently no nuget package for this. But since the code is available on GitHub, we can get the code and build it locally. We can the use the library and reference it in our project.



Running the code would read the markdown text from the file. It then transforms it using the Markdown type. The type transforms the text into FlowDocument, which can directly be used in a WPF application. As you can notice, the utility is not perfect as you can notice that Heading has not been transformed correctly. But this can be good enough for your needs. Just check it out!



This solution should be good for WPF. Silverlight doesn't support FlowDocument yet. So you might want to search for other solutions for markdown. Although you should be able to find some Markdown editors in Windows Phone and Silverlight, but I couldn't find a Markdown viewer for them.