• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Adding Pages<a name="EN-US_TOPIC_0000001054607703"></a>
2
3## Creating the Home Page<a name="section16935511143715"></a>
4
5Upon creation of the project, the  **index**  page is automatically generated, which is the home page of AirQuality.  [Figure 1](#fig16545205773718)  shows the project directory.
6
7**Figure  1**  Project directory<a name="fig16545205773718"></a>
8![](figures/project-directory.png "project-directory")
9
10## Creating the Details Page<a name="section122131729173819"></a>
11
12To the details page, perform the following steps:
13
141.  Right-click  **pages**  and choose  **New**  \>  **JS Page**  from the shortcut menu.
15
16    **Figure  2**  Adding a page<a name="fig18740145216410"></a>
17    ![](figures/adding-a-page.png "adding-a-page")
18
192.  Enter the page name.
20
21    **Figure  3**  Entering the page name<a name="fig48491266714"></a>
22    ![](figures/entering-the-page-name.png "entering-the-page-name")
23
243.  Confirm the creation.
25
26    The following figure shows the application project directory after the  **detail**  page is created. It contains a  **.hml**  layout file, a  **.css**  file, and a  **.js**  file \(containing service logic code\).
27
28    **Figure  4**  Complete project directory<a name="fig103015177819"></a>
29    ![](figures/complete-project-directory.png "complete-project-directory")
30
31
32