SAPUI5 Application Project Structuring

SAPUI5 Application Project Structuring

With the release of latest update of SAPUI5, project structure has been changed slightly. All the configuration that used to be maintained in the configuration file is now managed by manifest.json , moreover it takes care of routing, which previously was maintained by component.js. Similarly, there have been many more changes. An example with the latest project structure is shown.

This is a sample project structure, which almost covers every aspect.

The WebContent contains all the folders, including Component-preload.js, Component.js, index.html , and manifest.json.  Gulpfile  and node_modules are of no use here, it is mainly used to create the Component-preload.js file.

·         The First change that you notice is, now the controller files are kept separate in the controller folder, and not in the view folder itself. The controller folder include all the javascript files.

 

·         Then comes the CSS folder, which include customizing the sap ui5 application. Add any css files in this folder.

·         Next is the i18n folder, which is used for Globalization purpose. It includes i18n files for particular languages.

·         localService and test folder is used for mockserver, which consists of mockdata , metadata,  mockserver.js and testService.html which acts an index.html file for the mockserver.

·         model folder consists of the formatter.js file.

·         util folder consists the dialog.js file, if it is used in a particular project, and similarly the fragment files are contained in the view folder.

·         Next comes the view folder, which now purely consists only the views, both xml or maybe javascript files too. Moreover, it also includes the fragment files too.

·         Component-preload.js file is mainly used for optimization purpose, it is created using grunt operations or maybe using gulpfile.

·         Component.js file is used here for declaring the models, (odata, json, or i18n)but in the latest version of sapui5, that step is also done in the manifest.json file.

                Moreover, here the router initialization is also done.

·         Index.html file serves the same purpose here, we declare the shell  here. And all the library files are loaded in index.html. Mainly there is no change in the index file. It serves the same purpose similar to what it used to serve in previous versions.

·         Manifest.json file here is used to declare the OData, here  the version of sap.ui5, sap.ui, sap.app is done. Moreover, the routes are defined here itself, and not in the component.js file.

Go through my video from Youtube, on Project Structuring:

In the First session I have covered, views, controllers, Component.js, and Manifest.json

 

In the Second Session, I have covered the models, i.e JSON model

 

In the third Session, I have covered the Internationalization topic 

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post