Схема данных в visual studio 2019
Опишите архитектуру приложения на высоком уровне, создав схемы зависимостей в Visual Studio. Убедитесь, что код остается согласованным с этим дизайном, проверив код с помощью схемы зависимостей. В процесс сборки также можно включить проверку слоев.
Чтобы узнать, какие выпуски Visual Studio поддерживают эту функцию, см. раздел Поддержка инструментов моделирования и архитектуры в различных выпусках.
Что такое схема зависимостей?
Как и в традиционной схеме архитектуры, схема зависимостей определяет основные компоненты и функциональные единицы проектирования и их взаимозависимости. Каждый узел на схеме, называемый слоем, представляет логическую группу пространств имен, проектов или других артефактов. Можно нарисовать зависимости для своей разработки. В отличие от традиционной схемы архитектуры, можно проверить, соответствуют ли действительные зависимости заданным вами предполагаемым зависимостям. Делая проверку частью стандартного построения в Team Foundation Server, можно добиться того, чтобы программный код продолжал придерживаться архитектуры системы при дальнейших изменениях. См. раздел схемы зависимостей: Справочник.
Разработка и обновление приложений с помощью схем зависимостей
Следующие шаги позволяют получить общие сведения об использовании схем зависимостей в процессе разработки. Каждый шаг более подробно описан в последующих подразделах данного раздела. Если ведется разработка нового проекта, можно пропустить шаги, которые относятся к существующему коду.
Эти шаги приведены в примерном порядке. Возможно, понадобится перекрыть задачи, заново упорядочить их, чтобы они подходили по ситуации, а также возвратиться к ним в начале каждой итерации в проекте.
Создайте схему зависимостей для всего приложения или для слоя внутри него.
Определите слои, представляющие основные функциональные области или компоненты приложения. Дайте этим слоям имена согласно их функциям, например "Презентация" или "Службы". если у вас есть Visual Studio решение, каждый слой можно связать с коллекцией артефактов, такими как проекты, пространства имен, файлы и т. д.
Измените слои и зависимости , чтобы показать обновленный проект, который должен отражаться в коде.
Разрабатывать новые области приложения можно путем создания слоев, представляющих основные архитектурные блоки или компоненты и определяющие зависимости, чтобы продемонстрировать, как каждый из уровней использует другие.
Измените макет и внешний вид диаграммы , чтобы помочь вам обсудить ее с коллегами.
Проверьте код на соответствие схеме зависимостей , чтобы выделить конфликты между кодом и необходимой архитектурой.
Обновите код, чтобы он соответствовал новой архитектуре. Итерационно разрабатывайте и оптимизируйте код до тех пор, пока проверка не укажет, что конфликты отсутствуют.
Включите проверку слоев в процессе сборки , чтобы код продолжал соответствовать вашей структуре.
Создание схемы зависимостей
Схема зависимостей должна быть создана внутри проекта моделирования. Новую диаграмму зависимостей можно добавить в существующий проект моделирования, создать проект моделирования для схемы зависимостей или скопировать существующую диаграмму зависимостей в тот же проект моделирования.
Не добавляйте, не перетаскивайте и не копируйте существующую схему зависимостей из проекта моделирования в другой проект моделирования или в другое расположение в решении. Схема зависимостей, скопированная таким образом, будет иметь те же ссылки, что и исходная диаграмма, даже при изменении схемы. Это может привести к тому, что проверка схемы будет работать неправильно, а также к другим потенциальным проблемам, таким как отсутствующие элементы или другие ошибки при попытке открыть схему.
Определение слоев для представления функциональных областей или компонентов
Рекомендуется называть слои согласно их функциям, например "Презентация" или "Службы". Если артефакты тесно взаимосвязаны, поместите их в один слой. Если артефакты могут быть обновлены отдельно или использованы в разных приложениях, поместите их на разные слои.
Существуют определенные типы артефактов, которые можно связать с слоями, но не поддерживают проверку схемы зависимостей. Чтобы проверить, поддерживает ли артефакт проверку, откройте Обозреватель слоев , чтобы просмотреть свойство Поддержка проверки в ссылке артефакт. См. раздел Обнаружение существующих зависимостей между слоями.
При обновлении незнакомого приложения можно также создать карты кода. Они помогают обнаружить закономерности и зависимости при анализе кода. Воспользуйтесь обозревателем решений, чтобы изучить пространства имен и классы, которые часто находятся в точном соответствии с существующими слоями. Назначьте эти артефакты кода слоям, перетащив их из обозреватель решений в схемы зависимостей. Затем можно использовать схемы зависимостей, которые помогут обновить код и обеспечить его соответствие дизайну.
Обнаружение существующих зависимостей между слоями
Зависимости существуют там, где артефакт, связанный с одним слоем, ссылается на артефакт, связанный с другим слоем. Например, класс в одном слое объявляет переменную, которая имеет класс в другом слое. Существующие зависимости можно обнаружить путем их реконструирования.
Для определенных видов артефактов реконструировать зависимости невозможно. Например, зависимости не могут быть реконструированы из или в слой, связанный с текстовым файлом. Чтобы узнать, какие артефакты имеют зависимости, которые можно реконструировать, щелкните правой кнопкой мыши один или несколько слоев и выберите команду Просмотреть ссылки. В обозревателе слоев изучите столбец поддерживает проверку . Зависимости не будут реконструированы для артефактов, для которых в этом столбце указано значение false.
Чтобы выполнить реконструирование существующих зависимостей между слоями
Выберите один или несколько слоев, щелкните правой кнопкой мыши выбранный слой и выберите команду создать зависимости.
Как правило, на этом этапе можно увидеть некоторые зависимости, которых быть не должно. Эти зависимости можно изменить для соответствия предполагаемой структуре.
Изменение слоев и зависимостей для отображения предполагаемого дизайна
Чтобы описать изменения, которые вы планируете внести в систему или предполагаемую архитектуру, выполните следующие действия, чтобы изменить схему зависимостей. Можно также сделать некоторые оптимизационные изменения для улучшения структуры кода перед его расширением. См. раздел улучшение структуры кода.
Улучшение структуры кода
Оптимизация изменений — это улучшения, которые не влияют на поведение приложения, но помогают сделать код более легким для изменения или расширения в будущем. Хорошо структурированный код имеет конструкцию, легко абстрактную на схеме зависимостей.
Например, если создается слой для каждого пространства имен в коде и затем разбираются зависимости, то необходимо, чтобы был минимальный набор односторонних зависимостей между слоями. Если создается более детальная схема с использованием классов или методов в качестве слоев, то результат должен иметь такие же характеристики.
Если это не так, код будет труднее изменять на протяжении его жизненного цикла и будет менее пригоден для проверки с использованием схем зависимостей.
Разработка новых областей приложения
При начале разработки нового проекта или новой области в новом проекте, можно нарисовать слои и зависимости, чтобы облегчить определение основных компонентов перед началом разработки кода.
По возможности Продемонстрируйте идентифицируемые архитектурные шаблоны на схемах зависимостей. Например, схема зависимостей, описывающая классическое приложение, может включать такие слои, как презентация, логика домена и хранилище данных. Схема зависимостей, охватывающая одну функцию в приложении, может иметь такие слои, как модель, представление и контроллер.
Создайте артефакт кода для каждого слоя , такого как пространство имен, класс или компонент. Это облегчит отслеживание кода и поможет связывать артефакты кода со слоями. Сразу после создания артефакта свяжите его с соответствующим слоем.
Нет необходимости связывать большинство классов и других артефактов с слоями , так как они попадают в более крупные артефакты, такие как пространства имен, которые уже связаны с слоями.
Создайте новую диаграмму для новой функции. Как правило, существует одна или несколько схем зависимости, описывающих все приложение. Если вы разрабатываете новую возможность в приложении, то не добавляйте и не изменяйте существующие схемы. Вместо этого создайте свою схему, которая отражает новые части кода. Слои в новой схеме могут включать в себя презентацию, доменную логику и слои базы данных для новой возможности.
При построении приложения код будет проверяться как в отношении всей схемы , так и в отношении более детальной схемы возможности.
Изменение макета для представления и обсуждения
Чтобы облегчить определение слоев и зависимостей или обсудить их с членами команды, измените вид и разметку схемы следующим образом.
Измените размеры, формы и положение слоев.
Измените цвета слоев и зависимостей.
- Выберите один или несколько слоев или зависимостей, щелкните правой кнопкой мыши и выберите пункт Свойства. В окне Свойства измените свойство Color .
Проверка кода на соответствие схеме
После изменения схемы ее можно проверить на соответствие коду вручную в любое время или автоматически при каждой сборке.
Обновление кода для соответствия новой архитектуре
Как правило, ошибки появляются при первой проверке кода на соответствие обновленной схеме зависимостей. Ошибки могут возникать вследствие нескольких причин.
Артефакт назначен неправильному слою. В этом случае следует переместить артефакт.
Способ использования артефактом (например, классом) другого класса конфликтует с имеющейся архитектурой. В этом случае необходимо выполнить рефакторинг кода, чтобы устранить зависимость.
Для устранения этих ошибок следует обновлять код до тех пор, пока в процессе проверки не перестанут происходить ошибки. Обычно это итерационный процесс. Дополнительные сведения об этих ошибках см. в разделе Проверка кода с помощью схем зависимостей.
При разработке или реструктуризации кода у вас могут быть новые артефакты для связи с диаграммой зависимостей. Однако это может не потребоваться, например, когда слои представляют собой существующие пространства имен, а новый код только добавляет больше материала для них.
В процессе разработки может понадобиться подавить некоторые конфликты, выявленные в ходе проверки. Например, можно подавлять ошибки, над которыми уже ведется работа, а также ошибки, не имеющие отношения к конкретному сценарию. При подавлении ошибки рекомендуется вести журнал рабочего элемента в Team Foundation. Сведения о выполнении этой задачи см. в разделе Проверка кода с помощью схем зависимостей.
Включить проверку слоев в процессе сборки
Чтобы обеспечить соответствие будущих изменений в коде схемам зависимостей, включите проверку слоев в стандартный процесс сборки решения. Каждый раз, когда другие члены команды создают решение, любые различия между зависимостями в коде и схемой зависимостей будут отображаться как ошибки сборки. Дополнительные сведения о включении проверки слоев в процесс сборки см. в разделе Проверка кода с помощью схем зависимостей.
в Visual Studio можно использовать схему зависимостей для визуализации высокоуровневой логической архитектуры системы. Схема зависимостей организует физические артефакты в системе в логические, абстрактные группы, называемые слоями. Слои описывают основные компоненты системы или задачи, выполняемые этими артефактами. Каждый слой может также содержать вложенные слои, описывающие более подробные задачи.
Чтобы узнать, какие выпуски Visual Studio поддерживают эту функцию, см. раздел Поддержка инструментов моделирования и архитектуры в различных выпусках.
Между слоями можно установить предполагаемые или существующие зависимости. Эти зависимости, представленные в виде стрелок, показывают, какие слои могут использовать или в настоящее время используют функциональные возможности, представленные другими слоями. Организуя систему в слои, описывающие различные роли и функции, схема зависимостей может облегчить понимание, повторное использование и обслуживание кода.
Используйте схему зависимостей для выполнения следующих задач:
представлять существующую или предполагаемую логическую архитектуру системы;
выявлять конфликты между существующим кодом и предполагаемой архитектурой;
визуализировать влияние изменений на предполагаемую архитектуру при рефакторинге, обновлении или развитии системы;
дополнительно контролировать предполагаемую архитектуру в процессе разработки и обслуживания кода за счет добавления проверки операций возврата и построения.
В этом разделе описываются элементы, которые можно использовать на схеме зависимостей. Более подробные сведения о создании и отрисовке схем зависимостей см. в разделе схемы зависимостей: рекомендации. Дополнительные сведения о шаблонах слоев см. на веб-сайте patterns & Practices.
Чтение схем зависимостей
В следующей таблице описаны элементы, которые можно использовать на схеме зависимостей.
Чтобы просмотреть артефакты, связанные с слоем, откройте контекстное меню слоя и выберите Просмотреть ссылки , чтобы открыть Обозреватель слоев.
Дополнительные сведения см. в разделе Обозреватель слоев.
Обозреватель слоев
Каждый слой можно связать с артефактами в решении, например с проектами, классами, пространствами имен, файлами проекта и другими частями программного обеспечения. Число на слое обозначает количество связанных с этим слоем артефактов. Число артефактов в слое следует толковать с учетом следующих факторов.
Если слой связан с артефактом, содержащим другие артефакты, но слой не связан с другими артефактами напрямую, то число включает только связанный артефакт. Однако для анализа в ходе проверки слоя включаются другие артефакты.
Например, если слой связан с одним пространством имен, то число связанных артефактов равно 1, даже если пространство имен содержит классы. Если слой также связан с каждым классом в пространстве имен, то число будет включать эти связанные классы.
Если слой содержит другие слои, связанные с артефактами, то слой-контейнер также связан с этими артефактами, даже если число в слое-контейнере не включает эти артефакты.
Дополнительные сведения о связывании слоев и артефактов см. в разделах:
Проверка связанных артефактов
На схеме зависимостей откройте контекстное меню для одного или нескольких слоев и выберите Просмотреть ссылки.
Откроется Обозреватель слоев , в котором отображаются артефакты, связанные с выбранными слоями. В обозревателе слоев имеется столбец, показывающий каждое из свойств ссылок артефактов.
Если вы не видите все эти свойства, разверните окно Обозреватель слоев .
Столбец в обозревателе слоев | Описание |
---|---|
Категории | Вид артефакта, например класс, пространство имен, исходный файл и т. д. |
Уровень | Связанный с артефактом слой |
Поддерживает проверку | Если значение — true, процесс проверки слоев может проверить, соответствует ли проект зависимостям к или из этого элемента. |
Если значение равно false, ссылка не участвует в процессе проверки слоев.
схема зависимостей позволяет организовывать Visual Studio элементы решения в логические, абстрактные группы, называемые слоями. Слои можно использовать для описания основных задач, выполняемых этими артефактами, или основных компонентов системы.
Каждый слой может содержать другие уровни, описывающие более подробные задачи. Можно также указать предполагаемые или существующие зависимости между слоями. Эти зависимости, представленные в виде стрелок, показывают уровни, которые используют или могут использовать функции, представленные другими слоями. Для поддержки архитектурного контроля кода добавьте предполагаемые зависимости в схему, а затем проверьте код по схеме.
Создание схемы зависимостей
Перед созданием схемы зависимостей убедитесь, что в решении есть проект моделирования.
Не добавляйте, не перетаскивайте и не копируйте существующую схему зависимостей из одного проекта моделирования в другой проект моделирования или в другое место решения. Это позволит сохранить ссылки из исходной схемы при изменении схемы. Кроме того, это может привести к тому, что проверка схемы будет работать неправильно, и к другим потенциальным проблемам, таким как отсутствующие элементы или другие ошибки при попытке открыть схему.
Вместо этого добавьте новую диаграмму зависимостей в проект моделирования. Скопируйте элементы из исходной схемы в новую схему. Сохраните оба, проект моделирования и новую диаграмму зависимостей.
Добавление новой схемы зависимостей в проект моделирования
В меню архитектура выберите пункт создать диаграмму зависимостей.
В разделе шаблоны выберите Схема зависимостей.
в Project "добавить в моделирование" найдите и выберите существующий проект моделирования в решении.
Выберите создать новый проект моделирования , чтобы добавить в решение новый проект моделирования.
Схема зависимостей должна существовать в проекте моделирования. Однако ее можно связать с элементами в любом месте решения.
Не забудьте сохранить и проект моделирования, и схему зависимостей.
Перетаскивание, копирование и вставка из схемы кода
Создать карту кода для решения с помощью меню " архитектура ".
Рассмотрите возможность применения фильтра карт кода для удаления папок решений и "тестовых ресурсов", если требуется только применить зависимости в коде продукта.
На созданной карте кода удалите внешний узел или разверните его, чтобы отобразить внешние сборки в зависимости от того, требуется ли применять зависимости пространства имен. Удалите необязательные сборки из схемы кода.
Создание новой схемы зависимостей для решения с помощью меню " архитектура ".
Выберите все узлы на карте кода (используйте сочетание клавиш CTRL + A или используйте выбор с резиновой полосой, нажав клавишу SHIFT перед нажатием, перетаскиванием и выпуском.
Перетащите или скопируйте и вставьте выбранные элементы в новую схему проверки зависимостей.
В этом примере показана текущая архитектура приложения. Определите, какая архитектура должна быть архитектурой, и измените схему зависимостей соответствующим образом.
Создание слоев на основе артефактов
Слои можно создать из элементов решения Visual Studio, таких как проекты, файлы кода, пространства имен, классы и методы. При этом автоматически создаются связи между слоями и элементами, которые включаются в процесс проверки слоев.
слои можно связывать с элементами, которые не поддерживают проверку, например документы Word или PowerPoint презентации. Это позволяет связать слой с спецификациями или планами. Кроме того, слои можно связать с файлами в проектах, которые являются общими для нескольких приложений, но в процесс проверки не войдут слои, которые отображаются с универсальными именами, например "Уровень 1" и "Уровень 2".
Чтобы проверить, поддерживает ли связанный элемент проверку, откройте Обозреватель слоев и просмотрите свойство Поддержка проверки элемента. См. раздел Управление связями с артефактами.
- Перетащите элемент на схему зависимостей из следующих источников:
- Обозреватель решений
Например, можно перетаскивать файлы или проекты. - Карты кода
См. раздел сопоставление зависимостей в решениях и Использование карт кода для отладки приложений. - Представление классов или Обозреватель объектов
- Обозреватель решений
- Переименуйте слой, чтобы отразить обязанности связанного кода или артефактов.
- В Обозреватель решений откройте контекстное меню проекта моделирования и выберите команду Добавить существующий элемент.
- В диалоговом окне Добавление существующего элемента перейдите к двоичным файлам, выберите их и нажмите кнопку ОК. Двоичные файлы отображаются в проекте моделирования.
- В Обозреватель решений выберите добавленный двоичный файл и нажмите клавишу F4 , чтобы открыть окно « Свойства ».
- Для каждого двоичного файла задайте для свойства действие сборки значение Проверка.
Чтобы добавить несколько слоев, дважды щелкните средство. Когда все будет готово, выберите инструмент указатель или нажмите клавишу ESC .
Число на слое обозначает количество артефактов, связанных со слоем. Однако при чтении этого числа Помните:
Если слой ссылается на артефакт, который содержит другие артефакты, но слой не связан непосредственно с другими артефактами, то число включает только связанный артефакт. Однако для анализа в ходе проверки слоя включаются другие артефакты.
Например, если слой связан с одним пространством имен, то число связанных артефактов равно 1, даже если пространство имен содержит классы. Если слой также связан с каждым классом в пространстве имен, то число будет включать эти связанные классы.
Если слой содержит другие слои, связанные с артефактами, то слой контейнера также связывается с этими артефактами, несмотря на то, что число на уровне контейнера не включает эти артефакты.
Управление связями между слоями и артефактами
На схеме зависимостей откройте контекстное меню слоя и выберите Просмотреть ссылки.
Обозреватель слоев отображает ссылки артефактов для выбранного слоя.
Для управления этими ссылками можно использовать следующие задачи:
Реконструировать существующие зависимости
Зависимости существуют там, где артефакт, связанный с одним слоем, ссылается на артефакт, связанный с другим слоем. Например, класс в одном слое объявляет переменную, которая имеет класс в другом слое. Реконструировать существующие зависимости можно для артефактов, связанных со слоями в схеме.
Для определенных видов артефактов нельзя выполнить реконструирование зависимостей. Например, зависимости не могут быть реконструированы из или в слой, связанный с текстовым файлом. Чтобы узнать, какие артефакты имеют зависимости, которые можно реконструировать, откройте контекстное меню для одного или нескольких слоев, а затем выберите Просмотреть ссылки. В обозревателе слоев изучите столбец поддерживает проверку . Зависимости не будут реконструированы для артефактов, для которых в этом столбце указано значение false.
Выберите один или несколько слоев, откройте контекстное меню для выбранного слоя, а затем выберите создать зависимости.
Если отображаются некоторые зависимости, которые не должны существовать, можно изменить эти зависимости, чтобы согласовать их с предполагаемой конструкцией.
Изменение слоев и зависимостей для отображения предполагаемого дизайна
Чтобы описать изменения, которые вы планируете внести в систему или предполагаемую архитектуру, измените схему зависимостей.
Изменение отображения элементов на схеме
Можно изменить размер, фигуру, цвет, положение слоев или цвет зависимостей, изменив их свойства.
Обнаружение шаблонов и зависимостей на карте кода
При создании схем зависимостей вы также можете создавать карты кода. Они помогают обнаружить закономерности и зависимости при анализе кода. Воспользуйтесь обозревателем решений, представлением классов или обозревателем объектов, чтобы изучить сборки, пространства имен и классы, которые часто находятся в точном соответствии с существующими слоями. Подробнее о картах кода читайте в следующих разделах:
Диаграммы классов не могут быть созданы для проектов с общим кодом для нескольких приложений. Сведения о создании схем классов UML см. в разделе Создание проектов и схем моделирования UML.
Установка компонента "Конструктор классов"
Если у вас не установлен компонент Конструктор классов, выполните следующие действия, чтобы установить его.
Откройте Visual Studio Installer из меню "Пуск" или выбрав в строке меню Visual Studio Инструменты > Получить инструменты и функции.
Откроется Visual Studio Installer.
Выберите вкладку Отдельные компоненты и затем прокрутите вниз до категории Средства для работы с кодом.
Выберите Конструктор классов и нажмите Изменить.
Начнется установка компонента Конструктор классов.
Добавление пустой схемы классов в проект
В обозревателе решений щелкните узел проекта правой кнопкой мыши и выберите пункт Добавить > Новый элемент. Либо нажмите клавиши CTRL+SHIFT+A.
Откроется диалоговое окно Добавление нового элемента.
Разверните Обычные элементы > Общие и выберите Схема классов из списка шаблонов. Для проектов Visual C++ шаблон Схема классов находится в категории Служебные программы.
Если шаблон Схема классов отсутствует, выполните действия по установке компонента Конструктор классов в Visual Studio.
В конструкторе классов откроется схема классов, и в обозревателе решений появится файл с расширением .cd. Можно перетаскивать фигуры и линии в диаграмму из панели элементов.
Чтобы добавить несколько схем классов, необходимо повторить шаги данной процедуры.
Добавление диаграммы классов на основе существующих типов
В обозревателе решений откройте контекстное меню файла класса, щелкнув правой кнопкой мыши, и выберите пункт Перейти к диаграмме классов.
В представлении классов откройте контекстное меню пространства имен или типа и выберите пункт Просмотр схемы класса.
Если представление классов не открыто, откройте его из меню Вид.
Отображение содержимого всего проекта в схеме классов
В обозревателе решений или в представлении классов щелкните проект правой кнопкой мыши и выберите Просмотр, а затем — Просмотр схемы класса.
Относительно не давно обновил студию, и к моему удивлению я не обнаружил в ней Диаграмм классов. Оказалось что их надо было выбирать при установки студии. Но обо всем по порядку. Диаграмма классов очень похожа на язык UML, но не путайте, это язык DSL— domain specific language это определенный архитектурный слой который описывает бизнес сущности и модель. Применяют его в программировании в основном для визуального представления всех классов и методов проекта и их внутренний логику взаимодействия. Хотя UML был предназначен для конструирования приложения, часть возможностей перетекла и в DSL. Тут таким же образом можно наглядно используя конструктор, создавать, классы, поля и методы, проводить между ними ассоциативные связи итд. Однако мы отошли от нашей проблемы, а именно того как установить класс диаграмм в visual studio 2019.
Для этого зайдем в студию и выберем в пункте Средства>Получить средства и компоненты… как показано на рисунке выше. Запустится Visual Studio Installer в котором необходимо установить галочку в пункте Разработка расширений Visual Studio, а в окне Сводка установить галочку Конструктор компонентов. И нажать кнопку Изменить, не забудьте перед этим закрыть саму студию. Недостающие компоненты будут загружены и когда вы запустите студию сможете воспользоваться классом диаграмм.
Чтобы им воспользоваться вам необходимо выделить проект нажать правую кнопку мыши, далее выбрать Представление и > Перейти к диаграмме классов.
В последних версия VS переименовали компонент, потому многие его не могу найти, для этого я дополню статью.
заходим в Средства >>Получить средства и компоненты …
Откроется окно Visual Studio Installer
Далее вам не обходимо перейти на вкладку Отдельный компоненты.
И в поле поиска вписать слово конструктор.
От фильтруется список и вы увидите компонент Конструктор классов нужно установить галочку на компоненте. И нажать в правом углу кнопку изменить.
Произойдет загрузка компонента и у вас вновь откроется студия по завершению.
Далее вам необходимо выбрать правой кнопкой мыши по проекту и перейти в пункт Представление >>Перейти к диаграмме классов. У вас загрузится конструктор как на скриншоте.
Читайте также: