{"id":314,"date":"2016-10-07T13:41:39","date_gmt":"2016-10-07T13:41:39","guid":{"rendered":"http:\/\/dlang.org\/blog\/?p=314"},"modified":"2021-10-08T11:09:54","modified_gmt":"2021-10-08T11:09:54","slug":"project-highlight-dlangui","status":"publish","type":"post","link":"https:\/\/dlang.org\/blog\/2016\/10\/07\/project-highlight-dlangui\/","title":{"rendered":"Project Highlight: DlangUI"},"content":{"rendered":"<p>Vadim Lopatin is an active D user who, like many in the D community, comes from a Java and C++ background.<\/p>\n<blockquote><p>My current job\u00a0is writing a Java backend for a virtual call center . I&#8217;ve also worked as a C++ developer on <a href=\"https:\/\/www.google.co.kr\/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=2&amp;cad=rja&amp;uact=8&amp;ved=0ahUKEwjssfeqhMjPAhXGH5QKHV4lC-sQFggtMAE&amp;url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FIP_PBX&amp;usg=AFQjCNGQZJ3F3VRnf0RRx4bi1v_QlEOOAw&amp;sig2=pJ8fibD9N2VN7CsfPUw9gQ\">IP PBX devices<\/a>.\u00a0Programming is my hobby as well. My biggest hobby project, which I&#8217;ve rewritten from scratch twice in the\u00a0last 15 years, is <a href=\"https:\/\/github.com\/buggins\/coolreader\">CoolReader<\/a>, a cross platform e-book reader written in C++.<\/p><\/blockquote>\n<p>He kept hearing news about D and, over time, became more interested in its &#8220;cool features&#8221;, like <a href=\"https:\/\/tour.dlang.org\/tour\/en\/gems\/compile-time-function-evaluation-ctfe\">CTFE<\/a> and <a href=\"http:\/\/ddili.org\/ders\/d.en\/mixin.html\">code generation<\/a>. So, three years ago, he decided to initiate a couple of projects to learn its features.<\/p>\n<blockquote><p><a href=\"https:\/\/github.com\/buggins\/ddbc\">DDBC<\/a> is a database connector similar to Java&#8217;s <a href=\"http:\/\/www.oracle.com\/technetwork\/java\/overview-141217.html\">JDBC<\/a>, with an API close to the original. <a href=\"https:\/\/github.com\/buggins\/hibernated\">HibernateD<\/a> is an <a href=\"https:\/\/en.wikipedia.org\/wiki\/Object-relational_mapping\">ORM<\/a> library, similar to the Java-based <a href=\"http:\/\/hibernate.org\/\">Hibernate<\/a>.\u00a0Unlike Java, D allows the use of compile-time code introspection and code generation.\u00a0It was interesting work, and I was impressed by the power of D.<\/p><\/blockquote>\n<p>Both projects proved to be no more than learning exercises, however, as he never used either himself and neither became popular in the community. Now they are largely abandoned, but he has since found another area\u00a0where he could apply his talents and, as it turns out, where community interest has been much higher.<\/p>\n<p>The new idea came about as he surveyed the state of available GUI libraries in D. While there were <a href=\"http:\/\/wiki.dlang.org\/Libraries_and_Frameworks\">several options<\/a> to choose from, he wasn&#8217;t satisfied by the fact that they were all either non-native wrappers or not\u00a0cross-platform. He had already written a cross-platform GUI in C++ for CoolReader GL, a version of his ebook reader that uses the same GUI on all supported platforms. Why not implement another one in D?<\/p>\n<p>He has a long list of items he thinks are important for a GUI library to check off. A few of them are:<\/p>\n<blockquote>\n<ul>\n<li>Cross-platform &#8212; the same code should work on all platforms with simple recompilation.<\/li>\n<li>Internationalization &#8212; it should be easy to write multilingual apps. Unicode everywhere. Strings externalized to resources.<\/li>\n<li>Hardware acceleration &#8212; take advantage of DirectX or OpenGL where available, but it should be possible to use software rendering where they aren&#8217;t.<\/li>\n<li>Resolution independence &#8212; flexible layouts must be used instead of fixed pixel-by-pixel positioning of controls.<\/li>\n<\/ul>\n<\/blockquote>\n<p>A markup language for describing layouts, touch screen support, 3D rendering, customizable look-and-feel, easy event handling, and several other items complete the list. A big set of requirements for one person to work on alone, but he already had a good deal of experience with the GUI he wrote for CoolReader. So when he got going with his <a href=\"https:\/\/github.com\/buggins\/dlangui\">DlangUI<\/a> project, his previous work is where he started.<\/p>\n<blockquote><p>Part of DlangUI is a direct port of the CoolReader GL GUI. It was easy to reuse big parts of C++ code thanks to the similarity of D and C++ syntax.<\/p><\/blockquote>\n<p>So he set about checking items off of his list. Such as support for hardware acceleration via an interface that easily supports different\u00a0rendering backends, one of which\u00a0is\u00a0implemented using OpenGL. But as things got under way, he discovered that there is one particular issue with\u00a0porting C++ to D that arises in the parts\u00a0that can&#8217;t be directly reused.<\/p>\n<blockquote><p>The D GC does not bring any help for resource management, since object destructors may be called in any thread, in any order, or never at all.\u00a0If an object owns some resources, it ought to be destroyed in a predictable way. Therefore, widgets and other objects holding resources must be destroyed manually by their owners<\/p>\n<p>DlangUI uses reference counting for easy freeing of owned objects. Widgets remove their\u00a0children on destroy. Windows remove their widgets when closing.\u00a0I had to add debug mode instance counts for various objects, and corresponding messages in the log, to make sure all resources are freed gracefully.<\/p>\n<p>Some resources (e.g. images) are cached. Their references may be taken from the cache, used, and then released often. To allow cleanup of caches, all such resources have usage flags. The cache provides\u00a0a\u00a0checkpoint method which removes the usage flag from all items, and a cleanup method which frees all cache items which have\u00a0not been used since the last checkpoint.<\/p><\/blockquote>\n<p>He has worked on a number of items from his list, such as theme customization.<\/p>\n<blockquote><p>DlangUI themes are inspired by the Android API. It\u00a0borrows Android&#8217;s state drawables (they may be even used as is), nine-patch PNGs, and resource versions for different screen sizes or resolutions.\u00a0Usually widgets don&#8217;t use a hardcoded look and feel or\u00a0layout properties. Instead, they use a style ID referencing to currently selected theme.\u00a0If the theme is changed in runtime, all widgets receive a corresponding notification so that they can reload any cached values from the new theme.\u00a0Simply providing a new theme changes the \u00a0look and\u00a0feel significally.<\/p>\n<p>Currently, two standard themes are provided in DlangUI: default (light) and dark. Applications may specify a standard theme as a parent, and override only the styles it needs.\u00a0Standard theme resources are usually embedded into the application executable using the cool D feature <code>import(\"filename\")<\/code>. Applications may embed their\u00a0own resources as well. This\u00a0allows creating a single file app withoug any additional resource files needing to be shipped\u00a0with the executable.<\/p><\/blockquote>\n<p>Another check mark can \u00a0be place next to layouts. Here, he again\u00a0looked to\u00a0Android.<\/p>\n<blockquote><p>To support multiple screen resolutions and sizes, widgets must be placed and resized using layouts instead of direct pixel-based positioning.\u00a0DlangUI uses Android API-like layouts for grouping, placing and resizing widgets, based on a two-phase measure\/layout scheme.<\/p><\/blockquote>\n<p>And, while a GUI can be assembled entirely in code, he took inspiration from\u00a0elsewhere for ideas\u00a0to knock the markup item off his list.<\/p>\n<blockquote><p>Manually writing code to create a widget hierarchy and setting their properties is a bit boring.\u00a0DlangUI offers the possibility to create widgets using a JSON-based description similar to <a href=\"http:\/\/doc.qt.io\/qt-5\/qtqml-index.html\">Qt QML<\/a>. I call it DML. Currently, only the creation of widgets and the setting of their properties are supported.\u00a0In future, I hope to add the ability to describe signal handlers in DML, and automatically assign signals to handlers, and widget instances to variables.\u00a0There is a GUI app, <a href=\"https:\/\/github.com\/buggins\/dlangui\/tree\/master\/examples\/dmledit\">dlangui:dmledit<\/a>, which helps to write DML. It combines a text editor for DML and a preview window to see the results.<\/p><\/blockquote>\n<p>When it comes to being cross-platform, a lot has been done so far, thanks to different backend implementations: Win32, <a href=\"https:\/\/www.libsdl.org\/download-2.0.php\">SDL2<\/a>, <a href=\"http:\/\/dsfml.com\/\">DSFML<\/a>, X11, and Android. Not long ago, Vadim\u00a0even <a href=\"http:\/\/forum.dlang.org\/thread\/lbilqqcqbojzfqhanjdf@forum.dlang.org\">announced a text-based interface<\/a>\u00a0which works\u00a0in the Linux terminal or Windows console.<\/p>\n<blockquote><p>It was a real surprise for me how few changes were required to implement\u00a0text-mode support. Besides the backend code and the text-mode drawing buffer implementation, most of the changes came in the form of a Console theme.\u00a0Only a few fixes were\u00a0required\u00a0in the widgets, removing several hardcoded margins and sizes. Even <a href=\"https:\/\/github.com\/buggins\/dlangide\">DlangIDE<\/a>, a DlangUI-based IDE for the D programming language, is now usable in terminals.<\/p><\/blockquote>\n<p>Here&#8217;s what DlangUI&#8217;s components normally\u00a0look like on Windows.<br \/>\n<img loading=\"lazy\" class=\"aligncenter wp-image-442 size-full\" src=\"http:\/\/dlang.org\/blog\/wp-content\/uploads\/2016\/10\/screenshot-example1-windows.png\" alt=\"screenshot-example1-windows\" width=\"951\" height=\"841\" srcset=\"https:\/\/dlang.org\/blog\/wp-content\/uploads\/2016\/10\/screenshot-example1-windows.png 951w, https:\/\/dlang.org\/blog\/wp-content\/uploads\/2016\/10\/screenshot-example1-windows-300x265.png 300w, https:\/\/dlang.org\/blog\/wp-content\/uploads\/2016\/10\/screenshot-example1-windows-768x679.png 768w\" sizes=\"(max-width: 951px) 100vw, 951px\" \/><\/p>\n<p>And this is what DlangIDE looks like running in the Windows console.<\/p>\n<p><img loading=\"lazy\" class=\"size-full wp-image-424 aligncenter\" src=\"http:\/\/dlang.org\/blog\/wp-content\/uploads\/2016\/10\/dlangide.png\" alt=\"dlangide\" width=\"980\" height=\"762\" srcset=\"https:\/\/dlang.org\/blog\/wp-content\/uploads\/2016\/10\/dlangide.png 980w, https:\/\/dlang.org\/blog\/wp-content\/uploads\/2016\/10\/dlangide-300x233.png 300w, https:\/\/dlang.org\/blog\/wp-content\/uploads\/2016\/10\/dlangide-768x597.png 768w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/p>\n<p>When compared to <a href=\"http:\/\/buggins.github.io\/dlangui\/screenshots.html\">screenshots<\/a> of programs running with different DlangUI backends, seeing it in a terminal like that is pretty darn cool.<\/p>\n<p>DlangUI manages event handling via signals and has built-in support for 3D graphics, including <a href=\"https:\/\/github.com\/buggins\/dlangui\/tree\/master\/src\/dlangui\/graphics\/scene\">a 3D scene\u00a0package<\/a>. And work still continues on making Vadim&#8217;s list smaller, as well as addressing the problems with the library.<\/p>\n<blockquote><p>The most mentioned issue the non-native look and feel of widgets. Although it&#8217;s possible to make a theme looking exactly like native one,\u00a0it would not track system theme changes anyway. There&#8217;s no system menu support on OS X and in Gnome (where a common menu is used for all apps). The documentation is poor. There is some DDOX-generated documentation, but it&#8217;s not detailed enough and I seldom update. I\u00a0need more tutorials and examples. And\u00a0some advanced controls are missing, e.g. an HTML view.<\/p><\/blockquote>\n<p>He also says that there are too few developers working on the project. While some\u00a0users have submitted PRs, the majority of the work has been done by Vadim alone. Given what he has produced so far, that&#8217;s a pretty impressive achievement. But, in addition to solving the problems above, he&#8217;s got a lot more he wants to implement, such as:<\/p>\n<blockquote>\n<ul>\n<li>An XML+CSS rendering widget to show\/edit HTML or rich text<\/li>\n<li>Refactoring DlangUI to extract window creation, OpenGL context creation, drawing, font support, input events code from widget set &#8211; for cases when no widgets are needed<\/li>\n<li>\u00a0Mobile platforms support improvements &#8211; add iOS backend, improve android support, improve touch mode support<\/li>\n<li>\u00a0Native system menu support on OS X and Gnome<\/li>\n<li>\u00a0Support for fallback fonts in font engines, from which to get missing symbols<\/li>\n<li>\u00a0A native OSX backend based on Cocoa instead of libSDL2<\/li>\n<li>Improvements in Scene3D to make it suitable for writing 3D games<\/li>\n<\/ul>\n<\/blockquote>\n<p>If you need a GUI for your D app, <a href=\"https:\/\/github.com\/buggins\/dlangui\">DlangUI<\/a> is a viable option today. More importantly, if you&#8217;re able and willing to help out here and there, Vadim sure could use a few more hands on a few more\u00a0keyboards!<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vadim Lopatin is an active D user who, like many in the D community, comes from a Java and C++ background. My current job\u00a0is writing a Java backend for a virtual call center . I&#8217;ve also worked as a C++ developer on IP PBX devices.\u00a0Programming is my hobby as well. My biggest hobby project, which [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[21,13],"tags":[],"_links":{"self":[{"href":"https:\/\/dlang.org\/blog\/wp-json\/wp\/v2\/posts\/314"}],"collection":[{"href":"https:\/\/dlang.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dlang.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dlang.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dlang.org\/blog\/wp-json\/wp\/v2\/comments?post=314"}],"version-history":[{"count":129,"href":"https:\/\/dlang.org\/blog\/wp-json\/wp\/v2\/posts\/314\/revisions"}],"predecessor-version":[{"id":445,"href":"https:\/\/dlang.org\/blog\/wp-json\/wp\/v2\/posts\/314\/revisions\/445"}],"wp:attachment":[{"href":"https:\/\/dlang.org\/blog\/wp-json\/wp\/v2\/media?parent=314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dlang.org\/blog\/wp-json\/wp\/v2\/categories?post=314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dlang.org\/blog\/wp-json\/wp\/v2\/tags?post=314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}