Download to read offline
![APP HTML LAYOUT – RTL SUPPORT Framework7 has full support for RTL (right to left) languages like Arabic and Hebrew. To enable RTL mode you simply need to include additional CSS file with RTL additions right after main Framework7's CSS library <link rel="stylesheet" href="path/to/framework7.[theme].rtl.min.css">](https://image.slidesharecdn.com/day5-uidevelopmentusingframework7-170501020243/75/Cordova-training-Day-5-UI-development-using-Framework7-13-2048.jpg)
Uploaded byBinu Paul
Cordova training : Day 5 - UI development using Framework7
This document provides an overview of using the Framework7 framework to build user interfaces for mobile apps. Framework7 allows developing hybrid mobile apps with native iOS and Android look and feel. It includes many pre-built user interface widgets like forms, text areas, lists, tabs and more. The document outlines how to set up the basic app layout and include the Framework7 CSS and JS files to add these UI components to apps using only HTML.
Cordova training : Day 5 - UI development using Framework7
- 1. CORDOVA TRAINING SESSION: 5- USER INTERFACE USING FRAMEWORK7
- 2. INTRODUCTION Framework7 -is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS & Android native look and feel. It is focused only on iOS and Google Material design to bring the best experience and simplicity. Framework7 provides ready to use UI elements and widgets for building mobile app screens.
- 3. INTRODUCTION Some ofthe popular widgets are: form elements, textarea, action sheet, list views, tabs, activity indicator etc.
- 4. INTRODUCTION In mostof the cases, we don’t require JavaScript for getting the widgets/UI components ready. Everything can be controlled using CSS and HTML itself.
- 5. PLATFORM SUPPORT Framework7will be a great solution to create iOS & Android apps with native look and feel. Framework7 supports: iOS – Native UI Google Material Design
- 6. GET STARTED Toget started with Framework7, we can download an install the files from the official GIT: https://github.com/nolimits4web/Framework7 Our mobile app will refer to the Framework7 CSS and JS files. The app need to init the Framwork7. This is usually done in the main.js file. var myApp = new Framework7();
- 7. APP HTML LAYOUT All Framework7 pages should follow a defined layout. Depending on the targeted platform, the CSS and JS files will vary. This is used to provide the native UI look and feel. If required, a generic custom view can also be define.
- 8. APP HTML LAYOUT <!DOCTYPEhtml> <html> <head> <!– Meta tags goes here --> <!-- Your app title --> <title>My App</title> </head> <body> </body> </html>
- 9. APP HTML LAYOUT– META TAGS <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
- 10. APP HTML LAYOUT– CSS INCLUDES <!-- Path to Framework7 Library CSS, iOS Theme --> <link rel="stylesheet" href="path/to/framework7.ios.min.css"> <!-- Path to Framework7 color related styles, iOS Theme --> <link rel="stylesheet" href="path/to/framework7.ios.colors.min.css"> <!-- Path to your custom app styles--> <link rel="stylesheet" href="path/to/my-app.css">
- 11. APP HTML LAYOUT– CSS INCLUDES <!-- Path to Framework7 Library CSS, Android Theme --> <link rel="stylesheet" href="path/to/framework7.material.min.css"> <!-- Path to Framework7 color related styles, Android Theme --> <link rel="stylesheet" href="path/to/framework7.material.colors.min.css"> <!-- Path to your custom app styles--> <link rel="stylesheet" href="path/to/my-app.css">
- 12. APP HTML LAYOUT– JS INCLUDES <!-- Path to Framework7 Library JS--> <script type="text/javascript" src="path/to/framework7.min.js"></script> <!-- Path to your app js--> <script type="text/javascript" src="path/to/my-app.js"></script>
- 13. APP HTML LAYOUT– RTL SUPPORT Framework7 has full support for RTL (right to left) languages like Arabic and Hebrew. To enable RTL mode you simply need to include additional CSS file with RTL additions right after main Framework7's CSS library <link rel="stylesheet" href="path/to/framework7.[theme].rtl.min.css">
- 14.
- 15. VIEWS Views (<div class="views">)- is the wrapper container for all visual views that stays visible most of time (not in modals, panels). Let's say that views is a main wrapper for body of your app. Only one "Views" element is allowed
- 16. VIEWS <div class="views"> <!-- Yourmain view --> <div class="view view-main"></div> <!-- Another view --> <div class="view another-view"></div> </div>
- 17. VIEW View (<div class="view">)- is a separate visual part of app with its own settings, navigation and history. Each view also may have different navbar and toolbar layouts, different styles.
- 18. VIEW <div class="view view-main"> <!--Navbar--> <!-- Pages --> <!-- Toolbar--> </div>
- 19. PAGES Page in Framework7has the same meaning as when you think about web pages. A page is defined inside a view. A view can have multiple pages.
- 20. PAGE <div class="pages"> <div class="page"data-page="home"> <div class="page-content"> page content goes here ... </div> </div> </div>
- 21. PAGES Page in Framework7has the same meaning as when you think about web pages. A page is defined inside a view. A view can have multiple pages.
- 22.
- 23. FORM ELEMENTS Form elementsallow you to create flexible and beautiful Form layout. The following form elements are supported: Text Select Textarea & Resizable Textarea Switch (Checkbox) Slider etc.
- 24. INPUT <div class="item-content"> <div class="item-media"><iclass="icon icon-form-name"></i></div> <div class="item-inner"> <div class="item-title label">Name</div> <div class="item-input"> <input type="text" placeholder="Your name"> </div> </div> </div>
- 25. EMAIL <div class="item-content"> <div class="item-media"><iclass="icon email"></i></div> <div class="item-inner"> <div class="item-title label">Email address</div> <div class="item-input"> <input type=“email" placeholder=“Email address"> </div> </div> </div>
- 26.
- 27. DATE <div class="item-content"> <div class="item-media"><iclass="icon icon-form-calendar"></i></div> <div class="item-inner"> <div class="item-title label">Date of birth</div> <div class="item-input"> <input type=“date" placeholder=“Date of birth "> </div> </div> </div>
- 28. SWITCH <div class="item-content"> <div class="item-media"><iclass="icon icon-form-toggle"></i></div> <div class="item-inner"> <div class="item-title label">Notify me</div> <div class="item-input"> <label class=“label-switch”><input type=“checkbox"><div class=“checkbox”/> </div> </div> </div>
- 29.