Why IPhone Phonegap application renders css differently than native browser? - iphone

I am creating an PhoneGap application for iPhone.
When I am designing and testing HTML file in PC-Browser it looks different.
And In Phone gap it looks different.
Actually CSS not functioning as accepted. Is this known issue? OR Am I missing something?
I can provide code snippet or screen-shots if needed. Please help

Without seeing code this is almost impossible to actually answer. BUT I will say this - with mobile you are using Webkit, meaning that anything in your CSS that referes to -moz- will not work. Also, you're dealing with a version of webkit, not the newest, and not the oldest - well that is unless your on android 2.2.2
You should be safe to use any -webkit- syntax in your CSS, but just know that certain properties may not be supported in android as they have fragmented their phones quite and bit and have shipped a somewhat old version of webkit with specific OS's.
iPhone you should be all good to go, now if you continue to have issues that are more specific I would recommend you post your code so we can see what is going on - you could just have some weird markup somewhere.

Related

Writing iPhone apps with PhoneGap, Appcelerator etc

I was dumbfounded today, when I read that Apple has allowed PhoneGap apps for quite some time now. How does PhoneGap work? Do all HTML5, CSS, and JS get converted into native Objective-C code? Or is it just a container with actual HTML code inside? Wouldn't that be a huge security risk?
Then again I'm wondering, if you can tell PhoneGap apps apart from XCode apps? If they run native code, I guess it should be as smoothly. So what are the limitations and how come not many people use it, or at least I haven't heard of many? After all Javascript is pretty powerful.
PhoneGap does not get converted to native code. Other frameworks take this route.
Your HTML/CSS/JS are wrapped in a native wrapper, depending on the platform. This makes it far easier to port you to different platforms, including iOS, Android, BlackBerry, Palm, and Symbian. In my experience this is not the end of your problems, just a new set of problems.

Developing Cross Platform Mobile application in latest frameworks (Rhodes, PhoneGap, jQTouch)

We have recently developed an iPhone, iPad, Android application with the Rhodes framework and have found it to be painful to say the least. As we are approaching the finishing stages and now testing the app in mobile devices we find more bugs than were apparent in iPhone simulator and would like to change the development direction as it seems most of the Apps even showcased on the Rhodes site are super buggy and not as smooth as they should be.
Can anyone lend any insight on how we may take already developed front-end files with prepped JSON data to apply it to another framework to produce the application. We have learned how the jQTouch framework operates and feel comfortable developing but need to package this into an application.
Rapid development is a key concern as we are approaching a deadline on this project. Note our proficiencies are Ruby, ROR3, JQuery, Modern front-end (HTML5/CSS3)
I'm not familiar with Rhodes, but it seems like Phonegap might be a good solution for you. I'm not sure what your app needs to do, but your skills (HTML/CSS and jQuery in particular) would translate well.
Phonegap lets you create an app for both iPhone/Android, while using the same code. There's some tweaking when setting up your files... but the overall intent is that you're working with the same code (as opposed to having to create two separate apps).
For both iPhone/Android apps developed with Phonegap, you're basically working with files within a folder (much like you would work with files inside a folder on a server). It's a basic group of file types - image, javascript, css, etc. You build like you would for a browser.
jQTouch provides more of a look and feel, in terms of the buttons, UI and animation/transition between sections. Phonegap more or less wraps up all the code, and lets you bundle it as an app for iPhone/Android.
Additionally, if you need to access device-specific functionality like GPS, camera, etc... Phonegap has a nice library you can tap into. Again - same code for both iPhone/Android.
A quick reference to review (to see if Phonegap + jQTouch is a good fit for you) is Jonathan Stark's book: Building iPhone Apps with HTML, CSS, and JavaScript. You may also want to refer to the example files referenced in his chapters, here.
Final note: jQtouch is meant for smaller handhelds. Not sure how well it translates over to iPad, but just an FYI. I know less about Sencha Touch, but it's made by the same folks and might be another approach for larger screens.

Can I start using HTML 5 for my smartphone app?

Most smartphones use modern browser engines that have implementing HTML 5 (or at least partially). Should I start using HTML 5 for my web application ? Where can I find a list of browser engines used by most popular devices (iPhone,Android,etc.) ? My application doesn't have to work on older desktop browsers.
Depending on how commercial/critical your web page is, the answer differs.
If it is CRITICAL that it works on ALL smart-phones, use HTML4, with a view to upgrading it to HTML5.
If it is preferable that it works on most smart-phones HTML5 will be fine. Even where it is not supported, the page will render - it just won't look like you intend. I'm using HTML5 with a couple of additions that help older browsers to render it correctly.
I did a browser test of HTML 5 (with the helpers for older browsers) with the following results:
http://www.stevefenton.co.uk/Content/Blog/Date/200907/Blog/HTML-5-Browser-Test/
According to this post (iPhone developers abandoning app model for HTML5?), it seems that starting to use HTML 5 is feasible.
Unless you only cares iphone, 5 is not well supported for "most" smartphones.
If you really want good compatibility on smartphones, you'd better keep with 4.
The Wikipedia mobile browsers page has a decent table at the moment.
On the “most popular devices” issue, if you’ve got any information about phones used by your app’s intended audience, that’ll be more valuable than general popularity.
Having said that, I think in general the iPhone’s sales figures are significantly ahead of everyone else, and the iPhone has great HTML5 support. I’d go ahead with HTML5, as I think the other smartphones will either catch up with their HTML5 support, or disappear.
Android’s pretty much the only other smartphone with significant sales, right? I think Google’s keen on HTML5.

No XSLTProcessor() support in Safari?

For whatever reason, I can't get XSLTProcessor() to work all the time.
Here is my JS:
... xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xmlRequest.responseXML);
// Pass variables
xsltProcessor.setParameter(null, "sectionNumber", section);
xsltProcessor.setParameter(null, "entryNumber", elementNo);
// Transform XML using XSL
var resultDocument = xsltProcessor.transformToFragment(phonebookDump,document);
// Append to document
document.getElementById('three').appendChild(resultDocument);
Works fine in:
Firefox on OSX,
iPhone Simulator on OSX,
Safari on OSX
Doesn't work at all in:
Mobile Safari on iPhone,
Safari on Windows
Am I missing something? Is there a workaround to XSLTProcessor()? Would server-side XSLT processing be quicker for mobile development anyways?
Your JS code seems right. Safari (and safari mobile as well) acutally has the xslt support. It's just a merciless implementation. The problem is that sometimes it may look like it is not working just because it is not verbose at all when it fails.
Remember that webkit xsl engine is based on libxsl, so you can use any software based on this library to test your style sheet against your document. I personally use xslproc that fails just like safari, but gives much more output.
If you can't get out of the problem, just post the xslt and the XML files.
I'm pretty sure Mobile Safari doesn't support XSLT, as the underlying OS X implementation does not include the relevant libraries that are present in desktop versions of OS X.
Server-side processing would definitely be quicker for a mobile app anyway: any processing you can reasonably shift away from the phone to the server is a win.

Will all javascript libraries work with Iphone? Aptana question

I am trying to use Aptana to build an IPhone web application. I've never use Aptana. I downloaded the iphone support and started a new project. It is now asking me if I want to import a javascript library and lists the "big ones." Will IPhone's Safari be able to use these, specifically jquery? I saw that jquery had a special iphone library so my guess is no.
Should I tell it to use jquery (or other library) or should I download the special iphone javascript subset manually and try an integrate it in my project?
As far as I know JQuery should work fine on the iPhone. The specific libraries you are talking about must be additions to take advantage of iPhone only features like being able to handle the display orientation event or maybe use the webkit css animation extensions.
Although you will need to be careful with events since most mouse related events on the iPhone behave a little different from what you might expect. This presentation by PPK offers some clues about it:
http://yuiblog.com/blog/2009/04/27/video-ppk-jsevents/
Yep, iphone should run jquery just fine. The javascript support is surprisingly capable. Although you may want to look at some of the iPhone specific libraries out there. I forget their names. iUI I think?