Sunday, July 17, 2016

WKInterfaceTable in Rubymotion

So I love Rubymotion in every way. It is like being an early explorer when they still believed the world was flat. Taking on syntax conversion one line at a time. My latest exploration was working with WatchKit.

WatchKit in itself was a learning experience because I had to get familiar with Interface Builder, which I had never done before. The cool thing is, I believe using Interface Builder for Apple Watch is an easy way to get familiar with the interface. A lot less moving parts than for iPad, iPod, or iPhones.

Below is my journey into WKInterfaceTable. I hope it helps somebody out there because it would have helped me and cut my development time, for a simple Watch Kit Table, in half.

First, you create a WatchKit app. You can do this quick, fast and in a hurry using the Rubymotion documentation for Project Management,

Second, after you have your WatchKit app setup, most of our initial configuration will come from Interface Builder. Change directories into the watch_app subdirectory and run 'rake ib'. This will open Interface Builder for you

Next, we are going to add our table to our Interface Controller. Go into the Object Library in the bottom right. Drag the Table Object into the Interface Controller Scene.

Once we get the Table dragged over then we'll add a quick label, same way as before. Drag the label object from the Object Library.

Next, we have to set up our WKInterfaceTable for the handling of mapping in our code. In the Utilities pane you need to add a Controller Identifier and which class to reference. By default it references NSObject, but we have to create a custom class to map the cells label.

After this we are done in Interface Builder for right now. You can close it out and open up your application in your text editor, we'll come back to it later.

Now when we get into our application, you will need to navigate to your WatchKit app and open up the InterfaceController file. Working with the 'ib' gem we will setup outlets to map in Xcode later.

We will next set up a class for our TableRowController that we specified as our Table Identifier. Now the hard lesson I learned here, being new to 'ib', is to make sure you Extend IB into this file. If you don't then you won't be able to map the outlets correctly when we get back into Interface Builder a little later. This class will inherit from NSObject.

After we have done this setup, we will get back into Xcode by running the 'rake ib' command to open up our Interface Builder. We will then map our outlets. First we will map our table to the 'main_table' outlet we created.

Next, we will map our Cell Label to the tableLabel that we created in our MainTableController. After this, you can open back up your text editor for the final touches.

Lastly we need to put some data in those cells. We will open back up our InterfaceController file and add this data into our awakeWithContext method. Like a normal iOS table you will need to define your number of rows and the data populating those rows.

After we add our custom data and set the Text for the label we can run our 'rake watch' command and see our selectable table be populated with our data.