Enyo 2. Введение

Программирование для webOS, инструменты разработки, документация, обмен опытом

Enyo 2. Введение

Сообщение Архивариус » 15 ноя 2013, 20:40

Исторический экскурс :

Enyo — JavaScript framework.
Разрабатывался для замены Mojo (еще один JS framework) в недрах компаний Palm и HP.
Первые версии входили в состав webOS, позже выделился в отдельный проект.

Hello World

Самое простое приложение мы напишем в единственном файле, и назовем его «index.html»:

Код: Выделить всё
<<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Title</title>
    <link rel="stylesheet" href="http://enyojs.com/enyo-2.2.0/enyo.css"><!--Стили Enyo 2.2.0-->
    <script type="text/javascript" src="http://enyojs.com/enyo-2.2.0/enyo.js"></script><!--Сам Enyo 2.2.0-->
  </head>
  <body>

  <!--Наш Hello World-->
  <script type="text/javascript">
  enyo.kind({
    name: 'App',
    content: 'Hello World'
  });

  var app = new App()
  app.renderInto(document.body);
  </script>

  </body>
</html>


Что же делает этот код?
  • Оповещает Enyo о существовании типа с именем App (именно типа)
  • Создает экземпляр объекта с типом App
  • Выполняет метод renderInto которому в качестве аргумента передается DOM элемент

Если теперь проверить DOM с помощью любого инспектора можно наблюдать следующую картину:
Изображение

Что можно вынести из этого примера (хоть и не явно)?
  • Тип объекта доступен по глобальному имени после объявления (см. Отступление)
  • Данные записанные в «content» объекта Enyo будут размещены внутри тега

Отступление.

Говоря «Тип», я подразумеваю именно тип объекта, а не экземпляр. Т.е. мы можем создать множество экземпляров App и отрисовать в разные элементы DOM, при этом значения «content» могут быть свои в каждом экземпляре.

Откровенно говоря, для этой статьи элемент <link rel="stylesheet" href="http://enyojs.com/enyo-2.2.0/enyo.css"> не обязателен, но оставлен для наглядности.

Тут и далее мы будем производить манипуляции над следующим кодом:
Код: Выделить всё
enyo.kind({
  name: 'App',
  content: 'Hello World'
});


Вложенные элементы

И так, мы хотим вложить внутрь нашего div еще один элемент, например h1. Как быть?
Первое что приходит в голову:
Код: Выделить всё
enyo.kind({
  name: 'App',
  content: '<h1>Header</h1>'
});


НО! Результат оказался слегка не тем… Как же вложить элемент?

Для этого мы можем использовать поле components с типом Array в который и вложим новый элемент, при этом content родителя использоваться не будет, а переедет в дочерний объект:
Код: Выделить всё
enyo.kind({
  name: 'App',
  //content: '<h1>Header</h1>'
  components: [
    {content: 'Header'}
  ]
});


Если теперь проверить инспектором наш DOM мы получим следующую картину:
Изображение

Почти, но не то… мы хотели вложить h1, а вложили div… Исправим это?
Код: Выделить всё
enyo.kind({
  name: 'App',
  //content: '<h1>Header</h1>'
  components: [
    {tag: 'h1', content: 'Header'}
  ]
});


А вот это уже хорошо. НО! Если components имеет тип Array, значит ли это что объектов можно создать множество? Проверим:
Код: Выделить всё
enyo.kind({
  name: 'App',
  //content: '<h1>Header</h1>'
  components: [
    {tag: 'h1', content: 'Header'},
    {tag: 'p', content: 'Tag P'},
    {tag: 'span', content: 'Tag SPAN'},
    {content: 'No TAG'},
  ]
});


Результат:
Изображение

Интересно, а можно вложить элемент внутрь уже вложенного?
Код: Выделить всё
enyo.kind({
  name: 'App',
  //content: '<h1>Header</h1>'
  components: [
    {tag: 'h1', content: 'Header'},
    {components: [
      {content: 'No TAG1'},
      {content: 'No TAG2'}
    ]},
    {tag: 'span', content: 'Tag SPAN'},
    {content: 'No TAG'},
  ]
});


Да не проблема:
Изображение

Какие выводы можно сделать из этого примера?
  • Отображение объекта в DOM можно задавать через поле tag
  • Для вложения элементов необходимо использовать поле components которое имеет тип Array
  • Хоть и не явно, но для элементов без указания поля tag используется div

Стили

Предположим мы построили наш DOM, но как быть со стилями для элементов? Атрибуты id для них генерирует Enyo, а class или style вообще могут отсутствовать…
Знакомьтесь: поля classes и style! Оба имеют тип String и предназначены для стилизации компонентов:
Код: Выделить всё
enyo.kind({
  name: 'App',
  //content: '<h1>Header</h1>'
  components: [
    {tag: 'h1', content: 'Header'},
    {components: [
      {content: 'No TAG1', style: 'color: red;'},
      {content: 'No TAG2', classes: 'fake_class fake_class2'}
    ]},
    {tag: 'span', content: 'Tag SPAN'},
    {content: 'No TAG'},
  ]
});


Получаем:
Изображение

Какие выводы можно сделать из этого примера?
  • Для стилизации DOM элементов необходимо использовать поля classes и style

Атрибуты

Это все хорошо, но если мы используем свои framework'и которые ожидают атрибуты data-* внутри тега?
И это решаемо:
Код: Выделить всё
enyo.kind({
  name: 'App',
  //content: '<h1>Header</h1>'
  components: [
    {tag: 'h1', content: 'Header'},
    {components: [
      {content: 'No TAG1', style: 'color: red;',  attributes: {'data-fake': 'blabla', 'data-fake-new': 'qwe'}},
      {content: 'No TAG2', classes: 'fake_class fake_class2'}
    ]},
    {tag: 'span', content: 'Tag SPAN'},
    {content: 'No TAG'},
  ]
});


Результат:
Изображение

Какие выводы можно сделать из этого примера?
  • Для создания своих атрибутов необходимо использовать поле attributes

Вывод

В материале статье изложено исключительно отображение объектов Enyo в DOM.
Кроме явного создания DOM элементов, Enyo предоставляет множество методов по динамическому созданию/изменению объектов, доступ к json/jsonp web сервисам, UI, размещению элементов (layouts), кросс-(браузерным/платформенным) событиям и многое другое.
Если данный framework заинтересует сообщество — буду рад осветить работу с ним.

Ссылки

Сайт проекта
Поддерживаемые платформы
Enyo Community Gallery

Попробовать

Enyo API
Enyo на jsfiddle.net

(c) http://habrahabr.ru/post/202288/
Архивариус

 
Сообщения: 6269
Зарегистрирован: 29 июл 2010, 21:22
Благодарил (а): 698 раз.
Поблагодарили: 851 раз.
Телевизор: LG 24MT57S 55B7V

Вернуться в webOS - Разработка и создание программ



 


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0