Just passed 70-480 exam Programming in HTML5 with JavaScript and CSS3

Recently I’ve found out that it is possible to pass 70-480 exam for free if you have the promo code. The promo code is HTMLJMP and I’ve found it here: Microsoft virtual academy.

Though I post in this blog more about Windows development, I have lot of experience with web development as well, so it’s been easy for me to pass this exam.
Before taking this exam, I learned some new features of HTML5:

  1. CSS Grid and Flexbox layouts. Yyou don’t need to use difficult floats and absolute positioning any more, everything is as easy as using StackPanel and Grid controls in XAML.
  2. Javascript web workers which run in a real background thread. But I don’t know where they can be useful, it is good only for service calls which are already aynchronous and ajax calls don’t require any background javascript threads.
  3. New HTML tags like <nab>, <aside> and others, which must be useful for search engines, but they don’t seem to be different from ordinary <div>.
  4. Storage API where you can store data instead of cookies. For example, you can save comments which users type and if they accidentally close the browser and don’t post anything, you can restore entered text after they visited the site once again, which is very convenient.

I will not post examples of questions, because you can find them on the famous free website examcollection. Although they have correct questions, sometimes they have incorrect answers, so you should know the subject, certification of which you are going to pass.

Now I can pass other exams and receive MCSD title.
There are 2 of them related to web development:

And 1 related to Windows development:

 

As you can see, 2 certifications are almost the same. So what they promised became true: you can develop Windows applications by using HTML and Javascript instead of C# and XAML.
I wouldn’t say that it is bad, because actually Javascript is an easy language, and it is much easier to perform UI manipulations by using CSS and Javascript instead of XAML. If you tried to design custom controls, you know how horrible XAML is, it is much more inferior in comparison with CSS. On the other hand C# is much better than Javascript.
So I hope that there will be a way to use HTML and C# together while developing Windows store apps, as it is already possible with web sites and ASP.Net MVC.

Advertisements

Highlight found text in ListBox for Silverlight and WP7

You probably saw an implementation of search where all matches of the entered query were highlighted in the text or list, or table. Here are 2 screenshots which illustrate the described functionality:

It is very easy to implement in Javascript, just 4 lines:

var html = element.html();
html = html.replace(new RegExp("<span class=\"highlighted\">(.*?)<\/span>", "i"), "$1"); // clear the previous highlight
html = html.replace(new RegExp("(" + query + ")", "i"), "<span class=\"highlighted\">$1</span>"); // highlight the current search query
element.html(html);

But it is slightly more difficult in Silverlight. However the approach is the same:
1. Get the text value.
2. Replace some places in the text by a span with some user-defined style.
3. Parse the result text and display it.

I have created a new project by using the Windows Phone Databound Application template in Visual Studio, so that I don’t need to create base mark-up and add default data, Visual Studio creates everything by itself.

At first, we need to write methods which replace values of ListBox by formatted values. The corresponding javascript code is `html.replace(new Regexp(…))`. The C# code looks so:

public void Search()
{
    this.ClearHighlights();

    if(string.IsNullOrEmpty(SearchQuery))
    {
        return;
    }

    this.AddHighlights();
}

private void ClearHighlights()
{
    var highlightRegex = new Regex("<Run Foreground='Yellow'>(.*?)</Run>");
    foreach (var item in this.Items)
    {
        item.LineOne = highlightRegex.Replace(item.LineOne, "$1");
        item.LineTwo = highlightRegex.Replace(item.LineTwo, "$1");
    }
}

private void AddHighlights()
{
    var searchRegex = new Regex(string.Format("({0})", this.SearchQuery), RegexOptions.IgnoreCase);
    foreach (var item in this.Items)
    {
        item.LineOne = searchRegex.Replace(item.LineOne, "<Run Foreground='Yellow'>$1</Run>");
        item.LineTwo = searchRegex.Replace(item.LineTwo, "<Run Foreground='Yellow'>$1</Run>");
    }
}

The `LineOne` and `LineTwo` properties contain some strings which are displayed in each item of the ListBox.

Finally, we need to write a binding which correctly displays a text with the `Run` tags. The corresponding javascript code is `elem.html(html)`. I used attached property for this task:

public static class TextBlockProperties
{
    public static string GetStyledText(DependencyObject obj)
    {
        return (string)obj.GetValue(StyledTextProperty);
    }

    public static void SetStyledText(DependencyObject obj, string value)
    {
        obj.SetValue(StyledTextProperty, value);
    }

    public static readonly DependencyProperty StyledTextProperty =
        DependencyProperty.RegisterAttached("StyledText", typeof(string), typeof(TextBlock), new PropertyMetadata(null, StyledText_Changed));


    private static void StyledText_Changed(DependencyObject d, DependencyPropertyChangedEventArgs args)
    {
        var tb = (TextBlock) d;
        var text = (string) args.NewValue;

        if(string.IsNullOrEmpty(text) || !Regex.IsMatch(text, "<Run.*?>.*?</Run>"))
        {
            tb.Text = text;
            return;
        }

        var formattedTextBlockXaml = "<TextBlock xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>" + text + "</TextBlock>";
        var formattedTextBlock = (TextBlock) XamlReader.Load(formattedTextBlockXaml);

        // detach parsed inlines from the view tree
        var inlines = formattedTextBlock.Inlines.ToList();
        formattedTextBlock.Inlines.Clear();

        // add inlines to the specified text block
        tb.Inlines.Clear();
        foreach (var inline in inlines)
        {
            tb.Inlines.Add(inline);
        }
    }
}

So now all that you need is to use the StyledText property instead of Text:

<TextBlock ext:TextBlockProperties.StyledText="{Binding LineOne}" />

In my example I used the yellow color for highlighting, but you can change any property of the `Run` class, like FontWeight (Bold), FontStyle (Italic) and others, the list of properties you can find here: Run Class.

The sample application which I used in order to make the 2 screenshots above you can download here: Wp7ListSearchSample.zip

Windows Phone 7 chart libraries overview. AmCharts

After the previous post I decided to explore the internet and find some other chart libraries for WP7. Unfortunately, there are only two free chart libraries: the previously mentioned Silverlight Toolkit and AmCharts. You can download the last charts here: http://wpf.amcharts.com/download.

This is a very small library and the last time it was updated was more than 1 year ago. It contains only 4 charts: Line, Column, Area, Pie. Here are screenshots of them:

The code for a chart item is quite simple:

<amq:SerialChart Style="{StaticResource chartStyle}" 
		DataSource="{Binding Charts[0].Items}" 
		CategoryValueMemberPath="Month">
	<amq:SerialChart.Graphs>
		<amq:LineGraph ValueMemberPath="Value" Title="Test Chart" />
	</amq:SerialChart.Graphs>
</amq:SerialChart>

For some unknown reason, the pie chart should be created by the different XAML code:

<amq:PieChart DataSource="{Binding Charts[3].Items}"
		TitleMemberPath="Month" 
		ValueMemberPath="Value" />

Advantages of these charts:
1. Free and open source (source code: https://github.com/ailon/amCharts-Quick-Charts);
2. Display the tooltip if you tap a data series;
3. Look better on the phone than the Toolkit charts with the default template.
4. Have small size and must work faster than Toolkit.

Disadvantages:
1. Only 4 kinds of charts;
2. Almost no customization, difficult to apply your own design;
3. Annoying behavior: if you tap the legend or the y-axis they will disappear and you will have to tap once again to display them;

As for me, I would use the Toolkit library and would customize their theme so that it looks more like metro style controls. But this library is good as well if you want just to display a chart without any customization.

The source code of the sample application with AmCharts you can download here: Wp7ChartsSamples.Amcharts.zip

Windows Phone 7 charts. Silverlight Toolkit.

Earlier I thought that WP7 Toolkit had chart controls. But it was surprising for me that charts weren’t ported to the WP7 library and if you want to use them, you have to use the Silverlight 3 toolkit with the S3 controls library as it is described in this post. The thing that I don’t like is that I have to add an extra library and also there is the annoying warning message that the library isn’t compatible with WP7. So I created the WP7 library, downloaded the source code of the toolkit and rewrote some code so that it didn’t use the extra reference.

Now you can use this library, which is more suitable for WP7: System.Windows.Controls.DataVisualization.Toolkit.dll.
For some reason the size of this library is 400kb, slightly larger than the silverlight library, I think it is because I haven’t removed *.xaml files.

As it was already said, the xaml code is the same as in WPF and Silverlight versions:

<charting:Chart>
	<charting:PieSeries Title="Test items" ItemsSource="{Binding Items}" DependentValuePath="ItemValue" IndependentValuePath="Title" />
</charting:Chart>

I’m going to examine some other chart libraries for Windows Phone 7 and I will write about their advantages and disadvantages in future posts.

The source code of the tooolkit charts and the sample application you can download here: WP7ToolkitCharts.zip

Updated BindableTabControl post

It is an update to this post.

In that post I implemented the extended TabControl which supported data binding, however it had one inconvenience that it didn’t allow to access and customize its TabItems. Personally me, I have never used TabItems, but it happened that one guy needed to change the Visibility property of specific items, here is his comment. So he added some code to my class and send it to me.

If you use the control from the original post, XAML code will look like this:

<local:ExtendedTabControl 
    ItemsSource="{Binding}" 
    ItemTemplate="{StaticResource ExampleHeaderTemplate}" 
    ContentTemplate="{StaticResource ExampleContentTemplate}" />

Now you can use the third property TabItemTemplate and write your code so:

<local:ExtendedTabControl ItemsSource="{Binding}">
	<local:ExtendedTabControl.TabItemTemplate>
		<DataTemplate>
			<controls:TabItem Visibility="{Binding Visibility}" HeaderTemplate="{StaticResource ExampleHeaderTemplate}" ContentTemplate="{StaticResource ExampleContentTemplate}" />
		</DataTemplate>
	</local:ExtendedTabControl.TabItemTemplate>
</local:ExtendedTabControl>

The first code is enough in most cases, but if you want to use some properties of the TabItem class like Visibility, Style, Template, it is preferable to use the second code.

The source code of the updated control is available here.

Working with JSON web services in Silverlight and Windows Phone 7

In this post I’ll explain how to retrieve and display data from JSON web services.

As an example I’ll use the REST service from geonames.org.

JSON response of the example looks so:

At first, you should create C# classes (models) which can be mapped to JSON entities.
The first curly braсe indicates that it is an object, and it has 1 property `geonames`. After this property you can see the square bracket indicating an array. This array consists of many objects, and each object has 12 properties.
So we should create a model for the root object, which looks so:

// { geonames: [{}, {}, {}] }
[DataContract]
public class CitiesList
{
	[DataMember(Name = "geonames")]
	public List<City> Cities { get; set; }
}

It is important to add DataContract and DataMember attributes to the class and all its properties. Also you should specify the name of the corresponding JSON property (geonames) inside the DataMember attribute.

Then we should create the model for inner objects (cities). As you already saw, each JSON object has 12 properties, but we don’t need all of them. So we can specify only those proeprties which we need, and .Net deserializer will ignore all other properties.

// { name: "", countrycode: "", population: -1 }
[DataContract]
public class City
{
	[DataMember(Name = "name")]
	public string Name { get; set; }

	[DataMember(Name = "countrycode")]
	public string CountryCode { get; set; }

	[DataMember(Name = "population")]
	public int Population { get; set; }
}

So now all that you need is to create an instance of the HttpWebRequest class, get the response and deserialize it by using the DataContractJsonSerializer class. The deserializer requires the System.Servicemodel.Web and System.Runtime.Serialization references.

You must use the two following methods to perform loading and parsing of JSON.

private void BeginDownloadCitiesRequest()
{
	// create the http request
	HttpWebRequest httpWebRequest = WebRequest.CreateHttp("http://api.geonames.org/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=en&username=vortexwolf");
	httpWebRequest.Method = "GET";
	httpWebRequest.Accept = "application/json";

	// get the response asynchronously
	httpWebRequest.BeginGetResponse(OnGetResponseCompleted, httpWebRequest);
}

private void OnGetResponseCompleted(IAsyncResult ar)
{
	var httpWebRequest = (HttpWebRequest)ar.AsyncState;

	// get the response
	var response = httpWebRequest.EndGetResponse(ar);

	// deserialize json
	var jsonSerializer = new DataContractJsonSerializer(typeof(CitiesList));
	var responseObject = (CitiesList)jsonSerializer.ReadObject(response.GetResponseStream());

	// display on the view
	Deployment.Current.Dispatcher.BeginInvoke(() => OnCitiesDownloaded(responseObject));
}

The code of creating a http request and getting a response will often repeat in different places of the application, so it is preferrable to move this code to a separate class.
I did it so:

public class HttpGetTask<T>
{
    public HttpGetTask(string url, Action<T> onPostExecute)
    {
        this.Url = url;
        this.OnPostExecute = onPostExecute;
    }

    public void Execute()
    {
        if (this.OnPreExecute != null)
        {
            this.OnPreExecute();
        }

        // create the http request
        HttpWebRequest httpWebRequest = WebRequest.CreateHttp(this.Url);
        httpWebRequest.Method = "GET";
        httpWebRequest.Accept = "application/json";

        // get the response asynchronously
        httpWebRequest.BeginGetResponse(OnGetResponseCompleted, httpWebRequest);
    }

    private void OnGetResponseCompleted(IAsyncResult ar)
    {
        var httpWebRequest = (HttpWebRequest)ar.AsyncState;

        // get the response
        HttpWebResponse response;
        try
        {
            response = (HttpWebResponse)httpWebRequest.EndGetResponse(ar);
        }
        catch (WebException)
        {
            this.InvokeOnErrorHandler("Unable to connect to the web page.");
            return;
        }
        catch (Exception e)
        {
            this.InvokeOnErrorHandler(e.Message);
            return;
        }

        if (response.StatusCode != HttpStatusCode.OK)
        {
            this.InvokeOnErrorHandler((int)response.StatusCode + " " + response.StatusDescription);
            return;
        }

        // response stream
        var stream = response.GetResponseStream();

        // deserialize json
        var jsonSerializer = new DataContractJsonSerializer(typeof(T));
        var responseObject = (T)jsonSerializer.ReadObject(stream);

        // call the virtual method
        this.InvokeInUiThread(() => this.OnPostExecute(responseObject));
    }

    private void InvokeOnErrorHandler(string message)
    {
        if (this.OnError != null)
        {
            this.InvokeInUiThread(() => this.OnError(message));
        }
    }

    private void InvokeInUiThread(Action action)
    {
        Deployment.Current.Dispatcher.BeginInvoke(action);
    }

    public string Url { get; private set; }

    public Action<T> OnPostExecute { get; private set; }

    public Action OnPreExecute { get; set; }

    public Action<string> OnError { get; set; }
}

You can execute this task by specifying Url and the OnPostExecute callback. Also you can set other properties. Example:

public class MainViewModel : INotifyPropertyChanged
{
    public MainViewModel()
    {
        Cities = new ObservableCollection<CityViewModel>();

        string url = "http://api.geonames.orgzz/citiesJSON?north=44.1&south=-9.9&east=-22.4&west=55.2&lang=en&username=vortexwolf";
        
        var task = new HttpGetTask<CitiesList>(url, this.OnPostExecute);
        task.OnPreExecute = this.OnPreExecute;
        task.OnError = this.OnError;

        task.Execute();
    }

    private void OnPreExecute()
    {
        this.IsLoading = true;
    }

    private void OnPostExecute(CitiesList responseObject)
    {
        this.OnCitiesDownloaded(responseObject);
        this.IsLoading = false;
    }

    private void OnError(string message)
    {
        MessageBox.Show(message);
        this.IsLoading = false;
    }

    public ObservableCollection<CityViewModel> Cities { get; set; }

    private bool _isLoading;

    public bool IsLoading
    {
        get { return _isLoading; }
        set
        {
            _isLoading = value;
            RaisePropertyChanged("IsLoading");
        }
    }

    private void OnCitiesDownloaded(CitiesList citiesList)
    {
        var cityModels = citiesList.Cities
            .Select(c =>
                    new CityViewModel
                    {
                        Name = c.Name,
                        CountryCode = c.CountryCode,
                        Population = c.Population
                    })
            .ToList();

        cityModels.ForEach(this.Cities.Add);
    }

    public event PropertyChangedEventHandler PropertyChanged = delegate { };

    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
}

I created the sample application for Windows Phone 7 which retrieves JSON data and displays it on the phone.

The source code of the example you can download here: PhoneJsonTest.zip

Silverlight and WPF Timeline Scroll View

Here is another control which I had for a long time but only recently have decided to arrange the source code and post it here.
That’s how it looks:

Although it looks very complex, actually it is quite simple: it is just the styled ScrollBar control on the left and the ScrollViewer on the right.

The grey control with years on the left is the UserControl called TimelineScrollBar, mark-up of which looks so:

<Grid>
	<ItemsControl x:Name="rowItems">
		<ItemsControl.ItemTemplate>
			<DataTemplate>
				<Grid Height="{Binding Height}">
					<TextBlock Text="{Binding Text}"/>
				</Grid>
			</DataTemplate>
		</ItemsControl.ItemTemplate>
	</ItemsControl>

	

	<ScrollBar x:Name="VerticalScrollBar" Style="{StaticResource TimeLineScrollBarStyle}" />
</Grid>

The rowItems items control and the VerticalScrollBar scroll bar are related to the dependency properties TimeItemsSource and BoundScrollviewer which should be set outside and are handled in the code-behind:

<Views:TimelineScrollBar x:Name="timelineScroller" 
 TimeItemsSource="{Binding TimelineItems}" 
 BoundScrollViewer="{Binding ElementName=listScroller}" 
 Width="120" />

The TimelineItems is the special collection of items { Text, Height}. These properties must be present and they are quite generic, so you can use any labels instead of years.

The generation of these items is the most difficult part, after that everything is quite easy.

Create the view model:

public class MainViewModel
{
	public List<TestItemViewModel> Items { get; private set; }

	public List<TimelineItemViewModel> TimelineItems { get; private set; }
}

Set is as DataContext to the view:

<Grid>
	<Views:TimelineScrollBar x:Name="timelineScroller" 
 TimeItemsSource="{Binding TimelineItems}" 
 BoundScrollViewer="{Binding ElementName=listScroller}" 
 Width="120" />

	<ScrollViewer x:Name="listScroller">
		<ItemsControl x:Name="list" ItemsSource="{Binding Items}" ItemTemplate="{StaticResource itemTemplate}" ItemsPanel="{StaticResource itemsControlTemplate}" />
	</ScrollViewer>
</Grid>

In this example I used the ItemsControl class for simplicity. If you want to use it with the ListBox class, you should change its ControlTemplate and retrieve the name of the inner ScrollViewer control so it can be bound to the timeline scroll bar.

The source code of my example you can download here: TimeScrollViewerSample.zip