Have you heard about TypeScript?

http://www.typescriptlang.org/Playground/

JavaScript as a language does not have object-oriented patterns in mind. With this I don’t mean that you can’t write object oriented code, but you have to do it by your own. OO is not part of the language itself. Well, there are many frameworks which jump into this area by bringing some helper functions to get inheritance and all the workarounds needed for OO and modularization stuff. But as a result it blows up the JavaScript code and it gets even harder to read and maintain it.

Is TypeScript a bad idea? I think not, because it adds the syntactic sugar needed to concentrate on the app-logic and takes away the clutter needed for OO/modularization . Take a look to other languages: the language Objective-C extends the C programming language to object-oriented programming language, but it is C-code. Or take a look to C++. It adds object oriented features to the C programming language, so it can include C-code.

So take a step back and think about JavaScript as a language not as a runtime. Then I see TypeScript as the abstraction I’m waiting for a long time. Have a look at the TypeScript code below. On the left side all the OO-stuff and modularization is well abstracted and I can concentrate on the app-logic. On the right side is the code needed for app-logic and OO/ modularization stuff produced from TypeScript compiler. Of course after working for years with JavaScript you might be familiar with the right side also, but maintaining code like this is even hard.

 

typescriptcompilerdemo

 

And then there are other features such a type-checking, refactoring, etc. which TypeScript enables since the code contains type information.

typescriptcompilerdemo1

typescriptcompilerdemo2

About these ads
Tagged

My new phone – Nokia Lumia 800

Recently wrote a small windows phone 7 app: http://www.windowsphone.com/de-CH/apps/46163462-a1c8-4858-9e99-238dbceb193a

With this app I participated then in the Microsoft Switzerland App Contest and finally won a brand new Windows Phone 7 Nokia Lumia 800.

And today is a lucky day. Here is my new phone. Thanks to Microsoft!

WP_000819

WP_000820

WP_000822

Touch enabled runtime for Windows Slates Apps

 

fmnemdskmskdmskmskxmsxksmsdkwdmk

 

Before Microsoft is changing the game next week at BUILD conference in Anaheim, I want to post one of our current developments. Driven by a project need, we have built a real touch enabled windows slate runtime.

The runtime includes:

  • touch enabled date picker
  • touch enabled Combobox with popover selector
  • touch enabled Checkbox with popover selector
  • A virtual touch keyboard which is fully integrated into the runtime in order that the textbox can be correct positioned. So the keyboard will never hide the textbox target. The keyboard provides full input scope for numbers, text and special signs (inspired by the Windows Phone 7 keyboard).
  • A navigation service to move from one to other screens.
  • Metro UI style (not yet finished). We believe Windows 8 will push Metro much more. On the other side, we experienced a much better rendering performance on slates which haven’t that much of CPU and GPU power as on a standard desktop. This allows us to use the runtime on lower equipped hardware too.
  • touch enabled Textbox with select, copy, paste and delete functionality.
  • touch enabled multiline, long-text control which morphs to a larger editor while in edit mode.
  • touch enabled list box which allows for very smooth touch scrolling, including a bounce effect if it reaches the end.
  • Full Screen app style, without windows border and chrome.
  • Message box service
  • And much more….

 

Deep knowledge in Windows Phone 7 programming allowed us to get the most possible out of WPF in which we have built the runtime, so that the controls and application feels like a real world touch application like other known platforms. We’ve had enough of words. The best way to show our first release is a short video.

 

rjidmewcewmkcdmk3454km3ckm3e4df

http://files.thekieners.com/blogcontent/2011/Evidence4SlateV1/

Btw. This video was recorded by a Windows Phone 7! Not that bad for a phone.

 

What’s coming next?

  • Thumbstoning the View State, in order that the user can exit the app at any time and restart it at the position he has left the app (Similar as we know form the Windows Phone).
  • Improving Metro style
  • Adding more controls
  • See what is coming with the Windows 8 announcement next week….
Tagged , ,

Using Google’s LibPhoneNumber in Microsoft.NET with C#

LibPhoneNumber from Google is an awesome library. LibPhoneNumber is a Java, C++ and Javascript library for parsing, formatting, storing and validating international phone numbers. You can input any phone number from over the world and the lib is telling you if the phone number might be valid, from which country the phone number is and the number format which is common for the number type and region.

 

libphonenrresultsmsmsmssm

 

Well, I was looking for such functionality, because our CRM users have to enter phone numbers from all over the world and we want to format and validate the phone number. Unfortunately there is no C# or VB.NET version available from this great Google library so I ended in doing some tests to integrate them into Microsoft.NET environment.

 

The first try

I’ve build my own JavaScript function the get the needed functionality running (region code, number formatting) in my own html site. Then I merged all related Google JS files from the closure-libaray into one single file with help of the Google closurebuilder.py. This task is very good documented by Google.

So, after that I was looking for a JavaScript engine running in .NET, so that I can execute JS-code in managed .NET runtime. I thought the DLR support of .NET would be the best environment to do this. Unfortunately there is no official JS engine from Microsoft so far. So I ended in trying some engines found on codeplex.com. javascriptdotnet.codeplex.com did the job. This engine can interpret the Google JS file (which has a size of ~500kb and is quite big) and returns the correct result. I should mention here that other engines did also work but sometimes with a wrong result. But stop, there is still a problem with this JS engine: it does not run under 64bit system. This is because the engine used the v8 engine from Google behind the scenes and the v8 only supports 32bit (x86) architectures. There are some hacks to use v8 under 64bit but these seems to be too much experimental.

 

Second try

I’ve tried to convert the Java code into C# manually and by a converter tool. Result: no success, because there are too much of specialties in the code and my java knowledge is somewhat old.

 

Third try

There is a C++ version available and I thought it should be possible to use it via p/invoke within .NET. But there seems to be a similar issue with 32/64bit systems. So I did not further investigate into this possibility.

 

Last and successful try

So finally I’ve tried to use the phone metadata directly within C#. Google’s metadata behind the Java project is a very well structured XML document written by Google which contains a lot of regex patterns. These patterns build a structure to find out to which country a number belongs and which number format is common for a specific region.

 

phonemetadataxmlofromgooglednmdmdmdm

 

I was very surprised how easy it was to use this metadata XML in my own code. With just a few lines and within two hours the prototype was working…. well, to finalize the library has cost me another day…

 

Source

At the end I thought it is worth to share my code with other C#/VB.NET folks. You can grab the code here. It does not everything the original Google library can do; I just implemented the cases that we need in our project (resolve the region and common format for any phone number). Here is a quick example of the C# code (from the Unit Test project…)

 

phonenumberresultincsharp

 

Let me see if someone other is interested to use this C# version. If so i can put the code onto codeplex.com or so. Any feedback is highly appreciated.

 

Happy coding

Tagged , , ,

Just bought a Mac

For testing reasons we bought us a new MacBook. We need them mainly to test some web projects in the Safari browser and to check whether our Silverlight client works well on an Apple machine.

mymac1

mymac2

Nothing special, just a simple MacBook… but my frist ever… Smiley

mymac3

…grab the newest Silverlight Plugin…

IMG_0326

Since that there are no signs that Apple will allow Silverlight on iOS, I decided to start with iPhone and iPad development just for fun and experimental stuff. Recently I’ve started with learning objective-c and cocoa framework. Fortunately there exists a cross-compiler solution with the MonoTouch framework so that I can use my favorite programming language, C#, on the Mac.

monotouch

Video about my first Windows Phone 7 App in the marketplace

It demonstrates the access to our backend system called “evidence” and allows to browse online through different data objects.

Check out the video (put sound on…)

VideoWindowsPhone

Tagged ,

Expression Blend Samples not working with Silverlight 4 and WPF 4

This blog post is just to document my experience with the Expression Blend Sample source together with Silverlight 4 or WPF 4.0

If you are using the Expression Blend Samples from codeplex (http://expressionblend.codeplex.com) then you might experience some problems when using the included triggers and behavior within SL4 or WPF4 runtime. The problem is that a dependency property with the type System.Windows.Data.Binding is not set to due to a change in the MS.Internal.Data.DynamicValueConverter class. Since SL4 / WPF4 the DynamicValueConverter uses the value of the binding instead of the binding instance itself. As example, the Command property of the InvokeDataCommand trigger is declared as System.Windows.Data.Binding, but the DynamicValueConverter will return the value of the binding, an ICommand compatible instance, and not the binding instance itself. So, the command property will always be null, because DynamicValueConverter cannot cast the object. And if the command binding cannot be set, the BindingListener, which is used internally, will not work correctly.

image

If we change the binding target from a dependency property to a simple CLR property, then the DynamicValueConverter can set the property and InvokeDataCommand works as before.

image

I’ve found that codeplex user AvdMeulen changed the whole Expression sample source and submitted a zip package on codeplex. See link below.

 

Let’s go into more details:

Silverlight 3 does not allow using data binding on types which are NOT inherited from class FrameworkElement. That means that the entire Silverlight standard behaviors and triggers do not support data binding, because the Trigger and Behavior classes are directly derived from DepedencyObject. Nevertheless, if you use data-binding with a trigger- or behavior property in Silverlight 3, then the binding system does not execute the binding, but it tries to set the binding instance itself to the property as a value of type System.Windows.Data.Binding. This will be done through the MS.Internal.Data.DynamicValueConverter class. If the target property is not of type System.Windows.Data.Binding it will not work and you get an AG_E_PARSER_BAD_PROPERTY_VALUE exception from the XAML parser. Based on this binding-engine behavior, Pete Blois invented the BindingListener class.
His trick was to declare properties on behaviors and triggers as type of System.Windows.Data.Binding in order to get them bindable. The binding is still not executed by the binding system and to bind them he declared a dummy attached dependency property and set the binding instance to the attached dependency property. The result is that the attached dependency property can execute the binding and we can just listen to when the attached dependency property changes. This results in a full functional binding for non-FrameworkElements. All this is encapsulated in the BindingListener class.

But now, why it does not work for SL4 anymore? The answer can be found in the breaking changes for Silverlight 4.

image

 

With SL4 it’s now possible to data binding dependency properties on triggers and behavior too, which makes the BindingListener class useless. This is also the reason why the Binding property remains null, because the SL4 binding engine set a BindingExpression and not the Binding itselfs and the BindingExpression tries to set the Command value instead of the Binding instance.

 

Link resources:
http://expressionblend.codeplex.com/workitem/8148
http://www.sztronka.com/2010/01/behaviors-triggers-and-memory-leaks-in.html
http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2010/03/27/silverlight-4-blend-4-mvvm-binding-dependencyobject.aspx
http://compiledexperience.com/blog/posts/blendable-mvvm-commands-and-behaviors
http://blois.us/blog/2009/04/datatrigger-bindings-on-non.html

Tagged ,

RelativeSource Binding with FindAncestor mode in Silverlight

Silverlight 3 introduced the RelativeSource Binding that is well known from WPF. Unfortunately Silverlight only supports the two modes Self and TemplatedParent.

image 

I don’t know why the FindAncestor mode is missing in Silverlight’s RelativeSource binding, but there is a real need for that in Silverlight too. I’m finding me quite often in a dead-end ifI want to set a binding to a command or value in the view model within a list box item template. The problem in the example below is that the list box item has its own data context set to an item in the items-collection.

image

In the case above I really need a relative binding to set a binding to the RemoveCommand and to the global Picklist collection as comboxbox source. On solution is to create a bidirectional relationship between the view models behind the scene in order to get a reference to the parent view model within the child view model. But this not the solution I was looking for.

After some googling I found a binding helper written by Colin Eberhardt which enables it to use a relative binding with help of an attached dependency property.

clip_image001

Explained in brief: Colin uses an attached property to set his own relative source binding configuration for an specific element. When the attached property becomes attached to the target element it adds a handler for the elements loaded event. Within the event handler, he walks up the visual tree to find the specified ancestor and constructs a binding expression between the source and target properties.

Based on Colin’s idea I’ve created a similar implementation which provides some different behaviors:

  • Support for a list of relative binding. This allows binding more than one property of an element.
  • It does not use a relay object in the middle of the binding. It is a pure binding without any custom code in between. This gain in a better performance, especially when using a storyboard to animate the data bound value.
  • I have added some special type of relative binding mode which is called as ParentDataContext mode. In that mode it walks up the visual tree until it finds a new data context. This is very helpful when having templates in an ItemsControl, ListBox or DataGrid.
  • Support for non-dependency property as source, e.g. direct usage of view model properties.
  • Support for property path syntax for the source property, e.g. DataContext.Person.Name
  • The AncestorType allows to set a base class as type criteria instead of the concrete type, e.g. if the concrete element is of type Grid, then the AncestorType can be set to Panel.
  • Allows to set the relative binding for attached properties too, e.g. to bind TooltipService.Tooltip property.
  • Allows to use OneWay or OneTime binding mode.
  • Allows to set any other binding parameter such as ValidatesOnNotifyDataErrors, ValidatesOnExceptions, ValidatesOnDataErrors, NotifyOnValidationError and ConverterCulture.
  • Enables to set the XAML namespace for controls which are not in the core-control assembly.

How to use

Let’s have a look at some examples.

1. Simply relative binding with ancestor type

<ComboBox>
    <local:BindingHelper.Binding>
            <local:RelativeSourceBinding Path="DataContext.Picklist"
                    TargetProperty="ItemsSource" RelativeMode="FindAncestor"
                    AncestorType="UserControl" />
    </local:BindingHelper.Binding>
</ComboBox>
 

 

2. Bind two or more properties by adding a list of binding definitions

<ComboBox>
    <local:BindingHelper.Binding>
        <local:BindingList>
            <local:RelativeSourceBinding Path="DataContext.Picklist"
                    TargetProperty="ItemsSource" RelativeMode="FindAncestor"
                    AncestorType="UserControl" />
            <local:RelativeSourceBinding Path="DataContext.Tooltip"
                    TargetProperty="(ToolTipService.ToolTip)" RelativeMode="FindAncestor"
                    AncestorType="UserControl" />
        </local:BindingList>
    </local:BindingHelper.Binding>
</ComboBox>

 

 

3. Bind any attached dependency property

<local:RelativeSourceBinding Path="DataContext.Tooltip"
        TargetProperty="(ToolTipService.ToolTip)" RelativeMode="FindAncestor"
        AncestorType="UserControl" />

 

 

4. Bind an attached dependency property from any assembly. Just specify the XAML namespace as in the example below

<local:RelativeSourceBinding Path="DataContext.Tooltip"
        TargetProperty="(DemoAttachedElement.Value)"
        TargetNamespace="clr-namespace:RelativeSourceBindingDemo;assembly=RelativeSourceBindingDemo"
        RelativeMode="FindAncestor" AncestorType="UserControl" />

 

 

5. Use the parent data context instead an ancestor type

<local:RelativeSourceBinding Path="RemoveCommand" TargetProperty="Command"
        RelativeMode="ParentDataContext" />

 

 

6. The mode ParentDataContext is set as default behavior. So in most cases you can just write xaml as following:

<Button Content="Remove" CommandParameter="{Binding}">
    <local:BindingHelper.Binding>
        <local:RelativeSourceBinding Path="RemoveCommand" TargetProperty="Command" />
    </local:BindingHelper.Binding>
</Button>

<ComboBox Grid.Column="1">
    <local:BindingHelper.Binding>
        <local:BindingList>
            <local:RelativeSourceBinding Path="Picklist" TargetProperty="ItemsSource"/>
            <local:RelativeSourceBinding Path="Tooltip" TargetProperty="(ToolTipService.ToolTip)" />
        </local:BindingList>
    </local:BindingHelper.Binding>
</ComboBox>

 

 

7. Use a converter and other binding settings

<local:RelativeSourceBinding Path="Application.IsEnabled"
        TargetProperty="Visibility" Converter="{StaticResource VisibilityConverter}"
        ValidatesOnNotifyDataErrors="True" ValidatesOnExceptions="True"
        ValidatesOnDataErrors="True" NotifyOnValidationError="True" />

 

Source Code & Demo Project

Here you can find the full source code within a demo project.

Tagged ,
Follow

Get every new post delivered to your Inbox.