Search Groove in Composition Example

Composition API has really great features and with the new examples is even better.

bowie

If you take a look to the ContinuitySample, you will learn how to get a Visual that will still in screen when the app navigates in a Frame, which was a doubt I had and I was to test in few days, so thank you Composition team to make it quicker than us :).

And Parallax Music example has really cool scrollviewer effect which is the one where I want to add some code to find artist IDs.

Of course is not the main purpose of the Composition example but cause they give us the chance to play with Groove let’s add the search option.

After you tested the that example with your id add the following:

IDatasource.cs

//At the end of the interface add this method declaration
    Task SearchArtistId(string name);

RemoteDataSource.cs

//At the end of the class
#region Search
private static readonly string SEARCH = "music/search?q=";

private async Task Search(string query)
{
    var service = SERVICE + "/" + SEARCH + query + "&accessToken=Bearer+" + WebUtility.UrlEncode(Token);
    var response = await _client.GetAsync(new Uri(service));
    var content = await response.Content.ReadAsStringAsync();
    return content;
}

public async Task SearchArtistId(string name)
{
    var content = await Search(name);
    if (content != null)
    {
        JsonObject jsonObject = JsonObject.Parse(content);
        var _artist = jsonObject["Artists"].GetObject()["Items"].GetArray()[0].GetObject();
        return _artist["Id"].GetString();
    }
    return null;
}
#endregion

Now we have the implementation, let’s add the XAML and events.

MainPage.xaml

Before the ProgressRing add:

<!--#region Added for look up-->
<StackPanel Orientation="Horizontal" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignTopWithPanel="True">
    <TextBox x:Name="SearchBox" Width="320"/>
    <Button x:Name="SearchButton" >
        <SymbolIcon Symbol="Find" />
    </Button>
</StackPanel>
<!--#endregion-->

MainPage.xaml.cs

Remove readonly for DEFAULT_ARTIST_ID and now add the following:

public MainPage()
{
    this.InitializeComponent();

    this.InitializeSearch();
    ...
}

#region Search
private void InitializeSearch()
{
    SearchButton.Tapped += async (s, e) =>
    {
        var text = SearchBox.Text;
        if (!String.IsNullOrEmpty(text) && text.Length > 2)
        {
            var result = await _dataSource.SearchArtistId(text);
            DEFAULT_ARTIST_ID = result;
            InitializeData();
        }
    };
}
#endregion

Piece of cake, isn’t it?. I’ve never used Groove and works really efficient. The following I post will be some examples of Composition that I want to make for some of my controls.

Regards @juanpaexpedite

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s