I'm developing a prototype of an Android app in HTML/CSS/JS, so that I can experiment with the UX of the app.
As a part of that I want to be able to style HTML elements as Android elements and (preferably) have them behave as if they're native Android UI elements.
Is there a JavaScript or CSS library that will do this for me? I've Googled, but nothing has come up.
I would recommend to take a look at the following Frameworks and Browserplugins. Maybe you will decide afterwards to regret using the native android toolkit at all, because it can be a big advantage to develop the application platform independent using HTML5 and Javascript techniques. Than later, if you want to port it to another platform you won't have to change a lot / almost nothing on the code base.
Phonegap
Ripple Browser Plugin (Phone Emulator)
JQuery Mobile
which is completely themeable: Jquery native android theme
The whole thing can finaly look like the following:
jpHolo
I have developed a small JavaScript game and I'd like to extend it outside webbrowser, making desktop and mobile versions available. What is the best way to do so reutilizing existing JavaScript code?
My answer is to make use of Phonegap. See the PhoneGap documentation. It supports the mobile Platforms.
I was searching for how to use swf file in android and most of the answer suggested me to use webview and an simple html file.
Now i think We can easily put css and javascript files in asset folder and then we can use them in an html5 code.
Looking at the power of HTML5, This will make app development for a web designer very easy job !
I just want to know that is it good to use this approach to build a good user interface in android ? Are there any technical pros/cons behind it ? will i miss some features provided by android ?
There are a lot of frameworks that allow you to write native android applications using HTML/CSS/JavaScript only. Here some of them :
PhoneGap
Cordova
Titanium
I've never used any of them, so I can't say if it's good or bad idea to write android apps this way, but here you can find a good session about it HTML5 versus Android.
There are pros & cons of using cross platforms. As per my point of view you shouldn't go for loading of everything in WebView.
I still recommend you native app approach because of following points :
WebView is one of the UI control in Android SDK. So, it will have
limitation of memory size and working with CPU utilization. So, you
might face performance issues in some devices.
As you know in older era we were used to work with desktop apps and after that everything is shifted to web-application.
It was
possible only because our browser(s) gets more features for e.g. more
memory area, CPU access, threading, individual Processing (like
google chrome) etc...
in-short, web browsers gets more smart and get treated as separate application. Now a days web-application can have mostly similar
performance as desktop apps. So, everything is now shifted to
web-application development.
This era will come in to Mobile development in later stage. but currently we are in middle stage of Mobile development and Cross platform development. So until and unless Web-View control of any platform (iOS / Android) gets more powerful, we can not totally relay on that.
I Hope I explain it properly :)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
First, I'm not interested in doing this professionally. I am a web developer, a coworker of mine recently left for Spotify and said he will be working mostly in JavaScript for the Spotify Desktop app. He said it uses "Chrome frame" and everything inside is done like a web app (HTML/JS/CSS).
As a web developer who never built anything for Desktop, this is great news. If I can use the technologies I already know and implement them inside some sort of a "frame" and still be able to build a windows or better yet cross platform app.
I know I didn't mention anything about the database, but even a simple hello world desktop app with web technologies would be great to get going.
So how does one go about this? Exactly what do I need/need to know?
You may start with Titanium for desktop dev. Also you may have a look at Chromium Embedded Framework. It's basically a web browser control based on chromium.
It's written in C++ so you can do all the low level OS stuff you want(Growl, tray icons, local file access, com ports, etc) in your container app, and then all the application logic and gui in html/javascript. It allows you to intercept any http request to either serve local resources or perform some custom action. For example, a request to http://localapp.com/SetTrayIconState?state=active could be intercepted by the container and then call the C++ function to update the tray icon.
It also allows you to create functions that can be called directly from JavaScript.
It's very difficult to debug JavaScript directly in CEF. There's no support for anything like Firebug.
You may also try AppJS.com (Helps to build Desktop Applications. for Linux, Windows and Mac using HTML, CSS and JavaScript)
Also, as pointed out by #Clint, the team at brackets.io (Adobe) created an awesome shell using Chromium Embedded Framework that makes it much easier to get started. It is called the brackets shell: github.com/adobe/brackets-shell Find out more about it here: clintberry.com/2013/html5-desktop-apps-with-brackets-shell
NW.js
(Previously known as node-webkit)
I would suggest NW.js if you are familiar with Node or experienced with JavaScript.
NW.js is an app runtime based on Chromium and node.js.
Features
Apps written in modern HTML5, CSS3, JS and WebGL
Complete support for Node.js APIs and all its third party modules.
Good performance: Node and WebKit run in the same thread: Function calls are made straightforward; objects are in the same heap and can just reference each other
Easy to package and distribute apps
Available on Linux, Mac OS X and Windows
You can find the NW.js repo here, and a good introduction to NW.js here. If you fancy learning Node.js I would recommend this SO post with a lot of good links.
Awesomium makes it easy to use HTML UI in your C++ or .NET app
Update
My previous answer is now outdated. These days you would be crazy not to look into using Electron for this. Many popular desktop apps have been developed on top of it.
NOTE: AppJS is deprecated and not recommended anymore.
Take a look at NW.js instead.
It seems the solutions for HTML/JS/CSS desktop apps are in no short supply.
One solution I have just come across is TideSDK: http://www.tidesdk.org/, which seems very promising, looking at the documentation.
You can develop with Python, PHP or Ruby, and package it for Mac, Windows or Linux.
Sorry to burst your bubble but Spotify desktop client is just a Webkit-based browser. Of course it exposes specific additional functionality, but it's only able to run JS and render HTML/CSS because it has a JS engine as well as a Chromium rendering engine. This does not help you with coding a client-side web-app and deploying to multiple platforms.
What you're looking for is similar to Sencha Touch - a framework that allows for HTML5 apps to be natively deployed to iOS, Android and Blackberry devices. It basically acts as an intermediary between certain API calls and device-specific functionality available.
I have no experience with appcelerator, bit it appears to be doing exactly that - and get very favourable reviews online. You should give it a go (unless you wanted to go back to 1999 and roll with MS HTA ;)
I know for there's Fluid and Prism (there are others, that's the one I used to use) that let you load a website into what looks like a standalone app.
In Chrome, you can create desktop shortcuts for websites. (you do that from within Chrome, you can't/shouldn't package that with your app) Chrome Frame is different:
Google Chrome Frame is a plug-in designed for Internet Explorer based
on the open-source Chromium project; it brings Google Chrome's open
web technologies to Internet Explorer.
You'd need to have some sort of wrapper like that for your webapp, and then the rest is the web technologies you're used to. You can use HTML5 local storage to store data while the app is offline. I think you might even be able to work with SQLite.
I don't know how you would go about accessing OS specific features, though. What I described above has the same limitations as any "regular" website. Hopefully this gives you some sort of guidance on where to start.
You can build Javascript apps with Adobe AIR… http://www.adobe.com/products/air.html
CEF offers lot of flexibility and options for customisation. But if the intent is to develop quickly node-webkit is also a good option. Node-web kit also offers ability to call node modules directly from DOM.
If there aren't any native modules to integrate Node-Webkit can offer better mileage. With native modules C/C++ or even C# it is better with CEF.
I have a existing website in rails 2.3.8 which i want to develop for mobile phones(andriod,iphone), something like facebook's mobile site.
I found that creating the view pages with extension .mobile.erb will do the job.
But the problem is i am unable to call existing javascript functions on mobile site which i used for the main site.
I want to know if it is possible to call js or is there any alternative way.
Of course, you can use javascript on you mobile web pages. For iOS and Android. For other mobile i don't know.
Doc for safari ios : http://developer.apple.com/devcenter/safari/index.action
For iPhone you can use the iUI framework http://code.google.com/p/iui/ which consists of a JavaScript library, and CSS similar to that of native iOS apps.