Nick's Blog

Using hierarchical page navigation and MVVM in Xamarin Forms

Nick J Trogh — Fri, 10 Mar 2017 13:15:17 GMT

In this post I’ll explain how to use hierarchical page navigation in a Xamarin Forms application. To demonstrate this, we’ll use the Xamarin Alliance template application, that we use in the Xamarin Alliance program. This program consists of a set of coding challenges to get hands-on experience with Xamarin and Azure to build connected mobile applications. If you’ve never used Xamarin before, make sure to check the first challenge of the Xamarin Aliance, where you’ll set up your developer machine to get started. If you already have your developer machine set up, you can just download the source code from the GitHub repo to follow along. Here you can see a screenshot of what we’ll be building - a main page that contains a list of Star Wars characters and a detail page that shows the details for the selected character.

Hierarchical Page Navigation

Xamarin Forms has multiple ways to implement page navigation: In this post I’ll explain how to leverage hierarchical page navigation – for more details on other navigation experiences, you can check the online documentation. The hierarchical page navigation implements the page navigation as a stack, where you push pages onto a stack to navigate forwards and pop off the last page on the stack to navigate backwards (LIFO – last in, first out). To implement this navigation model, we make use of the NavigationPage class, that allows navigating through a stack of ContentPage objects. Out of the box, the NavigationPage already adds some navigation UX to your application: a page icon, title and back button. And the nice thing is that Xamarin Forms makes sure this matches the specific paradigms of the different mobile OSes.

Setting the main page

The first step in adding hierarchical page navigation to your app is to change the app’s main page to be a NavigationPage instead of a ContentPage – this is done in the App.cs file: [csharp] public App() { // The root page of your application MainPage = new NavigationPage(new CharacterListPage()); } [/csharp] You notice that in the NavigationPage constructor we pass in a new instance of the CharacterListPage class to immediately set the root page for the app. The CharacterListPage is of type ContentPage. [csharp] public partial class CharacterListPage : ContentPage [/csharp]

Adding a detail page

So far we have a NavigationPage which has just a root page that is our CharacterListPage, showing the list of Star Wars characters. We now need to add a detail page for displaying the selected character. In addition, we need to implement the navigation from the root page to the detail page. The detail page is of type ContentPage and can be created by adding a new item of type Forms Xaml Page and name it CharacterDetailPage:

Navigate to the detail page

Our main page contains a ListView of characters and upon tapping one of them, we need to navigate to the detail page, showing the details of the selected item. The first step to achieve this is to handle the ItemSelected event on the ListView. You could do this entirely programmatically in the code-behind CharacterListPage or use both XAML and code-behind. To programmatically handle the event, update the constructor of the CharacterListPage (CharacterListPage.xaml.cs); in a second step we’ll add the actual event handler code to this file. [csharp highlight="5"] public CharacterListPage() { InitializeComponent(); // Programmatically handle the ItemSelected event on the ListView characterList.ItemSelected += OnItemSelected; BindingContext = viewModel = new CharacterListViewModel(); } [/csharp] To declaratively handle the event in XAML, modify the CharacterListPage.xml file and add the ItemSelected attribute: [xml highlight="5"] [/xml] Regardless of how you handle the ItemSelected event, we still need to implement the event handler to perform the actual navigation action. In the CharacterListPage.xaml.cs file, we add the OnItemSelected event handler: [csharp] async void OnItemSelected(object sender, SelectedItemChangedEventArgs args) { var item = args.SelectedItem as Character; if (item == null) { // the item was deselected return; } // Navigate to the detail page await Navigation.PushAsync(new CharacterDetailPage(new CharacterDetailViewModel(item))); // Manually deselect item characterList.SelectedItem = null; } [/csharp] You notice that we first check if the selected item is not null – the reason for this is that the ItemSelected event is also invoked when an item deselected from the ListView. To navigate to the detail page, we use the Navigation.PushAsync method, passing in a new instance of the detail page: CharacterDetailPage. The PushAsync method will push the detail page on the navigation stack so that it becomes the active page, sitting on top of the root page in the stack. To navigate backwards we’ll use the corresponding PopAsync method to remove the topmost page from the stack and make the previous page the active one. How does the detail page know about the selected item? This is achieved by passing this information through the constructor of the CharacterDetailPage. In the next section, we’ll go into more detail about using MVVM. For now, know that conceptually we pass the selected item to the detail page.

Using MVVM

MVVM or Model-View-ViewModel is an architectural pattern that helps in separating the development of the user interface (XAML in our example) from the business logic that drives the user interface. The Model refers to the domain model and represents the state (e.g. Character or Movie in our example). The View refers to the presentation of the information contained in the models (in our example this refers to the XAML pages). Finally, the ViewModel is responsible for converting the data in the model in such a way that it can be represented by the views. It also acts as a mediator to organize the access to the backend logic – in our example we have a viewmodel for each of the two pages. In our example the view and viewmodel communicate with each other by leveraging XAML based data-binding. For our viewmodels, which are basically just classes, to act as a data binding source, they need to implement a notification protocol: INotifyPropertyChanged. When the view then adds a data binding on the viewmodel, the view will be notified when data changes in the viewmodel and can update the display. You can read more about MVVM and data binding in Xamarin Forms in the online documentation. In our example we have 2 viewmodels: CharacterListViewModel and CharacterDetailViewModel. To avoid code duplication across viewmodels, these classes derive from a BaseViewModel class, which in turn derives from ObservableObject class. The latter one implements a generic way to add INotifyPropertyChanged to all properties of a class. Check out the source code for the actual imlementation of these base classes. The CharacterListViewModel contains the Items collection of Character objects that the ListView in the root page will data bind on. In addition, you notice the LoadItemsCommand property; this is used for invoking a method by the view on the viewmodel through data binding. In this case, it is used for refreshing the ListView. [csharp] public class CharacterListViewModel : BaseViewModel { CharacterService service; public ObservableRangeCollection Items { get; set; } public Command LoadItemsCommand { get; set; } public CharacterListViewModel() { service = new CharacterService(); Items = new ObservableRangeCollection(); LoadItemsCommand = new Command(async () => await ExecuteLoadItemsCommand()); } async Task ExecuteLoadItemsCommand() { if (IsBusy) return; IsBusy = true; try { Items.Clear(); var items = await service.GetCharactersAsync(); Items.ReplaceRange(items); } catch (Exception ex) { Debug.WriteLine(ex); } finally { IsBusy = false; } } } [/csharp] The viewmodel for the details page is very simple – through the Item property it exposes a single Character object, which is the item that was selected in the root page. [csharp] public class CharacterDetailViewModel : BaseViewModel { public Character Item { get; set; } public CharacterDetailViewModel(Character item = null) { Title = item.Name; Item = item; } } [/csharp] Now that we have our viewmodels defined, we need to data bind the views to them. We do so by setting the BindingContext in the ContentPages. [csharp highlight="7"] private CharacterListViewModel viewModel; public CharacterListPage() { InitializeComponent(); BindingContext = viewModel = new CharacterListViewModel(); } [/csharp] [csharp highlight="7"] CharacterDetailViewModel viewModel; public CharacterDetailPage(CharacterDetailViewModel viewModel) { InitializeComponent(); BindingContext = this.viewModel = viewModel; } [/csharp] In the XAML page we can then refer to the indivual properties of the viewmodel by using the {Binding} syntax: [xml highlight="2-4,13-14"] [/xml] [xml highlight="1,4,8"] [/xml] Now that we have the different pieces in place we can run the application. You should see something similar to the image below. In the main page you'll see the page title and icon and when you tap on one of the items in the list, you'll navigate to the details page. The details page also shows the page title, as well as a back button that allows returning to the previous page. You notice that we didn't have to implement any code to navigate back to the previous page. Is functionality is built into the NavigationPage, which provides the UI and implementation logic. If you want to provide an explicit way of navigating back, you'd have to invoke the Navigation.PopAsync method to do so.

Next steps

Download the completed source code from GitHub.
Join the Xamarin Alliance coding challenges to learn more about building connected mobile apps.
Check out the free Xamarin Forms eBook.

Configuring Visual Studio Code for PHP development

nicktrog — Thu, 11 Feb 2016 12:37:07 GMT

Updated March 17, 2016: added a link to the PHP topic on the VS Code documentation center.

Two weeks ago I was a speaker at the PHP Benelux conference, where I talked about Azure Machine Learning. For writing and debugging my demo PHP source code, I used Visual Studio Code.

In this blog post I’ll describe the steps for configuring VS Code for doing PHP development. For more details about how VS Code supports PHP, check out the PHP topic in the documentation center.

TL;DR

Download and install Visual Studio Code
Configure PHP linting in user settings
Download and install the PHP Debug extension from the Visual Studio Marketplace
Configure the PHP Debug extension for XDebug

Download and install Visual Studio Code

Visual Studio Code is Microsoft’s free, cross-platform lightweight code editor. While you download it (it’s only a 42MB download), let’s look a bit closer at what I just said…

Free: indeed, VS Code is entirely free, no gotchas.
Cross-platform: VS Code is available for Windows, Linux and OS X
Lightweight code editor: as opposed to Visual Studio, VS Code is not a full-fledged IDE but a code editor. It’s a code editor with a number of powerful features you might also find in an IDE, such as intellisense, debugging and Git source control integration.

And by the way, VS Code is also open source – you can contribute to the sources or submit issues in the GitHub repository.

Once you have downloaded the installer package, set it up on your machine. You can find the detailed instructions here. You should now be able to open a command prompt and launch Visual Studio Code and start editing all files in a folder.

If you open a file with the .php extension, Code will recognize this file as a PHP file. Alternatively, you can manually change the file type through the Language Mode button at the bottom right of the editor or by pressing Ctrl+K and M keyboard sequence.

PHP out-of-the-box experience

VS Code supports many languages out of the box, and PHP is one of those languages. Note that more languages are supported through VS Code extensions in the Visual Studio Marketplace. For PHP we provide syntax coloring, bracket matching and code snippets.

As you start typing code in a PHP file, you’ll notice that you get syntax coloring, bracket matching and IntelliSense as you type.

Configure PHP linting

By default, VS Code will perform PHP linting to validate your code when you save your file. To do so, it is using the php executable. As you use VS Code for the first time, you’ll get an error message that the PHP executable cannot be found.

As mentioned in the message, you need to specify the path the PHP executable on your machine. This is done in the settings file (VS Code has different levels of settings files, for more details check out the documentation). In this case, we’ll configure the PHP settings globally for the user.

Open the user settings through the command panel: press F1 > type ‘user’ > press Enter.

You will now get two JSON documents: the leftmost document are the default settings, on the right hand side you find the user settings. In the user settings you can override the default settings. For enabling PHP linting, we have 3 settings.

To configure the path to the PHP executable you specify it in the user settings file:

Now you should see validation enabled for you PHP files. In the event of invalid PHP, you’ll see a red squiggly lines in your source code (in below code sample, a semi-colon is missing on line number 2).

Configure debugging

VS Code provides XDebug debugging support using the PHP Debug extension (kudos to Felix Becker!). First, install the extension from the VS Code command panel: press F1 > type ‘install ext’ and select ‘Install Extensions’. Then type ‘PHP Debug’ in the search box and install the extension. You will have to restart VS Code after installing the extension to activate it.

Note that this extension uses XDebug. Therefore you need to ensure that you have installed XDebug. You can download XDebug here (for Windows, you should get the non-thread-safe 32-bit version).

Then, update your php.ini file with the following settings. In my case, I have installed XDebug in the ext subfolder of the PHP install directory. If you installed XDebug elsewhere, make sure that zend_extension points to the correct location.

Make sure to point your webserver root to your project and each time you request a PHP file, XDebug will try to connect to port 9000 for debugging.

To start debugging, and navigate to the Debugging tab in VS Code.

Then press the little gear icon to generate the launch.json file, which will allow VS Code to start the XDebug debugging session. Make sure to choose PHP as the debug environment.

To start debugging you can press F5 or click the green arrow in the Debugging tab. You can set breakpoints in your source code by selecting a line and pressing F9.

If you now hit the specific web page, VS Code will break into your source code at the specified breakpoint. You’ll then get information about variables, call stack, etc. in the left hand pane.

Conclusion

Visual Studio Code provides great PHP language support out of the box, and with the PHP Debug extension you can now also debug your PHP code. And all this for free, and cross-platform.

There are more PHP extensions in the Visual Studio Marketplace for you to try out.

Links:

VS Code extensions: https://marketplace.visualstudio.com/vscode
More information about PHP support in VS Code: https://code.visualstudio.com/docs/languages/php

Adding gulp to Visual Studio Online Builds

Nick J Trogh — Thu, 05 Mar 2015 08:39:38 GMT

At one of our Code in the Cloud camps someone asked me how they could integrate front-end build tasks in the Visual Studio Online (VSO) build process. Lately we’ve been adding great support for gulp/grunt/bower into our Visual Studio IDE (check out this post from Scott Hanselman to learn more). But I have to admit that I’d never included this in a VSO Team Build. In this post I’ll show you how you can integrate a front-end build process in Visual Studio Online Build. Disclaimer: the process described below is a demonstration of how you can integrate gulp into a Visual Studio Online Team Build process. This is by no means intended to be a best practice and to keep things simple, below scripts lack extensive error handling. Update: in clientcompile.bat, use CD with /D option to also switch drive letter if needed (thanks Duncan!).

Step 1: Creating a Visual Studio Online Team Project

Visual Studio Online is Microsoft’s application lifecycle management solution in the cloud. It allows you to manage all aspects of you development process, from planning what needs to be done, to source control to manage your source code files, to hosted build infrastructure and even load test infrastructure. Visual Studio Online is free for teams of up to 5 members. In the context of this post, we’ll be using the source control repository and hosted build services of VSO. Once you’re signed up for Visual Studio Online, you can create your first Team Project. In this blog post we’ll be using git-based source control; this will allow you to connect to the source code repository using any existing git client. Note that VSO source control can be used for any development technology and programming language. To create a new Team Project, navigate to your VSO account (.visualstudio.com">.visualstudio.com">.visualstudio.com">.visualstudio.com">https://.visualstudio.com) and clicking the ‘New…’ link. Enter the details and press the ‘Create Project’ button.

Step 2: Setting up the Web Application project

To keep things simple, we’ll create a basic Lorem Ipsum generator website using ASP.NET and Visual Studio, however you could use any other web technology. Make sure that in Visual Studio you’re connected to the Team Project (from Team Explorer, Connect to Team Projects , and then Select Team Projects…). In Team Explorer, click the Home button and press the New… link to create a new solution that is added to source control. Now create an empty ASP.NET Web Application project. Secondly, add an HTML file ‘index.html’ to the project. As you press the ‘Submit’ button, the generateLoremText JavaScript function is invoked. This function is included in a separate JS file, which will minimize using gulp.

1: <!DOCTYPE html>

2: <html>

3: <head>

4: <script src="js/lorem.min.js">script>

5: head>

6: <body>

7: <h1>Lorem Ipsum Generatorh1>

9: <p>How many paragraphs do you need (1-100):p>

10:

11: <input id="countInput" type="number">

12:

13: <button type="button" onclick="generateLoremText()">Submitbutton>

14:

15: <p id="validationText">p>

16:

17: <hr />

18:

19: <p id="loremText">p>

20:

21: body>

22: html>

Now add a folder ‘js’ to the project, which will contain our client-side JavaScript code. Then add a new JavaScript file ‘lorem.js’ to this folder. The script is fairly easy and self-explanatory.

1: function generateLoremText() {

2: var count, validationText, loremText;

4: loremText = "";

5: validationText = "";

7: count = document.getElementById("countInput").value;

9: if (isNaN(count) || count < 1 || count > 100) {

10: validationText = "Invalid input";

11: } else {

12: loremText = createLoremText(count);

13: }

14:

15: document.getElementById("validationText").innerHTML = validationText;

16: document.getElementById("loremText").innerHTML = loremText;

17: }

18:

19: function createLoremText(count)

20: {

21: var loremText = "";

22:

23: for (i = 0; i < count; i++)

24: {

25: loremText = loremText + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

26: }

27:

28: return loremText;

29: }

The project structure should now look something like this:

Step 3: Configuring gulp for your web application

We’re going to use gulp to perform our front-end build tasks; you could just as well integrate with grunt or bower. As mentioned before, Visual Studio already provides grunt/gulp/bower integration in the IDE, however this will run these build tasks on the developer machine and not as part of our centralized build process. There are basically 2 approaches for customizing the Visual Studio Team Build process:

Create a custom Team Build template to include activities for invoking the front-end build tasks. The team at MS OpenTech has created a custom build template and corresponding activities to invoke Grunt as part of your Team Build.
Alternatively, the default Build templates in TFS and Visual Studio Online now have the possibility to invoke pre and post build scripts. In this script you can then invoke the grunt/gulp/bower commands.

In this blog post we’ll take this second option as it allows to quickly extend the default build process without the overhead of creating a custom build template. To achieve this, we are going to add 3 files to our Web Application project:

gulpfile.js: contains the gulp script describing all build tasks that need to be performed.
package.json: contains the list package dependencies for the gulp script
clientcompile.bat (note: you can also use PowerShell): batch script that install the dependency packages and then invokes the gulp command

Your project structure should now look like this: The gulpfile.js file contains the different gulp tasks – if you require plugins, make sure to add the necessary dependencies in the package.json file. Below script will minimize (uglify) our lorem.js script and rename it to lorem.min.js. You’ll notice that I’m passing in a parameter (PATH) that defines the output path for the minimized script – I’m using the yargs gulp plugin for this. This path will resolve to the ‘_PublishedWebsites/…’ folder on the Team Build drop location.

1: 'use strict';

3: var gulp = require('gulp'),

4: rename = require('gulp-rename'),

5: uglify = require('gulp-uglify'),

6: argv = require('yargs').argv;

8: var DEST = argv.PATH;

9: if (!DEST) { DEST = '.'; }

10:

11: gulp.task('default', function() {

12: return gulp.src('**/js/lorem.js')

13: // This will minify and rename to lorem.min.js

14: .pipe(uglify())

15: .pipe(rename({ extname: '.min.js' }))

16: .pipe(gulp.dest(DEST));

17: });

18:

Our package.json file will contain the necessary packages to be installed:

1: {

2: "name": "GruntVSO",

3: "version": "1.0.0",

4: "description": "Grunt VSO integration sample",

5: "main": "index.js",

6: "author": "Nick Trogh",

7: "license": "MIT",

8: "repository": { "url": "https://github.com" },

9: "readme": "Grunt VSO integration sample",

10: "dependencies": {

11: "gulp": "^3.8.11",

12: "gulp-rename": "^1.2.0",

13: "gulp-uglify": "^1.1.0",

14: "yargs": "^3.4.5"

15: }

16: }

Finally the clientcompile.bat file will invoke the different pieces of the front-end build process:

1: REM Script arguments

2: REM [1] project source folder

3: REM [2] output folder

5: REM Create the npm folder in the user profile to fix a bug with npm on Windows

6: MKDIR C:\Users\buildguest\AppData\Roaming\npm

8: REM Set the working folder to the project source folder to correctly install npm

9: packages locally

10: CD /D "%TF_BUILD_SOURCESDIRECTORY%%1"

11:

12: REM Install all dependencies through npm

13: CALL npm install

14:

15: REM Invoke gulp, passing in the output folder for the minimized JS scripts

16: CALL node_modules\.bin\gulp --PATH "%TF_BUILD_BINARIESDIRECTORY%\%2"

The batch script takes 2 input parameters, which will provide in our Team Build Definition. The first parameter defines the path to the sources of our Web Application project on the build server. The second parameter defines the output folder to write our minimized JavaScript file to. Both input parameters are relative paths and are made absolute based on TFS Build environment variables. The first step in the script (line 6) creates a folder for npm in the user profile – this is a workaround for a bug with the npm installation on Windows. On line 11, the node package manager is then invoked to install all dependencies locally (in the node_modules folder); it takes our package.json file into account for this. After installing the packages, we can now invoke gulp and pass in the output path for the minimized files (using ––PATH). Make sure to commit and push your changes into source control once ready.

Step 4: Setting up a team build

The final step to be done is set up our Team Build for our Web Application – this is achieved by creating a new build definition. The build definition describes the different steps that make up our build process: getting our sources from source control, compilation, invoking our front-end build tasks, and finally copying the output to the drop folder. To create a new build definition, go to Visual Studio, navigate to the Team Explorer and open the Builds section. This view shows the existing build definitions and also shows past build execution results. Create a new build definition by clicking the ‘New Build Definition’ link. In the Trigger tab you can choose to setup a manual build or continuous integration build. To invoke our script for front-end build tasks (clientcompile.bat), we need to configure the build process. Open the ‘Process’ tab and expand section ‘5. Advanced’ inside the Build section. Specifically we’re going to provide the ‘Post-build script’ information. The script will be executed on the build infrastructure after the source code has been compiled, hence post-build. For the script, navigate to the clientcompile.bat file. For the script arguments, we need to provide 2 values, as described above:

The relative source code folder for our project: \WebApplication1\WebApplication1
The relative output folder: _PublishedWebsites\WebApplication1 (if you choose ‘SingleFolder’ for output location, Team Build copies all output for a Web Application to the _PublishedWebsites folder on the drop location.

This is the only configuration we need to perform on our Build Definition to invoke our JavaScript build tasks. All we need to do now is queue a new build, or perform a source code modification in case of continuous integration. You can queue a build by right-clicking on the build definition. Once our build has completed, we can check the output of the build by downloading the contents of the drop location. You do so by right-clicking the build result in Visual Studio and choosing ‘Open in Browser’. On the Build output details page you can then download the output of the build. In addition, you can view a detailed output of the build process in the ‘Diagnostics’ tab. When you download the build output zip file, you will find the lorem.min.js file inside the js folder. Opening the file in Visual Studio or a text editor shows the minimized contents of the original lorem.js file.

Summary

As you can see, using the pre and post build scripts you can very easily integrate custom logic into a Visual Studio Online Team Build process. By adding your front-end build process into your central build/continuous integration process, you can have the same repeatable and controlled process for both server-side and client-side builds. In a next post I’ll explain how you can include front-end build tasks into your Azure Websites continuous deployment process.

Additional Resources

Come join us for a Code in the Cloud developer camp to learn more about Visual Studio or attend one of our other developer camps.
Check out our free online trainings in Microsoft Virtual Academy
- Fundamentals of Visual Studio Online
- Using Git with Visual Studio 2013
Get your free Visual Studio Online account and free Visual Studio Community IDE

Using Azure Search from PHP

Nick J Trogh — Fri, 09 Jan 2015 03:45:31 GMT

Updated March 2, 2016: Source code for this post is available on GitHub.

Updated March 3, 2015: Azure Search is now generally available – updated pricing tier info and API version info.

Updated February 14, 2016: Fix dead links.

I recently had to present at a local PHP meetup where I gave an introduction to Microsoft Azure. As part of this I worked out some sample code on how to integrate the Azure Search service in a PHP website. With Azure Search you can easily integrate sophisticated search capabilities into your websites or applications without having to deal with all the hassle for maintaining a search index.

In this post we’ll create a simple PHP website that lists hotels and allows for searching them based on different criteria. The website supports free text search, auto-completion, and faceted search.

TL;DR

Azure Search provides a REST-based API to perform index management (creating, populating, …) as well as to perform queries on the search indexes. In the PHP website you can leverage this REST API to add search capabilities to the site.

Perform the following steps to do so:

Create a free Azure Search service instance in the Azure Preview portal. The process is described in the following post.
Invoke the Azure Search REST API, for example using the Httpful PHP library or curl, passing in the api-key of the instance created in the previous step, and passing in a search term you got from user input.
Display the search results from the resulting JSON output.
Additionally, you can further leverage the REST API to also provide auto-completion and facetted search.

Getting Started

Creating the Search service and index

As a first step in working with the Azure Search service, you need to create a new Azure Search instance. As an Azure subscriber you have access to a free shared, multi-tenant Search service. The Azure Search functionality is made available through the Azure portal, or using a REST API.

Once you have a Search service up and running, you can start creating an index. This search index defines the fields a document is made of, the fields that you can search on or that can be used for suggestions, as well as attributes that control the query behavior (e.g. scoring profiles, sorting, etc). To interact with the search service you can use the

You can run DotNetHowTo in the ‘Getting Started’ GitHub repo to setup your Search instance, create an index and populate the index with documents.

Adding basic search to our website

To create the search index and populating it with data you have used the Azure Search REST API using Fiddler, Postman or any other REST client of your preference. For integrating the search functionality in the PHP website, we’ll be also be using the REST API.

To implement the basic search functionality, allowing a user to search the list of hotels, we need to issue a Search request, which is a GET request on our index:

GET /indexes/[index name]/docs?[query parameters]

Using the search query parameter, we can specify the text to be searched for. When you create the search index, you indicate which fields are searchable. By default, all searchable fields in the index will be searched.

Note that with every REST call you are required to always specify the api-version parameter. If you don’t specify this parameter, you’ll get an HTTP 400 error with the cryptic “An error has occurred” message.

Below code sample shows how it’s done from PHP – in this sample I’ve also added sorting based on the baseRate field using the $orderby parameter.

$term = "<search term>";
$searchUri

= "

https://.search.windows.net/indexes/
hotels/docs?search=$term&\$orderby=baseRate
&api-version=2015-02-28

";

// Invoke the Search REST API $response

 = \Httpful\Request::get(

$searchUri

)
    ->addHeaders(

array

('

api-key

' => '

'))
    ->expectsJson()
    ->sendIt();

Once you have invoked the Search service, the results will be provided as a JSON document. We can now retrieve the search results from the body, in the value field:

foreach
(
$response
->body->value 
as$result
)
{
   
$formattedPrice
 = 
sprintf
("%.2f", 
$result
->baseRate);
   
echo
 "
$result
->hotelName 
$result
->rating 
$$formattedPrice
";
}    

For our sample website, this now allows the user to specify a search term, which will be used to search the list of hotels, match the term in the hotelName, description, category and tags searchable fields.

Providing search suggestions using auto-completion

In addition to searching the index, we can assist the user by providing search suggestions. This is achieved using the Suggestions REST API. This API will leverage the fields in the index that were marked as suggestions (e.g. hotelName and description).

The basic structure for the Suggestions API is the following:

GET /indexes/[index name]/docs/suggest?[query parameters]

At a minimum you need to provide the search parameter, which is the text to use to suggest queries, and which must be at least 3 characters. As mentioned, don’t forget to also specify the api-version parameter.

In below code sample, we’re providing the user with the hotel name and description as search suggestion. Put below code snippet in a separate file (e.g. gethotelautocomplete.php); this file can then be bound to the autocomplete event of the search input field on the web page.

$searchUri

= "

https://.search.windows.net/indexes/
hotels/docs/suggest?search=$term
&api-version=2015-02-28

";

// Invoke the Search REST API $response

 = \Httpful\Request::get(

$searchUri

)
    ->addHeaders(

array

('

api-key

' => '

'))
    ->expectsJson()
    ->sendIt();

$json

array

();

$suggestions

$response

->body->value;

foreach

$suggestionsas$suggestion

)
{
    $json[]=

array

(
        'value'=>

$suggestion

->hotelName,
        'label'=> "

$suggestion

->hotelName (

$suggestion

->description)"
        );
}

echo

 json_encode(

$json

);

To bind the above autocompletion logic to the search field, add following Javascript code to the search web page:

scripttype

="

text/javascript

">
        $(document).ready(

function

(){
            $("

#term

").autocomplete({
                source:'

/gethotelautocomplete.php

',
                minLength:

            });
        });

With the above code you should now have autocompletion functionality added to the site. As soon as you type 3 letters or more, the search service Suggestions API is invoked and results are provided to the user:

Adding faceted search to the website

Now that we basic search functionality added to our website, we can take it one step further, namely by adding faceted search. With faceted search you can search for documents in your index using categories. For example, for each hotel in our index we have the base rate for a room per night. Using faceted search we can specify price ranges for this base rate and then search for all hotels that match a specific price range. When creating the search index you can specify which fields can be used as facets.

To implement faceted search we leverage the basic Search REST API. First you need to specify which facets you want to retrieve using the facet query parameter. In the search results you will then get the document count for each facet value.

In below example we indicate that we want to use facets for rating, category and baseRate. For the baseRate field we specify the price ranges: 0-100, 100-200, 200-500, 500-1000 and >1000.

GET /indexes/hotels/docs?search=&facet=rating&facet=category&facet=baseRate,values:100|200|500|1000&api-version=2015-02-28

To filter based on a given facet value, for example retrieve the hotels in a given price range, we use the $filter query parameter. In below example, we retrieve the hotels within the price range 100-200.

GET /indexes/hotels/docs?search=&facet=rating&facet=category&facet=baseRate,values:100|200|500|1000&$filter=baseRate gt 100 and baseRate le 200&api-version=2015-02-28

Below code sample shows how this is done in our PHP website:

$term = "<search term>";
$searchUri

= "

https://.search.windows.net/indexes/
hotels/docs?search=$term&\$orderby=baseRate
&facet=rating
&facet=category
&facet=baseRate,values:100|200|500|1000
&api-version=2015-02-28

";

// Invoke the Search REST API $response

 = \Httpful\Request::get(

$searchUri

)
    ->addHeaders(

array

('

api-key

' => '

'))
    ->expectsJson()
    ->sendIt();

The facet information (which facet values and document count per value) is available in the resulting JSON in the @search.facets property of body.

$propname
 ="
@search.facets
";                        
$facets
= 
$response
->body->
$propname
;
$ratings
=
$facets
->rating;

foreach
(
$ratingsas$rating
)
{
   
$ratingValue
 = 
$rating
->value;
   
$ratingCount
 = 
$rating
->count;
}

You can then display these facet values and counts in the website. As you drill further into facets, the document counts will be updated to reflect the selected filters. For example, as you select the hotels with a rating of 4, you’ll notice that the number of categories is also adjusted.

Conclusion

In this article we’ve gone through adding search as a service using Azure Search to your PHP website. In a matter of minutes you can get started and provide your users with a complex search functionality. And as your site gets more traffic, you can easily scale out your search service.

Make sure to get started with the Azure Search service and also try out the other application, data and infrastructure services in the Microsoft Azure platform. You can get started for free on Azure or activate your MSDN Azure benefits.

Additional resources can be found here:

Game On! March 13: Learn to build a Unity game in 12 hours

Nick J Trogh — Mon, 03 Mar 2014 14:58:46 GMT

Traditionally writing 3D or 2D games was not for the faint of heart. It took in-depth knowledge in math, physics, computer graphics, etc. to even build the simplest of games that had some level of realism to them. Long story short: game development was hard.

What if you could develop a game, that you can deploy across multiple platforms in less than 12 hours? With the Unity game engine from Unity technologies, you have a cross-platform game engine with a built-in integrated development environment (IDE) that enables simplified and rapid development of games. Such things as physics, cameras, lighting, 3D, etc. are all handled by the game engine, allowing you to focus on your game play.

A lot of popular games have been developed with Unity, many of which are available on Windows 8 and Windows Phone. Just last week, we ran our first Unity porting lab in MIC Genk where we helped game developers port their existing Unity games to the Windows platform. In a matter of hours we had several of these games, originally targeted at iOS or Android, running on a Windows device!

If you’re new to game development or Unity, we invite you to join our ”Unity for Newbies” workshop on March 13, where we’ll teach you hands-on how to create a game in Unity and how to publish it to the Windows (Phone) Store. So, by the end of the day you could have your game ready to be published!

Do check our other developer trainings online on https://aka.ms/devbesmart or join the Microsoft Virtual Academy.

Running Powershell Web Jobs on Azure websites

Nick J Trogh — Wed, 22 Jan 2014 13:49:48 GMT

Update: Web Jobs now natively support PowerShell scripts. You can upload a zip file containing a .ps1 file and it will be executed without further configurations.

Just last week we announced a series of new features for the Windows Azure platform. One of those features is Web Jobs support for Windows Azure Web Sites. Web Jobs enable you to run custom jobs on your web site, either on-demand, scheduled or continuously. However, some people have already wondered why there is no support for Powershell scripts (.ps1). In this post I’m going to show how you can use Powershell scripts to run as a Web Job on Windows Azure Web Sites.

Setting up an Azure Web Site

The first step is to quick create an empty Azure Web Site – for the purpose of this post, we don’t need actual web content. So, just create an Azure Web Site through the Azure Management Portal.

Once the site is created (amazing it takes less than 10 seconds!), you should now see the ‘Web Jobs' (preview) section.

In this post, we’re going to be using a very basic PowerShell script to be executed on the Web Site – the script will just retrieve the list of actively running processes on the server by invoking the Get-Process cmdlet.

Verifying it doesn’t work

Of course we want to push our luck and upload a .ps1 file to create a Web Job. When you do this, the operation will fail and you’ll be presented with the following error message in the portal:

Running a PowerShell Web Job

We now have validated that we cannot use a PowerShell script to create a Web Job, but how can we achieve this? As you may know, Powershell can be invoked from the commandline, by means of PowerShell.exe. This is exactly what we’re going to do to use PowerShell as a Web Job.

First step is to create a Windows command file (.cmd or .bat) which will invoke PowerShell.exe and providing it our PowerShell commands. This is the contents of our ListProcessesPS.cmd file:

PowerShell.exe -Command "& {Get-Process}"

After zipping up this file we can now create a Web Job through the Azure Management portal:

The Job is created successfully and we are ready to launch it. Once the Last Run Result shows ‘Success’ we can view the outcome of the Job by navigating to the logs.

Below screenshot shows the outcome of running the PowerShell command on our Azure Web Site!

Using a separate PowerShell script – Take 1

Of course, this solution is not optimal if you have multi-line, complex PowerShell scripts. Ideally we want to be able to create a PowerShell script file that is separate from the command script. Looking at the PowerShell.exe command-line reference, there is a parameter that allows us to invoke a PowerShell script, namely the –File parameter. So we adapt the command script accordingly:

PowerShell.exe -File Get-Processes.ps1

We then create a zip file containing both the ps1 and cmd files and upload it to create a new Web Job. However, when you run the Web Job, we don’t get the outcome we expected. We receive an error file, which indicates that the PowerShell script we’re trying to execute is not digitally signed and therefore cannot be executed.

Using a separate PowerShell script – Take 2

Reverting back to the PowerShell.exe command-line reference, another command-line parameter comes to the rescue to get around this digital signature issue: –ExecutionPolicy. We update the Windows command file as follows:

PowerShell.exe -ExecutionPolicy RemoteSigned -File Get-Processes.ps1

What’s happening here is that we tell PowerShell to run all local scripts and only require a digital signature for scripts that are being downloaded from the Internet.

We update the zip file with the updated Windows command file and the PowerShell script and create a new Web Job. When running the Job, we finally get the expected results!

Conclusion

As you’ve seen, there is actually a way to run PowerShell scripts as Web Jobs on Windows Azure Web Sites. You currently need to invoke it through an intermediate Windows command file instead of natively supporting .ps1 files, but in the end we got a workable solution.

Did you know that you can try Windows Azure for free?

Are you ready to Build?

Nick J Trogh — Mon, 23 Dec 2013 14:43:32 GMT

The one constant in this technology world is change. Technology changes at an amazing pace and it’s not trivial to keep up with this as a developer.

Only six months ago we were in San Francisco for Build 2013. Since that time we have released Windows 8.1 to the public, we launched Surface 2 and the Xbox One, Visual Studio 2013 and Visual Studio Online further improved the developer process, and with the Windows Azure, we’re seeing an ongoing rythm of new features and improvements being added to the platform. At the same time, developers have built and are building many great apps that make these platforms shine through innovative, compelling and immersive user experiences.

More than ever, it’s an amazing time to be a developer; on the other hand, keeping up with these technology advances is not an easy task. Which is why we’re coming back to San Francisco on April 2-4 for our Build 2014 developer conference.

Build 2014 will again be THE place to be to learn what’s next for Windows, Windows Phone, Windows Azure, Visual Studio and much more. Check also Steve Guggenheimer’s announcement.

So, mark your calendar for registration, which opens on January 14 at 9am Pacific Time on www.buildwindows.com. Be sure to follow us on Twitter through the #bldwin hashtag.

Hope to see you all in San Francisco at Build 2014 and in the meantime, keep building those great apps for Windows!

Superhackathon is back on November 15: Bigger, Better, Bolder

Nick J Trogh — Thu, 24 Oct 2013 01:08:11 GMT

With the general availability of Windows 8.1, the official launch of Surface 2, the announcement of Windows Phone 8 Update 3, the timing is perfect for you to show off your app development skills! Continuing a great tradition, on November 15th we are organizing our second Superhackathon.

At the Superhackathon you can come to develop apps; you can come by yourself or bring your developer and designer friends to form a killer app team. And if you’re stuck or have technical questons we’ll have technical experts onsite to help you out.

To honor all your hard work, there will be many great prizes for you to win: Surface Pro 2, Nokia Lumia 1020 and 925, and many other gifts. At the end of the day you can take the stage and show off your app. Of course, no need to bring your sandwiches – we’ll have breakfast, pizza, coffee and drinks to keep your energy levels up!

So where is the action? A ‘super’ hackathon worthy, we’re organizing this event across the entire country. You can join us from 8:08 in the morning until midnight at four different locations: Brussels, Genk, Mons and Kortrijk.

Find out all the details and registration info here, and join us for a full day of coding, fun and great prizes!

Apps made in Belgium: new in the Store #7

Nick J Trogh — Wed, 16 Oct 2013 00:34:31 GMT

It’s time for our 7th blog post in our series of new Belgian Apps and it’s been a pretty big harvest again! If you missed the previous posts, you can find them here.

Personalize your device right now by installing these apps. And don’t forget to provide your feedback to the developers by rating them in the Store – this is an extremely valuable input to making these apps even better!

Windows Phone 8
Radio.be

Windows 8

La Première

Austin Power Soundboard

FollowTrack

Share My IP

ZIP Code Lookup

WoonWerkVerkeer

Tiles Matching

PassKeyper

SpellingsAdvies

Training Spotter

Neowin for Windows

Garfield h8s mondays

Escape the bubbles!

De Redactie

Hungover Owls

KimJongUnLookingAtThings

Nutrillion

Moustair

The Captains’ Mistress

Photos with an iPad

Bioritme

Recipe Diary Free

Brain Age Training

What Siri Says

Beer Color Camera

TechApp

KimJongIlLookingAtThings

Oobama is checking your email

Get inspired by these recently published Belgian apps and build your own app.Start here today

Or meet us at one of our many developer camps!

Stars of the Store

Nick J Trogh — Sat, 28 Sep 2013 04:22:23 GMT

Over the last few weeks we have posted about new Belgian apps published to the Windows Store. In this post we want to highlight a few ‘Stars of the Store’, great apps that have been in the Store for a while and have been updated recently.

Yelo TV by Telenet – great for live watching your favorite TV shows, movies, etcetera or for managing and watching your recordings.

Aan Tafel by Truvo Belgium – you want to go out for a delicious lunch or candle light dinner but don’t know where to go? With this app you get to choose from 15000 Belgian restaurants, guided by reviews from chefs, critics or other customers.

De Lijn by Cronos – so you’ve picked your restaurant and are looking for the nearest bus? With the De Lijn app you can plan your route, manage a list of favorites and also get a view on realtime timetable for your bus. Nice integration with geolocation and Bing Maps.

To make all these apps even better and help define upcoming features, rate the apps and provide your comments!