Поиск по этому блогу

Показаны сообщения с ярлыком Phonegap. Показать все сообщения
Показаны сообщения с ярлыком Phonegap. Показать все сообщения

понедельник, 29 июня 2015 г.

Phonegap prompt. How to set input type.

В HTML для обычного поля ввода задать, данные какого типа туда можно вводить, очень просто - достаточно задать атрибут "type".

Для ввода чисел
<input type="number" name="numberTextfield"/>

Для ввода телефона
<input type="tel" name="phoneTextfield"/>

Это же прекрасно работает и в Phonegap. Появляются соответствующие клавиатуры для ввода.

А вот как задать тип клавиатуры для поля ввода, которое будет в диалоге Prompt?

Вот документация по соответствующему плагину.
http://docs.phonegap.com/en/edge/cordova_notification_notification.md.html

navigator.notification.prompt(message, promptCallback, [title], [buttonLabels], [defaultText])
Эта функция позволяет нам показывать более кастомный dislog box. Можно задать многое - callback, заголовок, текст по умолчанию и даже текст на кнопках. Но нельзя задать тип клавиатуры.

Пример использования
// Show a custom prompt dialog
function showPrompt() {
    navigator.notification.prompt(
        'Please enter your name',  // message
        onPrompt,                  // callback to invoke
        'Registration',            // title
        ['Ok','Exit']              // buttonLabels
    );
}

Еще пример со встроенным callback
window.navigator.notification.prompt(
    new String(), // message
    function(answer) {
        if (answer.buttonIndex === 1) {
            // Ok
            var newcat = answer.input1;
            transaction.executeSql("INSERT INTO cat (Name) VALUES (?)", [newcat]);
        }
        else {
            // Exit
        }
    }, // callback
    "ADD CATEGORY", //title
    ["Ok", "Exit"], // button titles
    new String() // defaultText
);

Для того чтобы его настроить нам придется лезть в исходный код плагина и дополнять его.
plugins/CDVNotification.m

Нас интересует метод
- (void)prompt:(CDVInvokedUrlCommand*)command
{
    NSString* callbackId = command.callbackId;
    NSString* message = [command argumentAtIndex:0];
    NSString* title = [command argumentAtIndex:1];
    NSArray* buttons = [command argumentAtIndex:2];
    NSString* defaultText = [command argumentAtIndex:3];
 
    [self showDialogWithMessage:message title:title 
    buttons:buttons defaultText:defaultText 
    callbackId:callbackId dialogType:DIALOG_TYPE_PROMPT];
}

В нем вызывается другой метод
    title:(NSString*)title buttons:(NSArray*)buttons 
    defaultText:(NSString*)defaultText 
    callbackId:(NSString*)callbackId dialogType:(NSString*)dialogType {
 
CDVAlertView* alertView = [[CDVAlertView alloc]
    initWithTitle:title
              message:message
             delegate:self
    cancelButtonTitle:nil
    otherButtonTitles:nil];
 
alertView.callback
 
Id = callbackId;
 
    int count = [buttons count];
 
    for (int n = 0; n < count; n++) {
        [alertView addButtonWithTitle:[buttons objectAtIndex:n]];
    }
 
    if ([dialogType isEqualToString:DIALOG_TYPE_PROMPT]) {
        UITextField* textField = [alertView textFieldAtIndex:0];
        textField.text = defaultText;
    }
 
    [alertView show];
}

Нам нужно задать полю ввода тип клавиатуры.
[textField setKeyboardType:UIKeyboardTypeNamePhonePad];

Все возможные типы клавиатур
typedef enum {
    UIKeyboardTypeDefault,                // Default type for the current input method.
    UIKeyboardTypeASCIICapable,           // Displays a keyboard which can enter ASCII characters, non-ASCII keyboards remain active
    UIKeyboardTypeNumbersAndPunctuation,  // Numbers and assorted punctuation.
    UIKeyboardTypeURL,                    // A type optimized for URL entry (shows . / .com prominently).
    UIKeyboardTypeNumberPad,              // A number pad (0-9). Suitable for PIN entry.
    UIKeyboardTypePhonePad,               // A phone pad (1-9, *, 0, #, with letters under the numbers).
    UIKeyboardTypeNamePhonePad,           // A type optimized for entering a person's name or phone number.
    UIKeyboardTypeEmailAddress,           // A type optimized for multiple email address entry (shows space @ . prominently).
    UIKeyboardTypeDecimalPad,             // A number pad including a decimal point
    UIKeyboardTypeTwitter,                // Optimized for entering Twitter messages (shows # and @)
    UIKeyboardTypeWebSearch,              // Optimized for URL and search term entry (shows space and .)
 
    UIKeyboardTypeAlphabet = UIKeyboardTypeASCIICapable, // Deprecated
 
} UIKeyboardType;


понедельник, 7 апреля 2014 г.

Android. How to create Key Hashes for Your Facebook Application

Для подключения Facebook логина к вашему Android приложению нам понадобится прежде всего создать само приложение на сайте для разработчиков
Там созданное приложение получит APP ID. Также нам понадобится файл ключа (файл *.keystore), которым будет подписываться само Android приложение и пароль к нему. На сайте https://developers.facebook.com/ там, где создадите ваше приложение, необходимо зайти в раздел Settings, нажать там кнопку Add Platform и добавить Android. Там необходимо будет ввести значение пакеджа вашего приложения и класса активити, из которого будет запускаться логин через Facebook. Так же там будет еще одно интересное поле - Key Hashes. Это поле для ввода хэш-ключей которые будут связывать ваше Android-приложение c Facebook. Далее я расскажу как сгенерировать эти ключи.


четверг, 6 февраля 2014 г.

Ускоряем 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/

четверг, 5 декабря 2013 г.

Save application data on mobile device in phonegap with WebSQL

Как хранить настройки приложения сделанного в PhoneGap. Например, необходимо чтобы пользователь ввел какие-то настройки в приложении, сохранил их и при следующем запуске программы настройки загрузились и выставились в приложении. Для этого нам понадобится WebSQL.



Сохраняем параметры в базу данных. Открываем соединение с базой и пытаемся добавить данные.
saveSearchSetting: function () {
 
   ... 
 
   var db = window.openDatabase("saved_settings", "1.0", "SEARCH_SETTINGS DB", 1000000);
   db.transaction(page.populateDB, page.errorCB);
 
}

Заполняем базу данных.
populateDB: function (tx) {
  tx.executeSql('DROP TABLE IF EXISTS SEARCH_SETTINGS');
  tx.executeSql('CREATE TABLE IF NOT EXISTS SEARCH_SETTINGS (id unique, paramName, paramValue)');
  tx.executeSql('INSERT INTO SEARCH_SETTINGS (id, paramName, paramValue) VALUES (1, "fromCity", "' + page.fromCity + '")');
  tx.executeSql('INSERT INTO SEARCH_SETTINGS (id, paramName, paramValue) VALUES (2, "toCity", "' + page.toCity + '")');
  tx.executeSql('INSERT INTO SEARCH_SETTINGS (id, paramName, paramValue) VALUES (3, "deviceName", "' + page.deviceName+ '")');
  tx.executeSql('INSERT INTO SEARCH_SETTINGS (id, paramName, paramValue) VALUES (4, "categories", "' + page.categories+ '")');
  tx.executeSql('INSERT INTO SEARCH_SETTINGS (id, paramName, paramValue) VALUES (5, "types", "' + page.types+ '")');
  tx.executeSql('INSERT INTO SEARCH_SETTINGS (id, paramName, paramValue) VALUES (6, "pageNumber", "' + page.pageumber+ '")');
}

Загружаем сохраненные настройки. Пытаемся подключится к базе данных.
loadSavedSearchSettings: function () {
  var db = window.openDatabase("saved_settings", "1.0", "SEARCH_SETTINGS DB", 1000000);
  db.transaction(page.queryDB, page.errorCB);
}

Если подключится к базе удалось, тогда пытаемся выполнить запрос к базе данных.
queryDB: function(tx) {
  tx.executeSql('SELECT * FROM SEARCH_SETTINGS', [], page.querySuccess, page.errorCB);
}

Обработчик в случае ошибки при обращении к базе данных.
errorCB: function (err) {
  page.findGeolocation();
}

Если удалось получить данные в результате запроса к базе, то тогда сохраняем эти данные в переменные, которые потом используем для заполнения форм ввода на экране.
querySuccess: function(tx, results)  {
  var len = results.rows.length;
  for (var i=0; i<len; i++){
    if (results.rows.item(i).id == 1) {
      page.fromCity =  results.rows.item(i).paramValue;
    }
    if (results.rows.item(i).id == 2) {
      page.toCity =  results.rows.item(i).paramValue;
    }
    if (results.rows.item(i).id == 3) {
      page.deviceName=  results.rows.item(i).paramValue;
    }
    if (results.rows.item(i).id == 4) {
      var str =  results.rows.item(i).paramValue;
      page.categories = str.split(",");
    }
    if (results.rows.item(i).id == 5) {
      var str =  results.rows.item(i).paramValue;
      page.types = str.split(",");
    }
    if (results.rows.item(i).id == 6) {
      page.pageNumber = results.rows.item(i).paramValue;
    }
  }
  page.fillForm();
}

PhoneGap findGeoLocation script and GeoLocationPlugin

Необходимо было встроить в мобильное приложение определение текущей геопозиции, причем не просто координат, а именно название населенного пункта. Отыскал скрипт, который определяет геокоординаты  и на основании этих геокоординат определяет название населенного пункта. Исходный скрипт был предназначен для работы только в браузере. Функциональность этого скрипта нужно было использовать в нашем мобильном приложении, которое делается с применением технологии Phonegap.


суббота, 12 октября 2013 г.

Как добавить рекламу AdMob в Android PhoneGap приложение

PhoneGap это инструмент, позволяющий разрабатывать приложения на JavaScript и конвертировать их в нативные приложения мобильных платформ (такие как Android и iOS). AdMob это платформа для подключения рекламных баннеров в ваше приложения за просмотры и клики по которым можно получать деньги. Здесь я расскажу, как подключить к Android PhoneGap приложению рекламу от Google AdMob. Для этого понадобится сделать следующее

1. Зарегистрироваться в AdMob и получить Publisher ID для подключения рекламного баннера.
2. Внести изменения в Android проект для отображения рекламного баннера