CTAPbIu_MABP's BLOG » Modal Dialog

Как закрыть диалог

CTAPbIu_MABP — Mon, 16 Jan 2012 23:50:41 +0000

Представьте что у вас на странице есть 5 разных диалогов, они могут быть открыты в любой последовательности но два сразу открытыми быть не могут. Значит надо закрывать все открытые, но как их ывыбрать, не хранить же 5 ссылок на диалоги.

Первый пришедший в голову вариант был прост как двери


$("#dialog1","#dialog2","#dialog3","#dialog4","#dialog5").dialog("close");

но если хотя бы один диалог не был создан при старте страницы то вылетит Exception. Естественно создавать диалоги при старте бессмысленно. ни один может не понадобиться а ресурсов они отъедают нормально. Второй вариант был таким


for (var i=1,j=5;i



и несколько дней эта конструкция муляла мне глаза. Наконец я переписал это примерно так


for (var i=1,j=5,d;i


стало лучше но еще не совершенно, последним вариантом стало


$("div:data(dialog)").dialog("close");


теперь я доволен, а какие еще есть варианты?



Пример модальных диалогов для 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: 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.