Google Git
Sign in
eclipse / graphiti / org.eclipse.graphiti / 77cef3a527387013b3b863d2de028469ee9d7934 / . / examples / org.eclipse.graphiti.doc / resources / docu / gfw / color-schemas.htm
blob: 6d5828499782550a53eb5ea482b63f44fa0049d2 [file] [log] [blame]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Color schemas</title>
<link href="../book.css" rel="Stylesheet" type="text/css">
<link href="../code.css" rel="Stylesheet" type="text/css">
</head>
<body>
<h1>Color Schemas</h1>
<p>Up to now we rendered EClass shapes using a single background color (see implementation
of class <span class="inlinecode">StyleUtil</span> in chapter “<a href="styles.htm">Using
styles</a>”). It is also possible to use a complex background color schema instead.
This offers the following enhancements:</p>
<ul>
<li>Instead of a single background color multiple colors can be defined, which
are either separated by a hard boundary or by a soft gradient color flow. Examples
are a gradient blue-to-white color flow or a rainbow of colors separated by
hard boundaries.</li>
<li>The background colors can change depending on the current interaction state.
Examples for interaction states are shape selection (unselected, primary selected,
secondary selected) or actions like dropping a child on a shape (allowed or
forbidden).</li>
</ul>
<p>&nbsp;</p>
<p>
<img alt="" height="423" src="visio/ui-spec-blue-white-gloss.png" width="669"></p>
<p><strong>Figure: Color schema definition for &quot;blue-white-gloss- unselected&quot; from
usability engineers<br></strong></p>
<p>Technically a complex background color schema is defined in a
<a href="../../../javadoc/org/eclipse/graphiti/mm/algorithms/styles/RenderingStyle.html">
RenderingStyle</a>. Take care, that this has nothing to do with
<a href="styles.htm">styles</a>, except the confusing name! Also note that only
background colors are defined in a <span class="inlinecode">RenderingStyle</span>
and not foreground colors.</p>
<p>Always keep in mind the following rule: if a graphics algorithm has both a background
color and a <span class="inlinecode">RenderingStyle</span> defined, then the
<span class="inlinecode">RenderingStyle</span> is used and the background color
is ignored. The specification of such a style can be seen in the figure above.The
highlight at the top (the first 3 pixels below the top outline) and the inner shape
(the last pixel above the bottom outline) have a fixed height which is independent
of the shape size. They will stay unchanged even after the shape is resized.</p>
<h2>Using Predefined Colored Areas</h2>
<p>A <span class="inlinecode">RenderingStyle</span> has only the attribute &quot;<span class="inlinecode">adaptedGradientColoredAreas</span>&quot;
of type <span class="inlinecode">AdaptedGradientColoredAreas</span>, which must
be one of those defined in <span class="inlinecode">PredefinedColoredAreas</span>.
With methods like PredefinedColoredAreas.getBlueWhiteGlossAdaptions()you can get
them. There are only a few predefined rendering styles, which are defined by the
usability engineers of SAP. Tools can define further rendering styles, but this
is explained later in this chapter.</p>
<p>&nbsp;</p>
<p>&nbsp;<img alt="" height="186" src="visio/blue-white-gloss.jpg" width="732"></p>
<p><strong>Figure: Example screenshot of the different interaction states for the
predefined style “blue-white-gloss”<br></strong></p>
<p>Within <span class="inlinecode">AdaptedGradientColoredAreas</span> these different
interaction states are defined as <span class="inlinecode">GradientColoredAreas
</span>and they are selected by Graphiti at runtime depending on the current interaction
state.</p>
<p>To use a
<a href="../../../javadoc/org/eclipse/graphiti/mm/algorithms/styles/RenderingStyle.html">
RenderingStyle</a> we have to change the implementation of class
<span class="inlinecode">StyleUtil</span>, which we created in the chapter “<a href="styles.htm">Using
styles</a>”.</p>
<p>Instead of setting a background color we will now set a predefined
<span class="inlinecode">AdaptedGradientColoredAreas</span>.</p>
<p>You can see the complete implementation of the style utility class here:</p>
<!-- Begin code ------------------------------------------------------------------------------- -->
<p>&nbsp;</p>
<div class="literallayout">
<div class="incode">
<p class="code"><span class="keyword">package</span> org.eclipse.graphiti.examples.tutorial;<br>
<br><span class="keyword">public class</span> StyleUtil {<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;
<span class="comment">// ... EXISTING CODING ...</span><br>&nbsp;<br>&nbsp;&nbsp;&nbsp;
<span class="keyword">public static</span> Style getStyleForEClass(Diagram
diagram) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">final</span> String styleId = <span class="string">
&quot;E-CLASS&quot;</span>;<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Style style = <em>findStyle</em>(diagram, styleId);<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">if</span> (style == <span class="keyword">null</span>)
{ <span class="comment">// style not found - create new style</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
IGaService gaService = Graphiti.getGaService();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
style = gaService.createStyle(diagram, styleId);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
style.setForeground(gaService.manageColor(diagram,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="string"><em>E_CLASS_FOREGROUND</em></span>));<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
gaService.setRenderingStyle(style,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
PredefinedColoredAreas.getBlueWhiteGlossAdaptions());<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
style.setLineWidth(2);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">return</span> style;<br>&nbsp;&nbsp;&nbsp; }<br>&nbsp;<br>&nbsp;&nbsp;
<br>&nbsp;&nbsp;&nbsp; <span class="comment">// ... EXISTING CODING ...</span><br>&nbsp;<br>
}<br></p>
</div>
</div>
<p>&nbsp;</p>
<!-- End code ------------------------------------------------------------------------------- -->
<p>Keep in mind that from now on the background color attribute will not work any
more. So you might consider to delete the custom feature changing the background
color, which was created in the chapter about <a href="styles.htm">styles</a>.</p>
<h2>Test: EClass Has Complex Background Color Schema</h2>
<p>Create a new diagram and inside it create a new EClass. Verify that the background
color is a blue-white gradient. Also verify, that the background color changes,
if you select the EClass shape.</p>
<h2>Using Your Own Colored </h2>
<p>We want to define our own (background color schema) style with id &quot;lime-white&quot;.
To do this we have to extend the interface <span class="inlinecode">IPredefinedRenderingStyle</span>
to define the id &quot;lime-white&quot;. In addition we extend class
<span class="inlinecode">PredefinedColoredAreas</span> to define colored areas for
&quot;lime-white&quot;. The result should look like the image below.</p>
<p>&nbsp;</p>
<p><img alt="" height="153" src="visio/user-defined-gradient.png" width="352"></p>
<p><strong>Figure The newly defined &quot;lime-white&quot; gradient<br></strong></p>
<p>You can see the complete implementation of the interface tutorial rendering style
here:</p>
<!-- Begin code ------------------------------------------------------------------------------- -->
<p>&nbsp;</p>
<div class="literallayout">
<div class="incode">
<p class="code"><span class="keyword">package</span> org.eclipse.graphiti.examples.tutorial;<br>&nbsp;<br>
<span class="keyword">import</span> org.eclipse.graphiti.util.IPredefinedRenderingStyle;<br>&nbsp;<br>
<span class="keyword">public interface</span> ITutorialRenderingStyle
<span class="keyword">extends</span> IPredefinedRenderingStyle {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="keyword">public static final</span>
String <span class="string"><em>LIME_WHITE_ID</em></span> =
<span class="string">&quot;lime-white&quot;</span>;<br>}<br></p>
</div>
</div>
<p>&nbsp;</p>
<!-- End code ------------------------------------------------------------------------------- -->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
<tr>
<td style="width: 140.9pt; border: solid black 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p><strong>Solid Color/Gradient</strong></p>
</td>
<td style="width: 140.9pt; border: solid black 1.0pt; border-left: none; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p><strong>Pixel Row/Rows Location</strong></p>
</td>
<td style="width: 140.95pt; border: solid black 1.0pt; border-left: none; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p><strong>Hex 6 RGB Color</strong></p>
</td>
</tr>
<tr>
<td style="width: 140.9pt; border: solid black 1.0pt; border-top: none; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>Solid color</p>
</td>
<td style="width: 6.0cm; border-top: none; border-left: none; border-bottom: solid black 1.0pt; border-right: solid black 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>Pixel 1 (topmost pixel row)</p>
</td>
<td style="width: 140.95pt; border-top: none; border-left: none; border-bottom: solid black 1.0pt; border-right: solid black 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>#CCFFCC</p>
</td>
</tr>
<tr>
<td style="width: 140.9pt; border: solid black 1.0pt; border-top: none; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>Solid color</p>
</td>
<td style="width: 6.0cm; border-top: none; border-left: none; border-bottom: solid black 1.0pt; border-right: solid black 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>Pixel 2 (second pixel row)</p>
</td>
<td style="width: 140.95pt; border-top: none; border-left: none; border-bottom: solid black 1.0pt; border-right: solid black 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>#CCFF99</p>
</td>
</tr>
<tr>
<td style="width: 140.9pt; border: solid black 1.0pt; border-top: none; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>Solid color</p>
</td>
<td style="width: 6.0cm; border-top: none; border-left: none; border-bottom: solid black 1.0pt; border-right: solid black 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>Pixel 3 (third pixel row)</p>
</td>
<td style="width: 140.95pt; border-top: none; border-left: none; border-bottom: solid black 1.0pt; border-right: solid black 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>#CCFF66</p>
</td>
</tr>
<tr>
<td style="width: 140.9pt; border: solid black 1.0pt; border-top: none; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>Gradient start</p>
</td>
<td style="width: 6.0cm; border-top: none; border-left: none; border-bottom: solid black 1.0pt; border-right: solid black 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>Pixel 4</p>
</td>
<td style="width: 140.95pt; border-top: none; border-left: none; border-bottom: solid black 1.0pt; border-right: solid black 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>#66FF00</p>
</td>
</tr>
<tr>
<td style="width: 140.9pt; border: solid black 1.0pt; border-top: none; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>Gradient stop</p>
</td>
<td style="width: 6.0cm; border-top: none; border-left: none; border-bottom: solid black 1.0pt; border-right: solid black 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>Pixel one before last</p>
</td>
<td style="width: 140.95pt; border-top: none; border-left: none; border-bottom: solid black 1.0pt; border-right: solid black 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>#CCFFCC</p>
</td>
</tr>
<tr>
<td style="width: 140.9pt; border: solid black 1.0pt; border-top: none; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>Solid color</p>
</td>
<td style="width: 6.0cm; border-top: none; border-left: none; border-bottom: solid black 1.0pt; border-right: solid black 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>Last pixel (bottom pixel row)</p>
</td>
<td style="width: 140.95pt; border-top: none; border-left: none; border-bottom: solid black 1.0pt; border-right: solid black 1.0pt; padding: 0cm 5.4pt 0cm 5.4pt" valign="top">
<p>#CCFFCC</p>
</td>
</tr>
</table>
<p><strong>Figure Specification for &quot;lime-white unselected&quot;</strong></p>
<p>&nbsp;</p>
<p>For our new color scheme &quot;lime-white&quot;, we are guided by the preceding example
of &quot;blue-white-gloss&quot;. The color scheme&nbsp; is illustrated in the table above
for the interaction state &quot;not selected&quot;. There are also three rows of pixels at
the beginning and one at the end to represent a sublime effect on the shape. In
between, the resizable gradient has been defined. The interaction states &quot;primary
selected&quot; and &quot;secondary selected&quot; are treated very similar and not listed here.</p>
<p>The information of the rows in the table above can be represented directly with
the class <span class="inlinecode">GradientColorArea</span>. Sequences of such colored
areas can be composed with the method <span class="inlinecode">addGradientColoredArea(..)</span>.
These sequences are used to render the color scheme.</p>
<p>We define &quot;lime-white&quot; in our new class <span class="inlinecode">TutorialColoredAreas</span>
in a similar way, as &quot;blue-white-gloss&quot; is defined in class
<span class="inlinecode">PredefinedColorAreas</span>. Do not forget to set the gradient
type to &quot;vertical&quot;.</p>
<p>You can see the complete implementation of the tutorial colored area class here:</p>
<!-- Begin code ------------------------------------------------------------------------------- -->
<p>&nbsp;</p>
<div class="literallayout">
<div class="incode">
<p class="code"><span class="keyword">package</span> org.eclipse.graphiti.examples.tutorial;<br>&nbsp;<br>
<span class="keyword">public class</span> TutorialColoredAreas
<span class="keyword">extends</span> PredefinedColoredAreas<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">implements</span> ITutorialRenderingStyle {<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;
<span class="keyword">private static</span> GradientColoredAreas getLimeWhiteDefaultAreas()
{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="keyword">final</span>
GradientColoredAreas gradientColoredAreas =<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
StylesFactory.<span class="string"><em>eINSTANCE</em></span>.createGradientColoredAreas();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">final</span> EList&lt;GradientColoredArea&gt; gcas =<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
gradientColoredAreas.getGradientColor();<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;CCFFCC&quot;</span>,
0, <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>,
<span class="string">&quot;CCFFCC&quot;</span>, 1,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.LOCATION_TYPE_ABSOLUTE_START);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;CCFF99&quot;</span>,
1,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>,
<span class="string">&quot;CCFF99&quot;</span>, 2,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;CCFF66</span>&quot;,
2,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>,
<span class="string">&quot;CCFF66&quot;</span>, 3,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;66FF00&quot;</span>,
3,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>,
<span class="string">&quot;CCFFCC&quot;</span>, 2,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_END</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;CCFFCC&quot;</span>,
2,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_END</em></span>,
<span class="string">&quot;CCFFCC&quot;</span>, 0,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_END</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
gradientColoredAreas.setStyleAdaption<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
(IPredefinedRenderingStyle.<span class="string"><em>STYLE_ADAPTATION_DEFAULT</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">return</span> gradientColoredAreas;<br>&nbsp;&nbsp;&nbsp;
}<br>&nbsp;<br>&nbsp;&nbsp;&nbsp; <span class="keyword">private static</span>
GradientColoredAreas getLimeWhitePrimarySelectedAreas() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">fina</span>l GradientColoredAreas gradientColoredAreas
=<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
StylesFactory.<span class="string"><em>eINSTANCE</em></span>.createGradientColoredAreas();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
gradientColoredAreas.setStyleAdaption<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
(IPredefinedRenderingStyle.<span class="string"><em>STYLE_ADAPTATION_PRIMARY_SELECTED</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">final</span> EList&lt;GradientColoredArea&gt; gcas =<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
gradientColoredAreas.getGradientColor();<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;66CCCC&quot;</span>,
0,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType<span class="string"><em>.LOCATION_TYPE_ABSOLUTE_START</em></span>,
<span class="string">&quot;66CCCC&quot;</span>, 1,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;66CC99&quot;</span>,
1,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>,
<span class="string">&quot;66CC99&quot;</span>, 2,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;66CC66&quot;</span>,
2,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>,
<span class="string">&quot;66CC66&quot;</span>, 3,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;00CC00&quot;</span>,
3,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>,
<span class="string"><em>&quot;00CC66&quot;</em></span>, 2,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_END</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;00CC99&quot;</span>,
2,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_END</em></span>,
<span class="string">&quot;00CC99&quot;</span>, 0,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_END</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">return</span> gradientColoredAreas;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
}<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="keyword">private
static</span> GradientColoredAreas getLimeWhiteSecondarySelectedAreas()
{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">final</span> GradientColoredAreas gradientColoredAreas
=<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
StylesFactory.<span class="string"><em>eINSTANCE</em></span>.createGradientColoredAreas();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
gradientColoredAreas.setStyleAdaption<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
(IPredefinedRenderingStyle.<span class="string"><em>STYLE_ADAPTATION_SECONDARY_SELECTED</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">final</span> EList&lt;GradientColoredArea&gt; gcas =<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
gradientColoredAreas.getGradientColor();<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;33CCCC&quot;</span>,
0,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>,
<span class="string">&quot;33CCCC&quot;</span>, 1,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;33CC99&quot;</span>,
1,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>,
<span class="string">&quot;33CC99&quot;</span>, 2,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;33CC66&quot;</span>,
2,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>,
<span class="string">&quot;33CC66&quot;</span>, 3,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;33CC00&quot;</span>,
3,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_START</em></span>,
<span class="string">&quot;33CC99&quot;</span>, 2,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_END</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<em>addGradientColoredArea</em>(gcas, <span class="string">&quot;66CC99&quot;</span>,
2,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_END</em></span>,
<span class="string">&quot;66CC99&quot;</span>, 0,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
LocationType.<span class="string"><em>LOCATION_TYPE_ABSOLUTE_END</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">return</span> gradientColoredAreas;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
}<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="keyword">public
static</span> AdaptedGradientColoredAreas getLimeWhiteAdaptions() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">final</span> AdaptedGradientColoredAreas agca =<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
StylesFactory.<span class="string"><em>eINSTANCE</em></span>.createAdaptedGradientColoredAreas();<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
agca.setDefinedStyleId(<span class="string"><em>LIME_WHITE_ID</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
agca.setGradientType(IGradientType.<span class="string"><em>VERTICAL</em></span>);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
agca.getAdaptedGradientColoredAreas()<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
.add(IPredefinedRenderingStyle.<span class="string"><em>STYLE_ADAPTATION_DEFAULT</em></span>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
getLimeWhiteDefaultAreas());<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
agca.getAdaptedGradientColoredAreas()<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
.add(IPredefinedRenderingStyle.<span class="string"><em>STYLE_ADAPTATION_PRIMARY_SELECTED</em></span>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
getLimeWhitePrimarySelectedAreas());<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
agca.getAdaptedGradientColoredAreas()<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
.add(IPredefinedRenderingStyle.<span class="string"><strong>STYLE_ADAPTATION_SECONDARY_SELECTED</strong></span>,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
getLimeWhiteSecondarySelectedAreas());<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">return</span> agca;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
}<br>} </p>
</div>
</div>
<p>&nbsp;</p>
<!-- End code ------------------------------------------------------------------------------- -->
<p>To use our new rendering style we have to change the implementation of class
<span class="inlinecode">StyleUtil</span>:</p>
<!-- Begin code ------------------------------------------------------------------------------- -->
<p>&nbsp;</p>
<div class="literallayout">
<div class="incode">
<p class="code"><span class="keyword">public class</span> StyleUtil {<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;
<span class="comment">// ... EXISTING CODING ...</span><br>&nbsp;<br>&nbsp;&nbsp;&nbsp;
public static Style getStyleForEClass(Diagram diagram) {<br>&nbsp;<br>&nbsp;&nbsp;
<span class="comment">&nbsp;&nbsp;&nbsp;&nbsp; // ... EXISTING CODING ...</span><br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
gaService.setRenderingStyle(style,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
TutorialColoredAreas.getLimeWhiteAdaptions());<br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;
<span class="comment">&nbsp;&nbsp; // ... EXISTING CODING ...</span><br>&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="keyword">return</span> style;<br>&nbsp;&nbsp;&nbsp; }<br>&nbsp;<br>&nbsp;&nbsp;
<br>&nbsp;&nbsp;&nbsp; <span class="comment">// ... EXISTING CODING ...</span><br>&nbsp;<br>
}<br></p>
</div>
</div>
<p>&nbsp;</p>
<!-- End code ------------------------------------------------------------------------------- -->
<h2>Test: EClass Has New Complex Background Color Schema</h2>
<p>Create a new diagram and inside it create a new EClass. Verify that the background
color is a lime-white gradient. Also verify, that the background color changes,
if you select the EClass shape.</p>
<p>&nbsp;</p>
</body>
</html>