Application design
GUI application design covers a number of activities. Besides designing dialogs and other forms, it includes providing an event/action schema for associating different actions with GUI events (button clicks, mouse events and others). Moreover, specific behavior for visual elements has to be implemented as reaction on system events (control is shown/hidden, data filled etc.). This chapter covers all these topics in detail:
- Designing dialogues
- Designing controls
- Event/action schema
Implementation details for implementing actions and event handlers are described in Design classes.
/*MainStyle*/
QWidget{
font-family: Arial, sans-serif;
font-size:8pt;
font-weight: normal;
}
QFrame{
background:rgb(255,255,255);
}
QTabWidget::pane { /* The tab widget frame */
border-top: 2px solid #0000FF;
}
QTabWidget::tab-bar {
left: 5px; /* move to the right by 5px */
}
QSplitter::handle:horizontal {
height: 2px;
width: 2px;
border-left: 1px solid darkgrey;
border-right: 1px solid darkgrey;
}
QSplitter::handle:horizontal:pressed {
border-left: 1px solid grey;
border-right: 1px solid grey;
}
QSplitter::handle:vertical {
height: 2px;
width: 2px;
border-top: 1px solid darkgrey;
border-bottom: 1px solid darkgrey;
}
QSplitter::handle:vertical:pressed {
border-top: 1px solid grey;
border-bottom: 1px solid grey;
}
/* Style the tab using the tab sub-control. Note that
it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
border: 1px solid #0000FF;
/*border-bottom: none; /* same as the pane color */
/*border-top: none; /* same as the pane color */
min-width: 8ex;
padding: 0px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
border-color: #9B9B9B;
border-bottom-color: #C2C7CB;
}
QTabBar::tab:!selected {
margin-top: 0px; /* make non-selected tabs look smaller */
}
QLineEdit {
/*border: 2px solid gray;*/
border-radius: 2px;
padding: 0 0px;
background: white;
selection-background-color: #0000FF;
selection-color: white;
}
QTextEdit,QPlainTextEdit, QListView, QTreeView{
/*border: 2px solid gray;*/
border-radius: 2px;
padding: 0 0px;
background: white;
selection-background-color: #0000FF;
selection-color: white;
}
/* identify by field_control_name*/
QWidget#info QTextEdit[readOnly="true"]{
background:lightyellow;
}
QLabel{
font-weight:120%;
padding-left: 2px
}
/* fancy button with identifier */
QPushButton#ShowSearch{
border: 1px solid lightgray;
border-radius: 2px;
color: white;
background: rgb(255,255,255);
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #90d0d0, stop: 0.4 #80b0d0,
stop: 0.5 #80a0c0, stop: 1.0 #90c0e0);
}
/* QPushButton#ShowSearch:hover */
/* Silver Scrollbar with icons on buttons */
QScrollBar:vertical {
border: 1px solid grey;
border-top: none;
border-bottom: none;
background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #cccccc , stop: 0.5 #b6b6b6,
stop: 0.6 #bbbbbb,stop: 1.0 #dddddd);
width: 18px;
margin: 20px 0 20px 0;
}
QScrollBar::handle:vertical {
background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #ffffff, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #eeeeee);
border: 1px solid grey;
border-left: none;
border-right: none;
min-height: 18px;
}
QScrollBar::add-line:vertical {
border: 1px solid grey;
border-radius:2px;
border-top-left-radius:0px;
border-top-right-radius:0px;
background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #ffffff, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #eeeeee);
height: 20px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::add-line:vertical:pressed {
background: #cccccc;
height: 20px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
border: 1px solid grey;
border-radius:2px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
background: qlineargradient(x1: 0, y1: 0, x2: 1, y2: 0,
stop: 0 #ffffff, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #eeeeee);
height: 20px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical:pressed {
background: #cccccc;
height: 20px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical{
image: url(icons/elements/scroll_up.png);
width: 16px;
height: 16px;
}
QScrollBar::down-arrow:vertical {
image: url(icons/elements/scroll_down.png);
width: 16px;
height: 16px;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none;
}