Part 29: Filtering the Results by Keyword
- Posted: Jun 25, 2013 at 5:21PM
- 33,546 views
- 2 comments
Loading user information from Channel 9
Something went wrong getting user information from Channel 9
Loading user information from MSDN
Something went wrong getting user information from MSDN
Loading Visual Studio Achievements
Something went wrong getting the Visual Studio Achievements
Right click “Save as…”
Currently, we can find all images on Flickr based on the locale of the device, however in our original "low tech mockup" design, we wanted to allow the user to filter the results by a keyword or search phrase. We'll enable that feature in this lesson.
Our game plan in this lesson ...
Not depicted in this screenshot, I remove almost all of the boilerplate comments and the comments I've added previously.
Margin="-12, 0, -12, 0"
... it simply means "repeat these values".
Now, we'll need to add this notion of "Topic" throughout the entire application. We'll pass it along with the position to the SearchResults.xaml page, we'll pass it to the Flickr web service call, and so on.
In the MainPage.xaml.cs, edit the SearchClick() method ...
First I'll create a private variable to hold the topic value I'm passing to the SearchResults.xaml page ...
Next, I'll retrieve the topic value from the query string and save it in the new private variable ...
While I'm here, I decide to go ahead and modify my call to the FlickrImage.GetFlickrImage() method. I'll need to pass the topic value to the GetFlickrImages() method that ultimately calls the Flickr web api. Since I've already made the latitude and longitude optional / defaulted input parameters to my method, the topic value must be passed in prior to those (unless I choose to make it optional as well ... but I've chosen not to.)
Now that I've added the topic in the call, I need to modify the FlickrImage.GetFlickrImages() method itself:
Now, I'm ready to test the results ... I'll search for "observatory" to limit the pics that are returned by the Flickr web service call to only those that have the term "observatory" in their description ...
I get a list of photos back that look different from the list of images I was getting back, and (b) they do all look like they have something to do specifically with the observatory as opposed to a street level view.
However, I suppose I have no easy way to validate these results other than to perform a similar search on Flickr's own website look for similarities between the list I'm displaying in the AroundMe app and the results from their website. I'm satisfied with the results, so I'm not going to take the time to thoroughly check the results. I'll trust that it's working for now.
We've satisfied the title of this lesson by adding filtering on the results based on keywords. However, in the time that remains I want to add two improvements to our GetFlickrImages() method in the FlickImage.cs file ...
The two improvements:
First, I'll add the concept of radius ... the Flickr web api allows us to pass in the radius it will search.
Second, I'll add some code "defensive code" ... the phrase "defensive programming" is a thought process or approach to writing code. In this case, I'll apply that thought process to mean that I want do some checking of the query string values for latitude, longitude and topic that I'm passing from the MainPage to the Results, and I want to add double-quotes around the topic I want to pass to the Flickr API so the user can add a phrase. If you want to learn more about defensive programming from a high level, a great place to start is Wikipedia:
Let's begin by adding the notion of "radius" to our app. I'm not going to take the time to fully implement this in this series. Clint's original application that he gave me will adjust the radius we sent to Flickr based on how zoomed in or zoomed out we are in the Map control. However, I decided to leave that code out of this video series ... first, it will add a LOT of code to the application with come complicated calculations to convert map pixels to radius. Secondly, there's no way to simulate the pinch-in or pinch-out motion in the Windows Phone emulator. Perhaps once I'm finished with this series, I'll come back and add an addendum to how to tackle this scenario. So, for now, I'll merely add the feature for radius, and I'll hard-code the radius to 5 kilometers.
I'll modify the FlickrImage.cs ... specifically, I'll modify the getBaseUrl() method's signature to include a radius input parameter ... I default radius the same way I default latitude and longitude: to NaN, or rather, "Not A Number":
I'll continue to modify the getBaseUrl() method by splitting out the line of code where I build the url that will later be used in the String.Format(). I want to test the topic, latitude, longitude and radius before adding them to the baseUrl returned from this method. In these cases, I want to only add values to the baseUrl that are valid. Therefore:
Next, I'll modify the GetFlickrImages() method in the FlickImage.cs file:
Now, I'll modify the code in the SearchResults.xaml page that calls into the GetFlickrImages() method:
Similar to what I did with topic a few moments ago:
Now I need to PASS "radius" in the query string FROM MainPage.xaml TO SearchResults.xaml ... in the MainPage.xaml:
... I merely hard-code this to 5, indicating 5 kilometers.
I test to make sure it works, and it does.
Again, I've merely hardcoded this value. Ideally, I would allow the radius to match the visible map on the MainPage.xaml. If you want to see a better implementation, take a look at Clint's original implementation.
To recap, the big take away from this lesson was how to grab values from XAML input controls, how to program defensively to make sure we check the input values to ensure they are valid, how to URL Encode whenever you pass values (especially, end user generated input values) in query strings of any kind. Along the way, we were able to expand the usability of our app by allowing the user to specify the type of images he or she is looking for.