Skip to content

Latest commit

 

History

History
137 lines (102 loc) · 4.71 KB

README.md

File metadata and controls

137 lines (102 loc) · 4.71 KB
Raw

Step 15: Nested Views

Our panel content is getting more and more complex and now it is time to move the panel content to a separate view. With that approach, the application structure is much easier to understand, and the individual parts of the app can be reused.

 

Preview

The panel content is now refactored to a separate view (No visual changes to last step)

You can access the live preview by clicking on this link: 🔗 Live Preview of Step 15.

To download the solution for this step as a zip file, just choose the link here: 📥 Download Solution for Step 15.

Coding

webapp/controller/HelloPanel.controller.ts (New)

In folder webapp/controller we create a new HelloPanel.controller.ts file and move the method onShowHello of the app controller to it, so we get a reusable asset.

import Controller from "sap/ui/core/mvc/Controller";
import MessageToast from "sap/m/MessageToast";
import JSONModel from "sap/ui/model/json/JSONModel";
import ResourceModel from "sap/ui/model/resource/ResourceModel";
import ResourceBundle from "sap/base/i18n/ResourceBundle";

/**
 * @namespace ui5.walkthrough.controller
 */
export default class HelloPanel extends Controller {
    
    onShowHello(): void {
        // read msg from i18n model
        // functions with generic return values require casting 
        const resourceBundle = (this.getView()?.getModel("i18n") as ResourceModel)?.getResourceBundle() as ResourceBundle;
        const recipient = (this.getView()?.getModel() as JSONModel)?.getProperty("/recipient/name");
        const msg = resourceBundle.getText("helloMsg", [recipient]) || "no text defined";
        // show message
        MessageToast.show(msg);
    }
};

webapp/view/HelloPanel.view.xml (New)

We create a new HelloPanel.view.xml file in folder webapp/view and move the whole panel from the App view to it. We also reference the controller we just created for the view by setting it to the controllerName attribute of the XML view.

<mvc:View
   controllerName="ui5.walkthrough.controller.HelloPanel"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Panel
      headerText="{i18n>helloPanelTitle}"
      class="sapUiResponsiveMargin"
      width="auto" >
      <content>
         <Button
            text="{i18n>showHelloButtonText}"
            press=".onShowHello"
            class="myCustomButton"/>
         <Input
            value="{/recipient/name}"
            valueLiveUpdate="true"
            width="60%"/>
         <FormattedText
            htmlText="Hello {/recipient/name}"
            class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
      </content>
   </Panel>
</mvc:View>

webapp/view/App.view.xml

In the App view, we remove the panel control and it content and put the XMLView control to the content of the page instead. We add the viewName attribute with the value ui5.walkthrough.view.HelloPanel to reference the new view that now contains the panel.

<mvc:View
	controllerName="ui5.walkthrough.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true">
	<Shell>
		<App class="myAppDemoWT">
			<pages>
				<Page title="{i18n>homePageTitle}">
					<content>
						<mvc:XMLView viewName="ui5.walkthrough.view.HelloPanel"/>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

webapp/controller/App.controller.ts

We remove the onShowHello method from the App controller, as this is not needed anymore.

import Controller from "sap/ui/core/mvc/Controller";
/**
 * @namespace ui5.walkthrough.controller
 */
export default class App extends Controller {

};

We have now moved everything out of the app view and controller. The app controller remains an empty stub for now, we will use it later to add more functionality.

 

Next: Step 16: Dialogs and Fragments

Previous: Step 14: Margins and Paddings

Related Information

API Reference: sap.ui.core.mvc.XMLView