Diseño y Validación de Vistas para ToDos

The functionality of an application must go beyond its basic operability to provide a visually appealing experience. Creating custom views can solve the problem of displaying visually empty screens when we have neither archived nor unarchived tasks. Let's take the example of creating a new view in SwiftUI called NoTodoView to prevent the background from simply being black or white.

How do we implement NoTodoView in SwiftUI?

First, we design the structure to display a clear message inviting to create new tasks:

import SwiftUI struct NoTodoView: View { @Binding var showCreationSheet: Bool var body: some View { VStack(spacing: 8) { Text("No tasks yet.") .font(.title2) Button(action: { self.showCreationSheet.toggle() }) { Text("Try to create a task.") .font(.headline) .foregroundColor(.white) .padding() .background(Color.teal) .cornerRadius(5) } } } .offset(y: UIScreen.main.bounds.height * 0.3) } } } }

The VStack allows us to arrange the elements vertically, while the button is set to trigger a creation sheet when no tasks are present. The offset property places the content in the center of the screen for better visualization.

How do we apply view validations?

This not every view must be integrated into the structure of our application. Do it where initially the application did not display anything if there were no task lists. For example, inside the TodoList validation function:

if todos.isEmpty { NoTodoView(showCreationSheet: $showSheet) } else { // Show normal task list }

The variable todos represents the task list; if it is empty, the application will present NoTodoView. This provides a more consistent visual flow and prevents users from facing empty screens.

How to create a view for archived tasks?

Just as we implement NoTodoView, we can also design a NoArchivedView for the archived tasks section, thus ensuring that all parts of our application provide a homogeneous user experience.

What is NoArchivedView and how is it implemented?

Here is an example of how we structure the view for NoArchivedViews:

import SwiftUI struct NoArchivedView: View { @Environment(dismiss) var dismiss var body: some View { VStack(spacing: 8) { Text("No archived notes exist.") .font(.title2) Button(action: { dismiss() }) { Text("View all notes.") .font(.headline) .foregroundColor(.white) .padding() .background(Color.teal) .cornerRadius(5) } } } .frame(maxWidth: 200) .offset(y: UIScreen.main.bounds.height * 0.35) } } }

Here we use an Environment to allow the view to close when there are no notes filed, and the button directs us to visualize all the available notes, improving the navigability inside the application.

How to implement a MVVM architecture in an application?

For the development of the application we made use of the model-view-view-model (MVVM) pattern, which provides a clear organization and facilitates long-term maintenance. We separated responsibilities into three key layers:

1. Model (Model): defines the data handled by the application. For example, the Item object that represents tasks with their id, title, description, dates, and file or completed status.

2. ViewModel: Acts as an intermediary between the view and the model, handling the business logic. It uses ObservableObject so that the views are automatically updated. This mediation is crucial so that any change in the data is immediately reflected in the user interface.

3. View: Presents the interface to the user based on the logic provided by the ViewModel, ensuring that the user's actions are properly translated into state or interface changes.

The MVVM architecture focuses primarily on presentation, keeping the code organized and separating concerns, which facilitates scalability and maintenance. However, it is not the only or necessarily the best organizational choice, as future implementations may require more complex structures that are better suited to specific needs.

Let's keep learning and building more efficient and attractive applications!