Framework Open Source pour le développement d'interface utilisateur web, basé sur le puissant Framework GWT (Google Web Toolkit) Propre, claire, orientée-objet,

Présentation au sujet: "Framework Open Source pour le développement d'interface utilisateur web, basé sur le puissant Framework GWT (Google Web Toolkit) Propre, claire, orientée-objet,"— Transcription de la présentation:

1

2 Framework Open Source pour le développement d'interface utilisateur web, basé sur le puissant Framework GWT (Google Web Toolkit) Propre, claire, orientée-objet, approche composant, en code Java, avec des populaires IDEs Support automatique des mobiles comme apparence, comportement et gestion des événements Phase de compilation traduisant le code Java en JavaScript, HTML5/Ajax Selon une API standard résolvant les variations entre les navigateurs Gestion de: chargement et d'affichage des données, propagation des modifications utilisateur vers le serveur, validation du serveur, gestion des erreurs, mises à jour du cache sur plusieurs composants… SmartGwt Page 1/20

3 Difficulté d’écriture du code JavaScript( Langage au typage faible) Debug compliqué (alert !) Interprétation différente selon le navigateur Manque de compétence JavaScript Compétences nombreuses en développeur Java et librairie de code source complet à http://www.smartclient.com/smartgwt /showcase/#main http://www.smartclient.com/smartgwt /showcase/#main L’environnement de développement Java est très riche (ex: IDE Eclipse, debug pas à pas) Un seul code source Java pour tous les navigateurs, génération de JS pour chaque navigateur cible Le code Javascript est optimisé : compact, minimal, efficace Problèmes Solutions SmartGwt Page 1/20

4 L’interpréteur JS est mono thread Compilateur lent pour les gros projets Framework d’architecture de code (MVP) pas encore intégré Communauté Open source presque inactive jusqu’au maintenant SmartGwt Page 1/20

5 33 22 11 3 Représenté par un fichier XML (MonApp.gwt.xml), il est composé de : –Un ou plusieurs modules hérités –Un point d’entrée (le “main”) –Un chemin des sources, un autre des ressources –Scripts JS et CSS –Config vers les servlets RPC –Etc….ds.xml files describing your business objects.java files with DMI logic expressing business rules SmartGwt Page 1/20

6 A ListGrid is a DataBoundComponent that displays a list of objects in a grid, where each row represents one object and each cell in the row represents one property. A TreeGrid works just like a ListGrid, except one column (specified by treeField) shows a hierarchical Tree. A TreeGrid is not limited to displaying just the Tree column - you can define additional columns (via fields) which will render just like the columns of a ListGrid, and support all of the functionality of ListGrid columns, such as formatters. The Calendar component provides several different ways for a user to view and edit a set of events. A TileGrid is a DataBoundComponent that displays a list of objects as a set of "tiles", where each tile represents one object, and the tiles are laid out in a grid with multiple tiles per row. Each tile displays one or more properties of the object it represents. The DynamicForm manages a collection of FormItems which represent user input controls. The DynamicForm provides layout, value management, validation and databinding for the controls it manages. SmartGwt Page 1/20

7

8

9

10 UIObjectUIWidgetBaseWidgetCanvas CalendarListGridTileLayoutTileGridDynamicFormLayoutHStackHLayoutVStackVLayoutImg  void setHeight(int height) Sets the object's height  void setWidth(int width) Sets the object's width  void setMargin(Integer margin) Set the CSS Margin, in pixels, for this component  Void setLayoutAlign(Alignment layoutAlign) When this Canvas is included as a member in a Layout, layoutAlign controls alignment on the breadth axis of the layout.Alignment  void setBackgroundColor(String backgroundColor) The background color for this widget.  void setBackgroundImage(String backgroundImage) URL for a background image for this widget (corresponding to the CSS "background-image“ attribute).  void setBorder(String border) Set the CSS border of this component, as a CSS string including border-width, border-style, and/or color (eg "2px solid blue"). SmartGwt Page 1/20

11 UIObjectUIWidgetBaseWidgetCanvas CalendarListGridTileLayoutTileGridDynamicFormLayoutHStackHLayoutVStackVLayoutImg  void setCanAcceptDrop(Boolean canAcceptDrop) Indicates that this object can receive dropped widgets  void setCanDrag(Boolean canDrag) Indicates whether this widget can initiate custom drag- and-drop operations (other than reposition or resize).  void setDragType(String dragType) The "type" of thing given as a string that can be dragged from this widget.  void setDropTypes(String dropTypes) The "type" of thing(s) that can be dropped on this widget specified as a string or an array of strings (indicating multiple types).  void setDragAppearance(DragAppearance dragAppearance) Visual appearance to show when the object is being dragged.  void setCanDragReposition(Boolean canDragReposition) Indicates whether this widget can be moved by a user of your application by simply dragging with the mouse. Inheritance SmartGwt Page 1/20

12 smartgwt Page 12/20 Drag and drop pour déplacer les pièces entre les trois boîtes Les boîtes bleue et verte acceptent des pièces de son même couleur. La boîte grise accepte n'importe quelle pièce.

13 Invoquer par la class EntryPoint, permet de: 1.Creer les DropBox 2.Creer les DragPieces et l’inseret dans les DropBoxes 3.………………………………. 4.Gerer les positions des DropBoxes par le conteneur Hstack. Invoquer par la class EntryPoint, permet de: 1.Creer les DropBox 2.Creer les DragPieces et l’inseret dans les DropBoxes 3.………………………………. 4.Gerer les positions des DropBoxes par le conteneur Hstack. Class DropBox a creer, gerer les visual properties de DrogBox Class DragPiece a creer, gerer les visual properties de DragPiece SmartGwt Page 1/20

14 1- Creations des DropBoxes : 2- creation des DragPieces et l’insertion dans les DropBoxes Permet de creer la boitte gris Location de l’image de DropBox creer Creer le DragPiece SmartGwt Page 1/20

15 Permet de preciser le types des pieces qui peut être déposer dans le DropBox Initialise le hstack visual component Ajouter les DropBoxes creer a le conteneur Hstack SmartGwt Page 1/20

16 Definie les proprietes de visual component SmartGwt Page 1/20

17 1 Initiate the databound visual component designed to display, query, and edit our structured data Define the component visual properties Define the component Drag and Drop properties Layout Management Define the DataSource Fields SmartGwt Page 1/20

18 UIObjectUIWidgetBaseWidgetCanvas CalendarListGridTileLayoutTileGridDynamicFormLayoutHStackHLayoutVStackVLayoutImg The Img Widget class implements a single widget that displays a single image  void setShowEdges(Boolean showEdges) An EdgedCanvas should be used to show image-based edges around this component.  void setEdgeImage(String edgeImage) Extensions for each corner or edge piece will be added to this image URL, before the extension..  void setCanDrop(Boolean canDrop): Indicates that this object can be dropped on top of other widgets.