My name is Nhat Doan. I am currently in SAP Student Training and Rotation (STAR) Program. In my first rotation, I have a chance to join CoE Mobile & UX team. I have learned a lot of things especially about current developments in mobile technology. Today, smartphones become essential for daily life. Businesses are using mobile applications to serve their clients and they will see many benefits such as brand building, customer connection, and profit boosts. I would like to share some topics concerning mobile development that I have a chance to work on.
- Build ProductCatalog application with AppGyver and Northwind OData service.
- Build ProductCatalog application with SAP MDK and Northwind OData service.
- How to style the MDK application.
- How to run MDK application on virtual device and override resources.
- How to reads log, traces issue, and measures performance for MDK application.
How to style the MDK application
For this section, we will change the style of our MDK application from the default style.
Figure 1: MDK application with default style
We will make our application to become more colorful.
Figure 2: MDK application after modifying style
Create a Home page with Bottom navigation
Right click on the
Pages folder. Select
MDK: New Page. Select
Bottom Navigation Page. Input
Home and click
Next to create new Home page.
Figure 3: Create Home page
Set the
Main page to
Home page
Open
Application.app. Select
Home.page for
Main Page field.
Figure 4: Home page becomes Main Page
Add item to Bottom Navigation bar
Open
Home.page. Click on
Bottom Navigation bar. Click on the icon under
Items to add item to the bottom navigation bar. Create four items for
Bottom navigation bar with the information below.
"Caption": "Product"
"Image": "sap-icon://product"
"PageToOpen": "/ProductCatalog2/Pages/Empty.page"
"Caption": "Cart"
"Image": "sap-icon://cart"
"PageToOpen": "/ProductCatalog2/Pages/Empty.page"
"Caption": "Scan"
"Image": "sap-icon://bar-code"
"PageToOpen": "/ProductCatalog2/Pages/Empty.page"
"Caption": "Setting"
"Image": "sap-icon://settings"
"PageToOpen": "/ProductCatalog2/Pages/Empty.page"
Figure 5: Add Items to Bottom navigation bar
Change the color of Action Bar
Open
Styles/Styless.less. Add the value below to change the color of
Action Bar.
@darkblue: #3c289b;
ActionBar {
color: white;
background-color: @darkblue;
}
Figure 6: The content of Styless.less file
Change color of Toolbar
Copy the value below to
Styles/Styless.less file.
ToolBar {
color: white;
background-color: @darkblue;
bartintcolor: @darkblue; /* iOS */
}
Figure 7: The content of Styless.less file
Run the application. We will have the color of
ActionBar and
ToolBar is changed.
Figure 8: The application after changing style
Change the color of Search Bar
Open
Styles/Styles.less. Copy the value below to the file to change the color of
Search Bar.
ActionBarForSearch {
color: white;
background-color: @darkblue;
}
Run the application. We can see the color of
Search Bar is changed.
Figure 9: Search Bar after changing new style
Change the color of Bottom Navigation Bar
We will change the icons of
Bottom Navigation Bar to white when they are not selected. The icon will become blue when it is selected. Beside that we also change the background color of
Bottom Navigation Bar. Copy the value below to
Styles/Styles.less.
@selectedcolor: #0070F2;
MDTabStrip {
border-top-width: 1;
selected-item-color: @selectedcolor;
un-selected-item-color:white;
highlight-color: @selectedcolor;
font-family: "f72_bold";
}
MDTabStripItem {
background-color: @darkblue;
}
Figure 10: Styless.less
Run the application. We can see the color of Bottom Navigation Bar and icons inside changed.
Figure 11: Bottom navigation bar after changing style
Add
Action Bar Item to
Home page
Open
Pages/Home.page. Click on the title of Home page. Drag
Action Bar Item to the top right of the page. Click
Action Bar Item on
Home page. Set the value of Icon in
Property section to sap-icon://cart.
Figure 12: Add Action Bar Item to Home page
Change color of icons in application
We have just added an icon to
Action Bar. We can change the color of this icon by copy this value below to
Styles/Styles.less.
.sap-icons {
font-family: "SAP-icons";
font-weight: 900;
color: white;
}
Run the application. We can see the color of the icon inside the
Action Bar changed.
Figure 13: Action Bar Item after changing style
Conclusion
We have just finished changing the color of our application using Styles/Styles.less file. From this blog, we have learned how to change styles for ActionBar, ToolBar, SearchBar. Moreover, we are able to change styles for Bottom navigation bar and SAP icons.
Please let me know your feedback, questions in the comments. I would be happy to get back to you.
Other helpful links in the SAP Community please visit
https://blogs.sap.com/tags/668874921104038800958643358380369/