<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="../assets/xml/rss.xsl" media="all"?><rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/"><channel><title>Eyes-free Linux Ninja! (GUI design)</title><link>http://eyesfreelinux.ninja/</link><description></description><atom:link href="http://eyesfreelinux.ninja/categories/gui-design.xml" type="application/rss+xml" rel="self"></atom:link><language>en</language><lastBuildDate>Fri, 22 Sep 2017 20:57:19 GMT</lastBuildDate><generator>https://getnikola.com/</generator><docs>http://blogs.law.harvard.edu/tech/rss</docs><item><title>More about WYSIWG GUI Designers and VI Programming</title><link>http://eyesfreelinux.ninja/posts/more-about-wysiwg-gui-designers-and-vi-programming.html</link><dc:creator>Mike</dc:creator><description>&lt;div&gt;&lt;p&gt;I've not always been blind.&lt;/p&gt;
&lt;p&gt;For about twenty years I was a programmer, with a varying level of visual impairment.&lt;/p&gt;
&lt;p&gt;Before I lost my sight very quickly in 2008 I had a level of sight which was the same for a long 
time, although it was 
gradually decreasing.&lt;/p&gt;
&lt;p&gt;What this meant to me as a programmer in the early days of MS Windows was:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Keeping track of the mouse-pointer on the screen was tiring and not always easy&lt;/li&gt;
&lt;li&gt;Using Windows graphical IDEs to design forms was hence not always comfortable for long periods&lt;/li&gt;
&lt;li&gt;It was easier for me to rough-out a form, for example in MS Access with the IDE and then tweak the 
code with a text editor&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;For years I used &lt;code&gt;QEdit&lt;/code&gt;, which was a very lovely text editor for &lt;code&gt;MSDOS&lt;/code&gt;.  I miss it.&lt;/p&gt;
&lt;p&gt;Actually losing my sight totally, which made it necessary to embrace the use of a screen-reader made 
things a bit easier in some ways, and flipped things around a bit:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Now using the GUI on either MS Windows or Linux was easier, assuming the applications used are 
accessible&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;But, now using a drag-and-drop GUI designer was no longer possible, or at least not easy.&lt;/p&gt;
&lt;h2&gt;GUI Programming using &lt;em&gt;Absolute&lt;/em&gt; Positioning&lt;/h2&gt;
&lt;p&gt;I used to write applications for MS Windows in vanilla C, using the native Win32 API calls.&lt;/p&gt;
&lt;p&gt;That involved either generating controls with calls to &lt;code&gt;CreateWindow&lt;/code&gt; and it's variants or by using 
&lt;code&gt;resource&lt;/code&gt; (.rc files).&lt;/p&gt;
&lt;p&gt;That made programming once I lost my sight difficult because:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;I could no longer tell if my controls were all lined up correctly vertically and horizontally&lt;/li&gt;
&lt;li&gt;My head was spinning with arithmetic every time I tried to size and position one control relative 
to the previous/next one&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;This approach, using absolute positioning also falls down when another user is not using the same 
sized font as you, or when the user clicks and drags the corner of your window to resize it.  The 
formatting goes all to pot and looks like a dog's breakfast.&lt;/p&gt;
&lt;p&gt;But more recent development tools have started using &lt;code&gt;sizers&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;In the sizer approach, controls are added to a kind of &lt;em&gt;invisible net&lt;/em&gt; which controls the 
positioning.&lt;/p&gt;
&lt;p&gt;Visualise it like this:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;There is a clear flat surface in front of you&lt;/li&gt;
&lt;li&gt;You need to place objects on that surface ina controlled way&lt;/li&gt;
&lt;li&gt;Imagine an invisible &lt;em&gt;shield&lt;/em&gt; which is floating a couple of inches above the surface&lt;/li&gt;
&lt;li&gt;Cut into that shield are a number of holes through which you can place the objects on the surface&lt;/li&gt;
&lt;li&gt;When the objects are placed, changing the size of the surface will cause the invisible shield to 
change size as well and the objects will move and resize in a known and predictable way&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;I know of several GUI toolkits and languages that do this:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;GTK, on Linux, and (I think) Windows and Mac&lt;/li&gt;
&lt;li&gt;wxWidgets, multi-platform&lt;/li&gt;
&lt;li&gt;wx.Python, multi platform&lt;/li&gt;
&lt;li&gt;Java, multi platform&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Varieties of &lt;code&gt;sizer&lt;/code&gt;&lt;/h2&gt;
&lt;p&gt;Each of these tools has a variety of &lt;code&gt;sizer&lt;/code&gt; types.  Here is a by-no-means exhaustive list of them 
and a description of each:&lt;/p&gt;
&lt;h3&gt;Box Sizer&lt;/h3&gt;
&lt;p&gt;In either &lt;code&gt;horizontal&lt;/code&gt; or &lt;code&gt;vertical&lt;/code&gt; variants.  Controls added either stack across (horizontal) or 
down/up (vertical).&lt;/p&gt;
&lt;h3&gt;Grid Sizer&lt;/h3&gt;
&lt;p&gt;A number of variants exist but essentially an X and Y grid of &lt;code&gt;cells&lt;/code&gt; which are filled with controls 
by specifying their coordinates.&lt;/p&gt;
&lt;h3&gt;Sizers within Sizers&lt;/h3&gt;
&lt;p&gt;It is possible to add a &lt;code&gt;sizer&lt;/code&gt; to another &lt;code&gt;sizer&lt;/code&gt; to create complex GUIs.&lt;/p&gt;
&lt;p&gt;For example if your form had a &lt;code&gt;horizontal box sizer&lt;/code&gt; into which you have placed two &lt;code&gt;vertical box 
sizer&lt;/code&gt; sizers, you will get left and right vertical sizers.&lt;/p&gt;
&lt;p&gt;I know this explanation sounds complex but it really not.&lt;/p&gt;
&lt;p&gt;One thing to remember is that the parent of a control is &lt;em&gt;NOT&lt;/em&gt; the sizer into which it is placed but 
the object, usually termed something like &lt;code&gt;panel&lt;/code&gt;, to which the &lt;code&gt;sizer&lt;/code&gt; containing the control is 
added.&lt;/p&gt;
&lt;p&gt;Using these &lt;code&gt;sizer&lt;/code&gt; objects to position controls you will get:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A window which handles resizing and font changes correctly&lt;/li&gt;
&lt;li&gt;A much easier life with no absolute-positioning headaches like arithmetic-overload&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Sizers usually have some properties which control the way controls placed upon them will expand, 
contract and position themselves when the window is stretched or shrunken.&lt;/p&gt;
&lt;p&gt;I still don't find WYSIWYG/drag-and-drop form designers very easy, or even possible to use, being 
totally blind, but the &lt;code&gt;sizer&lt;/code&gt; approach has given me back a way to write complex and visually 
pleasing applications even though I can't see.&lt;/p&gt;
&lt;p&gt;And of course the sighted authors of drag-and-drop IDEs tend to either just ignore accessibility, or 
assume that using them when you can't see is impossible.  So keyboard shortcuts may not be included.&lt;/p&gt;
&lt;p&gt;My personal favourite toolkit at the moment is &lt;code&gt;wxWidgets&lt;/code&gt;, which is giving me a way to teach myself 
C++.  Previously I stuck to C like a limpet.&lt;/p&gt;
&lt;p&gt;I have yet to get to grips with:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;GTK&lt;/code&gt; programming in C&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Qt&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Talking of &lt;code&gt;Qt&lt;/code&gt; I believe accessibility is improved in version 5.  It's been getting better and 
better.  And now my C++ is coming on apace I will take a look at it.&lt;/p&gt;
&lt;p&gt;All this is very exciting for the visually impaired programmer in a world where it is not as 
acceptable any more for an application to only run on one platform.&lt;/p&gt;&lt;/div&gt;</description><category>GUI design</category><guid>http://eyesfreelinux.ninja/posts/more-about-wysiwg-gui-designers-and-vi-programming.html</guid><pubDate>Wed, 05 Aug 2015 16:48:47 GMT</pubDate></item></channel></rss>