Pull to refresh

Работа с формами, списками и «табами» в Samsung Bada

Reading time 5 min
Views 1.6K
Доброго времени суток!
В топике кратко изложены основные сведения с примерами кода, иллюстрирующие работу с некоторыми пользовательскими элементами управления и формами на платформе Samsung Bada. Пример приложения с кнопками, полями ввода и надписями (Label) имеется здесь. Кому интересно — просим под кат.



Формы


В документации к Bada формой называют основную область экрана мобильного устройства, которую занимает приложение и делят на три части:
  1. Область индикаторов (Indicator area) — предназначенная для функций системы, которые отображают её текущее состояние, а также уровень сигнала, заряда и т.д.
  2. Клиентская область (Client area)- основная часть экрана, предназначенная для отображения графической составляющей приложения.
  3. Командная область (Command area) — нижняя часть экрана, предназначенная для программных кнопок (Softkey) и опционального меню (Option menu)


Схема этого (картинка из документации) выглядит следующим образом:



В Samsung Bada есть несколько типов приложений (в том числе и основанные на Flash), но здесь пока рассматриваются только «form-based». Как же с ними работать?

Посмотрим на схему (тоже из документации):



Основой Bada-приложения является «Frame» — главное «окно» приложения, которое может быть только одно.
«Frame» управляет своим визуальным состоянием при помощи форм, которых может быть сколько угодно (вернее, сколько позволят аппаратные ресурсы смартфона). Исходя из этого, порядок работы с формами выглядит так:

  • Получаем ссылку на Frame, чтобы иметь возможность добавить к нему форму и отобразить её
  • Собственно, создаем форму
  • Присоединяем к Frame, если надо, делаем её текущей и «просим отрисоваться»


Надо заметить, что формы в Bada можно создать двояко — либо при помощи GUI-дизайнера, либо из кода. Теплые воспоминания о Delphi заставляют начать меня с первого варианта.

Создав «form-based» приложение (там вполне очевидный мастер), вы сразу получите некую форму, на которой среда уже разместила кнопку. Добавим еще одну форму и визуально заполним её некими элементами управления — для этого в окне Resources среды найдите узел Forms, кликните по нему правой кнопкой мыши и в очевидном Insert Wizard выберите флажком размер новой создаваемой формы. Она отобразится в ресурсах как IDF_FORM2 (с точностью до цифры). Изменить визуальные свойства формы можно во вкладке Properties среды разработки; перенесите на форму из GUI-дизайнера и какие-нибудь элементы управления, чтобы вторая форма как-то отличалась от первой — кнопку, допустим или таймер.

Теперь код.

В заголовочном файле класса формы добавим включение (include) в проект <FApp.h>, чтобы располагать возможность работать с объектом Application и через него влиять на «Frame». Тут же в protected-секции добавим ссылку на новую форму:

Osp::Ui::Controls::Form *__newForm;


Вернемся в реализацию класса, там найдем метод ActionPerformed с шаблоном обработки идентификаторов событий (для деталей — вверху ссылка на мой первый топик для новичков) и там напишем следующий код:

 switch(actionId)
	{
	case ID_BUTTON_OK:
		{

			Frame *pFrame = Application::GetInstance()->GetAppFrame()->GetFrame();
			 __newForm = new Form();
			 __newForm->Construct(L"IDF_FORM1");
			 pFrame->AddControl(*__newForm);
			 pFrame->SetCurrentForm(*__newForm);
                        __newForm->Draw();
                       __newForm->Show();


		}
		break;
	default:
		break;
	}



Что там происходит? Получаем ссылку на «Frame» приложения, создаем форму из ресурсов проекта, используя её имя (можно было изменить на вкладке Properties), затем добавляем форму к «Frame», делаем её текущей и показываем.

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

Второй вариант создания формы — «программно».

Приведу сразу код:


Form* pForm = new Form();
    
pForm->Construct(FORM_STYLE_TITLE | FORM_STYLE_INDICATOR | FORM_STYLE_SOFTKEY_0 | FORM_STYLE_OPTIONKEY);

Frame *pFrame = Application::GetInstance()->GetAppFrame()->GetFrame();
pFrame->AddControl(*pForm);

pForm->Draw();
pForm->Show();



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

Списки


Посмотрим как на форме создать простой текстовый список — крайне упрощенную версию телефонной книги, например. Для этого имеется GUI-компонент с соответствующим названием List — его и надо расположить на форме неким удобным для вас образом (все же обычно он занимает всю форму:). Имея список на форме, перейдите на вкладку его свойств в среде и измените их значения:

  • List Style на LIST_STYLE_NORMAL, давая понять системе, что мы хотим видеть «обычный» список, а не числовой или с радиокнопками (впрочем, тут вполне можно экспериментирвоать)
  • List Item Format на LIST_ITEM_SINGLE_TEXT, это приведет с созданию простого списка, без картинок
  • Column1 Width — очевидное свойство, я выставил его в 200, то есть в ширину формы
  • Row 1 Height — не менее очевидное свойство, оно у меня равно 50, чтобы элемент списка не был слишком «толстым»


Получим на форме нечто вроде этого:



И, собственно, код, который надо добавить в метод инициализации формы OnInitializing(void):

        // сам список, находящийся на форме
        __pSimpleList = static_cast<List *>(GetControl(L"IDC_LIST1"));

       // добавляем  элементы списка 
	__pSimpleList->AddItem(&String("Item1"), null, null, null, 0);
	__pSimpleList->AddItem(&String("Item2"), null, null, null, 1);
	__pSimpleList->AddItem(&String("Item3"), null, null, null, 2);
	__pSimpleList->AddItem(&String("Item4"), null, null, null, 3);
	__pSimpleList->AddItem(&String("Item5"), null, null, null, 4);



Первая строка — получение ссылки на сам List, следующие строки — добавление пяти элементов к списку. Метод AddItem списка объявлен в SDK следующим образом:

result Osp::Ui::Controls::List::AddItem
        ( const Osp::Base::String *      pText1,
          const Osp::Base::String *     pText2,
          const Osp::Graphics::Bitmap *     pBitmap1,
          const Osp::Graphics::Bitmap *     pBitmap2,
          int   itemId = 0
              )


— здесь pText1 и pText2 — пара строк, pBitmap1 и pBitmap2 — пара картинок и itemId — идентификатор элемента списка, если требуется обрабатывать нажатие на него. Тут, кстати, кроется некая загадка разработчиков SDK — пара строк pText1 и pText2 может понадобиться для стиля списка, который называется LIST_ITEM_DOUBLE_FULLTEXT_TEXT_IMAGE, который отображает две строки и некую картинку, а вот зачем нужен pBitmap2 — вопрос, так как никакого подходящего стиля (который бы одновременно отображал две картинки) я не нашел. Хотя, может я-таки чего-то и не понял ещё:)

Запускаем симулятор и любуемся на результат:



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

«Табы»


Здесь все тоже довольно просто. Для формы, которую вы хотите снабдить «табами» в её свойствах надо установить Show Tab в одно из нужных значений Text Tab или Icon Tab (смысл свойств очевиден, не так ли?). Вверху формы появится пустое место под страницы-«табы», которые мы добавим «программно» в OnInitializing(void) формы.

    // получаем ссылку на "табы"
    Tab* pTab = GetTab();

    // добавляем их, второй параметр - номер "таба"
    pTab->AddItem(L"1st", 0);
    pTab->AddItem(L"2nd", 1);
    pTab->AddItem(L"3d", 2);



Запускам симулятор и видим:



По-моему, просто:) Но тут надо сделать замечание. Уже ясно, что «табы» могут иметь не только текстовые, но и графические заголовки, причем одновременно на экране могут быть видны 3 текстовых и 4 графических «таба». Если их больше, то рядом отображается кий («cue» — в терминах SDK), дающий возможность понять, что «табы» можно пролистать.


Спасибо за внимание! Надеюсь, этот топик кому-нибудь поможет, если возникнет необходимость поработать для Bada. Удачи;)
Tags:
Hubs:
+4
Comments 3
Comments Comments 3

Articles