Fluent Design RadioButton, CheckBox, ChoiceBox, Menu for Java

Jag har en stor uppdatering för JMetro den här gången. Version 3.8 innehåller följande nya Fluent Design (FDS)-inspirerade stilar (mörkt och ljust) och uppdateringar:

• Ny radioknappstil;
• Ny stil för kryssrutan;
• Ny stil för menyer;
• Uppdaterad stil för snabbmenyn;
• Ny stil för Choice Box.

JMetro ny versionsinformation

Jag bestämde mig för att för tillfället stänga av fokus på JMetro-proverna. Jag stylade fortfarande kontrollerna för att se bra ut och ha ett distinkt utseende när de är fokuserade. Jag har gjort detta eftersom fokusringen fungerar lite annorlunda i Windows 10 än den gör som standard i JavaFX-applikationer.

I JavaFX-applikationer får kontrollen fokus (läggs till focused pseudoklass) när du trycker på den med musen, medan du i Windows först måste trycka på Tab-tangenten eller piltangenterna (i vissa situationer) för att aktivera fokussystemet, så att fokusringen visas och sedan bläddra igenom tills du kommer till kontrollen du vill.

Detta är vettigt eftersom fokusringen med detta endast visas när användaren verkligen vill interagera med applikationen genom att använda tangentbordet och därmed undviker den denna distraktion, annars.

Du kan fortfarande ha detta beteende i JavaFX, du behöver bara koda det. Jag vet ännu inte hur nya versioner av Mac OS fungerar i detta avseende (jag har inte en ny Mac för att testa detta), men det kan vara en funktion att lägga till i JMetro i framtiden.

Radioknapp ny stil

Följande animationer visar den nya stilen och den gamla stilen för radioknappen:

Radioknapp OLD JMetro light style

Radioknapp NYTT JMetro light style

Radioknapp OLD JMetro mörk stil

Radioknapp NYTT JMetro mörk stil

Kryssrutan ny stil

Kryssrutan har sett en betydande förändring:

Kryssruta OLD JMetro light style

Kryssruta NYTT JMetro-ljusstil

Kryssruta OLD JMetro mörk stil

Kryssruta NY JMetro mörk stil

Eftersom jag ändrade kryssrutan, för konsekvensens skull, behövde jag också ändra alla andra kontroller som använde en bock innan jag levererade en ny version. Dessa kontroller är valrutan och menyn.

Ny vallåda

Som jag nämnde tidigare är detta inte en kontroll som finns i Fluent Design-specifikationen. Det finns bara i JMetro.

Choice Box OLD JMetro light style

Choice Box NYTT JMetro light style

Choice Box OLD JMetro stil

Choice Box NYTT JMetro mörk stil

Ny menystil

Denna stil är ett nytt tillskott. Det är en annan som bara finns i JMetro. Det finns inte i Fluent Design System-specifikationen, åtminstone inte ännu.

Denna stil omfattar menyraden och menyalternativen som visas när menyraden är öppen, vilka själva kan vara menyalternativ av typen "Check Box Menu Item" eller "Radio Menu Item" (det kan bara finnas en RadioMenuItem vald i samma ToggleGroup ).

I exemplet nedan innehåller undermenyn "Bildeffekt" MenuItems av typen RadioMenuItem , alla tillhörande samma ToggleGroup, och "Visa"-menyn innehåller MenuItems av typen CheckMenuItem som fungerar ungefär som en CheckBox .

Meny JMetro light style

Meny JMetro mörk stil

Ny kontextmenystil

Menyn och kontextmenyn är sammanlänkade. Båda använder MenuItems för deras innehåll. Så när jag skapade den nya menystilen tog jag tillfället i akt att även uppdatera kontextmenystilen igen.

Jag ändrade stilarna för tryck och svävning och gjorde även MenuItems ännu mer kompakt, genom att minska deras höjd. I tidigare versioner av JMetro var min avsikt att ha beröringsobjekten tillräckligt stora så att applikationen kunde användas utan förändring både i pekenheter och musbaserade enheter (stationära och bärbara).

Detta visade sig inte vara den bästa strategin eftersom användare av musbaserade enheter slutade med applikationer som inte var optimerade för deras system, med kontroller som tog för mycket utrymme och bortkastade skärmfastigheter. Detta är särskilt viktigt i produktivitetstillämpningar.

Av dessa skäl är JMetro nu optimerad för musbaserade system med kontroller som upptar precis det utrymme de behöver. Närhelst applikationsutvecklare behöver distribuera sina applikationer i beröringsbaserade enheter (telefoner, surfplattor, etc), behöver de bara konfigurera om höjden genom CSS för varje kontroll (endast de som behöver det) för att vara tillräckligt för att överensstämma med beröring målstorlekar. På så sätt får de en applikation som är optimerad för både beröringsbaserade enheter och musbaserade enheter med bara lite mer programmeringsansträngning.

Jag kan i framtiden lägga till en "touch"-stilklass som utvecklare enkelt kan växla för att växla kontroller till att vara pekbaserade optimerade eller "mus" optimerade.

Följande är animationer av den nya och gamla kontextmenystilen (före version 3). Den gamla stilen hade bara en version:

Kontextmeny GAMMEL JMetro mörk stil

Och här är de nya stilarna i den här JMetro-versionen:

Kontextmeny NYTT JMetroljusstil

Kontextmeny NYTT JMetro mörk stil

Avsluta

Detta var en stor uppdatering av JMetro, som lade till 5 stilar totalt, inklusive mörka och ljusa versioner. Nya stilar har lagts till:radioknapp, kryssruta, valruta, meny och kontextmeny.

JMetro har nu stilar för nästan alla JavaFX-kontroller som levereras med SDK. Det lägger också till nya stilar och nya kontroller som inte finns som standard.

De nya versionerna fokuserar på att optimera skärmfastigheter för varje plattform. Mer kompakt i musbaserade enheter (bärbara datorer, stationära datorer) och större kontroller i pekbaserade enheter. Utvecklare behöver fortfarande konfigurera varje kontrolls CSS (de som behöver det), men det kan bli ännu enklare i framtida versioner.

Jag har fortfarande inte uppdaterat dokumentationen, det kommer jag att göra under de kommande dagarna.

Som alltid om du vill hålla dig uppdaterad och inte missa något, prenumerera på den här bloggen och följ mig på twitter.

Här är vad jag har planerat härnäst:

• Ny stil för vippbrytare;
• Ny stil för Slider;
• Ny stil (inklusive nya animationer) för Button;
• Ange enkelt färger på kontroller;
• Osc.