Navigateur

L'application Navigateur (qui fait maintenant partie de System) offre des fonctionnalités de navigation lorsque cela est nécessaire — cela comprend la navigation sur des pages, la recherche et les marque-pages. Cet article explique comment les fonctionnalités de base de l'application Navigateur fonctionnent, et comment elle s'intègre dans un système plus vaste.

Comme Gaia est construit pour s'exécuter au-dessus de Gecko, il a été possible de concevoir un Navigateur Système/application Navigateur pour naviguer sur des pages web classiques, basé sur cette instance Gecko. Cela est accessible par l'intermédiaire de l'API mozBrowser.

Note : Depuis Firefox OS 2.1, l'application Navigateur fait partie de System. Cela signifie que la navigation web peut se faire soit en cliquant sur l'icône Navigateur pour ouvrir l'application, soit en utilisant la fonctionnalité de navigation et de recherche universelle. Grâce à l'expérience utilisateur Haida, l'application et les onglets de navigation sont alors unifiés pour une expérience commune et sont présents dans le gestionnaire de tâches ainsi que dans la vue des miniatures (pour la navigation latérale).

Quand un utilisateur Firefox OS marque une page web pour qu'elle apparaisse sur l'écran d'accueil, cette page web s'ouvrira dans le Navigateur Système et non dans l'application Navigateur. Il comporte dans la partie inférieure une barre d'outils contenant les fonctions génériques reculer/avancer/actualiser. Dans Gaia, cela est appelé le Navigateur Chrome ou wrapper. Vous pouvez le voir en action du côté droit de l'image suivante.

A diagram showing that when a web page is opened in the system browser, it is given a toolbar.

Si vous souhaitez que votre page web dispose toujours des fonctions reculer/avancer/actualiser, vous pouvez ajouter la ligne suivante dans le manifeste de l'application pour activer le Navigateur Chrome.

declare { chrome: { navigation: true } }

Note : La barre d'outils du Navigateur Chrome a une incidence sur la hauteur du contenu, il est donc nécessaire de la prendre en compte pour la mise en page de vos pages web.

Le flux de code

Lors de l'ouverture d'une nouvelle page web dans Firefox OS, la séquence des appels est

Gecko > WrapperFactory > Window Manager > AppWindow > BrowserFrame

Les wrappers héritant de system/js/wrapper_factory recevront l'événement mozbrowseropenwindow dans le cas d'une page web en marque-page.

Dans la section handleEvent, le gestionnaire va vérifier l'événement pour déterminer si la page web doit être ouverte en tant qu'application ou dans le navigateur chrome.

Enfin, launchWrapper est appelée pour lancer la fenêtre correspondante.

Avec la nouvelle barre de navigation et de recherche, les utilisateurs peuvent accéder à leurs favoris, saisir une URL, ou découvrir de nouvelles applications depuis n'importe où dans Firefox OS. La barre de recherche se trouve en haut de l'écran et les utilisateurs peuvent juste toucher l'écran ou faire glisser le doigt dessus pour l'ouvrir.

Voyez cela comme une combinaison de l'Awesome Bar du navigateur et de la recherche adaptative d'applications de l'écran d'accueil. Comme Firefox OS utilise des applications web, lorsque vous trouvez ce que vous voulez, même s'il s'agit d'une nouvelle application, il l'ouvre directement. Vous n'avez pas besoin d'installer quoi que ce soit, parce que tout est de type web et instantané.

Application Navigateur

Le Navigateur est une application web certifiée qui procure une expérience de navigation web générale. La fonction principale se trouve dans apps/browser/js/browser.js :

var Browser = {
  init: function browser_init() {
    this.getAllElements();
      ...
    BrowserDB.init((function() {
      ...
    }
  }
};

window.addEventListener('load', function browserOnLoad(evt) {
  window.removeEventListener('load', browserOnLoad);
  Browser.init();
});

Le Navigateur appellera sa fonction init() pendant le chargement du DOM.

getAllElements: function browser_getAllElements() {
  var elementIDs = [
    'toolbar—start', ... 'danger—dialog'];

  // Loop and add element with camel style name to Modal Dialog attribute.
  elementIDs.forEach(function createElementRef(name) {
    this[this.toCamelCase(name)] = document.getElementById(name);
  }, this);
},

La fonction getAllElements est utilisée pour obtenir tous les gestionnaires d'élément camelCase, après quoi apps/browser/js/browser_db.js est appelée pour se préparer à l'ajout du moteur de recherche par défaut et des marque-pages.

Marque-pages

À partir de Firefox OS 2.0, apps/bookmark est utilisé pour gérer les activités d'enregistrement/suppression de marque-pages.

La partie la plus intéressante, apps/bookmark/webapp.manifest, ressemble à ceci :

"activities": {
  "save—bookmark": {
    "filters": {
      "type": "url",
      "url": { "required":true, "pattern":"https?:.{1,16384}" }
    },
    "disposition": "inline",
    "href": "/save.html",
    "returnValue": true
  },
  "remove—bookmark": {
    "filters": {
      "type": "url",
      "url": { "required":true, "pattern":"https?:.{1,16384}" }
    },
    "disposition": "inline",
    "href": "/remove.html",
    "returnValue": true
  }
},

Comme indiqué plus haut, l'activité est gérée par save.html et remove.html. Les deux opérations sont prises en charge par apps/bookmark/js/activity_handler.js:

var ActivityHandler = {
  'save—bookmark': function ah_save(activity) {
  },

  'remove—bookmark': function ah_remove(activity) {
  }
};

navigator.mozSetMessageHandler('activity', function onActivity(activity) {
  var name = activity.source.name;
  switch (name) {
    case 'save—bookmark':
    case 'remove—bookmark':
      if (activity.source.data.type === 'url') {
        ActivityHandler[name](activity);
      }
    ...
  }
}

Quand le gestionnaire de message en écoute navigator.mozSetMessageHandler('activity') réceptionne les activités save-bookmark ou remove-bookmark, la fonction ActivityHandler est appelée pour gérer les opérations correspondantes.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : jwhitlock, xdelatour
 Dernière mise à jour par : jwhitlock,