Рано или поздно в своей работе программист доходит до той точки, когда писать программы “на коленке” уже не имеет смысла, т.к. время – конечный ресурс и с каждым годом становится все более и более ценным. В таком случае полезным бывает использование уже существующих наработок как, непосредственно, для реализации того или иного функционала, так и для разработки архитектуры ПО.

Удачным и довольно эффективным способом сократить время, необходимое на разработку архитектуры, является использование шаблонов проектирования (design patterns).

Одним из довольно популярных в наши дни шаблонов проектирования является Model-View-Controller (MVC, Модель-представление-контроллер). Об использовании этого шаблона проектирования, в применении для разработки мобильных приложений на .NET Compact Framework, я расскажу в этот раз.

Итак, что нам дает MVC в общем? MVC позволяет разделить функционал приложения на три части:

  • Model (Модель) – содержит только данные и “ничего больше не делает”. На самом деле фраза в кавычках значит, что Model предоставляет API для получения данных, и API для реакции на запросы об изменении данных (обычно такие запросы приходят от контроллера), но на остальной функционал приложения или отдельного модуля, а также на функционал по отображению данных, модель не оказывает никакого влияния и даже не знает о них.
  • Controller (Контроллер) – обрабатывает данные, введенные пользователем, и уведомляет Model и Controller о необходимости реакции на действия пользователя. Модель, в этом случае, может изменять состояние хранимых ею данных, а представление должно обеспечить отображение актуальных данных.
  • View (представление) – отвечает за отображение актуальных данных, предоставляемых моделью. View – это то, что мы видим на экране, пользовательский интерфейс. При использовании шаблона MVC пользовательский интерфейс не может и не должен напрямую изменять данные. Он должен уведомлять контроллер о действии пользователя, а контроллер, если это необходимо, будет запрашивать изменение данных в модели.

Использование MVC позволяет уменьшить зависимости между компонентами системы таким образом, что изменение одного компонента приводит к минимальным изменениям в остальных.

Но довольно теории. Перейдем к рассмотрению примера использования MVC для разработки приложений на .NET Compact Framework. Оказывается, что все велосипеды уже изобретены до нас, и для мобильных приложений уже существует реализация паттерна MVC – Mobile MVC Framework, который, вместе с исходным кодом, доступен на CodePlex.

Здесь и далее все примеры будут использовать именно эту библиотеку для реализации MVC.

Итак, давайте начнем знакомство.

Первое, что необходимо сделать, это создать приложение на .NET Compact Framework. Для этого в Microsoft Visual Studio выбираем меню File -> New -> Project и создаем Smart Device Project на C#.

Создание приложения на .NET Compact Framework

Указав название проекта, жмем OK. После этого необходимо выбрать тип приложения. Нам подходит “Device Application

Выбор типа приложения для .NET Compact Framework

После того как наш проект создан, распаковываем исходный код Mobile MVC Framework в папку с решением.

Распаковываем исходный код Mobile MVC Framework в папку с решением

Добавляем проект библиотеки Mobile MVC Framework в решение.

Добавляем Mobile MVC Framework в решение

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

Добавляем Mobile MVC Framework в References для приложения

Отлично. Мы получили пустое приложение с одной формой. Теперь займемся внесением изменений.

Создаем новую форму. Это будет форма ввода имени пользователя и пароля при старте приложения.

Создаем новую форму в проекте приложения

На форму добавляем два компонента TextBox (для ввода имени пользователя и пароля), два компонента Label и в главное меню формы добавляем пункты OK и Exit.

Форма логина

Теперь выполним изменения в исходном коде формы.

Формы в приложении, использующем Mobile MVC Framework должны быть отнаследованы от класса ViewForm. Для этого меняем у нашей формы имя родительского класса.

using System;
using System.Linq;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using System.Mobile.Mvc;

namespace MobileMVCTest
{
    public partial class LoginForm : ViewForm
    {
        public LoginForm()
        {
            InitializeComponent();
        }
    }
}

По нажатию на кнопку OK наша форма будет отправлять уведомление контроллеру. Для того чтобы отправить уведомление о необходимости проверки логина и пароля, нам необходимо сохранить состояние формы. Состояние компонента сохраняется в переменной ViewData. Для уведомления контроллера используется метод OnViewStatChanged(). Каждое действие пользователя должно иметь уникальное имя, которое будет передано в качестве параметра в метод OnViewStatChanged(). Благодаря уникальному имени контроллер сможет идентифицировать действие пользователя и обработать его соответствующим образом. Уведомления от контроллера обрабатываются в методе OnUpdateView(). Все уведомления, приходящие от контроллера также будут иметь уникальные названия, с помощью которых форма сможет их идентифицировать и обработать.

Полный исходный код формы предствален ниже:

namespace MobileMVCTest
{
    public partial class LoginForm : ViewForm
    {
        public LoginForm()
        {
            InitializeComponent();
        }

        private void mnuOK_Click(object sender, EventArgs e)
        {
            ViewData["Login"] = txtLogin.Text;
            ViewData["Password"] = txtPassword.Text;
            OnViewStateChanged("LoginAction");
        }

        private void mnuExit_Click(object sender, EventArgs e)
        {
            OnViewStateChanged("ExitAction");
        }

        protected override void OnUpdateView(string key)
        {
            if(key == "LoginSuccess")
            {
                DialogResult = DialogResult.OK;
                Close();
            }
            else if(key == "LoginError")
            {
                txtLogin.Text = string.Empty;
                txtPassword.Text = string.Empty;
                MessageBox.Show("Error");
            }
        }
    }
}

Редактирование формы мы закончили. Теперь нужно создать класс контроллера.

Создаем контроллер для формы логина

Основной код в классе контроллера сосредоточен в методе OnViewStateChanged(), который вызывается из главной формы. Если приходит уведомление о том, что пользователь нажал кнопку “OK”, то выполняется проверка введенных данных. При соответствии данных форме отсылается уведомление “LoginSuccess”, в противном случае уведомление “LoginError”.

Если была нажата кнопка “Exit” (и в контроллер поступило уведомление “ExitAction”), то программа завершается.

using System;
using System.Linq;
using System.Collections.Generic;
using System.Text;
using System.Mobile.Mvc;
using System.Windows.Forms;

namespace MobileMVCTest
{
    class LoginController : Controller
    {
        public LoginController(IView view)
            : base(view)
        {
        }

        protected override void OnViewStateChanged(string key)
        {
            if(key == "LoginAction")
            {
                if( (View.ViewData["Login"].ToString() == "TestLogin") &&
                    (View.ViewData["Password"].ToString() == "TestPassword"))
                {
                    View.UpdateView("LoginSuccess");
                }
                else
                {
                    View.UpdateView("LoginError");
                }
            }
            if(key == "ExitAction")
            {
                Application.Exit();
            }
        }
    }
}

Все идеально и просто. Форма не знает, каким образом обрабатываются введенные данные. Она всего лишь сохраняет свое состояние и уведомляет об этом контроллер. Контроллер также ничего не знает о том, какие есть контролы на форме. Он также сохраняет состояние и уведомляет форму.

Теперь нам осталось всего лишь внести небольшие изменения в класс приложения:

using System;
using System.Linq;
using System.Collections.Generic;
using System.Windows.Forms;

namespace MobileMVCTest
{
    static class Program
    {
        /// <summary>
        /// The main entry point for the application.
        /// </summary>
        [MTAThread]
        static void Main()
        {
            LoginForm loginForm = new LoginForm();
            LoginController controller = new LoginController(loginForm);
            if(loginForm.ShowDialog() == DialogResult.OK)
            {
                Application.Run(new MainForm());
            }
        }
    }
}

Здесь мы создали форму и контроллер для нее. При успешном завершении работы формы (если данные об учетной записи пользователя были введены корректно) приложение продолжает свою работу. В противном случае приложение завершается.

Продолжение следует…

Previous ArticleNext Article
Технический директор IT-Dimension, компании-разработчика кросс-платформенного программного обеспечения

This post has 3 Comments

3
  1. Спасибо, интересно. Хочу попробовать. Жду продолжения)

  2. откуда код в форме LoginForm знает метод контроллера OnViewStateChanged кторый еще не создан?

Leave a Reply

Your email address will not be published. Required fields are marked *

C.

Compact Framework: адаптируем графику приложения под текущую цветовую схему

В этот раз статья Андрея Коновалова о работе с графикой в .NET Compact Framework.

Вступление

Как известно, на Windows Mobile устройствах существует возможность смены цветовой схемы. В случае, если приложение не использует графические элементы, достаточно воспользоваться набором цветов, предоставляемых классом SystemColors, чтобы приложение соответствовало текущей схеме. Из наиболее часто используемых имеет смысл отметить ActiveCaption, ActiveCaptionText, InactiveCaption, InactiveCaptionText, WindowText и.т.д. Также не стоит забывать про класс SystemBrushes, в котором представлены готовые для работы кисти — нет необходимости вызывать конструкторы и т.д.

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

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

Итак, что же остаётся? Очевидно, необходимо каким-то способом трансформировать базовое изображение «на лету». Известно, что самая главная компонента цветовой схемы содержится в реестре по адресу HKLM\Software\Microsoft\Color, в DWORD переменной BaseHue. В случае, если значение находится в диапазоне от 0 до 255, то у нас градации серого. От 256 до 510 — основная радуга 🙂 Опытным путём было установлено, что различные темы частенько кладут в эту переменную «что попало», т.е. значение, существенно превышающее диапазон 0..510. В итоге, чтобы получить честный BaseHue, воспользуемся следующей функцией:

private const String BASEHUE_PATH = “HKEY_LOCAL_MACHINE\\SOFTWARE\\Microsoft\\Color”;

public static int GetBaseHue()
{
object baseHue = Registry.GetValue(BASEHUE_PATH, “BaseHue”, 0);
int bh = baseHue == null ? 0: (int)baseHue;

if (bh < 255) return bh; else return (bh & 0xFF) + 255; } [/sourcecode] Про реальный смысл значения BaseHue можно почитать тут: HSL color space.

Если коротко, то при значении BaseHue от 0 до 255 у нас градации серого, значит saturation должен быть 0 (т.е. гарантированно grayscale изображение). В случае с диапазоном от 256 до 510, saturation уже идёт на наше усмотрение, по желанию. Меня устраивает и 255, т.е. максимально цветное изображение. Сейчас поясню, причём тут saturation.

Всё дело в том, что изображение у нас хранится в RGB модели, а BaseHue к RGB никакого отношения не имеет. В итоге получается, что есть необходимость произвести RGB -> HSL преобразование для получения возможности «раскраски» базового изображения, а потом обратное HSL -> RGB преобразование, чтобы получить уже реальные цвета для пикселей.

Применение на примере кнопки с чекбоксом

Итак, разберём последовательность действий на примере графической кнопки с чек-боксом и изготовим из неактивной кнопки активную, причём она будет гармонировать с текущей цветовой схемой. Возьмём приготовленное заранее изображение неактивной кнопки. Замечу, что у кнопки есть прозрачные зоны, они цвета magenta, их можно заметить по углам.

Рис. 1 - Оригинал
Рис. 1 - Оригинал

Первая трансформация — просто сделаем так, чтобы вся кнопка ушла в указанный BaseHue (в моём случае 391).

Рис. 2 - Произведено преобразование
Рис. 2 - Произведено преобразование

Вот незадача, угловые пиксели, отвечающие за прозрачность тоже сменили цвет! Пройдёмся по полученной картинке и восстановим справедливость (перебирая оригинал и находя там прозрачные пиксели):

Рис. 3 - «Прозрачные» пиксели восстановлены
Рис. 3 - «Прозрачные» пиксели восстановлены

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

Рис. 4 - Восстановлена зона чек-бокса
Рис. 4 - Восстановлена зона чек-бокса

Вот этот проход, пожалуй, не такой простой, как предыдущий. Как же это было сделано?

Если приглядеться, то совершенно очевидно, что изображение кнопки, свободное от чекбокса, в общем-то, повторяется (кроме угловых скруглений). И ровно такая же подложка находится под чек-боксом. Какой вывод? У нас есть возможность сравнивать «пустой» фон с частью, где поверх этого фона лежит чек-бокс и в случае, если расхождение в R, G или B более чем некая константа (путём простого перебора мне подошло число 25), то в раскрашенной картинке можно заменить пиксель на пиксель из оригинала.

А вот пример того, если попробовать не использовать порог, а вырезать оригинал «в лоб»:

Рис. 5 - Восстановлена зона чек-бокса без учёта порога
Рис. 5 - Восстановлена зона чек-бокса без учёта порога

Немного кода

Теперь о тонкостях реализации. В Compact Framework нет ни слова про RGB <-> HSL. Гугление достаточно быстро решило вопрос с преобразованиями — RGB <-> HSL. Но не сразу решило вопрос со скоростью преобразования. Как известно, managed код небыстр при работе с графикой, т.к. GetPixel жутко тормозит. Но и для этого решение было найдено. В MSDN-блоге про Windows Mobile обнаружился отличный пост про UnsafeBitmap для оперативных манипуляций с пикселями.

Ниже представлена функция, которая достаточно быстро раскрашивает изображение по указанным hue, saturation, brigtness, используя UnsafeBitmap:

public static Bitmap ApplyHueSaturation(Bitmap input, int hue, int sat, int brightness)
{
if (input == null)
return null;

ColorHandler.RGB rgb;
ColorHandler.HSV hsv;
UnsafeBitmap ibmp = new UnsafeBitmap(input);
UnsafeBitmap obmp = new UnsafeBitmap(new Bitmap(input.Width, input.Height));

ibmp.LockBitmap();
obmp.LockBitmap();

for (int y = 0; y < input.Height; y++) { for (int x = 0; x < input.Width; x++) { UnsafeBitmap.PixelData c = ibmp.GetPixel(x, y); rgb.Red = c.red; rgb.Blue = c.blue; rgb.Green = c.green; hsv = ColorHandler.RGBtoHSV(rgb); hsv.Hue = hue; hsv.Saturation = sat; hsv.value += brightness; if (hsv.value > 255)
hsv.value = 255;
if (hsv.value < 0) hsv.value = 0; ColorHandler.RGB r = ColorHandler.HSVtoRGB(hsv); obmp.SetPixel(x, y, (byte)r.Red, (byte)r.Green, (byte)r.Blue); } } obmp.UnlockBitmap(); ibmp.UnlockBitmap(); return obmp.Bitmap; } [/sourcecode] Работающий пример можно скачать здесь.

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

PSS.: Да, при преобразованиях для оптимизации производительности, безусловно, можно сразу игнорировать прозрачные пиксели, чтобы избежать лишнего перебора изображения. Подобные шаги продемонстрированы исключительно для наглядности процесса.

UPD: Недостаточно адаптировать изображения под текущую схему, необходимо также правильно их вывести. Скруглённые края могут остаться с фиолетовыми углами! 🙂 Читайте продолжение цикла про работу с графикой в Compact Framework.

Оригинал на Хабре.

J.

Jeffrey Richter’s Power Threading Library

Джеффри Рихтер, создал библиотеку Power Threading Library для работы с потоками и асинхронными операциями в .NET. Кроме классов для работы, непосредственно, с потоками библиотека содержит классы для работы с исключениями, парсер аргументов комендной строки, журнал изменений, API для блокировки файлов и др.

Библиотека доступна и для .NET Compact Framework.