CREATE AN IPHONE APP WITH DAPP TUTORIAL 2 – EXPORT TO CODE

Welcome to episode 2 of Creating on iPhone app with Dapp. I will be showing you how to build an iPhone app from scratch. At the end of these tutorials we will be submitting and releasing our funky new app on the app store. 😀
In our last tutorial, we defined some requirements and created our mockups, which were then published to PDF. In this tutorial, we will export our mockups as code, drag and drop the code into a new Xcode project and then finally release a prototype of our app. The very cool part is we are going to do this with ZERO code… I’m gonna go grab some coffee while you watch the tutorial. Enjoy!

Note: Please ensure you select ‘iPhone’ as the Product option when creating a new project in Xcode. The other two options, Universal and iPad will present a different folder structure to you.
Updates:
File system folders were created in the OS and linked to the Xcode project to further neaten up the code. This can be seen in the attached zipped project files.
Please find attached the exported code files and a copy of the Xcode project.
Bug Tracker Project Files – Episode 2
Bug Tracker Export to Code Files – Episode 2
Our next few tutorials will move away from Dapp :(… as disappointing as that is, I will be showing you guys how to:
setup a SQLite database and how to interact with it
create a layered design, which will be composed of a data layer and a business layer to interact with out database
we will also be creating classes for our ‘Projects’. I will explain this further in later tutorials
Oh.. and the next tutorial will focus on button events and actions, and pushing new view controllers. This will allow us to jump between our views that we created. Very cool!
Mmm…. the next tutorial will be called ‘Linking our view controllers’. See you then. 😀

27 thoughts on “CREATE AN IPHONE APP WITH DAPP TUTORIAL 2 – EXPORT TO CODE”

  • Super Excited about the sql tuts as well as layered design.

    Are we able to load in an rss feed of videos or podcasts and play them in the app?

    • We have had a few questions about RSS feeds and it is a tutorial I need to write that is on the to-do list. Rather than create an option to load RSS feeds in Dapp itself, I will be writing a tutorial that will show you how you can hookup RSS feeds to Dapp exported code.

      That being said, with the success of Dapp, we also have plans to introduce custom UI Objects in future versions. One of these objects will probably be an RSS feed tableview that you can hookup to RSS feeds.

  • Can you explain “hookup” an rss feed for me?

    Does that mean I could load in some web view sdk and it would show the rss feed?

    Or does it mean I could just build the page with the elements and in xcode hook it up to the page?

  • Currently, this would be just building the page with the elements and in Xcode hook it up to the page/feed.

    A potential future custom UI object would allow you to specify a feed and generate this code for you automatically.

  • could i maybe get a quick fresher on how to make a page and load int the rss feed? Or would that take forever?

  • :). Not forever, but it would take a while. I’m just finishing up a guide-lines feature for the view mode at the moment (very useful). But, I’ll try to get a tutorial out in the next 2-3 days, as I’ve also promised someone else a RSS feed tutorial.

  • Hi kerofrog,

    Hoping that I can build my prototype app with dapp, then edit it through code to integrate more graphics. Is that possible? I.e: Let’s say I want to put a picture of a chocolate cake on one of the navigation buttons, like an icon. Can I make the layout with Dapp with just a regular icon instead of a cake, and then later go in and change it in the actual code to a cake icon?

    Thanks!

    • Sure, this is what Dapp was built for. Rapid application development.

      You use Dapp to quickly prototype and create the code for your UI structure, and then you go into the code and add to it or make changes where necessary.

  • Now that i’ve exported my personal project to code, how do i remove the blue navigation bar that is automatically placed at the top of all my views? It’s covering the toolbar that I have created to maneuver thru my pages.
    Or…
    If i decide to keep it, how can i change its color to black?

    • Welcome to Navigation Controllers. 🙁

      The steps are –
      1) Make sure Navigation Controller setting is set to off when exporting your code.
      2) In the code, hide the Navigation Controller Navigation Bar by using [self.navigationController setNavigationBarHidden:YES]; in the init method of the view controller you wish to hide the navigation bar for.

      Something else on my todo list, might look at focusing on support for Tab Bar Controllers and more control over the Navigation Controller in the next version.

      To change a Navigation Controllers Navigation Bar to a different color, you must do this after you initialise it but before it gets added as a subview of the window in the AppDelegate.

      So… the steps. 🙂
      1) Go to your AppDelegate file and in your didFinishLaunching method, after the line – navigationController = [[UINavigationController alloc] initWithRootViewController:];
      2) Type in – [navigationController.navigationBar setBarStyle:UIBarStyleBlack];

      The reason why it has to be done in the init method is because after the Navigation Controller is added to the subview, the NavigationBar property becomes read-only.

  • Hey Cliff, thanks for the response before (chocolate cake picture example).

    I do have another though…I’m trying to make a list using the TableView object. I’m assuming that I’ll need to put in a scrollbar object so that once it’s all coded, it’ll scroll up and down the list like the list of songs in your iPod?

    Also, I have put 3 sections in to this TableView list, and have named each section differently. I want different things to appear under each section, but when I type in what I want the cells to say under “cell text”, it all appears under all three sections, even though I want each section to have different items under it. Sorry if that doesn’t make much sense. I’ll clarify if you need me to.

    Thanks!

    • Dapp was originally just a mockup and quick UI build tool. It is slowly morphing into something a bit more, and this is one of those areas where we have not given as many options as there could be.

      The simplest way to do this in your code is to duplicate the array of cell texts provided, give it a new name and then call the correct array for each section. For example:

      – (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
      // First section has index of 0
      if (section == 0) {
      return [array1 count];
      } else if (section == 1) {
      return [array2 count];
      }
      }

      In your cellForRowAtIndexPath method, you then set the value depending on the current section. eg:

      if (indexPath.section == 0) {
      cell.textLabel.text = [array1 objectAtIndex:indexPath.row];
      } else if (indexPath.section == 1) {
      cell.textLabel.text = [array2 objectAtIndex:indexPath.row];
      }

      No need to use a scrollView with a table view. The interesting thing is that a tableview inherits from scrollview and thus is just a custom scrollview that Apple provides for us.

  • Thank you for your quick response and for the solution to my navigation controller issues. Those are solved. 🙂

    Now I’m curious if there is a simple way to get my view switching to slide ‘back’ to the left when one of my buttons references the previous view, instead of always animating the view to look like it’s coming from the right?

    Thanks in advance!!

  • You want to use the ‘Pop’ action for this. Think of your view controllers as a stack of pages, your most recent view controller is on the top.

    So, when you want a new page, you ‘push’ it on top of the stack. To remove the top page and show the 2nd page from the top (previous page), you ‘pop’ it off the stack.

  • QUOTE: “Welcome to Navigation Controllers.
    The steps are –
    1) Make sure Navigation Controller setting is set to off when exporting your code.
    2) In the code, hide the Navigation Controller Navigation Bar by using [self.navigationController setNavigationBarHidden:YES]; in the init method of the view controller you wish to hide the navigation bar for.”

    Hi, this is not working for me, I still get the navigation bar at the top. The export has NAvigation Controller off on the app too??

    I have added:
    [self.navigationController setNavigationBarHidden:YES];
    to each viewcontroller.m file

    like this:

    – (id)init {

    //hide navigation bar
    [self.navigationController setNavigationBarHidden:YES];

    if (self = [super init]) {
    // Set the title for this view controller
    // Note: In future we will copy over the title from any created UINavigationBar objects
    self.title = @”Yes_I_do”;

    // Link this view controller to our Dapp generated view
    UIView *yes_I_doView = [[Yes_I_doView alloc] initWithParentViewController:self];
    self.view = yes_I_doView;

    // The view controller now has it’s own copy of our Dapp view, we can release our copy
    [yes_I_doView release];
    }
    return self;
    }

    where am I going wrong?

    thanks

    • Oops, i need to update the post explaining how to hide the navigation controller. From what I can tell, since OS 4.0, assigning settings to a navigation controller must be done after it is created but before it is added to the window. The negative is that we can no longer hide/show the navigation bar when we choose but need to assign an initial setting in the App Delegate.

      To get the functionality you are looking for, after this line in the AppDelegate.m file:

      // Initialise the navigation controller with the first view controller as its root view controller
      navigationController = [[UINavigationController alloc] initWithRootViewController:myViewController];

      You add the following:
      [navigationController setNavigationBarHidden:YES];

      This should now work correctly for OS 4.0

  • Hi how do I use the camera controls? I want a button to click to start the camera and put the image on the page I am using. Is there a way to do this with Dapp?

    • If you are referring to creating images using Dapp, you can use the ‘Image View’ object to access the camera controls and select an image to put on the page you are using. Otherwise, if you are referring to if Dapp can create the code to allow your end-users to start a camera and select their own images, then the following would apply –

      Dapp is a tool that is used to quickly create the interface of an iPhone app. As an extra, there is also a feature to add actions that will open other screens as a way to quickly create prototypes from the interface mockups. As such, Dapp will create the UI for you but any extra functionality like allowing users to access the camera controls will need to be coded on top of the Dapp exported code.

  • If anyone else is looking for the “Navigation Controller” setting. I found it under the Project Options page. This is better than what we are seeing in the video where we need to toggle the “Navigation Controller” setting on each page. Now we can set it for the entire project.

    • :). Thx for the share Joe.

      Although the setting has always been in project options and in page options. I just dropped the option in individual pages in recent update 😉

Leave a Reply

Your email address will not be published. Required fields are marked *