CTAPbIu_MABP's BLOG » progress bar

Пример модальных диалогов для Android

CTAPbIu_MABP — Wed, 16 Sep 2009 20:56:17 +0000

Здравствуйте, дорогие слушатели, сегодня в нашем подкасте вы узнаете о том как создать ~~красивый~~ стандартный индикатор загрузки в своем приложении... Ой, а что, никто не записывает?! Ну, ладно... тогда проговаривайте (можно про себя) текст и думайте что это подкаст.

И нет, я не курил, просто настроение хорошее.

В общем решил показать массам как выглядит код моего e-banking'a. Но что-то меня берёт жадность (нету духа опенсорса) показывать именно код приложения, поэтому я тут по-быстрому сговнял классик, который показывает на экране кнопку при нажатии на которую вылазит алерт с вопросом да/нет, при нажатии на "да" вылазит прогрессбар и потом пропадает а при нажатии на "нет" - ничего не происходит.

Кстати, я уже скачал себе новую SDK 1.6. Так что можете сравнить вид эмуляторов. Ну и раз уж я заговорил о ней то надо сказать что наличие новых методов для работы с CDMA, я не оценил, зато заметил что починили баг c URLConnection, а это не может не радовать :).


package ua.kiev.mabp;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.Dialog;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

import java.util.Random;

public class MyActivity extends Activity {

    // список диалогов
    private static final int CONFIRM = 1;
    private static final int PROGRESS = 2;

    // счетчик вызовов
    private int counter;

    /**
     * Метод вызывается один раз при создании активности
     *
     * @param savedInstanceState предыдущее состояние активности
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Создаем кнопку
        Button button = new Button(this);
        button.setText("click me!");
        // вешаем на неё листенер
        button.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                // котрый покажет диалог CONFIRM
                showDialog(CONFIRM);
            }
        });
        // сетим кнопку в основной лайаут
        setContentView(button, new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT));
    }

    /**
     * Метод вызывается один раз на каждый диалог
     *
     * @param id номер диалога онисан в начале класса
     * @return диалог
     */
    @Override
    protected Dialog onCreateDialog(int id) {
        super.onCreateDialog(id);
        switch (id) {
            case CONFIRM:
                // новый лайаут для диалога
                LinearLayout confirmView = new LinearLayout(this);

                // создаем диалог с параметрами и двумя кнопками
                return new AlertDialog.Builder(MyActivity.this)
                        .setIcon(android.R.drawable.ic_dialog_info)
                        .setView(confirmView)
                        .setTitle("Title")
                        .setMessage("Message")
                        // положительная кнопка с листенером который показывает диалог PROGRESS
                        .setPositiveButton("Click me!", new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog, int whichButton) {
                                // запустит новый диалог загрузки
                                showDialog(PROGRESS);
                                // в новом потоке
                                new Thread(new Runnable() {
                                    public void run() {
                                        // запустит фоновую процедуру
                                        wasteMyTime();
                                        // по завершении которой в основном потоке
                                        MyActivity.this.runOnUiThread(new Runnable() {
                                            public void run() {
                                                // диплог загрузки закроется
                                                dismissDialog(PROGRESS);
                                            }
                                        });
                                    }
                                }).start();
                            }
                        })
                        // отрицатильная кнопка просто скроет диалог
                        .setNegativeButton("Cancel", null)
                        .create();
            case PROGRESS:
                // Диалог загрузки
                ProgressDialog dialog = new ProgressDialog(this);
                dialog.setTitle("Please, waite...");
                dialog.setMessage("Dummy message about loading...");
                // без процентов
                dialog.setIndeterminate(true);
                // можно закрыть кнопкой телефона
                dialog.setCancelable(true);
                return dialog;
            default:
                return null;
        }
    }

    /**
     * Метод вызывается каждый раз перед появлением диалога
     *
     * @param id     номер появляющегося диалога
     * @param dialog сам диалог
     */
    @Override
    protected void onPrepareDialog(int id, Dialog dialog) {
        super.onPrepareDialog(id, dialog);
        switch (id) {
            case CONFIRM:
                ((AlertDialog) dialog).setMessage("Этот диалог был вызван " + (++counter) + " раз");
                break;
            default:
                break;
        }
    }

    /**
     * Метод просто тратит время
     */
    public static void wasteMyTime() {
        Random random = new Random();
        for (int i = 0; i < 10000; i++) {
            random.nextGaussian();
        }
    }
}

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

jQuery UI: Progress Bar with custom event

CTAPbIu_MABP — Thu, 26 Mar 2009 14:29:21 +0000

Начитался Брэндона Аарона и решил создать небольшое практическое пособие для начинающих по пользовательским событиям (custom events). Напомню что пользовательские события это такие же события как onclick только запускает их не браузер а сам jQuery. Такими событиями являются, например, события "mouseenter", "mouseleave", "ready" и целый набор ajax'овых событий.

jQuery также дает возможность создавать пользовательские события, чем я и воспользуюсь, создав собственное событие с помощью которого буду обновлять ползунок из Modal Dialog и Progress Bar. Практическая польза от этого скрипта нулевая, но для демонстрации самое то что доктор прописал. На самом деле весь код описанный в событии можно перенести в стандартный callback 'change'. Итак задача: обновлять ползунок при помощи пользовательского события, при срабатывании события ползунок увеличивается и меняет цвет.






Progress Bar with custom event

Более подробные комментарии можно посмотреть в Modal Dialog и Progress Bar

jQuery UI: Google Gears local store setup

CTAPbIu_MABP — Wed, 25 Mar 2009 13:31:31 +0000

В одной из прошлых статей я рассказывал как совместить Modal Dialog и Progress Bar, теперь пришло время рассказать как это можно использовать. Есть такая штука как Google Gears это интернет акселератор предназначенный по большому счету для продуктов самого Google, таких как почта, календарь, ридер и т.д. Но Google предоставляет возможность устанавливать акселератор и на сторонние сайты, чем я сейчас и займусь. Самым простым видом акселерации является загрузка в кеш статических файлов, то есть картинок, скриптов и css стилей, хотя теоретически можно загружать и все остальное включая html самой страницы. Я покажу как сделать анимацию загрузки файлов в хранилище Google Gears.

Итак начну с начала, мне понадобиться скрипт который инициализирует Google Gears, он написан самим Google и является единственным официальным способом запустить Google Gears, и jQuery UI для создания модального диалога из прошлой статьи. Скрипт создаёт фабрику объектов с которой я буду работать дальше, хотя там и так подробно описано в комментариях. Дальше логика такая - нужно создать новый "склад" и передать все отобранные для кеширования файлы, обновляя после каждого файла ползунок загрузки. Поехали:






GoogleGears local store setup

Примера к сожалению не будет потому что даже если у когото из вас и установлен Google Gears, то у меня нечего особо кешировать, можете посмотреть как выглядит анимация в статье Modal Dialog и Progress Bar

Конечно же интереснее было бы использовать ManagedResourceStore с манифестом, это дает возможность иметь сразу например несколько цветовых схем сайта, но тогда бы не получилось анимировать процесс загрузки.

jQuery UI: Modal Dialog и Progress Bar

CTAPbIu_MABP — Wed, 28 Jan 2009 19:55:02 +0000

Сегодня будет вторая статья из цикла о jQueryUI. На самом деле я не хочу вам рассказывать про Modal Dialog и Progress Bar, просто потому что я готовил эту статью с чувством что меня наебали. Наебали тем что оба эти виджета абсолютны не пригодны к реальному использованию, и если Modal Dialog еще как-то можно простить отсутствие у него свойства closeable, то отсутствие каких либо свойств кроме заполненности у ползунка простить нельзя.

Итак приступим к трепанации. Делаем ползунок на модальном не закрывающемся окошке с отображением процентов. Первый хак касается именно незакрываеймости окошка, поскольку параметрами убрать кнопку "Х" никак нельзя, начинаем стучать в бубен.


// создаем новый див
var dialog = $("")
	// и делаем из него диалог с параметрами
	.dialog({modal:true,title:"Заголовок",resizable:false,
		// делаем недоступной остальные элементы страницы
		overlay:{backgroundColor:'#000',opacity: 0.5,
		// одну кнопку все же добавим чтоб можно было все это безобразие закрыть
		buttons:{OK:function(){$(this).dialog('destroy').remove();}}
	})
	.parent()
	// вот он крестик :)
	.find(".ui-dialog-titlebar-close")
	.hide();

Родительский элемент приходиться брать потому что текущий указывает на тот див из которого мы построили Modal Dialog, а находиться он в самом центра этого самого Modal Dialog'a, чтобы текст этого дива сразу стал сообщением. В принципе удобно, но у нас тут немного другой случай.

Второй хак - это прикручивание индикатора с цифрами, положим его в верхний слой относительно полоски, для этого немного пошаманим с CSS.


.ui-progressbar-indicator{
	line-height:40px;
	position:absolute;
	text-indent:-15px;
	left:50%;
}


// это будет цифровой индикатор
var indicator = $("")
	.addClass("ui-progressbar-indicator")
	.text("50%")
	.appendTo(dialog),
// а это - ползунок
progressbar = $("")
	.progressbar({value:50})
	.appendTo(dialog);

Ну вот почти все готово, осталось собрать это все вместе и присоединить к какому то медленному процессу, индикацию которого мы будем показывать. К сожалению самый лакомый процесс загрузки файла мы не можем показать поэтому поставим обновление индикатора просто на таймер, по 10% каждые пол секунды. Когда процесс достигнет 100% модальное окошко просто исчезнет и страницей снова можно будет пользоваться :)






Modal Dialog + Progress Bar

PS: Как выяснилось при подготовке статьи метод "destroy" не до конца разрушает созданый "на лету" div и после него надо еще вызывать метод "remove", чтобы не засорять html.