Working with the Generated HTML5 Starter Application

8 Service Consumption

8.3 Toolkit for HTML5 (GWPA)

8.3.3 Working with the Generated HTML5 Starter Application

Examples of generated projects for the HTML5 applications, and a description of possible customizations and extensions.

The generated project is an Eclipse Web project, which references the required resources to help in writing HTML and JavaScript code. This also includes a reference to the JavaScript library that enables Eclipse to detect syntax errors and to provide intellisense.

The main folder of the generated project is the WebContent folder. This folder contains all the HTML, JavaScript, and CSS files required to run the Web application. The generated files and code depend on the selected template and the pages you defined in the wizard.

You can modify and extend the generated code for the HTML5 starter application to suit your needs.

The Generated JQuery Mobile Application

The generated project consists of the following elements:

● index.html

● lib

● scripts

● images

The index.html File

The index.html file is the main entry point to the Web application. The <head> element in the file includes references to all the style sheet (CSS) and JavaScript (JS) files needed to run the application.

The <body> element renders all the pages of the application. Each page is a <div> element with the data-role attribute set to page.

You can add <div> elements to create additional pages or edit existing ones.

The lib Folder

The lib folder contains all the external third party libraries and their dependencies.

● jQuery (jquery-1.6.4.js)

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

● jQuery Mobile (jquery.mobile-1.0.1.js)

Touch-Optimized Web Framework for Smartphones & Tablets. A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

jQuery Mobile also includes the following CSS files:

○ jquery.mobile-1.0.1.css

○ jquery.mobile.structure-1.0.1.css

● images

The images subfolder contains the images required by the jQuery Mobile library.

Note

Do not remove files from this folder.

● datajs-1.0.2.js

This is an external third party library. It is a cross-browser JavaScript library that enables data-centric Web applications by leveraging modern protocols, such as, JSON, OData, and HTML5-enabled browser features. It is designed to be small, fast and easy to use.

To update the libraries:

It is possible to update the above libraries by downloading new versions from their respective sites and replacing the files in the project. Note that you have to update all dependencies (jQuery Mobile is dependent on jQuery) and all references to these libraries in the index.html.

The scripts Folder

The scripts folder contains all of the JavaScript files generated by the toolkit that are required to run the application.

● app.js

Contains functions used to handle navigation between pages in the index.html file. In addition, it contains global functions for formatting data. This file makes the code in the index.html file cleaner and more concise.

Modify this file if you want to change or add functionality.

● connectivity.js

Contains the functions that handle HTTP calls to the SAP NetWeaver Gateway service by using the dataJS library, and handles request errors that might occur. This file also contains the definition of the service URL and SAP client.

Note

Make sure to change this file if the service URL or SAP client changes.

● service_labels.js

Contains the sap-labels for the properties for all the entities defined in the chosen service metadata. This is used in the index.html file to display the labels to the user.

The images Folder

The images folder contains SAP logos that are used only on iOS devices when a shortcut is created for the web application.

Replace these icon files with your own company icons to customize the generated application.

Styling and Themes

The application uses the jQuery Mobile CSS file for runtime user interface styling. The themes of the header, content, and filter of each application page are defined in the mobileinit event handler of the document object, defined at the <head> section of the index.html file:

$.mobile.page.prototype.options.headerTheme = "a";

$.mobile.page.prototype.options.contentTheme = "c";

$.mobile.listview.prototype.options.filterTheme = "c";

You can modify the selected themes as needed.

The Generated SAPUI5 Application

The generated project consists of the following elements:

● index.html

● resources

● images

The index.html File

The index.html file is the main entry point to the Web application.

The <head> element in the file includes a reference to the styelsheet (CSS) file used in the application, and a definition of the SAPUI5 library location and preferences.

In addition, this element includes a script for displaying the first application view.

The <body> element includes a single <div> element for displaying the application content.

Note

Make sure to set the location of the SAPUI5 library appropriately in this file, as described in the Running the SAPUI5 Application section.

The resources Folder

The resources folder contains all of the JavaScript files generated by the toolkit that are required to run the application.

● View and Controller files

The view and controller files contain the code of the application views. The files are designed according to the Model-View-Controller architecture concept.

Each file may represent one or two application views, according to the application internal logic.

● utils/connectivity.js

Contains the definition of the service URL. The URL may also include a SAP client definition using the sap-client query parameter.

Note

Make sure to change this file if the service URL or SAP client changes.

● utils/utility.js

Contains utility functions to handle localization, error handling and date formatting.

● globalization/i18n.properties

Contains all the application strings, including the sap-labels for the properties for all the entities defined in the chosen service metadata. The file is used to support the application localization.

The images Folder

The images folder contains SAP logos that are used on the generated application.

Replace these icon files with your own company icons to customize the generated application.

Styling and Themes

The application uses the styles.css file supplied with the generated application, and the themes supplied with the referenced SAPUI5 library. The selected theme of the application UI controls created by the SAPUI5 library is defined at the <head> section of the index.html file:

data-sap-ui-theme="sap_goldreflection"

You can modify the selected theme as needed.