Design: Creating An App with HTML/CSS And Sencha Touch
As you probably know there are many frameworks that allow you to develop native iOS apps with the interfaces designed with HTML/CSS.
The big question then is how do you create that app’s interface? Sencha Touch is one possibility.
I’ve found a tutorial that goes into detail on how to design a great looking mobile web app that looks like a native one using HTML/CSS using the Sencha Touch library that looks and feels just like a native app. What I really like about the tutorial is that it goes through the design process step-by-step.
The tutorial is from Jen Gordon who’s set of beginner native iOS app design tutorials I previously mentioned.
You can find the tutorial here:
Create An HTML/CSS Mobile Web App Using Sencha Touch
You can test out an expanded version of the app built in the tutorial here (use your iPhone):
http://senchalearn.github.com/roookies/?style=demo
This information is great to know not just for web apps, but a useful guide if you plan on creating a native app using a wrapper framework like Phonegap.
Access Native Objective-C Code In Javascript Iphone Apps
Yesterday, I told you how to execute Javascript code on a page showing in a UIWebView using Objective-C. That was rather trivial as Apple has messaging functionality built in to allow that. Executing Objective-C code from within a Javascript application is not trivial. I highly suggest using one of the three frameworks I mentioned in a previous post.
Now, this is something that I haven’t coded myself because I haven’t run into a situation where I was using a web app that needed to add functionality not already implemented within Phonegap when working with Iphone web app code. However, the author of QuickConnect has an excellent tutorial on doing this here.
Basically what you do is write to NSLog from your Javascript code, then iterate through that log and extract the commands and variables to be used by your Objective-C code. Overall, it’s not a very complex process, but a rather tedious one.
Thanks for reading this series about turning Javascript web apps into native ones for the Iphone app store, tommorow I will talk a bit about OpenGL ES.
Interacting With Javascript Iphone Apps Using Objective-C
Ok, if you’ve been following my last few posts I introduced several frameworks that are designed to enable developoment of native Iphone apps using HTML, CSS, and Javascript.
First, a visitor asked why would you write an app using Javascript instead of Objective-C?
I can think of several reasons.
1. You’ve already written an Iphone web app, but want to expand your reach by placing your app in the app store.
2. You are or are working with web developers who don’t understand Objective-C and are unwilling or unable to learn how to use Objective-C.
3. You want your app to run on other platforms without having to port your code. (can be done using some of the available javascript Iphone frameworks)
4. You want to interact with web services, and find it cumbersome to do so using Objective-C code.
The third and fourth reasons are why I’m interested in this type of development. I like Objective-C development, but writing the code to interact with different web services can really be tedious, and there are many more examples and libraries available for doing this using Ajax. Also, every platform seems to be coming out with an app store.
On to the topic at hand.
Sending data from your Objective-C code to an app written in Javascript is not difficult, as Apple has written a command.
The procedure for doing this is shown here: Iphone App Development For Web Hackers. In a nutshell you send Javascript commands by using the stringByEvaluatingJavaScriptFromString: message in the UIWebView class. In this example, this is done with the following code:
[webView stringByEvaluatingJavaScriptFromString:
[NSString stringWithFormat:@"update_position(%@, %@);", latitude, longitude]];
}
This code executes the update_position function within javascript contained on the page loaded in the UIWebView very nifty. The strings is executed as if it were javascript actually on the page. This can be used to easily send values like location as above, touches, or accelerometer details that normally wouldn’t be available to your javascript code. This is an excellent tutorial if you have not created a “native” app on the Iphone using javascript before.
Tommorow I will get into the more complex matter of interacting with Objective-C code using javascript running in a UIWebView.
Three Frameworks For Palm Pre WebOS style development on the Iphone
Yesterday I introduced the Phonegap framework which allows users to add functionality restricted to native apps while developing using javascript on the Iphone. I also got my first hater on this site, thanks PreDeveloper!
Today I’m going to introduce a couple more frameworks. Tommorow I will get into how you can interact with Objective-C using javascript, and vice versa.
The second framework I’m going to introduce you to today is QuickConnect Iphone. QuickConnect allows you to develop using Havascript, HTML, and CSS, and provides detailed instructions on how to develop using Apple’s excellent visual web app development tool Dashcode, and turn those into “native” apps. An added benefit is that apps can also run on several other platforms, and maybe even for the likes of Predeveloper it will run on the Palm Pre too. I haven’t seen QuickConnect being used in an app yet, and I’ve only gone through a couple of the tutorials on the author’s blog.
The third framework is Big5. This framework does not seem as far along as Phonegap or QuickConnect, but it does supply the user with the ability to use the camera, location services, and accelerometer. However, I mention it here because it is very easy to use. The instructions however are somewhat limited in how to get your app to the app store, because the author wants you to load it up in the “Big5App”.
To sum things up, the 3 frameworks are:
Phonegap – Mature, used in many apps, works with Iphone, Blackberry and Android.
QuickConnectIphone – In beta, works with Iphone, Android, Linux, Php, and Mac.
Big5 – Mature, somewhat limited functionality, works through Big5App on Iphone.
Tommorow I’m going to get into interaction between Javascript and Objective-C on the Iphone so you can access nearly any Iphone functionality using Javascript.
Html CSS Javascript for Iphone Native Development Like Palm Pre WebOS
It seems like there is alot of buzz around the Palm Pre’s ability to allow developers to use HTML, CSS, and Javascript to develop apps for the upcoming Palm Pre, and sell them in Palm’s AppCatalog.
Is that a big deal? My answer would be no.
The fact of the matter is there have been solutions that allow you to use the these web technologies in developing IPhone apps for quite some time, and you can add in features such as sound effects, accelerometer, multitouch, and more into your apps simply using Javascript while designing your interface in HTML, and then get your app into the app store.
Ok, so you don’t get the same performance as you would coding in raw Objective-C/C/C++, and you can’t access any 3D functionality, but how many 3D engines out there are written in Javascript? I would say that being able to use C++ and C are far more useful in that endeavour.
One solution that I know of for adding native functionality to your Javascript code and then shipping your app to the app store is Phonegap. Phonegap has been used in a number of apps in the app store, including graphical 2d games, and seems to perform well. Phonegap uses an MIT license. If you are a web programmer wishing to use Javascript, HTML, and CSS in your apps at this stage Phonegap seems to be the most mature framework for doing so on the Iphone, and not only will your apps run on the Iphone, but Phonegap also has solutions to add native functionality to Google Android, and Blackberry “web” apps.
Tommorow I will introduce a couple of other Iphone frameworks enabling development using HTML, CSS, and Javascript, and talk about how you can communicate between Javascript and Objective-C code.