В предыдущем материале «Навигация и софт клавиши в приложениях» было показано, как осуществить перемещение фокуса между объектами на экране, и осуществить взаимодействие с выбранным элементом. Однако, выделение элементов было неявным, да и расположение футера не соответствовало норме.
Для правильного отображения элементов на экране, необходимо использовать каскадные таблицы стилей (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
Во время запуска приложения в симуляторе возможно неправильное отображение фонового рисунка (его размер может не совпасть с размером окна телефона), что не является ошибкой в коде.