Page 55 - MSDN Magazine, April 2018

is represented by one of the values, defined in the Watch- Kit.WKAlertControllerStyle enumeration: Alert, SideBy- SideButtonsAlert or ActionSheet. Differences between them are summarized at apple.co/2GA57Rp.
• Actions are a collection of action buttons to be included in the alert. Note that the number of actions depends on the alert style as described in the referenced documentation.
Here, both title and message are set to string.Empty, while the alert style is set to ActionSheet. As a result, only action buttons will be displayed (refer back to Figure 1). To ensure that alertActions are ready before the user taps the Get list button, I retrieve photos and titles within the Awake method (as shown in Figure 7):
You can now run the app. When the photo album is retrieved from the remote server, the button will be enabled. Click it to activate the action sheet (shown in the middle part of Figure 1).
Table View
To complete this implementation, I need to create the table view showing the selected group of photos. To that end I open the story- board designer and from the Toolbox drag the Table control onto the scene (I’ll place it just below the Get list button).
In the next step, I need to define the cell layout. By default, this layout has a single control: Group. I can use this as the parent for other controls, but first I need to ensure that the group control is active. So, I click the Document Outline pad (visible in the bot- tom part of Figure 4) and then click Group Control under the Table/Table Row. Next, I drag Image and Label controls onto the table. Image and Label will appear in the table view and also in the Document Outline. I’ll configure all control properties as fol- lows: Image (Name: ImagePhotoPreview; Size: Fixed Width and Height of 50 px), Label (Name: LabelPhotoTitle), Table (Name: TablePhotos), Group (Size: Fixed height of 50 px).
It’s important to explicitly set control names so you can easily refer to them from the code. Once you specify the control name, Visual Studio makes an appropriate declaration under the InterfaceController.designer.cs file.
In watchOS every row has a dedicated row controller, which you use to control row appearance. Here, I’ll use this controller to specify content for the image and label of each row. To create the row con- troller, select the Table Row in the Document Outline pad, and then open the Properties tab, where you type PhotoRowController in the
Figure 7 Retrieve Photos and Titles
Class textbox. A new file, PhotoRowController.cs, will be added. It contains the class of the same name. I then supplement the defini- tion of this class by another method, as follows:
public async Task SetElement(Photo photo) {
Check.IsNull(photo);
// Retrieve image data and use it to create UIImage
var imageData = await PhotosClient.GetImageData(photo);
var image = UIImage.LoadFromData(NSData.FromArray(imageData));
// Set image and title ImagePhotoPreview.SetImage(image); LabelPhotoTitle.SetText(photo.Title);
}
The SetElement function accepts one argument of type Photo to display a photo thumbnail along with photo title in the appro- priate row of table view. Then, to actually load and configure table rows, I extend the definition of the InterfaceController using the following method:
private async Task DisplaySelectedPhotos(RowSelection rowSelection) {
TablePhotos.SetNumberOfRows(rowSelection.RowCount, "default");
for (int i = rowSelection.BeginIndex, j = 0; i <= rowSelection.EndIndex; i++, j++)
{
var elementRow = (PhotoRowController)TablePhotos.GetRowController(j);
await elementRow.SetElement(photos.ElementAt(i)); }
}
RowSelection is passed to DisplaySelectedPhotos method in order to provide necessary information about the rows to be displayed. More specifically, RowCount property is used to set the number of rows to be added to the table (TablePhotos.Set- NumberOfRows). Subsequently, DisplaySelectedPhotos iterates through table rows to set the content for each row. At each itera- tion I first obtain a reference to the PhotoRowController associated with the current row. Given that reference I invoke the PhotoRow- Controller.SetElement method in order to get image data and title, which are displayed in the table cell.
Finally, after running the app, you’ll get the results shown pre- viously in Figure 1.
Wrapping up
In this article, I showed how to develop watchOS apps with Xamarin, Visual Studio for Mac and a shared C# .NET code base implemented within the .NET Standard Class Library. Along the way I explored some of the most important elements of watchOS apps, including the app structure, interface controllers and selected UI controls (button, action sheet, table view). Because the shared code base is implemented using the same approach employed with mobile apps, you can easily extend your mobile solution to target smart wearables. You can get more info on watchOS from the Apple at apple.co/2EFLeaL, as well as detailed Xamarin documentation at bit.ly/2ohSwLU. n
DawiD Borycki is a software engineer and biomedical researcher, author and con- ference speaker. He enjoys learning new technologies for software experimenting and prototyping.
Thanks to the following technical expert for reviewing this article: Brad Umbaugh
public async override void Awake(NSObject context) {
base.Awake(context); SetTitle("Hello, watch!");
// Disable button until the photos are downloaded ButtonDisplayPhotoList.SetEnabled(false);
// Get photos from the web service (first album only) photos = await PhotosClient.GetByAlbumId(1);
// Create actions for the alert CreateAlertActions();
ButtonDisplayPhotoList.SetEnabled(true); }
msdnmagazine.com
April 2018 49