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

Mehrsprachige Unterstützung für Ihr Widget

RiccardoKlinger2

<\/HEAD>

Da ich in meinem letzten Beitrag eine Möglichkeit vorgestellt habe, Ihr eigenes Widget<\/A> für den Web Appbuilder zu erstellen, möchte ich die Optionen für Mehrsprachigkeit in Ihrem Widget erklären.<\/P>

NLS<\/H4>Die Strings unserer letzten Widgets sind momentan mehr oder weniger fest im Setting.html und Widget.html Datei codiert. Wenn Sie diese Strings durch die im Browser oder Portal eingestellte Sprache ersetzen möchten, müssen Sie die Strings kennzeichnen und eine String-Bibliothek erstellen. Dies wird für die Setting.html und für die Widget.html an verschiedenen Stellen innerhalb der Widget-Struktur gemacht.<\/P>Setting.html<\/H4>Der Setting-Ordner enthält einen Ordner namens nls. Darin erstellen Sie für jede Sprache, die Sie unterstützen möchten, einen Ordner sowie eine initiale strings.js Datei mit den Strings, die standardmäßig in den Einstellungen des Widgets verwendet werden sollen. Die strings.js Datei besteht aus den tatsächlichen Standardstrings und einem Indikator, ob eine einzelne Sprache (wir unterstützen in unserem Beispiel nur "de") unterstützt wird:<\/P>define<\/SPAN>(<\/SPAN>{<\/SPAN>   root:<\/SPAN> (<\/SPAN>{<\/SPAN>     ZoomSetCheckboxText:<\/SPAN> "Zoomstufe anzeigen"<\/SPAN>,<\/SPAN>     ScaleSetCheckboxText:<\/SPAN> "Maßstab anzeigen"<\/SPAN>,<\/SPAN>        configText:<\/SPAN> "Konfiguration festlegen:"<\/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>Sie haben vielleicht bemerkt, dass wir eine Variable namens "ZoomSetCheckboxText" und "ScaleSetCheckboxText" verwenden und den Inhalt der Variablen mit einigen Basisstrings definieren. Diese Strings sollten überall dort verwendet werden, wo die Variablen benutzt werden. Wir platzieren die Variablen innerhalb der Setting.html Datei. Das sieht jetzt etwas anders aus, da die Nomenklatur etwas ungewöhnlich erscheint:<\/P>  <<\/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></spa... (truncated due to length) class="punctuation token">, });‍‍‍‍‍‍‍‍‍‍Bitte beachten Sie die unterschiedliche Verwendung von string indicators im Vergleich zur Standard strings.js Datei im übergeordneten Ordner.Das Widget.html

Das Widget selbst funktioniert ähnlich. Innerhalb des Widget-Ordners erstellen Sie einen nls-Ordner mit Unterordnern für die gewünschten Sprachen, die Sie unterstützen möchten. Eine Liste der unterstützten Sprachen ist hier zu sehen:

Native Language Support

Noch einmal ersetzen wir die in der Originaldatei verwendeten Strings durch das "${nls.xyz}" Schema:

<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>
    <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 >
    <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 > scaleInfoDiv < Span Class = "Punctuation Token ">" </ Span ></ Span >< Span Class = "Punctuation Token "> > </ Span ></ Span > ${nls.label2} < 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 > scaleInfo < 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 >
<Span class="token tag"><Span class="token tag"><Span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span>‍‍‍‍<span class="line-numbers-rows"><span>‍</span><span>‍</span><span>‍</span><span>‍</span></span>

In unserer strings.js Datei setzen wir die Standardstrings:

<span class="token function">define</span><span class="punctuation token">(</span><span class="punctuation token">{</span>
  root<span class="punctuation token">:</span> <span class="punctuation token">(</span><span class="punctuation token">{</span>
    _widgetLabel<span class="punctuation token">:</span> <span class="string token">"Zoom Level Info"</span>
    label1<span class="punctuation token">:</span> <span class="string token">"Zoomstufe:"</span>,
        label2<span class="punctuation token">:</span> <span class="string token">"Ungef. Maßstab:"</span>,
  <span class="punctuation token">}</span>)<span class="punctuation token">,</span>
  <span class="string token">"de"</span>: 1
<span class="punctuation token">}</span>)<span class="punctuation token">;</span>‍‍‍‍‍‍‍‍<span class="line-numbers-rows"><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span></span>

Im Unterordner „de“ verwende ich ein ähnliches Muster wie im obigen Kapitel beschrieben:

define</ span >< span  class =' punctuation  token '>{

Finde mehr Beiträge mit dem Tag

Knowhow

Technologie

Kommentare

There are no comments yet

Nehmen Sie an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registrieren Sie ein kostenloses Konto.

Schnellzugriffe

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