WEBIX BLOG

JavaScript-библиотека пользовательских компонентов Webix позволяет переопределить внешний вид многих элементов путем использования темплейтов. Например, во view:»tree» мы можем задать внешний вид элемента при помощи следующего темплейта:

Здесь вы можете видеть два главных компонента темплейтов Webix: вспомогательные средства и плейсхолдеры свойств. Вспомогательные средства — это предопределенные составляющие логики, которые отрисовывают некоторые общие элементы (иконка дерева в вышеприведенном примере). Плейсхолдеры свойств — это маркеры, которые будут заменены данными из связанного с ними объекта данных.

Современному менеджеру проектов необходим быстрый и удобный в использовании инструмент, который позволил бы ему управлять проектами: добавлять новые задания, устанавливать сроки для них, создавать различные отношения между установленными задачами и т.д.
Обновление от 8 октября, 2020

С выходом версии Webix 8.0, стал доступен собственный JavaScript Gantt Chart компонент. Теперь пользователи Webix могут использовать оригинальный Webix Gantt. Этот компонент создан по всем канонам Webix framework и предназначен для интеграции в любые бизнес-приложения, независимо от их архитектуры и системной платформы.

Если вы хотите добавить в ваше приложение JavaScript-чарты, обладающие основными функциями Pivot Table, для этого вы можете использовать Webix Pivot Chart. Этот многофункциональный компонент представляет ряды данных, категории и оси диаграмм, так же, как и виджет Charts JS, и, кроме того, обеспечивает вас интерактивными контролами фильтрования для быстрого анализа набора данных.

Все рабочие процессы связаны с разработкой планов и их выполнением. Для того, чтобы организовать события и деловые встречи, а также для управления и отслеживания текущих задач, менеджеры могут использовать интерактивный dhtmlxScheduler.

dhtmlxScheduler — это многофункциональный календарь событий, который позволяет добавлять в веб-приложение планировщик, подобный тому, который используется в Google. Он может создавать события, показывать расписание на день, неделю или месяц, отображать местоположение, связанное с событием календаря, а также отображать повторяющиеся действия.

Отличная новость! Вы можете легко использовать Webix с вышеуказанным планировщиком. Такая интеграция наделит ваши веб-приложения многочисленными свойствами Scheduler в дополнение к замечательным функциям Webix.

Более того, вам не нужно писать огромное количество кода, для того, чтобы добавить Scheduler в приложение Webix. Scheduler можно использовать как любой другой компонент Webix.

Одним из новейших и действительно классных API в настоящее время является WebSockets API. Данный интерфейс позволяет создавать приложения, работающие в режиме реального времени, где пользователи могут совместно работать, получать уведомления и обновления данных, всякий раз, когда данные изменяются. Данная статья призвана показать вам как можно создать простой веб-чат, используя Webix и WebSockets API.

Веб-чат — простейшее среди приложений, работающих в режиме реального времени. Вы можете взять исходный код на github.

Ни для кого ни секрет, что чарт является удобным инструментом для систематизации информации и управления ей. Чарты способны представлять огромные объемы данных в простом схематичном виде. Библиотека Webix стремится следовать современным тенденциям и предлагает возможность интеграции с популярными чартами таких Javascript библиотек, как D3, Raphael and Sigma и JustGage. В то же время, у Webix есть коллекция собственных JavaScript графиков.

Инициализация чарта на странице

Вам не потребуется писать длинный код, чтобы добавить сторонний чарт в приложение Webix, поскольку компоненты Webix уже содержат все необходимое.

Тем не менее, эти компоненты не включены в стандарный пакет библиотеки, поэтому вам нужно загрузить JS файл необходимого компонента из репозитория вспомогательных библиотек Webix.

Этот специальный javascript файл подключит ваше приложение к выбранному чарту и автоматически загрузит все необходимые файлы чарта.

Возможность размещения текстового онлайн-редактора на странице, без сомнения, нужная и полезная вещь. Библиотека Webix предлагает простое решение этой задачи, требующее лишь нескольких строк кода.
В настоящее время Webix поддерживает такие популярные редакторы, как Mercury, NicEdit, Tinymce, CodeMirror и CKEditor.

При создании веб-страницы часто требуется добавить механизм поиска места на карте. Webix предлагает простое и элегантное решение для встраивания в веб-приложение географических карт онлайн.

Эта статья расскажет вам, как добавить популярные веб-карты, такие как Google, Nokia, OpenStreet и Yandex maps в приложение Webix, используя всего несколько строк кода.

Создание виджета карты

Прежде всего, из открытого репозитория вспомогательных компонентов Webix нужно загрузить специальный JavaScript файл, который поможет встроить карту в веб-приложение. Этот файл соединит ваше приложение со сторонними библиотеками и файлами, необходимыми для выбранной карты без непосредственного подключения к ним. Обратите внимание, что эти расширения не входят в стандартный пакет библиотеки.

После загрузки необходимого файла с JS кодом, нужно подключить ссылку на него в тегвашего документа. Например, чтобы встроить в веб-страницу карту Google Map, необходимо скачать файл “googlemap.js” и подключить его с помощью строки кода ниже:

В чем их польза

В HTML5 имеется множество способов размещения элементов на странице. Однако, во время создания веб-приложений, мы по-прежнему можем столкнуться с задачами, решить которые только с помощью чистого HTML и CSS невозможно. К примеру, существует проблема использования процентных и фиксированных значений в одной строке. Еще одна задача, не дающая покоя разработчикам, — это создание столбцов одной высоты. Довольно многообещающим решением таких проблем выглядит спецификация CSS Grid, однако, на данный момент она находится в стадии разработки и реализована только в Internet Explorer. Если же от лайаута (layout) вам нужно добиться большей гибкости прямо сейчас, вам помогут Webix Layouts.

Для чего это нужно

Среди современных веб-приложений часто встречаются достаточно сложные по структуре. Нередко при создании одной страницы могут использоваться данные из множества источников, часть из которых — это сторонние библиотеки или схожие приложения, находящиеся на другом сайте. И вот здесь появляется проблема. Страница, расположенная на одном домене, не может получить доступ к данным с другого домена.

Например, если ваша страница расположенная на http://app.mydomain.com попытается загрузить данные с http://data.mydomain.com — загрузка данных не выполнится. Любой браузер блокирует такой тип загрузки данных из соображений безопасности. Более того, запрос к другому порту, например к http://app.mydomain.com:5000, будет также заблокирован. Два URL, указывающие на один и тот же домен, но на различные порты воспринимаются как URL, указывающие на различные домены.