Jump to: navigation, search

Difference between revisions of "XML CSS = IFigure"

(New page: == Abstract: == I think everyone who comes across with GEF notices how is it difficult to create IFigure elements. A simple IFigure element which consists of other different Figure element...)
 
m
 
(19 intermediate revisions by 2 users not shown)
Line 1: Line 1:
== Abstract: ==
+
== Abstract ==
 
I think everyone who comes across with GEF notices how is it difficult to create IFigure elements.
 
I think everyone who comes across with GEF notices how is it difficult to create IFigure elements.
 
A simple IFigure element which consists of other different Figure elements is often needed to be developed on Java.
 
A simple IFigure element which consists of other different Figure elements is often needed to be developed on Java.
Line 5: Line 5:
 
The goals of this project are: to create a library that helps a GEF user to make IFigure easier with the help subset of HTML and CSS.
 
The goals of this project are: to create a library that helps a GEF user to make IFigure easier with the help subset of HTML and CSS.
  
=== Participants: ===
+
=== Participants ===
 
* Student: Andrey Vakunov
 
* Student: Andrey Vakunov
 
* Mentor: Andrey Platov  
 
* Mentor: Andrey Platov  
  
=== Goals: ===  
+
=== Goals ===  
  
 
To simplify a GMF/GEF/Draw2d user the creation of IFigure elements.
 
To simplify a GMF/GEF/Draw2d user the creation of IFigure elements.
Line 20: Line 20:
  
 
* Define usecases with HTML and CSS. [[Image:Ok_green.gif]]
 
* Define usecases with HTML and CSS. [[Image:Ok_green.gif]]
* Define subset of possible elements that needs to be supported (use EMF model). [[Image:Progress.gif]]  
+
* Define subset of possible elements that needs to be supported (use EMF model). [[Image:Ok_green.gif]]  
* Provide possibility to extend model. For example by SVG (use Apache Batik as renderer).
+
* Provide possibility to extend model. For example by SVG (use Apache Batik as renderer). [[Image:Progress.gif]]
 
* Create renderer using created usecases.[[Image:Progress.gif]]
 
* Create renderer using created usecases.[[Image:Progress.gif]]
 +
 +
 +
== Getting the source ==
 +
 +
*[https://eclipse-incub.svn.sourceforge.net/svnroot/eclipse-incub/org.eclipse.xmlfigure XmlFigure Core]
 +
*[https://eclipse-incub.svn.sourceforge.net/svnroot/eclipse-incub/org.eclipse.xmlfigure.ui XmlFigure UI]
 +
 +
* Buckminster configuration
 +
** [https://eclipse-incub.svn.sourceforge.net/svnroot/eclipse-incub/org.eclipse.xmlfigure.examples/xmlfigure.cquery xmlfigure.cquery]
 +
** [https://eclipse-incub.svn.sourceforge.net/svnroot/eclipse-incub/org.eclipse.xmlfigure.examples/xmlfigure.rmap xmlfigure.rmap]
 +
== How it works ==
 +
:[[Image:xmlfigure_architecture.jpg]]
 +
Description:
 +
# At the first step the set of XML and CSS go to the number of parsers. Particularly, there are XML and CSS parsers. Now, there is simple realization of XML parser. There has not been CSS parser yet (just a fake implementation), but its realization is planed with the help of org.w3c.css.sac and org.apache.batik.css bundles.
 +
# The result of CSS parser's work is the styles' tree.
 +
# The result of XML parser's work is one of the model objects (step 3). The model is built using EMF. There are such entities as Button, Container, Div, Image, Label, Rendereable, Table, TableCell, TableRow
 +
# At the step 4 there is a creation of MVC controllers tree, that are called Renderer.
 +
# At the step 5 the styles are applied to controller tree.
 +
# At the step 6 there is a view presentation of model using IFigure elements.
 +
 +
Parts:
 +
# Element description consists of several parts:
 +
## model element ( extends of org.eclipse.xmlfigure.model.Rendereable). Contains attributes, which may contain an element and relations between other model elements, and also an annotation which contains tag name
 +
## parsing element (extends of org.eclipse.xmlfigure.parsers.ElementParser ). Describes the transformation of org.w3c.dom.Element to the model element. By creating the new element ElementParser may not be created, the standard implementation uses the information about EMF model.
 +
## controller element(extends of org.eclipse.xmlfigure.editpart.CommonEditPart). Controller is the part of MVC pattern. It contains the relation between the model and the view. It is also responsible for applying styles.
 +
## view element( standard org.eclipse.draw2d.Figure)
 +
# Style description consists of several parts:
 +
## Model element ( extends of org.eclipse.xmlfigure.model.Style)
 +
## It is responsible for style model and parsing of org.w3c.css.sac.LexicalUnit elements
 +
## Applying element( extends of StyleApply ). This class describes how the style works, how it applies to Figure, how it merges with other Styles.
 +
# UI part consists of:
 +
## New Xml Figure Wizard (File > New > Other... > Other > New XML Figure)
 +
## Xml Figure Editor (standard WST editor with redefine OutLine View).
 +
## Additionally made new contentType and new xsd are registered in Eclipse XML Catalog
 +
 +
org.eclipse.xmlfigure.XmlFigure class is a library entrance class. The example of using this class can be seen in org.eclipse.xmlfigure.ui.XmlFigureOutlinePage (method redraw).
 +
 +
 +
What is planed:
 +
# To extend XML parser
 +
## the parser has to support the extension. Particularly, there must be the possibility to add some tags from SVG namespace in XML
 +
## to use standard parser
 +
# Usecases implementation
 +
# Errors handling
 +
# More styles implementation
 +
 +
== Usecases ==
 +
:[[Image:xmlfigure_example1.png]] [[Image:xmlfigure_example2.png]] [[Image:xmlfigure_example3.png]]
 +
:[https://eclipse-incub.svn.sourceforge.net/svnroot/eclipse-incub/org.eclipse.xmlfigure.examples/html More usecases]
 +
== Model ==
 +
 +
Elements with attributes and applied styles:
 +
 +
All elements attributes: style, class
 +
 +
* table
 +
** Styles: spacing, background, border, border-top, border-bottom,border-left,border-right
 +
* tr
 +
* td
 +
** Styles: background, padding, spacing, border, border-top, border-bottom,border-left,border-right
 +
* div
 +
** Styles: background, padding, spacing, border, border-top, border-bottom,border-left,border-right
 +
** Attributes:
 +
*** horizontal: boolean
 +
*** width : int
 +
*** height : int
 +
* label
 +
** Styles: background, border, border-top, border-bottom,border-left,border-right, font, padding
 +
** Attributes:
 +
*** value : string
 +
* button
 +
** Styles: border, border-top, border-bottom,border-left,border-right, font, background, padding
 +
** Attributes:
 +
*** label : string
 +
* image
 +
** Attributes:
 +
*** href : string
 +
[https://eclipse-incub.svn.sourceforge.net/svnroot/eclipse-incub/org.eclipse.xmlfigure.ui/xmlfigure.xsd XSD]
 +
 +
== User Interface ==
 +
First you can create new figure file using wizard
 +
:[[Image:Xmlfigure_wizard.png]]
 +
Open XML Figure editor.
 +
:[[Image:Xmlfigure_openeditor.png]]
 +
And start work with editor (Outline View shows result of XMLFigure library)
 +
:[[Image:Xmlfigure_editor.png]]
 +
 +
== Samples ==
 +
:[[Image:Xmlfigure_uml_class_example.png‎]]
 +
 +
[https://eclipse-incub.svn.sourceforge.net/svnroot/eclipse-incub/org.eclipse.xmlfigure.examples/figures/UML_class.figure Source file]
 +
 +
:[[Image:Xmlfigure_topicref_example.png‎]]
 +
[https://eclipse-incub.svn.sourceforge.net/svnroot/eclipse-incub/org.eclipse.xmlfigure.examples/figures/topicref.figure Source file]
 +
 +
== Community proposals ==
 +
 +
Proposed HTML tags:
 +
* table [[Image:Ok_green.gif]]
 +
* tr [[Image:Ok_green.gif]]
 +
* td [[Image:Ok_green.gif]]
 +
* div [[Image:Ok_green.gif]]
 +
* label [[Image:Ok_green.gif]]
 +
* button [[Image:Ok_green.gif]]
 +
* image [[Image:Ok_green.gif]]
 +
 +
Proposed CSS styles:
 +
* border [[Image:Ok_green.gif]]
 +
* border-bottom [[Image:Ok_green.gif]]
 +
* border-top [[Image:Ok_green.gif]]
 +
* border-left [[Image:Ok_green.gif]]
 +
* border-right [[Image:Ok_green.gif]]
 +
* padding [[Image:Ok_green.gif]]
 +
* background [[Image:Ok_green.gif]]
 +
* spacing [[Image:Ok_green.gif]]
 +
* margin [[Image:Progress.gif]]
 +
 +
Another ideas:
 +
* Add Scripting functionality
 +
 +
== Links: ==
 +
 +
[http://www.mozilla.org/newlayout/doc/layout-2006-12-14/master.xhtml Mozilla's Layout Engine]

Latest revision as of 05:49, 27 May 2010

Abstract

I think everyone who comes across with GEF notices how is it difficult to create IFigure elements. A simple IFigure element which consists of other different Figure elements is often needed to be developed on Java. But there are more comfortable methods for solving this task. These are HTML and CSS. The goals of this project are: to create a library that helps a GEF user to make IFigure easier with the help subset of HTML and CSS.

Participants

  • Student: Andrey Vakunov
  • Mentor: Andrey Platov

Goals

To simplify a GMF/GEF/Draw2d user the creation of IFigure elements. To make a possibility to create IFigure objects with the help of subset HTML and CSS:

  • the possibility to use div, table, tr, td etc. tags. (subset will be discussed with mentor)
  • possibility to use basic CSS elements.


Current status:

  • Define usecases with HTML and CSS. Ok green.gif
  • Define subset of possible elements that needs to be supported (use EMF model). Ok green.gif
  • Provide possibility to extend model. For example by SVG (use Apache Batik as renderer). Progress.gif
  • Create renderer using created usecases.Progress.gif


Getting the source

How it works

Xmlfigure architecture.jpg

Description:

  1. At the first step the set of XML and CSS go to the number of parsers. Particularly, there are XML and CSS parsers. Now, there is simple realization of XML parser. There has not been CSS parser yet (just a fake implementation), but its realization is planed with the help of org.w3c.css.sac and org.apache.batik.css bundles.
  2. The result of CSS parser's work is the styles' tree.
  3. The result of XML parser's work is one of the model objects (step 3). The model is built using EMF. There are such entities as Button, Container, Div, Image, Label, Rendereable, Table, TableCell, TableRow
  4. At the step 4 there is a creation of MVC controllers tree, that are called Renderer.
  5. At the step 5 the styles are applied to controller tree.
  6. At the step 6 there is a view presentation of model using IFigure elements.

Parts:

  1. Element description consists of several parts:
    1. model element ( extends of org.eclipse.xmlfigure.model.Rendereable). Contains attributes, which may contain an element and relations between other model elements, and also an annotation which contains tag name
    2. parsing element (extends of org.eclipse.xmlfigure.parsers.ElementParser ). Describes the transformation of org.w3c.dom.Element to the model element. By creating the new element ElementParser may not be created, the standard implementation uses the information about EMF model.
    3. controller element(extends of org.eclipse.xmlfigure.editpart.CommonEditPart). Controller is the part of MVC pattern. It contains the relation between the model and the view. It is also responsible for applying styles.
    4. view element( standard org.eclipse.draw2d.Figure)
  2. Style description consists of several parts:
    1. Model element ( extends of org.eclipse.xmlfigure.model.Style)
    2. It is responsible for style model and parsing of org.w3c.css.sac.LexicalUnit elements
    3. Applying element( extends of StyleApply ). This class describes how the style works, how it applies to Figure, how it merges with other Styles.
  3. UI part consists of:
    1. New Xml Figure Wizard (File > New > Other... > Other > New XML Figure)
    2. Xml Figure Editor (standard WST editor with redefine OutLine View).
    3. Additionally made new contentType and new xsd are registered in Eclipse XML Catalog

org.eclipse.xmlfigure.XmlFigure class is a library entrance class. The example of using this class can be seen in org.eclipse.xmlfigure.ui.XmlFigureOutlinePage (method redraw).


What is planed:

  1. To extend XML parser
    1. the parser has to support the extension. Particularly, there must be the possibility to add some tags from SVG namespace in XML
    2. to use standard parser
  2. Usecases implementation
  3. Errors handling
  4. More styles implementation

Usecases

Xmlfigure example1.png Xmlfigure example2.png Xmlfigure example3.png
More usecases

Model

Elements with attributes and applied styles:

All elements attributes: style, class

  • table
    • Styles: spacing, background, border, border-top, border-bottom,border-left,border-right
  • tr
  • td
    • Styles: background, padding, spacing, border, border-top, border-bottom,border-left,border-right
  • div
    • Styles: background, padding, spacing, border, border-top, border-bottom,border-left,border-right
    • Attributes:
      • horizontal: boolean
      • width : int
      • height : int
  • label
    • Styles: background, border, border-top, border-bottom,border-left,border-right, font, padding
    • Attributes:
      • value : string
  • button
    • Styles: border, border-top, border-bottom,border-left,border-right, font, background, padding
    • Attributes:
      • label : string
  • image
    • Attributes:
      • href : string

XSD

User Interface

First you can create new figure file using wizard

Xmlfigure wizard.png

Open XML Figure editor.

Xmlfigure openeditor.png

And start work with editor (Outline View shows result of XMLFigure library)

Xmlfigure editor.png

Samples

Xmlfigure uml class example.png

Source file

Xmlfigure topicref example.png

Source file

Community proposals

Proposed HTML tags:

  • table Ok green.gif
  • tr Ok green.gif
  • td Ok green.gif
  • div Ok green.gif
  • label Ok green.gif
  • button Ok green.gif
  • image Ok green.gif

Proposed CSS styles:

  • border Ok green.gif
  • border-bottom Ok green.gif
  • border-top Ok green.gif
  • border-left Ok green.gif
  • border-right Ok green.gif
  • padding Ok green.gif
  • background Ok green.gif
  • spacing Ok green.gif
  • margin Progress.gif

Another ideas:

  • Add Scripting functionality

Links:

Mozilla's Layout Engine