Pemrograman Multiplatform
Nirkabel
Framework 7
Week 2
Framework 7
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.
The main approach of the Framework7 is to give you an opportunity to create
iOS & Android apps with HTML, CSS and JavaScript easily and clear
[Link]
[Link]
Setup
Download dari [Link]
Ekstrak framework 7 .zip ke hard disk
File contoh dapat ditemukan di folder dist
File template dapat ditemukan di folder examples
Integrating With Phonegap
Copy seluruh isi dist folder ke folder www dari
project phonegap
Jalankan project phonegap dan amati hasilnya
Problem Cross Origin Request
Dikarenakan framework 7 menggunakan ajax untuk
loading contentnya maka permasalahan cross origin
request muncul
Beberapa browser menolak permintaan ajax apabila
website tidak dideploy pada lingkungan web server
yang benar
Solusi: menggunakan firefox browser
Solusi: menginstall web server untuk chrome. Search
google “web server for chrome”
Problem Cross Origin Request
Jalankan app Web Server for Chrome, lalu pilih
folder dan arahkan ke folder phonegap www
Klik URL web server untuk mengakses project
phonegap
Mengubah Menjadi Material Desain
Secara default framework 7 project template menggunakan tampilan iOS
Untuk mengubah menjadi template material ganti css ios menjadi css material:
<link rel="stylesheet" href="css/[Link]">
<link rel="stylesheet" href="css/[Link]">
As you may see the Material layout is almost the same. It just has different CSS files related to Material theme,
and a bit different page structure where Navbar and Toolbar are inside of the page
Bottom Toolbar. In Material theme it should be inside of the page
Top Navbar. In Material theme it should be inside of the page
Set dynamicNavbar to false
Mengubah Menjadi Material Desain
How It Works
Jika user mengklik link, maka content
dari link tersebut akan diload melalui
[Link]
ajax pada view-main ini
<html>
<head></head> [Link]
<body>
<div class="panel”></div>
<div class=“views”>
[Link]
<div class="view view-main">
…..
</div>
</div>
<script js ….>
</body>
</html>
Initialize App
Setelah layout berhasil disetup dan Framework7 JS beserta CSS berhasil dipasang, maka langkah berikutnya
adalah melakukan inisialisasi app dan views. Semuanya dilakukan di file [Link]
Cek [Link] untuk setting initialize app yang lengkap
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. So it is some kind of app in
app. Such kind of functionality allows you easily manipulate each part of your app.
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
all visible views should within Views (<div class="views">)
Your main view should have additional view-main class. Why we need main view? By default all links
(which is not in any initialized view) will load pages in main view
[Link]
Page
Page in Framework7 has the same meaning as when you think about web pages.
<div class="pages"> is a wrapper container for pages within a single View. It is required because all page
transitions happen here.
[Link]
Page Callback
Jika ingin menambahkan code js pada sebuah page, maka harus dilakukan
pada [Link]
Semua code js yang ditulis pada page akan diabaikan
Contoh program berikut menampilkan alert apabila link about
([Link]) diklik
[Link]('about', function (page) {
// run createContentPage func after link was clicked
[Link]('Here goes alert text', 'Custom Title!');
});
Navbar
Navbar is a fixed (with Fixed and Through layout types) area at the top of a screen that contains Page title and
navigation elements.
Navbar has 3 main parts: Left, Center and Right. Each part may contain any HTML content, but it is
recommended to use them in the following way:
Left part is designed to be used with "back link", icons or with single text link.
Center part is used to display page title or tab links (buttons row/segmented controller).
Right part is for the same as the Left part.
[Link]
Navbar
<div class="navbar">
Back to
<div class="navbar-inner">
previous
<div class="left">
<a href="#" class="link icon-only back">
<i class="icon icon-back"></i>
</a>
</div>
<div class="center">About</div>
<div class="right">
<a href="#" class="link icon-only open-panel">
<i class="icon icon-bars"></i>
</a>
Open default panel
</div>
</div>
</div>
Layout Grid (Bootstrap alike)
Bagi yang terbiasa membuat layout dengan grid system ala bootstrap, Framework 7 telah mengakomodasinya dengan layout grid
Contoh:
<div class="row">
<!-- Each "cell" has col-[widht in percents] class -->
<div class="col-50">50%</div>
<div class="col-50">50%</div>
</div>
<div class="row">
<!-- Each "cell" has col-[widht in percents] class -->
<div class="col-33">33%</div>
<div class="col-33">33%</div>
<div class="col-33">33%</div>
</div>
Styling (Color Theme)
Framework7 comes with 10 ready to use default iOS color themes and 22 ready to use default
Material color themes.
But first of all, you need to include additional stylesheet to be able to use all these color themes:
<link rel="stylesheet" href="path/to/[Link]">
<link rel="stylesheet" href="path/to/[Link]">
Apply Styling (Color Theme)
It is easy to apply color themes. All you need is just to add theme-[color] class to the required
parent element. It could be body, view, page, navbar, toolbar, list-block, etc. For example:
<body class="theme-red">
<div class="page theme-green">
<div class="list-block theme-pink">
<div class="navbar theme-orange">
<div class="buttons-row theme-yellow">
Side Panel
To open panel we need to add "open-panel" class to any HTML element (prefered to link)
To close panel we need to add "close-panel" class to any HTML element (prefered to link)
If you have two panels in app, such link will open/close Left panel by default
If you want to specify which panel should opened/closed, then it could be done via additional data-
panel="left" attribute on this HTML element
Side Panel
Tambahkan program berikut untuk membuat left panel
<div class="panel panel-left panel-reveal">
“reveal” or “cover”?
<div class="content-block"> Efek animasi ketika panel terbuka.
<p>Left Panel content here</p> Try it both!
<p><a href="#" class="close-panel">Close me</a></p>
<p><a href="#" data-panel="right" class="open-panel">Open Right Panel</a></p>
</div>
</div>
Side Panel
Buka [Link] lalu tambahkan initialize app setting berikut ini:
var myApp = new Framework7({
swipePanel: 'left',
swipeBackPage: false
});
Settingan di atas membuat kita dapat melakukan swipe untuk
membuka/menutup panel
Modal
Cek [Link] untuk penjelasan penggunaan modal
Floating Action Button
Floating action button menjadi ciri khas material desain
Biasanya berwujud tombol lingkaran + di ujung kanan bawah. Jika diklik maka menjalankan aksi tertentu
(compose message, show popover menu, dst)
Cobalah Floating Action speed dial di [Link]
Cards
Cards, along with List View, is a one more great way to contain
and orginize your information. Cards contains unique related data,
for example, a photo, text, and link all about a single subject.
Cards are typically an entry point to more complex and detailed
information.
[Link]
Another Important Framework 7 Components
Accordion
Calendar
Tabs
Notifications
Picker (iOS)
Swiper
Any Questions