OpenUI5 - Getting started example on GitHub page

[Former Member]

Hi everyone,

I'm going through the OpenUI5 landing page on GitHub, which can be found here -> https://sap.github.io/openui5/getstarted.html

You set up a basic example which is easy to understand. Now I moved my attention to the MVC example, which is not as clear to follow through as the former.

I know of the documentation under https://openui5.hana.ondemand.com/#docs/guide/91f292806f4d1014b6dd926db0e91070.html but it's not very learner friendly, so I'm here to ask about the XML View vs JS View.

I'm wondering, how are you handling the loading of the XML View? Here is the state of my example Node app -> https://github.com/michaelklopf/openui5test/tree/94f7b5e2a7ca4e08c823d8ff1d267658d76530f6

I assumed UI5 knows how to parse the app tree to find the controllers and views, when I name them correctly. But do I have to organize the code even more? The XML View is lying there, but can't be found.

Loading a JS View should be easier, when I load it with Browserify, I will test that shortly. I would be happy about some advice for the XML View though.

And for the GitHub page, maybe you should flesh out the example even more and make it clearer how to get to a working application. JSBins are fine, but they lack the folder structure and project organization of a real application.

Generally I would recommend to make a real project example and show the step to step process to get to a functioning application. Preferably with including testing and modularization. Have a look at the React.JS documentation for a good example.

A final question. Are XML Views processed similar to JSX components that are used in React.JS? I can choose to use JSX and transform it into JS during the build process, or write a view component directly in JS. Is there an internal build process before a UI5 view is rendered?

Kind regards,

Michael

[AndreasKunz]

Ok, so the resource loading by default assumes everything to be in one common file tree, but normally the application content is somewhere else than any control libraries provided by UI5 or by thirdparties, so you have to tell UI5 how to detect stuff tat belongs to your app.

sap.ui.localResources (described here: https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.html#.localResources) is a way to tell UI5 a package prefix that denotes all resources that should be loaded relatively to your index.html file. In your example the index.html is in the subfolder, I'm not sure whether this is a good idea, because stuff is loaded from below... better put it in the root folder.

Another way to tell which package name prefixes should make UI5 load the stuff from a specific location is documented here:

https://openui5.hana.ondemand.com/#docs/guide/1dfab2e19fc0479d9dfcefc28d3642f1.html

So I'd suggest to move your index.html file to the root folder, use localResources, and then check in the browser where the Views are tried to be loaded from. A quick look at the view names and folder structure in the example I gave above should help you get the picture.

Regards

Andreas

[Former Member]

Thank you Andreas,

you're very helpful. I'll amend my example and come back to you when something does not work.

Have a nice day

[AndreasKunz]

Hi Michael,

to answer some of your questions (starting at the end):

XMLViews are parsed when they are instantiated, the result is a tree of UI5 controls. So during the parsing the same is happening as during the createContent function in JSViews. But there is no interim format.

Building a real project is beyond the scope of the Getting Started page. It should only give an impression how things work. For a real project with file structure and everything, check out the "Application Best Practices" at https://openui5.hana.ondemand.com/#docs/guide/5ca68e6e62e6464a8103297fbc19cd9c.html

I'll have a look at your view loading issues later. But maybe the guide also helps. (keyword: resourceroots, registerModulePath)

Regards

Andreas