I am trying to build a react native app for production on iOS device.
In this project I am loading a local html page. Currently I am using the WebView component.
<WebView source={{require('./webapp/index.html')}}/>
And below is webapp/index.html.
<!DOCTYPE html>
<html>
<head>
<title>Foo</title>
</head>
<body>
<h1>Hello World</h1>
<script src="js/script.js" type="text/javascript">
</script>
</body>
</html>
I am building for production by following the steps listed here: https://facebook.github.io/react-native/docs/running-on-device-ios.html#building-your-app-for-production (v0.34)
How can I make sure that index.html is able to load js/script.js?
Most likely we need own server.I was looking for this also and I haven't found any relevant answer to this question too.
I have react-native-webview-bridge hereit seems that now is right inside react-native core but i doubt we can use allowFileAccessFromFileURLs... i will update this answer if i find out something else
I personally use a tool like inliner to insert all the file contents (you might need the dot in your path strings) in my html automatically and then use the html string in my app.
I import my html string in a way that works well for ios and android by implementing this with the current versions of the libraries mentioned.
Related
To easily update my app, I copy the content of the www folder to the phone and then do a window.location = workingDirectory.toURL() + "/index.html".
EDIT - note that this works until Phonegap 3.4, but not on 3.5 (nothing seems to be happening when I try to change the location). If instead of toURL I use toNativeURL, then it works also on 3.5. Using toNativeURL also fixes the current issue on iOS.
Copying all the files and opening the index works fine on both iOS and Android. The problem on iOS though is that there is absolutely no styling to the page, as if the links to the CSS files weren't working. Everything is working fine on Android.
My links are relative (eg <link href="css/reseter.css" rel="stylesheet">). Links to other pages or to scripts do work.
Here is the simplified main page I open:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="style.css" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<div class="red">I should be red but I'm not!</div>
This correctly takes me to the other page.
</body>
</html>
style.css
.red { color: red; }
main.js
alert("HELLO is correctly displayed");
I correctly get the alert (its title is cdvfile://localhost/) and I can also correctly go to page2.html. The only problem is with the styles.
If I open the page in Safari pointing to my computer, the style is correctly displayed.
I tried a few things, to no avail:
Add <base href="cdvfile://localhost/persistent/MyApp/"> in the <head>
Update all my href and src to have the full cdvfile path (eg use <link href="cdvfile://localhost/persistent/MyApp/css/reseter.css" rel="stylesheet">)
I finally got it working in PhoneGap 2.9 by using fileSystem.root.fullPath. On PhoneGap 3.3 it only return /. Is this a bug on PhoneGap 3.3 that when using cdvfile, everything seems to work except the CSS files?
I decided to temporally use a relative path to my app for iOS on PhoneGap 3.3: ../../Documents/MyApp/index.html. I don't know if it's safe to use or not.
EDIT In Phonegap 3.5 (I haven't tested in 3.3), using work window.location = workingDirectory.toNativeURL() + "/index.html"; (ie using toNativeURL instead of toURL) works.
Check the following link (the plugin was changed):
http://cordova.apache.org/news/2014/02/10/plugins-release.html
It looks like you are running into CB-6532. I just put in a pull request for a fix -- you can temporarily use my fork until it is accepted:
https://github.com/loufranco/cordova-plugin-file
To use it, do
cordova plugin remove org.apache.cordova.file
cordova plugin add https://github.com/loufranco/cordova-plugin-file.git
Remember to reverse it if the pull request is accepted.
I am using an Cordova 2.4 component Cleaver and an embedded view in my native iOS 6 application. So far I have managed to create the project structure, link the Cordova libraries and set up the Hello World app that does work providing "Device Ready" feedback.
This is all great but it loads all html from the www repository distributed inside the app itself (including all js libraries).
What I really want yo do is this:
1 - popup the cleaver component (which is nothing else than an embedded uiwebview) in my app. Easy - done.
2 - load some html content from a URL pointing to a servlet on my remote server. I have several servlets and need to be able to load each one of them separately of course.
3- have the content generated in step 2 interact with my native app via the cordova javascript libs cordova-2.4.0.js - (how do I load these if they are local to device but html was loaded from remote location).
How can I set this up ?
P.S.
I am more of Obj-C than Javascript developer :)
Here is the answer. What a joy...
excellent article on dynamic page loading in PhoneGap and Cordova
Precisely what I needed. The second part of the project was to enable native code to force the loading of external web services - I accomplished this by called stringByEvaluatingJavaScriptFromString on the Cleaver web view .
[webview stringByEvaluatingJavaScriptFromString:#"app.loadExternal('www.usatoday.com')]; is the code that works like a charm:)
Viola - I have a Cleaver view capable of loading external html content with complete two-way communication between the javascript app and the native container.
Inside your index.html file do something like this (for the point 2)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript">
function onBodyLoad(){
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady(){
window.location.href = <your_remote_url>
}
}
</script>
For the point 3, your remote content should import cordova.js and the interaction (native / web) will work as if it was local content.
Has anyone used the FullCalendar-mobile plugin? I am trying to use this in a jQuery Mobile app bundled with Phonegap. There are tons of js and css files in the src folder but I can't seem to figure out which one to use. Linking all of them to my html page didn't yield any results.
Pardon the very noob question. Kinda new to jQuery, HTML5 & CSS. Would greatly appreciate the help.
Thanks!
I'm just going through this myself. My understanding is that you'll need to do the following:
Download the files from
https://github.com/JordanReiter/fullcalendar-mobile using either git
or the 'download as zip' button.
Navigate to your downloaded directory
Type make zip, as per the instruction from the link above. (You'll need java installed apparently)
In the dist directory created by the above process you should see the fullcalendar directory containing the js and css files you need.
Copy those to your project and link appropriately. You are now officially good to go
I have the same problem with the css files. Until now I'm not able to combine the style sheets delivered with jquery and jquery mobile for the desired result:
http://thomkerle.blogspot.ch/2012/07/problems-with-jquerys-fullcalendar-and.html
Note:
for basic usage you can just take the latest fullcalendar version! There will be some events that are not supported (but basically you can press on a event and navigate through the calendar).
See also:
http://forum.primefaces.org/viewtopic.php?f=8&t=23763
Looks like you want to use the _loader.js file
just keep the structure of the directories that exists
I am working on this right now ill post updates as a reference. The documentation states:
<link rel='stylesheet' type='text/css' href='fullcalendar.css' />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='fullcalendar.min.js'></script>
<script type='text/javascript' src='ui.core.js'></script>
<script type='text/javascript' src='ui.draggable.js'></script>
<script type='text/javascript' src='ui.resizable.js'></script>
None of these files are on github the last 3 are clearly from jquery UI
I have a JQuery mobile app. I now want to deploy it natively to Android and iOS. To assist with this, I thought I would use PhoneGap. When I run my app, none of the styling information appears. There are no errors in the console window. I'm not sure what I'm doing wrong.
Are there any guides on going from JQuery mobile to phone gap? Everything I see starts with Phone Gap and builds from there. Am I doing this in reverse?
Thank you for any insistence. I really want to get this app onto Android and iOS. I feel like I'm so close. But I have no idea what I'm doing wrong.
Thank you,
This is just a guess, but you have something like this in your code?
<link rel="stylesheet" href="//code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
If so that's wrong and you need to store your css locally in the assets folder if you want it to run locally within your WebView.
Otherwise, I'd suggest that you first run an 'hello world' on phone gap, and style just one element through an external local stylesheet (without worry about javascript for now). That's essentially the most difficult part, knowing where to put the file and how to reference it, so you do not want to confuse yourself with the extraneous code of your current project when you're learning that part.
Once you've figured that part out, it will be trivial for you to do the same with the jQuery Mobile library, both the css one and the js one.
Have you include properly?
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
put the .js file and .css file in the jquery.mobile folder.
But if you are using eclipse then you can create phonegap app directly.
I hope it would be helpful for you.
Is it possible to use a jQuery UI widget with a google apps script application?
I have a textbox and I would like to use a date picker on it.
Yes you can use JQueryUI with Google Apps Script. I suggest you look at example code, there's nothing special you need to do to make them work. Just make sure to develop your application using HtmlService and not UiService, you can't mix and match. Here's an example I lifted straight from them:
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('test.html');
}
test.html
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>
<body>
<div>Choose date:<input type="text" name="date" id="datepicker" /></div>
<script>
$("#datepicker").datepicker();
</script>
</body>
</html>
Google Apps Script has built in DateBox and DatePicker classes in the UiApp Service. They are not yet in the documentation but if you type the reference to a UI instance into the Script Editor and add the trailing period, there are create methods for both. Google says they are working on adding the documentation. See here
You must watch the new services of google apps script:
Google I/O 2012 - Use What You Know: HTML and JavaScript in Apps Script
No, in Google Apps Script you're limited to use the provided APIs. Specially when talking about Ui.