How does one present a modal view using PhoneGap? - ios

Having made a few iOS apps, I'm now taking my first steps in building a HTML5 app with PhoneGap.
One of the things that has stumped me is how to present a modal view. In iOS it's trivial:
[myViewController presentModalViewController:modalViewController animated:YES];
But after a bit of Googling, and checking out PhoneGap's API reference, I can't find a single example of how to present a modal view...something I thought would be a trivial task with 100s of tutorials.
Or maybe I'm just really bad at Googling! I think however, that I'm missing something blindingly obvious...

there is no presentModalViewController for phonegap, in phonegap you load all your code in a "webView", and all the code and page transitions have to be done with html+css+javascript, so you have to create your own flip, crossdisolve and other animations (or use jquery mobile, jqtouch, jqmobi or any other javascript framework with this animations), so you can reuse the code in other platforms, you don't have presentModalViewController on android or blackberry.
If you really want to use presentModalViewController on a iOS phonegap app, you have to create a plugin, or use phonegap as a component, then you create different views, loading different html files on them, and change betweem them with native code.

This will help you to
http://malsup.com/jquery/block/#dialog

I much rather use bootstrap (http://getbootstrap.com/javascript/)
$('#myModal').modal('show')

Related

Multiple webview in an app or one

I'm creating an ios/android app that is implemented with partially native code and html5/css and built-in mobile webkit, I need to make it support both ios and Android, hence the html5/css selection. In my app I created a tabbar with 4 tab buttons, each tabview contains a webview, the tabs and tabbars are implemented natively, meaning the code for this is either objective-c or Java. What happens in those webviews are html5/css/js... I wonder if this is the appropriate way to implement it, or should I wrap the whole thing up in one single webview, and implement everything using html5, including the tabbar. Or let me ask this way, what did facebook do with its tabbars in its app? I'm concerning about user experience and seamless transition/animation.
If I can mimic the native ios/Android tabbar using html5, how may I? Anyone could maybe provide a link to a tutorial? Thanks!

IBM Worklight - Is it possible to add UINavigationController as the starting native page?

I am trying to integrate a navigation based iOS application into IBM worklight. However, I am not able to add UINavigationController as its first native page. In the tutorials, they have only explained integrating a normal UIViewController. Since UINavigationController is a subclass of UIViewController, Shouldn't one be able to integrate that as well?. Could some one please tell me if I can integrate a navigationcontroller using "WL.NativePage.show" API.
Currently, I am not able to figure out how to set the rootviewcontroller for the navigationcontroller object.
I do not know the motives for your request so this might not answer your question, but it does offer an alternative.
See the following blog post by Anton Aleksandrov. In it Anton explains how use native controls, which can also be navigation controls in your case, in your Worklight Hybrid application. That is, w/out the need to do it in a "native page".
Essentially, you are still using the HTML file as the "starting page" of the application, but you shrink the Cordova WebView, allowing you to add, place, native controls at the top and bottom for example. There you can place a native navigation control.
Blog post: [iOS] Combining native and web controls in Cordova based applications

Show app on top of PhoneGap BarcodeScanner

I'm looking to integrate PhoneGap's BarcodeScanner plugin with my app but would like to integrate it with the existing HTML/JS (inside the WebView) a little more closely than it currently allows.
Ideally I would like to see the BarcodeScanner's 'camera capture' view appear underneath PhoneGap's main WebView so I can layer my app's controls on top (toolbar etc).
I have come across a similar plugin from Moodstocks (http://www.moodstocks.com/2013/04/03/augmented-reality-with-phonegap-sencha-touch/) which appears to do just this by giving the WebView a transparent background and displaying it above the camera's view. The source code for this plugin can be found here (https://github.com/Moodstocks/moodstocks-phonegap-plugin) and more specifically (based on my reading the code with very unknowledgable eyes!) on Line 74-80 of the MSScannerController.m (https://github.com/Moodstocks/moodstocks-phonegap-plugin/blob/master/ios/MSScannerController.m).
So my question is, firstly, is this achievable? and, secondly, how can I modify the PhoneGap plugin to do it?
Any pointers or direction would be very helpful!
For the first question, the answer is quite sure - YES.
For the second question, what we (I work for Moodstocks) have done is:
Detaching the webview from MainViewController, knowing that you can retrieve the webview via plugin. In MoodstocksPlugin.m, lines 99-100 show how we pass the plugin's reference:
Attaching the webview to the current view controller, which is our scanner controller. MSScannerController.m, Line 46 shows how we take the webview over:
I hope this can give you several ideas about how to modify the original PhoneGap BarcodeScanner plugin, just out of curious, why not use MoodstocksPlugin directly? ;)
p.s Here is a video shows the animation of our Sencha Touch demo made with our plugin.

Using flash inside a native iOS app

I'm working on a native Objective-C iOS app and I'm wondering if it is possible to embed an animation created in Flash into my app. The animation doesn't have to be interactive, all I need is a couple of animated screens (intro screen, loading screen). Is this posible?
Maybe the long way around since it doesn't sound like you need a Flash-heavy type app but I have seen a few Flash-toCocoa2D exporters around. I haven't got around to trying them yet but they look useful. Of course you probably have to be using the Cocoa2D frame work to use them - unless there is an easy way to extract + repurpose that relevant code from the Cocoa2D source.
Anyway, probably overkill for what you need but here are some links:
http://dl.dropbox.com/u/514219/FlashToCocos2dAnimation.zip
VID of it in action:
http://www.youtube.com/watch?v=8ZyqGrdkTtM
Another tool:
http://marshgames.com/swftoxml-and-importing-flash-scenes-into-cocos2d-on-iphone/
Nope...Apple will reject any app that uses flash
you could use video player for intro screen (i've seen it on a few apps) or simple picture animation using UIView animation methods
here is a tutorial

UINavigationBar for JQuery Mobile, or other HTML solution

I am building a PhoneGap app that uses JQuery Mobile, and I would like the app to feel as much like a native app as possible. What out there emulates the look and feel of a native UINavigationController best in Safari-land?
I'd much prefer to write all the silly user interface code in HTML/Javascript, rather than using verbose Objective C code.
A lot of the other JavaScript mobile frameworks (Sencha Touch, jQTouch, ChocolateChip-UI, AppML, etc) have built-in navigation emulating the UINavigationController in HTML/JavaScript/CSS.
jQuery Mobile does too, but it seems less like it is trying to look exactly like a UINavigationController.
eg: http://jquerymobile.com/demos/1.0a4.1/#docs/pages/index.html
In the above demo you can see that there is a top menu bar with back buttons as you navigate through the demo.
However, if you want it to emulate the native UINavigationController more closely, you might be better off looking at one of the other frameworks I mentioned above.

Resources