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.
Related
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.
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
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 have a string which consumes the html code of a form and I want to show that form in my app and it should also work further as on submit it should move forward to next page.
I used WebView, it just shows the page in a static way. It don't support buttons and DatePicker, so I DONT WANT WEBVIEW.
First off, WebView does support buttons, and you could support a DatePicker either by using an HTML/JS one or by doing something fancy to route a request to the Java side of things. I really suspect your insistence on not using WebView is going to prove unproductive.
That said, sure you should show your HTML in your app without using WebView... you could write your own web control or take another (Firefox is open source as is WebKit on which WebView is based, in fact so is WebView itself for that matter). That's going to be a heck of a lot of work though.
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