Friday, July 20, 2012

Sencha Touch 2: Wrapping all up [part 1]

Installing Cordova Template for iOS on XCode4


 
 
Installing Cordova for Android

Requirements

  • Eclipse 3.4+

Install SDK + Cordova

Setup New Project

Launch Eclipse, and select menu item New > Android Project. Fill out the three panels of the New Android Project wizard shown below.


  • In the root directory of your project, create two new directories:
    • /libs
    • assets/www
  • Copy cordova-1.9.0.js from your Cordova download earlier to assets/www
  • Copy cordova-1.9.0.jar from your Cordova download earlier to /libs
  • Copy xml folder from your Cordova download earlier to /res
  • Verify that cordova-1.9.0.jar is listed in the Build Path for your project. Right click on the /libs folder and go to Build Paths/ > Configure Build Path.... Then, in the Libraries tab, add cordova-1.9.0.jar to the project. If Eclipse is being temperamental, you might need to refresh (F5) the project once again.




    Edit your project's main Java file found in the src folder in Eclipse:
  • Add import org.apache.cordova.*;
  • Change the class's extend from Activity to DroidGap
  • Replace the setContentView() line with super.loadUrl("file:///android_asset/www/index.html");


  • Right click on AndroidManifest.xml and select Open With > XML Editor
  • Paste the following permissions between the <uses-sdk.../> and <application.../> tags.



    <supports-screens 
        android:largeScreens="true" 
        android:normalScreens="true" 
        android:smallScreens="true" 
        android:resizeable="true" 
        android:anyDensity="true" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />
     
     
     
    
    • Support orientation changes by pasting the folowing inside the <activity> tag.  

    android:configChanges="orientation|keyboardHidden|screenSize"

Thursday, July 19, 2012

Secnha Touch 2: Model-View-Controller Architecture [part 1]


Sencha Touch 2 is optimized around building applications that work across multiple platforms. To make the writing of applications as simple as possible, we provide a simple but powerful application architecture that leverages the MVC (Model View Controller) pattern. This approach keeps your code clean, testable and easy to maintain, and provides you with a number of benefits when it comes to writing your apps:

  • History Support: full back button support inside your app, and any part of your app can be linked to
  • Deep Linking: share deep links that open any screen in your app, just like linking to a web page
  • Device Profiles: easily customize your application's UI for phones, tablets and other devices while sharing all of the common code

An Application is a collection of Models, Views, Controllers, Stores and Profiles, plus some additional metadata specifying things like application icons and launch screen images.




  • Models: represent a type of object in your app - for example an e-commerce app might have models for Users, Products and Orders
  • Views: are responsible for displaying data to your users and leverage the built in Components in Sencha Touch
  • Controllers: handle interaction with your application, listening for user taps and swipes and taking action accordingly
  • Stores: are responsible for loading data into your app and power Components like Lists and DataViews
  • Profiles: enable you to easily customize your app's UI for tablets and phones while sharing as much code as possible
The Application is usually the first thing you define in a Sencha Touch application, and looks something like this:

Ext.application({
    name: 'MyApp',
    models: ['User', 'Product', 'nested.Order'],
    views: ['OrderList', 'OrderDetail', 'Main'],
    controllers: ['Orders'],

    launch: function() {
        Ext.create('MyApp.view.Main');
    }
});

The name is used to create a single global namespace for your entire application, including all of its models, views, controllers and other classes. For example, an app called MyApp should have its constituent classes follow the pattern MyApp.model.UserMyApp.controller.UsersMyApp.view.Main etc. This keeps your entire app under a single global variable so minimizes the chance of other code on the page conflicting with it.
The Application uses the defined modelsviews and controllers configurations to automatically load those classes into your app. These follow a simple file structure convention - models are expected to be in the app/model directory, controllers in the app/controller directory and views inside the app/view directory - for example app/model/User.jsapp/controllers/Orders.js and app/view/Main.js.
Note that one of the models we specified was different to the others - we specified the full class name ("MyApp.model.nested.Order"). We're able to specify the full class name for any of those configurations if we don't follow the normal naming conventions. See the Dependencies section of the Ext.app.Application docs for full details on how to specify custom dependencies.

Sencha Touch 2: The Basics [Part 2]

The first thing we need to do is set up our application, just like we did in the previous guide. The app is using a tab panel that will hold the 4 pages so we'll start with that:
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Welcome'
                }
            ]
        });
    }
});
If you run this in the browser, a TabPanel should appear on top of the screen. The home page could be a bit more welcoming, so let's add some content to it and reposition the tab bar at the bottom of the page. We do that with the tabBarPosition config and by adding a bit of HTML:
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: [
                        '<img src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch (2.0.0)</h2>'
                    ].join("")
                }
            ]
        });
    }
});
You should see some HTML content but it won't look very good. We'll add a cls config and add it to the panel, adding a CSS class that we can target to make things look better. All of the CSS we're adding is in the examples/getting_started/index.html file in the SDK download.


Responsive Design: Basics

Creating a default layout

The first step of this tutorial is obviously to create a HTML page. I chose to make a simple HTML5 page with only a header image, a title, and some text. Copy the following code and paste it into a file named index.html.


<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="utf-8">
    <title>Cats Who Code demo</title>
 <link href="style.css" type="text/css" rel="stylesheet" media="screen">
 <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
</head>
 
 
<body>
 <div id="container">
  <header class="ma-class-en-css">
   <h1 id ="logo"><a href="#">Cats Who Code</a></h1>
  </header>
        
  <div id="content">
         <h2>Paris, France</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula massa. Donec consequat, risus nec viverra condimentum, elit velit dignissim dui, id congue sapien leo tincidunt est. Mauris consectetur tempus lorem id aliquet. Proin eu faucibus massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In magna ligula, ornare sed posuere faucibus, consequat ac lacus. Fusce sodales fermentum nibh, a imperdiet nisi bibendum eget. Donec gravida iaculis sapien eu consectetur. Curabitur id augue augue. Nam mauris urna, suscipit eget faucibus sit amet, mollis vitae felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris ipsum lectus, imperdiet id aliquam nec, vulputate vitae mauris. Integer gravida, neque eu placerat egestas, urna metus bibendum nisl, quis congue felis velit id diam. Quisque non tortor at turpis facilisis placerat quis sed felis. Ut eget ipsum dolor, id lacinia leo. Vivamus vitae blandit libero. Integer ultricies gravida leo quis lobortis. Morbi ultrices risus vulputate magna dignissim sed ultricies arcu tristique. Sed non facilisis sapien.</p>

   <p>Integer faucibus, augue vitae vulputate sodales, tellus tellus vulputate tortor, in iaculis ipsum orci vitae libero. Vestibulum laoreet accumsan erat vel pretium. Ut turpis elit, ultricies id accumsan non, condimentum feugiat neque. Nam ut erat urna, a porta augue. Donec vel porttitor magna. Cras eget tortor eget ante malesuada sodales sed a leo. Fusce sit amet cursus sem. Nulla aliquet accumsan ante sit amet condimentum. Morbi varius porta sapien nec iaculis. In gravida velit at nulla imperdiet varius.</p>
        </div><!-- #content -->

  <footer>A demo by <a href="http://www.catswhocode.com">CatsWhoCode</a></footer>
 </div><!-- #container -->
</body>
</html>

Once done, we have to add a stylesheet to our index.html page. The following code is the basic styling for the page. Paste it into a file named style.css.


*{
 /* On a production site, use a real reset instead of this! */
 margin:0;
 padding:0;  
}            
    
body{
 background:#f5f5f5;
 font-family:"Lucida Grande", Arial;
 font-size:13px;
 line-height:21px;
 color:#444;  
}     

p{
 margin:15px 0;
}              

h2{
 margin-top:20px;
}

#container{
 background:#fff;
 border-left:1px #ddd solid;
 border-right:1px #ddd solid;
 border-bottom:1px #ddd solid;
 width:600px;
 margin:0 auto;
}  

header h1#logo a{
 text-indent:-9999px;
 display:block;
 width:600px;
 height:82px;
 background:url(image-med.jpg) no-repeat 0 0;
}             

#content{
 width:95%;
 margin:0 auto;
}

footer{
 text-align:center;
 width:100%;
 display:block;    
 font-size:11px;
} 
Right now, if you look to your index.html page through your web browser, you’ll see something the result. Nothing spectular, right? We're getting there...

@media screen and (min-width:1200px){
 #container{
  width:1100px;
 }  
 
 header h1#logo a{
  width:1100px;
  height:150px;
  background:url(image.jpg) no-repeat 0 0;
 }                          
 
}

Using CSS3 media queries to make it responsive to screen resolutions


If you had a look to your index.html page with a screen resolution bigger than 800*600, you might find the layout is really small. So, what about allowing large screens to display a bigger version, while still using the small version for people with lower resolutions?
This is what CSS3 media queries can do for you. Open your style.css file and paste the code below at the end of the file:

@media screen and (max-width:767px){
 #container{
  width:320px;
 } 
 
 header h1#logo a{
  width:320px;
  height:44px;
  background:url(image-small.jpg) no-repeat 0 0;
 }                           
 
}


Now, have a look at index.html again: The layout is indeed bigger. Horizontally resize the window size… The site switches back to the small layout. How great is that?
As you can see, there’s nothing complicated at all in implementing this technique. @media screen tells the browser this applies only for screens, because we don’t want to resize anything for print. And and (min-width:1200px) specifies that the screen must have a 1200px minimum width. If these requirements are met, then the code within the parenthesis is taken into consideration by the browser, and redefines previous styles.
Now that we created a bigger version for bigger screens, what about a very small version for mobiles? Paste this code into style.css and you’re done.

Images


Images always play an important part of a website. So, let’s add an image to our website layout. Re-openindex.html and insert the following code just before the first closing </p>


<img src="notre-dame.jpg" alt="Photo by Wlappe">
If you have a look to index.html with a big screen, no problem. But if you resize the window horizontally…it wont look nice. It will be out of place.



The solution to that problem is quite simple: As we resize the website layout, we have to resize images as well. The max-width CSS property is here to help.
Insert the following on your style.css file:


img {
 max-width:570px;
 margin:10px 0;
}
A default image size is now defined. Now we can setup sizes for big screens as well as mobile devices:


@media screen and (min-width:1200px){
 img {
  max-width:1000px;
 }
}

@media screen and (max-width:767px){  
 img {
     max-width:305px;
 } 
}

Limitations

Guess what? Internet Explorer (excepted the newly released IE9) doesn’t know anything about the CSS @media property. Which means that even on a big screen IE users will see the default layout, unless you use JS libraries.








References:
catswhocode.com
smashingmagazine.com

Wednesday, July 18, 2012

Responsive Design: media queries

Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the <head> tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Internet Explorer 8 or older doesn't support media query. You can use media-queries.js or respond.js to add media query support in IE.
<!--[if lt IE 9]>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Now we can add exta rules in CSS to specific resolutions. A basic media queie would something like this:

I will also be making an extensive guide on how to use media queries to do various layouts. Stay tooned.


References: webdesignerwall.com

Tuesday, July 17, 2012

Responsive Design VS Mobile Websites

As said in a previous post mobile devices are becoming one of the largest internet/website market there is, and developers and designers must adapt to it.


(...) In 2010, Steve Jobs once again took the stage and expressed Apple’s vision of a new device that would exist between a smartphone and a computer. This device, Steve expressed, would need to do some tasks better than either a smartphone or a computer. Web browsing was the first of these tasks to be identified and Apple unveiled the iPad tablet to address this task.

Like smartphones, tablet devices are now becoming widespread and creating opportunities and challenges for website administrators. Tablet devices have mid-sized screens (between a smartphone and a desktop display) and rely on touch-based interfaces. (...)
in cmswire.com 

Back then (only 2 years ago!) emerged a new form of website, the Mobile Website. Witch is a different version of the same website that previously existed but optimized to these machines, that have less memory, processing power and screen resolution then the average machine. The user will not have to scroll (at least horizontally) to navigate, will have larger buttons press with his thumb and simpler input text's to fill. This may be the exact same website with (almost) the same functionality but with a completely different layout, behavior and Domain! Usually a mobile version of www.mywebsite.com would be m.mywebsite.com, this different version almost NEEDS a different domain (note: almost, because you can code around it) witch is, lets say, not scalable. There is another disadvantage of this technique: multiple devices. Yes we all know iPhone's resolution (and dpi) but the market its not iPhone, its ALL of them: iOS, Android, Blackberry and Symbian (and a few others). The mobile version of the website would be the same in all devices (regardless of the resolution) and in vertical and landscape mode, this means if your website is optimized to an iPhone it wouldn't look as good in an iPad and even worse in iPad in landscape.

The solution to these problems comes with Responsive Design!

What is Responsive Design?


Responsive design "responds" to the current resolution of your client: if it changes along the usage, the layout itself changes with it. This means that you have as many different layouts as many resolutions you want to cover: you can have two different layouts for an iPhone (vertical, and landscape), the same is true with the iPad! If you work with the largely used screen resolutions you have (almost) all possibilities covered, and your website will work fine in every device.

How to achieve this?


Media queries. These are CSS rules that define exceptions for the layout, it detects resolution changes and changes the other CSS rules to fit your goal: no horizontal scrolls. And stated previously it also may change the size of your buttons and input texts to fit usability challenges. A good technique using responsive design is to hide irrelevant content to increase the relevance of the important content, for example instead of a big logo you can crop the image (showing just PART of it but with the same relative size). This way you show everything there is to see in your website in a smaller screen with usability limitations (the user does not have a mouse and keyboard, only a touchscreen).






*In addition the the current tutorials I'll be posting some guides about Responsive Design and cross browsing with some basic techniques.

Monday, July 16, 2012

Sencha Touch 2: The Basics [Part 1]

Hi there again, I'm back on posting!
So, lets get to the basis shall we?

We'r going to build a project from command line first, to generalize the starting experience. You'll need Sencha Touch 2 SDKSDK Tools, a HTTP server (such as WAMP or XAMPP) and Google Chrome or Safari for debug.

Extract your SDK to the root of your HTTP server and install SDK Tools, this will add a PATH to your system variables so you can run 'sencha' commands, to check if its working open a Terminal and do the following:


$ cd ~/webroot/sencha-touch-2.0.0-gpl/
$ sencha
Sencha Command v2.0.0 for Sencha Touch 2
Copyright (c) 2012 Sencha Inc.
...


If you see this output, everything is set up ok.
Now we can create projects using this command line, the 'sencha generate' command does all that and builds up an autoloader:


$ sencha generate app GS ../GS
[INFO] Created file /Users/(...)/Projects/sencha/GS/.senchasdk
[INFO] Created file /Users/(...)/Projects/sencha/GS/index.html
[INFO] Created file /Users/(...)/Projects/sencha/GS/app.js
...


This will generate an (not so empty) new project with all the dependencies extracted and included in the main file. It also provides a preloader with css3 animation running on 'fly'.

With your chosen browser go to 'localhost/GS/' and you should see this:


The filesystem

In the '/GS/' directory you should see something like this:

App - Here are all your application files, all your code should be in here (and ONLY in here).
app.js - Main JavaScript file, every system call comes from here first.
app.json - Config file.
index.html - This is the file that the wrapper or browser will load automatically, so this should call the SDK and your APP main JavaScript file.
packager.json - Config file used to package your application in a native format.
resources - All CSS, images and application related files should be places in here.
sdk - Sencha Touch 2 SDK files, dont change this.

app.js




Now lets change some titles, and see how easy that can be in ST2:

Open 'app/view/Main.js', this is your main view at the moment. It contains all the content that you see in this example application.

Go to line 10 and change it to this:


title: 'Home Tab'


...line 19


title: 'Woohoo!'


...lines 22 to 26


html: [
    "I changed the default <b>HTML Contents</b> to something different!"
].join("")

And refresh your browser.
There! This is how you debug your ST2 applications, you dont need to package it to a mobile device or a mobile emulator to test minor changes in the code. If it works on a computer browser it should work on a mobile one (or even a webkit wrapper).

I'll be posting PART2 shortly, stay tooned.

references:
http://docs.sencha.com/