Qt में देशी इंटरफेस

यह लेख नोकिया से क्यूटी ढांचे पर आधारित जीयूआई प्रोग्रामिंग के बारे में है। हम विंडोज, लिनक्स और मैक ओएस एक्स प्लेटफार्मों पर देशी प्रदर्शन इंटरफेस विकसित करने के तरीकों पर ध्यान देंगे।



प्रस्तुति ^{[1] का} नेतृत्व जेन्स बाचे-वाईग (जेन्स बाचे-वाईग ) द्वारा किया गया ^था - क्यूटी के डेवलपर (2005 से), इंटरफेस (लुक और फील) से निपटते हैं।



अनुवादक से: आगे, चूंकि यह एक स्लाइड शो है , जहां तक ​​संभव हो मैं स्लाइड के लिए स्पष्टीकरण दूंगा। कुछ, मेरी राय में, कम महत्वपूर्ण बिंदुओं को छोड़ दिया जाएगा, कुछ को अधिक विस्तार से माना जाएगा।



तो चलिए शुरू करते हैं। इन परिवेशों के लिए डिज़ाइन किए गए इंटरफेस बनाने के लिए प्रत्येक ग्राफिकल वातावरण का अपना स्वयं का नियम (उपयोगकर्ता इंटरफ़ेस दिशानिर्देश, UIG) है। इनमें से मुख्य हैं विंडोज यूजर एक्सपीरियंस इंटरेक्शन गाइडलाइन, एप्पल ह्यूमन इंटरफेस गाइडलाइन, केडीई यूजर इंटरफेस गाइडलाइन और गनोम छिपाई। इनमें से प्रत्येक गाइड एक विशेष वातावरण के "बटन और रियूशोक की स्थिति" को निर्धारित करता है। Qt फ्रेमवर्क, बदले में, इन सभी गाइडों के लिए समर्थन प्रदान करता है, जिससे डेवलपर को पर्यावरण के अनुकूल विजेट्स का उपयोग करके प्रोग्राम बनाने की क्षमता मिलती है।

QStyle

QStyle एक बेस क्लास है जो ऑपरेटिंग सिस्टम के ग्राफिकल वातावरण में फिट होने की क्षमता के साथ एक एप्लिकेशन प्रदान करता है।



क्रमशः विंडोज 7 और उबंटू 10.10 इंटरफेस:





QStyle उपस्थिति, आकार, आकार और किसी भी प्लेटफ़ॉर्म-विशिष्ट शैली प्रदर्शन विकल्प (डिज़ाइन थीम) के लिए ज़िम्मेदार है।



मौजूदा शैलियों को संशोधित करने के लिए, QStyleOption क्लास उनकी परियोजनाओं में मौजूद है। उपयोग उदाहरण:

QStyleOption opt ; <br/>

opt. rect = arrowRect ; <br/>

opt. state = QStyle :: Sate_Item | QStyle :: State_Children ; <br/>



if ( expanded ) <br/>

opt. state |= QStyle :: State_Open ; <br/>

style ( ) -> drawPrimitive ( QStyle :: PE_IndicatorBranch , & opt , painter , this ) ;

QStyleOption क्लास वर्ग QStyle फ़ंक्शंस द्वारा उपयोग किए जाने वाले मापदंडों को संग्रहीत करता है।



यदि आपको किसी शैली को संशोधित करने की आवश्यकता है, तो इसे विरासत में लेने की कोई आवश्यकता नहीं है। आप कर सकते हैं और QProxyStyle (Qt 4.6 के साथ पेश) का उपयोग करना चाहिए। यह आपको सिस्टम शैली का उल्लंघन किए बिना आसानी से संशोधित करने की अनुमति देता है।

class MyProxyStyle : public QProxyStyle<br/>



{ <br/>

public : <br/>

int styleHint ( StyleHint hint , const QStyleOption * option = 0 , <br/>



const QWidget * widget = 0 , QStyleHintReturn * returnData = 0 ) const <br/>

{ <br/>

if ( hint == QStyle :: SH_UnderlineShortcut ) <br/>



return 0 ; <br/>

return QProxyStyle :: styleHint ( hint , option , widget , returnData ) ; <br/>



} <br/>

} ; <br/>

<br/>

int main ( int argc , char ** argv ) <br/>

{ <br/>

QApplication a ( argc , argv ) ; <br/>



a. setStyle ( new MyProxyStyle ) ; <br/>

//... <br/>

}

स्टाइल शीट

स्टाइल शीट का उपयोग सावधानी के साथ किया जाना चाहिए, क्योंकि उनका उपयोग उपस्थिति को बर्बाद कर सकता है। आपको उन्हें सिस्टम पैलेट के साथ मिलाने की कोशिश करनी चाहिए: ट्रांसलूसेंसी और सिस्टम पैलेट का उपयोग करें।



रंग कोडिंग से बचा जाना चाहिए:

QString css = "QLabel { color:palette(highlight); }" ;

और अगर आपको अपना रंग चाहिए:

QColor color ( 255 , 0 , 0 ) ; <br/>



QString css = QString ( "QLabel { color: %1; }" ) . arg ( color. name ( ) ) ;

सेगमेंट बटन बनाने के लिए, आपको बटन के लिए बैकग्राउंड इमेजेस और जॉगिंग इंडेंटेशन का उपयोग करके कुछ और हेरफेर की आवश्यकता होगी।

QWidget * segBtn = new QWidget ( this ) ; <br/>

QToolButton * backBtn = new QToolButton ; <br/>



QToolButton * forwardBtn = new QToolButton ; <br/>

segBtn -> setLayout ( new QHBoxLayout ) ; <br/>

segBtn -> layout ( ) -> setSpacing ( 0 ) ; <br/>



segBtn -> layout ( ) -> setMargin ( 0 ) ; <br/>

backBtn -> setIcon ( QIcon ( ":/imgs/arrow-back.png" ) ) ; <br/>

backBtn -> setFixedSize ( 29 , 32 ) ; <br/>



backBtn -> setStyleSheet ( "QToolButton { border-image: url(:/imgs/button-left.png); }" <br/>

"QToolButton:hover { border-image: url(:/imgs/button-left-hover.png); }" ) ; <br/>

forwardBtn -> setIcon ( QIcon ( ":/imgs/arrow-forward.png" ) ) ; <br/>



forwardBtn -> setFixedSize ( 29 , 32 ) ; <br/>

forwardBtn -> setStyleSheet ( "QToolButton { border-image: url(:/imgs/button-right.png); }" <br/>



"QToolButton:hover { border-image: url(:/imgs/button-right-hover.png); }" ) ; <br/>

segBtn -> layout ( ) -> addWidget ( backBtn ) ; <br/>

segBtn -> layout ( ) -> addWidget ( forwardBtn ) ; <br/>



mainToolBar -> addWidget ( segBtn ) ;

जैसा कि आप उदाहरण से देख सकते हैं ("विंडोज पर ब्लर बिहाइंड का उपयोग करना" लेख से उधार लिया गया है ^[2] ), छद्म कक्षाएं भी उपलब्ध हैं।



विशेषता चयनकर्ताओं का उपयोग करके, आप प्रत्येक सिस्टम शैली के लिए प्रदर्शन को अनुकूलित कर सकते हैं:

"QToolButton[style=QMacStyle] { border-image: url(:/imgs/button-mac-right.png); }" <br/>

"QToolButton[style=QWindowsVistaStyle] { border-image: url(:/imgs/button-vista-right.png); }"

संवादों

नियमावली के अनुसार, प्रत्येक ऑपरेटिंग सिस्टम (ग्राफिकल एनवायरनमेंट) के अपने विचार होते हैं कि बटन "सेव", "कैंसल", "ओके" और इसी तरह "बिल्कुल वहीं होना चाहिए, यहां नहीं।" और इसलिए बटन, विभिन्न लेबल , आदि पर सिस्टम आइकन के बारे में एक ही नस में , वास्तव में, यहां हम यूआईजी पर चर्चा नहीं कर रहे हैं, लेकिन विगेट्स के सही उपयोग के बारे में बात कर रहे हैं ...



UIG पर्यावरण को ध्यान में रखते हुए संवाद में मानक बटन का उपयोग QDialogButtonBox का उपयोग करके प्राप्त किया जाता है।

QDialogButtonBox box ( QDialogButtonBox :: Cancel | QDialogButtonBox :: Help | <br/>



QDialogButtonBox :: Ok | QDialogButtonBox :: Save ) ;

आप अपनी भूमिका के पदनाम के साथ अपने खुद के बटन भी जोड़ सकते हैं:

QDialogButtonBox box ; <br/>



box. addButton ( myButton , QDialogButtonBox :: AcceptRole ) ;

एक साधारण मोडल डायलॉग के उदाहरण पर बटन की भूमिका को इंगित करने का महत्व स्पष्ट रूप से दिखाई देता है:

MyQDialogSubcass dialog ; <br/>

//... <br/>



if ( dialog. exec == QDialog :: Accept ) { <br/>

//Make some noise? <br/>

}

यह याद रखना चाहिए कि मोडल संवादों का दुरुपयोग नहीं किया जाना चाहिए। इसलिए, उदाहरण के लिए, विंडोज पर उन्हें आलोचनात्मक या शायद ही कभी इस्तेमाल किए जाने वाले, एक समय, कार्यों के लिए उपयोग करने की सिफारिश की जाती है जो कि जारी रखने से पहले पूरी होनी चाहिए। केडीई में, मोडल संवादों का उपयोग केवल उन मामलों में आवश्यक है, जहां प्रोग्राम के साथ उपयोगकर्ता सहभागिता से डेटा हानि या अन्य समस्याएं हो सकती हैं (यूआईजी द्वारा परिभाषित)।



मोडल संवादों का उपयोग करते समय क्या होता है?









(उदाहरण ^[3] क्यूटी पुस्तकालयों के साथ दिए गए उदाहरणों से साड़ी कोड पर आधारित है)



संवाद बॉक्स प्रदर्शित करने के कई तरीके हैं:

• QDialog :: show () - मोडल नहीं;
• QDialog :: exec () - कार्यक्रम के लिए मोडल;
• QDialog :: open () - विंडो के लिए मोडल।

इस तरह, गैर-मोडल संवाद बनाए जा सकते हैं जो एप्लिकेशन के संबंध में और एक विशिष्ट विंडो या विजेट के संबंध में हैं।



इसके अलावा, यह असामान्य नहीं है जब एक संवाद किसी भी डेटा के इनपुट का एक रूप है। रूपों, एक विशेष रूप की समझ में, उदाहरण के लिए, संपर्क जानकारी या कुछ और दर्ज करना । यहाँ भी, UIG के अनुसार, एक अलग प्रदर्शन होगा:



एक अन्य बिंदु जो मैनुअल में अंतर दिखाता है, इनपुट फॉर्म ( QFormLayout - 2 कॉलम में लेआउट) के लिए मार्कअप का उपयोग है। सब कुछ पूरी तरह से दिखाई और समझ में आता है:











इस फॉर्म का कोड डिज़ाइनर का उपयोग करने की तुलना में खुद को लिखना आसान है:

QFormLayout * layout = new QFormLayout ( ) ; <br/>

layout -> addRow ( tr ( " :" ) , <br/>



userName ) ; <br/>

layout -> addRow ( tr ( ":" ) , <br/>

eMail ) ; <br/>

layout -> addRow ( tr ( ":" ) , <br/>



passWord ) ; <br/>

layout -> addRow ( tr ( " :" ) , <br/>

passWordAgain ) ;

क्रॉस-प्लेटफ़ॉर्म नोट

उपयोगकर्ता को कैसे दिखाएं कि वर्तमान दस्तावेज़ को संशोधित किया गया है?

setWindowModified ( ture ) ; <br/>

setWindowFilePath ( "Untitled 1.txt" ) ;

फ़ाइलों के लिए सापेक्ष रास्तों का उपयोग करें (उदाहरण के लिए, प्रलेखन के लिए: " /home/erik/myapp/bin/docs/index.html " → " डॉक्स / इंडेक्स। ")



उपयोगकर्ता का ध्यान कैसे आकर्षित करें?

void QApplication :: alert ( QWidget * widget , int msec = 0 ) [ static ]

मैक पर, डॉक आइकन कूदना शुरू हो जाएगा, और विंडोज पर, टास्कबार पर एप्लिकेशन विंडो बटन फ्लैश होगा।







संग्रहण पते (फ़ोटो, वीडियो, अस्थायी फ़ाइलें ...) का पता लगाने के लिए QDesktopServices :: storageLocation () का उपयोग करें।



अपने एप्लिकेशन से एक ईमेल भेजने के लिए, ब्राउज़र में एक पेज खोलें, या सिस्टम में स्थापित डिफ़ॉल्ट एप्लिकेशन में कुछ फ़ाइल, QDesktopServices :: openUrl () का उपयोग करें:

QDesktopServices :: openUrl ( "mailto:support@habrahabr.ru" ) ; <br/>



QDesktopServices :: openUrl ( "habrahabr.ru" ) ; <br/>

QDesktopServices :: openUrl ( QUrl :: fromLocalFile ( ... ) ) ;

किसी एप्लिकेशन में कीबोर्ड शॉर्टकट का उपयोग करने के लिए, मानक संयोजनों का उपयोग करना सबसे अच्छा है। विभिन्न प्लेटफार्मों पर कुछ संयोजन भिन्न होते हैं, इसे ध्यान में रखा जाना चाहिए (बेशक, कोई भी अपने स्वयं के संयोजनों को जोड़ने से मना नहीं करता है, उदाहरण के लिए, विंडोज में Ctrl + Q से बाहर निकलने के लिए - यह सुविधाजनक है, लेकिन मानक नहीं )

// "" <br/>

QList < QKeySequence > keys = QKeySequence :: keyBindings ( QKeySequence :: Cut ) ; <br/>



foreach ( QKeySequence key , keys ) { <br/>

logStream << key. toString ( QKeySequence :: PortableText ) ; <br/>

// ... <br/>



}

मूल थीम के समान आइकन का उपयोग करने की सिफारिश की जाती है, ताकि वे ओएस के वातावरण से बहुत भिन्न न हों। लिनक्स के साथ, यह आसान है। विषयों के लिए समर्थन है:

QIcon :: fromTheme ( "edit-cut" , QIcon ( ":/edit-cut.png" ) ) ;

यदि सिस्टम में एडिट-कट एक्शन के लिए एक आइकन पाया जाता है, तो सिस्टम का उपयोग किया जाएगा। यदि नहीं, तो यह संसाधनों से लोड होगा।

FreeDesktop से आइकन नामों की विशिष्टता यहां उपलब्ध है ।









QAction के लिए प्राथमिकता दें । यह उपयोगकर्ता इंटरफ़ेस में सबसे अधिक प्राथमिकता वाली क्रियाओं को उजागर करेगा। उदाहरण के लिए, जब टूलबार Qt :: ToolButtonTextBesideIcon पर सेट हो जाता है, तो कम प्राथमिकता ( LowPriority ) वाले कार्य बिना हस्ताक्षर के प्रदर्शित किए जाएंगे

void QAction :: setPriority ( Priority priority )

मेनू आइकन मैक पर उपयोग नहीं किए जाते हैं, लेकिन विंडोज और केडीई पर उपयोग किए जाते हैं। GNOME में, यह सेटिंग्स पर निर्भर करता है। हमारी मदद करने के लिए इसे "फिर से लिखना":

void QAction :: setIconVisibleInMenu ( bool visible ) <br/>

QApplication :: setAttribute ( Qt :: AA_DontShowIconsInMenus ) ;

गनोम और मैक उपयोगकर्ताओं का उपयोग इस तथ्य के लिए किया जाता है कि सेटिंग्स को बदलने के तुरंत बाद लागू किया जाता है, जबकि विंडोज और केडीई उपयोगकर्ता सेटिंग्स को लागू करने (और रद्द) करने की क्षमता में लिप्त होते हैं, जब तक कि संबंधित बटन दबाए बिना सेटिंग्स को लागू नहीं किया जाता।



एमडीआई इंटरफेस के बारे में: मैक और जीटीके + उनका समर्थन नहीं करते हैं। विंडोज में, वे अभी भी उपयोग किए जाते हैं, लेकिन किसी तरह यह अब एक आधुनिक ओएस की छवि में फिट नहीं होता है।



यदि आपको कुछ प्लेटफ़ॉर्म-विशिष्ट फ़ंक्शन (WinAPI, कोको ...) का उपयोग करने की आवश्यकता है, तो मैक्रोज़ Q_WS_WIN , W_WS_MAC , Q_WS_X11 , ...

#ifdef Q_WS_WIN <br/>



actionClose -> setShortcut ( QKeySequence ( "Ctrl+Q" ) ) ; <br/>

#endif

इन कार्यों के लिए, आपको QWidget :: winId () की आवश्यकता हो सकती है, जो सिस्टम पॉइंटर HWND , NSView * या X11 हैंडल (विंडोज, मैक और लिनक्स पर क्रमशः) लौटाता है। आपको यह नहीं भूलना चाहिए कि कार्यक्रम के निष्पादन के दौरान विंडो पहचानकर्ता बदल सकता है - QEvent :: WinIdChange घटना प्राप्त होगी।

प्लेटफ़ॉर्म डिपेंडेंट नोट्स

मैक

उच्च रिज़ॉल्यूशन ऐप आइकन का उपयोग करें।



अधिसूचना क्षेत्र के लिए काले और सफेद आइकन का उपयोग करें।



माता-पिता के बिना एक QMenuBar बनाएं, इसकी आवश्यकता नहीं है। पहला QMenuBar बनाया डिफ़ॉल्ट रूप से उपयोग किया जाएगा।



QMainWindow :: setUnifiedTitleAndToolBarOnMac (बूल सेट) विकल्प आपके पैनल को विंडो शीर्षक के साथ एक पूरे में संयोजित करेगा। लेकिन याद रखें कि यह करने के लिए नेतृत्व करेंगे

- टूलबार को स्थानांतरित करने में असमर्थता;

- बिना अंतराल के केवल 1 पंक्ति होगी (एक दूसरे के ऊपर कई पैनल थे - एक होगा);

- पूर्ण स्क्रीन मोड में, पैनल दिखाई नहीं देंगे;





डॉक में एक मेनू भी है। अपने आवेदन में इसका उपयोग करने के लिए:

QMenu * menu = new QMenu ; <br/>



// ... <br/>

extern void qt_mac_set_dock_menu ( QMenu * ) ; <br/>

qt_mac_set_dock_menu ( menu ) ;

Qt स्वचालित रूप से पुनर्व्यवस्थित करेगा (और नाम बदलें, यदि कुछ भी हो) आपके मेनू के आइटम मैक पर उनके सही स्थान पर है यदि आप उन्हें QAction: setMenuRole ( मेनूरोल मेनूरोल) का उपयोग करके भूमिकाओं के लिए उजागर करते हैं। उदाहरण के लिए, टिंचर मेनू को " प्रोग्राम → सेटिंग्स ... " में ले जाया जाएगा।

X11

यहां, मुख्य बिंदु निम्नलिखित freedesktop.org मानकों का होगा - यह:

• मेनू विनिर्देशों;
• आइकन थीम;
• ऑटो शुरू;
• बुकमार्क;
• .desktop फ़ाइल

एक साधारण .desktop कॉन्फ़िगरेशन फ़ाइल में है:

• एप्लिकेशन आइकन;
• मेनू के लिए बटन;
• माइम प्रकारों का पंजीकरण;
• ...

यदि उपयोगकर्ता KDE या GNOME का उपयोग कर रहा है, तो यह कैसे निर्धारित करें? दरअसल, कोई 100% तरीका नहीं है। आप " DESKTOP_SESSION " चर की जाँच करने का प्रयास कर सकते हैं।

$ echo $DESKTOP_SESSION <br/>



gnome

बेशक, गनोम और केडीई में अनुप्रयोगों के विभिन्न व्यवहार के बारे में मत भूलना। हम परीक्षण कर रहे हैं।

विंडोज

विंडोज पर QSettings रजिस्ट्री का उपयोग करता है। यहां इसका उपयोग सिस्टम सेटिंग्स को पढ़ने के लिए किया जा सकता है।

QSettings settings ( "HKEY_CURRENT_USER\\...\\Explorer\\Advanced" , QSettings :: NativeFormat ) ; <br/>



bool result = settings. value ( "EnableBalloonTips" , true ) . toBool ( ) ;

आप डॉटनेट या एक्सप्लोरर जैसी खाल का भी उपयोग कर सकते हैं। यह सब समाधान (ftp) में पाया जा सकता है।



आप ब्लर बिहाइंड ⁽²⁾ को भी सक्षम कर सकते हैं, लेकिन क्यूटी इसके लिए अभी तक एक एपीआई प्रदान नहीं करता है। हालाँकि, आप सीधे WAAPranslucentBackground विशेषता सेट करके और विजेट पर WA_NoSystemBackground को सक्षम करने के लिए याद करके WinAPI का उपयोग कर सकते हैं।

फ़ुटनोट

[१] - प्रस्तुति और उसका प्रतिलेखन ;

[२] - Qt लैब्स से लेख " विंडोज पर ब्लर बिहाइंड का उपयोग " (और लेख " विंडोज में खिड़की के नीचे धुंधली पृष्ठभूमि बनाना ");

[३] - पुनर्लेखन के स्रोत कोड sdi।



नए 365-दिन में शुभकामनाएँ!