Quelltext der Seite HTML5-Tutorium: JavaScript: Hello World Vue 06

{{HTML5-Tutorium:JavaScript:HelloWorld:Menü}}

'''Musterlösung'''<br/>
[{{Git-Server}}/kowa/wk_hello_world_vue Git-Repository], <code>git checkout v06</code>, <code>... v06a</code>, <code>... v06b</code>

== Anwendungsfälle (Use Cases) ==
Die Version des [[HTML5-Tutorium:_JavaScript:_Hello_World_Vue_05|fünften Teils des Vue-Tutoriums]]
wird so geändert, dass die Sprache zur Laufzeit geändert werden kann. 

Zunächst wird jedoch eine Navigationskomponente eingeführt. Dies hat den Zweck, das Routing an einem Beispiel zu erklären.

== Aufgabe ==

Aufgabe: Konfigurieren und internationalisieren Sie die Anwendung mit Hilfe von dynamischen JSON-Dateien.

== Erstellen eines neuen Projektzweigs ==

Erstellen Sie einen neuen Projektzweig (branch) innerhalb von <code>hello_world_vue</code> und fügen Sie das Package <code>uuid</code> hinzu:

<source lang="bash">
git checkout v05b     # Wechsle in den Branch v05b
git checkout -b v06  # Klone v05b in einen neuen Branch v06
npm i
npm i vue-router
</source>

=== Views ===

Anstelle von Sections werden Views verwendet.
Dazu werden die Section-Komponenten in den Ordner View verschoben und umbenannt:

<source lang="bash">
src/view/ViewHello.vue
src/view/ViewHome.vue     // an Stelle von ViewForm.vue

src/view/ViewError404.vue // neu
</source>

Die SCSS-Dateien müssen natürlich auch entsprechend verschoben und abgepasst werden.

ViewForm.vue wird in ViewHome.vue unbenannt,
da diese Seite als Startseite verwendet wird.

Zusätzlich wird eine Seite ViewError404.vue angelegt, die immer dann ausgeliefert wird, wenn der Benutzer auf eine URL zugreift, der keine View-Datei zugeordnet ist.

Die SCSS-Dateien sollten analog umbenannt und unter den neuen Namen importiert werden. Für <code>ViewError404.vue</code> muss natürlich auch eine SCSS-Datei angelegt werden. Diese verweist allerdings nur auf <code>_View.scss</code>.

<source lang="html">
<!-- src/view/ViewError404.vue -->

<script setup>
  import router    from '@/router'
  import storeI18n from '@/store/StoreI18n'

  const phrases = storeI18n().phrases
</script>

<template>
  <h1>404</h1>
  <p>{{phrases.pageNotFound.replace('$1', router.currentRoute.value.path)}}</p>
</template>

<style scoped lang="scss">
  @import '/css/view/ViewError404';
</style>
</source>

=== Router-Plugin ===

Um mit Vue Multipage-Anwendungen realisieren zu können, benötigt man einRouter-Plugin.
Dieses muss  zunächst händisch auf Basis von <code>vue-router</code> implementiert werden.

<source lang="ecmascript">
// src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import ViewHome                           from '@/view/ViewHome.vue'

const
  routes =
    [ { path: '/',
        name: 'home',
        component: ViewHome,
      },
      { path: '/hello',
        name: 'hello',
        component: () => import('@/view/ViewHello.vue'),
      },
      { path:      '/:pathMatch(.*)',
        component: () => import('@/view/ViewError404.vue'),
      }
    ],

  router =
    createRouter({ history: createWebHistory(), routes })

export default router
</source>

Nun muss man das neu erstellte Plugin in die App integrieren.

<source lang="ecmascript">
// src/main.js

import { createPinia } from 'pinia'
import { createApp }   from 'vue'
import getJson         from '@/service/getJson'
import router          from './router'  // './router/index.js'
import App             from './App.vue'
const
  pinia   = createPinia(),
  app     = createApp(App),
  init    = async () =>
            { const
                config = await getJson('/json/config.json')
 
              app
                .provide('config', config)
                .use(pinia)
                .use(router)
                .mount('#app') // app is shown to the user
            }

window.addEventListener('load', init)
</source>

=== index.html ===

Da das <code>main</code>-Tag nun innerhalb von <code>App.vue</code> verwendet werden soll, 
wird es aus der Datei <code>index.html</code> entfernt.

<source lang="html">
...
  <body id="app">
  </body>
...
</source>

=== App.vue ===

Nun kann in die App eine Navigation eingebaut werden.

<source lang="html">
<!-- /src/App.vue -->

<script setup>
  import AppNav       from '@/components/AppNav.vue'
  import storeSession from '@/store/StoreSession'
  import storeI18n    from '@/store/StoreI18n'
  
  const session = storeSession()

  storeI18n(), // activate initialization of storeI18n
  session.initialize();
</script>

<template>
  <p      v-if="!session.isInitialized">Loading ...</p>
  <AppNav v-if="session.isInitialized"/>
  <main   v-if="session.isInitialized">
    <router-view/>
  </main>
</template>

<style lang="scss">
  @import '/css/body';
</style>

</source>

Die zugehörige Navigationskomponente muss auch noch implementiert werden.

<source lang="html">
<!-- /src/components/AppNav.vue -->

<script setup>
</script>

<template>
  <nav>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/hello">Hello</router-link></li>
    </ul>
  </nav>
</template>

<style scoped lang="scss">
  @import '/css/components/AppNav';
</style>
</source>

<source lang="css">
/* src/css/_config.scss */
...
$background-color:  #C5EFFC;
$link-color:        #0027d4;
...
$nav-dist:          0.5em;


/* src/css/AppNav.scss */

@import 'config';

nav
{ top:      0;
  width:    100%;
  position: fixed;

  ul
  { list-style-type: none;
    margin: 0 $nav-dist;
    padding: 0;

    li
    { display: inline;
      a { padding: 0 $nav-dist 0.2em; }
    }

    a
    { text-decoration: none;
      color:           $link-color;
      font-weight:     bold;
    }

    a:hover, .router-link-exact-active
    { text-decoration: underline;
      color:           $link-color;
      font-weight:     bold;
    }
  }

  label, input
  { margin: 0;
  }
}
</source>

=== Navigation ===
Die Navigation muss in allen Komponenten, in den Seiten gewechselt werden, angepasst werden.

Das ist in der App.vue der Fall (siehe zuvor) sowie in der ViewHome.vue.

<source lang="html">
<!-- /src/vie/ViewHome.vue  -->

<script setup>
  import FormButton    from '@/components/form/FormButton.vue'
  import FormTextfield from '@/components/form/FormTextfield.vue'

  import storeGreeting from '@/store/StoreGreeting'
  import router        from '@/router'

  const
    session     = storeSession(),
    sayHello    = () => router.push('/hello'),
    
    greeting    = storeGreeting(),
    dictionary  = greeting.dictionary
</script>
</source>

Die Section-Verwaltung der ehemaligen Single-Page-Anwendung kann und sollte gelöscht werden:
* <code>config.js</code>
* <code>storeSession.js</code>
* <code>ViewHome.vue</code>
* <code>ViewHello.vue</code>

Die Datei <code>HelloWorld.vue</code> kann (samt SCSS-Datei) ganz gelöscht werden.

== Hello World Vue 06a ==

Aufgabe: Die Ausgabesprache soll vom Benutzer zur Laufzeit geändert werden können. Die Sprachen sollen durch Bilder (Flaggen) symbolisiert werden.

<source lang="bash">
git checkout v06      # Wechsle in den Branch v06
git checkout -b v06a  # Klone v06 in einen neuen Branch v06a
</source>

=== <code>config.json</code> ===

Um die vorhandenen Sprachen durchblättern zu können, wird ein einfacher Automat verwendet.

<source lang="json">
// src/public/json/config.json

{ "apiRoot":         "/json/i18n_$1.json",
  "XapiRoot":        "/api/$1",
  "defaultLanguage": "en",
  "nextLanguage":    {"de": "en", "en": "de"}
}
</source>

=== StoreI18n.js: Integration von nextLanguage ===

Der Automat <code>nextLanguage</code> wird in den StoreI18n integriert. Wenn die Methode <code>changeLang</code> ohne Argument aufgerufen wird, soll der Automat die aktuelle Sprache <code>lang</code> durch die Nachfolgersprache ersetzen.
Dazu sollte zunächst die zunächst Konstante <code>nextLanguage</code> definiert werden.

<source lang="ecmascript">
...
lang =
  ref(config.defaultLanguage),

nextLanguage =
  reactive(config.nextLanguage),

...
</source>

Diese neue Konstante wird verwendet, um die Sprache mittels <code>changeLang</code> zu definieren, sofern
kein Argument übergeben wurde.

<source lang="ecmascript">
changeLang =
  async (p_lang = null) =>
        { lang.value = p_lang ?? nextLanguage[lang.value];
          await getI18n(lang.value);
        }

initialize = 
  async resolve => 
  { await changeLang(lang.value); 
    resolve(); 
  }
</source>

=== Bilder von Flaggen ===

Zur Visualisierung der gewählten Sprache werden Bilder von Flaggen eingesetzt.
Wir kopieren die Bilder im SVG-Format aus dem NPM-Paket "https://github.com/lipis/flag-icon-css".

<source lang="bash">
npm i -D flag-icon-css
</source>

Im Ordner "node_modules/flag-icon-css/flags/4x3" finden Sie Flaggen zahlreicher Länder im 4-zu-3-Format.
Kopieren Sie die Flaggen der Länder Deutschland, Großbritanien und Frankreich in den Ordner <code>public/img</code>.

In die Datei config.js wird der Pfad, unter dem die Bilder zu finden sind, eingefügt.

<source lang="ecmascript">
//   public/config.js
...
  "apiRoot":  "/json/i18n_$1.json",
  "imgPath":  "/img/$1.svg",
  "XapiRoot": "/api/$1",
  "XimgPath": "/api/$1/img",
...
</source>

=== <code>FormButtonIcon</code> ===

Eine neue Komponente wird benötigt: FormButtonIcon
Dabei handelt es sich um einen Button, der ein Icon anzeigt.
Das Bild kann zur Laufzeit geändert werden.

<source lang="ecmascript">
<script setup>
  import { computed, inject } from 'vue'

  const
    props       = defineProps
                  ({ image: { type: String },
                     width: { type: String, default: '3em'},
                  }),
    config      = inject('config'),
    emit        = defineEmits(['click']),
    click       = () => emit('click'),
    require     = v_url => import.meta.url == null
                           ? v_url
                           : new URL(v_url, import.meta.url).href,
    imgPath     = config.imgPath,
    buttonImage = computed(() => require(imgPath.replace('$1', props.image)))
</script>

<template>
  <input type="image" :src="buttonImage" :style="{width}" @click="click" />
</template>

<style scoped lang="scss">
  @import '/css/components/form/FormButtonIcon.scss';
</style>
</source>

<source lang="ecmascript">
/* src/css/components/FormButtonIcon.scss */

@import 'FormButton';

input
{ width:       $button_icon_width !important;
  margin-left: $nav-dist          !important;
}
</source>

Fügen Sie in <code>src/css/_config.scss</code> noch 

<source lang="ecmascript">
$button-icon-width: 1em;
</source>

ein.

=== Erweiterung von <code>AppNav.vue</code> ===

Der Sprachwahl-Button muss noch in die Navigation eingebaut werden.

<source lang="html">
<!-- src/components/AppNav -->

<script setup>
  import FormButtonIcon from '@/components/form/FormButtonIcon.vue'
  import storeI18n      from '@/store/StoreI18n'
  const i18n = storeI18n()
</script>

<template>
  <nav>
    <ul>
      <li><router-link to="/">Home</router-link></li>
      <li><router-link to="/hello">Hello</router-link></li>
      <li><FormButtonIcon :image="i18n.lang" @click="i18n.changeLang()"/></li>
    </ul>
  </nav>
</template>

<style scoped lang="scss">
  @import '/css/components/AppNav';
</style>
</source>

== Hello World Vue 06b ==

Aufgabe: Defaultmäßig soll dem Benutzer die App in der Sprache abgezeigt werden, die der Benutzer
im Browser voreingestellt hat. Sollte die voreingestellte Sprache nicht unterstütz werden, wird die App in der Defaultsprache angezeigt.

Legen Sie zunächst wieder einen neuen Branch an.

<source lang="bash">
git checkout v06a     # Wechsle in den Branch v06a
git checkout -b v06b  # Klone v06a in einen neuen Branch v06b
</source>

Das Vorgehen ist im Prinzip ganz einfach.

Mittels des NPM-Packets "navigator-languages" ermittelt man die vom Browser unterstützten
Sprachen.  In der Konfigurationsdatei listet man die Sprachen auf, die von der App unterstütz werden.
Besser wäre es natürlich, diese Liste vom Backend zu laden, damit die App mit bekommt, wenn neue
Sprachen zur Verfügung stehen. Am aufwändigsten ist es, diese beiden Array zu matchen.

Mögliche Erweiterung: Auch die HTML-Pfade sollten internationalisiert werden.

<source lang="bash">
npm i navigator-languages // unterstützt mehrere Browservarianten
</source>

=== Language Matching ===

Das Language Matching erfolgt zweimal mit zwei verschachtelten Schleifen.
Zunächst wird überprüft, ob es exakte Übereinstimmungen gibt. Sollte das nicht der Fall sein, wird überprüft, ob es Matches zwischen den ersten beiden Buchstaben gibt ('de', 'de-AT', 'de-DE' matchen in diesem Schritt alle miteinander).

<source lang="ecmascript">
// src/util/chooseLanguage.js

const
  chooseLanguage =
  (langsAvailable, langsNavigator) =>
  { let
      lang = langsAvailable[0],
      i=0, j=0, n=langsNavigator.length, m=langsAvailable.length
  
    outer:
    { while (i<n)
      { const langNavigator = langsNavigator[i]
        while (j<m)
        { const langAvailable = langsAvailable[j]
          if (langAvailable === langNavigator)
          // both languages match perfectly
          { lang = langAvailable;
            break outer;
          }
          j++
        }
        i++
      }
      i=0, j=0
      while (i<n)
      { const langNavigator = langsNavigator[i]
        while (j<m)
        { const langAvailable = langsAvailable[j]
          if (langAvailable.substring(0,2) === langNavigator.substring(0,2))
          // main part of the languages match
          { lang = langAvailable;
            break outer;
          }
          j++
        }
        i++
      }
    }
 
    return lang
  }

export default chooseLanguage
</source>

=== <code>config.js</code> ===

Das Attribut <code>defaultLanguage</code> wird durch das Attribut <code>languages</code> ersetzt.

<source lang="ecmascript">
{ "apiRoot":      "/json/i18n_$1.json",
  "imgPath":      "/img/$1.svg",
  "XapiRoot":     "/api/$1",
  "XimgPath":     "/api/$1/img",
  "languages":    ["de", "en"],
  "nextLanguage": {"de": "en", "en": "de"}
}
</source>

=== <code>main.js</code> ===

<source lang="ecmascript">
import { createPinia }    from 'pinia'
import { createApp }      from 'vue'
import getJson            from '@/service/getJson'
import router             from './router'
import App                from './App.vue'
import navigatorLanguages from 'navigator-languages'
import chooseLanguage     from './util/chooseLanguage'

const
  pinia = createPinia(),
  app   = createApp(App),
  init  = async () =>
          { const
              config = await getJson('/json/config.json'),
              lang   = chooseLanguage(config.languages, navigatorLanguages()),
              url    = config.apiRoot.replace('$1', lang)

            config.defaultLanguage = lang
            config.i18n = await getJson(url)

            app
              .provide('config', config)
              .use(pinia)
              .use(router)
              .mount('#app') // app is shown to the user
          }

window.addEventListener('load', init)
</source>

== Hello World Vue 06c ==

Aufgabe: Sorgen Sie dafür, dass die unterstützten Sprachen und der Sprach-Automat vom Backend
geladen wird.

<source lang="bash">
git checkout v06b     # Wechsle in den Branch v06b
git checkout -b v06c  # Klone v06b in einen neuen Branch v06c
</source>

Splitten Sie die Config-Datei zunächst in zwei Teile: "config.json" wird aus dem Public-Ordner geladen.
"config_backend.json" wird normalerweise vom Backend geladen, kann aber zum Entwicklungszeitpunkt auch vom Public-Ordner geladen werden, wenn das Backend noch nicht stabil läuft.

<source lang="json">
// src/public/json/config.json

{ "XapiRoot":       "/api/$1",
  "XconfigBackend": "/api/config",
  "XimgPath":       "/api/$1/img",
  "apiRoot":        "/json/i18n_$1.json",
  "configBackend":  "/json/config_backend.json",
  "imgPath":        "/img/$1.svg"
}
</source>

<source lang="json">
// src/public/json/config_backend.json

{ "languages":    ["de", "en"],
  "nextLanguage": {"de": "en", "en": "de"}
}
</source>

Das Backend teilt dem Frontend mit, welche Sprachen unterstützt werden.

=== <code>main.js</code> ===

Laden Sie, nachdem Sie "config" asynchron geladen haben, "configBackend" asynchron und kopieren Sie den Inhalt dieses Objekts in das Config-Objekt. Den Pfad von "configBackend" finden Sie unter "config.configBackend".

<source lang="ecmascript">
...
const
  ...
  init  = async () =>
          { const
              config        = await getJson('/json/config.json'),
              configBackend = await getJson(config.configBackend),
              lang   = chooseLanguage(configBackend.languages, navigatorLanguages()),
              url    = config.apiRoot.replace('$1', lang)

            // Insert config information from the backend into the config object loaded locally
            Object.assign(config, configBackend)
            config.defaultLanguage = lang
            config.i18n = await getJson(url)
</source>

Ein kleiner Hack, um die korrekte Sprache in das HTML-Tag der Datei "index.html" einzufügen. Fügen Sie am Ende des obigen Codes noch die folgende Zeile ein. Diese Verbesserung hätte man eigentlich schon in v05a einbauen sollen.

<source lang="ecmascript">
document.getElementsByTagName('html')[0].lang = lang
</source>

Damit wird im Document Tree der Datei "index.html" die aktuelle Sprache eingetragen:

<source lang="html">
<html lang="de">
<html lang="en">
</source>

=== <code>storeI18n.js</code> ===

Die Datei "index.html" sollte bei jeder Änderung der Sprache angepasst werden.

<source lang="json">
...
changeLang =
  async (p_lang = null) =>
        { lang.value = p_lang ?? nextLanguage[lang.value];
          await getI18n(lang.value);
          // a little hack
          document.getElementsByTagName('html')[0].lang = lang.value
        }
...
</source>

<!--
== Fortsetzung des Tutoriums ==

Sie sollten nun [[HTML5-Tutorium: JavaScript: Hello World Vue 06|Teil 6 des Vue-Tutoriums]] bearbeiten.
In diesem Tutorium setzen Sie Routing ein, auch wenn das für die Hello-World-Anwendung nicht sonderlich sinnvoll ist.
-->

==Quellen==
<!--references/-->
<ol>
<li value="1"> {{Quelle|Kowarschick, W.: Web-Programmierung}}</li>
</ol>
<noinclude>[[Kategorie: HTML5-Tutorium: JavaScript: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]</noinclude>
<!--
→ <code></code> „<code></code>“
-->