Vitaly Ivanov's blog

Пример jQuery Deferred при работе с Ajax сервисами

2015-01-30T17:11:00.002+02:00

Если вам приходилось работать с web сервисами на javascript, возможно вы обращали внимание на то, что у них четкая структура ответа.

Например:

{
    "status": "401", 
    "message": "Authentication Required."
}

или 
{
    "status": "200",
    "message": null,
    "products": [
         { 
            "id": 1, 
            "title": "t-shirt",
            ...
         },
         ...
    ]
}

Интересные статьи по дизайну API можно почитать здесь, там же можно скачать брошюрку по дизайну REST сервисов.

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

Пример моей структуры:

{
    "success": true, /* Флаг об успешном выполнении операции. */ 
    "error": null, /* Текст или объект ошибки, который можно показывать пользователю. */
    "data": null /* Массив или объект. */
}

GET /employee/list

{
    "success": true,
    "error": null,
    "data": [
         {
             "id": 1,
             "name": "Eaton Cross",
             "email": "Duis.risus.odio@consectetuereuismod.org",
             "phone": "1-215-898-1399"
         },
         {
             "id": 2,
             "name": "Randall Johnson",
             "email": "vitae.diam.Proin@Sedcongue.ca",
             "phone": "1-918-519-4417"
         },
         ...
    ]
}


POST /employee/create

{
    "success": true,
    "error": "Email 'vitae.diam.Proin@Sedcongue.ca' already in use. Please provide another email.",
    "data": null
}

Пример использования:

$.getJSON('/employee/list')
    .success(function(response) {
        if (response.success == true) {            
            // 1. Парсим данные из response.data
            // 2. Показываем данные
        }
        else {
            // Показывает ошибку(и) из response.error
        }
    })
    .error(function(xhr, error, statusText){
         /* Показывает обший текст ошибки, т.к. сюда приходят ошибки сервера 
           (если запрос не обработался правильно) 
           и ошибка в следствии перезагрузки страницы до зовершения запроса. */
    })
    .always(function(){
         hideLoad() // Скрываем ajax крутилку
    });

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

В этом примере есть недостатки.

В обработчике success у вас всегда код будет начинатся одинаково, с проверки на успешное выполнение. С одной стороны, вроде бы ничего, с другой, если код выполнился не по плану, значит он должен прийти в обработчик fail. Так же логичней? А в success только обработчик успешного выполнения кода на серевер.
Другая проблема в том, что сейчас в error будет вызыватся если пользователь перегружает страницу до завершения выполнения запроса или если запрос выполнился с ошибкой на сервере или страница не найдена и тп.

Решим эти проблемы используя код с предыдущей статьи немного усовершенствовав его.
Для начала напишем следующую функцию:

function handleResponse (ajaxRequest) {
    var isUserAbortedRequest = function (xhr) {
        return !xhr.getAllResponseHeaders();
    }

    return $.Deferred(function (def) {
        ajaxRequest
            .error(function(xhr, error, statusText) {
                def.reject({ aborted: isUserAbortedRequest(xhr), error: error });
            })
            .success(function (response) {
                if (response.success == true) {
                    def.resolve(response.data);
                }
                else {
                    def.reject({ aborted: false, error: response.error });
                }
            });
        });
};

Эта функция нам пригодится, чтоб "обвернуть" ajax запрос и добавить изменения для обработки повторяющегося кода, возникающего в событии success, описанного выше.

Каждый ajax запрос посылаемый с помощью jQuery возвращает объект jQuery promise к которому можно цеплять обработчики done\success, error\fail, complete\always и таким образом следить за процессом выполения асинхронной операции.

Promise - это шаблон проектирования, улучшающий органиазцию кода при работе с асинхронными операциями.
Шаблон используется также при работе с анимациями, например обработчики fadeIn, show и др подобные тоже возвращают promise.

Очень удобная функция $.when - она позволяет вам получать уведомления о процессе выполнения группы асинхронных операций. Допустим вам надо показать какое-то сообщение пользователю только тогда, когда все 3 ajax запроса выполнятся.

Подбробней можно почитать на сайте jQuery и здесь. Возможно я еще напишу о применени этого шаблона с примерами.

Теперь по коду.
Функция handleResponse принимает ajax запрос и возвращает обвертку в виде $.Deferred. Для клиент-кода, который будет использовать эту функцию ничего не изменится.

Наш перехватчик-обвертка смотрит, если запрос не выполнился на сервере, то в обработчике error мы проверяем почему он не выполнился, скорее всего из-за перезагрузки страницы или ошибки на сервере и говорим нашему promise объекту, чтоб он завершил наш ajax запрос, с ошибкой и аргументами aborted и error.

Если мы получили ответ от сервера, смотрим успешно ли он выполнился, если нет, говорим нашему объекту promise завершить наш ajax запрос с ошибкой и передаем текст ошибки, который можно будет показать пользователю.

Если все ОК, успешно завершаем наш promise объект с response.data.

Сейчас код можно использовать так:

handleResponse($.getJSON('/employee/list'))
    .done(function(response) {
         // Уже работаем с данными через response.employees
    })
    .fail(function(e) {
        // Если это наша ошибка, показываем. В другому случае ничего не делаем
        if (!e.aborted) {
            alert(e.error);
        }
    })
    .always(function(){
         hideLoad() // Скрываем ajax крутилку
    });

Success и error обработчики только для jQuery ajax запросов, это было сделано просто для логичных называний. Поскольку мы возвращаем обвертку через promise, то эти обрабочики недоступный, вместо них более общие done\fail.

Цель выполнена, мы избавились от дублирующего кода и теперь результат ajax запроса приходит в обработчики как должно быть, по назначению и без лишних проверок.

В таком виде код не очень удобно использовать, тем более есть еще POST запрос, который надо настраивать если вы общаетесь с сервером в JSON формате. Поэтому его надо отрефакторить.

Вот, что получилось в итоге - легковесный класс для ajax запросов

var Ajax = (function ($) {

    var _postJson = function (url, data) {
        return $.ajax({
            type: "POST",
            url: url,
            data: ko.toJSON(data),
            dataType: 'json',
            contentType: 'application/json'
        });
    };

    var _getJson = function (url, data) {
        return $.getJSON(url, data);
    };

    var _handleResponse = function (ajaxRequest) {
        var isUserAbortedRequest = function (xhr) {
            return !xhr.getAllResponseHeaders();
        }

        return $.Deferred(function (def) {            
            ajaxRequest
                .fail(function(xhr, error, statusText) {
                    def.reject({ aborted: isUserAbortedRequest(xhr), error: error });
                })
                .success(function (response) {
                    if (response.success == true) {
                        def.resolve(response.data);
                    }
                    else {
                        def.reject({ aborted: false, error: response.error });
                    }
                });
        });
    };

    /* exports */
    return {
        post: function (relativeUrl, data) {
            return _handleResponse(_postJson(relativeUrl, data));
        },
        get: function (relativeUrl, data) {
            return _handleResponse(_getJson(relativeUrl, data));
        }
    };

})(jQuery);

Использовать так:

Ajax.get('/employee/list')
    .done(function(response) { // Уже работаем с данными через response.employees })
    .fail(function(e) {        
        if (!e.aborted) {
            alert(e.error);
        }
    });

И для POST запросов

var parameters = {
    name: 'Jhon', 
    email: '...'
};

Ajax.post('/employee/create', parameters)
    .done(function(response) { 
        // Employee создался, возможно в response будет response.employee или id завист от вашего дизайна. 
    })
    .fail(function(e) {        
        if (!e.aborted) {
            /* Наш employee не создался, возможно валидация, показываем. 
               Возможно в e.error будет объект c валидационными ошибками. Это уже вам решать. */
            alert(e.error); 
        }
    });

Пока все

Ajax запрос и ошибка при перезагрузке страницы

2015-01-23T17:28:00.001+02:00

Всем привет,

Возможно вы сталкивались с ситуацией, когда вы делаете ajax запрос, он долго орабатывается на сервере и вы перегружаете страницу в надежде, что следующий раз он выполнится быстрей, но нет :) вы получаете ошибку.
Ниже пример такого запроса:

$.getJSON("/clients/list")
    .success(function(){ ... })
    .error(function(xhr, error, statusText){
 // ошибка выпадает здесь
    })

Ошибка в указанном месте может возникать не только из-за того, что пользователь не дождался выполнения запроса до конца и перешел на другую страницу или перегрузил страницу во время выполенения, но и из-за ошибок на сервер, например 503 и тп.

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

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

Когда у вас ajax запрос выполняется с ошибкой, у вас в обработчике нет никаких флагов и полей, которые говорят почему запрос не полнился. В документации к jquery http://api.jquery.com/jQuery.ajax/ пишут, что в поле error (в моем примере) будет статус запроса. На практике такого не было. Напишите в коментариях, если у вас статусы работают.

Теперь решение.
Если запрос выполнился, но с ошибкой (на сервере), вы получите полноценный HTTP ответ с хедерами и телом ответа, не важно каким. Но, если запрос был прерван - вы не получите HTTP ответ, следовательно вы не получите ни хедеры, ни тело ответа. Все :)

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

Код с решением:

var isUserAbortedRequest = function (xhr) {
    return !xhr.getAllResponseHeaders();
}

$.getJSON("/clients/list")
    .success(function(){ ... })
    .error(function(xhr, error, statusText){
 if (!isUserAbortedRequest(xhr)) {
     // показаем ошибку
        } else {
     // ничего не показываем, перезагрузка или переход на другую страницу
        } 
    })

Как получить сообщение последнего комита в SVN

2014-07-29T16:12:00.000+03:00

Если вам понадобиться сообщение последнего комита в SVN это можно сделать следующей командой

$ PROJECT_DIR="/Users/vitaly/Development/MyProject"

$ svn up

$ svn log ${PROJECT_DIR} --xml --with-all-revprops -r committed | xmllint --xpath //msg/text\(\) --format -

Для этого у вас в контексте должна быть переменная PROJECT_DIR в которой указан путь к проекту, например PROJECT_DIR="/user/vitaly/development/MyProject".

Сначала делаем update, потом берем последний комит. Данные вернуться в виде xml, в котором будет тэг msg. Использую встроенную утилиту xmllint ищем через xpath тэг msg и берег текст внутри тэга.

svn up - обязательно перед svn log, а то можете получить пустой тэг в ответе к svn log.

Как добавить в svn файлы с "@" с командной строки

2014-07-22T20:23:00.000+03:00

Если кто-то работал с svn из командной строки на mac, то возможно вы сталкивались с проблемой, что svn не понимает файлы с собакой "@".

Например, если вы хотите добавить файл menu-icon@2x.png выполнив команду svn add menu-icon@2x.png получите

svn add menu-icon@2x.png 

svn: warning: W155010: '........FILE PATH..../menu-icon' not found

svn: E200009: Could not add all targets because some targets don't exist

svn: E200009: Illegal target for the requested operation

Это решается добавлением "@" к название файла

vitaly$ svn add menu-icon@2x.png@ 

A  (bin)  menu-icon@2x.png

Narnia:Slice vitaly$

Допустим у вас есть целая папка с такими файлами

vitaly$ svn status

A       .

?       Splash-568h@2x.png

?       Splash@2x.png

?       background-568h@2x.png

?       background@2x.png

?       login-icon@2x.png

?       loupe-icon@2x.png

?       menu-icon@2x.png

?       password-icon@2x.png

?       reports-icon@2x.png

? settings-icon@2x.png

По одному добавлять не удобно... Используем то, что уже знаем + pipe'ы и пишем следующий набор команд

vitaly$ ls | awk '{print $1"@" }' | xargs svn add

A  (bin)  Splash-568h@2x.png

A  (bin)  Splash@2x.png

A  (bin)  background-568h@2x.png

A  (bin)  background@2x.png

A  (bin)  login-icon@2x.png

A  (bin)  loupe-icon@2x.png

A  (bin)  menu-icon@2x.png

A  (bin)  password-icon@2x.png

A  (bin)  reports-icon@2x.png

A  (bin)  settings-icon@2x.png

ls - показывает список файлов в текущей папке
awk - сканер по патерну, аля regex. То, что в кавычках это команда которую мы выполняем если паттерн подошел. $1 будет название файла. "@" - то, что мы добавляем к названию файла
xargs - выполняем команду.

Таким же образом можно использовать и svn revert и тп.

Как разбить контент по страницам перед window.print

2013-07-01T18:59:00.001+03:00

Допустим у вас есть страница, которая поддерживает печать с браузера через window.print() и на этой странице 1 график и одна таблица.
Для того чтоб график был на 1 странице а таблица на 2 нужно вставить между элементами элемент-разделитель со стилей style="page-break-after: always" :

content here
"


"
"
content here

Полная статья здесь

Как отрендерить ASP.NET MVC страницу в строку

2013-05-31T14:37:00.000+03:00

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

Как ?

public class ViewRenderer
    {
        public static string RenderView(string viewName, ControllerContext controllerContext, object model)
        {
            ViewEngineResult view = ViewEngines.Engines.FindView(controllerContext, viewName, null);
            controllerContext.Controller.ViewData.Model = model;

            using (var writer = new StringWriter())
            {
                ViewContext context = new ViewContext(
                    controllerContext,
                    view.View,
                    controllerContext.Controller.ViewData,
                    controllerContext.Controller.TempData,
                    writer);

                view.View.Render(context, writer);
                writer.Flush();

                return writer.ToString();
            }
        }
    }

Как пользоваться ?
Передаем название view, которое хотим отрендерить, ControllerContext у вас есть, это свойство в вашем контролере. Последний параметр - ваш класс модель с данными если нужно.

string html = ViewRenderer.RenderView("YTDClientReport", ControllerContext, YourViewModelInstance);

Как применить свой ttf шрифт в iOS приложении

2013-05-21T22:44:00.001+03:00

Возможно вам приходилось или прийдется использовать нестандартные шрифты, которых нет в iOS.

Показываю как:

1. Добавляем шрифт в папку Supporting Files. В моем случае это AG_Friguer.ttf

2. Открываем plist файл и добавляем следующий ключ "Fonts provided by application". Добавляем элемент в этот ключ - название файла с расгирением шрифта, это важно, не имя шрифта, а так как называется файл, который вы добавили в Supporting Files.

3. Для того, чтобы использовать шрифт вам нужно знать его имя. Имя можно узнать через утилиту Font Book на маке. Запускаем ее, добавляем шрифт, выбираем Install Checked.

Далее смотрим имя шрифта. Как видим настоящее название AGFriquer. Именно это название мы будем использовать в себя в коде.

4. Использовать не сложно

        _topicTitleLabel.font = [UIFont fontWithName:@"AGFriquer" size:18.0f];

5. Результат

Как создать UIView из Nib файла

2013-05-12T14:22:00.001+03:00

Если вы хотите сделать красивое приложение под iOS, то вам не обойтись без кастомных компонентов, которые наследуются от UIView или других элементов. Сами элементы отображения можно создавать самостоятельно в init'ах, а можно и заранее разметить их в Nib файле.

В первом случае не возникает трудностей, достаточно просто создать экземпляр вашего класса.

Для второго слачая с Nib файлом подготовил категорию. Я предоставляю 2 варианта, оба работаю, пользуйтесь тем, который больше нравится

//UIView+UIInitialization.h

#import 

@interface UIView (UIInitialization)

+ (UIView *) viewWithNibName:(NSString *)nibName owner:(NSObject *)owner;

@end



// UIView+UIInitialization.m Version 1

@implementation UIView (UIInitialization)

+ (UIView *) viewWithNibName:(NSString *)nibName owner:(NSObject *)owner
{   
    NSArray *nibContents = [[NSBundle mainBundle] loadNibNamed:nibName owner:owner options:NULL];
    NSEnumerator *nibEnumerator = [nibContents objectEnumerator];
    id customView = nil;
    NSObject* nibItem = nil;
    while ((nibItem = [nibEnumerator nextObject]) != nil) {
        if ([nibItem isKindOfClass:[self class]]) {
            customView = nibItem;
            break;
        }
    }
    return customView;
}

@end


// UIView+UIInitialization.m Version 2

@implementation UIView (UIInitialization)

+ (UIView *) viewWithNibName:(NSString *)nibName owner:(NSObject *)owner
{
    UINib *nib = [UINib nibWithNibName:nibName bundle:nil];
    NSArray *nibArray = [nib instantiateWithOwner:owner options:nil];
    id customView = [nibArray objectAtIndex: 0];  
    
    return customView;
}

@end

Инструменты разработчика. Отправляем HTTP запросы

2013-05-08T14:23:00.000+03:00

Для тестирования HTTP запросов я всегда пользовался утилитой Fiddler. В ней есть вкладка Composer. Если кто не знает, пора почитать.

Все вроде бы хорошо, но не всегда удобно, например окно TextWizard, форматирование и тп.

Сегодня разговор не о фидлере, а об альтернативной утлите Postman. Она идет как плагин к Chrome.

Чем хорош

Удобный в использовании
Есть история запросов
Форматирует ответы JSON/XML
Есть горячие клавишы
Не нужно ставить

Пример

Пользуйтесь!

Как ускорить запуск ASP.NET MVC приложения

2013-05-07T16:06:00.000+03:00

Бывают случаи, когда вам говорят "у меня долго открывается сайт" или тп. Вы заходите на сайт чтоб это проверить и все загружается быстро и вроде как проблемы нет.
Проблема обычно возникает у тех, кто заходит на сайт после того как он не использоваться некоторое долгое время.
Так работает IIS. Когда приложение не используется долгое время оно выгружается и память отдается активным приложениям. Ваш сайт перегружается когда вы вновь заходите на любую страницу.

Как решить:
1. Находим ваш сайт в IIS и выбираем Advanced Settings. Запоминаем Application Pool.

2. Идем в Application Pools. Выбираем наш и Advanced Settings для пула.
3. Ставим параметр Idle Time-out = 0. Теперь наш сайт не будет выгружаться из памяти.

4. Выбираем свой сервер затем Configuration Editor

5. В Configuration Editor в выпадающем списке ищем applicationPools.

6. Проверяем чтоб autoStart = True, startMode = AlwaysRunning. Это значит, что сайт будет стартовать когда запуститься IIS.

Все

Как завершить процесс блокирующий порт

2012-11-02T14:33:00.000+02:00

Недавно мне пришлось устанавливать Resin веб сервер на windows для сайта написанного на Java. Когда я запускал сервер с консоли я получал сообщения об ошибке, что порты, которые я настроил для сайтов заняты другими процессами. Почему заняты - не понятно.

Для того чтобы узнать, какие процессы используют порты можно воспользоваться командой NETSTAT с ключами -a -o:

Допустим вам нужен порт 2559 на 127.0.0.1. В данном примере он занят процессом 3788.

Для того, чтобы завершить процесс можно воспользоваться командой TASKKILL c ключами /PID для указания процесса и можно /F чтоб завергить его принудительно.
Например taskkill /f /pid 3788

Дополнение.
Если вы не хотите видеть весь список процессов netstat, вы можете перенаправить результат в канал и обработать командой FIND.

Например я хочу найти все процессы которые блокируют порты, начинающиеся с 49

Ограничиваем ввод только цифрами с помощью кастомного биндинга Knockout

2012-07-08T16:27:00.000+03:00

Я уже писал как можно применить кастомный биндинг, чтоб прицепить jquery datepicker. Сегодня я покажу еще один пример.
Иногда возникает необходимость ограничить пользовательский ввод по какому-то критерию, например разрешить вводить только цифры или только текст без цифр, если это имя или город.
В данной статье я покажу как ограничить ввод только цифрами, но в дальнейшем можно будет развить эту тему и фильтровать на основе какого-нибудь дополнительного критерия.
Решение по фильтрации я не изобретал и взял первое попавшееся на stackoverflow. Его мы и будем использовать.

Начнем с написания кастомного биндинга.

 ko.bindingHandlers.inputFilter = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var filter = ko.utils.unwrapObservable(valueAccessor());

            if (filter == 'Numbers') {
                $(element).keydown(function (event) {
                    // Allow: backspace, delete, tab, escape, and enter
                    if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                    // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) ||
                    // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                        // let it happen, don't do anything
                        return;
                    }
                    else {
                        // Ensure that it is a number and stop the keypress
                        if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                            event.preventDefault();
                        }
                    }
                });
            }

        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            // we don't need update.
        }
    };

function CarViewModel (){
   this.Age = ko.observable(10);
};

var car = new CarViewModel();
ko.applyBindings(car);

Ну и рабочий пример.

Тут ничего военного не появилось, все тот же init и update. В инит находится код, который я полностью скопировал с ответа на stackoverflow.
Если вы посмотрите на html, то увидите там строчку:

data-bind="value: Age, inputFilter: 'Numbers'

Это значит что мы хотим связать наш инпут со значением поля Age и добавляем наш кастомный биндинг с параметром Numbers.
Когда вызывается метод init мы получаем значение, которое передали в inputFilter, в данном случае это будет 'Numbers'. Это значение получается в данной строке

var filter = ko.utils.unwrapObservable(valueAccessor());

ну а дальше все ясно вроде, если это Number цепляем обработчик.
В данном случае, нам не нужен update, нам достаточно прицепить обработчик keydown один раз в init и все, потом он будет жить своей жизнью.

Помоему получилось красиво!

Что можно сделать лучше:

Код, который у меня находится в init можно вынести в плагин jquery или просто найти готовый плагин, ссылки на них есть в тоже же ответе.
Можно ввести в дело еще один параметр например Characters и фитровать только по буквам.
Можно пойти дальше и передавать допустимые символы, например !"№;%@ или еще лучше принимать шаблон. Я думаю изобретать парсер шаблона не придется, есть jquery плагины, досточно будет просто принять шаблон через custom binding.

Вопросы приветствуются.

Генерация классов из XSD файлов с помощью Xsd2Code.

2012-07-04T00:41:00.000+03:00

Недавно я интегрировался с веб сервисами компании Verizon. Общение с версисом происходило через XML с определенной структорой. В общем, запрос представлял из себя шапку (header) и сам запрос (body). Пример:


  
    *****
    ********
    **
    MISC
    XML
  
  
    
      ******
      
        HTC

В документации были только примеры XML запросов и ответов для каждого типа запроса, например активация линии, информация о немере, смена тарифного плана и тп. В основном сохранялся только тег request, а внутри него менялся контет.
Сначала я эти запросы формировал руками через XLinq и это было совсем не круто. Потом компания предоставила XSD файлы для каждого запроса и сказала, что мы можем использовать эти файлы для генерации XML запросов. До этого с XSD никогда не сталкивался и пока не нагуглил не знал как оно мне поможет.

В общем помогают эти файлы следующим образом:
1. Cначала с помощью одной из утилит XSD.exe от Microsoft или Xsd2Code на codeplex, можно сгенерить cs или vb файлы.
2. Код в этих файлах будет сгенерен с Xml аттрибутами, необхадимыми для формаирования правильного XML запроса. Чтоб сгенерить Xml, который я показал в примере, используется XmlSerializer.

Так в 2 шага можно сгенерировать валидный XML по XSD файлам.
Когда я дошел до генерации CS файлов из XSD, то выбора было не особо та и примеров как это делать тоже, в основном ссылки на xsd.exe с которым я так и не подружился.
В данной статье я хотел рассказать об утилите Xsd2Code.Чем она хороша ?

Очень много настроек
Интегрируется с студией
Понимает теги xsd:include, которые ссылаются на другие xsd файлы.
Не сложная в использовании

Как использовать ?

Для начала скачать и установить.

Дальше вызвав в консоли Xsd2Code.exe можно увидеть список доступных параметров

Usage: 

    Xsd2Code.exe  [Namespace] [Output file name] [Options]

Where:
                              - Path to an XSD file. Required
    [Namespace]                         - Generated code namespace. Optional. File name without extension if no value is specified
    [Output file name]                  - Name of the output (generated) file. Optional. 
    [Options]                           - Optional. See below for description

Options:
    /o[utput]                 - Name of the output (generated) file. 
                                          By default, name of the source file with extension .Designer.cs 
                                          (.Designer.vb or .Designer.cpp for VisualVasic and Visual C++ respectively)
    /n[s]                    - Generated code CLR namespace. Default: file name without extension
    /l[anguage]               - Generated code language (CS|VB|CPP). Default: CS
    /pl[atform]               - Generated code target platform (Net20|Net30|Net35|Silverlight20). Default: Net20
    /c[ollection]      - Collection base (Array|BindingList|List|ObservableCollection|DefinedType). Default: List
    /cu[customusings]    - Comma-separated of custom usings definition (E.g "Xsd2Code.Library,System.Xml.Linq")
    /sm                      - Serialize method name. Default: Serialize
    /dm                    - Deserialize method name. Default: Deserialize
    /lf[m]                - LoadFromFile method name. Default: LoadFromFile
    /sf[m]                  - SaveToFile methodname. Default: SaveToFile
    /is[+]                              - Include Serialize method
    /is-                                - Do not include Serialize method (default)
    /cl[+]                              - Include Clone method
    /cl-                                - Do not include Clone method (default)

Это не полный список, их раза в 2-3 больше, но нам все не надо.

Дальше генерим CS файл из XSD. Пример:

Xsd2Code.exe POSBizCheckStatus.xsd Ivanov.VerizonIntegration C:\POSBizCheckStatus.cs /pl Net35 /c Array /xa /is /sс

По порядку:
Xsd2Code.exe - путь к файлу или если вы находитесь в папке с утилитой, то просто название запускаемого файла утилиты.
POSBizCheckStatus.xsd - путь к xsd файлу или если он находится в папке с утилитой то просто нзвание файла. Вайжно!!! Лучше чтоб путь к xsd файлу не содержал пробелы, а то может не сработать
Ivanov.VerizonIntegration - namespace в котором будет сгенерированый класс.
C:\POSBizCheckStatus.cs - путь и название cs файла в котором будет сгенереный класс по XSD схеме.
/pl Net35 - версия .NET для кода в данном случае 3.5
/c Array - как мы хотим видеть колекции, на выбоор несколько опций, в моем случае хочу чтоб колекции были как обычные массивы.
/xa - именно с этой опцией добавляются xml аттрибуты, которые помогу XmlSerializer'у правилно сгенерировать XML. Эту опцию можно отключить. Пример

    [GeneratedCode("Xsd2Code", "3.4.0.38968")]
    [Serializable]
    [DesignerCategory("code")]
    [XmlType(AnonymousType = true, Namespace = "http://pos.odc.vzwcorp.com")]
    public class miscResponseAccessoryList
    {
        private static XmlSerializer serializer;
        private miscResponseAccessoryListAccessoryInfo[] accessoryInfoField;
        private string countField;

        [XmlElement(DataType = "integer", Order = 0)]
        public string count
        {
            get { return countField; }
            set { countField = value; }
        }

        [XmlElement("accessoryInfo", Order = 1)]
        public miscResponseAccessoryListAccessoryInfo[] accessoryInfo
        {
            get { return accessoryInfoField; }
            set { accessoryInfoField = value; }
        }

/is - этот ключ добавляет в файл метод Serialize / Deserialize. Очень удобно, самому уже не надо писать.

 
public virtual string Serialize()
        {
            StreamReader streamReader = null;
            MemoryStream memoryStream = null;
            try
            {
                memoryStream = new MemoryStream();
                Serializer.Serialize(memoryStream, this);
                memoryStream.Seek(0, SeekOrigin.Begin);
                streamReader = new StreamReader(memoryStream);
                return streamReader.ReadToEnd();
            }
            finally
            {
                if ((streamReader != null))
                {
                    streamReader.Dispose();
                }
                if ((memoryStream != null))
                {
                    memoryStream.Dispose();
                }
            }
        }

/sc - добавляет коментарии к свойствам.

Остальные ключи добавляются по мере необходимости. Есть настроки для WCF, Linq, DataBinding и тп.

Если у вас несколько XSD файлов и для них всех нужно сгенерить классы, например как у меня

то можно использовать bat файл.

@echo off

set XsdPath="c:\Path\To\Xsd\Files"
set OutPath=%XsdPath%\Code
set ExePath="c:\Program Files (x86)\Xsd2Code\"
set Namespace=MyProject.Namespace
echo.Starting processing XSD files ...
for /f %%a IN ('dir %XsdPath%\*.xsd /a-d /b /s') do call:ProcessXsd %%a

echo.Finished processing XSD files ...
echo.&pause&
goto:eof

:ProcessXsd
%ExePath%\Xsd2Code %~1 %Namespace% %XsdPath%\Code\%~n1%.cs /pl Net35 /c Array /xa /is
echo.Processed %~n1
goto:eof

Нужно подставить значение XsdPath, OutPath, ExePath и Namespace. В моем случае я получил список файлов в папке Code.

Это важно!
OutPath папка должна существовать, иначе провал.
XsdPath путь не должен содержать пробелов, иначе тоже пробвал

Пример использования в коде

logger.Info("Building XML for REASSIGN ACCOUNT request.");

            POSBizServices requestMessage = serviceRequestFactory.CreateReassignAccountRequest(request);

            logger.Info("Sending REASSIGN ACCOUNT request.");

            string requestXml = requestMessage.Serialize();
            string responseXml = SendRequest(requestXml);

            logger.Debug("REASSIGN ACCOUNT response: {0}.", responseXml);

            POSBizServices responseMessage;

            try
            {
                logger.Info("Deserializing XML response to POSBizServices as LINE STATUS response.");
                POSBizServices.Deserialize(responseXml, out responseMessage);
            }
            catch (Exception e)
            {
                logger.ErrorException("Error while deserializing LINE STATUS XML response to POSBizServices", e);
                throw;
            }

Пользуйтесь! Будут вопросы - отвечу.

Цепляем jQuery Datepicker c помощью кастомного биндинга на KnockoutJS

2012-01-23T16:08:00.003+02:00

Как я говорил в предыдущей статье сегодня мы создадим свою "команду" ну или правильному custom binding (кастомный биндинг).
Что это такое ?
В knockout для того, чтобы с вашим элементом происходили какие-то махинации: скрыть, сделать неактивным, добавить стиль, присвоить значение и тп существуют команды, некоторые из которых вы уже видели в примерах - value, text, visible, ckecked, enable, options. Эти команды предопределены в фреймворке и предоставляют базовый и достаточный функционал для реализации ваших нужд.
Иногда бывают случаи когда код выглядит когда их вроде бы не хватает. Например, обавим в наши фильтры поддержку типа Date и когда пользователь выбрал поле, например Issue Date, установил курсор чтоб ввести значение, я хочу чтоб он не вводил его руками, а выбрал дату через jQuery datepicker. Естественно я хочу чтоб выбор даты срабатывал только для Date типа фильров, а для других Number и String оставался просто полем ввода.
Без своей кастомной команды, нам бы пришлось подписаться через subscribe на ColumnObj и смотреть при выборе поля из выпадающего списка его тип. Если это дата - применить datepicker, если нет - удалить datepicker. Если мы в будущем захотим добавить еще какую-то логику, то пойдут кастыли и будет все в куче.
Тут нам как раз и поможет кастомный биндинг (команда). В итоге наш шаблон будет выглядеть так:

 
    <input data-bind="value: Value, datePicker: Type" type="text" />

Вся логика для выбора даты будет вынесена в команду datePicker. Собственно код:

ko.bindingHandlers.datePicker = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var type = ko.utils.unwrapObservable(valueAccessor());

        if (type == 'Date') {
            $(element).datepicker();
        }

    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var type = ko.utils.unwrapObservable(valueAccessor());

        if (type == 'Date') {
            $(element).datepicker();
        }
        else {
            $(element).datepicker("destroy");
        }
    }
}

Я не буду описывать все опции в деталях, о них выможете прочитать здесь.
Рассмотром, что и как. Как мы видим для того чтобы создать команду, мы создаем объект с соответствующим называнием команды в ko.bindingHandlers. У нашего объекта должно быть две функции.

init - вызывается, когда knockout доходит до места в html, где установленна наша команда.
update - вызывается, когда изменится значение поля за которым мы следим с помощью нащей команды.
В нашем случае, data-bind="dataPicker: Type, value: Value" значит - следить за полем Type и если оно изменится вызвать команду datePicker. Она вызовится при инициализации и после последющих обновлений.
Что происходит в обработчиках?

valueAccessor() - возвращает поле, к которому привязана команд. Это всегда будет функция. т.к. все поля объявляются через ko.obsorvable или ko.computed и они возврашают функции.
ko.utils.unwrapObservable - это функция, которая вычисляет значение поля на такущий момент, когда вызывается эта строка.
Дальше, я думаю, все понятно. Параметры, которые передаютися в init и update очевидны, кроме allBindingsAccessor, но и пользоваться им вы врядли будете.

Ниже рабочий пример. Я добавил тип Date в Conditions, саму команду datePicker и поле Issue Date.

Динамические фильтры на Javascript c помощью KnockoutJS

2012-01-13T19:06:00.001+02:00

Сегодня я покажу практический пример, как можно применить KnockoutJS в реальном проекте и сделаем мы динамические фильтры для поиска задач, багов, тасков и тп по разработчику, названию таска и описанию. Возможно вы такие уже видели в TFS для генерации отчета или других системах, где можно добавлять любые фильтры и условия для поиска чего-либо. В итоге выглядит это так:

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

Приступим!

Сначала определимся, что будет представлять из себя сам фильтр:

Column - колонка по кторой фильтруем или ищем
Condition - оператор для фильтра =, != и тп
Value - значение фильтра
Type - тип. Пока что у нас будет только String, Number потом расширим
NextFilterBinaryCondition - это условие с которым будет выполняться следующий фильтр "И", "ИЛИ". Например Developer = "Vitaly" and Issue = "write post" or Issue Description = "knockout".

Фильтры у нас будуте создаваться по названию поля по которому мы фильтруем. Колонки у нас хранятся как объекты. При создании фильтра мы сохраним название поля и найдем в списке объект колонку с помощью вспомогательной функции findFilterColumn и будем хранить обьъект колонка в поле ColumnObj.
Если поле ColumnObj изменится, мы очищаем значение фильтра. Чтоб следить за изменениями поля ColumnObj мы подписуемся функцией subscribe.
Функцию-оброботчик, которыю мы передаем в subscribe, будет вызываться всегда, когда значение поля, на которое мы подписываемся, изменится.
Все поля, кроме ColumnObj, Condition, Value, NextFilterBinaryCondition зависымые и значения мы не присваиваем им явно. Значения для этих полей пересчитываются при любом изменения одного из обычных полей. Это одна из прелестей knockout! Если смотреть сверху вниз то экосистема knockout будет вызывать обработчики в следующем порядке:
1. Присвоить значение в ColumnObj
2. Определеить поле Column как зависимое и попробовать просчитать.
3. Присвоить значение полю Condition.
4. Пересчитать Column
5. Присвоить значение полю NextFilterBinaryCondition.
6. Пересчитать Column.
7. Определеить поле Type как зависимое и просчитать.
8. Пересчитать Column.
9. Определеить поле AvailableConditions как зависимое и просчитать.
10. Пересчитать Type.
11. Пересчитать Column.
12. Установить значние поля Value и пересчитать Column, Type, AvailableConditions.

Все поля устанавливаются и пересчитываются по порядку в котором они были объявлены.

Теперь рассмотрит класс, который управляет всей бизнес логикой, хранит фильтры и он является и называется ViewModel

Объект Conditions содержит список типов фильтров и соответсвенно операций, условий, которые мы поодерживаем для этих типов данных. Также есть вспомогательная функция для поиска доступных условий по названию типа.

Например найти все доступные условия для фильтрации по типо 'Number'. Этой функцией мы будем пользоваться когда после выбора поля в первом списке, нам нужно будет отобразаить доступные условия во втором выпадающем списке.

Небольшое ТЗ. У нас должны выполнятся следующие требования:
- хранить фильтры
- добавлять фильтры
- удалять фильтры
- посылать все фильтры на сервер

При создании ViewModel мы передаем в него список колонок, которы объявлены выше. В конструкторе мы создаем массив фильтров и сразу добавляем один пустой фильтр. Если этого не сделать, то у нас на экране будет одна кнопка. Как только мы добавляем пустой фильтр, экосистема knockout трекает это, уведомляет всех подписчиков на изменения, если есть такие, и отображает пустой добавленные фильтр по шаблону и определенной для него бизнес логике.

Функция addFilter принимает объект фильтр, напротив которого мы клацнули "+", находит этот фильтр в списке уже существующих фильтров и добавляет после него новый пустой.
В данном случае у нас нет проверки, заполнены ли все фильтры или нет. Сейчас мы можем нажимать "+" бесконечно и у нас будет куча фильтров. Мы это исправим потом.

Функция removeFilter принимает объект фильтры который надо удалить, удаляет его из списка фильтров и если это был последний фильтр мы добавляем пустой. Зачем? Если мы этого не сделаем, то мы не сможем добавить фильтры, т.к. "+" отображается на строке с фильтром и без него у нас останется только кнопка submit.

Функция postFilters показывает сообщение с сериализованными фильтрами в JSON, которые надо послать на сервер для обработки. В knockout есть много утилитных функций о которых мы можете почитать подробней здесь.

Функция toJS, создает новый js объект, который не связан больше с knockout, это просто js объект. Все свойства в нем будут вычеслены с теми значениями, которые были на момент вызова функции toJS.

Когда мы сериализовали фильтры в js objects, то там будут поля, которые нам нужны и которые были нужны только для knockout, например ColumnObj, AvailableConditions. Эти поля не несут нам никакой информации на сервере, поэтому мы их смело удаляем и на сервер пойдет меньше данных. Функция toJSON сериализует js класс в JSON строку, которую мы и показываем.

Переходим к рассмотрению шаблона html:

Фильтры отображаются по шаблону в данном случае шаблон, это li и все что внутри него.
В предыдущих версия knockout обязательно надо было подключать jQuery Teample. В последней версии этого делать больше не нужно, теперь в фреймворке есть свой встроеный движок для шаблонов со своими плюшками. О всех новшествах новой версии 2.0 можно прочитать на блоге самого разработчика здесь.
Из нового я использую переменную $root, которая ссылается на ViewModel класс. Если этого не сделать, то, например, поле columns будет искаться в классе Filter. Команда foreach пробегает по всем объектам коллекции filters и применяет шаблон для каждого объекта Filter. Шаблон выполняется с контекстом объекта, который передается в шаблон (Filter).
Переменная $data хранит ссылку на объект контекста (Filter в данном случае). Этой переменной я воспользовался, когда добавлял или удалял фильтр.
По умолчанию функции вызываются в контексте объекта в шаблоне (Filter), для этого в новой версии не нужно писать function () { ... }, есть более красиывый синтаксис например click: removeFilter($data). Но нам надо выполнять функции в контексте ViewModel поэтому мы пишем по старому, через function и выполняем функцию в контексте, котором нам надо.

Вроде бы все.

Теперь, как я говорил, добавим проверку. Если у нас хотя бы один фильтр без значения, то мы не будем добавлять новый.
Обновленный класс ViewModel выглядит теперь так:

а фильтр так:

и собственно результат:

В следующей статье я напишу как писать расширения для knockout и мы сделаем фильтр по дате. Если у нас поле будет с типом Date, то к нему будет автоматически применяться jQuery date picker.

Вопросы, коментарии преветсвуются!

Отображение картинки из базы без запроса на сервер в MVС

2011-12-22T18:49:00.001+02:00

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

если она у вас хранится на диске то первый варинат, если в базе то второй вариант. В обоих случая браузер посылает GET запрос на картинку. Если мы отображаем 10 записей, мы должны сделать 10 запросов чтоб получить картинки. А если мы делаем фотоальбом, отображаем штук 30 привьюх и храним картинки в базе, то грузиться будет дольше.

Решение которое я покажу называется inline image. Суть в том, что вы не делаете лишний запрос за картинкой, вы сразу встраиваете картинку в браузер. Выглядит это так

В src просто пишется контет, закодированый через base64. Так выглядит мой хелпер, который может генерит такую картинку.

 public static class ImageHelper
    {
        public static MvcHtmlString Image(this HtmlHelper html, byte[] imageBytes, string mime, object attributes)
         {
             TagBuilder img = new TagBuilder("img");

             StringBuilder sb = new StringBuilder();
             sb.AppendFormat("data:{0};", mime);
             sb.AppendFormat("base64,{0}", Convert.ToBase64String(imageBytes));

             img.MergeAttribute("src", sb.ToString());

             return MvcHtmlString.Create(img.ToString(TagRenderMode.SelfClosing));
         }
    }

    // пример использование
    @Html.Image(Model.ToArray(), "image/jpg", new { width = 530, height = 390 })

Конечно для картинок которые весяк около 30kb, src будет намного больше. Например чтоб отобразить такой значок в 35kb

у меня получилось

токо шире в 4 раза :)

Итог

Преимущества данного решения в том, что мы избавляемся от лишнего запроса на сервер и если размер картинки не велик, например, до 10 кб, то данное решение будет оптимально для отображения кучи картинок, если они у вас хранятся в байтах.
Конечно у него есть и недостатки: что мне очень не нравится, то что картинки не кэшируются :/ (только если всунуть data в css) и эта возможность не поддерживается некоторыми версиями браузеров.

В общем это было алтернативное решение, которое имеет место жить в частных случаях. Часто такое можно увидеть в css если посмотреть сайты yahoo, youtube, amazon и тп.

Настройка проекта для прекомпиляции cshtml файлов в ASP MVC 3

2011-12-20T19:27:00.001+02:00

Если вы писали на ASP MVC 3, то наверно сталкивались с проблемой, что ошибки во вью файлах не отображаются при компиляции проекта, их нет в Error List. Об ошибках вы можете узнать только если переклацаете весь проект :) Это происходит потому, что Razor вьюхи не компилируются когда вы билдите проект в студии.
Можно сделать, чтоб вьюхи компилировались и ошибки во вьюхах отображались в Error List.

Механика:
Открываем файл проекта в блокноте, находим в первой Project Group секции тег MvcBuildViews и меняем значение c false на true и воаля!.

Что такое Knockout JS или MVVM на javascript. Пример

2011-12-11T16:10:00.001+02:00

Давно хотел написать что-то про Knockout JS фреймворк. Если кто-то пишет сайты с интерфейсом где куча javascript, то вы найдете его для себя очень полезным, а потом не сможете без него ничего делать, т.к. к хорошему быстро привыкаешь.

Что это такое и зачем надо ?

Рассмотрим пример, сразу говорю выдумал на ходу, но он отображает суть.
Вы можете купить продукт из списка, завернуть в подарочную упаковку, указать надпись на коробке выбрать доставку и сразу видеть цену, которая меняется от выбранных опций и Summary, которое отображает выбранные опции как результат.
При нажатии на 'Sumbit' отображает JSON, которы может поститься на сервер или тп.

Сколько бы вы делали этот пример просто на JS + jQuery ? Конечно, вы можете сказать "та нехер делать", но код будет выглядеть месивом из подписывания на события, if'ы для треканья зависимостей между элементами, что показать, какой скрыть, потом будете еще дэбажить, а потом начнете переосмысливать жизненные ценности и позавете Darth Vadera, чтоб он все разрулил :).

На входе

- Набор элементов формы (View)
- Данные, которые отражаются и отображаются в этих элементах (Model) и бизнес логика, которая скрывает, отображает элементы и делает расчеты (Controller или ViewModel).

На выходе
- Нужно как-то это скомпоновать, чтоб зависимости и пересчеты резолвись сами, если какое-то значение изменится и никаких явных привязок к событиям через jQuery.

Итого, как мы видим, получается MVC, но более точно это MVVM, шаблон группы MVx, который был придуман под технологию WPF и очень хорошо укладывается с возможностями этой технологии.
В WPF это реализуется с помощью binding ("биндинга") и класса (ViewModel) с dependency property и routed events.

Наш ViewModel и Dependancy Property

Как мы видим у нас есть свойства, которые создаются с помощью observable. Так экоститема knockout знает, что если значение этого свойство набиндить на элемент, например, Address то это значение отобразится в текстовом поле. Если пользователь изменит значение текстового поля, новое значение запишется обратно в свойство (Address), с которым связан элемент через observable. Получается двухсторонняя связь. Можно сделать и в одну сторону, это потом.

Наш Binding

У нас есть один атрибут datа-bind, в которм мы указываем с каким свойством (значением) связывать этот элемент и дополнительные опции. Для разных элементов свойства привязываются по разному, но в общем значение datа-bind начинается так - "value: Property"

Рассмотрим по порядку:

select data-bind="options: Products, value: Product" - это значит, что мы биндим список продуктов на выпадающий список и если выбранный продукт изменится, это значение запишется в свойство Product. Если бы мы указали viewModel.Product = ko.observable("Jeans") то сразу выбраными были бы "Jeans".
input type="radio" data-bind="checked: GiftWrap" - это значит, что мы биндим value радиокнопки на свойство GiftWrap. Какая радиокнопка выбрана - такое значение и будет "Yes" или "No". Ничего не выбранно - значит ничего не будет, null.
div data-bind="visible: GiftWrap() == 'Yes'" - тут начинается интересное. С помощью visible мы решаем будет ли элемент отображатся по условию после двоеточия. Если мы поставим радиокнопку в Yes, будет div style="display: none", в другом случае div style="display: block". Как это работает ? Как только одно из observable свойств меняется, экосистема knockout проверяет весь биндинг и пересчитыват условия в атрибутах.
С простыми свойствами я думаю несложно. Давайте рассмотрим этот кусок

и код

Если бы у нас было observable, мы бы не смогли посчитать Total, т. к. оно зависит от других значений свойств. Для этого мы используем новый тип свойства dependentObservable, который обозначает, что это свойство считается динамически. Сколько свойств во ViewModel изменится, столько раз knockout пересчитает свойство Total. Нам остается только отобразить это свойство в span data-bind="text: Total". Это все работает автоматически !!! Достаточно только поставить нужное значение и опции в атрибут data-bind. Точно также работает Summary.
Я не буду дальше описывать в деталях синтаксис и тп, на сайте knockout очень хорошо все расписано с отличными примерами. Моя цель была заинтересовать и показать, как можно избавиться от кучи ненужной привязки к событиям через jQuery, месива, рассредоточеной бизнес логики и других "прелестей" при работе с сложным UI и JS.
Я считают, что этот фреймворк должен быть на счету у каждого серъезного разработчика.

Что может этот фреймворк:
- простой биндинг, поле-свойство
- сложный биндинг, динамическое значение поля
- можете писать свои настройки типо как value, checked и тп.
- можете использовать jTemplate
- можете использовать ajax
- можете биндить события, типо click, chenched и тп
- можете биндить не только на значение элемента, но и например явно на атрибуты или стили, например если вы хотите чтоб в style свойство color менялось если сумма больше $20 и тп.
- можете делать все что угодно, если мой пример отображает суть вашей проблемы.

Мне очень нравится этот фреймворк. Читаешь доку, смотришь код и все как-то интуитивно понятно, запоминай только опции в атрибутах, а так работать одно удовольствие. Уже не раз сокращал старый код в раза полтора-два точно. Но это не главное, а главное что бизнес логика в одном месте, а вьюха в другом.
Есть еще подобный фреймворк backbones, но мне он показался ужасным и более низкоуровневым, там надо много писать руками, очен много, но у него есть свои преимущества.

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

XML Parsing Error: no element found

2010-11-18T15:21:00.002+02:00

Гугл говорит, что не только я сталкивался с такой проблемой, но причина к сожалению у каждого разная. Но в результате все видят типо:

и пустой html.

Свою ошибку вы можете посмотреть в Application_Error. У меня была "The resource URL cannot be longer than 1024 characters. If using a CompositeScriptReference, reduce the number of ScriptReferences it contains, or combine them into a single static file and set the Path property to the location of it." Потому, что в в ScripMapanger\CompositeScript было много скриптов. До этого я прогнал все файлы в JSLint, но ошибок не нашел. Вот такое г..вно этот CompositeScript, лучше самому скомбинировать и перезжать на продакшен. Как-нибудь напишу решение.

Как заставить браузер принудительно кэшировать картинки

2010-10-24T14:46:00.000+03:00

Недавно сталкнулся с проблемой, когда динамически меняешь картинки жаваскриптом, то они мигают при смене первое время. Это из-за того что тратится время на загрузку по требованию. Для решения проблемы надо просто картинки подгрузить раньше на загрузке страницы, выглядит это так:

var preloadImages = {};
preloadImages["image1"] = 'Images/image1.png';
preloadImages["image2"] = 'Images/image2.png';
...
preloadImages["image3"] = 'Images/image3.png';
preloadImages["default"] = 'Images/default.png';

function changeImage(key) {
    if (typeof key != 'undefined') {
        $('#image').attr('src', preloadImages[key]);
    }
    else {
        $('#image').attr('src', preloadImages["default"]);
    }
};

(function loadImages() {
    for (key in preloadImages) {
    var img = new Image();
    img.src = preloadImages[key];
    }
})();

Затем можно использовать типо onmouseover="changeImage('image1');" onmouseout="changeImage();".
По идее все должно работать, но картинки все равно мигают :/ Firebug показывает, что картинки подгружены. Но тогда я увидел следующее

В запросе идет хедер, что кэшировать не надо, а в ответе нифига. Картинка просто не кэшируется и каждый раз когда я меняю src она запрашивается заново. Осталось включить кэширование картинок и вроде бы должно заработать. Настройку кэширования статического контента в IIS6 можно посмотреть здесь. Ниже показано как настроить тоже самое в IIS7.

Сначала выбираем папку с картинками (тоже самое можно сделать и для css папка), затем открываем "Заголовки ответов HTTP".

Последовательность действий сверху вниз. После нажатия OK у вас будет 3 новых вещи:
1. В папке для которой мы настраивали кеш (Img) появится web.config (его надо включить в solution).

2. В заголовке ответа появится хедер Cache-Control, говорящий о том, что картинка кешируется. Даже если следующий раз браузер захочет потянуть картинку, то в firebug вы увидите в ответ на GET запрос не 200 код, а 206. Значит картинка берется из кэша.

3. Ну и 3 это результат, картинки не мигают.

Как отформатировать сжатый JS файл

2010-05-18T14:27:00.000+03:00

Иногда для отладки или для личных нужд вам нужно выровнять сжатый JS файл, который представлен в виде строки, без отступов, пробелов, переносов и тп. Это можно сделать online - вставил, нажал, скопировал обратно (можно выставить размер отступов и тп). И там же есть ссылка на саму утилиту, она open source.

Как определить к какому пулу относиться w3wp процесс в IIS 7

2010-05-11T16:03:00.000+03:00

Если у вас сайт развернут на IIS 7, для того чтоб его отдебажить, надо приэтачиться к процессу w3wp.exe. В одно время у вас может работать несколько сайтов и каждый может принадлежать к своему пулу. Когда вы этачитесь к процессу (рисунок ниже), то начинаем гадать, попал не попал, подсветились брейкпоинты или нет :))

Для того чтоб точно попасть, можно посмотреть, что к чему относится с помощью утилиты для администрирования IIS с командной строки - APPCMD, которая находится по пути '%systemroot%\system32\inetsrv\'. Детально можете разобраться по докам или '/?'. Нам нужно только 'WP администрирование рабочих процессов'. Пример использования и результат ниже. Мы видим ID процесса и пул к которому сайт в этом процессе относится.

Индикация прогресса при длительных операциях в ASP.NET

2010-05-07T01:55:00.005+03:00

Я думаю вы сталкивались с ситуацией, когда нужно что-то импортить, например CSV файл с продуктами, кастомерами, синхронизировать базы или работать с каким то тормознутым веб сервисом. Во всех перечисленных и подобных случаях страница "лочится" пока не закончится операция, но нам хотелось бы видеть какой-то прогресс, о чем сегодня и поговорим.
Недавно мне нужно было импортить продукты из индусского сервиса, не важно как, главное что страница лочилась на 1-2 минуты и непонятно, что там происходило и когда оно завершалось.
Существует несколько решений как можно узнать прогресс на длительной операции:

Сохранять прогресс в сессию, а на клиенте должен быть таймер, который после запуска длительной операции будет опрашивать страницу с какой-то периодичностью, например каждую секунду или тп. Этот метод описан здесь;
Создать вспомогательную страницу в iframe, при запуске которой в OnLoad сразу начинается длительная операция. Во время прогресса надо писать в Response вызов JS функции, которая будет вызываться в родительском окне, с которого был запущен iframe. Этот метод описан здесь;
Сделать страницу асинхронной, через Async или ICallbackEventHandler Interface и опять-таки через таймер опрашивать сервер. Это способ можно отнести как вариация второго.

Из всех перечисленных мне не нравится никакой :)

Потому, что надо делать вспомогательную страницу. Хоть автор и советует использовать только этот метод, но мне он кажется недоделаным.
Потому, что както-то по индусски... опрашивать постоянно сервер? может в каком-то случае это и будет лучший вариант, но не сегодня.
Ограниченные возможности по передаче параметров от клиента к серверу и наоборот. Можно передать, что угодно, но только в одной строке. А дальше думать формат, парсить... ну и + оргументы выше в пункте 2.

Мое решение похожее больше на 1 вариант, но без iframe. В результате получим примерно следующее:

На картинках выше показана индикация прогресса во время импорта продуктов, категорий и брендов из сервиса. Initialization показывает прогресс когда выполняется аутентификация или может создание вспомогательный классов, по вашему желанию. В мое случае я логинился на сервис. А теперь как это делалось. Для этого нам понадобится одна! страница, класс с длительной операцией, интерфейс через который будет уведомляться страница о прогрессе, пару js функций которые будут двигать прогресс бар и немного css для прогресс бара.

public interface IProgressReporter
    {
        void ReportInitializationFinished();
        void ReportCategoriesProgress(int count, int completed);
        void ReportProductsProgress(int count, int completed);
        void ReportBrandsProgress(int count, int completed);
        void ReportException(Exception exception);
    }

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

public class LongOpperations
    {
        public void ProcessCatalog(IProgressReporter progressReporter)
        {
            // some initialization, web service authentication, whatever
            Thread.Sleep(5000);
            progressReporter.ReportInitializationFinished();

            for (int i = 0; i < 100; i++)
            {
                Thread.Sleep(100);
                progressReporter.ReportCategoriesProgress(100, i + 1);
            }

            for (int i = 0; i < 20; i++)
            {
                Thread.Sleep(200);
                progressReporter.ReportBrandsProgress(20, i + 1);
            }

            for (int i = 0; i < 100; i++)
            {
                Thread.Sleep(200);
                progressReporter.ReportProductsProgress(100, i + 1);
            }
        }
    }

Отчетом о прогрессе выступает наша страница, для этого нужно реализовать наш интерфейс. Потом, когда вы будем стартовать длительную процедуру, мы передадим себя, страницу, в наш обработчик. В итоге получаем подобие шаблона Visitor. Самое интересное находится в методе Render. Начало ясное, если мы не нажали кнопку, то просто рендерим страницу как есть. Дальше мы должны отключить буферизацию страницы, в другом случае IE например закеширует первые 256 байт ответа и мы получим не то, что ожидали. Поэтому отключаем. Если мы после этого начнем репортить прогресс, то мы перетрем то, что существует на странице, поэтому ренедрим её как есть, а потом будет дописывать в Response наши ответы. Основная идея заключается в том, чтоб в Response записать вызов клиентской функции и сразу вывести его на страницу через Flush. Как только на странице появится script, он сразу выполнится, тем самым подвинет прогресс бары.

public partial class _Default : Page, IProgressReporter
    {
        private bool started;
        protected override void Render(HtmlTextWriter writer)
        {
            if (!started)
            {
                base.Render(writer);
                return;
            }

            Response.BufferOutput = false;
            base.Render(writer);
            Response.Flush();

            ReportInitializationStarted();
            new LongOpperations().ProcessCatalog(this);
        }

        protected void OnStartClick(object sender, EventArgs e)
        {
            started = true;
        }

        public void ReportInitializationStarted()
        {
            Response.Write("<script>ReportInitializationStarted();</script>");
            Response.Flush();
        }

        public void ReportInitializationFinished()
        {
            Response.Write("<script>ReportInitializationFinished();</script>");
            Response.Flush();
        }

        public void ReportCategoriesProgress(int count, int completed)
        {
            ReportProgress(pnlCategoryProgress.ClientID, lblCategory.ClientID, count, completed);
        }

        public void ReportProductsProgress(int count, int completed)
        {
            ReportProgress(pnlProductProgress.ClientID, lblProduct.ClientID, count, completed);
        }

        public void ReportBrandsProgress(int count, int completed)
        {
            ReportProgress(pnlBrandProgress.ClientID, lblBrand.ClientID, count, completed);
        }

        public void ReportException(Exception exception)
        {
            string progressCall = string.Format("<script>ReportException('{0}','{1}');</script>", exception.Message, exception.StackTrace);

            Response.Write(progressCall);
            Response.Flush();
        }

        private void ReportProgress(string progressBar, string percentLabel, int count, int completed)
        {
            double progress = (count == 0) ? 100 : (100.0 / count) * completed;

            string progressCall = string.Format("<script>UpdateProgress('{0}','{1}',{2},{3},{4});</script>", progressBar, percentLabel, progress, count, completed);

            Response.Write(progressCall);
            Response.Flush();
        }

Клиентский функции, которые двигают прогресс бары и тп.

function UpdateProgress(progressBarId, percentLabelId, progress, count, completed) {
            var progressBar = document.getElementById(progressBarId);
            var progressLabel = document.getElementById(percentLabelId);
            
            progressLabel.innerHTML = (progress == -1) ? '0' : completed + '/' + count;
            progressBar.style.width = progress + '%';            
        };

        function ReportException(message, stack) {
            var p = document.createElement('p');
            p.innerHTML = 'Message: ' + message + '
 Stack: ' + stack;
            document.getElementById('error').appendChild(p);
        };

        function ReportInitializationFinished() {
            var pnl = document.getElementById('pnlInitializing');
            pnl.className = null;
        };

        function ReportInitializationStarted() {
            var pnl = document.getElementById('pnlInitializing');
            pnl.className = 'progress';
            pnl.style.width = '100%'            
        };

Вот еще кусок разметки для ясности. Весь приводить не буду, т.к. там тоже самое и немного css.

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

Способ перевести сайт в maintenance mode

2010-03-22T17:58:00.001+02:00

Вопрос очень простой, но в основном те решения, которые я встречал сводились к созданию второго сайта. Один был рабочий, а когда его надо было обновить включали второй сайт, а первый тушили. Еще был вариант с модулем, который по ключу в конфиге включался или выключался и показывал соответствующую страницу maintenance mode.

В asp.net 2.0 появился способ сделать это удобно и красивей. Вам нужно просто создать файл с названием app_offline.htm (именно так, по другому работать не будет) и положить его в корень своего сайта, после этого asp.net будет обрубать все новые запросы, а старые нормально отработаю до очередного нового.

Когда вы закончите обновлять сайт, просто переименуйте файл или удалите его и все заработает.
По умолчанию, если размер app_offline файла меньше 512 кб, то IE будет показывать friendly error page.

Очень удобно, удачи.

Доделал Tomcat F14-A

2010-03-15T16:21:00.000+02:00

На днях закончил очередную модель Tomcat F14-A (modelist). Сама модель достаточно хорошо исполнена, глубокие прорези, подгонять детали напильником особо не пришлось. Также хочется отметить качество декалей, не рвутся, накладываются легко. Единственная проблема, это то, что декали которые шли в комплекте не понятно к какой эскадрильи относятся, обычно на килях черепа или пегасы (каталог dragon 2008).
В общем я доволен, даже меняется стреловидность крыла, прикольно :)