Jump to: navigation, search

Difference between revisions of "XML CSS = IFigure"

(Goals:)
Line 27: Line 27:
 
== Getting the source ==
 
== Getting the source ==
  
__ please enter __
+
[https://eclipse-incub.svn.sourceforge.net/svnroot/eclipse-incub/org.eclipse.xmlfigure XmlFigure]
 +
[https://eclipse-incub.svn.sourceforge.net/svnroot/eclipse-incub/org.eclipse.xmlfigure.examples XmlFigure Examples]
 +
 
 +
== How it works: ==
 +
:[[Image:xmlfigure_architecture.jpg]]
 +
Description:
 +
 
 +
== Usecases: ==
 +
 
 +
 
 +
== Examples: ==
 +
Source:
 +
<source lang="xml">
 +
<div background="white">
 +
<div name="number" style="padding:1px 5px 2px 5px; background:#ffffcc; border:1px solid #d0cec4;">1.2.3</div>
 +
<div border="2px solid red" padding="2px" background="lightGray">
 +
<label value="White label" fontName="Arial" fontSize="20" fontColor="white" />
 +
<label value="Green label" fontName="Arial" fontSize="15" fontColor="green" />
 +
<div border="1px solid #ffffcc" padding="3px">
 +
<label value="Black label" fontName="Arial" fontSize="10" fontColor="black" />
 +
<label value="Red label" fontName="Arial" fontSize="8" fontColor="red" />
 +
</div>
 +
</div>
 +
</div>
 +
</source>
 +
Result:
 +
:[[Image:xmlfigure_div_example.png]]
 +
 
 +
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:Progress.gif]]
 +
border-top [[Image:Progress.gif]]
 +
border-left [[Image:Progress.gif]]
 +
border-right [[Image:Progress.gif]]
 +
 
 +
padding [[Image:Ok_green.gif]]
 +
margin [[Image:Ok_green.gif]]
 +
background [[Image:Ok_green.gif]]
 +
spacing [[Image:Ok_green.gif]]
 +
 
 +
Another ideas:
 +
 
 +
 
 +
Links
 +
 
 +
http://www.mozilla.org/newlayout/doc/layout-2006-12-14/master.xhtml

Revision as of 14:02, 10 July 2008

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). Progress.gif
  • Provide possibility to extend model. For example by SVG (use Apache Batik as renderer).
  • Create renderer using created usecases.Progress.gif


Getting the source

XmlFigure XmlFigure Examples

How it works:

Xmlfigure architecture.jpg

Description:

Usecases:

Examples:

Source:

<div background="white">
	<div name="number" style="padding:1px 5px 2px 5px; background:#ffffcc; border:1px solid #d0cec4;">1.2.3</div>
	<div border="2px solid red" padding="2px" background="lightGray">
		<label value="White label" fontName="Arial" fontSize="20" fontColor="white" />
		<label value="Green label" fontName="Arial" fontSize="15" fontColor="green" />
		<div border="1px solid #ffffcc" padding="3px">
			<label value="Black label" fontName="Arial" fontSize="10" fontColor="black" />
			<label value="Red label" fontName="Arial" fontSize="8" fontColor="red" />
		</div>
	</div>
</div>

Result:

Xmlfigure div example.png

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 Progress.gif border-top Progress.gif border-left Progress.gif border-right Progress.gif

padding Ok green.gif margin Ok green.gif background Ok green.gif spacing Ok green.gif

Another ideas:


Links

http://www.mozilla.org/newlayout/doc/layout-2006-12-14/master.xhtml