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
