How can I embed a PDF viewer for a phonegap application? I have decided to use PhoneGap + Sencha Touch to develop an application for iOS and Android.
I only have iOS phonegap experience. The solution that has worked for me is to make a plugin that pops up a native webview that uses iOS native pdf viewer. The way to get this to work is to follow the instructions on this website.
http://spin.atomicobject.com/2010/12/07/updating-phonegap-s-childbrowser-plugin-to-handle-local-files/
This link modifies an existing plugin, "Child browser" to use the native webview display pdf's. The original chilbrowser plugin can be found here.
To give you more of an idea of what it will be like, here is my particular javascript call that I put into my sencha application.
PhoneGap.exec("ChildBrowserCommand.showFilePage", GlobalVar.localRoot + "/" + record.get("FilePath"));
This is inside the handler for the buttonTap inside the sencha, pressing the button will then call the objective C method "showFilePage". The parameter is the filepath that the plugin will use.
Here is the Objective C part (again, you should follow the links for full instructions)
- (void) showFilePage:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options // args: url
{
NSLog(#"showFilePage entered: ");
if(childBrowser == NULL)
{
childBrowser = [[ ChildBrowserViewController alloc ] initWithScale:FALSE ];
childBrowser.delegate = self;
}
PhoneGapViewController* cont = (PhoneGapViewController*)[ super appViewController ];
childBrowser.supportedOrientations = cont.supportedOrientations;
[ cont presentModalViewController:childBrowser animated:YES ];
NSString *path = (NSString*) [arguments objectAtIndex:0];
NSLog(#"Our argument 0 is: %#",[arguments objectAtIndex:0]);
NSLog(#"The url is: %#",path);
[childBrowser loadFileURL:path];
}
There's not much documentation for mixing PhoneGap and ObjC, but here is some example code that lets you embed PhoneGap with an ObjectiveC-Application. For the PDF viewer, you can either use basic ones like Apple's QuickLook or UIWebView, or more advanced ones like PSPDFKit.
For Android, you could simply search for an Intent that is capable of displaying pdf (like Adobe's official Reader for Android) or integrate a full PDF viewer yourself. There's an open source project for that, but it looks not quite complete. Or check out apv, or droidreader, which is GPLv3.
Hi just use HTML5 object tag, you can add,swf, pdf etc..
Related
I am loading an html page from a web server into a Xamarin Forms WebView. This html page contains links to a PDF file.
In iOS, when the user clicks the link, the PDF file is downloaded and opened.
In Android, when the user clicks the link, nothing happens. Note that several PDF-Viewers are installed on the Android device.
Is there any configuration necessary for make this work in Android:
Here is the code:
if (dict.ContainsKey("url")){
string url = dict["url"];
if (Uri.IsWellFormedUriString(url, UriKind.Absolute)){
NotifWebView.Source = url;
} else {
var htmlSource = new HtmlWebViewSource();
htmlSource.Html = #"<html><body><h1>Fehler!</h1><p>Ungültige oder keine URL oder ungültiges HTML.</p></body></html>";
NotifWebView.Source = htmlSource;
}
}
Thanks for your help!
You can use
https://github.com/xamarin/recipes/tree/master/Recipes/xamarin-forms/Controls/display-pdf
The WebView control can display PDF files on the iOS platform, but not on the Android and Windows Phone platforms due to lack of platform support.You need to create a custom renderer to acheve it in android platform.The process for doing this is as follows:
Create a Xamarin.Forms custom control
Consume the custom control from Xamarin.Forms.
Create the custom renderer for the control on each platform.
If you're willing to spend some money, it looks like Syncfusion has a solution for viewing and editing PDF files.
http://www.syncfusion.com/products/xamarin
I am trying to display image,docs from base64-string for Android and IOS. I am using inapp browser plugin to display image and doc files in app.
For IOS i am able to display images using below code.But facing issue with Android and Blackberry.
window.open(urlData, "_blank", "location=no,enableviewportscale=yes");
I am passing urlData parameter as base-64 string. Android and Blackberry nothing is displaying. After searching i found this post.
Alternative: just store that whole data string in your database. Then when you render your tag you can simply dump it into the src
attribute:>" />
After inserting above code i am able to display image but how to close the image ? How to open image in popup ? So user can close the image.
Thanks
First, window.open probably isn't working because all URLs have to be granted access specifically, for security. You can try to bypass it with this in your config.xml -- I don't know if it will work for data: URLs.
<access origin="*" subdomains="true"/>
<preference name="WebSecurity" value="disable"/>
If this doesn't work, how to show an image in a pop-up comes down to the design of your app. If you're using something like Ionic Framework, Bootstrap, jQueryUI, or Ratchet, they each have components for Modals or Dialogs you could potentially use. If you're not using a UI framework, you'll have to design your own pop-up div to contain the image tag, that is hidden again when you tap or dismiss it. Finding information on Google about how to do this is not very hard.
Good luck!
I am able to solve this issue in BlackBerry using below steps.
1)Remove webWorks.js from index.html
2)Replace below script inside index.html
<script src="worklight/cordova.js"></script> to <script src="../../cordova.js"></script>
3) Add below code inside js file. Need to pass urlData as Base64 string and filename.
requestFileSystem(LocalFileSystem.PERSISTENT, 7 * 1024 * 1024, function (fs) {
var ft = new FileTransfer(),
localPath = fs.root.toURL() + fileName;
ft.download(urlData, localPath, function (entry) {
entry.file(function (file) { console.log(file.size); });
window.open(localPath, "_blank", "location=yes,closebuttoncaption=Close,enableViewportScale=yes");
}, function (e) { console.log('download error'); console.log(e); });
});
I'm developing a EBookreading application, EBookDroid is a library which we are using for the PDF reading. If we have any links in the PDF like www.stackoverflow.com, when the user clicks on it, it supposed to open the link, for that i need to find out the coordinates of that link in the Document.
I am writing like the below.
final RectF linkRect = page.getLinkSourceRect(pageBounds, link);
But it's always giving the null back.
Try this may be use full
THIS EXAMPLE
I want to integrate fusionchart in android native application (not phonegap).I have write code for it as below
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
WebView webview =(WebView) findViewById(R.id.web);
String summary =
"<html>"+
"<head> "+
" <title>My First chart using FusionCharts XT - Using JavaScript</title> "+
"<script type=\"text/javascript\" src=\"FusionCharts/FusionCharts.js\"></script>"+
"</head> "+
"<body>"+
" <div id=\"chartContainer\">FusionCharts XT will load here!</div>"+
"<script type=\"text/javascript\">"+
" var myChart = new FusionCharts( \"FusionCharts/Column3D.swf\",\"myChartId\", \"400\",\"300\", \"0\", \"1\" );"+
"myChart.setXMLUrl(\"Data.xml\");"+
"myChart.render(\"chartContainer\");"+
"</script>"+
"</body>"+
"</html>";
webview.loadDataWithBaseURL(null, summary, "text/html", "utf8", null);
}
please anybody tell me what is problem. I dont know how to give exact FusionCharts/FusionCharts.js path and no idea about Column3D.swf file.
Where can i get those files.
even this html code not working in my pc browser.
and I want to make bar chart in android application using only fusionchart !!!
You would need to download the FusionCharts XT Download Package in order to receive the necessary JavaScript and SWF files, provided in the "Charts" folder of the Download Package, that would let you render FusionCharts. You may download the evaluation package from here.
Also, please check here for the detailed process to create your first chart on the browser.
FusionCharts is expected to work perfectly on the native Android apps, provided all the other criteria mentioned here to render the JavaScript charts (Android 3.0 and above) and Flash charts are fulfilled.
FusionCharts does not have any native API to render the charts in Android apps. Hence, you would need to use some 3rd party mobile development framework like, PhoneGap, UIWebView, etc. and the API controls they provide, to achieve the same.
There is no sample for rendering FusionCharts in native Android apps, however, there is a similar implementation for iOS apps using UIWebView Control, which can be referred to with the help of this Blog post.
[NOTE: This is purely as a reference and is not directly an Android implementation.]
You can procure the SWF and JS files from FusionCharts XT pack. Trial download is available from http://www.fusioncharts.com/downloads. You will get these files from Download Pack > Charts folder.
Generally, you need to put these files in the /assets folder. These files get packed with the apk. You can access the files using the path - /assets/....
Reference: Load file from resource
Please remember that in case you are targeting Android v3+, you do not need to render Flash charts. Thus, you do not need to copy these SWF files. FusionCharts offers JavaScript (no Flash) charts, and your implementation gets simpler as detailed in the steps below:
Copy FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js and jquery.min.js to required folder.
However, include only FusionCharts.js in your HTML code. The other JavaScript files will be loaded automatically.
Instead of passing the name of the SWF file, pass the JavaScript alias of the chart. Required modification in your code:
var myChart = new FusionCharts( \"Column3D\",\"myChartId\...
Column3D is the alias of the chart you are trying to render. No need to prefix it with a path.
DO NOT load XML using setXMLUrl. FusionCharts uses ajax to load the XML data. Local Ajax is not supported (due to the security restrictions) in most of the browsers and it may fail. Instead, load the XML using Android's resource loading mechanism (Load file from resource) and pass the data as String to the chart using setXMLData method.
myChart.setXMLData(XMLLoadedAsString);
MORE: A more synced way is to implement this is to wrap the chart rendering JavaScript code inside FusionCharts's ready Event Listener as shown below:
<script type=\"text/javascript\">"+
" FusionCharts.addEventListener(\"ready\", function () { \n"+
" var myChart = new FusionCharts( \"FusionCharts/Column3D.swf\",\"myChartId\", \"400\",\"300\", \"0\", \"1\" );"+
" myChart.setXMLUrl(\"Data.xml\");"+
" myChart.render(\"chartContainer\");"+
"\n});"+
"</script>"
I'm having what seems to be a pretty small issue in the Phonegap 1.3.0 application I am working on. It is for Android devices.
The problem is stemming from the ads I am trying to incorporate into my app. I am trying t use Leadbolt's no-SDK offer wall as well as their banner ads.
I am loading the offer wall within an iframe in my app, inside of a hidden DIV, and then displaying it when required - this part is working great.
The problem comes when I click on one of the links on the offer wall: instead of launching the clicked URL in a new External/Native browser, the link is being opened within the iframe. The same thing happens when someone clicks the banners, though these are integrated by inserting a in the location you want the ad to show rather than via an iframe. (Maybe the script injects an iframe, dunno, the end behavior is the same)
What I'm trying to do now is to implement a method in Java to catch any clicks, and open a new browser if the link is not relative/local - i.e. if it is prefixed by "http", "https", or "market" protocols
And here lies the real issue - the only experience I have with Java has been messing with Phoengap a bit :(
I have been reading and testing things all day, but finally I must resort to asking those of you who are more knowledgeable than I am in regards to Java programming.
Here is what I have been attempting so far:
package com.phonegap.my_great_app;
import android.os.Bundle;
import android.webkit.WebView;
import com.phonegap.*;
public class MyGreatApp extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
/* Intercept clicked links, and open external URLs in external browser */
public boolean shouldOverrideUrlLoading(DroidGap super, String url) {
if (url != null && url.startsWith("market://") || url.startsWith("http://") || url.startsWith("https://")) {
/* Open new WebView or external browser with URL */
/* Do it here */
Uri uri = Uri.parse(url);
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);
} else {
/* Do nothing, it's relative URL from my app */
return false;
}
}
}
}
I am sure this code is laughably wrong, but hopefully it can illustrate what I'm trying to achieve here. Truth be told, I have no idea if shouldOverrideUrlLoading() is even the right method to be calling for this problem!
I will be very grateful for any advice or code samples you can offer! Thanks :)
EDIT: Just to be clear - I cannot alter the iframe source code so javascript or changing the link targets is not an option due to XSS issues.
You can open external links in the default browser instead of opening inside your phonegap application. This can be done in two ways easily.
One is by using Phonegap medthod like this,
navigator.app.loadUrl('http://stackoverflow.com');
/*NOTE : In some phonegap versions it does not works*/
Another way is using jquery mobile, you can do like this,
YouTube Channel
Thats all.