Как сделать мои приложения "скинами"? - PullRequest
11 голосов
/ 05 февраля 2009

Есть ли какой-нибудь стандартный способ сделать мои приложения скинами?

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

Я не нацеливаюсь на какую-либо конкретную платформу здесь. Просто хочу узнать, есть ли какие-либо общие рекомендации по созданию приложений с поддержкой скинов.

Похоже, создание скинов веб-приложений относительно простое. А как насчет настольных приложений?

Ответы [ 10 ]

8 голосов
/ 05 февраля 2009

Скины - это еще один уровень абстракции (YALOA!).

Если вы прочитаете шаблон проектирования MVC , вы поймете многие из необходимых принципов.

Слой представления (или обложка) должен делать только несколько вещей:

  • Показать интерфейс
  • Когда предпринимаются определенные действия (щелчок, ввод текста в поле и т. Д.), Тогда запускаются действия
  • Он должен получать уведомления от модели и контроллера, когда он должен измениться

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

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

Посмотрите, например, XUL и посмотрите, как это там делается. Вы найдете много проектов скинов, использующих XML для описания различных «граней» скина (его воспроизведения музыки или организации библиотеки для скина MP3-плеера), а также того, где находится каждый элемент управления и какие данные и методы его используют. должны быть прикреплены к в программе.

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

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

-Adam

5 голосов
/ 05 февраля 2009

Храните все ваши стили в отдельном файле (ах) CSS

Держитесь подальше от любых встроенных стилей

3 голосов
/ 05 февраля 2009

Реализация зависит от платформы, но вот несколько общих кроссплатформенных соображений:

  • Хорошо иметь установленный общий макет, в который можно подключать визуальные элементы. Труднее (но все же возможно) поддерживать совершенно разные общие макеты с помощью скинов.
  • Разработайте хорошо документированное соглашение об именах для ресурсов (изображений, фрагментов HTML и т. Д.), Составляющих скин.
  • Разработайте чистый способ «открывать» существующие скины и добавлять новые. Например: Winamp использует формат файла ZIP для хранения всех изображений для своих скинов. Все файлы скинов находятся в известной папке в папке приложения.
  • Помните о проблемах масштабирования. Не все используют одинаковое разрешение экрана.
  • Собираетесь ли вы разрешить стороннюю разработку кожи? Это повлияет на ваш дизайн.
  • Архитектурно, модель Model-View-Controller пригодна для скиннинга.

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

3 голосов
/ 05 февраля 2009

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

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

Color backgroundColor = Color.BLUE;

станет что-то вроде:

Color backgroundColor = ResourceManager.getColor("form.background");

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

1 голос
/ 05 февраля 2009

Ты не должен. Или, по крайней мере, вы должны спросить себя, действительно ли это правильное решение.

Скиннинг нарушает правила проектирования пользовательского интерфейса. Это «раздражает» пользователя, потому что ваше скиновое приложение работает и выглядит совершенно иначе, чем все другие приложения, которые они используют. Такие вещи, как сочетания клавиш, не будут согласованными, и они потеряют производительность. Он будет менее доступным для инвалидов, потому что читателям экрана будет труднее понять его.

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

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

1 голос
/ 05 февраля 2009

Это должно быть относительно легко, выполните следующие действия:

  1. Удалите все стили для всего веб-приложения или веб-сайта
  2. Используйте css для изменения внешнего вида вашего приложения.

Для получения дополнительной информации посетите css zen garden для идей.

1 голос
/ 05 февраля 2009

Это отличается для каждой платформы / технологии.

Что касается WPF, взгляните на то, что Джош Смит называет структурной оболочкой: http://www.codeproject.com/KB/WPF/podder2.aspx

1 голос
/ 05 февраля 2009

Основной принцип заключается в том, что CSS используется на веб-страницах.

Вместо того, чтобы указывать форматирование (цвет / шрифт / макет [до некоторой степени]) вашего контента, вы просто описываете, какой это тип контента.

Например, в содержании страницы блога вы можете пометить различные разделы как:

  1. Название
  2. Запись в блоге
  3. Панель архивов

и т.д.

Запись может состоять из нескольких подразделов, таких как «заголовок», «тело» и «отметка времени».

Затем в других местах у вас есть таблица стилей, в которой указаны все свойства каждого вида элементов, размера, выравнивания, цвета, фона, шрифта и т. Д. При рендеринге страницы или при сканировании / инициализации компонентов в вашем пользовательском интерфейсе вы всегда обращаетесь к текущему таблица стилей для поиска этих свойств.

Тогда создание обложек и редактирование вашего дизайна становятся НАМНОГО проще. Вы просто создаете другую таблицу стилей и подгоняете значения к своему содержанию.

Edit:

Один ключевой момент, который следует помнить, - это различие между общим стилем (например, классы в CSS) и конкретным стилем (например, идентификаторы в CSS). Вы хотите иметь возможность однозначно идентифицировать некоторые элементы в макете, например заголовок, как отдельный идентифицируемый элемент, к которому можно применить уникальный стиль, тогда как другие элементы (например, запись в блоге или поле в представление базы данных) все будут хотеть иметь тот же стиль.

0 голосов
/ 05 февраля 2009

Кажется, что большинство людей здесь ссылаются на CSS, как будто это единственный вариант скинов. Windows Media Player (и Winamp, AFAIR) используют XML, а также изображения (если необходимо) для определения скина.

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

XML также дает вам гораздо больший контроль над тем, что вы можете делать (т.е. создавать новые компоненты, изменять размеры компонентов и т. Д.).

XML в сочетании с CSS может дать замечательные результаты для механизма скининга настольного компьютера или веб-приложения.

0 голосов
/ 05 февраля 2009

В зависимости от того, насколько глубоко вы хотите копать, вы можете использовать «форматирующую» структуру (например, PLAF Java, веб-CSS) или полностью отделенную многоуровневую архитектуру.

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

...