7.1 Structure HTML des éléments de Dynacase Document UIs

La DOM des éléments générs par Dynacase Document UIS est normalisée selon les règles suivantes.

7.1.1 Le document

La page globale d'un document HTML standard contient la structure suivante :

<html>
    <head>...</head>
    <body>
        <div class="document">
            <div class="dcpDocument">
                <header class="dcpDocument__header">L'entête de document</header>
                <nav class="dcpDocument__menu">La barre de menu</nav>
                <section class="dcpDocument__body">Le corps du document</section>
                <footer class="dcpDocument__footer">Le pied de document</footer>
            </div>
        </div>
    </body>
</html>

Exemple : mettre un fond noir sur la page

.dcpDocument {
    background-color: black;
}
.dcpDocument .dcpDocument__header,
.dcpDocument .dcpDocument__menu,
.dcpDocument .dcpDocument__body,
.dcpDocument .dcpDocument__footer
{
    background-color: inherit;
}

En fonction du mode de rendu (consultation, modification, création), une classe de style supplémentaire est ajoutée sur la div <div class="dcpDocument">.

consultation : <div class="dcpDocument dcpDocument--view">
modification : <div class="dcpDocument dcpDocument--edit">,
création : <div class="dcpDocument dcpDocument--edit dcpDocument--create">.

Cette balise contient aussi une classe dcpFamily--[familyName] qui permet de différencier les documents par famille. familyName contient le nom logique de la famille.

Exemple : <div class="dcpDocument dcpDocument--view dcpFamily--MY_FAMILY"></div>

En outre, une classe est ajoutée si le navigateur supporte les événements tactiles :

<div class="dcpDocument dcpTouch">

7.1.2 Le contenu DOM du corps de document

Le contenu de rendu d'un document est inséré dans une section .dcpDocument__body.

L'exemple ci-dessous représente un document ayant la structure suivante :

frame f1
- text a2
- int a3
- array array1
  - text a5
  - docid a6
tab t1
- frame f2
  - ...
- frame f3
  - ...
tab t2
- frame f4
  - ...
- frame f5
  - ...

<section class="dcpDocument__body">
    <div class="dcpDocument__frames">
        <div class="dcpFrame" data-attrid="f1">
            <div class="dcpFrame__label dcpLabel" data-attrid="f1">
                Label du cadre
            </div>
            <div class="dcpFrame__content" data-attrid="f1" >
                <div class="dcpAttribute dcpAttribute--type--text" data-attrid="a2" >
                    <label class="dcpAttribute__label dcpLabel dcpAttribute__label--text " data-attrid="a2">
                        Label de l'attribut
                    </label>
                    <div class="dcpAttribute__content dcpAttribute__content--text" data-attrid="a2">
                        Valeur de l'attribut
                    </div>
                </div>
                <div class="dcpAttribute dcpAttribute--type--int" data-attrid="a3">
                    <label class="dcpAttribute__label dcpLabel dcpAttribute__label--int" data-attrid="a3">
                        Label d'un autre attribut
                    </label>
                    <div class="dcpAttribute__content dcpAttribute__content--int" data-attrid="a3">
                        Valeur d'un autre attribut
                    </div>
                </div>
                <div class="dcpArray" data-attrid="array1">
                    <div class="dcpArray__label dcpLabel" data-attrid="array1">
                        Label du tableau
                    </div>
                    <div class="dcpArray__content" data-attrid="array1">
                        <table>
                            <thead class"dcpArray__head" data-attrid="array1">
                                <tr>
                                    <th class="dcpArray__head__cell dcpLabel dcpAttribute__label--text " data-attrid="a5">
                                        Label d'un attribut
                                    </th>
                                    <th class="dcpArray__head__cell dcpLabel dcpAttribute__label--docid " data-attrid="a6">
                                        Label d'un autre attribut
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="dcpArray__body" data-attrid="array1">
                                <tr class="dcpArray__content__line" data-attrid="array1" data-line="0">
                                    <td class="dcpAttribute__content dcpAttribute__label--text" data-attrid="a5">
                                        Valeur d'un attribut
                                    </td>
                                    <td class="dcpAttribute__content dcpAttribute__label--docid" data-attrid="a6">
                                        Valeur d'un autre attribut
                                    </td>
                                </tr>
                                <tr class="dcpArray__content__line" data-attrid="array1" data-line="1">
                                    <td class="dcpAttribute__content dcpAttribute__label--text" data-attrid="a5">
                                        Valeur d'un attribut
                                    </td>
                                    <td class="dcpAttribute__content dcpAttribute__label--docid" data-attrid="a6">
                                        Valeur d'un autre attribut
                                    </td>
                                </tr>
                            </tbody>
                       </table>
                   </div>
                </div>
            </div>
        </div>
    </div>
    <div class="dcpDocument__tabs">
        <ul class="dcpDocument__tabs__list">
            <li class="dcpTab__label dcpLabel dcpLabel--active" data-attrid="t1">
                Label de l'onglet
            </li>
            <li class="dcpTab__label dcpLabel dcpLabel--default" data-attrid="t2">
                Label de l'onglet
            </li>
        </ul>
        <div class="dcpTab__content" data-attrid="t1">
            <div class="dcpFrame" data-attrid="f2">
                Contenu d'un cadre…
            </div>
            <div class="dcpFrame" data-attrid="f3">
                Contenu d'un autre cadre…
            </div>
        </div>
        <div class="dcpTab__content" data-attrid="t2">
            <div class="dcpFrame" data-attrid="f4">
                Contenu d'un cadre…
            </div>
            <div class="dcpFrame" data-attrid="f5">
                Contenu d'un autre cadre…
            </div>
        </div>
    </div>
</section>

7.1.3 Identifier les attributs dans la css

Les attributs sont au sein de la section .dcpDocument__body, dans une div de la forme
<div class="dcpAttribute dcpAttribute--type--***" data-attrid="***"/>

7.1.3.1 Label des attributs

7.1.3.1.1 Label en général

Tous les labels d'attributs peuvent être adressée avec les mêmes règles :

Règle	Définition
.dcpDocument .dcpLabel	Tous les labels (hormis les onglets)
.dcpDocument .dcpLabel[data-attrid="`attributeId`"]	Label de l'attribut `attributeId`

Exemple :

.dcpDocument .dcpLabel {
    color: #ffff00;
    background-color: #262600;
}
.dcpDocument .dcpLabel[data-attrid="my_text"] {
    color:blue;
}
.dcpDocument .dcpLabel[data-attrid="my_number"] {
    color: #ff6d8c;
}

7.1.3.1.2 Label des onglets

Les onglets (attribut de type tab) ont deux états :

active pour l'onglet sélectionné
default pour les autres.

De par ces états, des règles plus précises sont nécessaires pour modifier leur apparence :

Règle	Définition
.dcpDocument .dcpLabel.dcpLabel--active	Label de l'onglet actif
.dcpDocument .dcpLabel.dcpLabel--default	Label des onglets inactifs
.dcpDocument .dcpLabel.dcpLabel--active[data-attrid="`attributeId`"]	Label de l'onglet `attributeId` lorsqu'il est actif
.dcpDocument .dcpLabel.dcpLabel--default[data-attrid="`attributeId`"]	Label de l'onglet `attributeId` lorsqu'il est inactif

Les onglets ont un élément actif permettant de changer d'onglet. Cet élément est une ancre HTML (a) et sa couleur ne peut être modifiée que par des règles plus précises portant sur l'ancre elle-même :

Règle	Définition
.dcpDocument .dcpLabel.dcpLabel--active[data-attrid="`attributeId`"] a	Texte du label de l'onglet `attributeId` lorsqu'il est actif
.dcpDocument .dcpLabel.dcpLabel--default[data-attrid="`attributeId`"] a	Texte du label de l'onglet `attributeId` lorsqu'il est inactif

Exemple :

.dcpDocument .dcpLabel--default[data-attrid="tst_myframe"] {
    color:violet;
    background: #fdffbb;
}
.dcpDocument .dcpLabel--active[data-attrid="tst_myframe"] {
    background:violet;
    color: #fdffbb;
}

7.1.3.2 Contenu des attributs

Le contenu des attributs peut être adressé avec les règles suivantes :

Règle	Définition
.dcpDocument .dcpAttribute__content	Tous les contenus d'attributs (hormis les attributs de structure)
.dcpDocument .dcpArray__content	Les contenus des tableaux
.dcpDocument .dcpFrame__content	Les contenus des cadres
.dcpDocument .dcpTab__content	Le contenu des onglets

.dcpDocument .dcpAttribute__content[data-attrid="`attributeId`"]	Contenu de l'attribut `attributeId`
.dcpDocument .dcpArray__content[data-attrid="`attributeId`"]	Contenu du tableau `attributeId`
.dcpDocument .dcpFrame__content[data-attrid="`attributeId`"]	Contenu du cadre `attributeId`
.dcpDocument .dcpTab__content[data-attrid="`attributeId`"]	Contenu de l'onglet `attributeId`

Exemple : Afficher les attributs du cadre "my_frame" sur deux colonnes, et changer ses couleurs :

.dcpFrame__content[data-attrid="my_frame"] {
    background: linear-gradient(45deg, rgba(206,219,233,1) 0%,rgba(97,153,199,1) 51%,rgba(65,154,214,1)  84%,rgba(38,85,139,1) 100%);
    color: white;
}
 
.dcpFrame__content[data-attrid="my_frame"] a{
    color: yellow;
}
 
.dcpFrame__content[data-attrid="my_frame"] .dcpAttribute {
    float: left;
    display: inline-block;
    width: 50%;
    height: 3em;
}

Figure 62. Rendu par défaut

Figure 63. Rendu avec css personnalisée

Source : advanced/domStructure.md Dynacase Platform 3.2 | Document User Interface Manuel de référence, version 1.0 édition 2, © Labs <labs@anakeen.com>