I like the language D. I have been following its development for a long time. For D, there are several GUI libraries and binders, but I decided to reinvent my bike.

I want to talk about your project DlangUI . I hope that he will be useful to someone.







On Cddv screenshot DlangIDE - an application written in DlangUI.

')

Features:

• Cross-platform - supported by Windows, Linux, Mac OSX; ease of porting to other platforms
• Written in D - easily expanded
• Using Layouts for Positioning Interface Elements
• Scaling of fonts and icons in the application, depending on the screen resolution
• Unicode support
• Internationalization - support translate UI into multiple languages
• Hardware acceleration using OpenGL (optional)
• Ability to render widgets over the OpenGL scene (for example, for the in-game UI)
• Small size of executable file
• The appearance of the interface is configured using themes (two standard themes - light and dark)
• Embedding resources in an executable file
• Open source, licensed under Boost License 1.0

A couple more screenshots

DlangUI demo - example1

Demo DlangUI - Tetris

Why do we need another GUI library?

For D there are many GUI libraries. A complete list can be found on wiki.dlang.org

If binding to GTK, Qt, wxWidgets, FLTK, and even SWT port from Java to D (DWT). But they pull a lot of dependencies with them, it’s difficult to expand the set of widgets, change their appearance.

Native, written in D, DFL and DGUI - work only under Windows.

Therefore, writing your own bike GUI is not such a stupid idea.

Let's get acquainted with Hello, World

To build and run the application on DlangUI, we need a D compiler (for example, dmd ) and DUB (build tool and dependency manager). Download and install them if they are not already there.

Create a directory for the project, in it create a project file for DUB - dub.json

{ "name": "helloworld", "targetPath": "bin", "targetName": "helloworld", "targetType": "executable", "dependencies": { "dlangui": "~master", } } 

Also, in the src subdirectory, create a file src / helloworld.d with the following contents:

 module app; //   dlangui import dlangui; //   main  WinMain    mixin APP_ENTRY_POINT; //     DlangUI -   main    extern (C) int UIAppMain(string[] args) { //   Window window = Platform.instance.createWindow("DlangUI example - HelloWorld", null); //          window.mainWidget = (new Button()).text("Hello, world!"d).margins(Rect(20,20,20,20)); //   window.show(); //   return Platform.instance.enterMessageLoop(); } 

Now we can run the application. In the command line, in the project directory with dub.json run the command:

 dub run 

Upon successful compilation, the application will start immediately. Window with a single button:





You can also see examples from dlangui (demo of almost all example1 widgets and the tetris game):

 dub fetch dlangui dub run dlangui:example1 dub run dlangui:tetris 

Another application - DlangIDE:

 dub fetch dlangide dub run dlangide 

Widgets & layouts

Complicate our application. Add some widgets.



We will use simple widgets:

• TextWidget - text
• Button - text button
• ImageButton - button with a picture
• ImageTextButton - a button with a picture and text
• CheckBox - clear from the title
• RadioButton - clear from the title
• ImageWidget - image
• EditLine - single line editor
• ComboBox - combo box - to select an item from the dropdown list

An example of creating a simple text button:

 auto btn = new Button("btn1", "Button 1"d); 

Here “btn1” is the widget identifier, usually used to search for it in the parent widget or to distinguish one widget from another in the general event handler.



“Button 1” d - button text. Note the d suffix is ​​utf32 - dstring. Usually, in DlangUI widget constructors, the text itself can be transferred as text - as utf32 dstring, or the identifier of a string resource as a normal string - to support translation of the interface into several languages.



Widgets can have nested widgets.

Layouts - container widgets for aligning other widgets. Similar to those used in the Android UI:

• VerticalLayout - arrange nested widgets vertically
• HorizontalLayout - arrange nested widgets vertically
• TableLayout - arrange nested widgets in several columns, as in the table

Creating a VerticalLayout and adding a pair of buttons to it:

  auto vlayout = new VerticalLayout(); //     vlayout.addChild(new RadioButton("radio1", "Radio Button 1"d)); vlayout.addChild(new RadioButton("radio2", "Radio Button 2"d)); 

Let's correct our example - we will make a form with a complex structure.

 module app; //   dlangui import dlangui; //   main  WinMain    mixin APP_ENTRY_POINT; //     DlangUI -   main    extern (C) int UIAppMain(string[] args) { //   Window window = Platform.instance.createWindow("DlangUI example - HelloWorld", null); //    -  ,      auto mainWidget = new VerticalLayout(); mainWidget.addChild(new TextWidget(null, " HorizontalLayout:"d)); //  auto hlayout = new HorizontalLayout(); //     hlayout.addChild(new Button("btn1", " 1"d)); hlayout.addChild(new Button("btn2", " 2"d)); hlayout.addChild(new Button("btn3", " 3"d)); hlayout.addChild(new CheckBox("btn4", " CheckBox"d)); mainWidget.addChild(hlayout); mainWidget.addChild(new TextWidget(null, " VerticalLayout:"d)); //  auto vlayout = new VerticalLayout(); //     vlayout.addChild(new RadioButton("radio1", "Radio Button 1"d)); vlayout.addChild(new RadioButton("radio2", "Radio Button 2"d)); vlayout.addChild(new RadioButton("radio3", "Radio Button 3"d)); mainWidget.addChild(vlayout); mainWidget.addChild(new TextWidget(null, " TableLayout -   2 :"d)); //  auto tlayout = new TableLayout(); //  /  tlayout.colCount = 2; tlayout.addChild(new TextWidget(null, " "d)); tlayout.addChild(new EditLine("edit1", "-   "d)); tlayout.addChild(new TextWidget(null, "ComboBox"d)); tlayout.addChild((new ComboBox("combo1", [" 1"d, " 2"d, " 3"d])).selectedItemIndex(0)); tlayout.addChild(new TextWidget(null, " RadioButton"d)); //  Layout    Layout: auto radiogroup = new VerticalLayout(); radiogroup.addChild(new RadioButton("rb1", " 1"d)); radiogroup.addChild(new RadioButton("rb2", " 2"d)); radiogroup.addChild(new RadioButton("rb3", " 3"d)); tlayout.addChild(radiogroup); tlayout.addChild(new TextWidget(null, " ImageTextButton"d)); tlayout.addChild(new ImageTextButton("btn_ok", "dialog-ok-apply", " "d)); mainWidget.addChild(tlayout); //          window.mainWidget = mainWidget; //   window.show(); //   return Platform.instance.enterMessageLoop(); } 

Here's what we got:

Processing signals (events) from widgets

Consider the signal processing on the example of the onClick signal



Add handlers for clicking on buttons - let them switch the interface theme.



In our example, we are changing the piece of code from RadioButton to VerticalLayout.

  mainWidget.addChild(new TextWidget(null, "  :"d)); auto vlayout = new VerticalLayout(); // addChild()   ,         , //       . vlayout.addChild(new RadioButton("radio1", ""d)).checked(true).onClickListener = delegate(Widget src) { platform.instance.uiTheme = "theme_default"; return true; }; vlayout.addChild(new RadioButton("radio2", ""d)).onClickListener = delegate(Widget src) { platform.instance.uiTheme = "theme_dark"; return true; }; mainWidget.addChild(vlayout); 

Here's what happened:





Explanations:



onClickListener is a signal available in any widget. Here is how it is described:

 /// interface - slot for onClick interface OnClickHandler { bool onClick(Widget source); } //..... class Widget { //... Signal!OnClickHandler onClickListener; //... } 

The handler can be a delegate of the appropriate type.



You can connect an event handler in different ways.

Sample onClick Handler - Regular Delegate

  auto button1 = new Button("btn1", " 1"d); button1.onClickListener = delegate(Widget src) { window.showMessageBox(UIString(" onClick"d), UIString("\ndelegate"d)); return true; }; 

An example of an onClick processor - class method

  class MyOnClickHandler1 { bool onButtonClick(Widget src) { src.window.showMessageBox(UIString(" onClick"d), UIString(" MyOnClickHandler1.onClick\n   id="d ~ to!dstring(src.id))); return true; } } auto memberFunctionHandler = new MyOnClickHandler1(); auto button2 = new Button("btn2", " 2"d); button2.onClickListener = &memberFunctionHandler.onButtonClick; hlayout.addChild(button2); 

An example of the onClick processor - a class that defines the interface used in determining the signal

  //   onClick - ,    class MyOnClickHandler2 : OnClickHandler { override bool onClick(Widget src) { src.window.showMessageBox(UIString(" onClick"d), UIString(" MyOnClickHandler2.onClick\n   id="d ~ to!dstring(src.id))); return true; } } auto interfaceHandler = new MyOnClickHandler2(); auto button4 = new Button("btn4", "  4"d); button2.onClickListener = interfaceHandler; //   onClick     OnClickHandler 

Other useful signals from the Widget class:

• onCheckChangeListener - the checked state is changed (for example, for CheckBox, RadioButton)
• onFocusChangeListener - changed the focus state of this widget
• onKeyListener - intercepting keyboard events
• onMouseListener - capture mouse events

Commonly used widget properties

• margins - indent from adjacent widgets or container borders (the widget's background is indented with margins)
• padding - indent from the borders of the widget to its internal elements
• backgroundColor - background color (32 bit uint, 0xAARRGGBB)
• backgroundImageId - background image - resource id
• textColor - text color (32 bit uint, 0xAARRGGBB)
• fontSize - font size

These and many other properties can be set both directly and as styles (defined in the file - theme).

You can assign a style using the styleId property. For example, we change the style of the header when selecting the interface theme.

  mainWidget.addChild(new TextWidget(null, "  :"d)).styleId("POPUP_MENU"); 

Example: add padding to the main widget and make it a translucent yellow background.

  //      10 ,       15  mainWidget.margins(Rect(10, 10, 10, 10)).padding(Rect(15, 15, 15, 15)); mainWidget.backgroundColor(0xC0FFFF00); //    

In TableLayout, let's assign a background image “btn_default.png”. Resource Id is the name of the file with no extension. The .9.png extensions denote the nine-patch, a scalable version, as in Android .

Also add padding - indent for nested widgets.

  tlayout.backgroundImageId("btn_default"); //    - btn_default.9.png    tlayout.padding(Rect(5, 5, 5, 5)); //     - 5  

In the TextWidget header for TableLayout, we change the font size and color.

  tlayout.backgroundImageId("btn_default"); //    - btn_default.9.png    tlayout.padding(Rect(5, 5, 5, 5)); //     - 5  

Here is what happened:





The same program running on Ubuntu: only the window frame and fonts differ.





The size of helloworld.exe, built by dmd2 under windows (dub build - build = release) is 1.4Mb, 200K of which are resources.

In the presence of libfreetype-6.dll (700K) and zlib1.dll (84K) - DUB is automatically copied to the bin directory - uses FreeType to render fonts, otherwise win32 API.



Binary file built in Ubuntu x64 using dmd - 4Mb.

Other useful widgets

• EditBox - multiline editor
• TreeWidget - tree
• StringGrid - table, similar to Excel
• TabWidget - tabs - to select pages
• AppFrame is the base class of the main widget of the window with menus, toolbars and a status line, for the convenience of writing such applications.
• Scrollbar
• Toolbar
• StatusLine
• ScrollWidget - implements scrolling of the widget attached to it if the dimensions exceed the available space
• DockHost, DockWidget - for applications with dock widgets on the edges of the main window widget (as in the IDE)

Links

• Project page on GitHub
• Online Documentation
• Bugtracker
• Screenshots
• DlangIDE project page on GitHub
• Chat in gitter

To be continued...

Do I need the next part? What else to tell? Write in the comments ...