Disclaimer: I created this app with the iPhone Facebook App in mind. I only tested the app on iPhone. I already noticed that the radial gradient background looks pixelated on Chrome, and I also suspect that due to other gradients, alpha colors and etc this app will make some Android and BlackBerry devices scream. Please don’t blame me :)*Touch compatibility webkit only
This view above is an iframe, if you open this blog post with Chrome or Safari you’ll be able to see it running! You can also point your mobile device to the following URL:
- Live Example: http://brunotavares.github.com/SenchaExamples/touch/native-to-web-facebook-login/
- Source code: http://github.com/brunotavares/SenchaExamples/
The view it’s pretty simple. We have the logo, 2 fields and 3 buttons. The only thing that might look different is the component with CSS class ‘shadow’. Since I wasn’t able to create a box-shadow for the fields without creating conflicts with their borders, I use this component as a layer on top of the fields with the inner shadow.
About the theming, there’s a lot of CSS3 stuff inside. I’m using Sass with Compass framework, so it alleviates some of the hurdles of plain CSS. Logo is just a component with fixed size and a background image. I’m also providing the retina version of it using the medias queries.
As I wrote previously, the shadow component is a
hack solution for making the inner box-shadow, without creating conflicts with the fields’ borders. The email field has a gray border on the bottom, and the password a white border on the top. It creates kind of an edge between fields. Something different about the fields is that you can style the text placeholder using ::-webkit-input-placeholder.
And that’s pretty much it. This is a great exercise, to see what we can accomplish using only web. Specially with Sencha Touch, since we hear a lot of questions asking how easy/hard it is to customize Touch components.
I wanted to use only CSS3, but for production it would be better to use a solid image for the radial background for non-iOS devices, and other sutil improvements. From my experience it performs way better.