Integrating HTML5 into native iPad application - javascript

I am trying to integrate a webpage into an iPad application. Something like the Final Hour app where the app is a native app using slideshows. some of the slideshow pages have a small part that is loaded from a website.
The only way I would have known this was when I didn't have internet access the small area where the website loads into said there was no internet connection.
How can I implement something like this? I understand the website aspect but I don't understand what iOS API they use to setup some sort of canvas or frame to hold the website.
Here is an image of the app. The webpage would be loaded into the "blue" box outline.

You are indeed looking for a UIWebView. You need to build the controls yourself if you want your users to navigate in the website. If you just want to show one page, with no Back or Reload button, then you can use it as is.
Note that you should try to make it clear to your users that your app might not work properly if no Internet connection is available.

Related

How to run a WebView in the background on Android?

I need to keep a WebView open in the background of my Android app so that I can move between pages and execute javascript. I need to be able to change activities without affecting the WebView. Occasionally I will bring it to the front but otherwise I need to maintain the same session without ever showing it. What's the best way to do this?
I'd suggest using an activity that have your web view and show your screens as fragments

How to create a web page with CSS and JS so it acts like UITabBar (framework?)

So we've decided to create a down and dirty Android version to a working iOS app.
Since we don't code in Java and resources are limited, we thought of creating a responsive web version of the app, that emulates the app's environment more or less, but keeps most of the functionality.
I should note that we haven't programmed responsive web pages before. we know there are media queries and functionalities for many different devices, though.
The idea was to create an Android app that uses a webView which is hardcoded to be a responsive web page. To the user we hope the result should be app-like.
We need the screen to look like this:
so that when the user presses A - the A screen would show, and when B is pressed, B is shown.
A shows a scrollable list of items
B shows a some buttons, pressing these buttons would change a value that is sent via a web reuest.
We need something to help us come up with buttons, presses, screen resizing, events fired...
Is there any framework that we can use to accomplish a task like this?
I was thinking of using jQuery, changing the visibility of the <div>s for the main screen. Of course it would take a graphic designer to make these buttons, and writing it all.
But is there any framework that is made for this? (We need the code!).
there will also be requests that are sent to the server and responses will be in JSON, so display A can be populated accordingly.
We need an answer that would target us to a solution that fulfills this functionality so we can go ahead and code the rest of the project.
Thanks!
Have a look at Ionic, it's a framework that would be ideal for this purpose. http://ionicframework.com/
Once installed, you can use their cli tool to generate an app with an empty tabbed based application like so: ionic start {appName} tabs.
After you've completed your app you can run ionic build android to build the app.

Android WebView Javascript Issue

I'm quite new of Android and during the development of one app, I have encountered the following issue:
I'm using a WebView inside my app for viewing web sites (it does not matter what kind of site, can be Google or Reddit or anything else). I know I can use a "browser Intent" with Intent.ACTION_VIEW but for the purpose of my App I must use a WebView.
So, I have enabled javascript and DOM api storage with:
getSettings().setJavaScriptEnabled(true);
getSettings().setDomStorageEnabled(true);
My problem comes after that the page has finished loading and some Javascript automatically starts. Basically if the user has already scroll down and the Javascript tells the page to hide/show some content (example a DIV) the scroll resets to top.
My question is:
how can I avoid this behavior? I want that the Javascript loads correctly but it does not interfere with the user's navigation. Is that possible?
Thanks in advance,
Best A.

How to keep an HTML page active

We have the following problem:
We're developing a browser-based flash application for video calls. The problem with that application is that when you are talking with somebody the display of your PC/Mac starts to fade out and a couple of minutes later the screensaver appears (if such is present).
How to keep the page active, so that the PC/Mac does not enter in screensaver mode?
This should be done, using JavaScript only, because the flash-part of the application is a JavaScript based API and we do NOT have access to the flash directly.
Any ideas?
EDIT: can I put a small and invisible flash APP on that page that keeps the machine from sleeping?
You can use NoSleep.js
https://github.com/richtr/NoSleep.js
Prevent display sleep and enable wake lock in all Android and iOS web browsers.

How to display external HTML with scroll and zoom (pinch) capabilities?

I have been struggling with this issue for days now. I am implementing an application for Android and iOS using Sencha Touch. I want to be able to click on a link (a list item) which can point to a html or an image or maybe even PDF documents (for iOS). This file can be either local or on another domain.
I have found two different approaches so far, but haven't got any of them to work perfect. One approach is to change "window.location" and go to a html page containing a frame with a back button and another frame with the file I want to display. Scrolling and zooming works fine but when the user wants to go back the whole application has to be reloaded (all javascript files and so on..).
The other approach is to fetch the desired file using an ajax request and add the response text inside a panel. The problem with this is that the zooming is not working. I tried to listen for a pinch event and then scale the panel but then the scrolling stops working...
So the question is: How do i display external content such as HTML pages and pictures but still preserve the scroll and zoom capabilites and allow the user to go back without having to reload the whole application again?
I am grateful for all information i can get! /Christian
Add the following to your apps onCreate() method:
WebSettings settings = this.appView.getSettings();
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
It won't work if your ROM does not support mulit-touch but since it is already working in your browser this should do it.
If you are using PhoneGap, you can try to the ChildBrowser plug-in: https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/ChildBrowser
For a pure mobile web app, use the HTML5 cache manifest to avoid reloading when you move between frames and pages: http://diveintohtml5.ep.io/offline.html

Categories

Resources