One Page C++ 14 GUI Tutorial

The basic ability to create a GUI using the C++ programming language for the 3 mainstream operating systems is possible. A GUI that can be made available for Microsoft Windows, Apple macOS, and Linux. You have a single set of source code defined in C++. Compile the code into a program on each operating system. Now, you have a GUI for each OS defined with the control structures and practices in C++.

This article is a high-level overview of getting started with a baseline GUI in C++. You expand on it, grow it in the direction you need. The idea is not to copy & paste what is here, but to examine it as a roadmap for how to use the Fast and Light Toolkit to define a GUI.

Preliminaries

The audience level is anyone with intermediate skills in writing software in a C-derived language such as Java, C#, or Swift, . This is not a pure beginners tutorial even though a beginner who is very detailed oriented and observant could work though it. The article span a long length in a web browser, but it is actually short because it assumes you have done certain things to get to this point. That is done to accelerate the discussion.

You need to be familiar with C++ syntax and knowledge as described in Bjarne Stroustrup’s book, The C++ Programming Language 4th Edition or later. Next, you need the FLTK library. The example shown here was produced on a custom-built version of the FLTK source code to produce a static library. I downloaded the FLTK source code, followed the directions for make ./configure then make. I placed the library in a custom directory path as that worked for my purposes. Regardless, as long as you can compile the source shown in this article while linking it to the FLTK library, you will be good.

I include a make file that works on most Linux-based operating systems. However, you do not have to use the make file. As long as the source code shown is used in conjunction with the FLTK library, you can use various methods to automate use of a compiler. Although I used a plain text editor, you can just as easily use a visual code environment like Microsoft Visual Studio or Apple XCode.

Version 2 of the RSS GUI

I am rewriting the RSS Tool I finished in 2015. At that time, I was still unsure which GUI toolkit I would use. As a result, I created a very generic framework designed to swap out GUI toolkits at will. After several months passed, I reflected on that effort and decided I personally did not want to maintain a generic framework of that kind. A good but labor intensive approach. Instead, I found a good middle ground between a GUI toolkit that is closer to what I appreciate and has a solid reputation and history of supporting multiple operating systems with minimal API disruption.

This change in approach meant I could use simpler code abstractions, saving a good deal of time.  As I make my way to a new version of the RSS tool, I thought I’d take the current snapshot that presents basic GUI code. Show how you start on a GUI before many details in the form of code arise that may obscure the fundamental structure.

Three Code Files

The main.cxx file contains the start-up sequence for the program. In the start-up sequence, the actual GUI window defined in icmw.cxx is accessed through a class instanced declared in icmw.hxx. Two cxx files compiled and linked with each other and FLTK to form a single program file named gautierrss. Then, you run the program. That’s it.

Main

Line 4 declares and gets a copy of icmw. Line 6 calls a function named render. That function contains the start-up and main code sequence for the actual GUI window.

Icmw

That is an abbreviation for interactive context, main window. The hxx file with icmw as the prefix declares that public function, render that is called by the main function. The cxx file with icmw as the prefix defines all the code that makes use of FLTK to get a Window.

Icmw Implementation (icmw.cxx)

The following is the implementation of icmw. The comments in the code describe what happens as the code sequence proceeds. The ASCII Art in the below code is for explanatory purposes. You wouldn’t normally put this kind of thing in real-world code. Imagine the code without the ASCII boxes and you’d have an idea of how the real code would appear. When you try it out, you can delete the ASCII art.

The Result

You can see how each boxed area corresponds to the ascii art in the source code in the previous section.

cpp14guitutorial_01

Generating a Program File

I generated the program file using Gnu Make. As mentioned in the beginning of this article, you can also use an IDE like Microsoft Visual Studio or Apple XCode. The make file appears as follows.

The following screenshot shows we start with nothing, run Make which finds the makefile, and then see two files ending in .o as well as a program file.

cpp14guitutorial_02

Writing the Software Code

I hand entered the makefile and source code in program named, gedit. You can use alternatives such as Code::Blocks, Qt Creator, Gnome Builder, Microsoft Visual Studio, vim, emacs, and Apple XCode.

cpp14guitutorial_03Interactivity

The refresh button in this version has a behavior. Notably on the command-line. It serves as an example of linking a visual object to behaviors of your choice. That concludes the tutorial. All the core information needed to make a C++ 14 GUI on one page (not 1 printed page). The only requirements are stated in the preliminaries section above.cpp14guitutorial_04

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s