Overview

Linked data applications are particularly well-suited for multilingual data portals. Below are three multilingual templates from the Callimachus Meeting Notes Tutorial which have been modified to show a best practice for managing multilingual data.

journal-create

Description

When a new Journal is created the jQuery function highlighted below sets the lang attribute of the comment field to the language of the user’s browser.

Source Code

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="/callimachus/template.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#">
<head>
    <title>New Journal / Nouvelle Revue</title>
    <style type="text/css">
        .fr :lang(en) { display: none; }
        .en :lang(fr) { display: none; }
    </style>
    <script type="text/javascript">
    (function($){
        var language = window.navigator.language || window.navigator.userLanguage;
        var lang = language.toLowerCase().replace(/-.*/,'');
        document.documentElement.className += ' ' + lang;
        jQuery(function($) {
            $('#comment').attr('lang', lang); 
        });
    })(jQuery);
    </script>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h1 lang="en">New journal</h1>
            <h1 lang="fr">Nouvelle revue</h1>
        </div>
        <form method="POST" action="" enctype="application/rdf+xml" typeof="" onsubmit="return calli.saveResourceAs(event, calli.slugify($('#label').val()))">
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="label" lang="en">Label</label>
                        <label for="label" lang="fr">Étiquette</label>
                        <input type="text" id="label" value="{rdfs:label}" class="form-control" required="required" autofocus="autofocus" />
                    </div>
                    <div class="form-group">
                        <label for="comment" lang="en">Comment</label>
                        <label for="comment" lang="fr">Commentaire</label>
                        <textarea id="comment" class="form-control">{rdfs:comment}</textarea>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <button type="submit" class="btn btn-success" lang="en">Create</button>
                        <button type="submit" class="btn btn-success" lang="fr">Créer</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

journal-edit

Description

The jQuery function loops through each value of the language attribute and hides comments which are not in the default language for the browser. If there is no comments field it adds one.

Source Code

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="/callimachus/template.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#">
<head>
    <title resource="?this">{rdfs:label}</title>
    <style type="text/css">
        .fr :lang(en) { display: none; }
        .en :lang(fr) { display: none; }
    </style>
    <script type="text/javascript">
    (function($){
        var language = window.navigator.language || window.navigator.userLanguage;
        var lang = language.toLowerCase().replace(/-.*/,'');
        document.documentElement.className += ' ' + lang;
        jQuery(function($) {
            if (!$('#comments textarea:visible').length) {
                calli.addResource({}, '#comments');
            }
        });
       window.changeLangIfModified = function(input) {
           if(input.value != $(input).text()){
               $(input).attr('lang', lang);
               $(input).text(input.value);
           }
       };
    })(jQuery);
    </script>
</head>
<body resource="?this">
    <div class="container">
        <div class="page-header">
            <h1 property="rdfs:label" />
        </div>
        <form method="POST" action="" enctype="application/sparql-update" resource="?this">
            <div class="row">
                <div class="col-sm-4">
                    <div class="form-group">
                        <label for="label" lang="en">Label</label>
                        <label for="label" lang="fr">Étiquette</label>
                        <input type="text" id="label" value="{rdfs:label}" class="form-control" required="required" />
                    </div>
                    <div class="form-group">
                        <label for="comment" lang="en">Comment</label>
                        <label for="comment" lang="fr">Commentaire</label>
                        <div id="comments">
                            <textarea id="comment" class="form-control" property="rdfs:comment"
                                onchange="window.changeLangIfModified(this)"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary" lang="en">Save</button>
                        <button type="submit" class="btn btn-primary" lang="fr">Enregistrer</button>
                        <button type="button" onclick="window.location.replace('?view')" class="btn btn-default" lang="en">Cancel</button>
                        <button type="button" onclick="window.location.replace('?view')" class="btn btn-default" lang="fr">Annuler</button>
                        <button type="button" onclick="calli.deleteResource(event)" class="btn btn-danger" lang="en">Delete</button>
                        <button type="button" onclick="calli.deleteResource(event)" class="btn btn-danger" lang="fr">Supprimer</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

journal-view

Description

The jQuery function loops through each value of the language attribute and hides comments which are not in the default language for the browser.

Source Code

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="/callimachus/template.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
    xmlns:dcterms="http://purl.org/dc/terms/">
<head>
    <title resource="?this">{rdfs:label}</title>
    <style type="text/css">
        .fr :lang(en) { display: none; }
        .en :lang(fr) { display: none; }
    </style>
    <script type="text/javascript">
    (function($){
        var language = window.navigator.language || window.navigator.userLanguage;
        var lang = language.toLowerCase().replace(/-.*/,'');
        document.documentElement.className += ' ' + lang;
    })(jQuery);
    </script>
</head>
<body resource="?this">
    <div class="container">
        <div class="page-header">
            <h1 property="rdfs:label" />
        </div>
        <div class="row">
            <div class="col-sm-8">
                <pre class="wiki" property="rdfs:comment" />
                <ul>
                    <li rev="dcterms:isPartOf" resource="?note">
                        <a href="?note">
                            <time property="dcterms:date" />
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-4">
                <aside class="well well-sm">
                    <p class="lead">
                        <a resource="Note" href="Note?create" onclick="href='?create='+encodeURIComponent(getAttribute('resource'))" lang="en">Create a new note</a>
                        <a resource="Note" href="Note?create" onclick="href='?create='+encodeURIComponent(getAttribute('resource'))" lang="fr">Créer une nouvelle Note</a>
                    </p>
                </aside>
            </div>
        </div>
    </div>
</body>
</html>