Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS) (diskuse)

[vain]

No to je na zblití =)

[sivlk]

+1

[mirec]

Páni to vyzerá hnusne ;) Pritom qss je celkom použiteľná vec, stačí tom trochu citu ... a hneď to vyzerá krajšie. Nemal by som zverejňovať screenshoty, ale snáď ma za jeden nikto nezabije - qss tak trochu menej hnusné. Štandardne to beží na fullscreene preto taký divný toolbar kombinovaný s titulkom okna. Všetky prvky sú ručne naštýlované, cieľom bolo vytvoriť niečo elegantné ako plastique a dobre ovládateľné cez dotykový display.

[David Watzke]

Hezké Aspoň lidí uvidí jak pěkně to může vypadat

[mirec]

Dík. Ešte jedna vec mi nedá spávať (no dobré kecám, ale to nie je podstatné) ... čakal som od tohto článku niečo iné. Upozornenie, že Qt 4 má takúto vlastnosť a všetko je v dokumentácii je fajn, ale niečo motivačné s peknými obrázkami (s dôrazom na pekné) by sa k článku možno hodilo, takže pre tých, ktorí sa neboja anglického textu (no tak toho textu tam je hooodne :D) - Qt Stylesheets Button Bar Tutorial (to bola inšpirácia pre mňa).

[Mige_Amour]

Hezké, škoda, že tady se to tak nevyvedlo

[Tomáš]

Hezký, ale proč jsou ty butony tak velký, proti tomu písmu uvnitř. To je takový problém to udělat nějak úměrně? )

[mirec]

Písmo je malé pretože na stroji, na ktorom programujem mám nízke DPI. Na cieľovom stroji je väčšie DPI a teda aj písmo. Ale v podstate asi by nezaškodilo nastaviť písmo na presnú veľkosť v pixeloch ;)

[Beruska]

Vetsi DPI, mensi pismo.

[mirec]

Veľkosť písma je povedzme 9pt, v prepočte na px je to povedzme 11px. Po zvýšení dpi by veľkosť písma mala zostať rovnaká, ale v pixeloch je to už povedzme 15px. Písmo sa teda relatívne voči grafike, ktorá je v px zväčší ;) (čísla sú len orientačné)

[Jirka]

Dik, Davide.

[mikro]

Neexistuje možnost, jak načíst soubor se stylem, metodě se zkrátka musí zadat řetězec, takže to musí programátor vyřešit sám

To by ta clovece grafik / dizajner asi fakt miloval, keby si mu povedal, ze ti musi dodat textak vytvoreny v Notepade ;) Samozrejme, ze styly idu editovat v Qt Designerovi, so syntax highlightingom, kontrolou syntaxe atd.

[T.O.M.]

Neexistuje možnost, jak načíst soubor se stylem, metodě se zkrátka musí zadat řetězec, ...

Není pravda, že to nejde, jen je třeba na začátek řetězce s cestou k souboru přidat file:///, např.: "file:////home/user/stylesheet.qss", na widlích by to mohlo vypadat "file:///c:\Program Files\xyz/stylesheet.qss" (možná s normálními lomítky, nezkoušeno)

Navíc pokud se style sheet načte tímto způsobem a ne vložením obsahu souboru jako v článku, může se v QSS souboru použít relativních cest (vzhledem k tomuto souboru) např. k obrázkům s pozadím, což dost zpřehlední zápis a usnadní práci.

Jinak článek dobrý, jen by to chtělo koukatelnější ukázku možností. Za takovou barevnou změť by se styděli i v cirkuse

[mirec]

Příloha:

• qss.7z (1424 bytů)

jen by to chtělo koukatelnější ukázku možností

Neviem, či to je len o farbách ... celý príklad sa mi zdá taký dosť umelý. Mám z neho pocit, že autor qss nikdy nepoužil ;)

Skúsim sa na to pozrieť z pohľadu človeka, ktorý qss nikdy nevidel a nevie na čo by sa to mohlo hodiť. Takže si prečítam článok, vidím, že sa qss dá použiť na nejaké to ofarbenie prvkov, ale načo to je dobré sa moc nedozviem.

Ak by som ja vymýšľal nejaký príklad na qss asi by som skúsil skôr niečo čisto praktické. Pri prefarbovaní inputov má ako prvé asi napadne zmeniť farbu pozadia pri nevalidnom vstupe (v niektorých dialógoch kde je viacej inputov môže byť mierne podfarbenie do červena veľmi užitočné na nájdenie chyby).

Ako prvé ma napadne označenie inputov nejakou sémantickou značkou. To je možné dosiahnuť dynamickými property, takže zavoláme input->setProperty("inputInvalid", true alebo false) pri zmene obsahu inputu.

Ďalším krokom bude napísanie príslušného qss. To je pre tento prípad jednoduché: *[inputInvalid='true'] { background-color: red; }

Poctivý čitateľ skúšajúci si príklad by asi v tomto momente zistil, že takto to jednoducho nefunguje. Po zmene dynamických property je potrebné ručne vnútiť widgetu prekreslenie aby nastala viditeľná zmena.

input->style()->unpolish(input);
input->ensurePolished();

Posledným detailom v tomto príklade je farba, ktorá je daná napevno. Omnoho lepším riešením by bolo zobrať farbu z aktuálnej palety a v určitom pomere ju zmiešať s červenou. Výsledok môžte skúsiť v prílohe. Pekný príklad použitia qss a dynamických property je napríklad tu.