motion-hybrid takes your existing web app and views and wraps them in a snappy native iOS interface
Add to your rubymotion project's Gemfile:
Run bundle and install required cocoapods:
$ bundle $ pod setup $ rake pod:install
Create a screen class that inherits from
MotionHybrid::Screen and set the base url of your web app:
# app/screens/base_screen.rb class BaseScreen < MotionHybrid::Screen self.root_url = 'http://github.com' end
Instantiate a screen and set the initial path:
# app/app_delegate.rb class AppDelegate < PM::Delegate def on_load(app, options) open BaseScreen.new(nav_bar: true, path: '/balvig') end end
By default, all GET-links are pushed onto the navigation controller stack.
<!-- index.html --> <a href='index_2.html'>Page 2</a> <!-- index_2.html --> <p>This is page 2</p>
Links with anchor
#modal will be opened in a modal window.
Links within a modal linking to the url of the page that created it will automatically close the modal.
<!-- index.html --> <a href='modal.html#modal'>Page 2</a> <!-- modal.html --> <a href='index.html'>This will close the modal</a>
Links with anchor
#self will open the new url within the current view without pushing a new view on to the stack:
Any non-GET requests (form posts etc) will display the result within the current view and also automatically refresh all parent views so that pages are up to date.
Sometimes you will want to trigger native iOS functionality from the web views, this is done by intercepting URLs that you can handle using the routing api, so you can do things like:
class BaseScreen < MotionHybrid::Screen # pops up in-app email composer when clicking mailto: links route /^mailto:/ do BW::Mail.compose(to: 'email@example.com', subject: 'In app emailing', message: 'Hi!', animated: true) end # ask for push nofitication permisions when user hits '/setup' url route '/setup' do App.delegate.register_for_push_notifications :badge, :sound, :alert end end
All markup is contained within a div with id
<div id='motion-hybrid-bridge'> <h1>This is the title</h1> <h2>This is a subtitle</h2> </div>
<div id='motion-hybrid-bridge'> <div class='flash'> <h3>Congratulations!</h3> <p>You completed level 2</p> </div> </div>