<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:"Times New Roman \(Body CS\)";
panose-1:2 11 6 4 2 2 2 2 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
font-size:10.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
span.EmailStyle19
{mso-style-type:personal-reply;
font-family:"Courier New";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
/* List Definitions */
@list l0
{mso-list-id:815102534;
mso-list-template-ids:1041405082;}
@list l0:level1
{mso-level-number-format:bullet;
mso-level-text:\F0B7 ;
mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:1.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:"Courier New";
mso-bidi-font-family:"Times New Roman";}
@list l0:level3
{mso-level-number-format:bullet;
mso-level-text:\F0A7 ;
mso-level-tab-stop:1.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level4
{mso-level-number-format:bullet;
mso-level-text:\F0A7 ;
mso-level-tab-stop:2.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level5
{mso-level-number-format:bullet;
mso-level-text:\F0A7 ;
mso-level-tab-stop:2.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level6
{mso-level-number-format:bullet;
mso-level-text:\F0A7 ;
mso-level-tab-stop:3.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level7
{mso-level-number-format:bullet;
mso-level-text:\F0A7 ;
mso-level-tab-stop:3.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level8
{mso-level-number-format:bullet;
mso-level-text:\F0A7 ;
mso-level-tab-stop:4.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
@list l0:level9
{mso-level-number-format:bullet;
mso-level-text:\F0A7 ;
mso-level-tab-stop:4.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Wingdings;}
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
--></style>
</head>
<body lang="EN-US" link="blue" vlink="purple" style="word-wrap:break-word">
<div class="WordSection1">
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">Dear Michael:<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">Thank you for initiating this discussion and providing a pull request!<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">I would like to make a few comments and ask your opinion on some of the difficulties the application developers face when confronted with requirements to provide a custom styling
or even a completely different look and feel. I'll try to number the individual topics, but please forgive me if this message turns out to be long and jumbled.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:"Courier New"">#1 Theme</span></b><span style="font-size:11.0pt;font-family:"Courier New""><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">I wonder if we need to clarify what we mean by the word "theme" in the context of a javaFX application. Are we talking about colors, fonts, spacing, graphics, or all of the above?
Would a completely different stylesheet like Caspian or Modena be considered a separate theme, or would we rather have a way to modify the standard stylesheet by adding ability to redefine the different aspects such as colors and spacing without making structural
changes to the stylesheet itself?<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:"Courier New"">#2 Colors</span></b><span style="font-size:11.0pt;font-family:"Courier New""><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">When talking about colors specifically, the main requirements might be:<o:p></o:p></span></p>
<ul style="margin-top:0in" type="disc">
<li class="MsoNormal" style="mso-list:l0 level1 lfo1"><span style="font-size:11.0pt;font-family:"Courier New"">change the base colors used by the standard stylesheets, or just Modena<o:p></o:p></span></li><li class="MsoNormal" style="mso-list:l0 level1 lfo1"><span style="font-size:11.0pt;font-family:"Courier New"">derived colors might use different logic for light and dark themes<o:p></o:p></span></li><li class="MsoNormal" style="mso-list:l0 level1 lfo1"><span style="font-size:11.0pt;font-family:"Courier New"">have ability to select a group of colors, or "color themes" - such as Light, Dark, Solarized, High Contrast, etc.<o:p></o:p></span></li><li class="MsoNormal" style="mso-list:l0 level1 lfo1"><span style="font-size:11.0pt;font-family:"Courier New"">pick up the user-defined color preferences from the platform<o:p></o:p></span></li><li class="MsoNormal" style="mso-list:l0 level1 lfo1"><span style="font-size:11.0pt;font-family:"Courier New"">track the user-defined color preferences at run time<o:p></o:p></span></li></ul>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">I think most of these (except for platform colors) can be implemented currently at the application level (that is, without introducing new APIs) simply by loading a stylesheet that
redefines base colors (e.g. -fx-base), however, it gets complicated when we start deriving colors. For example, the use of derive() will need to change in order to obtain an esthetically pleasing colors in the dark theme.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:"Courier New"">#3 Platform Colors</span></b><span style="font-size:11.0pt;font-family:"Courier New""><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">Thank you for researching the preferences provided by the three different platforms. I wonder if it would make sense to extract that into a separate PR, perhaps as an implementation
detail, to be further refined as a part of Desktop replacement for JavaFX? And, if we are talking about exposing platform colors via APIs, do we want to make it as a part of one giant facility like java.swt.Desktop equivalent, or via individual methods in
Platform, or perhaps some other lookup scheme that allows for future extension?<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">Do you think it could be possible to describe the individual platform properties (what is Windows.UIColor.AccentDark3?), and possibly attempt to map platform-specific properties to
a platform-independent set of properties which represent a union of the three major platforms?<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">There is one more complication - constant changes in the platform design language. Ideally, any new APIs would support gradual evolution of the platform by, for example, providing
methods to query whether particular item is available or not.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:"Courier New"">#4 Spacing and Font Size</span></b><span style="font-size:11.0pt;font-family:"Courier New""><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">A lot of modern UIs introduced the concept of density (for example, in MS Outlook, Preferences -> General -> Density preference), by making spacing between UI elements larger or smaller
(at run time). Similarly, the font size can be made larger or smaller (Ctrl-+ / Ctrl-- in Firefox). The font size change affects "em" units, perhaps we need a parallel construct like "space-em" units that is applied to spacing? Even then, we might need
special logic to switch from pixels to fractions of "space-em" for large scales.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">How can we enable this functionality, ideally without making drastic changes to the base stylesheet? Is it even possible?<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><b><span style="font-size:11.0pt;font-family:"Courier New"">#5 Programmatic Stylesheet Generation</span></b><span style="font-size:11.0pt;font-family:"Courier New""><o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">Somewhere in this discussion we might also consider adding a possibility of generating a stylesheet programmatically, ideally in a type-safe manner, compatible with auto-completion.
jfx17 (I think) added a way to load a stylesheet data url, so it is much easier now, but I think a better way would be to skip the encoding/decoding step and just generate the stylesheet object directly.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">Perhaps the ideal scenario, one that makes it possible to adjust every aspect of the application styling, is to generate the complete stylesheet at run time, and possibly passing
it to JavaFx in a binary form that does not require parsing. <o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">I understand this is totally separate issue which will no doubt require its own discussion.<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">What do you think?<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New"">-andy<o:p></o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Courier New""><o:p> </o:p></span></p>
<div style="border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in">
<p class="MsoNormal" style="margin-bottom:12.0pt"><b><span style="font-size:12.0pt;color:black">From:
</span></b><span style="font-size:12.0pt;color:black">openjfx-dev <openjfx-dev-retn@openjdk.org> on behalf of Michael Strauß <michaelstrau2@gmail.com><br>
<b>Date: </b>Saturday, 2023/01/07 at 10:35<br>
<b>To: </b>openjfx-dev <openjfx-dev@openjdk.org><br>
<b>Subject: </b>Style themes API<o:p></o:p></span></p>
</div>
<div>
<p class="MsoNormal"><span style="font-size:11.0pt">The following PR introduces new APIs to support style themes in JavaFX:<br>
<a href="https://github.com/openjdk/jfx/pull/511">https://github.com/openjdk/jfx/pull/511</a><br>
<br>
As Kevin already indicated, we need to finish the discussion on the<br>
proposed API. I'd like to invite comments or suggestions with regards<br>
to the API to hopefully get a bit of momentum for this feature to make<br>
it into the 21 release.<br>
<br>
Michael<o:p></o:p></span></p>
</div>
</div>
</body>
</html>