I try to development my fisrt RubyMotion App.
It’s a very simple web browser.
The following is snapshot of finished product.
Let’s start.
Creating Project
Create and Run “Browser” project.
Still blank, black background app.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$ motion create Browser Create Browser Create Browser/.gitignore Create Browser/Rakefile Create Browser/app Create Browser/app/app_delegate.rb Create Browser/resources Create Browser/spec Create Browser/spec/main_spec.rb $ cd Browser $ rake Build ./build/iPhoneSimulator-5.1-Development Compile ./app/app_delegate.rb Create ./build/iPhoneSimulator-5.1-Development/Browser.app Link ./build/iPhoneSimulator-5.1-Development/Browser.app/Browser Create ./build/iPhoneSimulator-5.1-Development/Browser.app/Info.plist Create ./build/iPhoneSimulator-5.1-Development/Browser.app/PkgInfo Create ./build/iPhoneSimulator-5.1-Development/Browser.dSYM Simulate ./build/iPhoneSimulator-5.1-Development/Browser.app |
No problem.
White Background ViewController
Next, add white background ViewController.
Wrap by NavigationController for easy using NavigationBar.
Here is AppDelegate.
|
1 2 3 4 5 6 7 8 |
class AppDelegate def application(application, didFinishLaunchingWithOptions:launchOptions) @window = UIWindow.alloc.initWithFrame(UIScreen.mainScreen.bounds) @window.rootViewController = UINavigationController.alloc.initWithRootViewController(BrowserViewController.alloc.init) @window.makeKeyAndVisible true end end |
Here is BrowserViewController.
Now, only setting backgroundColor.
|
1 2 3 4 5 |
class BrowserViewController < UIViewController def viewDidLoad view.backgroundColor = UIColor.whiteColor end end |
Showing Toolbar and NavigationBar
NavigationBar is displayed by default.
So, I just set Toolbar’s hidden to false in BrowserViewController#viewDidLoad.
|
1 |
navigationController.setToolbarHidden(false, animated:false) |
Loading Google by WebView
Adding UIWebView.
And defining “loadRequest” method for loading webpage.
delegate is set to self.
|
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 |
class BrowserViewController < UIViewController def viewDidLoad view.backgroundColor = UIColor.whiteColor navigationController.setToolbarHidden(false, animated:false) @webView = UIWebView.alloc.initWithFrame( CGRectMake( 0, 0, view.frame.size.width, view.frame.size.height - navigationController.toolbar.frame.size.height - navigationController.navigationBar.frame.size.height ) ) view.addSubview(@webView) loadRequest('http://google.com/') end def loadRequest(urlString) url = NSURL.URLWithString(urlString) request = NSURLRequest.requestWithURL(url) @webView.delegate = self @webView.loadRequest(request) end end |
OK.
Adding LocationBar
Creating TextField for inputting URL.
Adding to NavigationBar and call “loadRequest” in textFieldShouldReturn.
(delegate is self)
Ref: NavigationBarにテキスト欄を表示させる | nk-z.memo
|
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 |
def viewDidLoad @urlField = UITextField.alloc.initWithFrame(CGRectMake(0, 0, 300, 31)) @urlField.font = UIFont.systemFontOfSize(14) @urlField.borderStyle = UITextBorderStyleRoundedRect @urlField.backgroundColor = UIColor.whiteColor @urlField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter @urlField.autocorrectionType = UITextAutocorrectionTypeNo @urlField.keyboardType = UIKeyboardTypeURL @urlField.returnKeyType = UIReturnKeyDone @urlField.delegate = self @urlField.text = 'http://google.com/' navigationItem.titleView = @urlField end # - (BOOL)textFieldShouldReturn:(UITextField *)textField def textFieldShouldReturn(textField) urlString = textField.text if urlString.length > 1 loadRequest(urlString) end textField.resignFirstResponder true end |
Forward, Back, Refresh, Stop
Adding buttons to toolbar, and set action for calling webView’s methods.
Ref: ツールバーのボタン (UIBarButtonItem) の隠し API – 24/7 twenty-four seven
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@backItem = UIBarButtonItem.alloc.initWithBarButtonSystemItem(101, target:@webView, action:'goBack') @forwardItem = UIBarButtonItem.alloc.initWithBarButtonSystemItem(102, target:@webView, action:'goForward') @relaodItem = UIBarButtonItem.alloc.initWithBarButtonSystemItem(UIBarButtonSystemItemRefresh, target:@webView, action:'reload') @stopItem = UIBarButtonItem.alloc.initWithBarButtonSystemItem(UIBarButtonSystemItemStop, target:@webView, action:'stopLoading') @stopItem.enabled = false toolbarItems = [ @backItem, @forwardItem, UIBarButtonItem.alloc.initWithBarButtonSystemItem(UIBarButtonSystemItemFlexibleSpace, target:nil, action:nil), @relaodItem, @stopItem ] toolbarItems.each do |item| item.style = UIBarButtonItemStyleBordered end setToolbarItems(toolbarItems, animated:false) |
Adjustment for Usability
Showing indicator when loading, and switch Enable/Disable buttons in Delegate methods of webView.
Ref: UIWebView下で、UIButtonの活性／不活性にする: iPhoneアプリ開発備忘録
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
# - (void)webViewDidStartLoad:(UIWebView *)webView def webViewDidStartLoad(webView) UIApplication.sharedApplication.networkActivityIndicatorVisible = true @stopItem.enabled = true end # - (void)webViewDidFinishLoad:(UIWebView *)webView def webViewDidFinishLoad(webView) UIApplication.sharedApplication.networkActivityIndicatorVisible = false @backItem.enabled = @webView.canGoBack @forwardItem.enabled = @webView.canGoForward @stopItem.enabled = false end # - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error def webView(webView, didFailLoadWithError:error) webViewDidFinishLoad(webView) end |
Conclusion
That’s all. Did you have fun?
Full source code is available on GitHub.
I’ll add other samples soon.
RubyMotionApps/Browser at master · tnantoka/RubyMotionApps · GitHub
Enjoy iOS Development by Ruby :-)
Sorry for my English.
One Response to My First RubyMotion App: Very Simple Web Browser