Иво Салмре - Программирование мобильных устройств на платформе .NET Compact Framework

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

Рис. 13.6. Отображение пользовательского интерфейса в верхней части формы

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

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

Рис. 13.7. Отображение пользовательского интерфейса в нижней части формы

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

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

Пример кода, демонстрирующий две различные модели компоновки для одного и того же приложения

Приведенный в листинге 13.1 код вносится в форму в проекте Pocket PC. Для создания и запуска приложения потребуется выполнить следующие действия:

1. Запустите Visual Studio .NET (2003 или более позднюю версию) и выберите в качестве типа приложения C# Smart Device Application.

2. Выберите в качестве целевой платформы Pocket PC. (Для вас будет автоматически создан проект, и на экране появится окно конструктора форм Pocket PC.)

3. Добавьте в форму перечисленные ниже элементы управления. Примечание. Пусть вас не волнуют точные размеры и расположение этих элементов управления; разместите их так, чтобы вам было удобно работать с ними на экране. Размеры и расположение элементов управления динамически изменяются во время выполнения приведенным ниже кодом пользовательского интерфейса.

 • TextBox; переименуйте его в textBoxAskQuestion, установите значение true для его свойств MultiLine и ReadOnly.

 • PictureBox; переименуйте его в pictureBoxGameBoard.

 • Button; переименуйте его в buttonShowAnswers_AdvancedVersion.

 • Button; переименуйте его в buttonShowAnswers_SimpleVersion.

 • Button; переименуйте его в buttonAskQuestion.

 • Button; переименуйте его в buttonAnswer0. 

 • Button; переименуйте его в buttonAnswer1. 

 • Button; переименуйте его в buttonAnswer2.

 • Button; переименуйте его в buttonAnswer3.

 • Button; переименуйте его в buttonAnswer4. 

 • Button; переименуйте его в buttonAnswer5. 

4. Дважды щелкните на пустом участке формы в окне конструктора форм и введите приведенный ниже код Form_Load в автоматически сгенерированную и подключенную функцию обработчика событий.

5. Поочередно переходя от одной из вышеперечисленных кнопок Button к другой, щелкните на кнопке в окне конструктора форм. Введите приведенный ниже код button<ИмяКнопки>_Click в автоматически сгенерированную и подключенную функцию обработчика событий.

6. Введите оставшуюся часть приведенного ниже кода.

7. Установите для свойства MinimizeBox формы значение false. Благодаря этому во время выполнения приложения в верхней правой части формы появится кнопка OK, с помощью которой вы сможете легко закрыть форму и выйти из приложения. Эта возможность оказывается очень полезной при многократном тестировании приложения

8. В самом верху файла кода формы введите в качестве первой строки #define PLAYFIELD_ON_BOTTOM. 

9. Дважды запустите приложение: один раз с подключенной директивой условной компиляции #define PLAYFIELD_ON_BOTTOM, а второй — с предварительным отключением этой же директивы при помощи символов комментария (то есть //#define PLAYFIELD_ON_BOTTOM), и отметьте для себя различия между двумя моделями компоновки. Запустите оба варианта на физическом устройстве и выясните, какая модель является более предпочтительной с точки зрения внешнего вида приложения и удобства работы с ним, а также возможностей обзора игрового поля.

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

//--------------------------------------------------------------------------

//Конечный автомат, который управляет отображением кнопок, закрываемых рукой

//--------------------------------------------------------------------------

private enum GameUIState {

 startScreen = 1,

 waitForNextQuestion = 2,

 waitForUserToStateKnowledge = 4,

 waitForUserToAnswerMultipleChoice = 8

}

//Текущее состояние игры

private GameUIState m_GameUIState;

//==========================================================================

//Конечный автомат, используемый для управления пользовательским интерфейсом

//==========================================================================

private void StateChangeForGameUI(GameUIState newGameUIState) {

 m_GameUIState = newGameUIState;

 switch (newGameUIState) {

 case GameUIState.startScreen:

  buttonAskQuestion.Visible = true;

  buttonAskQuestion.Text = "Start";

  //Скрыть текстовое окно

  textBoxAskQuestion.Visible = false;

  SetAnswerButtonVisibility(false);

  SetDifficultyButtonVisibility(false);

  break;

 case GameUIState.waitForNextQuestion:

  setQuestionText("List answer details here... rn" +

   "Lots of space to write...rn" +

   "Waiting for user to select next question...");

  textBoxAskQuestion.Visible = true;

  buttonAskQuestion.Text = "Next";

  buttonAskQuestion.Visible = true;

  //Убедиться в том, что кнопка отображается на переднем плане

  buttonAskQuestion.BringToFront();

  SetAnswerButtonVisibility(false);

  SetDifficultyButtonVisibility(false);

#if PLAYFIELD ON_BOTTOM //ПОЛЕ ИГРЫ располагается под пользовательскими

                        //элементами управления

  textBoxAskQuestion.Height = pictureBoxGameBoard.Top - 2;

#else //ПОЛЕ ИГРЫ располагается над пользовательскими