Lokalizace v PHP

Jak psát vícejazyčné aplikace v PHP? PHP disponuje prostředky pro použití lokalizačních souborů. Zdrojový předpis pro lokalizované popisky pro různé jazyky jsou v .po souboru:  

Obsah messages.po
  

################################################################
# Hlavní stránka
################################################################
msgid "Main Page"
msgstr "Hlavní stránka"

################################################################
# Navbar
################################################################
msgid "Current Time"
msgstr "Aktuální čas"

msgid "Logout"
msgstr "Odhlásit"

Tento textový soubor je potřeba převést do binárního .mo tvaru:

msgfmt messsages.po -o messages.mo 

 pozn. msgfmt je součástí gettext na unixu. Pro Windows nainstalujte Cygwin jehož součástí je i msgfmt nebo je možné použít například POEDIT (https://poedit.net/).



Inicializace localizace je v PHP následující:
 

function initialize_i18n($locale) {
 $locales_root = $_SERVER['DOCUMENT_ROOT'] . "/locale";
 putenv('LANG='.$locale);
 setlocale(LC_ALL,$locale);
 if ( ! defined( 'LC_MESSAGES' ) ) {
  define( 'LC_MESSAGES', 5 );
 }
 setlocale(LC_MESSAGES,$locale);
 setlocale(LC_CTYPE,$locale);
 $current='messages';
 bindtextdomain($current,$locales_root);
 textdomain($current);
}

initialize_i18n('cs_CZ');

Inicializace určuje umístění lokalizačních souborů .po a .mo do adresáře /locale. Tento adresář pak obsahuje podadresáře podle lokalizací:

/locale
  /cs_CZ
    /LC_MESSAGES
      messages.po
      messages.mo
  /en_US
    /LC_MESSAGES
      messages.po
      messages.mo

V PHP kódu pak použít funkci _ s parametrem dohledávaného klíče (pokud klíč není v messages.mo nalezen, zobrazí se vlastní klíč).

Fragment PHP kódu:

<a class='navbar-brand' href='#'>"<%php echo _('Main Page') %>"</a>

Pozor na Cross-Origin Resource Sharing (CORS)

Pokud v Javascriptu voláte nějaký zdroj na serveru, ze kterého nepochází váš Javascript. Například voláte z Javascriptu v browseru nějakou REST službu na jiném serveru, musí hlavičky přesně odpovídat CORS. Jinak se na službu nedovoláte.
V některých případech odešle dokonce browser nejprve ověřovací OPTION dotaz, kterým si u serveru ověří, zda může request odeslat viz:

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Jak provést redirect v Butotn onClick handleru

React router posílá do komponenty property history, kterou lze použít pro provedení přesměrování na další stránku.

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
import {withRouter} from 'react-router-dom';


class Home extends Component {

    doRedirect = () => {
        this.props.history.push('/next_page');    }

    render() {
         return (
                          <Button onClick={this.doRedirect} >
                            Klikni pro přesměrování
                          </Button>
        );
    }
}

export default Home;

pokud je potřeba do handleru poslat i nějaká data, lze takto:

    doRedirect = (id) => {
        this.props.history.push('/next_page/'+id);    }


    render() {
         return (
                          <Button onClick={(e) => this.doRedirect("12345",e)} >
                            Klikni pro přesměrování
                          </Button>
        );

nebo zjednodušeně:

    render() {
         return (
                          <Button onClick={() => this.doRedirect("12345")} >
                            Klikni pro přesměrování
                          </Button>
        );

Jak propagovat custom properites do komponenty v případě použití react-router

Namísto původní route, která používá compoent atribut
 <Route path="/" compoent={Home} />

použít atribut render a předat custom properties k původním, které používá vlastní Router:

<Route path="/" render={props => <Home runSection={actions.runSectionCall} getUnitStatus={actions.getUnitStatusCall} {...props} />} />

Kde nastavit komponmentu z výsledku REST volání v React?

Ideální pro provolání REST API a nastavení stavu komponenty podle výsledku volání je hook (nebo jinak Lifecycle method) metoda componentDidMount. V době, kdy React framework zavolá tuto metodu je již připravený DOM a existuje také state, do kterého zaznamenáme výsledek REST volání.

Jak nastavit title a favicon v React

Jednoduché použití s react-helmet

Pomocí npm naistalujte react-helmet

npm install --save react-helmet

Do úvodu v App.js vložte

import {Helmet} from 'react-helmet'; 
import favicon from '../img/favicon.ico';

V render() stránky pak uveďte:

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="icon" href={favicon} />
            </Helmet>
            ...
        </div>
    );
  }
};

Jak vložit obrázek v React

Přímý odkaz v React nebude fungovat. Obrázek je nunto vložit pomocí importu.

import logoImage from '../img/logoMain.gif';

a pak se na něj odkázat v React komponentě Image:

<Image src={logoImage} />