W3U3 Rewrite: XML views

[qmacro]

Hi all

I recently published a series of posts on rewriting one of the OpenSAP Mobile Course apps from Week 3 Unit 3 (W3U3) - see the W3U3 Rewrite Series intro post for more details.

One of the nice-to-have's that I mentioned in the intro, and something that will become more important over time (esp. with the Fiori Wave 2 apps) is the XML-based declarative view definitions. So, spurred on by folks like Former Member I made a first pass at XML views for the rewrite.

I've created a new branch on the Github repo:

https://github.com/qmacro/w3u3_redonebasic/tree/xmlviews

This branch has the changes for the XML view approach. It includes a replacement XML view for each of the views (App, Login, ProductList, ProductDetail, SupplierDetail) and a modified navigation mechanism using the EventBus.

I'll write a blog post on this soon, but for now, as always ... share & enjoy!

[lvhengel]

Hi DJ,

Great work. Will the first wave Fiori HTML views also be rewritten to XML? 

I am still very used to create JS views but these XML views look very clean indeed,much better than the HTML views with all these <div> tags and data-attributes.

I did not use it much in my HTML views, but i expect with XML views you can still include your "own" HTML if you want?

Looking forward to your blog.

[AndreasKunz]

Hi Leo,

yes (I think so) and yes.

For plain HTML tags you just need to set the proper namespace. A simple XMLView using plain HTML would look like this (plain HTML parts highlighted):

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons"

    xmlns:html="http://www.w3.org/1999/xhtml">

   XML view instantiated with XML string:<html:br/>

   <Panel text="Hello World">

      <Button text="{/actionName}" press="doSomething"></Button>

      <html:table border="5"><html:tr><html:td>An</html:td><html:td>HTML Table</html:td></html:tr></html:table>

   </Panel>

</mvc:View>

Regards

Andreas