Bonsoir à tous,
Ce tutoriel va vous expliquer comment installer et utiliser SASS dans un projet Sencha Touch.
I. INTRODUCTION
Alors qu'est ce que Sencha Touch ? C'est un framework javascript, pour les application mobiles. Il se base sur HTML5 et CSS3 ! Et c'est d'ailleurs grâce au CSS3 , qu'il est aussi maniable au niveau de la customisation de l'interface utilisateur (user interface).
Maintenant, SASS ? C'est (en gros) une évolution du CSS3. En fait, sa puissance est de pouvoir créer des variables (bleu=#0000FF) et de pouvoir les appliquer à des endroits bien spécifiques sans devoir scanner tout le fichier css de base de Sencha Touch. Je vous invite de voir le site officiel
Il y a que SASS et sencha touch ? euh presque ... Je vous présente succintement Compass (ce 'est pas l'annuaire ), c'est le compilateur de SASS, en gros, c'est le programme pour passer de sass en css.
Et enfin, je présente encore Ruby on Rails ou Ror pour les intimes. C'est un framework, qui permet de faire des sites web et applications web, et il est dérivé du Python. (Je n'ai jamais réussi à maitriser ce langage, mais peut etre que un jour ...) Alors pourquoi ce Ror ? parce que pour utiliser SASS et et Compass, on a besoin de Ror ...
Pour tous ceux qui ont Windows, il sont dans le BON ENDROIT ! Nous allons apprendre à installer tous les composants un par un sur windows (pour les linuxien et mac-ien, débrouillez vous !), puis nous allons essayer de comprendre le fonctionnement de SASS.
II. INSTALLATION
1. Ruby on rails
Vous allez sur la page suivante : http://rubyinstaller.org/downloads/
puis télécharger le premier élément de RubyInstallers, et vous l'insallez sur votre ordinateur. Enfin vous suivez les instructions.
Après la fenêtre de bienvenu pour l'installtion de Ror, vous aurez 2 checkbox à cocher:
"add ruby executables to your PATH"
"associate rb ad rbw files with the ruby installation"
Installation des composantes de ruby
Lorsque l'installation de ruby est fini, vous allez dans la liste des programmes windows, puis allez dans le Ror que vous venez d'installer et lancer le shell de Ror. Le programme s'appelle :'start command prompt width ruby'
vous allez voir un shell.
pour vérifier que ruby est bien installer, vous faites:
ruby -v
et voir la version de ruby installer
puis, s'il n y a pas d'erreur, vous faites:
gem install haml
gem install haml-edge
gem install compass
et enfin
compass version
pour vérifier l'install de compass
Installation de Sencha Touch
Vous allez sur le lien au dessus et télécharger le fichier, puis vous le dézippez, dans le répertoire de projet que l'on va appeler [PROJET].
Vous ouvrez [projet]/examples/kitchensink/index.html avec chrome ou safari, et vous verrez l'application se lancer...
En faite nous allons utiliser cette application pour customiser l'interface utilisateur.
III. PROJET SASS
Dans le répertoire [PROJET]/examples/kitchensink/ressources , nous allons créer un répertoire sass.
config.rb
puis, créez un fichier config.rb dans ce nouveau répertoire.
Vous ouvrez ce fichier avec un éditeur de texte simple, et mettez le code suivant:
# Delineate the directory for our SASS/SCSS files (this directory)
sass_path = File.dirname(__FILE__)
# Delineate the CSS directory (under resources/css in this demo)
css_path = File.join(sass_path, "..", "css")
# Delinate the images directory
images_dir = File.join(sass_path, "..", "img")
# Load the sencha-touch framework
load File.join(sass_path, '..', '..', '..', '..', 'resources', 'themes')
# Specify the output style/environment
output_style = :compressed
environment = :production
Dans ce code Ror, on comprend que l'on ajoute des repertoires d'inclusion, et que cela se fait de la manière suivante:
"REP_A/REP_B/REP_C"
se transforme en
("REP_A","REP_B","REP_C")
le fichier config.rb permet de configurer Compass avant la compilation du sass.
application.scss
Vous créez dans le répertoire sass, le fichier application.scss qui va contenir 'le programme'.
Vous l'ouvrez avec un editeur de texte et mettez:
$body-bg-color: #fbf5e6;
$base-color: #efe1d0;
$active-color: #aa3030;
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-toolbar-forms;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-sheet;
body {
font-family: Georgia;
color: #5a3d23;
}
.x-toolbar .x-toolbar-title {
color: #5a3d23;
}
Nous expliquerons le contenu de ce programme juste après ...
Vous sauvegarder tous les fichiers ouverts ...
Compilation
Avec votre command ruby de tot a l'heure, vous allez dans le répertoire SASS
[projet]/examples/kitchensink/ressources/sass
puis vous lancer la commande suivante:
compass compile
au bout de 20 sec, vous verrez dans le répertoire
[projet]/examples/kitchensink/ressources/css le fichier
application.css à côté de sink.css et codebox.css
vous ouvrez le fichier
[projet]/examples/kitchensink/index.html et désactiver la ligne
< link rel="stylesheet" href="resources/css/codebox.css" type="text/css">
pour la remplacer par
< link rel="stylesheet" href="resources/css/application.css" type="text/css">
Enfin, en visualisat, vous obtenez :
Fonctionnement du fichier .scss
Le fichier scss se compose de trois parties:
la première permet de réassigner de nouvelles valeurs à des variables
la deuxième permet d'importer tous les modules de sencha pour la compilation
la troisième parties de définir de nouvelles customisation et rêgles css voici un nouvel exemple:
// 1. Variable overrides, example:
$base-color: #af2584;
// 2. Include Sencha Touch styles
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-toolbar-forms;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-loading-spinner;
// 3. Define custom styles (can use SASS/Compass), example:
.mybox {
@include border-radius(4px);
}
Si vous avez une petite application, vous avez la possibilité d'éliminer les package css que vous n'utilisez pas. Vous pourrez supprimer @include sencha-form; si s'il n y a pas de formulaire dans votre application. Bous pourrez éliminer jusqu'à 20% su poids du fichier CSS, ce qui représente une très bonne optimisation !
liste de toutes les variables configurable de sencha
$active-color
$alert-color
$base-color
$base-gradient
$bright-color
$button-gradient
$button-height
$button-radius
$button-stroke-weight
$carousel-indicator-size
$carousel-indicator-spacing
$carousel-track-size
$form-bg-color
$form-dark
$form-field-bg-color
$form-field-height
$form-fieldset-radius
$form-label-width
$form-light
$form-slider-size
$form-spacing
$form-textarea-height
$form-thumb-size
$form-thumb-space
$form-toggle-size
$global-row-height
$include-bottom-tabs
$include-button-uis
$include-default-icons
$include-default-uis
$include-form-sliders
$include-highlights
$include-html-style
$include-tabbar-uis
$include-toolbar-uis
$include-top-tabs
$light-tab-active
$light-tab-color
$page-bg-color
$sheet-bg-color
$sheet-button-spacing
$sheet-padding
$tabs-bottom-active-gradient
$tabs-bottom-icon-size
$tabs-bottom-gradient
$tabs-bottom-radius
$tabs-dark-active-color
$tabs-dark-color
$toolbar-gradient
$toolbar-highlights
$toolbar-icon-size
$toolbar-input-bg
$toolbar-input-color
$toolbar-input-height
$toolbar-spacing
$top-tab-height
Conclusion
Vous verrez, que customiser votre inrface deviendra un jeu d'enfant ... et en plus, ce tuto est valable aussi pour Extjs 4.0 !
Have fun !
