Qt Widget app in BB10



  • Does Qt Widget apps (not QML) look ok in BB10 (like in symbian)? Or is the UI all messed up (like in Meego) ?
    I know QML seems to be the preferable way to go, buit I have some widget apps I would like to reuse.



  • Qt Widget apps look ugly by default for today. But this will not stay like this. There will be a native style which will make Qt widgets look as close as possible to the native ones (you get those using Cascades). I hope very much we will get this done on time for the final release of the NDK before the launch in Jan...

    Before that you can apply a simple CSS style:

    @ this->setStyleSheet("QWidget{ "
    "font-size: 60px; "
    "font-family: 'Slate'; "
    "background:'black';"
    "color: 'white';"
    "}"
    "QPushButton {"
    "background:'#121212';"
    "border-radius: 10;"
    "border: 2px solid gray;"
    "}"
    "QListWidget {"
    "background:'#121212';"
    "border-radius: 10;"
    "border: 2px solid gray;"
    "}"
    "QLineEdit {"
    "border-radius: 10;"
    "border: 2px solid gray;"
    "}"
    "QListWidgetItem {"
    "font-size: 30px; "
    "}"
    );
    @



  • I am new to BlackBerry earlier developed many symbian,c++ apps now want build widgets or port symbian widgets to BB.

    Does widgets work ob BB smartphones.

    Please guide me to build a widget playing rtsp stream etc on BB smartphone.



  • Hi Vladimir

    Finally I received my Alpha device. I tried the CSS style they look good.
    Can you tell me if the native style made it to last ndk version ? If so how to apply it ? I'm using QtCreator configured for ndk. If not, can you recommend a CCS for a toolbar menu ?

    Thanks
    João de Deus



  • Since, at least, the Gold BlackBerry 10 NDK there are a BB10 Light and Dark styles. They look pretty close to a native look and feel, however there are some parts that are not finished yet: menus have dark text on dark background and too small for finger selection, icons on the toolbar and buttons are too small, drop downs look a bit weird, QTableView borders aren't visible, etc. However, it was a good starting point making my QWidget app look less alien. Luckily, I was able to fix most of these issues by creating a proxy style + writing a style sheet. You can also make your app using this style by default by passing "-style bb10dark", if I remember correctly, parameter on start-up.

    Unfortunately, I'm not at home ATM so I can't copy-paste the code and style sheet I wrote. Will do this later when I get home.



  • QApplication::setStyle("bb10dark")
    or
    QApplication::setStyle("bb10light")

    should also work.



  • [quote author="Bomb3rman" date="1358446815"]QApplication::setStyle("bb10dark")
    or
    QApplication::setStyle("bb10light")

    should also work.[/quote]

    Yes, but it won't work with QProxyStyle approach I mentioned earlier: if you try calling QApplication::setStyle() twice (first to select BB 10 style and second to set proxy style) it crashes. At least, that's how it was for me.



  • So, here is the code I used to "fix" current BB10 Dark style.

    The style sheet:
    @
    app.setStyleSheet(
    "QMenuBar {"
    " background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #444 stop:0.65 #333, stop:1 #444);"
    " border-bottom: 1px solid darkgray;"
    " spacing: 1px;"
    "}"
    "QMenuBar::item {"
    " padding: 0.3em 0.5em;"
    "}"
    "QMenuBar::item:selected {"
    " background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #00a8df stop:0.65 #00889f, stop:1 #00a8df);"
    "}"
    "QMenu {"
    " border: 1px solid darkgray;"
    "}"
    "QMenu::item {"
    " padding: 0.4em 0.5em 0.4em 1.4em;"
    " color: white;"
    " font-size: 9pt;"
    " background-color: #121212;"
    "}"
    "QMenu::item:selected {"
    " background-color: #00a8df;"
    "}"
    "QMenu::item:disabled {"
    " color: darkgray;"
    " background-color: #121212;"
    "}"
    "QMenu::icon {"
    " margin-left: 0.85em;"
    "}"
    "QTabBar {"
    " background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #444 stop:0.65 #333, stop:1 #444);"
    " border-bottom: 1px solid darkgray;"
    " spacing: 1px;"
    "}"
    "QTabBar::tab {"
    " padding: 0.3em 0.5em;"
    "}"
    "QTabBar::tab:selected {"
    " background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #00a8df stop:0.65 #00889f, stop:1 #00a8df);"
    " padding: 0.3em 0.5em;"
    "}"
    "QTableView {"
    " gridline-color: darkgray;"
    "}"
    "QTableView::item {"
    " padding: 0 0.5em;"
    "}"
    "QComboBox {"
    " padding: 0.5em 1.3em 0.5em 0.5em;"
    "}"
    "QTextBrowser {"
    " background-color: lightgray;"
    " color: black;"
    "}"
    );
    @

    The proxy style:
    @
    #include <QProxyStyle>

    class BB10ProxyStyle: public QProxyStyle
    {
    public:
    int pixelMetric(PixelMetric metric, const QStyleOption *option, const QWidget *widget) const
    {
    switch (metric) {
    case QStyle::PM_ButtonIconSize:
    return 42; // Makes icons in QPushButton bigger
    case QStyle::PM_SmallIconSize:
    return 42; // Makes icons in QMenu bigger
    default:
    return QProxyStyle::pixelMetric(metric, option, widget);
    }
    }
    int styleHint(StyleHint hint, const QStyleOption *option, const QWidget *widget, QStyleHintReturn *returnData) const
    {
    if (hint == QStyle::SH_UnderlineShortcut)
    return 0; // Don't underline shortcuts in menu and on buttons
    return QProxyStyle::styleHint(hint, option, widget, returnData);
    }
    };

    int main(int argc, char *argv[])
    {
    QApplication::setStyle(new BB10ProxyStyle);
    QApplication app(argc, argv);
    ...
    }
    @

    And to have bb10dark style set as the default when application starts, add the following to your bar-descriptor.xml:
    @
    <?xml version='1.0' encoding='utf-8' standalone='no'?>
    <qnx >
    ...
    <arg>-style</arg>
    <arg>bb10dark</arg>
    ...
    </qnx>
    @

    Here's how it looks:
    Plain BB10 Dark style: https://l-homes.org/~leppa/bb10/IMG_00000017.png
    With style sheet: https://l-homes.org/~leppa/bb10/IMG_00000018.png
    With style sheet and proxy: https://l-homes.org/~leppa/bb10/IMG_00000019.png

    Edit: added QTextBrowser styling rules.



  • Thank very much, I'll try this.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.