Cocoa Prototyping with Webview May 05, 2009
While Interface Builder makes it really easy to quickly put together and test the overall design of your user interface it doesn’t help much when it comes to its overall flow. In any non-trivial application you are likely to have some custom views or view switching.
For example, say that you want to try out whether it makes sense to use a source list in order to navigate the application and have your content view switch based on what you select in it.
Wouldn’t it be great if you could try this without having to implement all the code necessary to display and navigate the source list and other views. Using HTML for prototyping can be a powerful, quick and easy solution that is easily available to Cocoa developers.
In order to make it even easier I created a
WebView subclass called
PrototypeView that displays a piece of HTML and sends a message to its delegate when the user clicks a link.
To give an idea of what it does, take a look at the following screenshot showing a basic prototype UI consisting of two suchs views embedded in a split view.
Using the PrototypeView is easy.
Step 1: Mock up the UI in Interface Builder
Using Interface Builder, create the UI you want and put custom views where you want to prototype using the
I used a class called
AppController with two outlets to the prototype views by creating an
NSObject subclass and set it up in Interface Builder by dragging an
NSObject from the library and setting the class to
AppController like above.
Step 2: Hooking the view up in the AppController
Back in XCode I create a subclass of NSObject called AppController and setup the two prototype views in its
awakeFromNib by using the two method calls
loadBundleFile. In my example I used two prototype views called
contentView and will use the AppController as my delegate.
Step 3: Prototype in HTML
Starting the application at this point will cause it to load the files sidebar.html and content1.html and display them. Now that the files are being loaded you can implement the prototyped UI portions in the HTML files. Here is the content of sidebar.html:
Step 4: Adding the methods in AppController
Notice the special links to
method:showViewOne, clicking this will make the
PrototypeView look if its delegate responds to
showViewOne and send the message to it if it does.
That’s it, happy prototyping!
For a closer look you can see the PrototypeView source code or download the example project I used as a tarball.