I am confused about how to architecture my phonegap application.
Do I use a single-page application wherein I load relevant views using ajax ?
Or should I use many local html files and keep navigating between them using href tags ? Also, window.location seems to load the second page in a browser window, which is undesirable. I want to have whole of my app running in the same webview.
How can I stay on the same webview, while navigating between the pages using javascript ?
Try using a javascript framework like backbone or sencha touch. Jquery-mobile will work but everything will be encapsulated on one page
Related
I want to implement native page transition curl effect on a WebView after the content changed (that means, the page is not being reloaded!).
One common solution is using Animations before loading a new page, e.g. with a custom WebViewClient: https://stackoverflow.com/a/8319579/1684030
However, this only works if there's actually a new page being loaded. In my case I have a WebView displaying a javascript app which just switches the contents of a div ("single page application"). Animating those content changes with javascript leads to a laggy solution, so I wanted to try to implement it natively.
For iOS, this seems to be possible (UIPageViewController with only one content view controller - I know, Android OS and iOS are not quite comparable, I just wanted to mention it) and I was asking myself if there is some similar solution for Android as well.
You can use javaScript bridge to call your Java method which performs the curl transition effect on webView.
mWebView.addJavaScriptInterface(new JsObject, "injectedObject");
Refer: Android developers - JS Interface
There are some implemented JS bridge in Github.
I have to design a android,ios application for my website.I searched and find out that phonegap can be good one for that.Please provide me info that how to get the content of website in phonegap?On the first page i have buttons like home,contact etc.On click of home button,the home page from website should be shown.
PhoneGap is set of libraries like jQuery.
You normally write html pages and include javascript files from phonegap.
Check out phonegap example project.
Look, what you are talking about is .html,.css,.js files that you can easily get after saving any web page from your web-browser.
Rest you can use in the www folder of your phonegap project. And I
would rather suggest you to go for webview present in the native
android that is nothing but actually would provide you the same
functionality that you have been looking for.
---Edit---
Now as you have said that you want the home page buttons like about us etc. that would be copied via web browser and would be there for you as far as the html code is concerned but if you want it to look well on a small mobile device that you should create a responsive designed html and you should read some good articles about responsive web design. That would actually change your way of thinking about creating applications via html within mobile devices.
I don't quite understand the cordova plugin procedure.
I found out that it works through the Cordova Webview, but I don't know which
functions and classes are necessary.
It would be great if someone had the time to explain it, a sequencediagramm would be the best for understanding.
greetings, Kurt
This may help you to understand more:
Using WebViews
A WebView uses the same rendering and JavaScript engine as the browser, but it runs under the control of your application. The WebView can be full screen or you can mix it with other Views. The content for your WebView can come from anywhere. The WebView can download content from the web, or it can come from local files stored in your assets directory. The content can even be dynamically generated by your application code.
and
Android WebView, Javascript and CSS
I have come across some situations where I had to use a WebView to display some HTML content. Displaying HTML content is pretty straight-forward. But when it comes to controlling the web view, it gets a little complex. Things like showing alerts, manipulating divs and controlling the activity (closing/finishing). This example shows a few techniques that will get you going with Javascript and CSS with WebView.
In a WebView on the Android platform, is it possible to listen to when a div that is marked with contenteditable=true is edited?
If it is not possible, what would be my next best option?
Do you own the web page loaded in the WebView?
Javascript runs in the WebView can interact with the host Android app (see this guide), and it seems that the listening can be done in javascript (see this), so if you can modify the web page and add a callback to Android java code then it can be done.
I am building a mobile version of an existing site, and I'm looking for an explanation to a problem I'm having (as a jQuery Mobile noob).
This page has a jquery reflection effect on the first image:
http://m.fijitourism.com/accommodation/coral-coast/bedarra-beach-inn/ (it does this by applying the effect to any image with a class of 'reflect').
If you go straight to the page, the js loads and the reflection works fine on the image. However, if you've navigated to the page from here, the parent page, the reflection js doesn't work:
http://m.fijitourism.com/accommodation/coral-coast/
From what I understand, this is to do with jquery mobile's ajax loading. I've found that if I use 'data-ajax="false"' on the link from the parent page, the reflection js loads okay.
My questions are:
-Is there a better/more correct way to achieve the reflection without using data-ajax="false" on the parent page link? I understand that this isn't really what 'data-ajax="false"' is designed for. The official documentation says to use it 'if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages', which I am not.
-An explanation as to why the ajax loading prevents the reflection js would be great.
Turns out there was a page that I'd missed in the official documentation dealing with this exact issue:
http://jquerymobile.com/test/docs/pages/page-scripting.html
To execute code whenever a new page is loaded and created by the Ajax
navigation system, you must bind to the pagecreate event.
The pagecreate event is triggered on the page being initialized, right
after initialization occurs. We recommend binding to this event
instead of DOM ready() because this will work regardless of whether
the page is loaded directly or if the content is pulled into another
page as part of the Ajax navigation system.
$('#aboutPage').live('pagecreate',function(event){ alert('This page
was just enhanced by jQuery Mobile!'); });
This issue is explained here: http://view.jquerymobile.com/1.3.2/dist/demos/faq/scripts-and-styles-not-loading.html
First of all, after you make sure your script works when you refresh the page with the browser, you can fix the jquerymobile solution.
Basically scripts should be used on all pages in the navigation, and page-specific scripts should be written inside the data-role="page" element. As there was no good example on the jquerymobile site, and it was a bit tricky to actually make this work, I have an example here for making the code work both on jquerymobile ajax navigation, and a page refresh.
// this code is inside the data-role="page" element, as well as the possible script src tag
$(window).on('pageinit', function() {
// do normal $(document).ready() code here basically
});
});
I got a workaround for this issue by changing the way I load my pages.
I put target="_self" into the href element so it don't load using the # system.
I will put the below link on my index.html page that will navigate to my signup.html page.
Signup
NOTE: You will lose the 'fancy' jQuery Mobile page transition feature