Migration de configuration de 4.x à 4.7

La version 4.7 apporte son lot de modification visuelle qui implique des changements de configuration au niveau des beans, mais également des propriétés dans ARender.properties ainsi que le CSS. Cette page a pour but de montrer comment bien adapter les anciennes configurations vers la nouvelle.

Le Toppanel

Nouvelle organisation du Toppanel

Le Toppanel est organisé en plusieurs sections permettant d’organiser les différents boutons. Voici les différentes sections listées dans leur ordre par défaut :

• File And annotation : Contient les boutons pour les téléchargements, l’impression et les annotations
• File (Contenue dans la première section) : Contient les boutons pour les téléchargements et l’impression
• Annotation (Contenue dans la première section) : Contient les boutons pour les annotations
• Modification : Contient les boutons pour la rotation, la luminosité et le contraste
• Navigation : Contient les boutons pour la navigation dans le document
• Zoom : Contient les boutons pour le zoom
• MultiView tools : Contient les boutons pour la vue multi-document
• Plugin : Contient les boutons pour les plugins Plume et HTML
• Right : Contient les boutons devant être à droite dont l’ellipsis

Cette organisation est modifiable comme dans les versions précédentes. Voici une liste des différentes propriétés servant à manipuler la disposition des différents éléments du Toppanel :

• topPanel.widgets.beanNames
• topPanel.upload.buttons.beanNames
• topPanel.download.buttons.beanNames
• topPanel.section.file.buttons.beanNames
• topPanel.section.file.annotation.buttons.beanNames
• topPanel.section.modification.buttons.beanNames
• topPanel.ellipsis.buttons.beanNames
• topPanel.section.plugin.buttons.beanNames
• topPanel.search.buttons.beanNames
• topPanel.navigation.buttons.beanNames
• topPanel.zoom.buttons.beanNames
• topPanel.rotation.buttons.beanNames
• topPanel.annotation.buttons.beanNames
• topPanel.imageProcessing.buttons.vertical.beanNames
• topPanel.section.right.buttons.beanNames

Cas particuliers

La section File and Annotation est une section qui va simplement servir de conteneur pour les sections File et Annotation afin de les avoir côte-à-côte.

La section Right est la section qui sera toujours la plus à droite et qui va contenir le bouton Ellipsis (Menu burger).

Les boutons, les boutons activables et les items de sous-menu

Les boutons d’annotations

Les boutons d’annotations se trouvent directement dans le toppanel dans la section d’Annotation. Le mode répétition est activable avec un double-clic si la propriété associée à l’annotation est bien activée. Il est toujours possible d’avoir le mode répétition sur un bouton avec un simple clic.

Pour avoir ce comportement, il faut remplacer la propriété du buttonHandler. Les annotations disposant d’une fonction de répétition vont avoir des références de bean pour le mode normal et le mode répétition.

Voici un exemple de propriété buttonHandler actionnant le mode répétition au clic du bouton :

<property name="buttonHandler">
	<ref bean="highlightCircleCreationRepeatableAction" />
</property>

Exemple de bouton d’annotation standard

<bean id="addHighlightCircleAnnotationButton"
    class="com.arondor.viewer.client.toppanel.presenter.ActivableButtonPresenter">
    <constructor-arg value="addHighlightCircleAnnotationButton" />
    <property name="name" value="Circle" />
    <property name="supportDoubleClick" value="${topPanel.annotationMenu.circle.repeat}" />
    <property name="enabled" value="${topPanel.annotationMenu.circle}" />
    <property name="className" value="standardButton icon-add-circle toppanelButton" />
    <property name="buttonGroup" value="topPanel" />
    <property name="buttonTitle">
        <ref bean="labels#addCircleAnnotation" />
    </property>
    <property name="visibilityForTopPanel">
        <ref bean="topPanelVisibilityMode" />
    </property>
    <property name="doubleClickButtonHandler">
        <ref bean="highlightCircleCreationRepeatableAction" />
    </property>
    <property name="inactiveButtonHandler">
        <ref bean="quitAnnotationCreationAction" />
    </property>
    <property name="buttonHandler">
        <ref bean="highlightCircleCreationAction" />
    </property>
</bean>

Exemple de bouton d’annotation répété en un clic

 <bean id="addHighlightCircleAnnotationRepeatButton"
    class="com.arondor.viewer.client.toppanel.presenter.ActivableButtonPresenter">
    <constructor-arg value="addHighlightCircleAnnotationRepeatButton" />
    <property name="enabled" value="${topPanel.annotationMenu.circle.repeat}" />
    <property name="active" value="false" />
    <property name="className" value="standardButton icon-add-circle toppanelButton" />
    <property name="buttonGroup" value="topPanel" />
    <property name="buttonTitle">
        <ref bean="labels#addCircleAnnotation" />
    </property>
    <property name="visibilityForTopPanel">
        <ref bean="topPanelVisibilityMode" />
    </property>
    <property name="buttonHandler">
        <ref bean="highlightCircleCreationRepeatableAction" />
    </property>
</bean>

Activer un bouton avec un raccourci clavier

Les boutons peuvent avoir un raccourci clavier pour activer l’action qui se fait habituellement au clic. Les différents types de raccourci disponible sont de la forme :

• {Touche spécifique} + {Touche clavier}
• {Touche spécifique} + {Touche spécifique} + {Touche clavier}
• {Touche spécifique} + {Touche spécifique} + {Touche spécifique} + {Touche clavier}

Où {Touche clavier} correspond au touche alphabétique et numérique du clavier et {Touche spécifique} peut correspondre à ALT, SHIFT ou CTRL.

Pour les boutons (Utilisant la classe ButtonPresenter) et les boutons activables (Utilisant la classe ActivableButtonPresenter), rajouter la propriété suivante dans le bean voulu :

<property name="shortcut">
    <bean
        class="com.arondor.viewer.client.documentcontent.shortcuts.KeyboardShortCut"
        scope="prototype">
        <property name="ctrl" value="true" />
        <property name="key" value="KEY_TO_USE" />
        <property name="enabled" value="IS_ENABLED" />
    </bean>
</property>

Propriété à rajouter dans le bean shortcut pour activer la touche CTRL :

<property name="ctrl" value="true" />

Propriété à rajouter dans le bean shortcut pour activer la touche SHIFT :

<property name="shift" value="true" />

Propriété à rajouter dans le bean shortcut pour activer la touche ALT :

<property name="alt" value="true" />

Conversion entre bouton et item de sous-menu :

Les boutons se trouvant dans les sous menus et les boutons se trouvant dans le toppanel utilisent dorénavant des classes différentes. Cela va se traduire également par des différences de définition de bean.

Exemple de bouton, de bouton activable et d’item de sous-menu

Les exemples suivants montrent un bean entièrement construit pour les trois formes mentionnées. L’action qui est déclenchée par chacun est l’impression du document.

Item de sous-menu

<bean id="printButton"
    class="com.arondor.viewer.client.widgets.DropdownMenuItem">
    <constructor-arg value="printButton"/>
    <property name="enabled" value="#{ !${isMobile} and ${topPanel.print}}"/>
    <property name="className" value="standardButton icon-print toppanelButton" />
    <property name="buttonTitle">
        <ref bean="labels#printDocument" />
    </property>
    <property name="shortCut" value="CTRL + ${shortCut.print.key}" />
    <property name="buttonHandler">
        <bean
            class="com.arondor.viewer.client.toppanel.behavior.document.DocumentPrintHandler">
            <constructor-arg>
                <bean
                    class="com.arondor.viewer.client.events.print.ShowPrintDialogBoxEvent" />
            </constructor-arg>
        </bean>
    </property>
</bean>

Bouton

<bean id="printButton"
    class="com.arondor.viewer.client.toppanel.presenter.ButtonPresenter">
    <constructor-arg value="printButton"/>
    <property name="enabled" value="#{ !${isMobile} and ${topPanel.print}}"/>
    <property name="className" value="standardButton icon-print toppanelButton" />
    <property name="buttonTitle">
        <ref bean="labels#printDocument" />
    </property>
    <property name="buttonHandler">
        <bean
            class="com.arondor.viewer.client.toppanel.behavior.document.DocumentPrintHandler">
            <constructor-arg>
                <bean
                    class="com.arondor.viewer.client.events.print.ShowPrintDialogBoxEvent" />
            </constructor-arg>
        </bean>
    </property>
</bean>

Bouton activable

<bean id="printButton"
    class="com.arondor.viewer.client.widgets.ActivableButtonPresenter">
    <constructor-arg value="printButton"/>
    <property name="enabled" value="#{ !${isMobile} and ${topPanel.print}}"/>
    <property name="className" value="standardButton icon-print toppanelButton" />
    <property name="buttonTitle">
        <ref bean="labels#printDocument" />
    </property>
    <property name="buttonHandler">
        <bean
            class="com.arondor.viewer.client.toppanel.behavior.document.DocumentPrintHandler">
            <constructor-arg>
                <bean
                    class="com.arondor.viewer.client.events.print.ShowPrintDialogBoxEvent" />
            </constructor-arg>
        </bean>
    </property>
</bean>

On voit que les beans sont similaires ici. Mais les boutons activables (Utilisant la classe ActivableButtonPresenter) peuvent accepter les propriétés suivantes:

• name
• buttonGroup
• inactiveButtonHandler
• supportShortCut
• shortcut

Pour les boutons (Utilisant la classe ButtonPresenter), seules les propriétés suivantes pourront être ajoutées :

• name
• supportShortCut
• shortcut

Les propriétés précédentes ne sont pas utilisables par les items de sous menu (Utilisant la classe DropdownMenuItem).

Mettre la recherche directement dans le toppanel :

Le bouton de recheche correspond au bean ayant pour id searchSection. Il faudra alors supprimer ce bean de la liste des beans devant être instancié.

Localisation de l’utilisation de l’id :

topPanel.section.right.buttons.beanNames=documentBuilderButton,fullscreenButton,searchSection,moreButton

Suppression de l’id en redéfinissant la propriété :

topPanel.section.right.buttons.beanNames=documentBuilderButton,fullscreenButton,moreButton

Ensuite, il faudra redéfinir une propriété avec le bean id searchBox :

topPanel.section.right.buttons.beanNames=searchBox,documentBuilderButton,fullscreenButton,moreButton

Modifications de nom de classes

Si vous utilisez la 4.7.0 ou 4.7.1, alors, certaines classes ont changé de package. Veuillez à bien les remplacer.

Modifications de bean

Le bean avec l’id annotationMenu a changé de classe. La nouvelle classe est com.arondor.viewer.client.toppanel.presenter.SimpleButtonSetPresenter.

Les boutons de sélection de la tête ou de la queue des flèches ont été modifiés. Leur classe est maintenant com.arondor.viewer.client.widgets.DropdownMenuItem

La propriété imageResource n’est plus utilisable dans les définitions des beans.

Suppression de bean (4.7.0 et 4.7.1)

Liste des ids de beans supprimés pour la version 4.7.0 et 4.7.1.

• documentMenu
• imageProcessingVerticalSubMenu
• addHighlightRectangleAnnotationRepeatButton
• addHighlightCircleAnnotationRepeatButton
• addArrowAnnotationRepeatButton
• addHighlightTextAnnotationRepeatButton
• addUnderlineTextAnnotationRepeatButton
• addStrikethroughTextAnnotationRepeatButton
• addPolygonAnnotationRepeatButton
• addPolylineAnnotationRepeatButton
• addFreehandAnnotationRepeatButton
• logo

Modification de CSS:

Icon en font:

Les icons du toppanel ont été changés. Les icons sont faits via de la font personnalisé.

Ajouts de variable de couleur

Les couleurs de fond, d’icône, de survole dans le toppanel peut se changer entre couleur clair et couleur foncé avec une propriété:

preference.color.mode=DARK

La valeur DARK sera pour la couleur foncée par défaut, la valeur LIGHT sera pour la couleur claire et la valeur CUSTOM permet d’utiliser des couleurs custom redéfinies dans un CSS pour la class CSS nommé .custom-theme. Par défaut, la valeur CUSTOM va correspondre aux couleurs définis pour la valeur DARK.

DARK

--bg-top-panel-general-items: #4E4E4E

--bg-top-panel-specific-items: #313131

--bg-button-hover-specific-items: #505050

--bg-button-hover-general-items: #313131

--bg-input: #585858

--bg-zoom-button: #464646

--bg-zoom-button-hover: #787878

--bg-dropdown-menu: #434343

--bg-item-hover-dropdown-menu: #505050

--color-button: #ADADAD

--color-button-hover: #F1F1F1

--color-button-active: #04AEEF

--color-button-disabled: #ADADAD4C

--color-section-title-dropdown-menu: #878787

--color-item-shortcut-dropdown-menu: #878787

--color-item-shortcut-hover-dropdown-menu: #F1F1F1

--color-separator: #707070

--bg-scrollbar: #f2f2f2

--bg-scrollbar-thumb: #b3b3b3

--bg-scrollbar-thumb-hover: #999999

--bg-scrollbar-thumb-active: #6d6d6d

LIGHT

--bg-top-panel-general-items: #D3D3D3

--bg-top-panel-specific-items: #F6F6F6

--bg-button-hover-specific-items: #DADADA

--bg-button-hover-general-items: #F6F6F6

--bg-input: #EAEAEA

--bg-zoom-button: #DFDFDF

--bg-zoom-button-hover: #BDBDBD

--bg-dropdown-menu: #F6F6F6

--bg-item-hover-dropdown-menu: #DADADA

--color-button: #707070

--color-button-hover: #1F1F1F

--color-button-active: #04AEEF

--color-button-disabled: #7070704C

--color-section-title-dropdown-menu: #D0D0D0

--color-item-shortcut-dropdown-menu: #C1C1C1

--color-item-shortcut-hover-dropdown-menu: #868686

--color-separator: #D3D3D3

--bg-scrollbar: #f2f2f2

--bg-scrollbar-thumb: #b3b3b3

--bg-scrollbar-thumb-hover: #999999

--bg-scrollbar-thumb-active: #6d6d6d

Liste des modifications de CSS

Plugin Plume :

Plugin HTML :

Annotations :

Menu contextuel :

Toppanel :

Liste des suppressions de CSS

• topPanelSubMenu:BEFORE
• topPanelActivableButton
• topPanelActivatedButton