Hello Mike.
Your MVC application should be something like this, just 3 files...
#! index.html
<!DOCTYPE HTML><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv='Content-Type' content='text/html;charset=UTF-8' /><script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons" data-sap-ui-theme="sap_bluecrystal"></script><script> sap.ui.localResources("view"); var view = sap.ui.view({ id : "idsxsx1", viewName : "view.sxsx", type : sap.ui.core.mvc.ViewType.XML }); view.placeAt("content");</script></head><body class="sapUiBody" role="application"> <div id="content"></div></body></html>
#! *.controller.js
sap.ui.controller("view.sxsx", { onPress : function() { var msg = "blablabla"; // do stuff alert(msg); }
});
#! *.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" xmlns:layout="sap.ui.commons.layout" controllerName="view.sxsx" xmlns:html="http://www.w3.org/1999/xhtml"> <Panel id="panel" text="Enter Data"> <content> <layout:MatrixLayout> <layout:rows> <layout:MatrixLayoutRow> <layout:cells> <layout:MatrixLayoutCell> <layout:content> <Label text="First Name:" /> </layout:content> </layout:MatrixLayoutCell> </layout:cells> </layout:MatrixLayoutRow> <layout:MatrixLayoutRow> <layout:cells> <layout:MatrixLayoutCell> <layout:content> <TextField id="Field1" value="{/firstName}" /> <TextView id="textView1" text="{/firstName}" /> </layout:content> </layout:MatrixLayoutCell> </layout:cells> </layout:MatrixLayoutRow> <layout:MatrixLayoutRow> <layout:cells> <layout:MatrixLayoutCell> <layout:content> <Button id="btn" text="Submit" press="onPress" /> </layout:content> </layout:MatrixLayoutCell> </layout:cells> </layout:MatrixLayoutRow> </layout:rows> </layout:MatrixLayout> </content> </Panel></core:View>
It isn't too complicated after you get used to it 