nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Créez des Widgets Personnalisés pour votre Application Web... une introduction

RiccardoKlinger2

<\/HEAD>

Travailler avec un SIG aboutit parfois à des flux de travail, des modèles et ainsi de suite assez avancés. L'étape suivante pourrait être : Comment partager ces outils afin que d'autres parties et personnes puissent les utiliser ? Il existe plusieurs approches pour ce faire :<\/P>

publier le Géotraitement en tant qu'Outil Web.<\/LI>
ArcGIS JavaScript API<\/LI>
Widgets pour le Web AppBuilder<\/LI><\/UL>
Dans cet article de blog, je voudrais décrire la dernière approche et créer un Widget personnalisable pour le Web AppBuilder.<\/P>
Web AppBuilder Dev Edition<\/H3>Vous pourriez vous demander, pourquoi ai-je besoin du Web AppBuilder Dev Edition<\/A> (abrégé : WAB) ? Comme nous allons créer un widget, il est toujours bon de tester la solution avant de la publier en tant qu'application personnalisée sur AGOL. Avec le Web AppBuilder Dev Edition, nous pouvons utiliser des widgets modèles et tester les widgets localement sur un serveur (ou une ressource qui a un domaine sympa...)<\/P>
WAB fonctionne sur
Node.js<\/A> mais n'est disponible que pour Windows pour le moment.<\/P>
Une fois décompressé et configuré avec votre compte ArcGIS (connectez-vous à Portal for ArcGIS, créez une application sur votre Portal, enregistrez l'application avec votre Portal), vous êtes prêt à partir :<\/P>
<\/P>
<\/P>
Suivez les étapes définies dans la
section Commencer<\/A>.<\/P>
L'objectif du Widget<\/H3>Pour cette introduction, je voudrais créer un widget qui affiche l'échelle ainsi que le niveau de zoom actuel d'une carte. Bien sûr, c'est en quelque sorte une amélioration du widget Scalebar standard. Par conséquent, je vais d'abord montrer la méthode autonome puis décrire l'amélioration du widget Scalebar par défaut pour faire la même chose : afficher non seulement la barre d'échelle mais aussi afficher le niveau de zoom ainsi que l'échelle de la carte sous-jacente.<\/P>La structure d'un Widget<\/H3>Un Widget lui-même se compose de plusieurs fichiers décrits ci-dessous :<\/P>Le fichier JavaScript qui définit la fonction du widget (Widget.js<\/EM>)<\/LI>Le fichier modèle qui définit l'interface utilisateur du widget (Widget.html<\/EM>)<\/LI>Le fichier de configuration du widget (config.json<\/EM>)<\/LI>Le fichier manifeste du widget nécessaire à la publication (manifest.json<\/EM>)<\/LI>Le fichier de chaînes i18n<\/A> du widget pour l'internationalisation des chaînes si nécessaire (nls\/strings.js<\/EM>)<\/LI>Le fichier de style du widget si vous êtes un type élégant et aimez <\/> arrondir les bordures, images d'arrière-plan, curseurs et cercles (css\/style.css<\/EM>)<\/LI><\/UL>Au final, la structure de votre widget devrait ressembler à ceci :<\/P><\/P>Comme vous l'avez peut-être remarqué, la structure contient également un dossier appelé setting.<\/> Comme nous voulons personnaliser le comportement de notre widget, nous devons définir certains paramètres et interagir avec eux.<\/P>
Le Code<\/H3>Passons en revue les fichiers. Nous laisserons l'utilisateur définir s'il souhaite voir l'échelle, le niveau de zoom ou les deux. Cela se fait dans setting.html<\/P>Le Setting.html \/ Setting.js<\/H4>Ainsi, nous afficherons deux cases à cocher. Comme je préfère le style simple Vanilla (et que je n'ai pas réussi à faire fonctionner les cases à cocher dijit 😉<\/><\span>) nous utilisons des cases à cocher HTML :<\/><<\/>div<\/><\span>><\/><\span> <<\/>div<\/> class="title"><\/><\span>Niveau de Zoom Info<\/<\/>div><\/><\span> <<\/>div class="row"><\/><\span> <<\/>input type= le fichier settings.js <\/EM>.<\/P>Par conséquent, nous n'utiliserons pas seulement les ids des boutons (chaque widget pourrait avoir des éléments avec des ids identiques...) mais aussi des connecteurs de données :<\/P><<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN> <<\/SPAN>div<\/SPAN> class<\/SPAN>=<\/SPAN>"<\/SPAN>title"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN>Informations sur le niveau de zoom<\/<\/span>div<\/span>><\/span><\/span> <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>row"<\/span><\/span>><\/span><\/span> <<\/span>input<\/span> type<\/span>=<\/span>"<\/span>checkbox"<\/span><\/span> id<\/span>=<\/span>"<\/span>ZoomSetCheckbox(<\/SPAN>config)<\/SPAN>{<\/SPAN>\n this<\/SPAN>.<\/SPAN>config =<\/SPAN> config;<\/SPAN>\n this<\/SPAN>.<\/SPAN>ZoomSetCheckbox.<\/SPAN>checked =<\/SPAN> config.<\/SPAN>settings.<\/SPAN>ZoomSetCheckbox;<\/SPAN>\n this<\/SPAN>.<\/SPAN>ScaleSetCheckbox.<\/SPAN>checked =<\/SPAN> config.<\/SPAN>settings.<\/SPAN>ScaleSetCheckbox;<\/SPAN>\n console.<\/SPAN>log<\/SPAN>(<\/SPAN>"paramètres lus depuis le fichier : "<\/SPAN>)<\/SPAN>;<\/SPAN>\n console.<\/SPAN>log<\/SPAN>(<\/SPAN>config)<\/SPAN>;<\/SPAN>\n \n getConfig:<\/SPAN> function<\/SPAN>(<\/SPAN>"<\/SPAN><\/SPAN> data-dojo-attach-point<\/SPAN>=<\/SPAN>"<\/SPAN>scaleInfo"<\/SPAN><\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>p<\/SPAN>><\/SPAN><\/SPAN><\/<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN> <\/<\/SPAN>div<\/SPAN>><\/SPAN><\/SPAN> ‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN><\/SPAN><\/CODE><\/PRE>Vous pouvez voir une approche similaire à celle de la Setting.html<\/EM>: Nous utilisons data-dojo-attach-points pour accéder à l'élément div et modifier le contenu de ce div. Nous pourrions le faire en ligne mais nous respectons la structure et définissons la partie JavaScript dans le Widget.js.<\/EM><\/P>define<\/SPAN>(<\/SPAN>[<\/SPAN> 'dojo\/_base\/_declare'<\/SPAN>,<\/SPAN> 'dojo\/_base\/_lang'<\/SPAN>,<\/SPAN> 'jimu\/_BaseWidget'<\/SPAN>,<\/SPAN> 'dojo\/_on'<\/SPAN>,<\/SPAN> //comme nous modifions le div lorsque la carte est déplacée "on.extent-change"<\/SPAN> 'esri\/_map'<\/SPAN> //car nous interagissons avec la carte<\/SPAN> ]<\/SPAN>,<\/SPA... (truncated due to length) ...pan>getScale1000<\/SPAN>)<\/SPAN>*<\/SPAN>1000<\/SPAN> ;<\/SPAN>\n }<\/SPAN> sinon<\/SPAN> {<\/SPAN>\n dojo.<\/SPAN>destroy<\/SPAN>(<\/SPAN>this<\/SPAN>.<\/SPAN>scaleInfoDiv)<\/SPAN>;<\/SPAN>\n }<\/SPAN>\n }<\/SPAN>\n }<\/SPAN>)<\/SPAN>;<\/SPAN>\n}<\/SPAN>)<\/SPAN>;<\/SPAN>\n‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/PAN >‍ < > < / SP AN > < SP AN > < > < / SP AN > < SP AN > < > < / SP AN > < SP AN > < > < / SP AN > < / SP AN > < / CO DE > < / PR E > < H3 id = "toc-hId--800563879" id = "toc-hId--800563879" > Le Manifest.json < / H3 > Pour implémenter la nouvelle application personnalisée dans une application web, nous devons créer un fichier appelé manifest.json. Ce fichier contient les informations de base sur le nom et les paramètres principaux : < PRE class = "lia-code-sample line-numbers language-none" > < CO DE > {\n "name": "ZoomLevelInfo",\n "platform": "HTML",\n "version": "2.8",\n "wabVersion": "2.8",\n "author": "Esri Deutschland GmbH // Riccardo Klinger",\n "description": "Ceci est un widget pour afficher l'échelle et le niveau de zoom de la carte sous-jacente.",\n "copyright": "",\n "license": "http://www.apache.org/licenses/LICENSE-2.0",\n "properties": {\n & nbsp; & nbsp; & nbsp; "inPanel": false, // comme il est hors panneau\n & nbsp; & nbsp; & nbsp; "hasUIFile": true, // nous avons un fichier ui de paramètres\n & nbsp; & nbsp; & nbsp; "supportMultiInstance": falseb4// nous autorisons seulement une instance du widget.\n } \n} <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> </ CODE ></ PRE > Maintenant, nous pouvons tester le widget. < H3 id = "toc-hId-942246456" id = "toc-hId-942246456" > Tester le Widget </ H3 > Comme nous avons créé le widget principal, nous devrions maintenant le tester dans notre installation WAB Developer. Pour cela, placez tout le dossier (dans notre cas ZoomLevelInfo) dans le dossier client widget du WAB (dans mon cas "C:\WebAppBuilderForArcGIS\client\stemapp\widgets"). Pour le test, redémarrez Web AppBuilder et créez une nouvelle application : < IMG alt = "nouvelle application dans l'édition WAB dev" class = "image-8 jive-image j-img-original" src = "https://us.v-cdn.net/6038851/uploads/legacyfs/online/411070_2018-06-11 16_10_22-vsdev2319 - 172.16.150.141 - Remotedesktopverbindung.png" /> Le widget fait maintenant partie de Web AppBuilder et peut être sélectionné comme widget : < IMG alt = "" class = "image-9 jive-image j-img-original" src = "https://us.v-cdn.net/6038851/uploads/legacyfs/online/411077_2018-06-11 17_21_13-vsdev2319 - 172.16.150.141 - Remotedesktopverbindung.png" />< H3 id = "toc-hId--1609910505" id = "toc-hId--1609910505" > Hébergement du Widget </ H3 > Si vos tests ont réussi, vous pouvez héberger le widget sur un serveur et l'implémenter dans ArcGIS Online ou votre environnement ArcGIS Enterprise (>10.5) en tant que < A href = "http://enterprise.arcgis.com/en/portal/latest/use/add-custom-widgets.htm" rel = "nofollow noopener noreferrer" target = "_blank" > custom widget </ A>. Si vous possédez le portail, vous pouvez également vouloir ajouter le dossier à l'intérieur du WAB du portail (dans mon cas "C:\Program Files\ArcGIS\Portal\apps\webappbuilder\stemapp\widgets"). < H3 id = "toc-hId-132899830" id = "toc-hId-132899830" > Télécharger l'exemple </ H3 > Si vous souhaitez utiliser l'exemple, utilisez github < A href = "https://github.com/riccardoklinger/ZoomLevelInfo" rel = "nofollow noopener noreferrer" target = "_blank" > ici </ A>. Ou vous pouvez le télécharger directement ci-dessous. </ BODY ></ HTML>

Trouver plus de publications taguées avec

Technologie

Réponses

There are no comments yet

Rejoignez la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.