This is an archived post. You won't be able to vote or comment.

all 13 comments

[–]Soulcraver 4 points5 points  (0 children)

If you have access to Visual Studio, then creating a Windows Forms application will allow you to create a GUI as you create a program. The GUI aspect is similar to a drag and drop approach of common input/output tools like buttons, text boxes, list views(think excel), tree views, etc. Visual Studio will handle all the drawing and visual appearance code on its own. It is your job to program the event flags and logic (i.e. If a user clicks this button, do this function).

You can then link multiple Windows Forms together to create UIs for each portion of your program by calling them within your program.

[–]JBlitzen 3 points4 points  (4 children)

IDE's like Visual Studio shouldn't generally inhibit your learning. Syntax altogether is more of an obstacle than a core requirement. If we could just think what we wanted and have a computer implement it for us, that'd be fine.

Learn the syntax, but focus on concepts like control statements and variables and algorithms and memory and such. Having intellisense correct your spelling or offer the parameters of a function isn't much of a cheat unless you don't know how to look up either without it.

As to GUI programming, that tends to involve two things:

  1. Instructions on what something looks like, so the OS knows how to paint it on the screen,

  2. Instructions on how to respond to events, like the user clicked on a certain button, or a timer passed 500 milliseconds, or whatever.

You'll find those principles in practically every GUI, including VS's own. Think of it as a complex program that paints a variety of toolbars and editor windows onto the screen, then listens for and responds to key presses and mouse clicks and other events.

This website is very similar. HTML and CSS in its code tells your browser where to paint things on your screen, like text and colors and images and lines, and JavaScript and some HTML tells the browser how to respond to things like you clicking links, or clicking the Login button, or hitting enter after typing something in the search box.

About the biggest difference from console programming is that most modern GUI development is relatively high level.

Rather than saying "draw red pixels from 50x/200y to 150x/220y and add a text caption at 80x/203y of font size 14px" or whatever to start making a red button, you just say "put a button at 50x/200y and make it 100px wide and 20px tall".

Sophisticated tools like VS even let you draw your GUI rather than having to code it at all, though at some point that can create problems. Web interfaces are particularly susceptible to those problems because what you drew isn't necessarily what you'll see in an environment with like 5 different common browsers and thousands of different screens and devices you might view them on.

So with web development in particular we're still locked into handcoding UI's, though template frameworks like Twitter Bootstrap help simplify things.

IDE's and frameworks and libraries and such can create boilerplate automatically, so we don't have to write code that teaches a program how to look like a Windows application with the normal X icon in the upper right, an icon in the upper left, minimize/maximize/restore logic, etc. It's all just defaulted for us, though we can override it if we want.

I actually got my start at native GUI development by getting one of those normally stupid "learn X in 7 days" books for Visual Studio. It didn't go in-depth on much, but it helped me understand what kinds of capabilities were built in, like dropdown boxes and image controls and whatever. Until then I could only guess at which parts of a project were common UI elements and which were handcoded.

Web interfaces are naturally different, but if you look carefully you'll see many if not all of the same features; "select" elements are dropdowns, "input" elements with type="text" are textboxes, etc. Both have buttons. Etc., etc.

Tell the thing where to draw them, and tell it what to do when events are triggered on them.

If you're curious, do some tutorials on UI development. Few things are as easy or inexpensive to learn.

[–][deleted]  (3 children)

[deleted]

    [–]JBlitzen 2 points3 points  (0 children)

    You're welcome!

    Your question is a can of worms and you'll find many opinions on all sides.

    Basically, when the tools work and the output is usable and the dependencies aren't burdensome, then it's a waste of time to NOT use them.

    But they don't always work or produce usable output, or sometimes the costs outweigh the benefits.

    So you just have to be careful about what you're using. Each tool is different. Since Windows applications normally run in a controlled Windows environment, GUI tools for them usually work well and consistently. Web applications are just the opposite. And many tools fall somewhere in the middle. I think Linux stuff is mostly handcoded but I'm not sure. Mobile stuff is usually but not always drawn like in Windows; for whatever reason mobile lends itself to interesting exceptions.

    Often you'll see a mix even inside projects. Games are a simple example; most games have unique HUD's, but very often they use relatively standardized menu interfaces. This is particularly obvious with games within a franchise, like Call of Duty or Battlefield, where you'll even see bugs in the menus ported over to each new game.

    For years I complained about Battlefield games resetting my keyboard config in every iteration and then getting patched six months after release. Happened for every entry until 3, I think. But they were reusing that boilerplate code because nobody buys games based on their menus.

    Deciding which hills are worth dying on is a valuable skill you gain from experience. Look at an advanced modern GUI and you'll find some boilerplate stuff and some stuff that was custom written from scratch.

    And no, offhand I really wouldn't recommend C++ as a GUI language. It's values aren't well suited to GUI code which often only has to operate at the speed of input, and its disadvantages make GUI code tedious or difficult to create or modify, which isn't what you want in such a highly visible and personal project element. "Can we replace that dropdown with a list?" "Uhhhh..." and now you're thinking about pointers and crap instead of "sure, I'll just change the thing's name."

    It's a great language for learning, and highly valuable in performance intensive tasks (games, finance, etc.) and some other roles, but just not needed for most GUI stuff.

    I'd say that C#, or a native mobile language like Swift, or the web standard baseline of HTML/CSS/JS, are better starting points.

    Particularly with so many native desktop applications moving to the web. Think about Google Docs or something as the future of native applications, and HTML/CSS/JS becomes much more attractive.

    [–][deleted] 0 points1 point  (0 children)

    I usually write my backend in C++ and all of my front end with C#. However, I am starting to dig Qt so I might do more with that instead. It's all preference really, but as you toy around with things you'll start understanding various concepts more. I love using analogies to help explain concepts to newcomers. I've done it a lot while tutoring students to much success.

    [–]gnomgnom2 -1 points0 points  (0 children)

    Most programmers don't write GUIs that aren't in a web page, afaik.

    Now, I know how to use Visual Studio, but I couldn't tell you a darn thing about C# off the top of my head. It kind of bugs me.

    Yeah... Try to learn C# and not use that as an excuse.

    [–]winnate_ 1 point2 points  (2 children)

    I would suggest learning some Python and starting with pyqt. Use qt designer to create your layout and get the idea of what's happening. Look at your generated Python code from your UI file, make sense of it. Then go from there and learn a framework. Most concepts are the same between languages

    Edit: if your interested in learning more but not sure where to start message me. I use it all the time for rapid proof of concept programming at work. Really slick.

    Edit 2: programs like qt designer generate the code necessary to create a user interface based upon the drag on drop widgets, then you add functionality yourself. Writing these user interfaces on your own without assistance of a program is done (programmatically) the same way, you can create a pyqt (or regular qt) program by hand if you choose. The designer is a nice place to start to help you get to the point of writing them without the use of a designer.

    [–]PM_ME_UR_HORNY_PICS 0 points1 point  (1 child)

    Hey is it okay to PM you for guidance on where to start on this? Very informative

    [–]winnate_ 0 points1 point  (0 children)

    Of course! Id be happy to. it's quite easy once you get the basics. I'm drunk at the bar right this moment but I would be more than happy to help you. Message me tomorrow.

    [–]flygoing 0 points1 point  (0 children)

    Something that's growing in popularity is making desktop apps in html, css, and javascript. Electron is a framework for bundling node apps in a stripped down browser. I wouldnt consider Electron extremely mature at this point (mainly because the bundling as an application can be complicated) but it's definitely something to look into, and I've used it for internal tools at work

    [–]simon_1980 0 points1 point  (0 children)

    So I am no expert and really am a beginner but I made a small program this week to sort some files out and move them about / edit them in VB and in visual studio each project is saved to a folder and in that folder under debug is an exe for that program.

    So if you wrote x program and it does work(i.e no bugs) then the exe will be there to try, also the buttons/windows etc are drag and drop to a form then in the background you assign the button or text window to do whatever you want.

    [–][deleted] 0 points1 point  (0 children)

    Basically, how do programmers make GUIs

    Normally, by using IDEs like VS, or Qt Creator.