# Adding Pages<a name="EN-US_TOPIC_0000001054607703"></a>

## Creating the Home Page<a name="section16935511143715"></a>

After the project is created, the  **index**  page is generated by default. The following figure shows the project directory.

**Figure  1**  Project directory<a name="fig16545205773718"></a>  
![](figures/project-directory.png "project-directory")

## Creating Detail and History Pages<a name="section122131729173819"></a>

Perform the following steps twice to create the rest two pages:

1.  Right-click  **pages**  and choose  **New**  \>  **JS Page**  from the shortcut menu.

    **Figure  2**  Adding a page<a name="fig18740145216410"></a>  
    ![](figures/adding-a-page.png "adding-a-page")

2.  Enter the page name.

    **Figure  3**  Entering the page name<a name="fig48491266714"></a>  
    ![](figures/entering-the-page-name.png "entering-the-page-name")

3.  Confirm the creation.

    The following figure shows the application project directory after the  **detail**  page and  **history**  page are created. Each page contains a  **.hml**  layout file, a  **.css**  file, and a  **.js**  file \(containing service logic code\).

    **Figure  4**  Complete project directory<a name="fig103015177819"></a>  
    ![](figures/complete-project-directory.png "complete-project-directory")