Resizing the Cordova WebView in iOS - javascript

I'm having problems resizing the Cordova (4.0.1) webview frame while trying to build a Native Hybrid application. I am relatively new to iOS development and really new to Cordova/PhoneGap.
I have followed all instructions on this page, http://docs.phonegap.com/develop/1-embed-webview/ios/, using the CocoaPods approach with the sample phone gap project. I have searched and tried other methods that are syntactically different, but essentially the same.
I've created a custom view controller class "GolfViewController" that extends the CDVViewController class provided by Cordova. This code for GolfViewController.swift is below:
import UIKit
class GolfViewController: CDVViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func viewWillAppear(animated: Bool) {
self.view.backgroundColor = UIColor.blueColor()
self.webView.frame = CGRectMake(self.view.bounds.origin.x,
self.view.bounds.origin.y + 50,
self.view.bounds.size.width,
self.view.bounds.size.height - 100)
super.viewWillAppear(animated);
}
}
The content in the webview should load with some space at the top and bottom of the screen. Which it actually does, for a split second, then something in the cordova javascript forces the webview to full screen. If I comment out the wkwebview cordova plugin in cordova-plugins.js, the webview renders properly with the space at the top and bottom, but then of course none of the controls work.
Any help would be greatly appreciated as all documented approaches I've tried, have failed.
************* SOLVED *************
There is a cordova plugin called "cordova-plugin-statusbar", that when initialized resizes the webview frame to take full screen. This only happens when you have
<preference name="StatusBarOverlaysWebView" value="true" />
defined in the config.xml for the webview.
It does not simply "overlay the status bar" as you might expect from the documentation. Setting this parameter to true actually completely resizes the webview to go full screen and will override any other custom sizes you may have defined before this event fires.
If you either remove the plugin (not really needed for native hybrid apps anyway) or you disable the "StatusBarOverlaysWebView" preference, then the status bar plugin will not resize your webview and the size you define in "viewWillAppear" will be respected and not overridden. This should be updated within the official phone gap documentation on embedding the web view.

Related

How to detect cordova iOS WebView navigation events

As per cordova iOS WebView Guide you can embed web views in iOS.
According to that you can do
<content src="http://apache.org" />
with the definition of
CDVViewController* viewController = [CDVViewController new];
I am wondering if there is a way to detect if that content source navigated to another site by clicking the link and if there is way how to get the new URL ?
CDVViewController is the one referenced but I can't tell by inspecting as to how one would accomplish that.
A slight parallel to that is Microsoft's x-ms-webview which at DOM level allows me to do this:-
var webView = document.getElementByTag("x-ms-webview");
webView.addEventListener("MSWebViewNavigationCompleted", function (arg) {
if (arg.uri.match(/something)) {
doSomething();
}
});
Another example in iOS but just for loading initial page.
How do detect navigations inside WebView in Cordova iOS ?
Cordova post CDVPageDidLoadNotification when the page is loaded.
You can listen for it with
[[NSNotificationCenter defaultCenter] addObserver:self selector:#selector(pageDidLoad:) name:CDVPageDidLoadNotification object:self.webView];

iOS: How to stop screen layout distortion because of Keyboard?

I want to stop the Keyboard from distorting/resizing my layout in my phonegap application. I have used the following native android code to disable and enable resize in the application using a Cordova Plugin:
this.cordova.getActivity().runOnUiThread(new Runnable() {
public void run() {
context.getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
}
});
However I have no idea how to do the same in iOS(6 & 7). Can anyone provide a snippet that I can use? Or point me in the right direction?
This functionality is available in the Cordova Keyboard plugin. You can then either add a preference to the main Cordova config.xml...
<preference name="KeyboardShrinksView" value="false" />
...or call the corresponding method on the created global Keyboard object:
window.Keyboard.shrinkView(false);

AppGyver - phonegap remove loading transition screen

Hello I'm creating a simple mobile app using Appgyver - steroids.
I'm new with this framework I'm trying to find a way to hide the loading screen between different pages in both Android and iOS. I have read their documentation but I can't make it work.
Based on this: http://docs.appgyver.com/en/edge/steroids_Steroids%20Native%20UI_steroids.layers_layers.push.md.html#steroids.layers.push
I 've set keepLoading: false on a view push which didnt work
also after the view push I called:
steroids.view.removeLoading();
as mentioned here: http://docs.appgyver.com/en/edge/steroids_Steroids%20Native%20UI_steroids.view_view.removeLoading.md.html#steroids.view.removeLoading
Nothing removed the black loading transition screen between pages.
Could someone please tell me what I'm doing wrong?
It could be documented better, but if you remove/rename the www/loading.html (for iOS) and www/loading.png (for Android) files in your project, then steroids.layers.push() will not show the loading screen (also means that the push animation will not start until after the WebView has loaded, which can take some time and lead to unresponsive feeling).

Programmatically "open in Adobe Reader" from JavaScript

The iOS safari browser has a handy option that appears whenever you open a PDF page in the browser
If you have Adobe Reader installed, a button will appear that says:
Open in "Adobe Reader"...
However, if you open up the PDF document where the HUD (address bar, etc) is hidden, like in a phone gap application, or a quick and dirty "Add to Home Screen app" using the following meta:
<meta name="apple-mobile-web-app-capable" content="yes" />
then, obviously, the button will not appear.
I want to still open the PDF document in Adobe Reader. Does anyone know a way to do this programmatically?
I want to include jsPDF in a phonegap application, and save the results, and this would be the easiest way to do that.
Thanks in advance!
With some fantastic help from Vince Parsons (and others), I've solved this problem.
Using a PhoneGap Plugin, you can create / expose a JavaScript call, which is then processed in Objective-c.
Here's the two lines you need (yes, only two lines!), and a subsequent explanation:
self.docInteractionController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:myDocumentPath]];
[self.docInteractionController presentOpenInMenuFromRect:CGRectMake(0,100,1,1) inView:UIApplication.sharedApplication.keyWindow animated:YES];
Explanation
Your input will be the file location.
In my case it's inside the app sandbox, so it looks something like:
/var/mobile/Applications/B16-HU83-GU1D-1D3NT1F13R/Documents/DocumentToExport.pdf
If you want to use an external URL, you can (with adjustments), but for my purposes it was internal.
So, with my file location as an input (let's call my input variable myDocumentPath), you just need to declare a document controller:
self.docInteractionController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:myDocumentPath]];
this creates a UIDocumentInteractionController using the interactionControllerWithURL method, which needs an NSURL variable.
We create that NSURL variable using the fileURLWithPath method, passing it our myDocumentPath.
The next line calls presentOpenInMenuFromRect Which takes a rectangle and a viewport:
[self.docInteractionController presentOpenInMenuFromRect:CGRectMake(0,0,1,1) inView:UIApplication.sharedApplication.keyWindow animated:YES];
the rectangle is created at position 0,0 with a width and height of 0,0 (GCRectMake(0,0,1,1))
and the viewport is taken from the PhoneGap application: UIApplication.sharedApplication.keyWindow
I'm reeling with joy and amazement that this only took two lines of code to fix. Granted, there's not a way to do it with JavaScript only, but it's still pretty elegant, and works great.
You can open your PDF using PhoneGap InAppBrowser(http://docs.phonegap.com/en/2.5.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser) if the PDF is opend from the server using a URL or if its from local device, you can use the PDFViewer plugin: https://github.com/phonegap/phonegap-plugins/tree/master/iOS/PDFViewer.
Bothways the native default PDF reader will be used to open the PDF.
I really searched for an ready-to-use solution and gave up at one point. There are a few old repositories on GitHub and some articles building on the two lines of the green marked answer - but nothing works satisfying for me.
That's why i forked the cordova-plugin-file-opener2 to change the iOS behavior and this works perfect for me. To allow also parallel usage of the forked plugin, i've renamed it creatively to cordova-plugin-file-opener3. It provides the same features as version 2.0.1 of the forked plugin except that on iOS the "Open In"-Dialog is shown.
The change to the plugin was trivial. Just replaced one method call and did some renaming. Don't know why it was so hard to find a working solution - but maybe that i didn't search the right way.
You can find the repository here:
https://github.com/napolitano/cordova-plugin-file-opener3
Feel free to use it.

Phonegap Android "navigator.notification.activitystart()" in tablets

In my Android application, I am using Phonegap's navigator.notification.activitystart() event to show the Activity indicator. It is working fine in Android phones and tablets, but the problem is when I touch the screen of the tablet, the loader disappears even if the loading is not finished.
How can I prevent the disappearance of loading indicator when I touch on the screen using javascript/jquery?
Not sure you could change that implementation using javascript alone. The way PhoneGap works is that it will create an object ProgressDialog in the native Android code. I think the issue is that it is setting the ProgressDialog to cancelable in its constructor. If you go into the cordova source code you could change that and it should create a fix for your specific issue.
Source code from Notification.java lines 250-255 change the second true to false
Notification.this.spinnerDialog = ProgressDialog.show(cordova.getActivity(), title, message, true, true/*change this to false*/,
new DialogInterface.OnCancelListener() {
public void onCancel(DialogInterface dialog) {
Notification.this.spinnerDialog = null;
}
});
}

Categories

Resources