美文网首页
利用WebStorm开发 SAP UI5 项目

利用WebStorm开发 SAP UI5 项目

作者: LiuliuZhang | 来源:发表于2018-05-24 13:30 被阅读0次

1 WebStorm开发配置

1.1 下载OpenUI5 Development Plugin

点击目录File->Setting,添加 SAP/OpenUI5 Development Plugin 插件,安装完成重启项目


1.2 新建UI5项目

在WebStorm中新建项目,选择UI5 Application


在命令行中,首先npm install grunt-cli -g全局安装grunt构建工具,然后在项目目录下通过npm install安装依赖,安装完成后,grunt serve启动项目
在main.view.xml 中添加text标签

通过浏览器查看

1.3 访问odata 测试

在manifest中配置datasource

    "ach": "ach",
    "dataSources": {
      "invoiceRemote": {
        "uri": "http://services.odata.org/V2/Northwind/Northwind.svc/",
        "type": "OData",
        "settings": {
          "odataVersion": "2.0"
        }
      }
    }
......
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "test1.i18n.i18n"
        }
      },
      "invoice": {
        "dataSource": "invoiceRemote"
      }

在xml页面中添加list组件

                <content>
                    <Text text = "hello world"/>
                    <List
                            headerText="Invoice"
                            class="sapUiResponsiveMargin"
                            width="auto"
                            items="{invoice>/Invoices}">
                        <items>
                            <ObjectListItem
                                    title="{invoice>Quantity} x {invoice>ProductName}" />
                        </items>
                    </List>
                </content>

新建chrome快捷方式,在目标后面添加-disable-web-security --user-data-dir关闭同源校验


打开浏览器访问

相关文章

网友评论

      本文标题:利用WebStorm开发 SAP UI5 项目

      本文链接:https://www.haomeiwen.com/subject/ckpjjftx.html