Wang Zixi 2022-05-14 14:57:55 阅读数:936
We all know Fiori representative SAP new generation UI User interface style , and UI5 yes Fiori UX(User Experience, User experience ) Specific implementation technology . From the following figure Journalism Can see ,SAP It was decided that Fiori Same as specific UI Realize technical decoupling , For what reason ？
as everyone knows , The development speed of front-end technology is very fast , New concept , A new term , New tools emerge in endlessly , Many front-end developers often lament " I can't learn ", that , If only bound to a specific UI implementation technique ,Fiori UX Will lack enough flexibility , It is difficult to make full use of the latest technology in the industry to better serve end users .
meanwhile , This move also fully reflects SAP Really listening to the voice of developers in their own ecosystem , This decoupling allows SAP Developers according to the actual project needs , Flexible choice of the best UI Framework to develop Fiori application .
Fiori UX Same as the bottom layer UI The key to realizing framework decoupling is SAP Fiori Fundamentals, A lightweight presentation layer implementation . Technically ,SAP Fiori Fundamentals It's not new UI Technology or framework , But a series of stylesheets and HTML A collection of tags , To make SAP In the ecosystem UI Developers use their favorite UI frame , such as Angular,React,Vue Wait for development , At the same time, it automatically ensures that the developed application still has Fiori Style and user experience .
SAP Fundamentals It's a use HTML and CSS Lightweight presentation layer , With the help of Fundamentals Style sheets and HTML Tag library , Developers can be based on Web Build a consistent SAP Applications .
Use SAP Fundamentals It can bring the following benefits to developers and enterprises ：
today ,Fiori Fundamentals Library has been widely used in SAP Ecosystem products and business lines , for example SAP Commerce Cloud、Kyma、Luigi、SAP C/4HANA cockpit、SAP Concur、SAP Customer Data Cloud（ also called Gigya）、SAP Service Cloud （ also called Coresystems）、SAP Fieldglass、SAP Ariba and SAPDataHub etc. .
SAP Fiori Fundamentals Appearance , That doesn't mean it will replace UI5, actually ,SAP about UI5 The maintenance and function enhancement of has not stopped .
UI5 Web A component is a set of components based on Web Standard packaging 、 Reusable and lightweight UI Elements. They merge SAP Fiori 3 Design , Allows developers to create and SAP Fiori Design guidelines consistent user experience across applications , It has nothing to do with the specific front-end development framework .
UI5 Web Components have OpenUI5/SAPUI5 Familiar enterprise level features in the framework , For example, stability 、 internationalization 、 Accessibility and topic support , And in UI A clear interface is introduced between the use and implementation of elements .
UI5 Product line UI5 Web The core project of component area is as OpenUI5/SAPUI5 The framework was created as an important part of the evolution to modularity and common toolbox , The purpose is to provide a separate set of modules , Thus making Web Developers can easily add it to development projects , To build an enterprise class Web Applications .
Talk is cheap. Show me the code. Let's deepen our understanding of SAP Fiori Fundamentals The understanding of the .
Because the team where I work carries out prototype development , Most colleagues in the group like to use Vue, So let's try SAP Fiori Fundamentals + Vue This pair .
First of all, we have to have a working Vue application , Then on this basis, process .
Readers can read in my article SAP Blog I found a Hello World Of Vue application , adopt webpack Run after packaging , You can see the displayed in the browser Hello World：
This Hello world Of Vue application , The project structure is as follows ：
Let's process on the basis of it .
npm install --save fundamental-vue
After installation package.json You can see it in the library fundamental-vue still beta edition ,
Here is a Table The runtime effect of the component , It's not hard to find this Table The appearance is the same as we used before UI5 The development is very similar .
Click on Show Code, It will show this Table Component's Vue Implement the source code , Like us UI5 Toolkit The controls displayed in UI5 XML View The source code in , The truth is interlinked .
Paste this pile of code into our Vue application src Under folder index.vue in ：
Also in index.vue in , stay module.exports Realize as Button Event handler addCurrentEntry, And hard coding some test data ：
stay main.js Add two lines to :
import FundamentalVue from 'fundamental-vue'; Vue.use(FundamentalVue);
The last step , stay index.html The introduction is located in CDN Upper Fiori Fundamentals Of css file . Of course github It is also mentioned that you can also use
npm install --save fiori-fundamentals Install it locally for use .
At this point, the processing is over . use webpack After packaging , function npm run dev start-up wepack-dev-server, You can go to localhost See the following effect in ：
Enter the name of the new counselor , Click on Add Entry The button can then be entered into the table .
This use Vue Developed from components with Fiori UX Style application runtime effect , Check on the mobile phone, as shown in the figure below ：
This paper first introduces the driver SAP Fiori UX The design language is the same as SAP UI5 Market reasons for framework decoupling , So that leads to Fiori Fundamental The concept of , Then choose Vue This front-end framework , Explained how to use Fiori Fundamentals add Vue This pair , Implement a simple with Fiori UX Front end applications .
版权声明：本文为[Wang Zixi]所创，转载请带上原文链接，感谢。 https://qdmana.com/2022/134/202205141454016437.html