Creating A Fiori UI5 Application Using Fragments
Hi All,
In this document i will try to cover the concept of Fragments in developing a Fiori Application.First of all what is Fragments!! Fragments is a technique used to split the codes into different files which will be dynamically called into a specified area in a UI5 page to get the final Output UI.
Fragments files are created with the extension <fragmentname>.fragment.xml. These files will be containing the code like any other UI5 views.But when a page is having lots of codes and multiple people are working on the the same UI5 project via Team Share feature in eclipse.Then dividing the codes of a single page into multiple fragments will help multiple users to specifically work on their code fragment without affecting the Main Codes.And these multiple fragments are dynamically called into the respective areas of the page to get the final desired output.This document is helpful mainly for consultants who are a bit familier with Fiori UI5 development.
For the purpose of explaining fragment concept,I have developed an UI5 application for Airticket Booking.In the screenshot below i have described how i am splitting the design codes into different fragments.If you look into the picture you can see different fragment codes coming together to make the final UI5 page.
The below screenshot represents how i have put the fragment codes in my project under the "Fragments" folder.
A sample Fragment code is as shown below
Once you have defined your Fragment file.Now you have to call the Fragment into the Main view of your UI to dynamically load the codes in that Fragment file.
The fragment file is called into the view using the following syntax
<core:Fragment fragmentName="<Your fragment file path>" type="XML" />
On my next document i will cover the Step By Step details in making this UI5 application which will also cover Custom Style Sheets usage for hovering effect,dynamic Icons,Standard and Custom Tile Containers,Maintaining support for different languages for your UI texts via MessageBundle properties etc.
To have an idea on maintaining custom languages support in your UI5 application,Please refer the below link
http://scn.sap.com/thread/3536791
Below are some screenshots of the UI5 custom features we can achieve through css customization
Hovering Effect and Tile Container
Animated Icons using plain Jpeg pictures
Malayalam Language
Hindi Language
Arabic Language(Note: RTL Languages are not officially supported by Fiori)
Hope this topic was helpful.
Regards,
Bince Mathew C
Update: The details about making this UI5 application is being added in this blog of mine Creating A Fiori Like Application With Custom Style Sheets