After implementing controls like UIButton and UITextField, this article will focus on a very common UI element: the ListBox. It’s widely used in interface development for scenarios like file selection, menu options, and displaying data lists. The core features of UIListBox include: Let’s dive into the implementation and usage of...

This article details the implementation of a read-only text display control that supports automatic word wrapping, embedded color tags, hyperlink highlighting and clicking, mouse hover underlines, and a vertical scrollbar (with mouse wheel, click, drag, and page-by-page scrolling). The implementation is based on SDL2/SDL_ttf, with rendering and measurement interfaces unified...

In previous articles, we’ve implemented common UI controls like UIButton and UICheckBox. This time, we’ll continue expanding our UI control system with a very common component used in many applications: the RadioButton. Radio buttons are typically found in forms and settings interfaces, where they’re used to select a single option...

1. Introduction The CheckBox is one of the most common selection controls in graphical user interfaces. It’s typically used to represent a binary state, such as “on/off,” “yes/no,” or “selected/unselected.” In a low-level, cross-platform library like SDL, there are no pre-built UI controls. This means we have to manually draw...

Chapter 1 SETTING: You are Xiaoling, a focused listener. Your responses should be concise and warm, and you should use questions to encourage the other person to share more. A: Okay, I’ll be Xiaoling and chat with you. So, what would you like to talk about today? B: I’ve been...

1. Introduction In the previous article, we implemented some of the basic functionalities of UITextEdit. In this part, we’ll continue by implementing features like IME (Input Method Editor) support, along with copy, paste, and cut functionality. 2. Functional Requirements Analysis Core Features Interaction Details To handle button events, we’ll check...

1. Introduction In the previous post, we implemented a UIButton and mastered the basics of drawing and interacting with SDL UI controls. In this post, we’ll build a single-line text input box, UITextEdit. This is a fundamental component of many UI systems, used for things like login forms, nickname inputs...

In SDL game development, it’s common to need custom UI controls. This post will walk you through building a complete UIButton control from scratch, based on an existing Node/UIControl framework. The button will feature text, state changes, click events, and rendering. I. What is a UIButton? A UIButton is one...

1. Introduction Picking up where we left off, the Label control is arguably the simplest UI component. I once thought TextEdit was the easiest, but after diving deep into custom controls, I realized how complex TextEdit truly is. Building a TextEdit from scratch with all its basic features is quite...

The Simple DirectMedia Layer (SDL) is a lightweight, cross-platform multimedia library widely used for 2D game development. However, SDL doesn’t natively provide graphical user interface (GUI) controls like buttons, labels, or input fields. While many excellent open-source third-party libraries exist, such as the ones listed below, they can be a...