Application mobile: Comment créer une application multithreading pilotée par des webworkers – Partie 2

Pour l’instant, nous collons ActiveTab à notre table, car il s’agit de toute façon du premier onglet contenant des données.

Nous devons parcourir manuellement les données pour créer la sortie pour les cases casesPerOneMillion et infectées.

Nous sauvegardons les données dans la nouvelle configuration de données, car nous souhaitons les transmettre ultérieurement dans différents magasins. Nous pourrions également le placer dans un nouveau magasin, mais comme nous ne voulons pas appliquer de tri ou de filtrage de premier niveau, restons simples.

À la ligne 57, nous ajoutons manuellement les données chargées dans la propriété de données CountryStore. Celui-ci déclenche un setter en interne.

Il est temps de recharger notre application dans le navigateur:

Vous pouvez maintenant faire défiler horizontalement et verticalement.

Nous avons déjà des rendus pour les nombres en place, mais ceux-ci peuvent utiliser certaines couleurs, pour faciliter leur distinction et respecter le schéma de couleurs de notre en-tête.

Ouvert: Util.mjs

Ajoutez la méthode formatInfected ().

Ouvert: vue / pays / Table.mjs

Nous ajoutons uniquement les nouveaux moteurs de rendu ici.

Rechargez l’application dans votre navigateur:

Beaucoup mieux, non?

Une dernière chose manque par rapport à la version en ligne de cette appli: ajouter des drapeaux de pays à la colonne des noms de pays.

Étant donné que nous souhaitons également utiliser la logique d’analyse d’indicateur pour d’autres composants, ajoutons-la à notre fichier Util.

Ouvert: Util.mjs

Nous avons ajouté le flagRegEx statique, ainsi que la méthode getCountryFlagUrl (). Nous avons besoin de celui-ci, car les noms de pays à l’intérieur de l’API ne correspondent pas toujours aux noms des images flaticon que nous voulons utiliser.

Ouvert: vue / pays / Table.mjs

Ajustez le rendu de la colonne de nom de pays comme suit:

Rechargez l’application dans votre navigateur:

Maintenant, la vue Table est exactement la même que celle des exemples en ligne. Bon travail!

[side note] Si vous ne l’avez pas déjà fait, c’est le moment idéal pour une courte pause. Prenez une tasse de thé ou de café. Profitez-en!

Bien que la création d’un composant aussi complexe que l’hélice soit beaucoup de travail, son utilisation est assez facile. Si vous le souhaitez, vous pouvez en découvrir le code source complet ici:

https://github.com/neomjs/neo/blob/dev/src/component/Helix.mjs

Créez le fichier: view / country / Helix.mjs

Nous n’avons besoin que de 172 lignes de code. La partie importante ici est la configuration itemTpl, qui est fondamentalement un squelette vdom pour chaque élément d’hélice sans données.

Nous utilisons la méthode createItem () pour mapper les données API dans chaque élément. Comme mentionné précédemment, nous utilisons à nouveau Util.formatNumber ().

Remplacer getCloneTransform () est nécessaire, car nous devons ajuster le mode lors de l’expansion d’un élément en fonction de sa taille. En détail: vous pouvez cliquer sur un élément, puis appuyer sur « Entrée » et il se déplacera en haut à gauche.

Nous passons à nouveau notre CountryStore dans la configuration du magasin, ce qui créera une nouvelle instance du magasin pour chaque instance Helix. Nous ne voulons pas garder le tri synchronisé avec la vue Tableau, bien que nous puissions le faire.

Ouvrir: view / MainContainer.mjs

Importez le CountryHelix et remplacez le 2e composant à l’intérieur du TabContainer par notre module. Nous ajoutons également une référence.

Rechargez l’application dans votre navigateur:

Une couleur de fond noire indique que l’hélice est en place, nous avons juste besoin d’y ajouter des données.

Ouvrir: view / MainContainerController.mjs

Dans la méthode addStoreItems (), ajoutez la ligne suivante tout en bas:

me.getReference('helix').store.data = data;

Rechargez l’application dans votre navigateur:

Magnifique, n’est-ce pas?

Maintenant, nous pouvons faire beaucoup de choses:

  1. Faites défiler verticalement pour effectuer un zoom avant ou arrière.
  2. Faites défiler horizontalement pour faire pivoter l’hélice.
  3. Cliquez sur un élément pour le sélectionner ou le désélectionner.
  4. Une fois un élément sélectionné, utilisez les touches fléchées pour vous déplacer.
  5. Appuyez sur la touche Espace pour faire pivoter l’élément sélectionné vers l’avant.
  6. Utilisez la touche Entrée pour développer un élément. Vous remarquerez que la position ne correspond pas encore vraiment à l’écran (nous pourrions ajuster getCloneTransform ()), mais cela le fera très bientôt.

Je vais garder cette section assez courte, car il n’y a pas beaucoup de nouvelles choses à apprendre ici. Vous êtes cependant les bienvenus pour poser des questions 🙂

Créez le fichier: view / HelixContainer.mjs

Beaucoup de boutons et de champs de gamme dans différentes dispositions.

Le constructeur de la ligne 243 vaut le coup d’œil: nous avons ajouté les 2 configs: helix, helixConfig avec une valeur nulle dans la définition de classe et maintenant nous créons une instance Helix manuellement. Nous enregistrons une référence à l’Helix dans la configuration de l’hélice, pour faciliter son accès ultérieur.

Pour garder la classe flexible, nous répandons le helixConfig dans la configuration de l’hélice (quel libellé :)). De cette façon, vous pouvez facilement changer les configurations d’hélice lors de la création d’une nouvelle instance du conteneur de contrôles.

Nous pouvons simplement ajouter une instance de composant existante dans le tableau des éléments d’un conteneur (ligne 254). Le cadre va le gérer.

Créez le fichier: view / HelixContainerController.mjs

Il existe une autre configuration interne pour accéder au composant Helix à l’intérieur du conteneur. beforeGetHelix () obtient l’Helix par référence. Nous pourrions aussi utiliser this.view.helix.

Beaucoup de méthodes de gestion pour les boutons et les champs de portée. La partie importante est que les gestionnaires n’affecteront que de nouvelles valeurs aux configurations Helix existantes, plutôt que d’appeler des méthodes. Par exemple.:

onFlipItemsButtonClick(data) {
this.helix.flipped = !this.helix.flipped;
}

Cela correspond très bien à l’approche basée sur la configuration de neo.mjs.

Ouvrir: view / MainContainer.mjs

Remplacez l’importation CountryHelix par le nouveau HelixContainer. Remplacez-le également dans le deuxième élément TabContainer et supprimez-y la référence.

Rechargez l’application dans votre navigateur:

Prenez quelques minutes pour jouer avec les nouvelles commandes.

Par exemple. zoomez, retournez les éléments, ajustez l’opacité min.

Vous avez peut-être remarqué que si vous rechargez votre application avec la valeur de hachage mainview = helix, elle affichera toujours la vue Table sous la forme de l’onglet actif. Il était temps de changer cela!

Ouvrir: view / MainContainerController.mjs

Nous ajoutons les configurations activeMainTabIndex & mainTabs, getTabIndex () et onHashChange ()

Le stockage de l’ordre des onglets dans mainTabs est uniquement pour des raisons de commodité → un accès plus rapide pour mapper une valeur de hachage à un onglet existant.

onHashChange () se déclenchera également pour la valeur de hachage initiale. Cela arrivera avant votre application est rendue. Nous stockons le nouvel index à l’intérieur du contrôleur (facultatif) et nous ajustons la configuration activeIndex de notre TabContainer.

Rechargez l’application dans votre navigateur (et encore avec la vue Helix comme onglet actif):

Il affichera maintenant l’Hélice comme nouveau point de départ. En regardant dans la console, vous découvrirez que nous appliquons toujours le DOM pour les éléments Helix et Table View en même temps. C’est vraiment mauvais du point de vue des performances.

→ Nous faisons ne pas souhaitez ajouter des données aux deux magasins immédiatement.

Ouvrir: view / MainContainerController.mjs

Nous ajustons uniquement addStoreItems (). En utilisant nos 2 nouvelles configurations, nous pouvons maintenant facilement identifier l’onglet actif et n’ajouter que des articles à son magasin correspondant.

Rechargez l’application dans votre navigateur.

Si l’itinéraire pointe d’abord vers la vue Table, celle-ci affichera des données. Le rechargement de l’application avec l’itinéraire Helix affichera des données. Lorsque vous changez d’onglet, la 2e vue reste vide, nous devons donc améliorer un peu plus onHashChange ().

Ouvrir: voir / MainContainer.mjs & voir / MainContainerController.mjs

À l’intérieur du MainContainer, nous devons ajuster la référence de «table-container» à «table». Celui-ci n’est pas encore synchronisé avec l’application finale.

À l’intérieur du contrôleur, ajoutez getView () et ajustez onHashChange ().

Nous allons maintenant ajouter des données à un magasin, au cas où il serait vide. Nous pourrions encore améliorer cela en ajoutant un ID ou un horodatage à chaque magasin pour la dernière mise à jour.

Pour Helix, j’ai également ajouté une réinitialisation offsetValues. L’Helix doit connaître la taille actuelle du conteneur, pour ajuster le positionnement au cas où vous souhaiteriez développer un élément (touche Entrée).

Rechargez l’application dans votre navigateur:

Parfait. Une dernière chose.

Ouvrir: view / MainContainerController.mjs

Si nous cliquons sur le bouton de rechargement des données, nous voulons également actualiser la vue actuelle et non seulement charger les données récapitulatives.

Étant donné que celui-ci est super similaire à la création de la vue Helix, ajoutons un dernier élément.

Créez le fichier: view / country / Gallery.mjs

C’est presque exactement la même chose que pour l’Helix. itemTpl & createItem ().

Créez le fichier: view / GalleryContainer.mjs

Identique à Helix, beaucoup de boutons, de champs de champs et de mises en page. Rien de nouveau ici.

Créez le fichier: view / GalleryContainerController.mjs

Même histoire 🙂

Ouvrir: view / MainContainer.mjs

Importez le GalleryContainer et ajoutez-le comme troisième onglet.

Ouvrir: view / MainContainerController.mjs

mainTabs: ['table', 'helix', 'gallery']

Ajoutez simplement la galerie dans la configuration mainTabs.

Rechargez l’application dans votre navigateur:

Prenez quelques minutes pour jouer avec votre galerie.

Astuce: évitez d’utiliser les curseurs TranslateX & Y, cliquez sur un élément, utilisez les touches fléchées. Modifiez définitivement le nombre de lignes, triez par ligne et triez.

Maintenant, vous voudrez probablement aussi voir votre application dans Firefox et Safari.

npm run build-all

http: // localhost: 8080 / dist / development / apps / covid / # mainview = helix

#Comment #créer #une #application #multithreading #pilotée #par #des #webworkers #Partie