Deepin Tool Kit (DTK)

DTK logo.

Deepin Tool Kit is a set of interface development tools written in C ++ /Qt. It is focused on the user experience. It contains the easy-to-recognize base window, a number of controls and utilities to display in the desktop environment.

This page is an excerpt from the category Development, to create applications and components of Deepin. If you want to know what applications are developed, we have listed on wiki.

Conventions

To create a program written with DTK we suggest these conventions:

Blank application, without the close button.
  • Background should be solid black or white. It starts with a presentation or completely empty.
  • The top bar consists of an icon, title, context menu, and minimize, maximize, and close buttons. Optionally, as long as simplicity is maintained, the title can be replaced by a quick access button or a search engine with back and forward buttons.
  • It is possible to apply blur (blur) to apply depth to distant objects or replace the solid background.
  • Disabling the minimize or close buttons are often useful in certain situations. In this case, the button will not disappear if it is not shown almost faded.
  • The context menu should have a Close or About button.
  • To add tools, we suggest using a sidebar instead of increasing the top bar.

Compiling a program Deepin

The program compile recommended is qmake or Qt Creator. For example, for the first, qmake deepin-draw.pro && make. The important sub-modules, pointed out in the article Build an application written in DTK, are:

  • dtkcore (main form)
  • dtkwidget (layout of controls)
  • dtkwm (integration to graphic server, dependent on DDE)

These are included in the library for the training of programs and it works with Qt or some compatible implementation if it is not written in C ++. The entire component is under the LGPL license. Logos can be png or svg. The template created by the Deepin community in Spanish is found on Github.

An application created in DTK. Credit Deepin Latin Code.

Available controls

The form is the main window with top and bottom bars. This usually has several controls to add control: Buttons, flashy buttons, label, text box, password box, check box, drop-down list, numeric indicator, image, slider bar, and so on. The available options are in the folder widget by dtkwidget.

Most controls start with the prefix D. For example DPushButton is a property that indicates the button.

Bosquejo de controles en Deepin DTK
Control sketch in Deepin DTK

Structure code sample

The source code is created by Deepin in Spanish under GPLv3. There are several examples on how to use from the Deepin repository.

Extracted from main.cpp and written in C ++:

#include "mainwindow.h"
#include <DApplication>
#include <DWidgetUtil>
#include <DAboutDialog>

DWIDGET_USE_NAMESPACE
int main(int argc, char *argv[])
{
    DApplication::loadDXcbPlugin();
    DApplication a(argc, argv);
    DAboutDialog dialog;
    a.loadTranslator();
    a.setAttribute(Qt::AA_UseHighDpiPixmaps);
    a.setApplicationName("Template");
    a.setProductName("Template");
    a.setAboutDialog(&dialog);

     dialog.setWindowTitle("Template");
     dialog.setProductName("<span>Description</span>");
     dialog.setProductIcon(QIcon("://productlogo.svg"));
     dialog.setCompanyLogo(QPixmap("://companylogo.png"));
     dialog.setDescription("");
     dialog.setVersion(DApplication::buildVersion("Version 1.0"));
     dialog.setWebsiteName("example.org");
     dialog.setWebsiteLink("https://example.org");

    MainWindow w;
    w.show();

    Dtk::Widget::moveToCenter(&w);
    return a.exec();
}

Example of mainwindow.cpp written in C ++:

#include "mainwindow.h"
#include <DWidgetUtil>
#include <DSearchEdit>
#include <DTitlebar>
#include <QDebug>
#include <QMenu>
#include <QAction>

MainWindow::MainWindow(DMainWindow *parent)
    : DMainWindow(parent)
{
    setCentralWidget(w);
    moveToCenter(this);
    MainWindow::resize(630,500);

    DSearchEdit *searchEdit = new DSearchEdit;
    titlebar()->setCustomWidget(searchEdit);
    searchEdit->setFixedWidth(200);
    searchEdit->show();

    QMenu *menu=new QMenu;
    QAction *action=new QAction("Action");
    menu->addAction(action);
    titlebar()->setMenu(menu);

    titlebar()->setIcon(QIcon(":/productlogo.svg"));

    connect(DGuiApplicationHelper::instance(), &DGuiApplicationHelper::themeTypeChanged,this,&MainWindow::setTheme);
}

MainWindow::~MainWindow()
{
    delete w;
}

void MainWindow::setTheme(DGuiApplicationHelper::ColorType theme)
{
    if(theme==DGuiApplicationHelper::LightType){
        qDebug()<<"Lighe";
    }else {
        qDebug()<<"Dark";
    }
}

API

For more information consult Deepin Desktop Environment.

Implementation

Both the main and other distributions implement the libraries for the applications to function.

further reading

External link:

Tags:

Would you recommend this article?