I've built an app using PhoneGap and am using its InAppBrowser plugin. For the iOS platform, the InAppBrowser is implemented using an UIWebView. The "address bar" is a simple UILabel so it is basically read-only from the user's perspective.
I'd like to extend the plugin to have a simple functioning address bar. You know, let the user type in new URLs and show little inline refresh and go buttons. Basically like a regular browser such as Mobile Safari, Chrome, etc.
I know 99 programming languages but Objective-C isn't one. :( Mostly, I don't have experience working with the iOS framework.
These assume too much for me to take action on:
iOS WebView with an Address Bar
Adding a header view to a UIWebView similar to Safari and Articles
I'd like to just modify the PhoneGap plugin iOS source itself so I can keep the plugin hooks it provides to my PhoneGap app's javascript.
Here are the two relevant files:
CDVInAppBrowser.h and CDVInAppBrowser.m on Github
Hopefully this is a welcome challenge to some one already proficient in Objective-C & iOS?
Or maybe you can accelerate me in making the changes myself?
Thanks!!
So you can see what the current UIWebView (with UILabel for Address) looks like:
Related
The mobile app interface implemented via Gluon must be written in JavaFX, this is not our option, as we need to use HTML/JavaScript/CSS/Reactjs to build the interface.
So I am trying to create an webview (either UIWebView or WKWebView for iOS) in Gluon, so I can load the offline HTML asset, and then I am trying to use the method as described here (https://medium.com/#sreeharikv112/communication-from-webview-to-native-ios-android-app-6d842cefe02d) to communicate between webview and native code (Java by Gluon).
But I can't find any guide to do so in Gluon API, is that possible? How can I achieve that?
Alright after some time, I have figured out how to achieve this.
Previously I was in wrong direction, checking through all Gluon Charm-down/Attach service to look for the WebView wrapper but couldn't find.
Then I realise the WebView implementation was provided in JavaFX Port, which mean we can use JavaFX in normal way (like how we do in JavaFX desktop), so we can setup the bridge as per usual and communicate between javascript and Java.
Internally, it is using iOS UIWebView for the implementation, it is not the rework of the JavaFX WebView.
It looks like calling the googleyolo javascript object doesn't work with chrome extensions, probably because it's using an iframe with redirect under the hood, that extensions do not like.
Am I right in thinking chrome extensions are not supported? If yes, does anyone know if there is a plan to support them?
That’s correct. Currently the API expects the calling page to not run inside an extension. We may change this in the future. However you can accomplish what you want to do via a chrome tab launch to a well known page which the extension can inject content scripts into, and notify via chrome cross tab messaging after sign in.
Edit: so apparently adding class="button" make it work... Can someone provide a reference on what other classes are there? We can't find any information on this.. Thanks
We are making an app in HTML5 using XDK, it has quite a few different views. We were planning to just link to another html page each time we want to go to a different view. But we quickly found out that hyperlinking does not work, is disabled, and button does not link either.
One of the people in my group said she saw an example about having a bunch of and then just show and hide them and use that as UI navigation... is that the only way?
Thanks in advance!
The Intel XDK doesn't insert any class definitions or require that you use a specific framework. It is a tool for assembling an HTML5 hybrid mobile app using the CSS, HTML and JS files that you supply.
If you look at the samples and the default "blank" project that is created when you create a new project you'll see that there may be references to one or more of the following "phantom" JS files:
intelxdk.js
cordova.js
xhr.js
The first two (intelxdk.js and cordova.js) are special "device API" JavaScript libraries. You won't actually find them in your project directory, they are automatically included when you use the emulator and when you build your project (which "wraps up" your HTML5 code and assets into a native wrapper that is specific to the target you are building -- it does not compile anything, it just converts it into a hybrid native/HTML5 container app that can be installed on the target platform that you built for).
The third one is a special helper JS library for dealing with CORS issues from within your app.
None of these three JS files define any classes or HTML tags, etc. They simply implement target-specific device APIs that consist of JavaScript on the "top end" and native code on the "bottom end." Your application only sees and interacts with the JavaScript interface, and only with the APIs that you need to use (which is totally optional).
For an intro to all of this, please see the Intel XDK Documentation page.
So, that means you determine which frameworks and structure your app takes. In other words, if you want to use Bootstrap and jQuery you can do so. If you decide to use the App Designer or the App Starter tools, they will define some classes that impact your layout. However, you are not required to use these tools to define your HTML and CSS, you can do it by hand or use your favorite UI framework library.
Keep in mind that your code is not being rendered by a desktop browser but the embedded "webview" that is part of the device. These webviews don't have the same memory and CPU resources that you're used to working with in a desktop browser, so you need to learn to be "lean and mean" for the best results. You are using HTML5 technologies to build a mobile app -- not creating a web site on a phone.
Hope this helps, please see our HTML5 web site for more background material. It's a little slim right now, but we're adding examples and background material as time and resources permit.
Hope that helps...
I have a site which uses microsoft mvc 3 on the server side, jQuery Mobile on the client side and I want to combine it with PhoneGap and produce executes for Android and iOS.
Is it possible?
How?
Thanks
Yes, it is possible.
If you must use Phonegap, there are a couple of things to do:
First, you must create a project corresponding to each platform , following these instructions. Once you do that, you basically copy all the client side code (js, html, css) to the www folder of your project. This is one of the reasons, the app could load faster, since it's reading its resources from the local filesystem, and not receiving them from an http connection each time.
Second, you must find a way to provide your server side data to your app. If you are already using REST services or RPC methods to populate your website, then that's done, but if not, you must start by building them, and then calling them from your client (through ajax calls from jQUery most likely), and then rendering them through javascript (you can use the multiple templating libraries out there or just plain javascript, I recommend the latter only if the UI updates are minimal).
As you can see, the second part requires quite a little bit more work. Especially if you haven't built web services before.
The other option ,which does not require phonega/cordova is to use an embedded webview. Then you wouldn't have to do anything. It would work similarly to a browser (Loading the remote URL of your site), with the added advantage of being inside and android/ios app, and you could add other views or communicate with the embedded webview using native code. If you are planning to load html files from the filesystem and not from your server, you would have to do the same thing you have to do with phonegap.
It happened to me, if you have a web app depending on server code I would go with a WebView based app, and not a Cordova app.
It's really simple to create those webviews apps for Android or IPhone.
Here you have an example for building a webview based app on android
Here you have an example for building a webview based app on IOS
Hope it helps.
If you want to reuse your site you'll need a webview that browses it.
Phonegap wouldn't be needed if you use this approach, but the application will not be as responsive as a native app, and the IPhone moderators may reject your app for that reason (it happened to me).
Another approach would be that you recreate your site as a pure Javascript application and only communicate with your servers to execute some REST Services. In this case Apache Cordova makes sense.
I'm developing an application in ipad that requires a word processor functionality and since uitextview is very limited I want to use tinymce or ckeditor especially with iOS 5 being released. However when I try to load these api's index.html page in a uiwebview, the toolbar items don't show up (copy, paste, bold, ...) and the text has all the tags shown. Do I have to edit something in the index.html page or do I have to modify the javascripts or other files for it to work with uiwebview? Thank you.
I've tested the latest TinyMCE Full Feature demo on an iPad running iOS5 and Safari and found no problems.
As I understand it earlier versions didn't recognise Safari on iOS as a supported platform so it may be possible you are using one of those.