Un exemple de mise en place

Ce chapitre décrit la construction de la page de login standard

Ajout de la libraire

Afin d'instancier les composants graphiques d'Anakeen Platform, il vous faut ajouter la librairie @anakeen/user-interfaces à votre projet avec npm. Soit :

npm install @anakeen/user-interfaces

WARNING

Le dépôt @anakeen est privé et doit être instancié au niveau de npm

Mise en place du code

Dès lors, vous pouvez importer votre composant de la manière suivante:

import myComponent from "@anakeen/user-interfaces/components/lib/myComponent";

Soit dans un fichier ".vue" :

<template>
  <myComponent ref="myComponent" :parameter1="value" ...></myComponent>
</template>

Vous aurez accès aux différentes méthodes du composant en utilisant sa référence :

    public myFunction() {
      this.$refs.myComponent.myComponentMethod(...args);
    }

Exemple: Page de login

LoginPage.vue

Le fichier vue utilisé est le suivant :

<template>
  <div class="login-parent">
    <div class="login-banner">
      <img class="imgbanner" src="/CORE/Images/anakeen-logo.svg" alt="Anakeen logo" />
    </div>
    <div class="login-form">
      <ank-authent ref="authent" default-language="auto" authent-languages="fr_FR, en_US"></ank-authent>
    </div>
  </div>
</template>
<script>
  import AnkAuthent from "@anakeen/user-interfaces/components/lib/AnkAuthent";

  export default{
    components: {
      "ank-authent": AnkAuthent
    }
    mounted() {
      console.log(this.$refs.authent.availableLanguage());
    }
  }
</script>
<style lang="scss">
  .login-parent {
    height: 100%;
  }
  .login-page {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #f5f5f5;
    .login-banner {
      border-radius: 5px;
    }
    .imgbanner {
      height: 8rem;
    }
    .login-form {
      min-width: 30rem;
    }
</style>

LoginPage.xml

Le fichier XML de configuration de route est le suivant :

<?xml version="1.0"?>
<sde:config xmlns:sde="https://platform.anakeen.com/4/schemas/sde/1.0">
    <sde:routes namespace="Ui:Component:Authent">
        <sde:route name="Login">
            <sde:priority>1</sde:priority>
            <sde:callable>Anakeen\Components\Authent\Routes\LoginPage</sde:callable>
            <sde:method>GET</sde:method>
            <sde:pattern>/login/</sde:pattern>
            <sde:description>Login page</sde:description>
            <sde:requiredAccess/>
            <sde:authenticated>false</sde:authenticated>
        </sde:route>
    </sde:routes>
</sde:config>

LoginPage.php

La classe PHP de route :

<?php

namespace Anakeen\Components\Authent\Routes;

use Anakeen\Core\ContextManager;
use Anakeen\Core\Utils\Gettext;
use Psr\Http\Message\ResponseInterface as Response;
use Psr\Http\Message\ServerRequestInterface as Request;

class LoginPage
{
  public function __invoke(Request $request, Response $response, $args)
  {
    $page = __DIR__ . "/LoginPage.html.mustache";
    $template = file_get_contents($page);
    $data = [
      "title" => sprintf(
        Gettext::___("Connexion to %s", "login"),
        ContextManager::getParameterValue(\Anakeen\Core\Settings::NsSde, "CORE_CLIENT")
      ),
      "JS_DEPS" => [
        [
          "key" => "polyfill",
          "path" => \Anakeen\Ui\UIGetAssetPath::getJsPolyfill(),
          "noModule" => true
        ],
        [
          "key" => "kendo",
          "path" => \Anakeen\Ui\UIGetAssetPath::getJSKendoPath()
        ],
        [
          "key" => "kendoDLL",
          "path" => \Anakeen\Ui\UIGetAssetPath::getJSKendoComponentPath()
        ],
        [
          "key" => "vueDll",
          "path" => \Anakeen\Ui\UIGetAssetPath::getJSVueComponentPath()
        ]
      ],
      "JS" => [
        [
          "key" => "login",
          "path" => \Anakeen\Ui\UIGetAssetPath::getElementAssets(
            "ank-components",
            \Anakeen\Ui\UIGetAssetPath::isInDebug() ? "dev" : "prod"
          )["login"]["js"]
        ]
      ],
      "JS_LEGACY" => [
        [
          "key" => "login",
          "path" => \Anakeen\Ui\UIGetAssetPath::getElementAssets(
            "ank-components",
            \Anakeen\Ui\UIGetAssetPath::isInDebug() ? "dev" : "legacy"
          )["login"]["js"]
        ]
      ],
      "CSS" => [
        [
          "key" => "bootstrap",
          "path" => \Anakeen\Ui\UIGetAssetPath::getCssBootstrap()
        ],
        [
          "key" => "kendo",
          "path" => \Anakeen\Ui\UIGetAssetPath::getCssKendo()
        ],
        [
          "key" => "components",
          "path" => \Anakeen\Ui\UIGetAssetPath::getCssSmartWebComponents()
        ]
      ]
    ];
    $mustache = new \Mustache_Engine();

    return $response->write($mustache->render($template, $data));
  }
}

LoginPage.html.mustache

<!doctype html>
<html lang="en">
<head>
    <title>{{title}}</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    {{#CSS}}
    <link rel="stylesheet" type="text/css" data-id="{{key}}" href="{{path}}"/>
    {{/CSS}}
    {{#JS_DEPS}}
    <script type="text/javascript" {{#noModule}}nomodule{{/noModule}} data-id="{{key}}" src="{{path}}"></script>
    {{/JS_DEPS}}
    {{#JS}}
    <script type="module" data-id="{{key}}" src="{{path}}"></script>
    {{/JS}}

</head>
<body class="login-page">

<div id="login"></div>

{{#JS_LEGACY}} <script nomodule data-id="{{key}}" src="{{path}}"></script> {{/JS_LEGACY}}

</body>
</html>

LoginPage.js

Ce fichier doit être compilé avec un packager (voir la documentation de vueJS).

import Vue from "vue";
import Login from "./LoginPage.vue";

Vue.use(LoadScript);

new Vue({
  el: "#login",
  components: {
    Login
  },
  template: "<login></login>"
});