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

Для правильного отображения элементов на экране, необходимо использовать каскадные таблицы стилей (CSS). Возьмём файл index.html из прошлого материала, добавим в него несколько дополнений. Вначале подключим внешний css файл, а также добавим «шапку» программы (header). В итоге получем следующее:

<!DOCTYPE html>
<html>
<head>
<script src="/app.js" defer></script> 
<link rel="stylesheet" type="text/css" href="/css.css"> <!-- Внешний css файл -->
<meta charset="utf-8">
</head>
<body>
<header>Наша программа </header> <!-- Заглавие программы-->
<br>
<input type="checkbox" tabIndex=0 class="items"> Чекбокс
<br>
<input type="radio" name="opt" tabIndex=1 class="items"> Первый <br>
<input type="radio" name="opt" tabIndex=2 class="items"> Второй <br>
<a href="/link.html" tabIndex=3 class="items">Ссылка</a>
<footer class="softkey"> 
<table><tr>
<th><div id="softkey-left">Left</div></th>
<th><div id="softkey-center">Ok</div></th>
<th><div id="softkey-right">Right</div></th>
</tr></table>
</footer>
</body>
</html>

Для того, чтобы при переходе на checkbox или radiobutton выделялась не только сама метка, а и текст рядом с ней, модифицируем наши переключатели следующим образом:

<input type="checkbox" tabIndex=0 class="items" id="check1">
<label for="check1">Чекбокс</label> 
<br>
<input type="radio" name="opt" tabIndex=1 class="items" id="rad1"> 
<label for="rad1">Первый</label> <br>
<input type="radio" name="opt" tabIndex=2 class="items" id="rad2">
<label for="rad2">Второй</label> <br>

Мы добавили тег «label» для наших переключателей, и ввели дополнительный атрибут «id», чтобы связать label с checkbox или radiobutton соответственно.

На этом модификацию файла мы не завершим. Добавим к нашему футеру несколько атрибутов классов. В итоге, наш футер будет выглядеть так:

<footer class="softkey"> 
<table class="ctable"><tr>
<th class="cth"><div id="softkey-left" class="othkey">Left</div></th>
<th class="cth"><div id="softkey-center" class="okkey">Ok</div></th>
<th class="cth"><div id="softkey-right" class="othkey">Right</div></th>
</tr></table>
</footer>

Оставим файл index.html в покое, и создадим новый файл - css.css. Начнём его заполнять содержимым: 

header { 
  display:block;
  position: fixed;
  background: gray;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  font-family: 'Open Sans Light';
  font-size: 17px;
  color: #ffffff;
}

В этом блоке мы описали, как следует отображать шапку нашего сайта (хедер). Разберём этот пример по подробнее:

  • display:block - этим мы показываем, что элемент будет блочным (т.е. в виде прямоугольного блока).
  • position: fixed - фиксируем позицию хедера (при перемещении материала, он будет всегда отображаться вверху экрана).
  • background: gray - цвет подложки, в нашем случае серый.
  • left: 0 - положение относительно левого края экрана (0 - не сдвигать).
  • top: 0 - положение относительно верхнего края экрана (0 - не сдвигать).
  • width: 100% - блок занимает всю ширину экрана.
  • text-align: center - выравнивание текста по центру.
  • font-family: 'Open Sans Light' - шрифт текста.
  • font-size: 17px - размер текста.
  • color: #ffffff - цвет текста.

Обратите внимание, что шрифт и его размер выбран не случайно. Дело в том, что для разработчиков обозначены жёсткие требования по дизайну управляющих элементов. Всю информацию по этим параметрам вы можете посмотреть на https://developer.kaiostech.com/design-guide.

Теперь добавим в наш css файл данные по отображению футера.

footer {
    background: gray;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
}

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

.okkey {
  font-family: 'Open Sans Bold';
  font-size: 16px;
}

.othkey {
  font-family: 'Open Sans Regular';
  font-size: 14px;
}

.ctable {
  width: 100%;
}

.cth {
  width: 33%;
}

Где класс «okkey» отвечает за центральную клавишу, а «othkey» за боковые софт клавиши. В классе «ctable» мы указали, что наша однострочная таблица (которая заключена в футер) будет на всю ширину экрана, а в классе «cth», что подписи к софт клавишам будут равной ширины (треть ширины экрана).

Теперь сделаем так, чтобы при выделении checkbox или radiobutton выделялся не только переключатель, но и текст рядом с ним. Для этого добавим следующее:

input[type=checkbox]:focus + label {
  color: #f00;
  font-style: normal;
  background: #000000;
} 

input[type=radio]:focus + label {
  color: #f00;
  font-style: normal;
  background: #000000;
}

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

.items:focus {
  background: #000000;
}

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

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

На данный момент, операционная система KaiOS поддерживает только одно разрешение экрана: 240х320 пикселей (в портретном и ландшафтном исполнении). В этом есть одно хорошее преимущество - вам не нужно делать «резиновый» дизайн, вы можете чётко прописывать размеры элементов в пикселях. Для того, чтобы различать, какие элементы использовать в ландшафтном исполнении, а какие в портретном, необходимо прописать это в css файле. Сделаем это на примере. Добавим в наш файл css.css следующее:

@media only screen and (orientation : portrait) {
 body {
  background-image: url("port.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
}
}

@media screen and (orientation: landscape) {
  body {
  background-image: url("land.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
}
}

И, положим в корневой каталог нашей программы два файла. Один - port.jpg, разрешением 240х320 пикселей (для портретной ориентации), другой - land.jpg, разрешением 320х240 пикселей (для вертикальной ориентации). Если вы все сделали правильно, то после запуска приложения, вы увидите нечто подобное:

Симулятор KaiOS

Портретная ориентация симулятора KaiOS

Симулятор KaiOS

Ландшафтная ориентация симулятора KaiOS

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

Добавить комментарий

Защитный код
Обновить