Application layout
Application design mainly depends on the forms developed for the application. The application layout, however, may be influenced in many different ways.
- Layout defaults for the operating system
- QT Settings (qt4-qtconfig / qtconfig)
- Application style sheet (qss file, see example below)
Consider reading documentation on this topic provided by the Qt-Project:
http://qt-project.org/doc/stylesheet-reference.html
Layout defaults for the operating system depend on themes ans styles selected for running GUI desktops. The appearance of the application, might be changed, however, by changing Qt settings using qtconfig. On some Linux systems as Ubuntu, e.g. ODE tools look a bit strange, which might be changed by updating the Qt default setting. This, however, will affect all Qt applications, which also might be not desirable.
In order to change settings foe a single application, one may use style sheet (.qss) files. In order to apply a style sheet on a ODABA GUI framework application (as ClassEditor or Terminus, or any kind of customer application), the file path has to be passed via the configuration or ini-file variable
GUI.Appearance.StyleFile=myStyles.qss
within the Options section. Since the option is required before opening the database, it cannot be defined as application option in the database, but has to be passed via the ini-file.
The example below shows, how .qss files may look like.
/*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;
}