Creating Layout

Creating the layout of the todo application

Thinking the UX

before we start building the application, we need to have an idea of how our application should look like and how it should behave. To make sure all the learners are on the same page, I am stating some design concepts that we will use throughout the course.

• A component to display all the todos.

• A component to create the todos.

• A component to show the todo and operate on it.

So that means, we will need the following components to create our application:

• Todo.ts -> The component that will display a todo based on the data provided to it. This will also contain buttons to edit and remove it.

• CreateTodo.ts -> This component will help us in creating the todos

• app.ts -> The root component that will hold it all together, and display it to the end user.

Building the UI

Application overview

Now we will start by building the components and build appropriate layouts for our application. We will start by building the app.ts first.

Open the app.ts file in your project explorer. Remove all the code there and add the following code:

app.ts

import { Content, Layout } from '@indivice/omega/components'
import {} from '@indivice/omega'

export default function App() {
	return Layout.Column({
		child: Content.Text("Hello World")
	})
}

Explaining the Imports

Omega has several "groups" of components to ensure lesser import mess, better intelli-sense and good code quality.

The following "groups" are:

• Layouts -> They describe different types of layouts, like Columns and Rows. They are used to structure your application.

• Content -> They describe the part of UI that the user sees and understands. Text, HorizontalRule and InlineText are examples of Content.

• Media -> They are used to insert media files, like PDFs, Images, Videos and Live Video Feeds. They are also used to run 'virtual applications' and external websites using WebView and so on.

• Input -> They are used to take inputs from user, and do work. Buttons, TextInput and NumberInput are some examples of taking inputs from user.

The names above are not necessarily the identifiers used by OmegaJS library. We will cover all parts of Omega just by building a Todo App.

The code of app.ts won't be much, because maximum work is being done by the sub components.

Convention

OmegaJS is a very flexible UI library, which allows developers to structure their applications however they want. However, we will follow a simple convention that will save us a lot of time in the future.

The convention about components, is all components are stored in their dedicated folders. i.e. src/component-name

This helps us to completely isolate any logic that belongs to that component.

Coding app.ts

The root app will not have much code, since our sub components will take care of much of the functionality.

app.ts

import { Content, Layout } from '@indivice/omega/components'
import {} from '@indivice/omega'

export default function App() {
    return Layout.Column({
        style: {
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh'
        },
        
        children: [
            Layout.Column({
                style: { width: "300px" },
                children: [
                    Content.TextBox({
                        child: Content.Text("Todo App")
                    })
                ]
            })
        ]
    })
}

This will show a simple 'Todo App' Text on the center of the screen. The text will look a bit off-center, due to the container being a width of 300px, and is a Column, will show it from the start only.

Coding CreateTodo.ts

The create todo, as shown in the diagram, is the component that is responsible for adding a todo. We can already see how we structured our todo:

• Todo name -> This will indiciate the name of the todo

• Todo body -> Any additional information for the todo

So, we will need three inputs,

• text component for the name,

• text area component for the body,

• button to submit the text

Let us start by creating our component in src/CreateTodo/CreateTodo.ts

CreateTodo.ts

import { Layout, Input, Content } from '@indivice/omega/components'

export default function CreateTodo() {
    return Layout.Column({
        children: [
            Input.Text({ placeholder: "Enter todo name" }),
            Input.TextArea({ placeholder: "Enter todo body" }),
            Input.Button({
                child: Content.Text("Add Todo")
            })
        ]
    })
}

Now we will reference this just below the name of the component in app.ts.

app.ts [ Modified ]

import { Content, Layout } from '@indivice/omega/components'
import {} from '@indivice/omega'
import CreateTodo from './CreateTodo/CreateTodo' //import your newly created component

export default function App() {
    return Layout.Column({
        style: {
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh'
        },
        
        children: [
            Layout.Column({
                style: { width: "300px" },
                children: [
                    Content.TextBox({
                        child: Content.Text("Todo App")
                    }),
                    
                    CreateTodo(), //use it just below the title
                    Content.HorizontalRule() //and add a horizontal rule for dividing the UI
                ]
            })
        ]
    })
}

Coding Todo.ts

The Todo.ts component will contain the data about individual todo. We will store a list of todos, then iterate them and show each of them in our UI.

For now, let's just create the container to hold that data. We will add reactivity to it to actually show the list later down the course.

Create the component in src/Todo/Todo.ts as show below

Todo.ts

import { Layout, Content, Input } from '@indivice/omega/components'

export default function Todo() {
    return Layout.Column({
        children: [
            Content.InlineTextBox({
                children: [
                    Content.Text("#Serial. "),
                    Content.Text("Todo Title")
                ]
            }),
            
            Content.TextBox({
                child: Content.Text("Todo Body")
            }),
            
            Input.Button({
                child: Content.Text("Remove Todo")
            })
        ]
    })
}

And again. import it to app.ts to get a preview of how it looks.

app.ts [ Modified ]

import { Content, Layout } from '@indivice/omega/components'
import {} from '@indivice/omega'
import CreateTodo from './CreateTodo/CreateTodo'
import Todo from './Todo/Todo' //import the todo component for preview

export default function App() {
    return Layout.Column({
        style: {
            justifyContent: 'center',
            alignItems: 'center',
            height: '100vh'
        },
        
        children: [
            Layout.Column({
                style: { width: "300px" },
                children: [
                    Content.TextBox({
                        child: Content.Text("Todo App")
                    }),
                    
                    CreateTodo(),
                    Content.HorizontalRule(),
                    Todo() //show the todo component for preview
                ]
            })
        ]
    })
}

We have now completed the basic premises of building a todo application. The following articles will introduce us to state management.

Preview the App

Afrer following the above tutorial, your app should look somewhat like this:

If your app is not looking like above, try:

• First make sure you created the project using npx degit indivice/omega/ts omega-todo-app

• Secondly, make sure you have not edited any other files than what was told in this article

• Third, make sure you have correctly imported your code, and correctly made them in proper directory.