求SAPUI5中XML视图转JavaScript视图的通用规则（附示例）

Hey there! Converting an SAPUI5 XML View to a JavaScript View is totally doable once you get the hang of the core mapping rules. Let's start with the converted code for your List view, then walk through the general rules you can reuse for any conversion.

Converted List.view.js Code #

sap.ui.jsview("sap.m.sample.ListSelectionSearch.List", {

    getControllerName: function() {
        return "sap.m.sample.ListSelectionSearch.List";
    },

    createContent: function(oController) {
        // Build search field and subheader toolbar
        const oSearchField = new sap.m.SearchField({
            width: "100%",
            liveChange: oController.onSearch.bind(oController)
        });
        const oSubHeaderToolbar = new sap.m.Toolbar({
            content: [oSearchField]
        });

        // Build info toolbar and filter label
        const oFilterLabel = new sap.m.Label({
            id: "idFilterLabel"
        });
        const oInfoToolbar = new sap.m.Toolbar({
            id: "idInfoToolbar",
            visible: false,
            content: [oFilterLabel]
        });

        // Build list item template
        const oStandardListItem = new sap.m.StandardListItem({
            title: "{Name}",
            description: "{ProductId}",
            icon: "{ProductPicUrl}",
            iconDensityAware: false,
            iconInset: false
        });

        // Build main list control
        const oList = new sap.m.List({
            id: "idList",
            mode: sap.m.ListMode.MultiSelect,
            includeItemInSelection: true,
            selectionChange: oController.onSelectionChange.bind(oController),
            infoToolbar: oInfoToolbar
        });
        // Bind collection data to the list
        oList.bindItems("/ProductCollection", oStandardListItem);

        // Build root page control
        const oPage = new sap.m.Page({
            showHeader: false,
            subHeader: oSubHeaderToolbar,
            content: [oList]
        });

        return oPage;
    }
});

General Conversion Rules #

These rules will work for most SAPUI5 XML → JS View conversions:

• Root View Structure

  • XML's <mvc:View> maps directly to sap.ui.jsview in JavaScript. You need to define two key methods:
    • getControllerName(): Returns the full path to your controller (matches the controllerName attribute in XML).
    • createContent(oController): Where you build and return your entire UI tree.

• Control Instantiation

  • Every XML tag (like <Page>, <List>) becomes a new instance of the corresponding SAPUI5 class (e.g., new sap.m.Page()). Use the full class name (including namespace) unless you've imported the class with sap.ui.define.

• Nested Controls

  • XML child elements (like <Page>'s <content>) are added either via the parent control's constructor (using an array in the content property, as shown in the code) or via addXXX methods (e.g., oPage.addContent(oList)).

• Data Binding

  • Property binding: XML's title="{Name}" becomes title: "{Name}" in the control's constructor settings.
  • Collection binding: XML's items="{/ProductCollection}" requires using the control's bindItems method (e.g., oList.bindItems("/ProductCollection", oListItemTemplate)), where the second parameter is your item template control.

• Event Handling

  • XML event attributes (like liveChange="onSearch") are defined in the control's constructor settings. Always bind the controller context with .bind(oController) to ensure this points to your controller when the event fires.

• Special Properties

  • Boolean values (like includeItemInSelection="true") are passed as actual booleans (not strings) in JS: includeItemInSelection: true.
  • Enumerated values (like mode="MultiSelect") should use the official SAPUI5 enum constants (e.g., sap.m.ListMode.MultiSelect) instead of raw strings for type safety.

• IDs

  • XML id attributes map directly to the id property in the control's constructor. Keep in mind SAPUI5's ID scoping rules to avoid conflicts.

内容的提问来源于stack exchange，提问作者kamikater