Fundamentals

Learning ItsyUI is not difficult at all. In this section, we’ll cover all the fundamentals for building your very first mobile app.

What is a Page?

In the application world, a page is commonly referred as a window or a page view. In ItsyUI, a page is a container that fully covers the viewport (usually a screen). In ItsyUI, a page component can be defined by a page JSON schema or with <ItsyPage /> react element.

A Sample App with a Page, Form and Grid

The following sample code illustrates the most basic app that contains a page with form and grid. Inside the page container you can add any ItsyUI component.

{
     "id": "todo",
     "title": "Todo",
     "url": "/todo",
     "components": {
          "todo-form": {
               "name": "todo-form",
               "properties": {
                    "title": "Form",
                    "typeId": "todo",
                    "formSchemaId": "todo",
                    "propertyType": "Form",
                    "controlID": "",
                    "widget": "FormWidget",
                    "ui:widget": "form",
                    "widgetType": "bound",
                    "dataSource": "datasource",
                    "padding": 1
               }
          },
          "todo-list": {
               "name": "todo-list",
               "properties": {
                    "title": "List",
                    "propertyType": "GridList",
                    "gridSchemaId": "todo",
                    "controlID": "",
                    "widget": "GridWidget",
                    "ui:widget": "grid",
                    "gridViewType": "list",
                    "widgetType": "bound",
                    "dataSource": "datasource",
                    "rowSelectionMode": 1,
                    "typeId": "todo",
                    "primaryColumn": "objectId",
                    "emptyRecordsMessage": "No TODO items",
                    "gridViewAttributes": {
                         "attributes": {
                              "listType": "simpleHorizontal",
                              "primary": "title",
                              "secondary": "description"
                         }
                    },
                    "padding": 1
               }
          }
     },
     "layout": [
          {
               "columns": [
                    {
                         "cell": [
                              {
                                   "widget": "todo-form"
                              }
                         ]
                    },
                    {
                         "cell": [
                              {
                                   "widget": "todo-list"
                              }
                         ]
                    }
               ]
          }
     ]
}

Once the pageJSON schema is defined, It can be consumed in a <ItsyPage /> component.

import { ItsyPage } from "@itsy-ui/app";

const schema = {
    pageSchema: require("./todo_page.json")
};

const TodoPage = (props: any) => {
    return <ItsyPage schema={schema} />;
};

export default TodoPage;

Now you’ve got your first ItsyUI app containing a single page! Adding more components will make this app even more great.

Usually, an app may have multiple pages with transitioning screens. In the next chapter, we will cover how to manage multiple pages.