Shazron's Cordova (aka PhoneGap) Blog

at Adobe Systems Inc.

Cordova iOS and iOS 7 Support

with 72 comments

PluginWith the release of Cordova 3.1.0, we added preliminary iOS 7 support, particularly the support of four new UIWebView properties: GapBetweenPages, PageLength, PaginationBreakingMode, and PaginationMode. There is more iOS 7 support added today in the core plugins listed below.

The config.xml parameters HideKeyboardFormAccessoryBar and KeyboardShrinksView also support the new iOS 7 keyboard. However, going forward these two properties have been removed in 3.2.0, and you will need to grab the new keyboard plugin (install using the plugin id org.apache.cordova.keyboard). The decision to remove this functionality into a plugin is so updates and fixes are not tied to a particular core release.

Also, the UIWebView properties stated above (as well as others related) will eventually be put into a plugin and not included in the core, the target for this is the 3.2.0 release.

These core plugins have been updated to support iOS 7:

There is also a new statusbar plugin (install using the plugin id org.apache.cordova.statusbar). This gives you an API to change the status bar to be like it was in iOS 6 (where the status bar does not overlay the webview). The plugin also gives you the ability to control the status bar appearance and visibility.

[UPDATE] The keyboard and statusbar plugin repos have been moved from the plugins branch of the cordova-labs repo to its own repo, cordova-plugins

About these ads

Written by shazron

October 15, 2013 at 10:33 pm

Posted in cordova, phonegap

72 Responses

Subscribe to comments with RSS.

  1. Great news! I already have the statusbar plugin in place, looks great.
    Fast question on “org.apache.cordova.inappbrowser” – how do we update to the version with the fix in the dev branch?
    I took a guess and tried to re-add it with the branch:
    phonegap local plugin add https://git-wip-us.apache.org/repos/asf?p=cordova-plugin-inappbrowser.git;h=refs/heads/dev
    but that threw errors.

    Benjamin Hill

    October 15, 2013 at 11:02 pm

  2. Shazron how do we know what is a plugin available through the CLI? Are they listed somewhere?

    Mike

    October 15, 2013 at 11:40 pm

  3. And how to add?
    cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-labs.git#plugins:statusbar
    does not work

    Andreas

    October 16, 2013 at 11:30 am

  4. Can anyone provide a working implementation guideline for the statusbar login?
    I can’t get this working…

    Andreas

    October 16, 2013 at 12:00 pm

    • what do you mean “statusbar login”? The docs are linked in the blog post.

      shazron

      October 17, 2013 at 4:13 am

  5. hey Shaz, thxx for the status bar plugin. Havent tried it yet, but it beats the hack everyone is doing thru main VC or CSS margin top. Glad to see Cordova taking care of it.

    walid taraf

    October 16, 2013 at 3:51 pm

  6. Hi Shazron,

    I just tried Cordova 3.1 yesterday and experienced several keyboard issues which didn’t happened with PhoneGap 3.0, could you have a look at below link and let us know if Keyboard plugin doesn’t has them? Keyboard plugin is only available for Cordova 3.2, correct?

    http://stackoverflow.com/questions/19416886/how-to-fix-keyboard-issues-with-cordova-3-1-on-ios

    Thanks,

    Tien Do

    October 17, 2013 at 5:08 am

  7. Hi! The id in phonegap3.0 included the word ‘core’. For example, inappbrowser plugin was: org.apache.cordova.core.inappbrowser and now is: org.apache.cordova.inappbrowser. How can I update if the ids are not the same?

    Fernando

    October 17, 2013 at 12:21 pm

    • Remove the plugin using the old app id. Then add using the new app id.

      shazron

      October 17, 2013 at 1:34 pm

  8. Has anyone seen an issue with the new statusBar plugin whereas the app gets stretched out, and i can’t see the right side of my app when i turn on ‘StatusBarOverlaysWebView’ to false? If i leave the default (true), all is well. Just that one property change in config.xml totally revamps the app width. So I cant use the plugin and i have to go back to customizing my main VController manually to handle the web view and push down the view biounds height by about 20 pixels.

    walid taraf

    October 17, 2013 at 2:15 pm

    • Can you test in a new project? Would be great if you can file an issue with a sample index.html demonstrating the issue (use component cordova-labs). http://issues.cordova.io

      shazron

      October 17, 2013 at 6:59 pm

      • Shazron, i will in the next few days. Not forgotten, and will file an issue if i do see it.

        walid taraf

        October 18, 2013 at 5:06 pm

      • Thank you!

        shazron

        October 18, 2013 at 6:10 pm

    • I’m experiencing the same thing with my app…

      Geoff

      October 17, 2013 at 8:47 pm

      • Hey Geoff, have you noticed also a huge app size increase with 3.1? Mine has tripled from 3B to 10MB…i did install all the core plugins and one simple custom plugin. But all these plugins were part of pre-3.0 Cordova code prior to CLI/Plugman.

        I know we have a platforms/xxx directory and i only have installed/built iOS. We do have redundant ‘www’ folders but i cant imagine those being the cause

        walid taraf

        October 18, 2013 at 5:05 pm

      • The only thing that gets packaged would be the platforms/ios/www folder. Check that to see if there are things that shouldn’t be there?

        shazron

        October 18, 2013 at 6:11 pm

      • I know what you mean Shazron, but i just created a vanilla project as follows, and i have an 8mb IPA thru Xcode5. Zero plugins, zero of our own code. Something’s not right…THAT is all i did below, then click on the test.xcodeproj to bring up xcode and archive an IPA that is 8MB.

        Can you try it and see what you get? Such simple vanilla steps. THANK YOU!

        1. cordova create Test com.att.myTest Test
        2. cordova platform add ios
        3. cordova build
        4. cordova build iOS

        That is a huge issue and we may have to wait out on implementing 3.1.

        walid taraf

        October 18, 2013 at 6:17 pm

      • Yup – like I mentioned, check out your platforms/ios/www folder and remove what you don’t need there from the default template. The “res” subfolder has about 8 MB of icons and stuff. In a non-CLI project create — it only added a copy of the generic template minus the non-iOS sample assets, but the CLI of course adds in the the generic template unmodified.

        shazron

        October 18, 2013 at 6:30 pm

    • I am having this same issue.

      pillar15

      October 25, 2013 at 7:44 am

  9. Shazron star moderator! THANK YOU for prompt reply. Had checked the ‘stackedoverflow’ forums as well with no answer.

    Phonegap docs do not mention that clearly. Am sure this is going to help others coming behind me with 3.1 implementation.

    Vanilla project now sitting at 983KB. World of difference.
    Thanks – merci – gracias – choukran.

    walid taraf

    October 18, 2013 at 6:48 pm

    • No worries! I’ll add an issue to the issue tracker for this.

      shazron

      October 18, 2013 at 6:49 pm

  10. If I have StatusBarOverlaysWebView to false it stretches my app height. I have a navbar with fixed positioning to bottom:0 and the navbar gets pushed off the screen when I have StatusBarOverlaysWebView set to false, but if I have it set to true the height of the app is fine and my navbar displays correctly.

    Thomas

    October 19, 2013 at 6:33 pm

    • Yeah this is a known issue. The webview is already the correct dimensions (filling in the rest of the area that is not the statusbar) – the meta tag viewport attribute value “height=device-height” is causing this. The only remedy is to remove that value.

      shazron

      October 19, 2013 at 7:38 pm

      • My viewport meta tag doesn’t have the height value in it at all, but I tried removing the meta tag all together and still get the same problem. Will there be an update addressing this soon?

        Thomas

        October 21, 2013 at 4:40 pm

      • I am seeing this behavior as well with no viewport meta tag at all. I resolved it (temporarily) by changing the else condition in CDVStatusBar.m’s setStatusBarOverlaysWebview method to re-initialize bounds to the webView’s bounds before manipulating it:

        // re-initialize bounds to the webView’s bounds
        bounds = self.webView.bounds;

        CGRect statusBarFrame = [UIApplication sharedApplication].statusBarFrame;
        bounds.origin.y = statusBarFrame.size.height;
        bounds.size.height -= statusBarFrame.size.height;

        self.webView.frame = bounds;
        [self.webView.superview addSubview:_statusBarBackgroundView];

        I don’t know if that’s “the issue” but it fixes it. It might be cleaner so extend the plugin with your own, otherwise when you update the plugin on it’s next release your change will get overridden. However if the issue is fixed then, it doesn’t matter if the change is overridden.

        Jamal

        October 30, 2013 at 8:24 pm

      • Thanks, I’ll take a look at this for the next update.

        shazron

        November 4, 2013 at 7:54 pm

      • This is quite a problem as the KeyboardToolbarRemover Plugin requires this meta tag value. hhttps://github.com/don/KeyboardToolbarRemover#troubleshooting

        David Pfahler

        October 31, 2013 at 11:12 am

  11. Hi Shazron,

    I’m trying to hide the statusbar once the inappbrowser loads a page but it’s not working even when the StatusBar.isVisible returns true.

    Also, when I catch the exit event, instead of showing the statusbar is hiding it.

    This is the code I’m working on it, it’s kinda weird.

    ref.addEventListener(‘loadstart’, function(event) {
    if(StatusBar.isVisible){
    StatusBar.hide();
    };
    });
    ref.addEventListener(‘exit’, function(event) {
    if(!StatusBar.isVisible){
    StatusBar.show();
    };
    });

    Thanks in advance for your time!

    Baldemar Roldan

    October 23, 2013 at 7:34 pm

    • I wouldn’t recommend using the statusbar plugin with the InAppBrowser – the InAppBrowser plugin (the dev branch I linked to) handles the statusbar automatically.

      shazron

      October 23, 2013 at 9:00 pm

      • I have noticed that too, but with ios7 the statusbar overlays the content of the inappbrowser, that’s why I was looking to hide and show the statusbar.

        Is there any plans to give the inappbrowser plugin some customization options like position (up, down) and the toolbar background color?

        Once again, thanks for your time and support!

        Baldemar (@baldemarch)

        October 23, 2013 at 9:24 pm

      • No it doesn’t overlay the content – that’s precisely what I’m saying, the dev branch version *fixes* this for InAppBrowser.

        shazron

        October 23, 2013 at 9:32 pm

      • I installed the dev version of InAppBrowser plugin and the problem is fixed partially because when you make scroll in the web loaded the status bar overlays the content.

        I installed with this: phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git#dev

        Fernando

        October 23, 2013 at 10:07 pm

    • I agree with Fernando, scrolling in InAppBrowser still causes the statusbar to be overlayed. Shazron, please fix this!

      Steve Tsokev

      December 13, 2013 at 3:31 pm

  12. Hi everyone! Do you know where is the documentation or the repo of org.apache.cordova.keyboard in github? Thanks!

    Fernando

    October 29, 2013 at 12:49 pm

  13. How do you install the plugin. Thanks

    ahaniff

    October 31, 2013 at 1:15 pm

    • Are you using the Cordova CLI? See the docs for the CLI at http://docs.cordova.io
      Generally it is “cordova plugin add [plugin id]“. If not, download http://npmjs.org/plugman using npm/nodejs and look at the help.

      shazron

      November 4, 2013 at 7:53 pm

      • I used the cordova download and installed it using Terminal and created the project folder. I followed the instruction to do the way phonegap-tips.com/articles/the-nodejs-command-line-interface-for-phonegap.html
        but have issue when I create command it says command not found.

        ahaniff

        November 6, 2013 at 1:18 pm

      • Try using: phonegap local plugin add [plugin id]

        dansketchpad

        November 6, 2013 at 1:29 pm

      • created through a Cordova platform’s bin/create script instead of through the cordova tool. So I can install then?

        ahaniff

        November 6, 2013 at 1:41 pm

  14. How do you install the status bar plugin in Cordava,

    ahaniff

    November 4, 2013 at 1:47 pm

  15. I’m having an issue with the keyboard plugin with the following setting.
    I submitted a ticket here: https://issues.apache.org/jira/browse/CB-5396
    Could you possibly take a look? This is preventing me from upgrading to 3.2

    window.Keyboard.shrinkView(true);
    window.Keyboard.hideFormAccessoryBar(true);
    window.Keyboard.disableScrollingInShrinkView(true);

    twilly86m Wilson

    November 14, 2013 at 11:35 pm

  16. i have built an app using phonegap. This app functions well in Android, and also in iOS, but only up to iOS 7. I don’t know why, but when i try to upload an image via Phonegap FileTransfer method, the image is not uploaded.

    Have you already faced this issue? How can I fix it? I think that probably it’s a phonegap bug, that has not yet been detected.

    Can You help me please?

    Thank you in advance!

    Helmut

    November 20, 2013 at 12:14 pm

  17. I installed the statusbarplugin and in config.xml file i saw the following code

    and changed ” ” by doing so my footer disappears and I upgraded to cordova 3.2

    ahaniff

    November 21, 2013 at 3:53 pm

    • I installed the statusbarplugin and in config.xml file i saw the following code

      and changed ” ” to true

      ahaniff

      November 21, 2013 at 3:54 pm

  18. ok I am try to type this again after installing the plug in I saw config file the StatusBarOverlaysWebView to be true and changed it false so the footer disappear from the app. Please let me what I did wrong.

    ahaniff

    November 21, 2013 at 3:57 pm

    • I had that issue as well and there seems to be a bug setting the height larger than the screen with the Status Bar set to false in the config.xml. I got around this by calling ‘StatusBar.overlaysWebView(false);’ in my ‘onDeviceReady()’ and leaving StatusBarOverlaysWebView ‘true’ in the config.

      Alex

      November 21, 2013 at 4:03 pm

      • Yea I created a .js file and called the ‘StatusBar.overlaysWebView(false); and still doesn’t seems work
        document.addEventListener(‘deviceready’, function() {
        StatusBar.overlaysWebView(false);
        StatusBar.backgroundColorByName(‘green’);
        }, false);

        ahaniff

        November 21, 2013 at 4:45 pm

      • If I’m understanding the issue, see comment above from me: Jamal October 30, 2013

        Jamal

        November 21, 2013 at 4:49 pm

  19. Jamal there is no reply from you on october 31 above?

    ahaniff

    November 21, 2013 at 7:12 pm

  20. I see you reply, let me see if that works

    ahaniff

    November 21, 2013 at 7:13 pm

  21. Jamal thank you worked beautifully. I have an issue with the fixed Header is not Fixed (can go downward)in IOS Jquery mobile and phonegap. Have any idea. I used doesn’t seem to help.

    Thanks

    ahaniff

    November 22, 2013 at 3:11 pm

  22. Thanks for this plugin! One issue — when the app first launches, probably before the plugin is loaded, the status bar is briefly hidden. During that second or two, since I have a splash screen, I can see the portion of the image that’s normally covered. This is happening even though UIStatusBarHidden is set to false. Any idea how to prevent it?

    Also, it might be nice if a future version of this plugin generated a JavaScript event when you tapped on the center of the status bar. That way our apps could could respond to it by scrolling to the top.

    JW

    November 25, 2013 at 3:31 pm

    • Not sure – haven’t noticed that yet. Do you notice it without the plugin installed? (on a plain vanilla new project).
      That’s a good idea – do you mind filing an issue at http://issues.cordova.io? Thanks!

      shazron

      November 25, 2013 at 8:05 pm

  23. I have an issue with the fixed Header is not Fixed (can go downward)in IOS Jquery mobile and phonegap. Have any idea. I used doesn’t seem to help.

    Thanks

    ahaniff

    November 26, 2013 at 2:02 pm

  24. Hi there !!

    I’m a new cordova user (since v2.7.0) and have a question about ios7 theme compatibilty.
    How to use/make it in place ? any package to install ?

    I Have to create a window based ios app with links and other stuffs

    Thx

    Joey

    December 1, 2013 at 2:55 am

  25. have an issue with the fixed Header is not Fixed (can go downward)in IOS Jquery mobile and phonegap. Have any idea. I used doesn’t seem to help.

    Thanks

    ahaniff

    December 2, 2013 at 2:00 pm

  26. Just tried Keyboard plugin with Cordova 3.2.0 on an iOS app, every time I tap on an input field then keyboard shows up and push view up with a same height of accessory bar. When tapping outside to hide keyboard then view is moved down, there was a flicker too. Things worked well with Cordova 3.1 (no keyboard plugin), but broken now :(

    I used below keyboard settings (equivalent keys in config.xml were removed):

    Keyboard.shrinkView(true);
    Keyboard.hideFormAccessoryBar(true);
    Keyboard.disableScrollingInShrinkView(true);

    Tien Do

    December 11, 2013 at 5:35 pm

  27. hi,

    all the methods of status bar plugin are working except StatusBarOverlaysWebView & StatusBarBackgroundColor in inappbrowser.

    I do not want the overlay but just cant get it right. Wondering other methods of status bar is working but not the above mentioned 2 methods.

    Any particular thing that i am missing here?

    i am able to use these methods in native pages on the app but as soon i as open the inappbrowser these 2 methods do not work.

    Shazron, pl help me on this

    MJ

    July 20, 2014 at 5:28 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 1,540 other followers

%d bloggers like this: