Create a C++ UI – Data Flow [2/24]

A system is fundamentally about changing data. Data exists in a specific location. You access a copy of data from the place it is in and do a “minimum” of 2 to 4 operations on that data. Apply the same [1] or different data [2] to the same [3] place. Apply the same [1] or different [2] data to another [4] place. You do not have to know, in the beginning, every single operation on the data. Instead, your goal is to know where you must start and what the end state looks like. The effort is making the end state a reality. The series of articles will assist you in building a UI using C++. They accomplish this by guiding you through the process with some examples of the details involved.

Throughout this C++ UI series, the concepts described are expressed through an actual software application called Gautier RSS. It is a program that shows the latest news on your screen by translating an RSS news feed into a visual representation. The program was made possible, in part, by observing that many news websites publish news data in the form of XML data you can translate into a convenient visual presentation. The Gautier RSS program achieves this. Reviewing how it is built will show you how to build a UI application in C++.

The “core process” stated here applies to video games, business software, industrial systems, content delivery apps, and systems in general. An RSS feed can be likened to a database in the case of business software in which case the RSS feed is like a database and part of the engine is like a data access component. The difference is there are granular details involved in relational databases and associated data access components that differ quite a bit from accessing an RSS feed and managing it as files. As such, the examples will emphasize general concepts more than the nitty-gritty of how those concepts are reflected in the example software application.

Implied in the discussion is the role of pencil and paper. Many great digital tools exist to draw diagrams and at times they may be useful. However, you may find pencil and paper highly accessible and more conducive to freely expressing your thoughts before committing to them in a digital diagram format. Any diagram you make does not have to be highly refined or a work of art, but can be a scribbling that you understand. The diagram, however coarse or refined connects your mind more to the reality of how the data will flow from its origin to its destination.

Take any piece of data you see and if you know the process, you can trace the steps that resulted in its present form on-screen, in a database, a file, e-mail, or other message. When you consider a news reader application like Gautier RSS, you have a list of web sites. When you choose a web site, a list of headlines show. If you choose a headline, a summary of the news article shows telling you more about the news story. You can then choose an option that shows the full web page that contains the full news article. Each step from listing the web sites, to listing headlines, showing the summary, and telling the web browser which article web page to show all came from one or more sources of data.

When building a news reader application, you organize all this data into specific areas displayed in a UI. You may have hundreds of headlines for a single web site, but there is only room to show 20 or 30 at a time. You may have only so much room to show the article summary and need to leave enough room for a web link that when activated, results in the full article showing in a web browser. The representation of data in a user interface often does not resemble how it is represented in the place it originates. Part of your goal is to identify the potential for how this data can be represented. You do this by defining the series of translations that convert it from how it is represented to how it would be best represented in your application.

One of the ways you can structure a data flow is simply by analyzing and identifying parts of the data you are working with. Whether a database, a network source of video files, or other type of information such as an RSS feed, you look at that data in-depth and work through which parts of that data you need. Oftentimes, overdoing this analysis can provide you the most benefits in terms of later applying the data through a program. Likewise, spending too little time or considering too little data can result in significant rework later in the implementation of a software application. It should be apparent that the software application is a funnel for data. What you understand about the data has a huge impact.

What we observe in a RSS feed is that it is typically accessed at a specific website address through the Internet. You pull a copy of the RSS feed and once you have it, you have what is essentially an amalgamation of data. Parts of this data is marked with a tag such as title, data, web address, etc. Each article may be tagged in such a way as to identify the article as an article. Within each article are additional tagged pieces of data that identify things such as headlines, posting date and time, and a summary of the headline. When you view an RSS feed, all of this seems to merge together, but there is order in the data. That is similar to a database in which you have tables and all the rows are just listed out, but there is order among and within the tables. Part of identifying the ordering of information is establishing the relationships between pieces of data.

Once you know how data is ordered, you can group parts of it. Each data grouping become elements that will travel along a path from the original pool of data to the areas where the data will finally appear. Of course, the path need not be in one direction. In the case of a database or file, it often will not be, but a clue here is that we are dealing with an RSS feed. By definition, it is read-only for all but those who manage the actual feed. The main task with data flow is mapping out the flow from source to representation. You can do this on paper, in a diagram program, a presentation program, or even a word document. Maps do not always have arrows and lines. Sometimes a map can be a sequential list in a spreadsheet. However you do it, a map of the major data transitions is necessary to establish a UI program and most systems.

We have not touched on C++ code at this point because we are dealing with the prerequisites that influence how a program is put together in the first place. If you miss anything at the data flow stage, trust me, you will be back at this stage before long. It is not the case that everyone, even those with great experience, gets this part right every time. However, the more effort you put into data flow, more you improve the implementation.


Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.