[prev in list] [next in list] [prev in thread] [next in thread] 

List:       pykde
Subject:    Re: [PyQt] QSplitter and the border between widgets
From:       "Jonathan Harper" <jon () white-walls ! net>
Date:       2011-10-12 16:05:45
Message-ID: 000901cc88f8$ce8d5ea0$6ba81be0$ () net
[Download RAW message or body]

[Attachment #2 (multipart/alternative)]


Timothy:

 

In the absence of source code, let's say your splitter is called "splitter".
To adjust the size of the handle--which seems to be part of your issue--,
use the handleWidth property. Calling splitter.setHandleWidth() with an
integer argument measured in pixels will let you adjust this. You can toy
with this value and how it appears in QtDesigner.

 

As for a "visible" handle, you have two choices: The handle itself created
by a virtual method in QSplitter called createHandle(), returning a
QSplitterHandle. QSplitterHandle follows the current style (see QStyle) in
how it appears. Create a form with a QSplitter in it using QtDesigner, then
preview it with the Cleanlooks style (Form->Preview->Cleanlooks). Cleanlooks
has a visible gripper-albeit an ugly one-,  which I suspect is something
you're looking for. Unfortunately, most styles don't paint anything but a
background for the splitter itself. Drawing a gripper will require
subclassing QSplitter, reimplementing createHandle() to return a subclassed
QSplitterHandle with a reimplemented paintEvent(). Frustrating, I know, but
QStyle follows the style of platforms. If you're on Windows, those are calls
to native Windows APIs, and I assume the same goes for Gnome (QGtkStyle) or
MacOS (QMacStyle).

 

The other aspect to consider about a default QSplitter/QSplitterHandle
combination is that QSplitter inherits QFrame and is typically used with
widgets than inherit QFrame as well (text editors, tree/list widgets, and so
forth). Using setContentsMargins() on the child widgets will put some
padding around the frame, making the handle a bit more obvious.

 

Try working this code into a subclassed QDialog:

 

---------

#I follow the whole from "PyQt4.QtGui import *" instead of "from PyQt4
import QtGui" methodology,

#so assume I did that already and created a subclass of QDialog, and that
this is a setupUi() method I'm demonstrating

#

#Also, I use keyword arguments quite a bit for brevity and clean code. Don't
let this distract you.

 

#assume we're adding other stuff, like a close button to this layout later

layout = QVBoxLayout(parent=self,

                     objectName='layout')

splitter = QSplitter(parent=self,

                     objectName='splitter', 

                     frameShape=QFrame.StyledPanel, 

                     frameShadow=QFrame.Plain)

#for demonstration purposes, we'll make the size fixed

splitter.setFixedSize(QSize(300, 100))

layout.addWidget(splitter)

        

#populate the splitter

widget1 = QFrame(parent=splitter, 

                 objectName='widget1', 

                 frameShape=QFrame.StyledPanel, 

                 frameShadow=QFrame.Sunken)

widget2 = QFrame(parent=splitter, 

                 objectName='widget2', 

                 frameShape=QFrame.StyledPanel, 

                 frameShadow=QFrame.Sunken)

 

#here's the interesting part:

widget1.setContentsMargins(2, 2, 2, 2)

widget2.setContentsMargins(2, 2, 2, 2)

 

 

splitter.addWidget(widget1)

splitter.addWidget(widget2)

 

---------

 

I'm actually working right now on how best to subtly hint that a splitter is
present without making it distracting (look at a piece of software called
XnView as an example of distracting).

 

Hope this helps,

Jonathan Harper


[Attachment #5 (text/html)]

<html xmlns:v="urn:schemas-microsoft-com:vml" \
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=us-ascii"><meta name=Generator content="Microsoft Word 12 \
(filtered medium)"><style><!-- /* Font Definitions */
@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;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
	{margin:0in;
	margin-bottom:.0001pt;
	font-size:11.0pt;
	font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
	{mso-style-priority:99;
	color:blue;
	text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
	{mso-style-priority:99;
	color:purple;
	text-decoration:underline;}
span.EmailStyle17
	{mso-style-type:personal-compose;
	font-family:"Calibri","sans-serif";
	color:windowtext;}
.MsoChpDefault
	{mso-style-type:export-only;}
@page WordSection1
	{size:8.5in 11.0in;
	margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
	{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body lang=EN-US link=blue vlink=purple><div \
class=WordSection1><p class=MsoNormal><span style='font-family:"Courier \
New"'>Timothy:<o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'><o:p>&nbsp;</o:p></span></p><p \
class=MsoNormal><span style='font-family:"Courier New"'>In the absence of source \
code, let&#8217;s say your splitter is called &#8220;splitter&#8221;. To adjust the \
size of the handle--which seems to be part of your issue--, use the handleWidth \
property. Calling splitter.setHandleWidth() with an integer argument measured in \
pixels will let you adjust this. You can toy with this value and how it appears in \
QtDesigner.<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Courier \
New"'><o:p>&nbsp;</o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>As for a &#8220;visible&#8221; handle, you have two \
choices: The handle itself created by a virtual method in QSplitter called \
createHandle(), returning a QSplitterHandle. QSplitterHandle follows the current \
style (see QStyle) in how it appears. Create a form with a QSplitter in it using \
QtDesigner, then preview it with the Cleanlooks style \
(Form-&gt;Preview-&gt;Cleanlooks). Cleanlooks has a visible gripper&#8212;albeit an \
ugly one&#8212;, &nbsp;which I suspect is something you&#8217;re looking for. \
Unfortunately, most styles don&#8217;t paint anything but a background for the \
splitter itself. Drawing a gripper will require subclassing QSplitter, reimplementing \
createHandle() to return a subclassed QSplitterHandle with a reimplemented \
paintEvent(). Frustrating, I know, but QStyle follows the style of platforms. If \
you&#8217;re on Windows, those are calls to native Windows APIs, and I assume the \
same goes for Gnome (QGtkStyle) or MacOS (QMacStyle).<o:p></o:p></span></p><p \
class=MsoNormal><span style='font-family:"Courier \
New"'><o:p>&nbsp;</o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>The other aspect to consider about a default \
QSplitter/QSplitterHandle combination is that QSplitter inherits QFrame and is \
typically used with widgets than inherit QFrame as well (text editors, tree/list \
widgets, and so forth). Using setContentsMargins() on the child widgets will put some \
padding around the frame, making the handle a bit more \
obvious.<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Courier \
New"'><o:p>&nbsp;</o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>Try working this code into a subclassed \
QDialog:<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Courier \
New"'><o:p>&nbsp;</o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>---------<o:p></o:p></span></p><p \
class=MsoNormal><span style='font-family:"Courier New"'>#I follow the whole from \
&#8220;PyQt4.QtGui import *&#8221; instead of &#8220;from PyQt4 import QtGui&#8221; \
methodology,<o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>#so assume I did that already and created a \
subclass of QDialog, and that this is a setupUi() method I&#8217;m \
demonstrating<o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>#<o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>#Also, I use keyword arguments quite a bit for \
brevity and clean code. Don&#8217;t let this distract you.<o:p></o:p></span></p><p \
class=MsoNormal><span style='font-family:"Courier \
New"'><o:p>&nbsp;</o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>#assume we&#8217;re adding other stuff, like a \
close button to this layout later<o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>layout = \
QVBoxLayout(parent=self,<o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier \
New"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \
objectName=&#8217;layout&#8217;)<o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>splitter = \
QSplitter(parent=self,<o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier \
New"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \
objectName='splitter', <o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier \
New"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameShape=QFrame.StyledPanel, \
<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Courier \
New"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n \
bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameShadow=QFrame.Plain)<o:p></o:p></span></p><p \
class=MsoNormal><span style='font-family:"Courier New"'>#for demonstration purposes, \
we&#8217;ll make the size fixed<o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>splitter.setFixedSize(QSize(300, \
100))<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Courier \
New"'>layout.addWidget(splitter)<o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \
<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Courier \
New"'>#populate the splitter<o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>widget1 = QFrame(parent=splitter, \
<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Courier \
New"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objectName='widget1', \
<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Courier \
New"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameShape=QFrame.StyledPanel, \
<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Courier \
New"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameShadow=QFrame.Sunken)<o:p></o:p></span></p><p \
class=MsoNormal><span style='font-family:"Courier New"'>widget2 = \
QFrame(parent=splitter, <o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier \
New"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objectName='widget2', \
<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Courier \
New"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameShape=QFrame.StyledPanel, \
<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Courier \
New"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;frameShadow=QFrame.Sunken)<o:p></o:p></span></p><p \
class=MsoNormal><span style='font-family:"Courier \
New"'><o:p>&nbsp;</o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>#here&#8217;s the interesting \
part:<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Courier \
New"'>widget1.setContentsMargins(2, 2, 2, 2)<o:p></o:p></span></p><p \
class=MsoNormal><span style='font-family:"Courier New"'>widget2.setContentsMargins(2, \
2, 2, 2)<o:p></o:p></span></p><p class=MsoNormal><span style='font-family:"Courier \
New"'><o:p>&nbsp;</o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'><o:p>&nbsp;</o:p></span></p><p \
class=MsoNormal><span style='font-family:"Courier \
New"'>splitter.addWidget(widget1)<o:p></o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>splitter.addWidget(widget2)<o:p></o:p></span></p><p \
class=MsoNormal><span style='font-family:"Courier \
New"'><o:p>&nbsp;</o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>---------</span><o:p></o:p></p><p \
class=MsoNormal><span style='font-family:"Courier \
New"'><o:p>&nbsp;</o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>I&#8217;m actually working right now on how best to \
subtly hint that a splitter is present without making it distracting (look at a piece \
of software called XnView as an example of distracting).<o:p></o:p></span></p><p \
class=MsoNormal><span style='font-family:"Courier \
New"'><o:p>&nbsp;</o:p></span></p><p class=MsoNormal><span \
style='font-family:"Courier New"'>Hope this helps,<o:p></o:p></span></p><p \
class=MsoNormal><span style='font-family:"Courier New"'>Jonathan \
Harper<o:p></o:p></span></p></div></body></html>



_______________________________________________
PyQt mailing list    PyQt@riverbankcomputing.com
http://www.riverbankcomputing.com/mailman/listinfo/pyqt

[prev in list] [next in list] [prev in thread] [next in thread] 

Configure | About | News | Add a list | Sponsored by KoreLogic