jQuery Mobile center popup on show

Для того чтобы разместить POPUP при появлении точно по центру экрана можно обрабатывать событие POPUPAFTEROPEN. В нем считать отступы сверху и слева и задавать их для POPUP.

$('#popupMenu').on('popupafteropen', function () {
    var centerX = ($(document).width() - $('.ui-popup-container').width())/2;
    var centerY = ($(document).height() - $('.ui-popup-container').height())/2;
      $('.ui-popup-container').css({
        top: centerY,
        left: centerX
    });
});

jQuery Mobile: Последовательность событий страницы

При переходе со страницы A на станицу B следующие события вызываются

page B---pagebeforecreate

page B---pagecreate

page B---pageinit

page A---pagebeforehide

page B---pagebeforeshow

page A---pageremove

page A---pagehide

page B---pageshow

Вот схема из книги по jQuery Mobile, на которой наглядно показана последовательность, в которой происходят события страницы.

Купить  книгу можно на Amazon

http://www.amazon.com/Pro-jQuery-Mobile-Brad-Broulik/dp/1430239662/ref=sr_1_9?s=books&ie=UTF8&qid=1320859255&sr=1-9

Ускоряем Phonegap

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

Что делать для повышения скорости работы приложения

1. Библиотека fastclick. Ускоряем нажатие кнопок

fastclick - библиотека, которая ускоряет нажатие на кнопки в мобильном браузере. Эта библиотека устраняет задержку в 300 мс между физическим нажатием на экран телефона и вызовом события click в мобильных браузерах. Причина такой задержки в мобильных браузерах следующая.

Мобильные браузеры будут ждать около 300 мс с момента, когда вы нажмете кнопку, чтобы инициировать событие click. Причина этого в том, что браузер ждет, чтобы определить, на самом ли деле вы выполняете двойное нажатие.   

2. Отключаем часть CSS

Причиной медленной работы приложения также могут быть тени и круглые углы элементов. Которые мы и отключим.

* {
text-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius:0 !important;
-webkit-border-top-left-radius:0 !important;
-webkit-border-bottom-left-radius:0 !important;
-webkit-border-bottom-right-radius:0 !important;
-webkit-border-top-right-radius:0 !important;
}

Поместите этот код в конец CSS файла.

3. Отключаем градиент

За место CSS градиента лучше использовать заранее сделанные картинки с градиентным фоном

4. Отключаем эффекты jQueryMobile

В методе mobileinit прописать следующий код

$(document).on("mobileinit", function () {
 
  ...
 
  $.mobile.autoInitializePage = false;
  $.mobile.defaultPageTransition = 'none';
  $.mobile.touchOverflowEnabled = false;
  $.mobile.defaultDialogTransition = 'none'; 
 
  ...
 
});

5. Не используйте много изображений в разных файлах

Не используйте много изображений/значков на одной странице. Скомпонуйте все изображения в одно изображение и используйте CSS спрайт. Как сделать спрайт я написал тут.

Источники

http://stackoverflow.com/questions/19849637/how-to-use-fastclick-js-with-phonegap-and-jqm
http://phonegap-tips.com/articles/fast-touch-event-handling-eliminate-click-delay.html
http://publish.illinois.edu/weiyang-david/2013/06/05/phonegap-app-problemssuggestions/
https://github.com/ftlabs/fastclick
http://www.codefessions.com/2012/09/creating-native-user-experience-with.html
http://www.codefessions.com/2012/10/improving-performance-of-html5-based.html
http://codedrop.com.au/blog/phonegap-performance-tips
http://therockncoder.blogspot.ru/2012/06/three-quick-performance-tips-for.html
http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/
http://www.adobe.com/devnet/phonegap/articles/apple-application-rejections-and-phonegap-advice.html
http://www.tricedesigns.com/2013/01/18/my-workflow-for-developing-phonegap-applications/
http://www.tricedesigns.com/
http://stackoverflow.com/questions/12081226/phonegap-jquery-mobile-improvements/12081339#12081339
http://stackoverflow.com/questions/12081226/phonegap-jquery-mobile-improvements/12081339#12081339
http://stackoverflow.com/questions/8208679/android-performance-jquery-phonegap-issue
http://stackoverflow.com/questions/13904315/android-webview-late-rendering/14010732#14010732
https://groups.google.com/forum/#!topic/phonegap/bv3lLlsgr74
http://coenraets.org/blog/2013/05/top-10-performance-techniques-for-phonegap-applications/

Полезные книги по Web Технологиям

Решил публиковать полезные книги по Web -технологиям. Ведь настоящий мастер всегда должен читать много литературы по своему профилю. Так как последнее время занимаюсь jQuery Mobile, то первая книга это

1. Pro jQuery Mobile

Официальный сайт издательства http://www.apress.com/9781430239666

Год: 2011

Автор: Brad Broulik

Издательство: Apress

Язык: Английский

Количество страниц 268 

Уровень пользователя: От среднего до продвинутого

Доступные форматы: EPUB, MOBI, PDF

jQuery Mobile: Обработка динамически добавляемых элементов

В jQuery Mobile при динамическом добавлении элементов на страницу может возникнуть проблема с корректным отображением добавленных элементов. Любой виджет ('элемент) jQuery Mobile может быть динамически обновлен после добавления.

Динамически добавленный список до обновления

Динамически добавленный список после обновления

jQuery Post Request with $.ajax

Как передать JSON на сервер с помощью jQuery. Для этого нам понадобится отправить на сервер POST-запрос и прикрепить к нему нужный нам JSON. Допустим надо отправить на сервер JSON следующего вида {"userEmail": "xxx@xx.xx", "password":"xxxx"}. Для этого нам понадобится метод jQuery $.ajax().
1. Указываем тип запроса type: "POST"
2. Указываем тип пересылаемых и принимаемых данных 

accept: "application/json",
contentType:"application/json",
dataType:"json",

3. Формируем JSON, который будем отправлять

data:JSON.stringify({ "userEmail": "xxx@xx.xx", "password":"xxxxxx" })

Клиентская часть на jQuery

$.ajax(
  {
    type: "POST",
    accept: "application/json",
    contentType:"application/json",
    dataType:"json",
    data:JSON.stringify({ "userEmail": "xxx@xx.xx", "password":"xxxxxx" }),
    url:"http://someservice/rest/users/authorize",
    success: function(response) {
    },
    error: function() {
      alert("LOGIN FAIL");
    }
  }
);

Серверная часть на Java

@Path("/users")
public class UserResource extends AbstractCrudResource<User> {
 
  private UserManager manager = UserManager.getInstance();
 
  private UserDao userDao = UserDao.getInstance();
 
  @POST
  @Produces(MediaType.APPLICATION_JSON)
  @Path("/authorize")
  public Response authorize(@Context HttpServletRequest request, 
    UserDTO userDTO) {
    if (userDTO.getUserEmail() != null) {
      User user = manager.retrieveUserByEmail(userDTO.getUserEmail());
      if (user != null) {
        if (user.getPassword().equals(
          userDao.getPasswordMD5Hash(userDTO.getPassword()))) {
 
          ...
 
        }
      }
    }
  }
}

Модель данных JSON которой пересылается 

public class UserDTO {
 
  private Long id;
 
  private String password;
 
  private String userEmail;
 
}

jQuery Mobile Remote AutocompleteView. Доделываем и исправляем баги.

Элемент AutoComplete - это поле ввода, в котором после ввода в него определенного количества символов появляется список возможных вариантов. Например, вводим несколько букв из названия города и появляется список возможных городов. Пример на jQuery Mobile можно посмотреть тут.
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/autocomplete/

Пример со списком городов, которые еще и загружаются при помощи вызова удаленного метода здесь.
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/autocomplete/autocomplete-remote.html

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

Задачи

1. По нажатию на элемент списка добавлять этот элемент в поле ввода и закрывать список
2. Устранить баг с выводом пустой строки (Пустая строка выводится в том случае если введено три или более символов но совпадений не найдено)

Делаем Sprite для jQuery Mobile

Спрайт (в данном случае речь идет о CSS-спрайте) - это рисунок, внутри которого располагаются несколько изображений. Спрайт применяется для ускорения работы приложения, так как нужно будет загрузить только одно изображение и потом уже брать кусочки этого изображения и применять их в своем приложении. Для того чтобы получить необходимый кусочек спрайта необходимо использовать CSS. Я хочу рассказать о том, как создать вот такой спрайт и как его использовать.

Справочник полезных рецептов для jQuery Mobile

1. Как в jQueryMobile динамически поменять у кнопки атрибут data-theme (jQueryMobile changing button data-theme dynamically) 

Есть кнопка, которой задана определенная тема (Пока не все пользователи присоединились кнопка серая). При определенном событии (когда присоединились все пользователи) необходимо менять тему этой кнопки.

<a id="waiting_users" data-role="button" 
data-theme="c" data-inline="false" >Waiting for Players...</a>

Кнопка в исходном состоянии

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

changeButtonTheme: function (id, theme) {
  var currentTheme = $("#" + id).attr('data-theme');
  $("#" + id).attr("data-theme", theme)
    .removeClass("ui-btn-up-" + currentTheme)
    .addClass("ui-btn-up-" + theme);
}

Вызываем наш метод и передаем в него id кнопки и новую тему

changeButtonTheme("waiting_users", "a");

Кнопка после изменения темы