Pull to refresh

Пользовательский интерфейс мобильного приложения

Reading time2 min
Views1.3K

JSR 226: SVG + mobile AJAX


Сейчас вы можете увидеть как традиционное MIDP приложение, построенное на lcdui.*, может быть переработано с использованием SVG и JSR 226. Исходный код обоих приложений доступен под BSD лицензией.

Используя SVG и JSR 226 можно улучшить процесс разработки, сделать ваши приложения значительно привлекательней и усовершенствовать их юзабилити.

Смотрите скринкаст



или читайте.

Подход к изменению


Ниже описано то, как переработано существующее приложение под название «Local Business Search» из lcdui.* в SVG GUI
Приложение «Local Business Search» состоит из трёх экранов: экран запроса, экран результатов, и экрана с картой. Севрис «Yahoo! Local» используется для поиска и доставки информации о фирмах, которая потом отображается в приложении.

Логика, лежащая в основе приложения, останется нетронутой и переделан только пользовательский интерфейс.

Можно заменить существующие экраны и добавить анимацию. Дальше можно улучшить юзабилити, используя возможности SVG для создания анимированных компонентов, таких, как прокручивающиеся листы и переходы. И наконец продолжая улучшать UI можно добавить слои и прозрачность.

Не все изменения были осуществлены: слои и прозрачность отложены на потом.

До и после


А вот и скриншоты. Слева оригинал, справа SVG версия. Вы видите — изменения впечатляющие.
Оригинальный экран запроса Новый экран
с мигающим курсором
и прокручивающимися
горизонтальными полями
ввода
a
s
Оригинальный экран с результатами Новый экран
с анимированной прокурткой
и масштабированием
a
s
Новый экран
с описаним результата
a
Оригинальный экран с картой Новый экран
— никаких визуальных
изменений
a
s


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

Оригинал статьи, на ней же ссылка на исходники
Телефоны, поддерживающие JSR 226
Проект Mobile Ajax
Tags:
Hubs:
Total votes 20: ↑16 and ↓4+12
Comments16

Articles