HTML5-Tutorium: JavaScript: Hello World Vue 05

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 3
(zu größeren Teilen überprüft) 		Umfang: 4
(unwichtige Fakten fehlen) 		Quellenangaben: 3
(wichtige Quellen vorhanden) 		Quellenarten: 5
(ausgezeichnet) 		Konformität: 3
(gut)

Vorlesung WebProg

Inhalt | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Vue 1 | Vue 2 | Vue 3 | Vue 4 | Vue 5 | Vue 6

Vorlage:InBearbeitung

Musterlösung
Git-Repository, git checkout v05 (JavaScript)
Git-Repository (TypeScript), git checkout v05

Anwendungsfälle (Use Cases)

Gegenüber dem ersten, zweiten und dritten Teil des Vue-Tutoriums ändern sich die die Anwendungsfälle zunächst nicht. Die Anwendung leistet also genau dasselbe wie zuvor.

Zum Schluss wird die Anwendung allerdings erweitert. Die Begrüßung erfolgt in der vom Browser als Favorit angegebenen Sprache, sofern die Begrüßungsdaten für diese Sprache hinterlegt wurden. Anderenfalls erfolg die Begrüßung ein der Defaultsprache.

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 hello_world_vue und fügen Sie das Package uuid hinzu: 

git checkout v04     # Wechsle in den Branch v04
git checkout -b v05  # Klone v04 in einen neuen Branch v05
npm i

Kofigurationsdateien

Konfigurationsdatei

Die folgende Datei dient zur statischen Konfiguration der Anwendung. Der Inhalt wird in die App fest eingebunden und kann in der laufenden Anwendung ohnen einen Rebuild nicht geändert werden. 

// src/json/config.json

{ "startSection": "question" }

Internationalisierungsdateien

Die folgenden Dateien sollten zu Laufzeit dynamisch, anhängig von der gewünschten Sprache eingelesen werden. Sie dienen der Internationalisierung (internationalization = i..................n = i18n). 

// public/json/i18n_de.json

{ "phrases":
  { "hello": "Hallo, $1!"
  },

  "i18n":
  { "stranger":       "Fremder",
    "askName":        "Wie heißen Sie?",
    "welcome":        "Willkommen zu Web-Programmierung!",
    "buttonReset":    "Reset",
    "buttonSayHello": "Begrüßung"
  }
}

// public/json/i18n_en.json

{ "phrases":
  { "hello": "Hello, $1!"
  },

  "i18n":
  { "stranger":       "Stranger",
    "askName":        "What's your name?",
    "welcome":        "Welcome to Web Programing!",
    "buttonReset":    "reset",
    "buttonSayHello": "say hello"
  }
}

Er können jederzeit I18n-Dateien für weitere Sprachen definiert werden.

Statische JSON-Dateoen (v05)

Initialisierung von SectionStore mit Hilfe einer JSON-Datei

Die JSON-Date section.json wird von StoreSection.js statisch eingelesen, um den zugehörigen Store zu initialisieren. Fügen Sie folgenden Import-Befehl in diese Datei ein: 

import config from '@/json/config.json'

Der statische Import von JSON-Dateien ist im ECMAScript-Standard nicht vorgesehen. Eigentlich müssen JSON-Dateien immer asynchron mit Hilfe spezieller AJAX-Anweisungen geladen werden.

Allerdings ist dieser Befehl in Transcodern wie webpack, vite etc. möglich. Hier wird der Import-Befehl bereits zur „Übersetzungszeit“ und nicht erst zur Laufzeit ausgeführt. Das heißt, der Inhalt der JSON-Datei wird in den erzeugten JavaScript-Code direkt eingefügt.

Nun kann der Name der Start-Section initialisiert werden: 

const
  section = ref(config.startSection),
...

Die Konstante "section" enthält das Objekt, das in der JSON-Datei definiert wurde. In diesem Objekt gibt es das Attribut "name", das den Namen der Start-Section enthält.

Die Initialisierung von StoreSection erfolgt bislang in der Datei HelloWorld.vue. Entfernen Sie nun die zugehörige Zeile: 

section.init('question')

Sie können nun auch noch die Funktion "init" und das zugehörige Interface aus der Datei StoreSection.js entfernen, da die Initialisierung jetzt über JSON erfolgt.

Config

Die Webanwendung soll internationalisiert werden. Dazu muss StoreGreeting.js erweitert werden. 

import config from '@/json/i18n_de.json'

Die Konstante config enthält das Objekt, das in der JSON-Datei definiert wurde. In diesem Objekt gibt es die Attribute "phrases" und i18n, die sprachabhängige Begriffe und Phrasen definieren.

Wie man sieht, sind es viel mehr als bislang verwendet. Entsprechend müssen auch StoreGreeting.js und die Komponenten, die diesen Store verwenden, erweitert werden.

StoreGreeting.js

Die Webanwendung soll internationalisiert werden. Dazu muss StoreGreeting.js erweitert werden 

// src/store/StoreGreeting.js

import { defineStore }                       from 'pinia'
import { reactive, ref, computed, readonly } from 'vue'

import config from '@/json/i18n_de.json'

const storeGreeting =
defineStore
( 'greeting',

  () =>
  { const
    phrases =
      reactive(config.phrases),

    i18n =
      reactive(config.i18n),

    sayHello =
      p_name => phrases.hello.replace('$1', p_name),

    name = ref(''),

    helloStranger =
      computed(() => sayHello(i18n.stranger)),

    hello =
      computed(() => sayHello(name.value))/*,

    askName =
      computed(() => i18n.askName),

    welcome =
      computed(() => i18n.welcome),

    buttonReset =
      computed(() => i18n.buttonReset),  

    buttonSayHello =
      computed(() => i18n.buttonSayHello)
    */

  return { name, helloStranger, hello, i18n: readonly(i18n)
           /*, askName, welcome, buttonReset, buttonSayHello */
         }
  }
)

export default storeGreeting

Die Methoden askName, welcome etc. würden die Verwendung des Stores einfacher machen, blähen aber die Datei stark auf, wenn i18n viele Begriffe enthält.

SectionHello.vue

Die Datei SectionHello.vue muss an die Internationalisierung angepasst werden, indem alle deutschen Wörter und Phrasen ersetzt durch Zugriffe auf den StoreGreeting ersetzt werden. 

<!-- src/section/SectionHello.vue -->

<script setup>
  import storeGreeting from '@/store/StoreGreeting'

  const
    greeting = storeGreeting(),
    i18n     = greeting.i18n
</script>

<template>
  <section>
    <h1>{{greeting.hello}}</h1>
    <p>{{i18n.welcome}}</p>
  </section>
</template>

<style scoped lang="scss">
  @import '/css/section/SectionHello';
</style>

SectionQuestion.vue

Die Datei SectionHello.vue muss auf dieselbe Weise aktualisiert werden. Allerdings benötig man ein paar mehr Konstanten. 

<!-- src/section/SectionQuestion.vue -->

<script setup>
  import storeGreeting from '@/store/StoreGreeting'
  import storeSection  from '@/store/StoreSection'

  const
    greeting = storeGreeting(),
    i18n     = greeting.i18n,
    section  = storeSection(),
    sayHello = () => { section.change('hello') }
</script>

<template>
  ...
</template>

<style scoped lang="scss">
  ...
</style>

Fortsetzung des Tutoriums

Sie sollten nun 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

  1. Kowarschick (WebProg): Wolfgang Kowarschick; Vorlesung „Web-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2024; Quellengüte: 3 (Vorlesung)
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_JavaScript:_Hello_World_Vue_05&oldid=51701“