3.1 Основные принципы

Визуальный редактор Bubble основан на принципе What You See Is What You Get (WYSIWYG - что ты видишь, то и получишь). Вы можете располагать элементы как угодно с точностью до пикселя, и ваше приложение так и будет выглядеть во время работы. Существуют несколько ключевых вещей, которые нужно иметь в виду при создании интерфейса.

Отношения предок-потомок

Некоторые элементы могут быть контейнерами (они находятся в разделе "контейнер"/"container" на панели "Новый элемент"/"New Element") и у всех элементов Bubble есть родительский элемент. Страница сама по себе - родительский элемент верхнего уровня, и она является родителем для всех элементов на странице. Чтобы нарисовать элемент внутри контейнера, наведите курсор на контейнер и вы увидите, что его границы выделились красным. Когда элемент находится внутри контейнера, его поведение соответствует родительскому элементу и в редакторе и в рабочем режиме. Например, если вы двигаете элементы в редакторе, потомок будет находиться на том же месте относительно родителя. В рабочем режиме, если вы скрываете родителя, любой элемент внутри контейнера соответственно будет скрытым. Перетаскивание элемента позволяет изменить его родительский элемент.

Дерево элементов слева позволяет вам видеть структуру страницы, а также показывать/скрывать элементы для редактирования и лучшей их организации. Многие элементы по умолчанию скрыты, а если вы хотите их отобразить чтобы внести изменения, нужно нажать на иконку глаза чтобы показать элемент (также отобразятся все скрытые родительские элементы, если это необходимо).

У дерева элементов два режима. Вы можете либо отобразить все элементы на странице в виде дерева с предками и потомками, либо показывать только те элементы, которые можно скрыть. Скрываемые элементы - это те, которые при загрузке страницы отображаются скрытыми, то есть для них вы поставили галочку "Этот элемент невидим при загрузке страницы"/"This is element is visible on page load". Другими словами, в режиме "показывать только скрываемые элементы"/"only show hideable elements" вы увидите список только тех элементов, которые невидимы, когда Редактор загружен. Этот режим наиболее полезен, когда вам нужно просмотреть все невидимые элементы и изменить их свойства, а другой режим полезен, чтобы увидеть всю страницу целиком.

Абсолютное позиционирование

Элементы Bubble позиционируются абсолютно, используя координаты (х,у), которые определяют позицию элемента относительно предка. Таким образом, у вас будет полная свобода расположения элементов где угодно на странице. Это отличается от многих визуальных html/css редакторов, которые позиционируют элементы внутри некоторых ячеек на странице. А так как предоставляется больше свободы, это означает, что вам нужно быть внимательными, создавать понятный дизайн и понимать адаптивные настройки Bubble.

Адаптивный дизайн

Страницы в Bubble являются адаптивными. Другими словами, они подстраиваются под ширину страницы, чтобы хорошо выглядеть на мобильных устройствах. Так как можно настраивать позиции элементов с точностью до пикселя, вы можете задать настройки, чтобы ваша страница правильно реагировала на изменение ширины. Это описано в главе "Создание адаптивных страниц"(!!!ЛНК!!!)

Редактирование элементов

Для добавления элемента на страницу нужно кликом по левой панели "Новые элементы"/"New Element" выбрать тип элемента, который нужно добавить, а затем нарисовать его на странице (а не перетаскивать его с панели на страницу). Когда элемент нарисован, вы можете перемещать его с помощью перетаскивания и изменять его свойства через двойной клик. За некоторыми исключениями, большинство элементов можно перетаскивать мышью и менять их размеры. Всплывающие окна - это модальные контейнеры, которые показываются поверх страницы и всегда находятся в её центре. Поэтому они не перетаскиваются.

Когда вы дважды кликаете по элементу, открывается Редактор Свойств/"Property Editor", который позволяет изменять поля элементов. В этом руководстве не описан каждый элемент и каждый возможный вариант использования и поля, которые в них используются. Пожалуйста, воспользуйтесь разделом справочника "Элементы" для получения информации о каждом элементе.

Основные поля стилей

Так как у каждого элемента есть свой набор полей (например, цвет текста, которым заполнено поле ввода текста -- для подробной информации смотри справочник по каждому элементу), большинство элементов Bubble имеют общие свойства оформления. Эти свойства могут использоваться для смены фона, границ, теней, шрифта и т.д. Вы можете посмотреть описание каждого свойства в соответствующем разделе(!!!ЛНК!!!) справочника.

Большинство этих основных свойств являются частью "Стилей"/"Styles". Стили рассматриваются в одном (!!!ЛНК!!!) из параграфов этой главы, они позволяют задать некоторые общие визуальные свойства элементов одного типа.

Типы элементов

Раздел Элементы (!!!ЛНК!!!) в справочнике описывает каждый тип элемента. Тем не менее, есть несколько основных категорий. Элементы в Bubble разделяются на 3 основных категории: Визуальные элементы, Контейнеры и Формы ввода.

• Визуальные элементы это элементы, которые отображают какую-либо информацию или элементы интерфейса, с которыми пользователь может взаимодействовать с помощью мышки. Как бы то ни было, пользователи не могут вводить информацию с клавиатуры.

• Контейнеры - это элементы, которые описаны выше (!!!ЛНК!!!). Их видимость влияет на видимость их потомков и им может быть назначен тип содержимого (смотрите соответствующий раздел главы "Работа с данными").

• Формы ввода - это, элементы, которые пользователь использует для ввода информации. Наиболее простой вариант - форма для ввода текста, но также есть и другие примеры с использованием слайдеров, элементов загрузки файлов, чекбоксы и другие.

Использование повторяющихся элементов

Повторяющиеся элементы - это способ создать группы элементов, которые могут быть использованы более чем на одной странице. Это понятие рассматривается во всех деталях в соответствующем разделе (!!!ЛНК!!!) главы, но вот как их можно использовать при создании своей страницы.

Если вы хотите иметь всплывающее окно логина на нескольких страницах, вам нужно создать её однажды и повторно использовать. Аналогично, если вы хотите единую шапку и подвал на всех страницах, вам нужно создать их единожды. Вы должны создать максимальное количество повторяющихся элементов, так как это сделает приложение более легким и его будет проще поддерживать. Когда повторяющийся элемент создан, он становится новым типом элементов, который вы можете добавить на вашу страницу.