Dapp

Here at kerofrog we find user interface design to be critical. Ideally, we love to create designs that do not require you reading a manual to work out how to do anything.

Unfortunately there is one area of Dapp that stands out as requiring instructions on it’s use. Specifically, the Navigation Controller option in the Page Options screen.

First, perhaps we can explain what this option does.

When we export the code, we create a View connected to a View Controller which is connected to a Navigation Controller.

[Navigation Controller] -> [View Controller] -> [View]

The problem with a Navigation Controller is that it automatically inserts a Navigation Bar on each of your screens.  This Navigation Controller will push down all of the objects you have created in Dapp.  I am sure that after a few uses of Dapp, you will see how your nicely organised screen with your own Navigation Bar and other objects has now been pushed down, with two navigation bars sitting at the top of the screen.  As can be seen in the next screenshot.

Doesn’t look very pretty, does it?

That top blank bar is the Navigation Bar that the Navigation Controller automatically created.  The solution is to go into the code and manually move our objects up by 44 pixels.  Which is time consuming and annoying.  Luckily, by switching on the Navigation Controller option in our Page Options screen, Dapp will automatically move all of our objects back up by the required 44 pixels.  The side-affect is that the Navigation Bar you created will be hidden behind the Navigation Controller.

Luckily, this isn’t so bad, as any settings you applied to the Navigation Bar you created can be transferred over to apply to the Navigation Controller.  This does require writing code, but as you have your own Navigation Bar created in the code, you can just look at the code to see what settings you need to apply to the Navigation Controller.

Of course, wouldn’t it be nice if Dapp just did this for us? The good news is that in a future update, Dapp will do this for you, by checking whether you have created a Navigation Bar and automatically copying over these settings to the Navigation Controller for you.

Phew, that took a while to explain. Almost forgotten the original reason for this post.  Which happens to be User Interface Design and an option in Dapp that requires a manual.  ;)

We will be creating a separate screen for our Export to Code option in the future, one where you have more control on how the mockups are exported.  It will (hopefully) make perfect sense.

Example

To do this yourself in code, you will need to open up the ViewController for the navigation bar that you wish to edit. In the init method, you can use the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

(id)init {
	if (self = [super init]) {
                /*** Dapp Generated Code ***/
		// Change this to set your own title for the view controller
		self.title = @"My Title";
 
		// Link this view controller to our Dapp generated view
		UIView *dappFeedView = [[DappFeedView alloc] initWithParentViewController:self];
		self.view = dappFeedView;
 
		// The view controller now has it's own copy of our Dapp view, we can release our copy
		[dappFeedView release];
 
                /*** Custom code that we can add to update the navigation bar ***/
		UIBarButtonItem *infoButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Info" // The title
							 style:UIBarButtonItemStyleBordered  // The style of the button item
							 target:self // Target (where we will handle this button being pressed)
							action:@selector(infoButtonAction)]; // The method to handle the button press
		[self.navigationItem setRightBarButtonItem:infoButtonItem];  // We set this button to be the right bar button
		// The navigation item has a copy of this bar button item, release our copy
		[infoButtonItem release];
 
	}
	return self;
}
 
// Our button item action method
- (void)infoButtonAction {
	NSLog(@"User has pressed the info button, do something");
}

There are a few more other things you can do with a Navigation Controller’s Navigation Bar, but these do become increasingly complex and it is generally not a good UI practice to clutter your navigation bar with objects.

As mentioned previously, this is a TODO for something that will be automated for you in future versions of Dapp.