abclinuxu.cz AbcLinuxu.cz itbiz.cz ITBiz.cz HDmag.cz HDmag.cz abcprace.cz AbcPráce.cz
AbcLinuxu hledá autory!
Inzerujte na AbcPráce.cz od 950 Kč
Rozšířené hledání
×

včera 19:22 | Nová verze

Ondřej Filip, výkonný ředitel sdružení CZ.NIC, oznámil vydání verze 2.0.0 open source routovacího démona BIRD (Wikipedie). Přehled novinek v diskusním listu a v aktualizované dokumentaci.

Ladislav Hagara | Komentářů: 0
včera 09:22 | Pozvánky

V Praze dnes probíhá Konference e-infrastruktury CESNET. Na programu je řada zajímavých přednášek. Sledovat je lze i online na stránce konference.

Ladislav Hagara | Komentářů: 1
9.12. 20:11 | Nová verze

Byl vydán Debian 9.3, tj. třetí opravná verze Debianu 9 s kódovým názvem Stretch a Debian 8.10, tj. desátá opravná verze Debianu 8 s kódovým názvem Jessie. Řešeny jsou především bezpečnostní problémy, ale také několik vážných chyb. Instalační média Debianu 9 a Debianu 8 lze samozřejmě nadále k instalaci používat. Po instalaci stačí systém aktualizovat.

Ladislav Hagara | Komentářů: 0
9.12. 00:44 | Nová verze

Po 6 měsících vývoje od vydání verze 0.13.0 byla vydána verze 0.14.0 správce balíčků GNU Guix a na něm postavené systémové distribuce GuixSD (Guix System Distribution). Na vývoji se podílelo 88 vývojářů. Přibylo 1 211 nových balíčků. Jejich aktuální počet je 6 668. Aktualizována byla také dokumentace.

Ladislav Hagara | Komentářů: 4
8.12. 21:33 | Nová verze

Po půl roce vývoje od vydání verze 5.9 byla vydána nová stabilní verze 5.10 toolkitu Qt. Přehled novinek na wiki stránce. Současně byla vydána nová verze 4.5.0 integrovaného vývojového prostředí (IDE) Qt Creator nebo verze 1.10 nástroje pro překlad a sestavení programů ze zdrojových kódů Qbs.

Ladislav Hagara | Komentářů: 0
7.12. 11:11 | Komunita

Naprostá většina příjmů Mozilly pochází od výchozích webových vyhledávačů ve Firefoxu. Do konce listopadu 2014 měla Mozilla globální smlouvu se společností Google. Následně bylo místo jedné globální smlouvy uzavřeno několik smluv s konkrétními vyhledávači pro jednotlivé země. V USA byla podepsána pětiletá smlouva s vyhledávačem Yahoo. Dle příspěvku na blogu Mozilly podala společnost Yahoo na Mozillu žalobu ohledně porušení této

… více »
Ladislav Hagara | Komentářů: 0
7.12. 05:55 | Zajímavý článek

V Londýně probíhá konference věnovaná počítačové bezpečnosti Black Hat Europe 2017. Průběžně jsou zveřejňovány prezentace. Videozáznamy budou na YouTube zveřejněny o několik měsíců. Zveřejněna byla například prezentace (pdf) k přednášce "Jak se nabourat do vypnutého počítače, a nebo jak v Intel Management Engine spustit vlastní nepodepsaný kód". Dle oznámení na Twitteru, aktualizace vydaná společností Intel nevylučuje možnost útoku.

Ladislav Hagara | Komentářů: 5
7.12. 04:44 | Komunita

Virtualizační nástroj GNOME Boxy ve Fedoře 27 umožňuje jednoduše stáhnout a nainstalovat Red Hat Enterprise Linux, který je pro vývojáře zdarma. Vývojová verze GNOME Boxy již umožňuje jednoduše stáhnout a nainstalovat další linuxové distribuce. Ukázka na YouTube. Seznam distribucí a jejich verze, nastavení a cesty k ISO obrazům je udržován v knihovně a databázi libosinfo (GitLab).

Ladislav Hagara | Komentářů: 0
7.12. 03:33 | Nová verze

Google Chrome 63 byl prohlášen za stabilní (YouTube). Nejnovější stabilní verze 63.0.3239.84 tohoto webového prohlížeče přináší řadu oprav a vylepšení. Vylepšeny byly také nástroje pro vývojáře. Opraveno bylo 37 bezpečnostních chyb.

Ladislav Hagara | Komentářů: 12
6.12. 22:55 | Pozvánky

Spolek OpenAlt zve příznivce otevřených technologií a otevřeného přístupu na 147. brněnský sraz, který proběhne v pátek 15. prosince od 18:00 hodin v restauraci Severka na rohu Tučkové a Zahradníkové.

Ladislav Hagara | Komentářů: 0
Jak se vás potenciálně dotkne trend odstraňování analogového audio konektoru typu 3,5mm jack z „chytrých telefonů“?
 (8%)
 (1%)
 (1%)
 (1%)
 (75%)
 (14%)
Celkem 952 hlasů
 Komentářů: 45, poslední 1.12. 19:00
    Rozcestník

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

    2. 9. 2010 | David Watzke | Programování | 7999×

    V tomto díle se podíváme na možnosti stylování grafického uživatelského rozhraní pomocí jazyka podobného CSS a alternativně implementací vlastního stylu.

    Stylování GUI pomocí CSS

    Jeden ze způsobů, jak si upravit vzhled widgetů podle svých představ, je použití Qt Style Sheets (QSS), což je jazyk velice podobný CSS, který je přizpůsoben právě k těmto účelům.

    Chcete-li mít například červený text na (všech) tlačítkách a zelené pozadí na vstupních polích, můžete použít

    QPushButton {
    	color: red;
    }
    
    QLineEdit {
    	background-color: green;
    }
    

    Výsledek bude vypadat takto:

    qt 12 style1

    Prohlédněte si seznam stylovatelných widgetůseznam vlastností, které jim lze nastavit. Dostupná je i spousta ukázek.

    Styly se nastavují metodou setStyleSheet(const QString& styles), kterou má každý widget. Tuto metodu má i QApplication a přes instanci této třídy (kterou má každý Qt program s GUI) se nastavuje styl pro celý program. 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, a to nejjednodušeji tak, že si soubor otevře pomocí QFile a celý jej načte metodou readAll().

    // soubor se stylem může být i zakompilovaný v binárce, viz
    // Grafické programy v Qt 4 – 7 (lokalizace a data programu)
    QFile file(":/qss/style.qss");
    if(file.open(QIODevice::ReadOnly | QIODevice::Text))
    {
    	qApp->setStyleSheet(file.readAll());
    	file.close();
    }
    

    Je dobré mít na paměti, že když měníte barvu popředí, je vhodné ujistit se, že bude dobře čitelné na pozadí, které může být na jiném systému jiné než vaše. To, že uživatelské rozhraní připomínající cirkus (například jako to moje ukázkové) dost lidí odradí od používání programu, pravděpodobně říkat ani nemusím. Je tedy vhodné používat styly rozumně, případně implementovat možnost úplného vypnutí stylování.

    Styly lze bez problémů měnit za běhu programu, proto jsem pro ukázku napsal program s textovým polem, kam můžete napsat svoje styly a rovnou je aplikovat:

    qt 12 styles

    styles.h: API.

    #ifndef STYLES_H
    #define STYLES_H
    
    #include <QWidget>
    
    class QTextEdit;
    
    class Styles : public QWidget
    {
    	Q_OBJECT
    
    public:
    	Styles(QWidget *parent = 0);
    
    private:
    	QTextEdit* styleEditor;
    
    private slots:
    	void applyStyle();
    };
    
    #endif // STYLES_H
    

    styles.cpp:

    #include "styles.h"
    
    #include <QCheckBox>
    #include <QPushButton>
    #include <QTextEdit>
    #include <QLabel>
    #include <QVBoxLayout>
    
    Styles::Styles(QWidget *parent)
    	: QWidget(parent)
    {
    	styleEditor = new QTextEdit;
    	QPushButton* btn = new QPushButton(tr("Apply"));
    
    	connect(btn, SIGNAL(clicked()), this, SLOT(applyStyle()));
    
    	QVBoxLayout* layout = new QVBoxLayout(this);
    	layout->addWidget(styleEditor);
    	layout->addWidget(btn);
    	layout->addSpacing(10);
    	layout->addWidget(new QCheckBox(tr("This is QCheckBox")));
    	layout->addWidget(new QLabel(tr("This is QLabel")));
    }
    
    void Styles::applyStyle()
    {
    	this->setStyleSheet( styleEditor->toPlainText() );
    }
    

    Vytvoření vlastního stylu

    Kdyby vám nestačilo to, čeho lze dosáhnout QSS stylováním, tak jiná a ještě flexibilnější možnost, jak upravit vzhled programu, je naprogramovat si vlastní nebo upravit stávající styl. V současnosti (Qt 4.7) nepodporuje QSS stylování vlastních stylů, ale prý je to v plánu.

    Vlastní styl se vytváří následovně: Nejprve je třeba vytvořit si pro styl třídu, která dědí QCommonStyle (což je základní styl) nebo některý specifický styl, jako například QCleanlooksStyle, QMacStyle, QPlastiqueStyle, nebo QWindowsXPStyle. Co všechno lze ve třídě upravit, si můžete prohlédnout v dokumentaci QStyle. V dokumentaci je též velice pěkná ukázka vytvoření stylu.

    qt 12 styles enabledwood

           

    Hodnocení: 100 %

            špatnédobré        

    Nástroje: Tisk bez diskuse

    Tiskni Sdílej: Linkuj Jaggni to Vybrali.sme.sk Google Del.icio.us Facebook

    Komentáře

    Vložit další komentář

    vain avatar 2.9.2010 07:37 vain | skóre: 16
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)
    No to je na zblití =)
    If the only choice you've got is to do the wrong thing, then it's not really the wrong thing, it's more like fate.
    2.9.2010 08:24 sivlk | skóre: 15 | blog: sivlk
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)
    +1
    mirec avatar 2.9.2010 09:57 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)
    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.
    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    David Watzke avatar 2.9.2010 11:18 David Watzke | skóre: 74 | blog: Blog... | Praha
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)
    Hezké :-) Aspoň lidí uvidí jak pěkně to může vypadat :-D
    “Being honest may not get you a lot of friends but it’ll always get you the right ones” ―John Lennon
    mirec avatar 2.9.2010 15:11 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)
    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).
    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    2.9.2010 15:38 Mige_Amour | skóre: 12 | Benešov
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)
    Hezké, škoda, že tady se to tak nevyvedlo
    2.9.2010 15:35 Tomáš
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)
    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 avatar 2.9.2010 16:03 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)
    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 ;)
    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    2.9.2010 20:46 Beruska
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)
    Vetsi DPI, mensi pismo.
    mirec avatar 2.9.2010 21:46 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)
    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é)
    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon
    2.9.2010 13:04 Jirka
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)
    Dik, Davide.
    2.9.2010 22:53 mikro
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)
    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.
    2.9.2010 22:54 T.O.M. | skóre: 22 | blog: T.O.M.'s blog | Ostrava
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)

    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 avatar 3.9.2010 08:33 mirec | skóre: 31 | blog: mirecove_dristy | Poprad
    Rozbalit Rozbalit vše Re: Grafické programy v Qt 4 – 12 (stylování GUI pomocí CSS)
    Příloha:
    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.

    LinuxOS.sk | USE="-fotak -zbytocnosti -farebne_lcd +vydrz +odolnost +java" emerge telefon

    Založit nové vláknoNahoru

    ISSN 1214-1267   www.czech-server.cz
    © 1999-2015 Nitemedia s. r. o. Všechna práva vyhrazena.