celtic34fr/graphic-object-templating

build and react with your HTML5 pages throu objects library

Maintainers

Details

github.com/celtic34fr/graphic-object-templating

Homepage

Source

Issues

Installs: 137

Dependents: 1

Suggesters: 0

Security: 0

Stars: 0

Watchers: 4

Forks: 0

Open Issues: 3

0.2.0 2020-10-09 22:12 UTC

Requires

GPL-3.0-or-later 3d68a4f78e4e87f87a67feedfd33107c18b20547

  • Gilbert ARMENGAUD <gilbert.armengaud.woop@gmail.com>

twigzf2

This package is auto-updated.

Last update: 2024-11-25 23:44:43 UTC

README

Graphic Object Templating

!!!! ATTENTION !!!

This version is being reorganized - redesign, the documentation may not be quite up to date. If you got problems do not hesitate to contact me: Gilbert ARMENGAUD <gilbert.armengaud@gmail.com>

Introduction

Graphic Object Templating (GOT) est un framework pour construire des pages HTML5 avec des objets. Il permet aussi d'en gérer les inter-actions induites. GOT s'appuie sur la sémentique HTML5 qu'il transforme en objet. Par ces derniers, il vise à faciliter la création et gestion de page inter et intranet.

Les objets que met en oeuvre GOT, sont de 2 types :

  • les objets de type contenu : présente, aide à l'aciquisition de données,
  • les objets de type contenant : aide à l'organisation de la page et à la présention des informations à travers d'autres objets quelqu'en soit le type

Installation

par composer, dans un shell à la racine de votre projet

composer require celtic34fr/graphic-object-templating

Puis, tapez les commandes suivantes:

cd public

Unix:

ln -s ../vendor/celtic34fr/graphic-object-templating/GraphicObjectTemplating/public ./graphicobjecttemplating

Windows:

mklink .\graphicobjecttemplating ..\vendor\celtic34fr\graphic-object-templating\GraphicObjectTemplating\public

Ceci permet de mettre en oeuvre les liens vers les resources CSS et JS utiles à GOT.

Il faut ajouter dans votre modèle 'layout.html.twig' les lignes suivantes pour permettre les appels Ajax utile à G.O.T. dans le bloc head :

<link href="{{ basePath() }}/graphicobjecttemplating/gotMain/css/main.css" media="screen" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/1.0.2/awesome-bootstrap-checkbox.min.css"
    media="screen" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" media="screen"
    rel="stylesheet" type="text/css">
<script type="text/javascript" src="{{ basePath() }}/graphicobjecttemplating/gotMain/js/main.js"></script>

Et il faut ajouter les deux lignes suivantes au début du bloc body

<div id="gotCallback" style="display: none;">{{ url("got-callback") }}</div>
<div id="divWork" style="display: none"></div>

puis on doit activer les modules dans le fichier configapplication.config.php :

'ZfcTwig',
'GraphicObjectTemplating',

Dans le répertoire /view/templates de remplacement se trouve les templates de substitutions à ceux existant dans le répertoire view du module Application. Après les avoir copiés dans les répertoires respectif, ilm vous faudra modifier le fichier de configuration dui module Application :

::
'template_map' => array(
'layout/layout' => __DIR__ . '/../view/layout/layout.html.twig', 'application/index/index' => __DIR__ . '/../view/application/index/index.html.twig', 'error/404' => __DIR__ . '/../view/error/404.html.twig', 'error/index' => __DIR__ . '/../view/error/index.html.twig',

),

Vous y trouverai également le fichier zfctwig.local.php que vous devrez copier dans le dopssier config/autoload de votre projet.

!!!! ATTENTION !!!

Cette version est en cours de réoganisation - refonte, la documentation n'est peut être pas tout à fait à jour. En cas de problème n'hésitez pas à me contacter : Gilbert ARMENGAUD <gilbert.armengaud@gmail.com>

Utilisation

pour utiliser GOT, il faut en premier lieux, utiliser ces objets pour créer page ou section, article de page. Puis, il s'offre à vous 2 manières de générer les pages HTML5 de vos sites, applications :

  • avec le service 'graphic-object-templating-services',
  • avec des ViewHelpers dans vos templates de pages.

Objets actuellement disponibles

  • ODButton : bouton (avec exécution de méthode [callback] possible)
  • ODContent : objet pour affichage de contenu non typé
  • ODInput : zone de saisie standart [pris en charge : texte (text), caché (hidden) et mot de passe (password)]
  • OSDiv : section non typé de page html

En cours de développement :

  • ODSelect : liste déroulante (HTML ou jQuery Select2)
  • ODCheckbox : case à cocher
  • ODNotification : affichage de message à l'écran (façon Windows 8)
  • ODTable : objet balise HTML <table></table>
  • ODBadge : badge de couleur contenant texte ou chiffre