Junior — это интерфейсная среда для создания мобильных приложений HTML 5. В зависимости от внешних библиотек, таких как modernizer , zepto , zepto flickable , lodash и backbone , он создает мобильные приложения с естественным внешним видом и интерфейсом с использованием компонентов пользовательского интерфейса Ratchet CSS .
Что мы будем создавать
В этом уроке мы создадим простое приложение со списком задач с нуля, используя инфраструктуру Junior. У нас будет 2 экрана, один для добавления элементов списка задач, а второй для просмотра всех добавленных элементов.
Исходный код этого руководства доступен на GitHub .
Начиная
Для начала загрузите или клонируйте репозиторий Junior:
git clone https://github.com/justspamjustin/junior.git Перейдите в junior каталог и установите необходимые зависимости:
bower install
После установки необходимых зависимостей откройте файл index.html в junior папке:
Создание Home view
Давайте начнем с создания домашнего представления для нашего приложения. На главном экране мы отобразим все элементы списка задач, добавленные пользователем. На главном экране также будет кнопка для добавления новых элементов в список. Мы будем использовать Ratchet для создания нашего пользовательского интерфейса.
Мы начнем с нуля. Создайте файл с именем app.html внутри junior папки. Включите все необходимые js и css и добавьте теги, которые ожидает Junior, как показано ниже:
<!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="lib/stylesheets/ratchet.min.css"> <link rel="stylesheet" href="src/stylesheets/junior.css"> <link rel="stylesheet" href="docs/stylesheets/lib/font-awesome.css"> <link rel="stylesheet" href="docs/stylesheets/style.css"> </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>
Добавьте еще один файл с именем app.js внутри junior/docs/javascripts . Здесь мы будем определять наши маршруты и представления, app.html его в файл app.html .
<script src="docs/javascripts/app.js"></script>
Загрузите и скопируйте хранимые таблицы стилей из dist/css в junior/lib/stylesheets/ , заменив те, которые уже есть.
Давайте начнем с создания списка. Мы определим html для списка, а затем используем младшую библиотеку для расширения представления. Добавьте ниже в 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');
Выше мы определили наш список как переменную. Далее мы расширим его, используя младший для создания представления. Добавьте ниже в 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); } });
Приведенная выше функция home отображает HomeView . Затем запустите маршрутизатор и запустите историю магистрали, добавив приведенный ниже app.js в app.js :
var appRouter = new AppRouter(); //init the router Backbone.history.start(); //start backbone history
Вот как должен выглядеть 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'); 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();
Сохраните app.js и перейдите к app.html#home и вы должны увидеть экран ниже:
Создание представления Добавить задачу
Далее мы будем создавать представление добавления задачи. Это представление позволит пользователям добавлять задачи в существующий список задач.
Добавьте еще одну переменную с именем AddTaskView в app.js как показано:
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');
Расширьте представление, используя младший, и создайте маршрут для представления Addtask (заменив текущую переменную AppRouter ):
//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); } });
Установите вид по умолчанию на home, добавив следующий код:
Jr.Navigator.navigate('home',{ trigger: true });
Теперь попробуйте app.html к app.html и он должен загрузить домашний вид по умолчанию. Откройте app.html#addTask в вашем браузере, и вы сможете увидеть представление AddTask как показано ниже:
Далее, давайте добавим события нажатия на кнопки « Add Task и « Back в HomeView и AddTaskView соответственно.
Определите события щелчка для функции HomeView и onClickAddTask чтобы перейти к AddTaskView . Замените текущую переменную HomeView с кодом ниже:
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 } }); } });
Точно так же нам нужно определить другое событие нажатия для кнопки « Back в AddTaskView .
Обновите переменную AddTaskView так:
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 } }); } });
Попробуйте app.html к app.html и вы сможете перемещаться между представлениями, используя кнопки « Add Task и « Back .
Вывод
В этом уроке. мы разработали простое приложение со списком дел с использованием инфраструктуры Junior . Мы использовали компоненты Ratchet для создания пользовательского интерфейса нашего мобильного приложения. В следующей части этого руководства мы реализуем необходимые функции для разработанных страниц.
Что ты думаешь о Джуниоре? Есть ли у него какие-либо преимущества перед многими другими мобильными средами пользовательского интерфейса?