Rétro ingénierie d’Rétro ingénierie d’interfacesinterfaces

utilisateur graphiques utilisateur graphiques

à partir de à partir de fichiers de ressources fichiers de ressources

J. MarionJ. Marion

IntroductionIntroduction

Rétro ingénierie d’interfaces graphiques

Langage de spécification cible Langage de spécification source Implémentation de l’outil faisant la

traduction

Rétro ingénierie d’interfaces Rétro ingénierie d’interfaces utilisateur…utilisateur…

Examiner l’interface d’une application pour en extraire une spécification abstraite

Langage de description d’interface utilisateur (UIDL)

De manière automatique Faciliter la réutilisation (par exemple dans

une phase ultérieure de réingénierie)

Rétro ingénierie = traductiondans un plus haut niveau d’abstraction

UsiXML en tant que UIDL

Peut décrire un UI à différents niveaux d’abstraction

Permet un développement multidirectionnel

Les modèles qu’il spécifie sont structurés d’après les quatre couches du cadre de référence Caméléon

Le cadre de référence CAMELEON

Les modèles produits pourront être par la suite stockés de manière centralisés

Ces différents modèles sont chacun édités avec des éditeurs appropriés, mais séparés. Il est utile de les répertorier, de les mettre à jour et de les gérer dans le temps de manière efficace pour être réutilisés

Rétro ingénierie d’interfaces Rétro ingénierie d’interfaces utilisateur graphiques…utilisateur graphiques…

Modèle CUI

Indépendant de la plate-forme

Dépendant de la modalité d’interaction

graphicalRelationship

graphicalAlignment

isVertical : booleanisHorizontal : booleanisRightCentralLeft : stringisUpDown : string

videoComponent

alternateImage : uriautoplay : booleanisLoop : integerbuiltInControl : booleansubtitle : booleansubtitleContent : uri

drawingCanvas

window

windowLeftMargin : integerwindowTopMargin : integerisResizable : boolean

dialogBox

graphicalEmphasis

graphicalIndividualComponent

glueVertical : stringglueHorizontal : stringdefaultMnemonic : Stringmnemonic : StringtextFont : stringisBold : booleanisItalic : booleanisUnderline : booleanisStrikeThrough : booleanisSubScript : booleanisSuperScript : booleanisPreformatted : booleantextSize : integertextColor : String

graphicalContainer

width : integerheigth : integerbgImage : uriisAlwaysOnTop : booleanrepetition : integerisDetachable : booleanisMigrateable : boolean

0..n

1

0..n

1

0..n

0..1

0..n

0..1

menu

popUpMenu : booleantoolBarMenu : boolean

menuItem

type : stringkeyboardShortcut : stringdefaultKeyboardShortcut : string

1..n

1

1..n

11

1

1

1

tabbedItem

index : integer

tabbedDialogBox

1..n

1

1..n

1

inputText

textMargin : integerisEditable : booleanisWordWrapped : booleanforceWordWrapped : booleanmaxLength : integernumberOfColumns : integernumberOfLines : integertextVerticalAlign : stringtextHorizontalAlign : stringfilter : uridefaultFilter : stringisPassword : boolean

imageZone

hyperLinkTarget : uridefaultHyperLinkTarget : urishape : stringcoordinates : coord

imageComponent

imageHeight : integerimageWidth : integerimageHorizSpace : integerimageBorder : integerhyperLinkTarget : uridefaultHyperLinkTarget : uri

0..n0..n

toggleButton

defaultState : boolean

checkBox

defaultState : booleangroupName : string

button

radioButton

defaultState : booleangroupName : string

table

xSize : integerySize : integerzSize : integer

cell

xIndex : integeryIndex : integerzIndex : integerisHeader : booleanisFooter : boolean

0..n

1

0..n

10..1

1

0..1

1

cursor

defaultPosition : integer

slider

minValue : integermaxValue : integerstep : integerorientation : string

1..21

1..21

datePicker

hourPicker

colorPicker

filePicker

type : string

progressionBar

minValue : integermaxValue : integerorientation : stringindeterminate : boolean

graphicalAdjacencygraphicalTransition

transitionType : stringtransitionEffect : string

grahicalCointainment

source

sourceId : string

target

targetId : stringcuiRelationship

id : stringname : string

1..n1

1..n1

1..n1

1..n1

cuiModel

0..n

1

0..n

1

cio

id : stringname : stringicon : uricontent : uridefaultContent : string or uridefaultIcon : uridefaultHelp : urihelp : stringcurrentValue : string

1..n

1

1..n

1

MenuBarMenuPopUp

box

type : stringrelativeWidth : integerrelativeHeight : integerisSplitable : booleanisBalanced : boooleanisResizableHorizontal : booleanisResizableVertical : booleanrelativeMinWidth : integerrelativeMinHeight : integerisFlow : booleanisScrollable : booleangridWidth : stringgridHeight : string

toolBar

isFloat : booleanisFloatable : boolean

statusBar

comboBox

isEditable : booleanmaxlineVisible : integer

spin

orientation : string

Tree

Item

1..n

1

1..n

1

1..n

1

1..n

1

0..n

0..1

0..n

0..1

0..n0..1

0..n0..1

listBox

maxlineVisible : integerisEditable : booleanmultiple_selection : boolean

1..n

1

1..n

1

separator

type : string

graphicalCio

isVisible : booleanisEnabled : booleanstatusBarContent : uridefaultStatusBarContent : stringfgColor : stringbgColor : stringborderWidth : integerborderType : integerborderTitle : StringdefaultBorderTitle : StringborderTitleAlign : StringborderColor : StringtoolTipDefaultContent : stringtoolTipContent : uritransparencyRate : integer

outputText

defaultHyperLinkTarget : urihyperLinkTarget : urivisitedLinkColor : stringactiveLinkColor : stringtextMargin : integertextVerticalAlign : stringtextHorizontalAlign : stringscrollStyle : stringscrollDirection : stringscrollHeigth : integerscrollWidth : integerscrollHorizontalSpace : integerscrollVerticalSpace : integerscrollAmount : integerscrollDelay : integernumberOfColumns : integernumberOfLines : integer

Métamodèle

GrafiXML: un éditeur CUI écrit en Java

Permet de dessiner un UI et de générer le code correspondant en Java, XHTML ou XUL

Petite demonstration

… … à partir de fichier de à partir de fichier de ressources.ressources.

Interfaces utilisateur Windows Fichier de script de ressources (.rc) Fichier texte pouvant être extrait d’un

exécutable grâce à certains décompilateurs Ressource individuelle existant en tant que

fichier autonome appelé à partir d'un fichier .rc Il est également possible de trouver des

ressources dans des fichiers .dll Petite démonstration et format du ces fichiers

ImplémentationImplémentation

Plug-in dans GrafiXML

Analyse des correspondances entre métamodèles

PUSHBUTTON

Default : BooleanContent : {text,bitmap,icon}

CHECKBOX

Auto : Boolean3state : BooleanRightButton : BooleanPushLike : Boolean

RADIOBUTTON

Auto : BooleanRightButton : BooleanPushLike : Boolean

CUSTOMBUTTON

STATIC

Type : {text,frame,image,enhencedMetafile,ownerdraw}Sunken : BooleanNotify : BooleanTextStyle : {left,right,center,simple,leftNoWordWrap,undefined}NoPrefix : BooleanEndEllipsis : BooleanPathEllipsis : BooleanWordEllipsis : BooleanFrame : {black,gray,white,undefined}Rectangle : {black,gray,white,undefined}Etched : {frame,horizontal,vertical,undefined}Icon : BooleanBitmap : BooleanCenterImage : BooleanRealSizeImage : BooleanRightAdjust : Boolean

COMBOBOX

Type : {simple,dropDown,dropDownList}CaseSensitive : BooleanNoEditImage : BooleanNoSizeLimit : BooleanPathwordBreakProc : Boolean

SCROLLBAR

Type : {horizontal,vertical,sizeBox,sizeGrip}Alignment : {left,right,top,bottom,bottomRight,topLef,none}

EDIT

Alignment : {left,right,center}Multiline : BooleanAutoHorizontalScroll : BooleanAutoVerticalScroll : BooleanPasswordField : BooleanLowerCase : BooleanUpperCase : BooleanNoHideSelection : BooleanReadOnly : BooleanNumber : BooleanWantReturn : BooleanOEMConvert : Boolean

CUSTOMCONTROL

ClassName : String .

PUSHBOX

WINDOW

Text : StringGeneralStyle : {popup, overlapped, child}Border : BooleanCaption : BooleanClipChildren : BooleanClipSimblings : BooleanDisabled : BooleanDialogFrame : BooleanGroup : BooleanTabStop : BooleanHorizontalScrollBar : BooleanMaximizeBox : BooleanMaximized : BooleanMinimizeBox : BooleanMinimized : BooleanSystemMenu : BooleanThickFrame : BooleanVerticalScrollBar : BooleanVisible : BooleanClientEdge : BooleanDialogModalFrame : BooleanStaticEdge : BooleanWindowEdge : BooleanAcceptFiles : BooleanAppWindow : BooleanControlParent : BooleanExContextHelp : BooleanLayered : BooleanLayoutRTL : BooleanLeft : BooleanLeftScrollBar : BooleanLTRReading : BooleanMDIChild : BooleanNoActive : BooleanNoInheritLayout : BooleanNoParentNotify : BooleanRight : BooleanRightScrollBar : BooleanRTLReading : BooleanToolWindow : BooleanTopMost : BooleanTransparent : Boolean

RICHEDIT

DisableNoScroll : BooleanNoCallOleInitialize : BooleanNoIME : BooleanSelfIME : BooleanSunken : BooleanVertical : Boolean

TREEVIEW

CheckBoxes : BooleanDisableDragDrop : BooleanEditLabels : BooleanFullRowSelect : BooleanHasButtons : BooleanHasLines : BooleanInfoType : BooleanLinesAtRoot : BooleanNoHorizontalScroll : BooleanNonevenHeight : BooleanNoScroll : BooleanNoToolTips : BooleanRightToLeftReading : BooleanShowSelectionAlways : BooleanSingleExpand : BooleanTrackSelect : Boolean

TRACKBAR

AutoTicks : BooleanDowIsLeft : BooleanEnableSelectionRange : BooleanFixedLenght : BooleanNoThumb : BooleanNoTicks : BooleanOrientation : {horizontal,vertical}Reversed : BooleanTickMarks : {bottom,top,left,right,both}ToolTips : Boolean

PROGRESSBAR

Type : {normal,marquee,smooth}Vertical : Boolean

MONTHCALENDAR

DayState : BooleanMultiselection : BooleanNoToday : BooleanNoTodayCircle : BooleanWeekNumbers : Boolean

STATUTBAR

SizeGrip : BooleanToolTips : BooleanTop : Boolean

LISTVIEW

View : {icon,smallIcon,list,report}Alignment : {left,top}EditLabels : BooleanOwnerData : BooleanShareImageLists : BooleanShowSelectionAlways : BooleanSingleSelect : BooleanSortAscending : BooleanSortDescending : BooleanCheckBoxes : BooleanOneClickActivate : BooleanTrackSelect : BooleanTwoClickActivate : BooleanAutoArrange : BooleanNoLabelWrap : BooleanNoScroll : BooleanNoColumnHeader : BooleanNoSortHeader : BooleanOwnerDrawFixed : BooleanFullRowSelect : BooleanGridLines : BooleanHeaderDragDrop : BooleanSubItemImages : Boolean

ANIMATION

AutoPlay : BooleanCenter : BooleanTransparent : Boolean

DATETIMEPICKER

AppCanParse : BooleanFormat : {longDate,shortDate,shortDateCentury,time}RightAlign : BooleanShowNone : BooleanUpDown : Boolean

TAB

Type : {tabs,buttons}Bottom : BooleanFixedWidth : BooleanFlatButtons : BooleanFocusNever : BooleanFocusOnButtonDown : BooleanForceLeft : {none,icon,label}HotTrack : BooleanMultiline : BooleanMultiselection : BooleanOwnerDrawFixed : BooleanRaggedRight : BooleanRight : BooleanRightJustify : BooleanScrollOpposite : BooleanToolTips : BooleanVertical : Boolean

HEADER

Buttons : BooleanDragDrop : BooleanFilterBar : BooleanFlat : BooleanFullDrag : BooleanHidden : BooleanHorizontal : BooleanHotTrack : Boolean

TOOLBAR

ALTDrag : BooleanCustomErase : BooleanFlat : BooleanTransparent : BooleanList : BooleanRegisterDrop : BooleanToolTips : BooleanWrapAble : BooleanNoResize : BooleanNoParentAlign : BooleanBottom : BooleanNoDivider : BooleanAdjustable : Boolean

REBAR

AutoSize : BooleanBandBorders : BooleanDoubleClickToggle : BooleanFixedOrder : BooleanNoDivider : BooleanRegisterDrop : BooleanVarHeight : BooleanVerticalGripper : BooleanVertical : Boolean

PAGER

AutoScroll : BooleanDragAndDrop : BooleanDirection : {horizontal,vertical}

LISTBOX

Sorted : BooleanMultipleSelection : BooleanDisableNoScroll : BooleanExtendedSelection : BooleanMulticolumn : BooleanNoSelection : BooleanNotify : BooleanOwnerDrawFixed : BooleanOwnerDrawVariable : BooleanHasStrings : BooleanNoIntegralHeight : BooleanUseTabstops : BooleanWantKeyBoardInput : BooleanNoData : BooleanNoRedraw : Boolean

BUTTON

VerticalAlignment : {top,center,bottom}HorizontalAlignment : {left,center,right}Flat : BooleanMultiline : BooleanNotify : Boolean

GROUPBOX

UPDOWN

Alignment : {left,right,none}ArrowKeys : BooleanAutoBuddy : BooleanHorizontal : BooleanHotTrack : BooleanNoThousands : BooleanSetBuddyInt : BooleanWrap : Boolean

CONTROL

CtrlID : IntegerX : IntegerY : IntegerWidth : IntegerHight : IntegerHelpID : IntegerPosition : Integer0..*

0..1

0..*

0..1

Regroup

+is the buddy window of

Glue To

DIALOG

DlgIDExtended : BooleanX : IntegerY : IntegerWidth : IntegerHight : IntegerHelpID : Integer3DLook : BooleanAbsoluteAlignment : BooleanCenter : BooleanCenterMouse : BooleanContextHelp : BooleanDialogIsControl : BooleanFixedSys : BooleanLocalEdit : BooleanModalFrame : BooleanNoFailCreate : BooleanNoIdleMessage : BooleanSetForeGround : BooleanLanguage : StringSubLanguage : StringSetFont : BooleanFontName : StringFontSize : IntegerItalic : BooleanWeight : IntegerShellFont : Boolean

0..*

1

0..*

1

graphicalRelationship

graphicalAlignment

isVertical : booleanisHorizontal : booleanisRightCentralLeft : stringisUpDown : string

videoComponent

alternateImage : uriautoplay : booleanisLoop : integerbuiltInControl : booleansubtitle : booleansubtitleContent : uri

drawingCanvas

window

windowLeftMargin : integerwindowTopMargin : integerisResizable : boolean

dialogBox

graphicalEmphasis

graphicalIndividualComponent

glueVertical : stringglueHorizontal : stringdefaultMnemonic : Stringmnemonic : StringtextFont : stringisBold : booleanisItalic : booleanisUnderline : booleanisStrikeThrough : booleanisSubScript : booleanisSuperScript : booleanisPreformatted : booleantextSize : integertextColor : String

graphicalContainer

width : integerheigth : integerbgImage : uriisAlwaysOnTop : booleanrepetition : integerisDetachable : booleanisMigrateable : boolean

menu

popUpMenu : booleantoolBarMenu : boolean

menuItem

type : stringkeyboardShortcut : stringdefaultKeyboardShortcut : string

tabbedItem

index : integer

tabbedDialogBox

inputText

textMargin : integerisEditable : booleanisWordWrapped : booleanforceWordWrapped : booleanmaxLength : integernumberOfColumns : integernumberOfLines : integertextVerticalAlign : stringtextHorizontalAlign : stringfilter : uridefaultFilter : stringisPassword : boolean

imageZone

hyperLinkTarget : uridefaultHyperLinkTarget : urishape : stringcoordinates : coord

imageComponent

imageHeight : integerimageWidth : integerimageHorizSpace : integerimageBorder : integerhyperLinkTarget : uridefaultHyperLinkTarget : uri

toggleButton

defaultState : boolean

checkBox

defaultState : booleangroupName : string

button

radioButton

defaultState : booleangroupName : string

table

xSize : integerySize : integerzSize : integer

cell

xIndex : integeryIndex : integerzIndex : integerisHeader : booleanisFooter : boolean

cursor

defaultPosition : integer

slider

minValue : integermaxValue : integerstep : integerorientation : string

datePicker

hourPickercolorPicker

filePicker

type : string

progressionBar

minValue : integermaxValue : integerorientation : stringindeterminate : boolean

graphicalAdjacencygraphicalTransition

transitionType : stringtransitionEffect : string

grahicalCointainment

source

sourceId : string

target

targetId : string

cuiRelationship

id : stringname : string

cuiModel

cio

id : stringname : stringicon : uricontent : uridefaultContent : string or uridefaultIcon : uridefaultHelp : urihelp : stringcurrentValue : string

MenuBarMenuPopUp

box

type : stringrelativeWidth : integerrelativeHeight : integerisSplitable : booleanisBalanced : boooleanisResizableHorizontal : booleanisResizableVertical : booleanrelativeMinWidth : integerrelativeMinHeight : integerisFlow : booleanisScrollable : booleangridWidth : stringgridHeight : string

toolBar

isFloat : booleanisFloatable : boolean

statusBar

comboBox

isEditable : booleanmaxlineVisible : integer

spin

orientation : string

Tree

Item

listBox

maxlineVisible : integerisEditable : booleanmultiple_selection : boolean

separator

type : string

graphicalCio

isVisible : booleanisEnabled : booleanstatusBarContent : uridefaultStatusBarContent : stringfgColor : stringbgColor : stringborderWidth : integerborderType : integerborderTitle : StringdefaultBorderTitle : StringborderTitleAlign : StringborderColor : StringtoolTipDefaultContent : stringtoolTipContent : uritransparencyRate : integer

outputText

defaultHyperLinkTarget : urihyperLinkTarget : urivisitedLinkColor : stringactiveLinkColor : stringtextMargin : integertextVerticalAlign : stringtextHorizontalAlign : stringscrollStyle : stringscrollDirection : stringscrollHeigth : integerscrollWidth : integerscrollHorizontalSpace : integerscrollVerticalSpace : integerscrollAmount : integerscrollDelay : integernumberOfColumns : integernumberOfLines : integer

0..n

1

0..n

1

0..n0..n

0..10..1

1

11..n1..n

1

1..n

1

1..n

1..n

1

0..n0..n

11

0..n0..n

1

0..n

1

0..n 1..2

1

1..2

1

1..n

1..n

11..n

1

11..n

1

0..n

1

0..n

11

1..n1..n

1

11

0..1

1..n1..n

1

1..n1..n

1

0..n0..n

0..10..1

0..n0..n

0..1

1..n

1

1..n

1

ConclusionConclusion