La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 31/05/2014 Transparent - 1 XUL XBL XPCOM XPI XUL XBL XPCOM.

Présentations similaires


Présentation au sujet: "XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 31/05/2014 Transparent - 1 XUL XBL XPCOM XPI XUL XBL XPCOM."— Transcription de la présentation:

1 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI /05/2014 Transparent - 1 XUL XBL XPCOM XPI XUL XBL XPCOM XPI Plasticité des Interfaces utilise les répertoires:../../LANGDOC/COURS./EXEMPLES/../LANGDOC/XUL utilise les répertoires:../../LANGDOC/COURS./EXEMPLES/../LANGDOC/XUL Web GUI Mozilla Project Web GUI Mozilla Project

2 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 2 31/05/2014 Bien s'installer sous XUL/Firefox sous FF (Mozilla) n désactiver le cache XUL, dans Profiles/..defaut/prefs.js sous Gecko 1.9 (FF3, Thunderbird 3) n Xul distant est intégré n les "manifest chrome" sont à placer dans le répertoire chrome/ sous Gecko 2.0 (FF4+, Thunderbird 3.3) n Xul distant n'est pas supporté par défaut n les "manifest chrome" sont à déclarer dans chrome.manifest les "manifest chrome" sont à déclarer dans chrome.manifest user_pref( "nglayout.disable_xul_cache", true); user_pref( "nglayout.disable_xul_fastload", true); installer l'extension XUL Remote Manager et ajouter " " à la "whitelist" ATTENTION - RDF XUL : pas d'espaces dans les paths; par ex "C:\Documents and Settings\Bureau"

3 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 3 31/05/2014 Sommaire du Cours n Introduction - Web GUI & Clients "Riches" Introduction - Web GUI & Clients "Riches" n Chap I - Mozilla & XPFE/XUL: Historique & Standards Chap I - Mozilla & XPFE/XUL: Historique & Standards n Chap II - XUL: les bases- Box & Widgets Chap II - XUL: les bases- Box & Widgets n Chap III - XUL: le style - Rendu avec CSShap III - XUL: le style - Rendu avec CSS n Chap IV - XUL: Dynamique avec JS+DOM Chap IV - XUL: Dynamique avec JS+DOM n Chap V - XUL: Génération de Contenu avec RDF Chap V - XUL: Génération de Contenu avec RDF n Chap VI - XUL: Les Widgets avec XBL Chap VI - XUL: Les Widgets avec XBL n Chap VII - XUL: Modularité avec les "overlays" Chap VII - XUL: Modularité avec les "overlays" n Chap VIII - XUL: Communication avec AJAX & XPCOM Chap VIII - XUL: Communication avec AJAX & XPCOM n Chap IX - XUL: et les Autres Chap IX - XUL: et les Autres n Chap X- XUL: Services Web avec SOAP n Chap XI - XUL: Distribution & Installation n Annexe I - RDF & OWL Annexe I - RDF & OWL n Annexe II - AJAX Annexe II - AJAX

4 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 4 31/05/2014 n Web cours "XML" SI-4 Mozilla Development Center https://developer.mozilla.org/Fr https://developer.mozilla.org/Fr XULPlanet XULFR.org mozilla/fr/developpeurs/http://mozillazine-fr.org/annuaire- mozilla/fr/developpeurs/ xul.fr XULforum n Biblio: Xul Tutorial (pdf) Rapid Application development with Mozilla ouvrages disponibles. ouvrages disponibles Références

5 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 5 31/05/2014 n-Tier Architecture for Web light Client Presentation Layer Client Data Layer Application (Business) Layer Application (Business) Layers Server HTML CSS DHTML, JS AJAX XML XSL Data Bases C, Java, C++

6 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Server Transparent 6 31/05/2014 RIA Architecture Rich Client Data Base Datas Style Structure XML, RDF CSS, XSL Networking Contrôle & Web Services JS, DOM SOAP, WSDL http, AJAX Applicatio n

7 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 7 31/05/2014 "Light Client" vs "Rich Client" (R.I.A.) Rich Client XML XSL Data Bases "import" of fonctionalities dynamic interface transform metadata multi-formats HTML, CSS DHTML, JS, AJAX reduce the back&forth needs

8 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf 31/05/2014 Web GUI main concepts n Layout Boxes or Canvas or both ? Attribute Rules vs Programmation Structure vs Computation ? n Widgets n Event Programming & Animation n Data Generation & "Pouring" n Media-type Processing n Networking n Design

9 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf 31/05/2014 State of "my"Art j.b.X. (just before Xul) Web GUI based on n Navigators n XML + XSL + CSS as input n with XSLT producing (X)HTML + CSS JS with actions changing via DOM XML source or XSL source Dynamic refresh of the XML rendering Dynamic changes on widgets of the GUI.xsl

10 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf 31/05/2014 XML as metadatas for Web GUI n SPRY (Adobe Labs) SPRY using XML to describe "contents" using JS & DOM to generate wIdgets & "contents" using AJAX to access/modify "contents" n from RDF, XML to PHP/SQLRDF, XML using XML/RDF to describe "contents" using XSLT from XML to SQL exporting from SQL to XML n XSLT XSLT using XML/RDF to describe "contents" using XSLT to generate wIdgets (DHTML, JS) using XSLT to generate/modify "contents" (HTML) using XSLT to generate/modify style (CSS) n XUL (Mozilla Foundation) XUL using RDFL to describe "contents" using XUL to generate WIdgets & "contents" using AJAX to access "contents" using JASON, XML-RPC, WSDL for "networking" and "web services"

11 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf XSL JS 31/05/2014 XML as metadatas & XSLT CSS HTML XSLT XML rdf XML.xsl XSLT Pfz's State of the Art RefsWeb TechnosWeb Exam LD 2010

12 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 12 31/05/2014 Web Reference Browser de XML vers HTML5+CSS3 html xml css via xsl css dtd xsd metadata.xml

13 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 13 31/05/2014 Doc Example Browsers de XML vers HTML5+CSS3+JS html metadata xml css via xsl xsd dtd js css TechnosWeb.xml

14 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 14 31/05/2014 XML (meta) modèle de données (ERD ) 1,* 1,? n,m uses: n,m used_by: n,m Type Aut Path Keyword

15 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf JS 31/05/2014 R.I.A. - XML as metadatas & SPRY CSS, XSL HTML DHTML AJAX SPRY Rich Client XML rdf DHTML XML rdf

16 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 16 31/05/2014 Spry: framework JS pour dHTML n Librairie (libre) JS par Adobe Labs n Conception Création assistée de Widgets Effets dynamiques avec JS Définition de "Data Sets" à partir XML/RDF Génération de contenus HTML Gestion des Interfaces/HTTP Extensible ("Open") n Implémentation (X)HTML + "Include" JS DOM XML CSS HTTP + AJAX intégration complète avec DW CS n sur le Web ogies/spry/ ogies/spry/ ex.php/Spry ex.php/Spry /spry/ /spry/ ogies/spry/demos/index.html ogies/spry/demos/index.html

17 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 17 31/05/2014 Spry - Schéma & Utilisation ….. cours 1 cours 2 cours 3 HTML généré interpréteur JS Dom

18 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 18 31/05/2014 Spry - Génération de XML DATA SETs var dsBib = new Spry.Data.XMLDataSet("bib.xml", "Bib/Article"); dsBib.setColumnType("Date", "date"); Titre Date ref {Title} {Date} mis à plat "flatening"

19 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 19 31/05/2014 Spry: Démos

20 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Comment un Arbre (une forêt, en fait)...? XML Parseur XMLs CSS XSL DOM XML DOM XSL

21 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf...peut en cacher un Autre Comment un Arbre... ? XML Parseur XMLs CSS XSL DOM XML DOM XSL DOM

22 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Peut en cacher un Autre Peut en cacher un Autre... ? XML Parseur XMLs CSS XSL DOM XML DOM XSL DOM... qui contrôle (modifie) les 2 premiers

23 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Peut en cacher un Autre Peut en cacher un Autre... ? XML Parseur XMLs CSS XSL DOM XML DOM XSL DOM... qui contrôle (modifie) les 2 premiers

24 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf 31/05/2014 Goto the Best of Xul n Xul Element Table Xul Element Table n Dynamic DOM Dynamic DOM cursor coordinates add (copy) Buttons check from input delete menu item scroll To Visible n Slide-show (anything) with XBL Slide-show (anything) with XBL n XUL with SVG XUL with SVG n Pfz's Tutorial Pfz's Tutorial n Xul with RDF Xul with RDF n XUL with XPCOM XUL with XPCOM

25 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI /05/2014 Transparent - 25 Chap I - Mozilla & XPFE/XUL Historique Standards Lexique Références Architecture XPFE Historique Standards Lexique Références Architecture XPFE

26 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 26 31/05/2014 Historique & Standards Projet Mozilla code Netscape => Open Source (1998) Gecko: moteur de "rendu" HTML 4.0 XPFE: "Cross Platform Front-End" Suite Mozilla 1.7 & 1.8 => SeaMonkey XUL - XML User interface Langage XUL utilise les Standards du W3C XML – eXtensible Markup Language HTML 4, 5 & XHTML CSS 2 & CSS3 - Cascading Style Sheets DTD DOM & JS 1.5 (ECMAScript) RDF - Resource Description FrameWork RSS, SOAP, AJAX, SVG Objectif: Développement d'Interfaces clients portables Clients "riches" entre "légers" et "lourds"

27 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Events DOMs XPConnect Transparent 27 LDAP SOAP POP files Sockets RDF HTML XUL XBL XML SVG JS CSS XUL & XPFE

28 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 28 31/05/2014 Architecture XPFE: le 4 ième Tiers Présentation XUL supporte CSS 2 XUL supporte les formats image XUL utilise des thèmes ("skins") Comportement (Contrôle) XUL utilise DOM & JS1.5 XBL ("Bindings") pour décrire le comportement des "widgets" XPFE - Communication XUL supporte AJAX XPCOM pour les Services Web,etc. via XPConnect Contenu XUL supporte (X)HTML, XML, RDF/XML MathML & SVG XUL - Conteneur XUL - la description du "layout" des conteneurs (box) automatisation avec RDF et les templates XUL utilise des locales (DTD, localisation) XUL XBL XML RDF CONTENT TREE LAYOUT BOX TREE Why only one Tree, when we may have Two ?

29 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 29 31/05/2014 Mozilla Structure & Components n Packages "Content".xul pour les "windows" et "elements" browser.xul.js pour les fichiers de script browser.js contents.rdf n Packages "Skin" fichiers de style.css: browser.css fichiers images n Packages "Locale" fichiers.text (;dtd) pour les textes à afficher en-US.jar fr-FR.jar browse.dtd le répertoire "chrome/" file.manifest l'url chrome://global/skin/extensions + privilèges Utilisation "pointilleuse" /Mozilla Firefox /chrome

30 XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI /05/2014 Transparent - 30 Intro Boxes & Spacers Texts & Buttons ToolBar & Menu Intro Boxes & Spacers Texts & Buttons ToolBar & Menu Group & Tabboxes Lists & Grids Panels & Splitters Stack & Decks Group & Tabboxes Lists & Grids Panels & Splitters Stack & Decks Layout Tree Chap II - XUL - les Bases

31 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 31 31/05/2014 Entrez votre critère pour démarrer la recherche.

32 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 32 31/05/2014 id, class, style orient width, heigth, min-, max- flex pack align

33 ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Transparent 33 31/05/2014


Télécharger ppt "XPFE et le XUL sous Mozilla ajax &CSS XUL XPFE &JS &RDF XBL XPCOM rdf Paul Franchi SI 5 2013-14 31/05/2014 Transparent - 1 XUL XBL XPCOM XPI XUL XBL XPCOM."

Présentations similaires


Annonces Google