README.md in ProMotion-0.6.0 vs README.md in ProMotion-0.6.1

- old
+ new

@@ -37,35 +37,40 @@ - [Help](#help) - [Contributing](#contributing) - [Working on Features](#working-on-features) - [Submitting a Pull Request](#submitting-a-pull-request) - [Primary Contributors](#primary-contributors) - + # Tutorials http://www.clearsightstudio.com/insights/ruby-motion-promotion-tutorial ## Screencasts http://www.clearsightstudio.com/insights/tutorial-make-youtube-video-app-rubymotion-promotion/ ## Sample Apps -[https://github.com/jamonholmgren/promotion-tutorial](https://github.com/jamonholmgren/promotion-tutorial) +This is pretty bare-bones, but we'll be building it out as we go along. +[https://github.com/jamonholmgren/promotion-demo](https://github.com/jamonholmgren/promotion-demo) + ## Apps Built With ProMotion ### BigDay! Reminder App -Check out the free [BigDay! Reminder app](https://itunes.apple.com/us/app/bigday!/id571756685?ls=1&mt=8) on the +Check out the free [BigDay! Reminder app](https://itunes.apple.com/us/app/bigday!/id571756685?ls=1&mt=8) on the App Store to see what's possible. ClearSight Studio built the app for Kijome Software, a small app investment company. ### TipCounter App [TipCounter](http://www.tipcounterapp.com) was built by [Matt Brewer](https://github.com/macfanatic/) for bartenders and servers to easily track their tips. Used ProMotion and the development was a lot of fun! +### Winston-Salem Crime Map +Have an interest in crime statistics and locations? Live in Winston-Salem, NC? This hyper-local and [open source](https://github.com/markrickert/WSCrime) RubyMotion app uses a mixture custom UIViewControllers and ProMotion for ease of attribute setting and adding views. Check it out [on the App Store](http://www.mohawkapps.com/winston-salem-crime-map/download/) or [fork it and contribute](https://github.com/markrickert/WSCrime)! + # Getting Started -ProMotion is designed to be as intuitive and Ruby-like as possible. For example, here is a +ProMotion is designed to be as intuitive and Ruby-like as possible. For example, here is a typical app folder structure: app/ screens/ events/ @@ -106,28 +111,31 @@ gem "ProMotion", "~> 0.6.0" ``` Run `bundle install` in Terminal to install ProMotion. -Go into your app/app_delegate.rb file and add the following: +Go into your app/app_delegate.rb file and replace everything with the following: ```ruby class AppDelegate < ProMotion::Delegate def on_load(app, options) open HomeScreen.new(nav_bar: true) end end ``` +Make sure you remove the `didFinishLoadingWithOptions` method or call `super` in it. Otherwise +ProMotion won't get set up and `on_load` won't be called. + Create a folder in `/app` named `screens`. Create a file in that folder named `home_screen.rb`. Now drop in this code: ```ruby class HomeScreen < ProMotion::Screen title "Home" - + def will_appear set_attributes self.view, { backgroundColor: UIColor.whiteColor } end @@ -163,16 +171,16 @@ title "Home" def on_load # Load data end - + def will_appear # Set up the elements in your view with add @label ||= add UILabel.alloc.initWithFrame(CGRectMake(5, 5, 20, 20)) end - + def on_appear # Everything's loaded and visible end end ``` @@ -207,22 +215,22 @@ ```ruby def on_load(app, options) @home = MyHomeScreen.new(nav_bar: true) @settings = SettingsScreen.new @contact = ContactScreen.new(nav_bar: true) - + open_tab_bar @home, @settings, @contact end ``` -For each screen that belongs to the tab bar, you need to set the tab name and icon in the files. +For each screen that belongs to the tab bar, you need to set the tab name and icon in the files. In this example, we would need add the following to the three files (my_home_screen.rb, settings_screen.rb, contact_screen.rb): ```ruby def on_load set_tab_bar_item title: "Tab Name Goes Here", icon: "icons/tab_icon.png" # in resources/icons folder - + # or... set_tab_bar_item system_icon: UITabBarSystemItemContacts end ``` @@ -242,10 +250,18 @@ ```ruby set_nav_bar_right_button "Save", action: :save_something, type: UIBarButtonItemStyleDone set_nav_bar_left_button "Cancel", action: :return_to_some_other_screen, type: UIBarButtonItemStylePlain ``` +If you pass an instance of a `UIImage`, the `UIBarButton` will automatically display with that image instead of text. *Don't forget retina and landscape versions of your image!* + +If you pass `:system` for the title, then you can get a system item. E.g.: + +```ruby +set_nav_bar_right_button nil, action: :add_something, system_icon: UIBarButtonSystemItemAdd +``` + ## Opening and closing screens If the user taps something and you want to open a new screen, it's easy. Just use `open` and pass in the screen class or an instance of that screen. @@ -282,11 +298,10 @@ def on_load self.user # => some_user instance end end - ``` Closing a screen is as easy as can be. ```ruby @@ -392,11 +407,11 @@ def on_load add_right_nav_button(label: "Save", action: :save) set_tab_bar_item(title: "Settings", icon: "settings.png") end - + # table_data is automatically called. Use this format in the return value. # It's an array of cell groups, each cell group consisting of a title and an array of cells. def table_data [{ title: "Your Account", @@ -416,22 +431,22 @@ # This method allows you to create a "jumplist", the index on the right side of the table def table_data_index # Ruby magic to make an alphabetical array of letters. # Try this in Objective-C and tell me you want to go back. - return ("A".."Z").to_a + return ("A".."Z").to_a end - - # Your table cells, when tapped, will execute the corresponding actions + + # Your table cells, when tapped, will execute the corresponding actions # and pass in the specified arguments. def edit_profile(args={}) puts args[:id] # => 3 end end ``` -You can provide remotely downloaded images for cells by including the CocoaPod "SDWebImage" in +You can provide remotely downloaded images for cells by including the CocoaPod "SDWebImage" in your Rakefile and doing this: ```ruby cells: [ { @@ -442,13 +457,13 @@ ``` ## Using your own UIViewController Sometimes you want to inherit from a different UIViewController other than that provided by ProMotion, -such as when using [Formotion](https://github.com/clayallsopp/formotion). **RubyMotion doesn't currently -allow us to override built-in methods when including them as a module.** And we really need to override -`viewDidLoad` and others. +such as when using [Formotion](https://github.com/clayallsopp/formotion). **RubyMotion doesn't currently +allow us to override built-in methods when including them as a module.** And we really need to override +`viewDidLoad` and others. Fortunately, there's a workaround for that. ```ruby class EventsScreen < Formotion::FormController # Can also be < UIViewController @@ -468,19 +483,19 @@ def viewDidAppear(animated) super self.view_did_appear(animated) if self.respond_to?("view_did_appear:") end - + def viewWillDisappear(animated) self.view_will_disappear(animated) if self.respond_to?("view_will_disappear:") super end - + def viewDidDisappear(animated) self.view_did_disappear(animated) if self.respond_to?("view_did_disappear:") - super + super end def shouldAutorotateToInterfaceOrientation(orientation) self.should_rotate(orientation) end @@ -490,11 +505,11 @@ end def willRotateToInterfaceOrientation(orientation, duration:duration) self.will_rotate(orientation, duration) end - + def didRotateFromInterfaceOrientation(orientation) self.on_rotate end end ``` @@ -524,17 +539,17 @@ <td>set_tab_bar_item(args)</td> <td> Creates the tab that is shown in a tab bar item.<br /> Arguments: <code>{ icon: "imagename", systemIcon: UISystemIconContacts, title: "tabtitle" }</code> </td> - </tr> + </tr> <tr> <td>on_appear</td> <td> Callback for when the screen appears.<br /> </td> - </tr> + </tr> <tr> <td>will_appear</td> <td> Callback for before the screen appears.<br /> This is a good place to put your view constructors, but be careful that @@ -562,16 +577,18 @@ </tr> <tr> <td>set_nav_bar_left_button(title, args = {})</td> <td> Set a left nav bar button.<br /> + `title` can be a `String` or a `UIImage`. </td> </tr> <tr> <td>set_nav_bar_right_button(title, args = {})</td> <td> Set a right nav bar button.<br /> + `title` can be a `String` or a `UIImage`.<br /> <img src="http://i.imgur.com/whbkc.png" /> </td> </tr> <tr> <td>should_autorotate</td> @@ -598,11 +615,11 @@ Sets title of current screen.<br /> You can also set the title like this (not in a method, though):<br /> <pre><code> class SomeScreen title "Some screen" - + def on_load # ... end end </code></pre> @@ -719,13 +736,13 @@ <td>Class method to make the current table searchable.</td> </tr> <tr> <td><pre><code>refreshable( callback: :on_refresh, - pull_message: "Pull to refresh", - refreshing: "Refreshing data…", - updated_format: "Last updated at %s", + pull_message: "Pull to refresh", + refreshing: "Refreshing data…", + updated_format: "Last updated at %s", updated_time_format: "%l:%M %p" )</code></pre></td> <td>Class method to make the current table refreshable. <p>All parameters are optional. If you do not specify a a callback, it will assume you've implemented an <code>on_refresh</code> method in your tableview.</p> <pre><code>def on_refresh @@ -743,11 +760,11 @@ you really should be subclassing them and specifying that new class in <code>:cell_class</code> and then providing <code>:cell_class_attributes</code> to customize it.<br /><br /> <strong>Performance note...</strong> It's best to build this array in a different method and store it in something like <code>@table_data</code>. Then your <code>table_data</code> method just returns that. - + <pre><code> def table_data [{ title: "Table cell group 1", cells: [{ @@ -758,11 +775,11 @@ title: "Crazy Full Featured Cell", subtitle: "This is way too huge..see note", arguments: { data: [ "lots", "of", "data" ] }, action: :tapped_cell_1, height: 50, # manually changes the cell's height - cell_style: UITableViewCellStyleSubtitle, + cell_style: UITableViewCellStyleSubtitle, cell_identifier: "Cell", cell_class: ProMotion::TableViewCell, masks_to_bounds: true, background_color: UIColor.whiteColor, selection_style: UITableViewCellSelectionStyleGray, @@ -774,11 +791,11 @@ accessory_view: @some_accessory_view, accessory_type: UITableViewCellAccessoryCheckmark, accessory_checked: true, # whether it's "checked" or not image: { image: UIImage.imageNamed("something"), radius: 15 }, remote_image: { # remote image, requires SDWebImage CocoaPod - url: "http://placekitten.com/200/300", placeholder: "some-local-image", + url: "http://placekitten.com/200/300", placeholder: "some-local-image", size: 50, radius: 15 }, subviews: [ @some_view, @some_other_view ] # arbitrary views added to the cell }] }, { @@ -878,10 +895,10 @@ If you need help, feel free to ping me on twitter @jamonholmgren or open a ticket on GitHub. Opening a ticket is usually the best and we respond to those pretty quickly. # Contributing -I'm very open to ideas. Tweet me with your ideas or open a ticket (I don't mind!) +I'm very open to ideas. Tweet me with your ideas or open a ticket (I don't mind!) and let's discuss. ## Working on Features 1. Clone the repos into `Your-Project/Vendor/ProMotion`