Skip to main content
aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorcletavernie2013-04-23 04:28:06 -0400
committercletavernie2013-04-23 04:28:06 -0400
commitef9f556acad6ca18a756ee961cb0fdbe9fc4e3b8 (patch)
treeb4c4c511e590f10aa9b713c4d77bdc334856ff8d /plugins/doc
parent4ffeb1fccc1d045501550de4fd0179741819ee30 (diff)
downloadorg.eclipse.papyrus-ef9f556acad6ca18a756ee961cb0fdbe9fc4e3b8.tar.gz
org.eclipse.papyrus-ef9f556acad6ca18a756ee961cb0fdbe9fc4e3b8.tar.xz
org.eclipse.papyrus-ef9f556acad6ca18a756ee961cb0fdbe9fc4e3b8.zip
399858: [Documentation] Papyrus shall have an embedded documentation
https://bugs.eclipse.org/bugs/show_bug.cgi?id=399858 402655: [Documentation] Diagram Stylesheets (CSS) documentation https://bugs.eclipse.org/bugs/show_bug.cgi?id=402655
Diffstat (limited to 'plugins/doc')
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/.project22
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/.settings/org.eclipse.core.resources.prefs3
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/META-INF/MANIFEST.MF8
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/about.html28
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/build.properties5
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/plugin.xml16
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_customStyle.pngbin0 -> 59693 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_default_style.pngbin0 -> 14804 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_export_style.pngbin0 -> 38815 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_import_stylesheet.pngbin0 -> 42793 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_installation.pngbin0 -> 71944 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_no_theme.pngbin0 -> 7039 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_theme.pngbin0 -> 11942 bytes
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css-main-toc.xml7
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css-toc.xml28
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css.html373
-rw-r--r--plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css.mediawiki197
17 files changed, 687 insertions, 0 deletions
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/.project b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/.project
new file mode 100644
index 00000000000..c10357f5488
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/.project
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+ <name>org.eclipse.papyrus.infra.gmfdiag.css.doc</name>
+ <comment></comment>
+ <projects>
+ </projects>
+ <buildSpec>
+ <buildCommand>
+ <name>org.eclipse.pde.ManifestBuilder</name>
+ <arguments>
+ </arguments>
+ </buildCommand>
+ <buildCommand>
+ <name>org.eclipse.pde.SchemaBuilder</name>
+ <arguments>
+ </arguments>
+ </buildCommand>
+ </buildSpec>
+ <natures>
+ <nature>org.eclipse.pde.PluginNature</nature>
+ </natures>
+</projectDescription>
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/.settings/org.eclipse.core.resources.prefs b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/.settings/org.eclipse.core.resources.prefs
new file mode 100644
index 00000000000..5f6df6d8ea8
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/.settings/org.eclipse.core.resources.prefs
@@ -0,0 +1,3 @@
+eclipse.preferences.version=1
+encoding//resource/css-toc.xml=utf-8
+encoding//resource/css.html=utf-8
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/META-INF/MANIFEST.MF b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/META-INF/MANIFEST.MF
new file mode 100644
index 00000000000..e18948d8d45
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/META-INF/MANIFEST.MF
@@ -0,0 +1,8 @@
+Manifest-Version: 1.0
+Bundle-ManifestVersion: 2
+Bundle-Name: CSS Documentation (Incubation)
+Bundle-SymbolicName: org.eclipse.papyrus.infra.gmfdiag.css.doc;singleton:=true
+Bundle-Version: 0.10.0.qualifier
+Bundle-Vendor: Eclipse Modeling Project
+Require-Bundle: org.eclipse.help;bundle-version="3.6.0",
+ org.eclipse.papyrus.infra.doc;bundle-version="0.10.0"
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/about.html b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/about.html
new file mode 100644
index 00000000000..209103075a7
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/about.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
+<title>About</title>
+</head>
+<body lang="EN-US">
+<h2>About This Content</h2>
+
+<p>November 14, 2008</p>
+<h3>License</h3>
+
+<p>The Eclipse Foundation makes available all content in this plug-in (&quot;Content&quot;). Unless otherwise
+indicated below, the Content is provided to you under the terms and conditions of the
+Eclipse Public License Version 1.0 (&quot;EPL&quot;). A copy of the EPL is available
+at <a href="http://www.eclipse.org/legal/epl-v10.html">http://www.eclipse.org/legal/epl-v10.html</a>.
+For purposes of the EPL, &quot;Program&quot; will mean the Content.</p>
+
+<p>If you did not receive this Content directly from the Eclipse Foundation, the Content is
+being redistributed by another party (&quot;Redistributor&quot;) and different terms and conditions may
+apply to your use of any object code in the Content. Check the Redistributor's license that was
+provided with the Content. If no such license exists, contact the Redistributor. Unless otherwise
+indicated below, the terms and conditions of the EPL still apply to any source code in the Content
+and such source code may be obtained at <a href="http://www.eclipse.org">http://www.eclipse.org</a>.</p>
+
+</body>
+</html> \ No newline at end of file
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/build.properties b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/build.properties
new file mode 100644
index 00000000000..4887a1c42cb
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/build.properties
@@ -0,0 +1,5 @@
+bin.includes = META-INF/,\
+ about.html,\
+ resource/,\
+ plugin.xml
+src.includes = about.html
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/plugin.xml b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/plugin.xml
new file mode 100644
index 00000000000..bb0a32197dd
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/plugin.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<?eclipse version="3.4"?>
+<plugin>
+ <extension
+ point="org.eclipse.help.toc">
+ <toc
+ file="resource/css-main-toc.xml"
+ primary="false">
+ </toc>
+ <toc
+ file="resource/css-toc.xml"
+ primary="false">
+ </toc>
+ </extension>
+
+</plugin>
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_customStyle.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_customStyle.png
new file mode 100644
index 00000000000..fd0122f970e
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_customStyle.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_default_style.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_default_style.png
new file mode 100644
index 00000000000..80df20f3ffd
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_default_style.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_export_style.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_export_style.png
new file mode 100644
index 00000000000..6a930cf737a
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_export_style.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_import_stylesheet.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_import_stylesheet.png
new file mode 100644
index 00000000000..4d34280c2d6
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_import_stylesheet.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_installation.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_installation.png
new file mode 100644
index 00000000000..6ec9164e4d7
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_installation.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_no_theme.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_no_theme.png
new file mode 100644
index 00000000000..e890a228d35
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_no_theme.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_theme.png b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_theme.png
new file mode 100644
index 00000000000..fe6558c5d11
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/Papyrus_CSS_theme.png
Binary files differ
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css-main-toc.xml b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css-main-toc.xml
new file mode 100644
index 00000000000..acaad6d159c
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css-main-toc.xml
@@ -0,0 +1,7 @@
+<?xml version='1.0' encoding='utf-8' ?>
+<toc label="Search" link_to="../org.eclipse.papyrus.infra.doc/toc.xml#PapyrusDocUser">
+ <topic href="resource/css.html" label="Diagram Stylesheets">
+ <link toc="resource/css-toc.xml"/>
+ <anchor id="CSS"/>
+ </topic>
+</toc> \ No newline at end of file
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css-toc.xml b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css-toc.xml
new file mode 100644
index 00000000000..0d6d4bf4734
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css-toc.xml
@@ -0,0 +1,28 @@
+<?xml version='1.0' encoding='utf-8' ?>
+<toc topic="resource/css.html" label="css">
+ <topic href="resource/css.html" label="Introduction"></topic>
+ <topic href="resource/css.html#Installation" label="Installation"></topic>
+ <topic href="resource/css.html#Using_StyleSheets" label="Using StyleSheets"></topic>
+ <topic href="resource/css.html#Editing_a_StyleSheet" label="Editing a StyleSheet">
+ <topic href="resource/css.html#Manually:_The_CSS_Syntax" label="Manually: The CSS Syntax">
+ <topic href="resource/css.html#Syntax_elements" label="Syntax elements"></topic>
+ <topic href="resource/css.html#Examples" label="Examples"></topic>
+ </topic>
+ <topic href="resource/css.html#With_the_Papyrus_tooling" label="With the Papyrus tooling"></topic>
+ </topic>
+ <topic href="resource/css.html#Manipulating_styles" label="Manipulating styles"></topic>
+ <topic href="resource/css.html#Deploying_a_CSS_Theme" label="Deploying a CSS Theme"></topic>
+ <topic href="resource/css.html#Limitations_and_issues" label="Limitations and issues">
+ <topic href="resource/css.html#Selectors" label="Selectors">
+ <topic href="resource/css.html#Selector_inheritance" label="Selector inheritance"></topic>
+ <topic href="resource/css.html#Profile.2FStereotype_support" label="Profile/Stereotype support"></topic>
+ <topic href="resource/css.html#Labels_and_compartments" label="Labels and compartments"></topic>
+ <topic href="resource/css.html#Events_support" label="Events support"></topic>
+ </topic>
+ <topic href="resource/css.html#Stylesheets" label="Stylesheets">
+ <topic href="resource/css.html#Model_stylesheets" label="Model stylesheets"></topic>
+ <topic href="resource/css.html#Workspace_stylesheets" label="Workspace stylesheets"></topic>
+ </topic>
+ <topic href="resource/css.html#Bugs" label="Bugs"></topic>
+ </topic>
+</toc> \ No newline at end of file
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css.html b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css.html
new file mode 100644
index 00000000000..2732315b6df
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css.html
@@ -0,0 +1,373 @@
+<?xml version='1.0' encoding='utf-8' ?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+</head>
+<body>
+ <h1 id="Introduction">Introduction</h1>
+ <p>The standard UML specification provides a few hints to represent
+ graphical elements. However, it only focuses on the general
+ representation of these elements (e.g. A Class is a rectangle, with
+ optional compartments for its attributes and operations, and its name
+ should be displayed in italic if the Class is abstract).</p>
+ <p>Nevertheless, for a better readability (and even esthetic), the
+ user has a certain freedom for changing some graphical properties,
+ such as an Element’s color. Until now, in Papyrus, this customization
+ could be done by two complement means:</p>
+ <ul>
+ <li>Appearance tab (Properties view): change the appearance of
+ the selected element(s)</li>
+ <li>Preferences page: change the initial appearance of all newly
+ created element(s)</li>
+ </ul>
+ <p>While this allows defining a custom theme for our diagrams, this
+ mechanism suffers from a few limitations:</p>
+ <ul>
+ <li>It is not possible to create different categories of
+ appearance for the same semantic Element (e.g. “Blue Class” and
+ “Green class”). We’d have to create “Blue classes” and change some of
+ them to “Green” manually.</li>
+ <li>If we wanted to change the current theme, we’d have either to
+ change each object’s appearance one by one, or to write an automatic
+ transformation, which could be really complicated.</li>
+ <li>It is not easy to export a Theme, as they are stored in the
+ Eclipse preferences. It is almost impossible to ship a ready-to-use
+ distribution of Papyrus with a custom theme.</li>
+ </ul>
+ <p>
+ The release of Eclipse 4 Juno this summer gave us the opportunity to
+ rely on their CSS Engine to support Cascading StyleSheets in Papyrus
+ diagrams. Just like in web pages, the CSS format is used to separate
+ the contents of our diagrams from their appearance. It becomes
+ possible to change the appearance of a whole diagram, or even a set of
+ diagrams, independently of the number of represented elements, in a
+ single click.<br />
+ </p>
+ <h1 id="Installation">Installation</h1>
+ <p>The CSS Stylesheet support is not shipped in the base
+ installation of Papyrus. However, it can be easily installed from the
+ Papyrus discovery site. Select “Help”, “Install Papyrus Additional
+ Components”, and check “Diagram Stylesheets”.</p>
+ <p>
+ <img title="Installation" alt="Installation" border="0"
+ src="Papyrus_CSS_Installation.png" /><br />
+ </p>
+ <p>Press finish, restart Eclipse, and that's it.</p>
+ <p>Your diagrams should now look like the following:</p>
+ <p>
+ <img title="Papyrus diagram without CSS Theme"
+ alt="Papyrus diagram without CSS Theme" border="0"
+ src="Papyrus_CSS_no_theme.png" /><br />
+ </p>
+ <p>
+ <img title="Papyrus Diagram with CSS Theme"
+ alt="Papyrus Diagram with CSS Theme" border="0"
+ src="Papyrus_CSS_theme.png" /><br />
+ </p>
+ <p>Note: If you opened a diagram which has been created without the
+ CSS Support, it may still have a custom appearance, e.g. without
+ Element icons. This might or might not be a problem, as this may
+ conflict with the CSS Theme. You can reset all custom appearances by
+ pressing the “Default style” button in the Style tab of the Diagram’s
+ properties view.</p>
+ <h1 id="Using_StyleSheets">Using StyleSheets</h1>
+ <p>
+ To define a custom style, the first step is to create a Stylesheet.
+ The creation is really straightforward: a Stylesheet is a text file
+ with the .css extension. You can create such a file using the “New
+ &gt; File” wizard.<br />
+ </p>
+ <p>
+ Then, you need to associate this file with your diagram. Select a
+ diagram, and then go to the Style tab of the properties view, and add
+ a new “Diagram style sheet”. There isn’t currently any style sheet
+ available from the diagram, so you need to create a new “Stylesheet
+ reference”.<br />
+ </p>
+ <p>
+ <img title="Import stylesheet in Papyrus"
+ alt="Import stylesheet in Papyrus" border="0"
+ src="Papyrus_CSS_Import_stylesheet.png" /><br />
+ </p>
+ <p>
+ Browse your workspace to find your css file, and then validate. Your
+ stylesheet is now associated to your diagram.<br />
+ </p>
+ <h1 id="Editing_a_StyleSheet">Editing a StyleSheet</h1>
+ <p>
+ Papyrus Stylesheets are stored in text files with the “.css” extension
+ (e.g. stylesheet.css).<br />
+ </p>
+ <h2 id="Manually:_The_CSS_Syntax">Manually: The CSS Syntax</h2>
+ <h3 id="Syntax_elements">Syntax elements</h3>
+ <p>
+ The CSS syntax is a list of rules, which associates selectors and
+ properties.<br />
+ </p>
+ <ul>
+ <li>The selector: describes the condition which has to be
+ fulfilled for a rule to be applied<br />
+ </li>
+ <li>The properties: describes the appearance of the elements
+ matching the rule<br />
+ </li>
+ </ul>
+ <p>
+ Eclipse implements the 2.1 version of the CSS syntax. The available
+ selectors are:<br />
+ </p>
+ <ul>
+ <li><pre>*</pre>:matches all elements<br /></li>
+ <li>ElementType: Matches the elements of type “ElementType”<br />
+ </li>
+ <li>.myStyle: Matches the elements on which the style “myStyle”
+ is applied<br />
+ <ol>
+ <li>myID: Matches the element with the CSS ID “myID”. The CSS
+ ID must be unique among a diagram. To avoid confusing the users,
+ and because this selector doesn’t make much sense on diagrams, this
+ selector has been disabled in Papyrus.<br />
+ </li>
+ </ol>
+ </li>
+ <li><a href="property=value">property=value</a>: Matches the
+ elements which have a property “property” with the value “value”.<br /></li>
+ </ul>
+ <p>
+ The pseudo-selectors are currently not used in Papyrus.<br />
+ </p>
+ <p>
+ These selectors can be combined using one of the following
+ combinators:<br />
+ </p>
+ <ul>
+ <li>Selector1 Selector2: Descendant selector. Matches the
+ elements which match Selector2 and are contained in an element
+ matching Selector1<br />
+ </li>
+ <li>Selector1 &gt; Selector2: Child selector. Matches the
+ elements which match Selector2 and are directly contained in an
+ element matching Selector2<br />
+ </li>
+ <li>Selector1 + Selector2: Sibling selector. Matches the elements
+ which match Selector2 and are immediately preceded by a Sibling
+ element which match Selector1.<br />
+ </li>
+ <li>Selector1, Selector2: Alternative selector. Matches elements
+ matching either Selector1 or Selector2<br />
+ </li>
+ </ul>
+ <p>A rule also contains a list of properties, in the form
+ property:value;</p>
+ <p>
+ In Papyrus, the selectors apply to semantic elements and properties
+ (i.e. UML Elements), and the properties apply to the appearance
+ properties (i.e. GMF Appearance properties). A few custom properties
+ (Independent from the GMF Appearance model) are also available.<br />
+ </p>
+ <h3 id="Examples">Examples</h3>
+ <pre class="source-css">* {
+ fillColor: red;
+ fontColor: #0000FF;
+}
+</pre>
+ <p></p>
+ <p>
+ Meaning: all elements should be filled in red, and all texts should be
+ blue (RGB Color #0000FF)<br />
+ </p>
+ <pre class="source-css">Class {
+ gradient: white vertical;
+ elementIcon:true;
+ shadow:true;
+ qualifiedNameDepth:full;
+}
+</pre>
+ <p></p>
+ <p>
+ Meaning: this style applies to all UML Classes. They will have a white
+ and vertical gradient. The Element icon and the shadow will be
+ displayed, as well as their fully qualified name.<br />
+ </p>
+ <pre class="source-css">ClassDiagram Class&gt;Property {
+ fontColor: red;
+}
+</pre>
+ <p></p>
+ <p>
+ Meaning: The properties directly contained in a Class, which is drawn
+ on a ClassDiagram (Either as a root element of the diagram, or in a
+ Package) will be displayed in red.<br />
+ </p>
+ <h2 id="With_the_Papyrus_tooling">With the Papyrus tooling</h2>
+ <p>Papyrus also provides a tool to generate a CSS Rule from an
+ element displayed in the diagram. You need to create a stylesheet
+ before you can edit it with the Create style tool, and it is
+ recommended (Although not required) to associate this style sheet with
+ your current diagram.</p>
+ <p>
+ To use it, create an element and change its appearance via the
+ “Appearance” tab of the properties view. Then, right click on the
+ element, and select “Format”, “Create a new style”. The dialog box
+ contains three tabs:<br />
+ </p>
+ <ul>
+ <li>Conditions: The conditions under which the style will be
+ applied (Corresponds to the “CSS Selectors”)</li>
+ <li>Properties: The graphical properties to export to the style
+ sheet</li>
+ <li>Stylesheet: The style sheet to edit<br /></li>
+ </ul>
+ <p>
+ <img title="Create style dialog" alt="Create style dialog" border="0"
+ src="Papyrus_CSS_Export_style.png" /><br />
+ </p>
+ <p>
+ In the Stylesheet tab, select your stylesheet:<br />
+ </p>
+ <ul>
+ <li>If you have already associated the style sheet to your
+ diagram, you can use the “Applies stylesheet” button.</li>
+ <li>Otherwise, you need to select “External stylesheet”, and
+ browse your workspace to retrieve the file. Note that in this case,
+ as the edited stylesheet might not be applied to your diagram, you
+ won’t be able to see the changes in the current diagram.<br />
+ </li>
+ </ul>
+ <p>
+ In the conditions tab, there are three groups of options:<br />
+ </p>
+ <ul>
+ <li>The kind of element to which the style applies (e.g. the
+ style will be applied to “Class” elements, or to any kind of
+ elements). It can be restricted to a specific diagram.</li>
+ <li>You can add restrictions on the current value(s) of the
+ element (e.g. the style will be applied to concrete classes). Only
+ primitive type and enumerated attributes are supported here.</li>
+ <li>The style name is used to apply a style manually.<br /></li>
+ </ul>
+ <p>
+ The properties tab contains all the graphical properties that can be
+ applied to the selected object. It is used to choose the graphical
+ properties to apply on the objects matching the conditions.<br />
+ </p>
+ <h1 id="Manipulating_styles">Manipulating styles</h1>
+ <p>The computed styles will be applied automatically. For example,
+ if your stylesheet tells that all your abstract classes must be red,
+ the classes color will change automatically according to the value of
+ their “isAbstract” property.</p>
+ <p>
+ In some other cases, however, you may want to specify manually the
+ style that should be applied to your objects. For this case, you can
+ use the “Applied styles” property in the “Style” tab of the properties
+ view.<br />
+ </p>
+ <pre class="source-css">.myOwnStyle {
+ fillColor: #A6C198;
+ gradient:white horizontal;
+}
+</pre>
+ <p></p>
+ <p>
+ <img title="Result" alt="Result" border="0"
+ src="Papyrus_CSS_CustomStyle.png" /><br />
+ </p>
+ <p>
+ Once a style is applied on an object, the object will be refreshed
+ each time the style definition changes. For example, changing the
+ style “myOwnStyle” to the following declaration:<br />
+ </p>
+ <pre class="source-css">.myOwnStyle {
+ fillColor: #E3A49C;
+ gradient: #FFFFFF horizontal;
+}
+</pre>
+ <p></p>
+ <p>
+ All the green classes will become red.<br />
+ </p>
+ <h1 id="Deploying_a_CSS_Theme">Deploying a CSS Theme</h1>
+ <p>Once you have defined your style sheet, you may want to export
+ it to create a new theme (Or to extend an existing theme). To do so,
+ Papyrus provides an extension point:
+ org.eclipse.papyrus.infra.gmfdiag.css.theme.</p>
+ <p>This extension point needs two entries: a Theme Definition (ID,
+ Label and icon of the Theme), and Theme contributions (A set of style
+ sheets which will compose the Theme). More than one plug-in can
+ contribute to the same Theme, which makes it possible to extend a
+ Theme.</p>
+ <p>
+ The Theme can be modified from the Papyrus preferences page “CSS
+ Theme”. Only one theme can be activated at the same time. A Theme
+ applies to all Papyrus Diagrams from the workspace.<br />
+ </p>
+ <h1 id="Limitations_and_issues">Limitations and issues</h1>
+ <p>
+ There are currently a few identified limitations to the Stylesheet
+ framework, as well as a few minor bugs.<br />
+ </p>
+ <h2 id="Selectors">Selectors</h2>
+ <p>
+ Currently, it is not possible to handle complex selectors in the
+ Papyrus stylesheets.<br />
+ </p>
+ <h3 id="Selector_inheritance">Selector inheritance</h3>
+ <p>
+ It is not possible to apply a style to all descendant of a given
+ Metaclass. For example, a Behavior will not inherit styles from a
+ Class, although a Behavior actually is a Class.<br />
+ </p>
+ <h3 id="Profile.2FStereotype_support">Profile/Stereotype support</h3>
+ <p>
+ It is not possible to restrict a selector to an applied stereotype.
+ There is currently no way to specify that a style should only apply to
+ classes on which the <i>SysML::Blocks::Block</i> stereotype is
+ applied.<br />
+ </p>
+ <h3 id="Labels_and_compartments">Labels and compartments</h3>
+ <p>
+ It is currently not possible to customize labels from the Stylesheets
+ (e.g. show/hide type for all properties). It is not possible to
+ show/hide or collapse compartments either (e.g. hide the nested
+ classifier compartment in a Class).<br />
+ </p>
+ <h3 id="Events_support">Events support</h3>
+ <p>
+ Selectors based on user events are not yet implemented. For example,
+ the CSS specification defines the&nbsp;:hover pseudo-selector to
+ represent an element hovered by the mouse, which is not yet supported
+ in Papyrus.<br />
+ </p>
+ <h2 id="Stylesheets">Stylesheets</h2>
+ <h3 id="Model_stylesheets">Model stylesheets</h3>
+ <p>
+ Currently, stylesheets can only be applied to a Diagram. It is not yet
+ possible to apply a stylesheet on a Model.<br />
+ </p>
+ <h3 id="Workspace_stylesheets">Workspace stylesheets</h3>
+ <p>
+ The only way to define a workspace theme is through the use of a
+ plug-in which defines a new extension. It is not yet possible to
+ create a new local theme from the preferences page.<br />
+ </p>
+ <h2 id="Bugs">Bugs</h2>
+ <p>
+ The following bugs have been identified:<br />
+ </p>
+ <ul>
+ <li><a
+ href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=372322">Bug
+ 372322</a>: [Diagram - Refresh] The refresh action is not
+ correctly binded to F5<br /></li>
+ <li><a
+ href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=386574">Bug
+ 386574</a>: [CSS - Refresh] Only the active diagram is
+ refresh when the stylesheets change<br /></li>
+ <li><a
+ href="https://bugs.eclipse.org/bugs/show_bug.cgi?id=390534">Bug
+ 390534</a>: [CSS - Appearance] Undoing graphical changes
+ results in unexpected behavior</li>
+ </ul>
+</body>
+</html> \ No newline at end of file
diff --git a/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css.mediawiki b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css.mediawiki
new file mode 100644
index 00000000000..8b039739953
--- /dev/null
+++ b/plugins/doc/org.eclipse.papyrus.infra.gmfdiag.css.doc/resource/css.mediawiki
@@ -0,0 +1,197 @@
+= Introduction =
+
+The standard UML specification provides a few hints to represent graphical elements. However, it only focuses on the general representation of these elements (e.g. A Class is a rectangle, with optional compartments for its attributes and operations, and its name should be displayed in italic if the Class is abstract).
+
+Nevertheless, for a better readability (and even esthetic), the user has a certain freedom for changing some graphical properties, such as an Elements color. Until now, in Papyrus, this customization could be done by two complement means:
+
+*Appearance tab (Properties view): change the appearance of the selected element(s)
+*Preferences page: change the initial appearance of all newly created element(s)
+
+While this allows defining a custom theme for our diagrams, this mechanism suffers from a few limitations:
+
+*It is not possible to create different categories of appearance for the same semantic Element (e.g. Blue Class and Green class). Wed have to create Blue classes and change some of them to Green manually.
+*If we wanted to change the current theme, wed have either to change each objects appearance one by one, or to write an automatic transformation, which could be really complicated.
+*It is not easy to export a Theme, as they are stored in the Eclipse preferences. It is almost impossible to ship a ready-to-use distribution of Papyrus with a custom theme.
+
+The release of Eclipse 4 Juno this summer gave us the opportunity to rely on their CSS Engine to support Cascading StyleSheets in Papyrus diagrams. Just like in web pages, the CSS format is used to separate the contents of our diagrams from their appearance. It becomes possible to change the appearance of a whole diagram, or even a set of diagrams, independently of the number of represented elements, in a single click.<br>
+
+= Installation =
+
+The CSS Stylesheet support is not shipped in the base installation of Papyrus. However, it can be easily installed from the Papyrus discovery site. Select Help, Install Papyrus Additional Components, and check Diagram Stylesheets.
+
+[[Image:Papyrus CSS Installation.png|Installation]]<br>
+
+Press finish, restart Eclipse, and that's it.
+
+Your diagrams should now look like the following:
+
+[[Image:Papyrus CSS no theme.png|Papyrus diagram without CSS Theme]]<br>
+
+[[Image:Papyrus CSS theme.png|Papyrus Diagram with CSS Theme]]<br>
+
+Note: If you opened a diagram which has been created without the CSS Support, it may still have a custom appearance, e.g. without Element icons. This might or might not be a problem, as this may conflict with the CSS Theme. You can reset all custom appearances by pressing the Default style button in the Style tab of the Diagrams properties view.
+
+= Using StyleSheets =
+
+To define a custom style, the first step is to create a Stylesheet. The creation is really straightforward: a Stylesheet is a text file with the .css extension. You can create such a file using the New &gt; File wizard.<br>
+
+Then, you need to associate this file with your diagram. Select a diagram, and then go to the Style tab of the properties view, and add a new Diagram style sheet. There isnt currently any style sheet available from the diagram, so you need to create a new Stylesheet reference.<br>
+
+[[Image:Papyrus CSS Import stylesheet.png|Import stylesheet in Papyrus]]<br>
+
+Browse your workspace to find your css file, and then validate. Your stylesheet is now associated to your diagram.<br>
+
+= Editing a StyleSheet =
+
+Papyrus Stylesheets are stored in text files with the .css extension (e.g. stylesheet.css).<br>
+
+== Manually: The CSS Syntax ==
+
+=== Syntax elements ===
+
+The CSS syntax is a list of rules, which associates selectors and properties.<br>
+
+*The selector: describes the condition which has to be fulfilled for a rule to be applied<br>
+*The properties: describes the appearance of the elements matching the rule<br>
+
+Eclipse implements the 2.1 version of the CSS syntax. The available selectors are:<br>
+
+*<pre>*</pre>:matches all elements<br>
+*ElementType: Matches the elements of type ElementType<br>
+*.myStyle: Matches the elements on which the style myStyle is applied<br>
+*#myID: Matches the element with the CSS ID myID. The CSS ID must be unique among a diagram. To avoid confusing the users, and because this selector doesnt make much sense on diagrams, this selector has been disabled in Papyrus.<br>
+*[property=value]: Matches the elements which have a property property with the value value.<br>
+
+The pseudo-selectors are currently not used in Papyrus.<br>
+
+These selectors can be combined using one of the following combinators:<br>
+
+*Selector1 Selector2: Descendant selector. Matches the elements which match Selector2 and are contained in an element matching Selector1<br>
+*Selector1 &gt; Selector2: Child selector. Matches the elements which match Selector2 and are directly contained in an element matching Selector2<br>
+*Selector1 + Selector2: Sibling selector. Matches the elements which match Selector2 and are immediately preceded by a Sibling element which match Selector1.<br>
+*Selector1, Selector2: Alternative selector. Matches elements matching either Selector1 or Selector2<br>
+
+A rule also contains a list of properties, in the form property:value;
+
+In Papyrus, the selectors apply to semantic elements and properties (i.e. UML Elements), and the properties apply to the appearance properties (i.e. GMF Appearance properties). A few custom properties (Independent from the GMF Appearance model) are also available.<br>
+
+=== Examples ===
+
+<source lang="css">* {
+ fillColor: red;
+ fontColor: #0000FF;
+}</source>
+
+Meaning: all elements should be filled in red, and all texts should be blue (RGB Color #0000FF)<br>
+
+<source lang="css">Class {
+ gradient: white vertical;
+ elementIcon:true;
+ shadow:true;
+ qualifiedNameDepth:full;
+}</source>
+
+Meaning: this style applies to all UML Classes. They will have a white and vertical gradient. The Element icon and the shadow will be displayed, as well as their fully qualified name.<br>
+
+<source lang="css">ClassDiagram Class>Property {
+ fontColor: red;
+}</source>
+
+Meaning: The properties directly contained in a Class, which is drawn on a ClassDiagram (Either as a root element of the diagram, or in a Package) will be displayed in red.<br>
+
+== With the Papyrus tooling ==
+
+Papyrus also provides a tool to generate a CSS Rule from an element displayed in the diagram. You need to create a stylesheet before you can edit it with the Create style tool, and it is recommended (Although not required) to associate this style sheet with your current diagram.
+
+To use it, create an element and change its appearance via the Appearance tab of the properties view. Then, right click on the element, and select Format, Create a new style. The dialog box contains three tabs:<br>
+
+*Conditions: The conditions under which the style will be applied (Corresponds to the CSS Selectors)
+*Properties: The graphical properties to export to the style sheet
+*Stylesheet: The style sheet to edit<br>
+
+[[Image:Papyrus CSS Export style.png|Create style dialog]]<br>
+
+In the Stylesheet tab, select your stylesheet:<br>
+
+*If you have already associated the style sheet to your diagram, you can use the Applies stylesheet button.
+*Otherwise, you need to select External stylesheet, and browse your workspace to retrieve the file. Note that in this case, as the edited stylesheet might not be applied to your diagram, you wont be able to see the changes in the current diagram.<br>
+
+In the conditions tab, there are three groups of options:<br>
+
+*The kind of element to which the style applies (e.g. the style will be applied to Class elements, or to any kind of elements). It can be restricted to a specific diagram.
+*You can add restrictions on the current value(s) of the element (e.g. the style will be applied to concrete classes). Only primitive type and enumerated attributes are supported here.
+*The style name is used to apply a style manually.<br>
+
+The properties tab contains all the graphical properties that can be applied to the selected object. It is used to choose the graphical properties to apply on the objects matching the conditions.<br>
+
+= Manipulating styles =
+
+The computed styles will be applied automatically. For example, if your stylesheet tells that all your abstract classes must be red, the classes color will change automatically according to the value of their isAbstract property.
+
+In some other cases, however, you may want to specify manually the style that should be applied to your objects. For this case, you can use the Applied styles property in the Style tab of the properties view.<br>
+
+<source lang="css">.myOwnStyle {
+ fillColor: #A6C198;
+ gradient:white horizontal;
+}</source>
+
+[[Image:Papyrus CSS CustomStyle.png|Result]]<br>
+
+Once a style is applied on an object, the object will be refreshed each time the style definition changes. For example, changing the style myOwnStyle to the following declaration:<br>
+
+<source lang="css">.myOwnStyle {
+ fillColor: #E3A49C;
+ gradient: #FFFFFF horizontal;
+}</source>
+
+All the green classes will become red.<br>
+
+= Deploying a CSS Theme =
+
+Once you have defined your style sheet, you may want to export it to create a new theme (Or to extend an existing theme). To do so, Papyrus provides an extension point: org.eclipse.papyrus.infra.gmfdiag.css.theme.
+
+This extension point needs two entries: a Theme Definition (ID, Label and icon of the Theme), and Theme contributions (A set of style sheets which will compose the Theme). More than one plug-in can contribute to the same Theme, which makes it possible to extend a Theme.
+
+The Theme can be modified from the Papyrus preferences page CSS Theme. Only one theme can be activated at the same time. A Theme applies to all Papyrus Diagrams from the workspace.<br>
+
+= Limitations and issues =
+
+There are currently a few identified limitations to the Stylesheet framework, as well as a few minor bugs.<br>
+
+== Selectors ==
+
+Currently, it is not possible to handle complex selectors in the Papyrus stylesheets.<br>
+
+=== Selector inheritance ===
+
+It is not possible to apply a style to all descendant of a given Metaclass. For example, a Behavior will not inherit styles from a Class, although a Behavior actually is a Class.<br>
+
+=== Profile/Stereotype support ===
+
+It is not possible to restrict a selector to an applied stereotype. There is currently no way to specify that a style should only apply to classes on which the ''SysML::Blocks::Block'' stereotype is applied.<br>
+
+=== Labels and compartments ===
+
+It is currently not possible to customize labels from the Stylesheets (e.g. show/hide type for all properties). It is not possible to show/hide or collapse compartments either (e.g. hide the nested classifier compartment in a Class).<br>
+
+=== Events support ===
+
+Selectors based on user events are not yet implemented. For example, the CSS specification defines the&nbsp;:hover pseudo-selector to represent an element hovered by the mouse, which is not yet supported in Papyrus.<br>
+
+== Stylesheets ==
+
+=== Model stylesheets ===
+
+Currently, stylesheets can only be applied to a Diagram. It is not yet possible to apply a stylesheet on a Model.<br>
+
+=== Workspace stylesheets ===
+
+The only way to define a workspace theme is through the use of a plug-in which defines a new extension. It is not yet possible to create a new local theme from the preferences page.<br>
+
+== Bugs ==
+
+The following bugs have been identified:<br>
+
+*[https://bugs.eclipse.org/bugs/show_bug.cgi?id=372322 Bug 372322]: [Diagram - Refresh] The refresh action is not correctly binded to F5<br>
+*[https://bugs.eclipse.org/bugs/show_bug.cgi?id=386574 Bug 386574]: [CSS - Refresh] Only the active diagram is refresh when the stylesheets change<br>
+*[https://bugs.eclipse.org/bugs/show_bug.cgi?id=390534 Bug 390534]: [CSS - Appearance] Undoing graphical changes results in unexpected behavior

Back to the top