Бэм верстка: HTML / Методология / БЭМ |

Posted:

Май 25, 2023

Comments:

Бэм верстка: HTML / Методология / БЭМ

Содержание

Быстрый старт / Методология / БЭМ

Введение

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке.
В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

Содержание

Блок
Элемент
Когда создавать блок, когда — элемент?
Модификатор
Микс
Файловая структура

Блок

Функционально независимый компонент страницы, который может быть повторно использован. В HTML блоки представлены атрибутом class.

Особенности:

Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

Пример

<!-- Верно.  Семантически осмысленный блок `error` -->
<div></div>
<!-- Неверно. Описывается внешний вид -->
<div></div>

Блок не должен влиять на свое окружение, т. е. блоку не следует задавать внешнюю геометрию (в виде отступов, границ, влияющих на размеры) и позиционирование.
В CSS по БЭМ также не рекомендуется использовать селекторы по тегам или id.

Таким образом обеспечивается независимость, при которой возможно повторное использование или перенос блоков с места на место.

Принцип работы с блоками

Вложенность

Блоки можно вкладывать друг в друга.
Допустима любая вложенность блоков.

Пример

<!-- Блок `header` -->
<header>
    <!-- Вложенный блок `logo` -->
    <div></div>
    <!-- Вложенный блок `search-form` -->
    <form></form>
</header>

Элемент

Составная часть блока, которая не может использоваться в отрыве от него.

Особенности:

Название элемента характеризует смысл («что это?» — «пункт»: item, «текст»: text), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).
Структура полного имени элемента соответствует схеме: имя-блока__имя-элемента. Имя элемента отделяется от имени блока двумя подчеркиваниями (__).

Пример

<!-- Блок `search-form` -->
<form>
    <!-- Элемент `input` блока `search-form` -->
    <input>
    <!-- Элемент `button` блока `search-form` -->
    <button>Найти</button>
</form>

Принципы работы с элементами

Вложенность
Принадлежность
Необязательность

Вложенность

Элементы можно вкладывать друг в друга.
Допустима любая вложенность элементов.
Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2.

Пример

<!--
    Верно. Структура полного имени элементов соответствует схеме:
    `имя-блока__имя-элемента`
-->
<form>
    <div>
        <input>
        <button>Найти</button>
    </div>
</form>
<!--
    Неверно. Структура полного имени элементов не соответствует схеме:
    `имя-блока__имя-элемента`
-->
<form>
    <div>
        <!--
            Рекомендуется:
            `search-form__input` или `search-form__content-input`
        -->
        <input>
        <!--
            Рекомендуется:
            `search-form__button` или `search-form__content-button`
        -->
        <button>Найти</button>
    </div>
</form>

Имя блока задает пространство имен, которое гарантирует зависимость элементов от блока (block__elem).

Блок может иметь вложенную структуру элементов в DOM-дереве:

Пример

<div>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</div>

Однако эта же структура блока в методологии БЭМ всегда будет представлена плоским списком элементов:

Пример

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

Это позволяет изменять DOM-структуру блока без внесения правок в коде каждого отдельного элемента:

Пример

<div>
    <div>
        <div></div>
    </div>
    <div></div>
</div>

Структура блока меняется, а правила для элементов и их названия остаются прежними.

Принадлежность

Элемент — всегда часть блока и не должен использоваться отдельно от него.

Пример

<!-- Верно. Элементы лежат внутри блока `search-form` -->
<!-- Блок `search-form` -->
<form>
    <!-- Элемент `input` блока `search-form` -->
    <input>
    <!-- Элемент `button` блока `search-form` -->
    <button>Найти</button>
</form>
<!-- Неверно.  Элементы лежат вне контекста блока `search-form` -->
<!-- Блок `search-form` -->
<form>
</form>
<!-- Элемент `input` блока `search-form` -->
<input>
<!-- Элемент `button` блока `search-form` -->
<button>Найти</button>

Необязательность

Элемент — необязательный компонент блока. Не у всех блоков должны быть элементы.

Пример

<!-- Блок `search-form` -->
<div>
    <!-- Блок `input` -->
    <input>
    <!-- Блок `button` -->
    <button>Найти</button>
</div>

Когда создавать блок, когда — элемент?

Создавайте блок

Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы.

Создавайте элемент

Если фрагмент кода не может использоваться самостоятельно, без родительской сущности (блока).

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

Модификатор

Cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Особенности:

Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: size_s, «тема»: theme_islands), состояние («чем отличается от прочих?» — «отключен»: disabled, «фокусированный»: focused) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: directions_left-top).
Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).

Типы модификаторов

Булевый

Используют, когда важно только наличие или отсутствие модификатора, а его значение несущественно. Например, «отключен»: disabled. Считается, что при наличии булевого модификатора у сущности его значение равно true.
Структура полного имени модификатора соответствует схеме:
- имя-блока_имя-модификатора;
- имя-блока__имя-элемента_имя-модификатора.

Пример

<!-- Блок `search-form` имеет булевый модификатор `focused` -->
<form>
    <input>
    <!-- Элемент `button` имеет булевый модификатор `disabled` -->
    <button>Найти</button>
</form>

Ключ-значение

Используют, когда важно значение модификатора. Например, «меню с темой оформления islands»: menu_theme_islands.
Структура полного имени модификатора соответствует схеме:
- имя-блока_имя-модификатора_значение-модификатора;
- имя-блока__имя-элемента_имя-модификатора_значение-модификатора.

Пример

<!-- Блок `search-form` имеет модификатор `theme` со значением `islands` -->
<form>
    <input>
    <!-- Элемент `button` имеет модификатор `size` со значением `m` -->
    <button>Найти</button>
</form>
<!--
    Невозможно одновременно использовать два одинаковых модификатора
    с разными значениями
-->
<form>
    <input>
    <button>
        Найти
    </button>
</form>

Принципы работы с модификаторами

Модификатор нельзя использовать самостоятельно

С точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента. Модификатор должен изменять вид, поведение или состояние сущности, а не заменять ее.

Пример

<!-- Верно. Блок `search-form` имеет модификатор `theme` со значением `islands`-->
<form>
    <input>
    <button>Найти</button>
</form>
<!-- Неверно. Отсутствует модифицируемый класс `search-form` -->
<form>
    <input>
    <button>Найти</button>
</form>

Зачем в именах модификаторов и элементов указывать имя блока?

Микс

Прием, позволяющий использовать разные БЭМ-сущности на одном DOM-узле.

Миксы позволяют:

совмещать поведение и стили нескольких сущностей без дублирования кода;
создавать семантически новые компоненты интерфейса на основе имеющихся.

Пример

<!-- Блок `header` -->
<div>
    <!-- К блоку `search-form` примиксован элемент `search-form` блока `header`-->
    <div></div>
</div>

В данном примере мы совместили поведение и стили блока search-form и элемента search-form блока header.
Такой подход позволяет нам задать внешнюю геометрию и позиционирование в элементе header__search-form, а сам блок search-form оставить универсальным.
Таким образом, блок можно использовать в любом другом окружении, потому что он не специфицирует никакие отступы. Это позволяет нам говорить о его независимости.

Файловая структура

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

Особенности:

Один блок — одна директория.
Имена блока и его директории совпадают. Например, блок header — директория header/, блок menu — директория menu/.
Реализация блока разделяется на отдельные файлы-технологии. Например, header.css, header.js.
Директория блока является корневой для поддиректорий соответствующих ему элементов и модификаторов.
Имена директорий элементов начинаются с двойного подчеркивания (__). Например, header/__logo/, menu/__item/.
Имена директорий модификаторов начинаются с одинарного подчеркивания (_). Например, header/_fixed/, menu/_theme_islands/.
Реализации элементов и модификаторов разделяются на отдельные файлы-технологии. Например, header__input.js, header_theme_islands.css.

Пример

search-form/                           # Директория блока search-form
    __input/                           # Поддиректория элемента search-form__input
        search-form__input.css         # Реализация элемента search-form__input
                                       # в технологии CSS
        search-form__input.js          # Реализация элемента search-form__input
                                       # в технологии JavaScript
    __button/                          # Поддиректория элемента search-form__button
        search-form__button. css
        search-form__button.js
    _theme/                            # Поддиректория модификатора
                                       # search-form_theme
        search-form_theme_islands.css  # Реализация блока search-form, имеющего
                                       # модификатор theme со значением islands
                                       # в технологии CSS
        search-form_theme_lite.css     # Реализация блока search-form, имеющего
                                       # модификатор theme со значением lite
                                       # в технологии CSS
    search-form.css                    # Реализация блока search-form
                                       # в технологии CSS
    search-form.js                     # Реализация блока search-form
                                       # в технологии JavaScript

Такая файловая структура позволяет легко поддерживать и повторно использовать код.

Разветвленная файловая структура предполагает, что в production код будет собираться в общие файлы проекта.

Придерживаться рекомендуемой файловой структуры не обязательно. Вы можете использовать любую альтернативную структуру проекта, соответствующую принципам организации файловой структуры БЭМ, например:

Flat
Flex

что это за методология веб-разработки, HTML-верстка по БЭМ

БЭМ — компонентный подход к веб-разработке, в основе которого лежит принцип разделения интерфейса на независимые блоки, а также набор интерфейсных библиотек, фреймворков и вспомогательных инструментов. Расшифровывается как «Блок, Элемент, Модификатор».

Методология БЭМ была разработана специалистами Яндекса и быстро получила международное признание: в отличие от других CSS-концепций, БЭМ также работает с JavaScript, одним из наиболее популярных решений для создания архитектуры веб-приложений.

В основе БЭМ — соглашение по именованию, которое делает имена CSS-классов максимально информативными для разработчиков и позволяет многократно использовать компоненты. Подход упрощает командную работу, масштабирование и поддержку проектов.

Зачем нужен БЭМ

Соблюдение правил методологии ускоряет процесс разработки:

упрощает код и облегчает рефакторинг;
избавляет от необходимости комментировать код, поскольку назначение CSS-селекторов становится очевидным по названиям;
позволяет использовать одни и те же фрагменты кода многократно, в том числе на одном DOM-узле;
предотвращает взаимное влияние компонентов друг на друга.

Проиллюстрируем все преимущества БЭМ на примере. Предположим, что вверху страницы есть навигационное меню, в котором используются имена CSS-классов item, item active, link:

<ul class=»nav»>
<li class=»item active»><a class=»link»>Главная</a></li>
<li class=»item»><a class=»link»>Портфолио</a></li>
<li class=»item»><a class=»link»>Контакты</a></li>
</ul>

CSS-стили для элементов могут выглядеть так:

. item
{
margin: 5px 5px;
color: #fff;
background-color: #000;
font-weight: bold;
}
.active
{
background-color: #666666;
}

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

Ожидание vs. реальность: стили смешались, пункты бокового меню отображаются только при наведении курсора.

Методология верстки БЭМ решает эту проблему:

все компоненты и их составляющие получают уникальные имена;
иерархия связей внутри блоков становится очевидной;
при изменении стилей отдельных классов не нужно просматривать всю структуру проекта.

Для иллюстрации принципов БЭМ вернемся к предыдущему примеру. Класс nav будет обозначать название блока верхнего меню, а имена остальных элементов мы изменим так, чтобы была очевидна их принадлежность к nav:

item станет nav__item;
link — nav__link;
active — nav__item_active.

Фрагмент HTML-кода, описывающий верхнее меню, теперь выглядит так:

<ul class=»nav»>
<li class=»nav__item nav__item_active»><a class=»nav__link»>Главная</a></li>
<li class=»nav__item»><a class=»nav__link»>Портфолио</a></li>
<li class=»nav__item»><a class=»nav__link»>Контакты</a></li>
</ul>

CSS-стили для элементов меню примут такой вид:

.nav__item
{
margin: 5px 5px;
color: #fff;
background-color: #000;
font-weight: bold;
}
.nav__item_active
{
background-color: #666666;
}

Благодаря методологии составные блоки страницы становятся изолированными, стиль элементов одного блока не может повлиять на другой. Единственный недостаток подхода — длинные имена классов. Это увеличивает и объем кода, и время на его написание. Однако для решения проблемы в распоряжении разработчиков есть несколько эффективных инструментов:

утилита qzip для сжатия кода;
автодополнение кода в IDE или редакторе;
использование шаблонизаторов и CSS-препроцессоров для автоматического добавления префиксов.

Основные понятия БЭМ

Эффективность БЭМ-верстки достигается благодаря разделению кода:

на независимые блоки;
элементы (дочерние компоненты) блока;
модификаторы блоков и элементов.

Рассмотрим блоки, элементы и модификаторы подробнее.

Блок

Блок — логически и функционально независимый компонент страницы: меню, боковая панель, карусель, шапка сайта и так далее. Блок включает в себя шаблоны (Pug, Handlebars) и CSS-стили, скрипты JavaScript, документацию в формате XML или Markdown, другие необходимые для реализации технологии.

Шапка сайта инкапсулирует навигационное меню, логотип, поиск и авторизацию

Независимость блоков позволяет свободно перемещать их в пределах страницы и всего проекта. Составные части блока, например формы авторизации и поиска, можно поменять местами: они будут корректно работать и сохранят внешний вид. Внесение изменений в CSS- или JavaScript-скрипты форм не потребуется.

Благодаря верстке по БЭМ на страницах можно размещать сколько угодно экземпляров одного и того же блока.

Методология упрощает многократное использование компонентов

Элемент

Элемент — неотделимая составная часть блока. Особенности элементов:

они не существуют и не используются вне блока;
принадлежат только одному блоку;
могут вкладываться друг в друга.

Вкладка принадлежит блоку меню и не может использоваться вне блока

Это необязательные компоненты: небольшие блоки могут обходиться без вложенных элементов. Методология не устанавливает жестких правил в отношении того, когда разработчику следует использовать блок, а когда — элемент. Блоки, как правило, нужно создавать в том случае, если фрагмент кода может использоваться самостоятельно. Зависимым фрагментам кода (элементам) необходима родительская сущность — блок.

Рекомендации БЭМ-верстки касаются смысла и структуры наименования элементов:

Название элемента должно характеризовать его смысл, роль — item («пункт меню»), link («ссылка»).
Структура имени элемента должна соответствовать схеме имя-блока__имя-элемента — имя элемента отделяется двойным подчеркиванием.

Модификатор

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

Внешний вид верхнего и нижнего меню заметно отличается.

Модификаторы делятся на два типа:

Булевые. Применяют, когда факт наличия модификатора важнее, чем его значение. Например, если элемент имеет модификатор disabled («отключен»), значение по умолчанию равно true. Структура имени при использовании булевого модификатора выглядит так: имя-блока__имя-элемента_имя-модификатора.
Ключ-значение. Используют в тех случаях, когда значение модификатора важно. Например, если применяется блок с определенной темой оформления: search-form_theme_forest. Структура наименования модификатора элемента соответствует схеме: имя-блока__имя-элемента_имя-модификатора_значение-модификатора.

Модификаторы могут изменяться в процессе работы блока в зависимости от запросов из других блоков или как реакция на DOM-события. Например, если пользователь введет неверные данные в форму авторизации и нажмет кнопку «Войти», DOM-событие click («Нажатие») изменит свойство блока с сообщением об ошибке с невидимого на видимое.

Наличие модификаторов у элементов и блоков — опционально, количество — не ограничено. Следует помнить, что блоку и его элементу нельзя присваивать разные значения одного и того же модификатора. По правилам БЭМ, название модификатора должно характеризовать:

внешний вид блока или элемента;
состояние компонента;
поведение.

Традиционно имя модификатора отделяют от имени блока или элемента одним подчеркиванием (_). В качестве альтернативы также используют двойной дефис (—).

Миксы

Миксом в терминологии БЭМ называется способ использования разных БЭМ-сущностей на одном DOM-узле таким образом, чтобы не возникало дублирования кода. С помощью миксов можно:

задавать одинаковое форматирование для различных элементов дизайна;
создавать новые компоненты интерфейса на основе имеющихся;
совмещать поведение и стили нескольких компонентов.

Пример БЭМ-микса — смешивание свойств ссылок на боковой панели sidebar и элемента item из блока основного меню main-menu:

Файловая структура

Для организации проектов методология БЭМ предусматривает компонентный подход: все блоки, элементы и модификаторы реализуются в независимых файлах-технологиях — например, footer.css, footer.js. Это позволяет:

подключать компоненты опционально;
разрабатывать блоки проекта независимо друг от друга;
переносить блоки между проектами.

Каждый блок хранится в отдельной директории; в поддиректориях располагаются элементы, модификаторы и все дополнительные ассеты —изображения, видео, шрифты, скрипты.

БЭМ предоставляет фронтенд-разработчикам комплексное решение для создания архитектуры проекта и организации рабочего процесса. Однако БЭМ не единственная методология — профессиональные веб-разработчики используют и другие решения для оптимизации CSS и переиспользования компонентов:

OOCSS;
SMACSS;
SUIT CSS;
Systematic CSS.

Каждая из этих концепций обладает набором собственных преимуществ и подходит для реализации определенных проектов.

Новый макет: Дорожная карта BAM

Автор: Джеймс
Everingham
Обновлено: 28 апреля 1998 г.

ред. примечание: BAM расшифровывается как «Born Again Modularization», а не персонаж Флинтстоунов.

Обзор

Цель модуляризации BAM
усилие состоит в том, чтобы разделить ключевые модули для совместного использования как NGLayout, так и
кодовая база 5. 0. Усилия BAM обусловлены необходимостью интеграции
новый движок NGLayout, достигая более удобного и модульного
архитектура. Это будет достигнуто за счет стратегического
области: библиотека поддержки сети (netlib), механизм компоновки
(макет) и библиотеку изображений (imglib). Усилия по сетевой библиотеке
потребует разбить текущую реализацию на несколько различных
DLL и библиотеки, каждая из которых будет предоставлять один или несколько компонентов XPCOM.
Усилия по макету включают определение набора специфичных для макета API-интерфейсов XPCOM.
(веб-виджет) и интеграция движка NGLayout в текущую версию 5.0.
база исходного кода. Разделение Imglib включает определение imglib
Интерфейс XPCOM и реинтеграция обратно в базу исходного кода 5.0.

Основные компоненты

Сетевая библиотека

DLL Engine Netlib
Эта DLL будет содержать основную сеть
функциональность, включая сетевые утилиты, необходимые всем потребителям
из Netlib. Новый код, такой как NGLayout, будет программировать непосредственно на
новые API-интерфейсы XPCOM, предоставляемые движком.
Статическая библиотека клиента Netlib
Эта библиотека будет содержать устаревшие
код, необходимый клиенту Mozilla для использования Netlib. В конечном счете,
этот код должен уменьшаться по мере того, как все больше и больше клиентов перерабатываются для
использовать новые API-интерфейсы XPCOM…
Потоки DLL
Эта DLL будет содержать различные
реализации потока, используемые Netlib…
DLL протокола Netlib
Протоколы, поддерживаемые Netlib
будет разбит на отдельные динамически загружаемые библиотеки DLL. Это будет
разрешить динамическое добавление новых протоколов.

Реализация

Во время процесса BAM два кода
базы будут в следующих состояниях:

Модульная компоновка

5. 0 Исходная база	Исходная база NGLayout
интегрированная библиотека образов интегрированная сетевая библиотека интегрированный макет	интегрирована в автономную тестирование модульная сетевая библиотека модульная библиотека imglib
модульная библиотека изображений интегрированная сетевая библиотека интегрированный макет	интегрирована в автономную тестирование модульная сетевая библиотека модульный imglib
модульная библиотека изображений модульная сетевая библиотека интегрированный макет	интегрирована в автономную набор тестов и исходная база 5.0 модульная сетевая библиотека модульная библиотека imglib
модульная библиотека изображений модульная сетевая библиотека модульная компоновка	модульная библиотека изображений модульная сетевая библиотека модульная компоновка

Ниже представлена предлагаемая структура каталогов.
кода Netlib.

Каталог	Описание
мозилла/сеть	Корневой сетевой каталог
мозилла/сеть/протоколы	Корневой каталог для всех протоколов реализации
mozilla/network/protocols/<ваш реализация любимого протокола>	Существует каталог для каждого протокола реализация
мозилла/сеть/двигатель	Основная реализация Netlib
мозилла/сеть/клиент	Устаревший код, необходимый Mozilla клиент…
мозилла/сеть/поток	Реализации различных потоков..
мозилла/сеть/тесты	Автономные тесты

Сетевая библиотека

Сначала Netlib будет разбит на статические библиотеки и
реинтегрированный
в Mozilla, чтобы показать совместимость. Тогда библиотеки будут
быть индивидуально помещенным за API нового интерфейса на ветках, а затем приземлиться
обратно на транке Mozilla через короткие промежутки времени. Конечный результат должен
быть реструктурированной кодовой базой с гораздо меньшим количеством зависимостей. удаленный
возможность обновления с помощью DLL на основе интерфейса и возможность делать третьи
сторонние протоколы подключаемых модулей и преобразователи потоков.

Макет

После запуска и работы автономной реализации netlib набор
API будут определены, чтобы позволить механизму компоновки NGLayout подключаться к
текущая кодовая база Mozilla. После определенной степени стабильности
и функциональная насыщенность будет достигнута, старый код макета будет вырезан из
кодовая база Mozilla. Это оставит частично компонентный
продукт с модульной компоновкой, netlib и imagelib.

Зависимости

Макет

Работа в автономном режиме Netlib и реинтеграция
в Громит
Доработка ДОМ

Модель события
Модель стиля
Предложение диапазона W3C

NGLayout работает на Mac и UNIX
Посадка XPCOM на наконечник

Дорожная карта

Сетевая библиотека

Переместить nsIURL и реализацию nsURL
в сетевую библиотеку
Поддержка запросов HTTP POST путем предоставления
OutputStream в компоненте nsIURL
Завершите реализацию nsIStreamNotification

Переместите код mozilla/lib/libnet в
новая иерархия Mozilla/сети
Заставьте клиент Mozilla работать с
новый код мозиллы/сети
Разбейте основной код Netlib на
библиотека библиотеки Netlib
Заставьте NGLayout работать с новой Netlib
двигатель DLL
Начните делить остальную часть мозиллы/сети
код в отдельные библиотеки DLL и библиотеки

основной набор фреймворков и включает

структура плагина протокола
Вспомогательные подпрограммы TCP
функция сетевой утилиты

протоколы

http
суслик
фтп
о URL
файл
данные
мокко
маримба
удаленный (telnet/rлогин)
почтовые протоколы

кеш
сетевые преобразователи

ганзип
вид-источник
сохранить на диск

Функции потока C (декларация, реестр,
служебные функции для старых потоков netlib на основе C)
Потоковые функции С++

Потокобезопасность. Нам нужно завершить
модель многопоточности и сделать DLL-движок Netlib многопоточным.
Вероятно, библиотеки протоколов также должны быть многопоточными…

Компоновка

Спецификация первого прохода WebWidget API (5/4)
Простая демонстрация работы NGLayout
в Gromit Chrome на Windows (5/13)
Посадка ветки IMGLIB на наконечник (5/15)
Завершить документ о зависимостях (в процессе)
Прототип ввода с использованием NGLayout,
совместно с группой Editor (5/29)
Дизайн редактора первого прохода (6/1)

контекстные меню
история сеансов
Клавиатурная навигация
Сообщения о состоянии
Вырезать, копировать, вставить
Закладки
HTML-диалоги
Управление окнами, несколько браузеров
окна
Настройки, сервис и пользовательский интерфейс
Печать
Взаимодействие JavaScript с приложением
Найти текст
Плагины

Имглиб

Интеграция в кодовую базу Mozilla

XPCOM

Сборка MAC (5/15)
Проверка Unix (5/15)
Land XPCOM на наконечнике (5/15)

Макет страницы портала BAM — BizTalk Server

Редактировать

Твиттер

Фейсбук

Электронная почта

Статья
02. 02.2021
2 минуты на чтение

Страница портала BAM размещена в следующих трех фреймах:

Баннер
Мои просмотры
Содержание

Рамка Banner расположена в верхней части страницы портала. Рамка баннера содержит информацию о торговой марке, такую как название и логотип компании, ссылки на справку для этой страницы пользовательского интерфейса (UI) и заголовки страниц. Вы можете настроить брендинг в соответствии с потребностями вашей организации. Дополнительные сведения о настройке фирменной информации в баннере см. в разделе Настройка конфигурации портала BAM.

Мои представления

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

В каждом представлении есть три задачи, которые вы можете выполнять в этом представлении:

Поиск активности : Позволяет создавать запросы и оповещения на основе активности.
Агрегации : позволяет просматривать агрегированные данные и создавать оповещения на основе итогов в диаграмме сводной таблицы.
Alert Manager : Позволяет создавать, редактировать, просматривать и подписываться на оповещения.

Примечание

При выборе Диспетчера предупреждений в окне Мои представления вы можете редактировать только существующее предупреждение. Чтобы создать новые оповещения, вы должны перейти на страницу «Диспетчер оповещений» со страницы «Поиск активности» или «Агрегации».

This entry was posted in Популярное

Posted:

Comments: