web-dev-qa-db-fra.com

Comment organiser des fichiers JS dans un projet Appcelerator Titanium

J'ai récemment commencé à créer une application iPhone en utilisant Titanium d'Appcelerator. Étant donné que l'application concerne essentiellement tous les JS, j'avais besoin de conseils sur la manière d'organiser ce projet.

Il devient très facile de simplement créer de longs fichiers de procédure pour chaque vue de l'application. Est-il possible d'incorporer MVC ou une structure au projet?

Merci, je l'apprécie .- Tilo

javascriptiphonetitaniumappcelerator
44
Tilo Mitra

Titanium lui-même est essentiellement MVC étant donné que votre fichier app.js est le contrôleur principal et que chaque vue que vous créez est la vue et que vous transmettez (ou définissez) les données de modèle à la vue.

Dans Titanium, vous pouvez décomposer votre application à l'aide de deux mécanismes intégrés de Nice:

  1. Titanium.include - Titanium.include vous permet d'inclure un ou plusieurs fichiers JS à la place, à l'instar de la directive de compilation C #include. Vous pouvez placer des fonctions communes et des classes JS dans ce fichier, puis les inclure où vous le souhaitez, importées et disponibles.

  2. Titanium.UI.createWindow - vous pouvez créer une nouvelle vue en tant que propriété de la nouvelle fenêtre et transmettre une URL à un autre contexte JS qui créera un nouveau sous-contexte JS et vous permettra de conserver son propre espace variable. (mais vous donnez encore accès à vos parents).

En outre, dans Titanium, vous pouvez créer des dossiers qui vous permettent d’organiser logiquement votre application de manière appropriée pour vous et votre application.

Edit: Aujourd'hui, la méthode Titanium.Include est obsolète. Comme indiqué dans la documentation, nous devrions créer un module CommonJS et utiliser l’instruction require().

Plus d'informations sur cette déclaration: Require

Plus d'informations sur les modules: Modules

31
jhaynie

Comme je ne trouvais pas de solution MVC appropriée pour un projet mobile Titanium, j’ai proposé l’approche suivante. Pour les petites applications, cela peut être trop technique, mais cela pourrait aider à maintenir les applications en croissance.

Structure du dossier:

/Resources
  /model
  /view
  /controller
  /ui
  /iphone
  /Android
  app.js
  app.jss

Pour séparer les vues, les modèles et les contrôleurs, un espace de noms est nécessaire. Nous le définissons donc dans le fichier app.js, qui est notre contrôleur principal:

var app = {
  view: {},
  controller: {},
  model: {},
  ui: {}
}

Dans les dossiers, nous plaçons des fichiers JavaScript uniques pour chaque composant. Pour cela, nous pourrions utiliser une bibliothèque JavaScript OOP légère, telle que MooTools ou Prototype, ou définir de simples fonctions JS en tant qu'objets. Si vous souhaitez également hériter des classes parent, une bibliothèque est tout à fait logique. 

Exemples:

# Resources/controller/MyController.js
app.controller.MyController = function() {
   return {
      getView: function() {
         return new app.view.MyView().getView();
      }
   }
}

# Resources/view/MyView.js
app.view.MyView = function() {
   return {
      getView: function() {
         return Ti.UI.createWindow({...});
      }
   }
}

# Resources/view/MyModel.js
app.model.MyModel = function() {
   return {
      some: "data",
      foo: "bar"
   }
}

Après cela, nous pouvons inclure toutes les classes nécessaires de modèle/vue/contrôleur avec Ti.include () dans le fichier app.js et référencer les composants avec notre espace de noms:

Ti.include("controller/MyController.js");
Ti.include("view/MyView.js");
var myController = new app.controller.MyController();
var myView = myController.getView();
myView.open();

L’approche MVC supposerait désormais que le contrôleur "contrôle" l’état de la vue et transmet les données du modèle à la vue. La vue ne comprend que des éléments d'interface utilisateur et des propriétés de style. Toute action effectuée dans l'interface utilisateur déclenche un événement qui demande au contrôleur d'effectuer l'action souhaitée. 

Mais bien sûr, la définition exacte de MVC peut être différente selon vos goûts personnels;)

24
fbrandel

Cela peut également aider: Une structure de base sur la façon d’organiser un projet mobile Titanium: https://github.com/krawaller/Struct

6
fbrandel

Permettez-moi de mettre à jour cette question car la plupart des réponses sont remplacées. Au quatrième trimestre 2012, Appcelerator a publié Alloy MVC (beta) Framework ainsi que la dernière version de IDE et du SDK, Titanium Studio 3.0 et SDK 3.0. Alloy est complètement intégré à Studio, il est donc assez facile de faire fonctionner une application de base en moins de 15 minutes. Alloy introduit une restructuration importante du dossier: le dossier / app contient maintenant tout le code de développement. 

Le dossier / Resources, où le code résidait auparavant, est maintenant l'équivalent mis à jour du dossier / build. Le code compilé dans / Resources est écrasé à chaque construction.

J'ai créé une brève introduction (screencast) sur la création d'un projet Alloy. Vous pouvez le voir via mon dossier Dropbox.

Créer un projet d'alliage

3
Mike S.

Il semblerait que Appcelerator ait créé son propre Appcelerator MVC sur le marché. Je n'ai pas encore évalué cela.

Plus d'infos: http://johnkalberer.com/2011/09/29/appcelerator-mvc-example/

0
Ryan White