3.4. Create the HTML5 Project

The HTML5 archetype can be generated within JBoss Developer Studio using either the HTML5 Project wizard in JBoss Central or the IDE New Maven Project wizard. The procedures below outline both methods but you only need to use one. You should start by using the HTML5 Project wizard and check the archetype version it is using before continuing. The archetype version is predetermined in this project wizard and it may not match the version of this JBoss Web Framework Kit release. If it does not match, you must use the New Maven Project wizard instead, in which you can specify the archetype version explicitly.

Procedure 3.1. Create the HTML5 Project using the JBoss Central Wizard

  1. In JBoss Central, under Start from scratch, click HTML5 Project. The New Project Example wizard opens.
    Description

    Figure 3.1. HTML5 Project in JBoss Central

  2. From the Target Runtime list select jboss-eap-version Runtime where version denotes the JBoss EAP version.
  3. Ensure that the Description field contains the archetype version matching the version of this JBoss Web Framework Kit release and click Next.
  4. Complete the fields about the new project as follows:
    • In the Project Name field, type my-mobile-app.
    • In the Package field, type com.company.example.mymobileapp.
    Description

    Figure 3.2. Completed Project Name and Package Fields in the New Project Example Wizard

  5. Click Next.
  6. Review the information you have entered and click Finish. Once the project is created, the New Project Example window opens and displays 'HTML5 Project' Project is now ready.
    Description

    Figure 3.3.  'HTML5 Project' Project is now ready Message in the New Project Example Wizard

  7. Click Finish to close the New Project Example window. The project is listed in the Project Explorer view and a README.md file opens in a text editor displaying information about the project.

Procedure 3.2. Create the HTML5 Project using the New Maven Project Wizard

  1. Click FileNewMaven Project.
  2. Ensure the Create a simple project check box is not selected and click Next.
    Description

    Figure 3.4. Create a simple project Check Box in the New Maven Project Wizard

  3. Click Add Archetype.
  4. Complete the fields about the JBoss Web Framework Kit HTML5 archetype as follows:
    • In the Archetype Group Id field, type org.jboss.archetype.wfk.
    • In the Archetype Artifact Id field, type jboss-html5-mobile-archetype.
    • In the Archetype Version field, type version.Final where version denotes the complete three-digit version number for this JBoss Web Framework Kit release. For example, 2.7.0.Final for JBoss Web Framework Kit 2.7.0.
    • In the Repository URL field, type http://central.sonatype.org/.
    Description

    Figure 3.5. Completed Fields in the Add Archetype Window

  5. Click OK.
  6. From the archetype list, ensure the added archetype is selected and click Next.
  7. Complete the fields about the project to be created as follows:
    • In the Group Id field, type com.company.example.mymobileapp.
    • In the Artifact Id field, type my-mobile-app.
  8. Click Finish. Once the project is created, it is listed in the Project Explorer view.