Worklight project and application structure

The project name used within Worklight Studio is HelloWorld, and the display name of the app will be HelloWorld, as defined earlier in step 4 of the Creating a simple IBM Worklight application section. To change the name, follow the steps defined as follows:

  1. If the project is not opened, double-click on the application-descriptor.xml file in Project Explorer to open in Application Descriptor Editor.
  2. On the design tab, change the Display name attribute from HelloWorld to any other name of your choice.

    You can also change the description by editing the Description attribute.

  3. Save and close the application-descriptor.xml file.

Now, let's move on to the structure of the application. The default environment is called the common environment. It is responsible for holding every component and file related to the app, which shares its resources with the environment.

Application resources

In order to run the Worklight app on multiple devices, you must have the following resource files in your project. IBM Worklight automatically generates any missing resources that are not supplied. These resources are inter-related with each other.

  • HelloWorld.html: This is the main HTML file that acts as the interface of the mobile application. This file loads all the web resources (script and style sheets) necessary to define the general components of the application and to hook required document events. By default, this file is placed under the common folder.
  • css: This folder extends or overrides both common files to keep the structure in the framework. It consists of the following files:
    • HelloWorld.css: This is the main CSS file
    • Reset.css: This file brings all rendering-oriented engines to a common ground
  • images: This folder contains images for separate image locations to be called in HTML, directly or using CSS.
  • js: This folder extends the application instance object and common app class. It contains some predefined files:
    • HelloWorld.js: This is the main application JavaScript file.
    • Message.js: This JavaScript file holds JSON objects that contain app messages. It can be used as a source for localization translation.
  • application-descriptor.xml: This file holds application metadata. Its attributes will be discussed during deployment of this application later in this chapter.

In the following screenshot, we highlight the project application structure and resources:

Application resources

The common directory structure of a Worklight app

If you proceed with the hybrid application wizard you will have server-side configuration under the following folders structure:

  • bin: This folder contains generated .wlapp and .wladapter files that can be used to deploy to a remote Worklight server.
  • server: This folder is used for server-side customization of a project.
    • Conf: This folder contains a file called worklight.properties, used to set up properties for the server
    • authenticationConfig.xml: This file is used to set authentication realms
    • login.html: This file is used to present a login form for web environments and Worklight Console
  • java: This folder holds Java classes that will be compiled and deployed to IBM Worklight Server for handling customized Java code-based application.
  • lib: This folder contains some additional JAR files that can be used to extend Java class functionalities and can be deployed on the server. You can see the folder structure of the bin and server folders in the following screenshot:
    Application resources

Now put in some additional code to provide a better display to your mobile application:

  1. Open HelloWorld/common/css/HelloWorld.css and add the following lines to define style:
    /* HelloWorld CSS */
#AppBody {
  height: 460px;
  margin: 0 auto;
  width: 320px;
  background-color: #ccc;
  overflow: hidden;
  overflow-y: auto;
}
#header {
  text-align: center;
  background-color: #1D4D90;
  color: #F9FAFB;
  font-size: 16px;
  height: 38px;
  line-height: 38px;
  border-bottom: 1px solid #BBBBBB;
}

#wrapper {
  padding: 10px;
}

    Tip

    Downloading the example code

    You can download the example code files for all Packt books you have purchased through your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

  2. Now move to the main HTML file named HelloWorld.html in the app/common folder. When you open this file, you'll find generated code with referenced script and CSS files within the same with <body> tag.

    Note that the <body> tag must have the ID attribute value set to the content. If you change the value, the application environment does not initialize correctly.

  3. Now place the following lines of the code under the <body> tag:
    <div id="AppBody">
  <div id="header">
  <div id="wrapper"> Welcome </div>
  </div>
  Hello World
</div>

Now our HelloWorld application is done. You can preview our first designed page in Rich Page Editor (RPE) provided by IDE.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.229.111