Télécharger la version d'ext JS correspondante depuis la partie développeur : [[

Transcription

1 Création d'un thème sous Sencha by LegalBox Création d'un thème sous Sencha 1. Installation de l'environement Sencha Installer la dernière version de Ruby : [[ Installation la dernière version de Sencha Cmd : [[ Télécharger la version d'ext JS correspondante depuis la partie développeur : [[ Décompresser l'archive et la déplacer où l'on souhaite (retenir le chemin pour l'étape d'après). 2. Création des fichiers d'exemple 2.1. Génération de l'environnement Ouvrir une Invite de commandes Se positionner dans le répertoire où l'on souhaite travailler. Saisir la ligne suivante : sencha -sdk [Chemin vers le SDK Ext JS] generate workspace -ext myworkspace 1 / 7

2 Un dossier my-workspace a été créé dans le dossier courant. Attendre la fin de la génération du répertoire (ceci peut être assez long). Se déplacer dans ce répertoire : cd my-workspace Il devrait y avoir 2 répertoires : "ext" "packages" 2.2. Génération de l'application pour tester le thème Depuis le répertoire my-workspace, saisir cette commande : sencha -sdk ext generate app ThemeDemoApp theme-demo-app Pour lancer cette application, se déplacer dans le répertoire et exécuter la commande permettant de surveiller les changements apportés : cd theme-demo-app sencha app watch 2 / 7

3 Cette commande, une fois la génération des fichiers effectuée, va afficher une URL local afin d'accéder à l'application. Accéder à cette URL (ex : Puis, ouvrir le dossier theme-demo-app pour visualiser notre application Générer le thème personnalisé Depuis le répertoire theme-demo-app, saisir la ligne suivante : sencha generate theme my-custom-theme 2.4. Configurer l'héritage tu thème Les thèmes de Sencha sont étendus de plusieurs thèmes de base dont voici la liste : "ext-theme-base" - This package is the base theme for all other themes, and the only theme package that does not have a parent theme. It contains the bare minimum set of CSS rules that are absolutely required for Ext JS components and layouts to work correctly. The style rules in "exttheme-base" are not configurable in a derived theme, and you should avoid overriding any of the style rules that are created by this theme. "ext-theme-neutral" - The neutral theme extends "ext-theme-base", and contains the vast majority of configurable style rules. Most of the variables that are available for configuring the appearance of Ext JS components are defined in "ext-theme-neutral". These are the variables that can be overridden by your custom theme. 3 / 7

4 "ext-theme-neptune" - Modern borderless theme. Extends "ext-theme-neutral". "ext-theme-crisp-touch" - Neptune-Based Touch Theme. Extends "ext-theme-neptune". This theme includes the "touch-sizing" package "ext-theme-crisp" - Minimalistic Theme. Extends "ext-theme-neptune". "ext-theme-crisp-touch" - Crisp-Based Touch Theme. Extends "ext-theme-crisp". "ext-theme-classic" - The classic blue Ext JS theme. Extends "ext-theme-neutral". "ext-theme-gray" - Gray theme. Extends "ext-theme-classic". "ext-theme-aria" - Accessibility theme. Extends "ext-theme-neptune". This theme includes the "ext-aria" package Dans notre exemple, nous allons changer le thème de base de classic en neptune. Ouvrir le fichier package.json, puis modifier "extend": "ext-theme-classic" en "extend": "ext-theme-crisp" 2.5. Changer la couleur de l'application Dans le répertoire my-custom-theme/sass/var/, créer un fichier Component.scss. Ajouter la ligne suivante avec la couleur choisie : 4 / 7

5 $base-color: #317040!default; 2.6. Utiliser ce nouveau thème Depuis le répertoire de l'application, exécuter la commande : sencha app watch Dans theme-demo-app/app.json, changer : /** * The name of the theme for this application. */ "theme": "ext-theme-neptune", en : /** * The name of the theme for this application. */ "theme": "my-custom-theme", La commande sencha app watch va remarquer le changement dès l'enregistrement du fichier app.json et régénérer l'application. 5 / 7

6 Une fois cette opération effectuée, réouvrir l'application comme précédemment et visualiser les changements apportés Utiliser ce nouveau thème Copier le contenu du répertoire /packages/my-custom-theme/build/ressources dans un nouveau répertoire portant le nom du thème. L'importer dans l'application comme tout autre thème. 3. A retenir A chaque changement apporté au thème, pour visualiser les effets : Depuis le répertoire du thème : sencha package build Depuis le répertoire de l'application : sencha app watch Pour connaître les paramètres CSS modifiables, se référer à la documentation ([[ puis pour chaque élément à la partie CSS Mixins. 6 / 7

7 Powered by TCPDF ( Création d'un thème sous Sencha Plus d'informations Documentation officielle : [[ Copyright 2015 LegalBox, Tous droits réservés. 7 / 7