ui5_Walkthrough_Step 1: Hello World! (vs code 版)

第一次新建文件夹Walkthrough，vs 打开新建文件夹，ctrl+shift+p 转到命令行，新建第一个fiori程序，步骤如下

点击完成之后，系统会自动创建一个文件夹如下：

修改：视图文件Main.view.xml如下

XML 复制代码

<mvc:View controllerName="t01.controller.Main"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.m">
    <Page id="page" title="{i18n>title}">
        <Button id="bt1" text="{i18n>bntext}" press="onPress"/>
    </Page>
</mvc:View>

修改Main.controller.js文件如下

javascript 复制代码

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast"
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller, MessageToast) {
        "use strict";

        return Controller.extend("t01.controller.Main", {
            onInit: function () {

            },
            onPress: function () {
                var oBundle = this.getView().getModel("i18n").getResourceBundle();
                var sMessage = oBundle.getText("msgtxt");
                MessageToast.show(sMessage);
            }
        });
    });

修改t01\webapp\i18n\i18n.properties文件如下，我理解的i18n相当于abap开发中的文本元素，前面view文件中的按钮文本及点击后的消息提示文本都需要在i18n.properties文件中添加

html 复制代码

# This is the resource bundle for t01

#Texts for manifest.json

#XTIT: Application name
appTitle=Hello World

#YDES: Application description
appDescription=A Fiori application.
#XTIT: Main view title
title=Hello World
msgtxt = Hello World1
bntext = click me

代码运行：

第一次设置项目时
依赖包有更新时

第一次设置项目或依赖包有更新时需要运行 npm install 加载依赖报，运行完成之后可以看到文件夹下有node_modules的文件夹
成功之后在运行 npm start

运行结果如下

备注：

├── webapp/ 前端UI代码

│ ├── view/ 视图文件夹

│ │ └── Main.view.xml

│ ├── controller/ 控制器文件夹

│ │ └── Main.controller.js

│ ├── model/ 数据模型

│ ├── Component.js 入口组件

│ ├── manifest.json 配置文件：应用配置（如应用ID、版本、类型）

| | 模型配置：OData 模型、JSON 模型、XML 模型

| | 路由和导航：定义应用的路由规则

| | i18n国际化 :指定应用的资源模型，如多语言文件（i18n.properties）

| | 服务配置：配置OData服务的数据源，以及相关的设置

| | 组件配置：如果应用是基于UI5组件开发的

| | 依赖声明 :声明应用所依赖的库（如SAP UI5的核心库等）和组件

| | 主题和样式：指定应用使用的主题（如SAP Fiori等）和自定义样式

| | 启动参数：定义应用启动时需要的参数，例如初始视图、模型

│ └── index.html |

└──i18n.properties internationalization(相当于文本元素)

├── package.json 依赖项

└── ui5.yaml 启动应通过 npm start 命令时，UI5 Tooling 会使用此配置启动开发服务器。构建应用当你准备部署应用时，使用 npm run build 命令，UI5 Tooling 会根据配置构建项目主要作用1.定义项目类型和元数据：例如项目名称、版本、类型（应用、库等）。 2.配置依赖项：指定项目依赖的库、主题等。3.构建和开发服务器配置：如何构建项目，以及开发服务器的行为。4自定义任务：定义在构建过程中执行的额外任务。