styling scout apps - eclipse€¦ · scout assemblesandminifiesfinal css styling approaches: global...
Post on 13-Jun-2020
12 Views
Preview:
TRANSCRIPT
Technology
� CSS3
� Less
CSS Organisation
� Global CSS files (colors, fonts, sizes, …)
� Additional CSS files for each UI components (Field, Button…)
From Less to final CSS
� Project specific files override Scout defaults
� Single big CSS is assembled, processed and minified
Styling with Scout
Intro
Basics
� CSS / Less
Scout Styling
� Custom Themes
� Global Styling
� Styling Individual Components
Agenda
CSS Selectors
<body><div>
<p id="note" ><a href="http://www.eclipse.org/scout">
Eclipse Scout</a>
has learned CSS3. <br>Now let's do some
<span class="emphasise" >styling
</span>!
</p></div>
</body>
<style>a {
color: #008;font-weight: bold;text-decoration: inherit;
}
a:hover {color: #bbf;text-decoration: underline;
}
#note {…color: #fff;background-color: #06f;transform: rotate(-20deg);box-shadow: 10px 10px 5px #aaa;….border-radius: 5px;border: 20px solid #fa1;
}
.emphasise {color: #fa1;font-weight: bold;
}</style>
Element a, p, div, …
ID id="foo"
Class class="bar"
CSS DownsidesInefficient, Copy & Paste, …
<style>a {
color: #008;font-weight: bold;text-decoration: inherit;
}
a:hover {color: #bbf;text-decoration: underline;
}
#note {…color: #fff;background-color: #06f;transform: rotate(-20deg);box-shadow: 10px 10px 5px #aaa;….border-radius: 5px;border: 20px solid #fa1;
}
.emphasise {color: #fa1;font-weight: bold;
}</style>
� CSS Preprocessing (JavaScript)
� CSS super set (valid CSS == valid Less)
� Adds variables and mixins
� Reduce copy & paste
Less
Less
<style>@color-contrast: #fa1;
.emph(@weight: bold) {color: @color-contrast;font-weight: bold;
}
…
.emphasise {color: #fa1;font-weight: bold;
}</style>
Less - Variables
<style>@color-contrast: #fa1;
.emph(@weight: bold) {color: @color-contrast;font-weight: bold;
}
…
.emphasise {color: @color-contrast;font-weight: bold;
}</style>
Less - Mixins
<style>@color-contrast: #fa1;
.text-contrast(@weight: bold) {color: @color-contrast ;font-weight: @weight;
}
…
.emphasise {.text-contrast;
}
</style>
How-to
1. Add src/main/js/scout/style to project html module
2. Copy css files to project (e.g. colors.css)
3. Rename css file (e.g. colors-myTheme.css)
Set theme:
� scout.ui.theme=’’myTheme’’ config.properties
� getDesktop().setTheme(’’myTheme’’); dynamically
Using a Custom Theme
Use Case
� Styling of general appearance
− Colors
− Fonts
− Sizes
� Low effort with upgrades
� Simple and efficient
Styling with Global Propertiescolors.css, fonts.css, sizes.css …
Use Cases
� Modify appearance of individual component
� Override component Less/CSS3 files
� Additional efforts for Scout upgrades
Please note
� Current state (Nov 2015) is work in progress
� There are still 7 months until Neon M7
Styling Individual ComponentsForms.css, Menu.css, Desktop.css …
Setup
� HTML5 / CSS3 / Less
� Project specific themes
� Scout assembles and minifies final CSS
Styling Approaches:
� Global CSS properties: colors, fonts, etc. (simple, low effort)
� Component CSS files: (flexible, higher effort)
Styling Scout AppsSummary
top related