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; } } }

Support multilingue pour votre Widget

RiccardoKlinger2

<\/HEAD>

Comme j'ai présenté une méthode pour créer votre propre widget<\/A> pour le Web Appbuilder dans mon dernier article, je voudrais expliquer les options pour la prise en charge multilingue dans votre widget.<\/P>

NLS<\/H4>Les chaînes de nos derniers widgets sont plus ou moins codées en dur dans les fichiers Setting.html et Widget.html pour le moment. Si vous souhaitez remplacer ces chaînes par la langue définie dans le navigateur ou le portail, vous devez étiqueter les chaînes et créer une bibliothèque de chaînes. Cela est fait pour Setting.html et pour Widget.html à différents endroits dans la structure du widget.<\/P>Setting.html<\/H4>Le dossier setting contient un dossier appelé nls. À l'intérieur, vous créez un dossier pour chaque langue que vous souhaitez soutenir et un fichier initial strings.js avec les chaînes qui devraient être utilisées par défaut dans les paramètres du widget. Le fichier strings.js se compose des chaînes par défaut actuelles et d'un indicateur, indiquant si une seule langue (nous ne supportons que "de" dans notre exemple) est prise en charge :<\/P>define<\/SPAN>(<\/SPAN>{<\/SPAN>   root:<\/SPAN> (<\/SPAN>{<\/SPAN>     ZoomSetCheckboxText:<\/SPAN> "Afficher le niveau de zoom"<\/SPAN>,<\/SPAN>     ScaleSetCheckboxText:<\/SPAN> "Afficher l\'échelle"<\/SPAN>,<\/SPAN>        configText:<\/SPAN> "Définir la configuration :"<\/SPAN>   }<\/SPAN>)<\/SPAN>,<\/SPAN>   "de"<\/SPAN>:<\/SPAN> 1<\/SPAN>,<\/SPAN>   "es"<\/SPAN>:<\/SPAN> 0<\/SPAN> }<\/SPAN>)<\/SPAN>;<\/SPAN>‍‍‍‍‍‍‍‍‍‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN>‍<\/SPAN><\/span><\/CODE><\/PRE>Vous avez peut-être remarqué que nous utilisons une variable appelée "ZoomSetCheckboxText" et "ScaleSetCheckboxText" et définissons le contenu de la variable avec quelques chaînes de base. Ces chaînes doivent être utilisées partout où les variables sont utilisées. Nous plaçons les variables à l'intérieur du fichier Setting.html. Cela ressemble maintenant un peu différent car la nomenclature semble un peu étrange :<\/P><PRE class="lia-code-sample line-numbers language-none"><CODE>  <<\/span>div<\/span>><\/span>     <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>title"<\/span>><\/span>${nls.configText}<\/<\/span>div<\/span>><\/span>     <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>row"<\/span>><\/span>       <<\/span>input<\/span> type<\/span>=<\/span>"<\/span>checkbox"<\/span> id<\/span>=<\/span>"<\/span>ZoomSetCheckbox"<\/span> data-dojo-attach-point<\/span>=<\/span>"<\/span>ZoomSetCheckbox"<\/span>><\/<\input></spam>       <spam clss=style-attr language-css toke style=display:inline>${nls.ZoomSetCheckboxText}<spam clss=tag></spam>     </div>     <div clas=row>       <input type=checkbox id=ScaleSetCheckbox data-dojo-attach-point=ScaleSetCheckbox>       ${nls.ScaleSetCheckboxText}     </div> </div><\EMOJI_10>> Toutes les chaînes sont définies avec un schéma "${nls.xyz}". Cela permet d'utiliser les chaînes et la traduction automatique selon votre définition dans le fichier strings.js. Bien sûr, nous devons également définir une traduction en allemand dans notre cas. Cela se fait à l'intérieur du sous-dossier "de" dans le dossier nls. Nous plaçons un deuxième strings.js là-bas qui contient les chaînes allemandes :<\P> <code> define({ "ZoomSetCheckboxText": "Zeige Zoomlevel", "ScaleSetCheckboxText": "Zeige Maßstab", "configText": "Einstellung" }); class="punctuation token">, });‍‍‍‍‍‍‍‍‍‍Veuillez noter la différence d'utilisation des indicateurs de chaîne comparé au fichier strings.js par défaut dans le dossier parent.Le Widget.html

Le widget lui-même fonctionne de manière similaire. À l'intérieur du dossier Widget, vous créez un dossier nls avec des sous-dossiers concernant les langues souhaitées que vous souhaitez prendre en charge. Une liste des langues prises en charge peut être vue ici :

Native Language Support

Encore une fois, nous substituons les chaînes utilisées dans le fichier original avec le schéma "${nls.xyz}" :

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>ZoomLeveLInfo<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">data-dojo-attach-point</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>zoomInfoDiv<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>${nls.label1} <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAn>p</Span><span class="style-attr language-css token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">display</span><span class="punctuation token">:</span> inline<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span> <span class="attr-name token">data-dojo-attach-point</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>MapZoomInfo<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="token tag"><span class="token tag"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span><span class="token tag"><span class="token tag"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span>
&nbsp;&nbsp;&nbsp;&nbsp; <Span Class = "Token Tag"><Span Class = "Token Tag"><Span Class = "Punctuation Token"> &Lt; / Span > Div </ Span > <Span Class = "Attr - Name Token "> Data - Dojo - Attach - Point </ Span > <Span Class = "Attr - Value Token "><Span Class = "Punctuation Token "> = </ Span > <Span Class = "Punctuation Token "> " </ Span > ScaleInfoDiv <Span Class = "Punctuation Token "> " </ Span ></ Span ><Span Class = "Punctuation Token "> &Gt; </ Span ></ Span > ${NLS.Label2} <Span Class = "Token Tag "><Span Class = "Token Tag "><Span Class = "Punctuation Token "> &Lt; / Span > P </ Span ><Span Class = "Style - Attr Language - Css Token "><Span Class = "Attr - Name Token "> <Span Class = "Attr - Name Token "> Style </ Span ></ Span ><Span Class = "Punctuation Token "> = " </ Span ><Span Class = "Attr - Value Token "><Span Class = "Property Token "> Display </ Span ><Span Class = "Punctuation Token "> : </ Span > Inline <Span Class = "Punctuation Token "> ; </ Span ></ Span ><Span Class = "Punctuation Token "> " </ Span ></ Span > <Span Class = "Attr - Name Token "> Data - Dojo - Attach - Point </ Span ><Span Class = "Attr - Value Token "><Span Class = "Punctuation Token "> = </ Span ><Span Class = "Punctuation Token "> " </ Span > ScaleInfo <Span Class = "Punctuation Token "> " </ Span ></ Span ><Span Class = "Punctuation Token "> &Gt; </ Span ></ Span ><Span Class = "Token Tag "><Span Class = "Token Tag "><Span Class = "Punctuation Token "> &Lt; / Span > P </ Span ><Span Class = "Punctuation Token "> &Gt; </ Span ></ Span ><Span Class = "Token Tag "><Span Class = "Token Tag "><Span Class = "Punctuation Token "> &Lt; / Span > Div </ Span ><Span Class = "Punctuation Token "> &Gt; </ Span ></ Span >
<Span Class = "Token Tag"><Span Class = "Token Tag"><Span Class = "Punctuation Token"> &Lt; / Div </ Span ><Span Class = "Punctuation Token"> &Gt; </ Span ></ Span >‍‍‍‍<Span Class= "Line-Numbers-Rows"><Span>‍</Span><Span>‍</Span><Span>‍</Span><Span>‍</Span></Span>

Dans notre fichier strings.js, nous définissons les chaînes par défaut :

<SPan CLass=

Trouver plus de publications taguées avec

Knowhow

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.