Apa itu Junior Framework
Junior Framework adalah kerangka kerja untuk membuat aplikasi seluler. Namun, sebelum membahas bagaimana strukturnya dan cara kerjanya, alangkah baiknya untuk memahami apa itu kerangka pengembangan aplikasi seluler. Setiap aplikasi yang ada membutuhkan struktur dasar untuk beroperasi di lingkungan tertentu. Struktur dasar ini diperoleh dari perpustakaan perangkat lunak, sehingga bertindak sebagai dukungan untuk membangun perpustakaan. Contoh kerangka kerja tersebut adalah junior.Dengan pemahaman ini, junior adalah kerangka kerja yang digunakan untuk membuat aplikasi seluler HTML 5. Ini digunakan dengan perpustakaan eksternal seperti modernizer, zepto flickable dan backbone. Bergantung pada yang digunakan, ini menghasilkan aplikasi seluler yang tampak asli. Kerangka pengembangan aplikasi seluler junior menggunakan komponen Ratchet CSS UI. Ini juga memiliki transisi CSS3 yang dioptimalkan untuk kinerja seluler. Oleh karena itu, ini adalah kerangka pengembangan aplikasi seluler yang luar biasa.
Biasanya, kerangka kerja aplikasi bertujuan untuk mengurangi masalah yang muncul selama pengembangan aplikasi. Oleh karena itu, kerangka kerja aplikasi harus memiliki kode yang akan dibagikan secara umum dalam aplikasi. Junior dikenal melakukan ini dengan sangat baik. Juga, baik untuk dicatat bahwa dalam proses pengembangan aplikasi, tekniknya tetap berorientasi pada keberatan. Ini berarti bahwa ketika kerangka kerja diimplementasikan, kelas-kelas yang ada dengan mudah membangun lebih banyak aplikasi.
Contoh Program yang menggunakan Junior Framework
Dalam modul ini, akan mencontohkan membuat aplikasi daftar ToDo sederhana dari awal menggunakan kerangka kerja Junior. Kami akan memiliki 2 layar, satu untuk menambahkan item daftar agenda dan yang kedua untuk melihat semua item yang ditambahkan.Pertama-tama silahkan download kode tutorial digithub berikut Untuk memulai, bisa download disini
atau klik link berikut https://github.com/sitepoint-editors/Junior_App_Part_1
Untuk memulai unduh atau tiru repositori Junior:
git clone https://github.com/justspamjustin/junior.git
Arahkan ke direktori junior dan instal dependensi yang diperlukan:
bower install
Setelah dependensi yang diperlukan diinstal, buka file index.html di folder junior:
Membuat tampilan Beranda
Mari mulai dengan membuat tampilan beranda untuk aplikas. Pada tampilan beranda, akan menampilkan semua item daftar tugas yang ditambahkan oleh pengguna. Tampilan beranda juga akan memiliki tombol untuk menambahkan item baru ke daftar. Kami akan menggunakan Ratchet untuk membuat UI. Buat file bernama app.html di dalam folder junior. Sertakan semua js dan css yang diperlukan dan tambahkan tag yang diharapkan Junior seperti yang ditunjukkan di bawah ini:
<html>
<head>
<title></title>
<link href="lib/stylesheets/ratchet.min.css" rel="stylesheet"></link>
<link href="src/stylesheets/junior.css" rel="stylesheet"></link>
<link href="docs/stylesheets/lib/font-awesome.css" rel="stylesheet"></link>
<link href="docs/stylesheets/style.css" rel="stylesheet"></link>
</head>
<body>
<div id="app-container">
<div id="app-main">
</div>
</div>
<script src="lib/javascripts/modernizr.custom.15848.js"></script>
<script src="lib/javascripts/zepto.min.js"></script>
<script src="lib/javascripts/zepto.flickable.min.js"></script>
<script src="lib/javascripts/lodash.min.js"></script>
<script src="lib/javascripts/backbone-min.js"></script>
<script src="src/javascripts/junior.js"></script>
<script src="docs/javascripts/app.js"></script>
</body>
</html>
Tambahkan file lain bernama app.js di dalam junior / docs / javascripts. Di sini kita akan menentukan rute dan tampilan kita, Sertakan dalam file app.html.
<script src="docs/javascripts/app.js"></script>
Mulai dengan membuat daftar. Tentukan html untuk daftar dan kemudian menggunakan lib junior untuk memperluas tampilan. Tambahkan di bawah ini ke app.js:
var HomeTemplate = [
'<nav class="bar bar-standard">',
'<header class="bar bar-nav">',
'<button id="btnAddTask" class="btn pull-right">Add Task</button>',
'<h1 class="title">ToDo List Junior App</h1>',
'</header>',
'</nav>',
'<div class="bar bar-standard bar-header-secondary">',
' <ul class="table-view">',
' <li class="table-view-cell">Item 1</li>',
' <li class="table-view-cell table-view-cell">Item 2</li>',
' <li class="table-view-cell">Item 3</li>',
' </ul>',
'</div>'
].join('\n');
Di atas telah menetapkan daftar sebagai variabel. Selanjutnya akan memperluasnya menggunakan junior untuk membuat tampilan. Tambahkan di bawah ini ke app.js:
var HomeView = Jr.View.extend({
render: function() {
this.$el.html(HomeTemplate);
return this; }
});
[/js]
Now since we created our view, we need to define a route for it.
[js]
var AppRouter = Jr.Router.extend({
routes: {
'home': 'home'},
home: function() {
var homeView = new HomeView();
this.renderView(homeView);
}
});
var appRouter = new AppRouter(); //init the router
Backbone.history.start(); //start backbone history
var HomeTemplate = [
'<nav class="bar bar-standard">',
'<header class="bar bar-nav">',
'<button id="btnAddTask" class="btn pull-right">Add Task</button>',
'<h1 class="title">ToDo List Junior App</h1>',
'</header>',
'</nav>',
'<div class="bar bar-standard bar-header-secondary">',
' <ul class="table-view">',
' <li class="table-view-cell">Item 1</li>',
' <li class="table-view-cell table-view-cell">Item 2</li>',
' <li class="table-view-cell">Item 3</li>',
' </ul>',
'</div>'
].join('\n');
var HomeView = Jr.View.extend({
render: function() {
this.$el.html(HomeTemplate);
return this;
}
});
var AppRouter = Jr.Router.extend({
routes: {
'home': 'home'
},
home: function() {
var homeView = new HomeView();
this.renderView(homeView);
}
});
var appRouter = new AppRouter();
Backbone.history.start();
Simpan app.js dan tambahkan ke file app.html # home dan akan melihat layar di bawah ini :
Selanjutnya akan membuat tampilan tugas menambahkan. Tampilan ini akan memungkinkan pengguna untuk menambahkan tugas ke daftar tugas yang ada.
Tambahkan variabel lain yang disebut AddTaskView ke app.js seperti yang ditunjukkan:
var AddTaskTemplate = [
'<nav class="bar bar-standard">',
'<header class="bar bar-nav">',
'<button id="btnBack" class="btn btn-link btn-nav pull-left">Back</button>',
'<h1 class="title">Add Task</h1>',
'</header>',
'</nav>',
'<div class="bar bar-standard bar-header-secondary">',
'<form>',
'<input type="text" placeholder="Full name">',
'<input type="search" placeholder="Search">',
'<textarea rows="3"></textarea>',
'<button class="btn btn-positive btn-block">Save Task</button>',
'</form>',
'</div>'
].join('\n');
Perpanjang tampilan menggunakan junior dan buat rute untuk tampilan Addtask (menggantikan variabel AppRouter saat ini):
//extended the view using junior lib
var AddTaskView = Jr.View.extend({
render: function() {
this.$el.html(AddTaskTemplate);
return this;
}
});
var AppRouter = Jr.Router.extend({
routes: {
'home': 'home',
'addTask': 'addTask' //added the route for Add Task View
},
home: function() {
var homeView = new HomeView();
this.renderView(homeView);
},
addTask: function() {
var addTaskView = new AddTaskView();
this.renderView(addTaskView);
}
});
Tetapkan tampilan default dengan menambahkan kode berikut:
Jr.Navigator.navigate('home',{
trigger: true
});
Sekarang cobalah menjelajah ke app.html dan seharusnya memuat tampilan beranda secara default. Buka app.html # addTask di browser Anda dan Anda seharusnya dapat melihat tampilan AddTask seperti yang ditunjukkan di bawah ini:
Selanjutnya, tambahkan acara klik ke tombol Tambahkan Tugas dan Kembali di HomeView dan AddTaskView masing-masing. Tentukan peristiwa klik untuk fungsi HomeView dan onClickAddTask untuk menavigasi ke AddTaskView. Ganti variabel HomeView saat ini dengan kode di bawah ini:
var HomeView = Jr.View.extend({
render: function(){
this.$el.html(HomeTemplate);
return this;
},
events: {
'click #btnAddTask': 'onClickAddTask'
},
onClickAddTask: function() {
Jr.Navigator.navigate('addTask',{
trigger: true,
animation: {
// This time slide to the right because we are going back
type: Jr.Navigator.animations.SLIDE_STACK,
direction: Jr.Navigator.directions.RIGHT
}
});
}
});
Demikian pula, kita perlu mendefinisikan acara klik lain untuk tombol Kembali di AddTaskView.Perbarui variabel AddTaskView ke ini:
var AddTaskView = Jr.View.extend({
render: function() {
this.$el.html(AddTaskTemplate);
return this;
},
events: {
'click #btnBack': 'onClickBack'
},
onClickBack: function() {
Jr.Navigator.navigate('home', {
trigger: true,
animation: {
type: Jr.Navigator.animations.SLIDE_STACK,
direction: Jr.Navigator.directions.LEFT
}
});
}
});
Coba tes dengan membuka app.html dan harus dapat menavigasi di antara tampilan menggunakan tombol Tambah task dan Kembali.
Sekian artikel kali ini tentang Apa itu Junior Framework dan contoh program semoga bermanfaat dan menambah pengetahuan. Salam BLogger
Baca Juga :
0 komentar:
Posting Komentar
Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel.
Gunakan tombol balas dibawah komentar terkait jika ingin membalas komentar agar komunikasi lebih terstruktur.
Klik untuk melihat kode :) :( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @-@ :-a :W *fck* :ngakak |o| :goodluck :smile