| |
| si-web:uwe [2017/10/17 16:39] – créée jcheron | si-web:uwe [2018/10/16 09:11] (Version actuelle) – supprimée jcheron |
|---|
| ====== UWE ====== | |
| UML-based Web Engineering | |
| |
| |
| |
| **UWE** est une méthode d'ingénierie Web pour la POO (Programmation orientée objet) basée sur UML (Langage de Modélisation Unifié), elle est utilisée pour déterminer et représenter les spécifications des applications Web. | |
| UWE est une extension d'UML, d'ailleurs les diagrammes reposent directement sur une approche UML (diagrammes de cas d'utilisation, d'activités et de classe). | |
| |
| |
| ===== Diagramme de navigation ===== | |
| |
| Le diagramme de navigation permet de représenter les liens existants entre les pages. Il sollicite en particulier 2 stéréotypes : | |
| * Le noeud (Node) est une unité navigable, il peut être présent sur plusieurs pages : il est représenté par le stéréotype **NavigationClass**. | |
| * Les noeuds sont connectés par des liens (Link) permettant la navigation, et représentés par le stéréotype **NavigationLink**. | |
| |
| |
| **Stéréotypes :** | |
| |< 100% >| | |
| ^Icône ^Stéréotype ^ Classe de base ^ | |
| |{{:slam4:uwe:navigationclass.png?nolink}}| navigationClass | Node | | |
| |{{:slam4:uwe:menu.png?nolink|}}| menu | Node | | |
| |{{:slam4:uwe:index.png?nolink|}}| index | Node | | |
| |{{:slam4:uwe:query.png?nolink|}}| query| Node | | |
| |{{:slam4:uwe:guidedTour.png?nolink|}}| guidedTour | Node | | |
| |{{:slam4:uwe:processClass.png?nolink|}}| processClass | Node | | |
| |{{:slam4:uwe:externalNode.png?nolink|}}| externalNode | Node | | |
| |<html>→</html> | processLink | Link | | |
| |<html>→</html> | navigationLink | Link | | |
| |
| |
| **Exemple :** | |
| |
| __Gestion d'un carnet d'adresses__ | |
| |
| <html><img src="http://uwe.pst.ifi.lmu.de/examples/AddressBookWithContentUpdates/Tutorial/Class_Diagram__Navigation__Navigation_Diagram.png"></html> | |
| |
| |
| ===== Diagramme de présentation ===== | |
| |
| Le diagramme de présentation représente les relations entre les classes de navigation, les classes dites « processus » ou « procédurales » et les pages de l'application web.\\ | |
| Il donne une représentation abstraite de l'interface utilisateur. | |
| **Stéréotypes :** | |
| |
| __Conteneurs__ | |
| |
| |< 100% >| | |
| ^Icône ^Stéréotype ^ Classe de base ^ | |
| |{{:slam4:uwe:presentationgroup.png?nolink|}}| presentationGroup | presentationClass | | |
| |{{:slam4:uwe:presentationpage.png?nolink}}| presentationPage | presentationGroup | | |
| |{{:slam4:uwe:inputform.png?nolink|}}| inputForm | presentationGroup | | |
| |{{:slam4:uwe:presentationalternatives.png?nolink|}}| presentationAlternatives | presentationElement | | |
| |
| __Elements__ | |
| |
| |< 100% >| | |
| ^Icône ^Stéréotype ^ Classe de base ^ | |
| |{{:slam4:uwe:text.png?nolink|}}| text | OutputElement | | |
| |{{:slam4:uwe:image.png?nolink|}}| image | OutputElement | | |
| |{{:slam4:uwe:mediaobject.png?nolink|}}| mediaObject | OutputElement | | |
| |{{:slam4:uwe:tab.png?nolink|}}| tab| InteractiveElement | | |
| |{{:slam4:uwe:button.png?nolink|}}| button| InteractiveElement | | |
| |{{:slam4:uwe:anchor.png?nolink|}}| anchor| InteractiveElement | | |
| |{{:slam4:uwe:slider.png?nolink|}}| slider| InputElement | | |
| |{{:slam4:uwe:textinput.png?nolink|}}| textInput| InputElement | | |
| |{{:slam4:uwe:imageinput.png?nolink|}}| imageInput| InputElement | | |
| |{{:slam4:uwe:fileupload.png?nolink|}}| fileUpload| InputElement | | |
| |{{:slam4:uwe:customcomponent.png?nolink|}}| customComponent| InputElement | | |
| |
| |
| |
| |
| __Gestion d'un carnet d'adresses__ | |
| |
| <html><img src="http://uwe.pst.ifi.lmu.de/examples/AddressBookWithContentUpdates/Tutorial/UWE_AddressBookContent_PresentationModelPart1.png"></html> | |
| |
| |
| ===== Liens ===== | |
| |
| * [[https://cacoo.com/|Cacoo]] | |
| * [[http://uwe.pst.ifi.lmu.de/download/UWE-Metamodel-Reference-v1.9.pdf|UWE meta-model reference]] | |
| * [[http://uwe.pst.ifi.lmu.de/teachingTutorialPresentationFrench.html|Tutoriel en Français (pdf)]] | |
| * [[http://uwe.pst.ifi.lmu.de/teachingTutorialFrench.html|Tutoriel Français en ligne]] | |
| |