Блог программиста

Backbone для самых маленьких

tym32167@gmail.com — Пт, 4 окт 2013 00:42:00 +0500

Добрый день, друзья! Недавно я побывал на конференции dotnetconf. Было много интересного, в том числе доклады по Single Page Application (SPA). Сначала Константин Зотов рассказал нам о backbone на примере простого приложения todo. После, Евгений Абросимов поведал нам о том, как эффективно строить SPA, какие есть подводные камни, и за что можно уволить фронтэнд разработчика . Вообще, хоть я и не фронтенд девелопер, у меня уже был небольшой опыт работы с библиотекой backbone и мысль о ней написать в блоге. Но эти два парня вдохновили меня таки это сделать. Итак, далее речь пойдет о основах библиотеки, и также сделаем небольшой пример. Если Вы хотите ознакомиться с данной библиотекой, или есть желание научиться писать SPA, то эта статья будет Вам полезна. Поехали! Начнем с описания приложения, которое будем создавать. Я хочу сделать некое подобие CMS (даже громко сказано), то есть заложить возможность создавать HTML страницы, редактировать их содержимое, просматривать (используя хеши), удалять страницы, а также, чтобы вся модель могла сохраняться в локальном хранилище (localstorage). Для начала, мы рассмотрим немного теории, а затем, понемногу перейдем к практике. Если Вы, также как и я, использовали javascript в основном только для того, чтобы работать с какими то событиями или манипулировать DOM (что, в принципе, достаточно для самых простейших сценариев), то Вы должны понять, почему я начну издалека. Первым делом я расскажу о классах в javascript.

Классы в Javascript

Не смотря на то, что в рунете об этом довольно много информации, часто начинающие разработчики и не знают о том, что в javascript присутствует поддержка ООП. Я постараюсь быть предельно кратким и расскажу только тот материал, понимание которого требуется для понимания всей статьи. Если с ходу будет непонятно, то я положу несколько ссылок с дополнительными материалами в конце статьи. В общем, в javascript действительно есть классы. Для того, чтобы создать экземпляр класса, мы можем воспользоваться обычной функцией. Вот пример:

var SomeClass = function(){
    this.id = 0;
    this.name = 'name of instance';
};
 
var instance  = new SomeClass();
console.log(instance);

Здесь функция SomeClass является функцией – конструктором. Когда мы вызываем её с ключевым словом new, то контекст функции (то есть переменная this) становится пустым объектом, свойства которого мы заполняем в нашей функции и этот объект является результатом вызова конструктора, потому сохраняется в переменную instance. При выполнении этого кода, мы увидим следующее:

Выглядит просто, верно? Но у нас не всегда есть возможность вносить какие либо изменения в логику класса. Зачастую, нам надо создать экземпляр класса, но с какими то нашими специфичными полями или методами. В таких случаях обычно говорят о наследовании, но я покажу другой вариант. Мы должны понимать, что функция-конструктор такой же объект javascript и мы вольны добавлять в него любые дополнительные поля и методы. Давайте добавим в него метод который будет возвращать нам новый конструктор, при этом инициализируя какие то наши поля.

var SomeClass = function(){
    this.id = 0;
    this.name = 'name of instance';
};
 
SomeClass.extend = function(options){
    return function(){
        var elt = new SomeClass();
        for(var i in options){
            elt[i] = options[i];
        }
        return elt;
    }
};
 
var instance  = new SomeClass();
 
var SomeClass2 = SomeClass.extend({desc:'description', log:function(){console.log(this);}});
var instance2  = new SomeClass2();
 
instance2.log();

В результате выполнения кода получим следующее

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

Backbone. Начало.

Сама библиотека изначально подразумевала использование паттерна MVC (Model-View-Controller) в приложении. Однако, как мне пояснили на конференции, в последующих версиях контроллеры были исключены из библиотеки, вместо них стали использовать роутеры. Аббревиатура паттерна сама не изменилась, но изменился смысл MVC (Model-View-Collection), что подчеркивает важность коллекций в библиотеке. От Жени Абросимова я узнал и другую версию этого паттерна MVW (Model-View-Whatever), это значит, что библиотека более не затачивается на конкретную архитектуру приложения и может органично работать с другими инструментами. Также библиотека имеет несколько зависимостей – это библиотеки underscore и jquery (вместо jquery можно использовать библиотеку zepto).

Немного теории + много практики.

Как Вы уже догадались, основные действующие лица в backbone – это модель, представление и коллекция. Начнем с модели. Модель, как и в других паттернах (таких, как MVC, MVP, MVVM, etc) – представляет собой хранилище единицы данных, с которыми планируется работать. В списке товаров это будет товар, в информации по заказам (или заказу) – заказ. Для моделей в backbone есть специальный класс – Backbone.Model. Этот объект, как нетрудно догадаться, является просто функцией-конструктором

var Model = Backbone.Model = function(attributes, options) {
  var defaults;
  var attrs = attributes || {};
  options || (options = {});
  ..........  
};

Эта функция принимает в качестве параметров пару аргументов – атрибуты нашей модели и объект с параметрами. Как видно, оба аргумента являются необязательными. Однако, напрямую нам его использовать нет смысла – ведь нам наверняка понадобятся различные методы. Тут нам пригодится показанный выше приём, где мы расширяли конструктор (отмечу, что в данном случае extend – метод библиотеки backbone. Наш метод extend я написал только для общего понимания работы метода библиотеки). Поскольку мы делаем CMS, давайте определим модель для страницы

// Конструктор для страницы
var PageItem = Backbone.Model.extend({
 
    // Значения по умолчанию
    defaults:{
        title:'default page',
        hash:'index',
        content:'default content'
    }
});

Выглядит довольно просто, верно? Всё, что нам нужно знать о странице – это заголовок, контент страницы и хеш, по которому будем эту страницу отображать. Теперь об отображении. Я предполагаю, что наше приложение будет выглядеть как то так:

Тут мы видим сверху меню навигации для страниц, далее поля ввода для создания новой страницы, и ниже – заголовок страницы, контент страницы и кнопку для удаления страницы (заголовок и контент редактируемые). Очевидно, для того, чтобы отобразить страницу, нам понадобятся 2 представления – это представление в меню навигации и представление для редактирования. Начнем с представления в меню навигации. Мне нужно, чтобы страница в результате рендерилась в элемент несортированного списка, как то так:

Сам элемент LI будет выступать контейнером для представления, а рендер будет происходить в ссылку. Для этого я в HTML разметке определил шаблон, по которому будет происходить формирование представления. Работа с шаблонами – это функционал библиотеки underscore.

<script type="text/template" id="page-nav-template">
    <a href="#pages/<%=hash%>"><%=title%></a>
</script>

Код шаблона тривиален, потому перейдем к коду представления. Отмечу, что ниже приведен код конструктора представления, экземпляры мы ещё не создавали.

// Конструктор представления для рендеринга страницы в области навигации
var PageViewNav = Backbone.View.extend({
    // Тег контейнера, в котором будет рендериться все представление
    tagName:'li',
 
    // Инициализация.
    initialize: function() {
 
        // Перерисовываем если модель изменяется
        this.listenTo(this.model, 'change', this.render);
 
        // Удаляем представление, если модель удалена
        this.listenTo(this.model, 'destroy', this.remove);
    },
 
    // Мы заводим собственное поле template - своеобразный кеш для переменной.
    // То есть мы могли бы и при рендеринге каждый раз получать этот темплейт, но чтобы
    // не быть расточительными, сохраним эту переменную сразу
    template: _.template($('#page-nav-template').text()),
 
    // Метод занимается отображением нашего представления.
    // По сути мы просто применяем нашу модель к шаблону (темплейту)
    render:function(){
        this.$el.html(this.template(this.model.attributes));
        return this;
    }
});

Я постарался написать как можно более информативные комментарии, чтобы было понятно, что делается в коде. В принципе, пока всё выглядит очень просто. Теперь дело за вторым представлением модели – тем, где можно эту модель изменять/удалять. Отличия этого представления в том, что мы выполняем некоторые манипуляции с моделью, в зависимости от действий пользователя. Дело происходит так: представление генерирует разметку и в этой разметке подписывается на события элементов. Как только разметка будет помещена в DOM, пользователь её увидит и сможет с ней работать. При определенных действиях будут вызываться методы представления (при помощи событий), и в этих методах мы будет моделью манипулировать. При изменении модели, сама модель будет генерировать различные события. Поскольку оба представления у нас подписаны на изменения модели, они будут реагировать. Например, если мы изменим заголовок страницы, то должны обновиться все представления, которые отображают эту страницу. Дальше, в принципе, всё аналогично предыдущему примеру. Вот шаблон для отрисовки:

<script type="text/template" id="page-view-template">
    <h3>
        <div class="title" contenteditable="true"><%=title%></div>
    </h3>
    <p>
        <div role="form">
            <div class="form-group">
                <div class="view" contenteditable="true"><%=content%></div>
            </div>
            <button type="button" class="btn btn-default" id="del">Delete</button>
        </div>
    </p>
</script>

Как видно, я использую атрибут contenteditable для возможности редактирования. В принципе, это не обязательно, можно использовать любые средства. Далее, код представления:

// Конструктор представления для рендеринга контента страницы
var PageView = Backbone.View.extend({
 
    // Тег контейнера, в котором будет рендериться все представление
    tagName:'div',
 
    // Привязка событий
    events: {
        'blur div.view': 'save',
        'blur div.title': 'save',
        'click button#del': 'delete'
    },
 
    // Инициализация.
    initialize: function() {
 
        // Перерисовываем если модель изменяется
        this.listenTo(this.model, 'change', this.render);
 
        // Удаляем представление, если модель удалена
        this.listenTo(this.model, 'destroy', this.remove);
    },
 
    // Мы заводим собственное поле template - своеобразный кеш для переменной.
    // То есть мы могли бы и при рендеринге каждый раз получать этот темплейт, но чтобы
    // не быть расточительными, сохраним эту переменную сразу
    template: _.template($('#page-view-template').text()),
 
    // Метод занимается отображением нашего представления.
    // По сути мы просто применяем нашу модель к шаблону (темплейту)
    render:function(){
        document.title = this.model.get('title');
        this.$el.html(this.template(this.model.attributes));
        return this;
    },
 
    // Метод сохраняет состояние нашей модели, вызывает событие модели change.
    // Срабатывает по событию.
    save:function(){
        this.model.save({content:$('div.view').html(), title:$('div.title').text()});
    },
 
    // Метод для удаления модели. Срабатывает по событияю.
    delete:function(){
        this.model.destroy();
    }
});

Здесь все понятно, отмечу только своеобразную привязку к событию – ‘событие селектор’ : ‘название метода-обработчика’. Отлично, теперь у нас есть классы для модели и для представлений. Но модель у нас будет не одна – у нас будет некое множество моделей, и их надо где то хранить. Для этого (и не только), существуют так называемые коллекции. Коллекции не только хранят модели, они могут хранить их в определенном порядке, они следят за изменениями моделей, они могут синхронизировать данные моделей с сервером по протоколу REST или хранить их каким другим способом. Нас интересует хранение моделей в локальном хранилище, потому я использую такое дополнение к библиотеке, как Backbone.localStorage

// Конструктор коллекции страниц
var PageCollection = Backbone.Collection.extend({
    // Указываем, с каким типом модедей будем работать
    model:PageItem,
 
    // Устанавливаем хранилище для элементов страниц - локальное хранилище
    localStorage: new Backbone.LocalStorage("pages")
});

Этого кода достаточно, чтобы экземпляры коллекций при сохранении изменений или загрузке данных использовали локальное хранилище. Итак, у нас есть классы модели, коллекции и представлений. Но чего то не хватает. Чего то, что будет организовывать их совместную работу. К тому же, у нас есть ещё неработающий функционал с добавлением моделей в коллекцию. Нам нужен тот злобный гений, который будет сидеть выше всех и дергать наш код за ниточки. Поскольку речь идет о работе с разметкой и реагировании на события, очевидно, что речь идет о неком представлении.

Вот HTML, с которым нам придется работать:

<div class="app">
    <div class="container">
        <div class="starter-template">
 
            <div role="form" class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="title">Title</label>
                    <input type="text" class="form-control" id="title" placeholder="Enter title">
                </div>
 
                <div class="form-group">
                    <label class="sr-only" for="hash">Hash</label>
                    <input type="text" class="form-control" id="hash" placeholder="Enter hash">
                </div>
 
                <div class="form-group">
                    <label class="sr-only" for="content">Content</label>
                    <input type="text" class="form-control" id="content" placeholder="Enter content">
                </div>
 
                <button type="button" class="btn btn-default" id="add">Add</button>
            </div>
 
 
        </div>
    </div>
 
    <div class="container">
        <div class="starter-template">
            <div class="row">
                <div class="content"></div>
            </div>
        </div>
    </div>
</div>

Конечно, довольно путанно. Но я отмечу 3 вещи: поля для ввода данных с кнопкой и <div class="content"></div>. Поля и кнопка предназначены для добавления страниц, а указанный див – в него будем рендерить представление модели для редактирования. Вот код этого представления:

// Коллекция страниц. Инициализируем её тут, так как далее в определениях
// предсталения и роутере будем эту коллекцию использовать
var pages = new PageCollection();
 
// Конструктор предсталения нашего приложения
var AppView = Backbone.View.extend({
    el: $('.app'),
    events: {
        // Привязываемся к кнопке - прописываем метод для добавления страницы
        'click button#add': 'add'
    },
    initialize: function () {
 
        // Привязываемся к событияю добавления страницы в коллекцию страниц
        pages.bind('add', this.addItem);
 
        // Загружаем сохраненные ранее страницы из локального хранилища
        pages.fetch();
    },
 
    // Событие добаления элемента в коллекцию.
    // Тут нужно создать представление для модели, выполнить рендер и
    // сохранить результат в DOM
    addItem: function (model) {
        var view = new PageViewNav({model: model});
        view.render();
        $('.nav.navbar-nav').append(view.el);
    },
 
    // Добавление новой страницы. По сути все просто -
    // получаем введеные пользователем значения полей,
    // добавляем новую модель в коллекцию и очищаем поля
    add: function () {
        pages.create({
            content: $('#content').val(),
            title: $('#title').val(),
            hash: $('#hash').val()
        });
        $('#content').val('');
        $('#title').val('');
        $('#hash').val('');
    }
});

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

// Конструктор роутера
var WorkspaceRouter = Backbone.Router.extend({
 
    routes: {
        // маршрут для перехвата выбранной страницы
        "pages/:hash":   "page",  // #pages/hash
 
        // пытаемся отловить все другие маршруты, чтобы
        // если не удастся сопоставить маршут странице - просто
        // затереть место, где выводится текущая страница.
        '':"default",
        '*query':"default"
    },
 
    // Если по хешу мы можем найти нашу страницу - то мы должны её отрендерить,
    // иначе просто показать пустое место
    page: function(hash) {
        var page =  pages.findWhere({hash:hash});
        if (page){
            var view = new PageView({model: page});
            view.render();
            $('.content').html(view.el);
        }
        else
            $('.content').empty();
    },
 
    // затираем на месте страницы все контролы
    default:function(){
        $('.content').empty();
    }
});

Комментарии в коде довольно подробные. Для законченности приложения, осталось сделать всего пару вещей. Во первых, нужно создать экземпляр главного представления – при этом мы сразу подпишемся на все события и загрузим данные в коллекцию (при этом автоматически произойдет отрисовка всех моделей). Затем мы создадим экземпляр роутера, но чтобы он заработал, нужно будет вызвать метод Backbone.history.start(); В общем, вот весь код:

// Предсталение нашего приложения - представление высокого уровня
// Инициализируем его первым, так как тут подкачиваются данные из
// локального хранилица
var app = new AppView();
 
// Роутер
var router = new WorkspaceRouter();
 
// Запускаем историю.
Backbone.history.start();

Вот, собственно, и всё. Можно запускать и лицезреть результаты При перезагрузке страницы, все данные должны подкачиваться, роутеры отрабатываться, представления отображаться.

На этот раз весь исходный код я разместил на github, демо можно поглядеть тут. По сути, интерес представляют только 2 файла: разметка и код приложения. Отдельная благодарность организаторам, докладчикам и просто участникам dotnetconf, было здорово и познавательно.

Дополнительные материалы и использованная литература

Наследование для классов в JavaScript
Библиотека backbone (анг / рус)
Очень помогают исходники с аннотациями (анг)
Доклад Константина Зотова ( слайды, демо )
Доклад Евгения Абросимова. Жаль, пока нет слайдов.
Мега книжка “Веб приложения на javascript” (о которой я уже писал)
Отличный пример Todos, написанный неким Jérôme Gravel-Niquet

Обработка изображений с помощью…. LinqPad!

tym32167@gmail.com — Пн, 2 сен 2013 21:35:00 +0500

Всем привет. Недавно я решил отсканировать старые семейные фотографии. Их у меня довольно много – только с первого захода я отобрал более трехсот штук, и это только малая часть от общего числа. Сканировать я, конечно, решил пачками по несколько штук (столько, сколько в сканер влезет). Сделав порядка 100 сканов, я был озадачен. Типичный скан выглядел как то так:

Разрезать вручную всё это количество сканов было безрадостной перспективой и я решил написать небольшой скрипт, который сделает это всё за меня.. В качестве инструмента для обработки я выбрал LinqPad. У меня было несколько причин, почему именно LinqPad

потому, что периодически работал на нетбуке и ставить там какую либо настоящую IDE нецелесообразно
потому, что в итоге программа всё равно будет небольшой
потому, что я недавно приобрел лицензию на него и захотелось использовать его в деле

Итак, что у нас есть на входе. Около ста сканированных документов. Что характерно для каждого документа? Конечно то, что все они состоят из фотографий, расположенных на однородном фоне. Так как фотографии состоят из огромного количества цветов, а фон – это светлые тона, я решил, что первым делом найду самый часто используемый цвет на фотографии и он будет принадлежать именно фону. Это предположение имеет смысл, если количество фона в скане достаточное, чтобы количество пикселей цвета фона было больше, чем каждого из оставшихся цветов. Итак, что я сделал. Я нашел самый часто используемый цвет

var image = new Bitmap(fname);
// Расширяющая функция - преобразует картинку в массив целых чисел
var rgb = image.ToRGB();
// Самый часто используемый цвет
var c = rgb.GroupBy(x=>x).Select(x=>new {c=Color.FromArgb(x.Key), n=x.Count()}).OrderByDescending(x=>x.n).First().c;

Однако, фон ведь на самом деле состоит и некоторой градации цветов, а не из одного цвета. Потому, мне надо было решить, каким образом я буду определять, принадлежит ли определенный пиксель фону или нет. Далее, поскольку цвет состоит из нескольких компонент (альфа канал, красный, зеленый и синий) – я решил сделать просто. Установил границу, скажем 15. Если красная, синяя и зеленая составляющие цвета данного пикселя находятся на расстоянии не больше 15 единиц от цвета фона, то данный пиксель тоже принадлежит фону. (15 я просто установил опытным путем).

Сканировал я в формат JPEG с глубиной 32 бита, то есть по 8 бит на каждый цветовой канал. Отсюда следует, что значение каждого канала варьируется от 0 до 255. Это надо учитывать при определении расстояния до цвета границы.

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

var po = 15;        
var w = image.Width;
var h = image.Height;
var nrgb = new bool[w*h];
    
for(var i = 0; i<w; i++)
{
    for(var j=0; j<h; j++)
    {            
        var color = Color.FromArgb(rgb[i+j*w]);            
        var dr = Math.Abs(c.R-color.R);
        var dg = Math.Abs(c.G-color.G);
        var db = Math.Abs(c.B-color.B);
        if (dr < po && dg < po && db < po)
        {
            nrgb[i+j*w] = false;
        }
        else
        {
            nrgb[i+j*w] = true;
        }                    
    }
}

Понимаю, что за названия переменных меня надо расстрелять, но я писал код для себя и потому над именами переменных просто не задумывался. Теперь, если полученный массив преобразовать в черно-белую картинку, то получим вот что (исходник и результат):

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

Беру пиксель, который ещё не принадлежит ни одному квадрату
Создаю квадрат с этот пиксель
Увеличиваю ширину и высоту квадрата до тех пор, пока пиксели, которые добавляются квадрату в результате увеличения, на 99% состоят из черного цвета.
Если квадрат больше увеличить не получается, то проверяю его размеры. Если он меньше, чем 50х50, то просто его отбрасываю. Если больше, добавляю к списку найденных квадратов.

Да что глаголить, вот результат:

Как видно, размеры наших фотографий были примерно угаданы, хоть и с небольшими погрешностями. Так как это домашние фотографии, то погрешности не страшны. Что делаем дальше. Дальше, нужно объединять рядом стоящие (или перекрывающиеся) квадраты в прямоугольники. Делается это довольно просто.

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

Статистически этот метод, в принципе, работает неплохо. Из 100 сканов всего пара ошибок – и то только потому, что при сканировании я фотографии положил сильно близко друг к другу и между ними совсем не было фона.

Результат выглядит неплохо. По поводу скорости – сотня сканов была обработана примерно за 15 минут.

Так, а причем тут LinqPad?

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

 
public class Rect
 {
     public int X0{get;set;}
     public int Y0{get;set;}
     public int X1{get;set;}
     public int Y1{get;set;}
     
     public int Color{get; private set;}
     
     public int Width{get{return X1-X0;}}
     public int Height{get{return Y1-Y0;}}
     
     public long Square{get{return Width*Height;}}
     
     // если true - то мы ищем области с true, иначе ищем области с false
     public bool Value{get;set;}
     
     public Rect(int x0, int y0, int x1, int y1, bool value, int color)
     {
         X0=x0;
         Y0=y0;
         X1=x1;
         Y1=y1;        
         Value = value;        
         Color=color;
     }
     
     // Определяет, рядом ли находятся (или пересекаются) прямоугольники r1 и r2
     // eps - погрешность
     public static bool Near(Rect r1, Rect r2, int eps)
     {        
         var hres = (int)( (r1.Height+r2.Height)*0.5+eps*2);
         var wres = (int)( (r1.Width+r2.Width)*0.5+eps*2);
         
         var w = Math.Abs(r1.X0 + r1.Width*0.5 - r2.X0 - r2.Width*0.5);
         var h = Math.Abs(r1.Y0 + r1.Height*0.5 - r2.Y0 - r2.Height*0.5);
         
         return hres>h && wres>w;
     }
     
     // Объединяет текущий прямоугольник с тем, что пришел в параметре
     public void Merge(Rect r)
     {
         var x0 = Math.Min(X0, r.X0);
         var y0 = Math.Min(Y0, r.Y0);
         
         var x1 = Math.Max(X1, r.X1);
         var y1 = Math.Max(Y1, r.Y1);
         
         X0 = x0;
         Y0 = y0;
         X1 = x1;
         Y1 = y1;
     }
     
     // Определяет, принадлежит ли точка прямоугольнику
     public bool In (int x, int y)
     {
         return x>=X0 && x<=X1 && y>=Y0 && y<=Y1;
     }
     
     // Увеличивает размер прямоугольника по оси X на inc, только в том случае, если
     // добавленные пиксели на 99% состоят из значений Value
     public bool IncreaseX(bool[] arr, int width, int height, int inc)
     {        
         var matchCount=0;
         int border = (int)((Y1-Y0+1)*0.99);
         
         if ((X1+inc) >= width)return false;
         
         for(var j=Y0; j<=Y1; j++)
         {
             var item = arr[j*width+X1+inc];
             if (item == Value) matchCount++;
             if (matchCount >= border)
             {
                 X1+=inc;
                 return true;
             }
         }
         
         return false;
     }
     
     // Увеличивает размер прямоугольника по оси Y на inc, только в том случае, если
     // добавленные пиксели на 99% состоят из значений Value
     public bool IncreaseY(bool[] arr, int width, int height, int inc)
     {        
         var matchCount=0;
         int border = (int)((X1-X0+1)*0.99);
         
         if ((Y1+inc) >= height)return false;
         
         for(var i=X0; i<=X1; i++)
         {
             var item = arr[(Y1+inc)*width+i];
             if (item == Value) matchCount++;
             if (matchCount >= border)
             {
                 Y1+=inc;
                 return true;
             }
         }
         
         return false;
     }
 }

Таким образом, основная функция для обработки конкретной фотографии выглядит так:

public static void Process(string fname, string outFolder)
{
    var image = new Bitmap(fname);
    
    // Расширяющая функция - преобразует картинку в массив целых чисел
    var rgb = image.ToRGB();    
    
    // Самый часто используемый цвет
    var    c = rgb.GroupBy(x=>x).Select(x=>new {c=Color.FromArgb(x.Key), n=x.Count()}).OrderByDescending(x=>x.n).First().c;    
    
    var minPhotoSqare = (int)(image.Width*image.Height*0.01);
    var po = 15;    
    
    var w = image.Width;
    var h = image.Height;
    var nrgb = new bool[w*h];
    
    for(var i = 0; i<w; i++)
    {
        for(var j=0; j<h; j++)
        {            
            var color = Color.FromArgb(rgb[i+j*w]);            
            var dr = Math.Abs(c.R-color.R);
            var dg = Math.Abs(c.G-color.G);
            var db = Math.Abs(c.B-color.B);
            if (dr < po && dg < po && db < po)
            {
                nrgb[i+j*w] = false;
            }
            else
            {
                nrgb[i+j*w] = true;
            }                    
        }
    }
    
    // Поиск всех квадратов размерами не менее minrect в массиве
    var rects = nrgb.FindAllRect(w, h);    
    // Ищем и объединяем рядом стоящие прямоугольники
    var dtemp = rects.UnionRect().Where(x=>x.Square>=minPhotoSqare).ToArray();
            
    // Сохраняем найденные фотографии в выходную папку
    for(var i=0; i<dtemp.Length; i++)
    {
        image.Crop(dtemp[i]).Save(
            Path.Combine(outFolder, string.Format(@"{0}-{1}.jpg",Path.GetFileNameWithoutExtension(fname), i)), 
            ImageFormat.Jpeg);    
    }
}

Но мне этого было мало. Хотелось бы как то запустить скрипт и наблюдать за ходом прогресса. Поскольку LinqPad позволяет с легкостью создавать обычные формы, манипулировать контролами и вообще всё, что и так доступно при программировании под .NET, то я не преминул этим воспользоваться. Я добавил диалоги для выбора исходных файлов сканов, диалог для выбора папки назначения – куда буду писать результат, форму, куда добавил ProgressBar и BackgroundWorker для обработки файлов отдельно от потока формы. Код подучился такой:

void Main()
{
    var ofd = new OpenFileDialog();
    ofd.Multiselect = true;
    ofd.Title = "Select files to separate";
    if (ofd.ShowDialog() == DialogResult.OK && ofd.FileNames.Length>0)
    {
        var ofld = new FolderBrowserDialog();
        ofld.ShowNewFolderButton = true;    
        ofld.Description = "Select directory to store separated files";
        if (ofld.ShowDialog() == DialogResult.OK && !string.IsNullOrEmpty(ofld.SelectedPath) && Directory.Exists(ofld.SelectedPath))
        {    
            var files = ofd.FileNames;
            var len = files.Length;
            
            var form = new Form();    
            form.FormBorderStyle = FormBorderStyle.FixedToolWindow;    
            form.Width=0;
            form.Height=0;
            form.TopMost = true;
            
            form.StartPosition = FormStartPosition.CenterScreen;
            var progress = new System.Windows.Forms.ProgressBar();
            
            progress.Maximum = len;
            progress.Minimum = 0;
            progress.Value=0;
            progress.Step=1;
            
            form.Controls.Add(progress);    
            form.AutoSizeMode = AutoSizeMode.GrowAndShrink;
            form.AutoSize = true;                
            form.Show();
            
            var back = new BackgroundWorker();            
            back.WorkerSupportsCancellation = true;
            
            form.FormClosed+= (sender, args) => {back.CancelAsync();};
            
            
            back.DoWork+= (sender, args) => 
            {            
                for(var i=0; i<len; i++)
                {
                    try
                    {
                        if (!back.CancellationPending)
                        {
                            var fname = files[i];
                            Process(fname, ofld.SelectedPath);                    
                            progress.PerformStep();
                        }
                    }
                    catch(Exception ex)
                    {
                        form.Close();
                        MessageBox.Show(ex.Message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error);
                        ex.Dump();
                        return;
                    }
                }
                
                form.Close();
                MessageBox.Show("Done", "Done", MessageBoxButtons.OK, MessageBoxIcon.Information);
            };
            
            back.RunWorkerAsync();
        }
    }
}

Выглядит это так:

выбираем файлы
указываем каталог назначения
ждем
профит

Чем мне LinqPad понравился. Помимо всех плюшек, что описаны на сайте, при написании данного скрипта мне понравилось то, что я мог в любой момент, не переключаясь на другие программы, увидеть не только состояние любой переменной, но и состояние изображения. В итоге сотня сканов превращается в несколько сотен фотографий. Что в планах. Возможно, я допишу какой-нибудь нехитрый алгоритм, который будет определять ориентацию фотографии и поворачивать автоматически, так как сейчас этого нет. Также можно оптимизировать (или просто выкинуть и новый написать) алгоритм нахождения границ фотографий. Полностью весь исходник можно скачать тут. Конечно, я не изобрел ничего нового, и есть для этих целей уже готовые решения. Разрезать скан можно и фотошопом, и другими программами. Но мне было просто интересно написать таки этот функционал самому. На этом всё. Всем спасибо за внимание и продуктивного программинга.

Книжные итоги 2012 года

tym32167@gmail.com — Ср, 9 янв 2013 05:11:00 +0500

Всем привет. Я очень люблю читать. Я люблю читать настолько, что бывает я забываю обо всем другом. К примеру, как то однажды мне одноклассник подарил художественную книжку. Я вспомнил о ней только через несколько лет, будучи студентом, как раз во время каникул после зимней сессии. Книга была очень интересной, но концовка намекала, что есть и продолжение книги. Так я узнал, что это первый том десятитомника. Как можно догадаться, следующий месяц я потратил на остальные 9 томов, и ещё 2 месяца на другие 2 серии книг этого и ещё одного авторов. Только необходимость учиться и работать меня оторвали после проглатывания 30 томов захватывающих историй. Вторая моя страсть - это программирование. С тех пор, как мама купила нам с братом СЮБОР, программирование прочно обосновалось в моей жизни. И вполне логичным продолжением этих историй стало появление моей страсти к чтению технической литературы. Изучать программирование, пробовать, создавать новые программы - это желание движет мной бОльшую часть моей жизни. Но хватит лирики. Сегодня я решил подвести итог 2012 года. Какие книги я прочитал, что прочитать не успел и какие планы на 2013 год. Если вам это интересно, то прошу под кат. Итак, книги, что я прочитал в 2012 году (все картинки кликабельны):

В первую очередь я прочитал новую книгу Рихтера. Почти. Это правда, мне осталось совсем чуть чуть, но я считаю, что уже прочитал. Если вы работаете или только собираетесь работать с технологией .NET, то это, пожалуй, самая полезная книга по данной технологии. Книга охватывает довольно много тем, включая многопоточное программирование, и является моим личным мастридом.

Это одна из тех книг, что я читаю каждый год. Я читаю её перед собеседованиями и сменой работы, я читаю для обновления знаний и памяти. Впервые я её прочитал довольно давно, но она до сих пор актуальна, хоть и написана суховато. Конечно, есть много замечательных книг по паттернам, и эту книгу читать не обязательно, но она все равно входит в мой список мастрид за то, что она одной из первых открыла для меня мир шаблонов проектирования.

Вообще, серию head first я начал читать в этом году. Написано просто и понятно, с кучей примеров и последовательным изложением. Рассмотрены все основные паттерны, рекомендую начинающим разработчикам. Если вы ещё не прочитали эту книгу - сделайте это.

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

Не смотря на небольшой размер, эта книга вывернула мне представление о разработке на клиентской стороне. Как работают одностраничные приложения? Как использовать замыкание для контроля области видимости переменных в рамках модуля? Как реализовать MVC на клиенте и обновлять модель через REST? Как управлять зависимостями на клиенте? Это и многое другое описано в данной книге. Пожалуй, это самая полезная книга по javascript, которую я прочитал в 2012 году.

Эта книга ориентирована на новичков в JQuery. Если вы можете манипулировать DOM и делать анимации, работать с JSON и Ajax вызовами, и все это используя JQuery, то эта книга вам ничем не поможет. Я её прочитал только для того, чтобы знать основы использования этой библиотеки.

Об этой книге говорить особо нечего. Описано множество применений библиотеки JQuery и плагинов, и чтобы нарисовать график или изобразить таблицу не требуется большого ума - достаточно заглянуть в эту книгу и скопипастить код. Половина книги посвящена основным функциям JQuery, то бишь анимация, перемещение по DOM, CSS, Ajax и тд. Вторая половина показывает работу с плагинами, меню, формами, валидацией, виджетами и прочими красявостями. Каждый пример снабжен комментариями, так что помимо копипасты можно вполне разобраться, что происходит в коде.

Эта книга, в отличие от предыдущей, больше похожа на учебник, хотя по сути содержит то же самое. Рассмотрено очень много тем, включая написание своих плагинов. Субъективно - это самая полезная книга по JQuery 2012 года для меня.

Мне редко приходится заниматься вёрсткой. Но в 2012 году я занимался ей больше, чем когда либо. И мне пришлось изучить этот вопрос. Как всегда, я начал с азов и эта книга мне очень помогла. Если вы не знаете даже того, чем строчные элементы отличаются от блочных, или как сверстать простую страничку в интернете, то эта книга вам поможет.

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

Эту книгу я хотел прочитать ещё когда она вышла на английском. Как только я увидел её в магазине - то сразу купил и прочел. И считаю, что не зря. Эта небольшая по объёму книга повествует о том, как создать сайт, что будет отлично выглядеть на любых устройствах и разрешениях. Как для этого подготовить изображения. Как пользоваться медиазапросами. И многое другое.

Не смотря на внушительный набор затронутых в этой книге тем, мне больше всего пригодились следующие: общая структура документов, формы и хранение данных. Вообще, если вам интересна тема HTML5, то думаю эта книга будет вам очень полезна. Авторы выражаются понятным языком, приведено множество реальных примеров, поясняется, что из изложенного можно использовать уже сейчас, а что трогать ещё пока рано.

Поскольку я теперь разрабатываю под Sharepoint, мне необходимо было быстро ознакомиться с этой платформой. И эта книга мне безмерно помогла. Объёмом она небольшая и рассчитана на новичков, но если вы хорошо знаете asp.net, то, после прочтения этой книги, вы уже можете приступать к разработке для Sharepoint и вопросов у вас будет гораздо меньше.

Как только Сергей Пугачев аннонсировал эту книгу, я сразу же заказал её на озоне. Не смотря на то, что я в основном веб-разработчик, мне очень интересны и другие темы, особенно если он касаются технологии .NET. Если вы читаете мой блог, то вы знаете, что я уже программировал для Windows Phone, а эта книга всего лишь расширила мои возможности в этом направлении. Я думаю, она будет полезна всем начинающим Windows Phone разработчикам.

Вероятно, вы будете удивлены, что делают книги по Java в блоге .NET разработчика? На самом деле, я половину 2012 года работал именно Java девелопером. Это была прекрасная возможность познакомиться с новой платформой. Конечно, Java и JVM во многом похожи на C# и .NET, и это, плюс помощь коллег (привет коллегам), помогло мне быстро освоиться. Немалую роль сыграла и данная книга. В ней описаны все основы, которые нужно знать начинающему Java разработчику, а так как у меня был большой опыт C#, то изучение этой книги прошло намного быстрее. Если вы планируете изучать когда либо Java - то эта книга однозначно мастрид.

Эта книга - продолжение предыдущей. Но если в первом томе рассматривались такие темы, как наследование, или обработка исключений (то есть темы, без которых в Java вообще делать нечего), то здесь повествуется о потоках и файлах, о базах данных и работой с сетью, об XML и работой с графикой. Не все эти темы мне пригодились, но читать было интересно.

Для работы с Java, требуется некоторая IDE. Для меня выбор пал на Eclipse и эта книга помогла мне быстро разобраться, как пользоваться данной средой программирования. Рассмотрено множество тем, начиная от создания проекта и хоткеев и до работы с SVN.

Это пожалуй, самая запоминающаяся нетехническая книга 2012 года. Она полна забавных и поучительных историй Ричарда Фейнмана. Я не мог оторваться от этой книжки, пока не прочитал всю (на что у меня ушло всего несколько дней). В общем, если вы технарь и хотите приятно и познавательно провести время - то я бы эту книгу порекомендовал.

Теперь о тех книгах, что я читать начал, но прочитать не успел в 2012 году:

Известная книга известного автора. Я помню, ещё в 10м классе, когда ездил на областную олимпиаду по программированию, я видел у ребят эту книгу. Тогда я не понял в ней практически ничего. Это мой Эверест, это та книга, которую я обязательно дочитаю. В этом году я осилил немного, но я не брошу это занятие. Если вы хотите детально разбираться в алгоритмах и уметь доказывать почему у алгоритма именно такая сложность, то эта книга для вас. Этот фундаментальный труд рассматривает довольно много тем, он научит вас не только использовать различные алгоритмы, но и создавать свои собственные, возможно, более эффективные. 100% мастрид.

Эту книгу я купил в рамках изучения CSS3 и HTML5. Написано понятно, много примеров. Книга довольно известная и, думаю, будет полезна всем веб разработчикам.

Также я уже подготовил список книг, которые я прочитаю в 2013 году. Некоторые из них я уже начал изучать, некоторые только лежат на полке, некоторых у меня ещё нет:

Однажды на собеседовании мне дали задачу построить простой парсер выражений. Он должен был обрабатывать математическое выражение и получать результат (или бросать исключение, если выражение неверно). После этого, когда я работал над калькулятором, я прикрутил к нему созданный тогда и доработанный парсер. После этого, мне стало интересно, можно ли в этот парсер добавить больше логики, переменных, функций и прочего. И тут возникло желание изучить устройство интерпретаторов и компиляторов. Дело даже не только в том, чтобы написать собственный интерпретатор. Дело в том, что эта тема охватывает множество других - тут тебе и регулярные выражения, и синтаксические деревья, и лексический анализ, и много много других интересностей. Так я пришел к известной "книге дракона". Прочитав буквально сотню страниц, я уверился в том, что изучение книги будет для меня крайне полезно и даже записал её в свой список мастрид. Не смотря на то, что книга написана понятным языком, читается она тяжело, по крайней мере мне. Некоторые разделы приходится перечитывать несколько раз, чтобы понять и запомнить.

В конце лета на Coursera был курс по алгоритмам. К сожалению, я о нем узнал только когда курс уже почти закончился. Но даже то, что я успел изучить, убедило меня купить книгу авторов курса и прочитать её. Тем более, что в феврале этот курс будет снова.

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

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

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

Рекурсивные SQL запросы

tym32167@gmail.com — Вт, 30 окт 2012 23:36:00 +0500

Рассмотрим примеры рекурсивных SQL запросов.

Допустим, у нас есть таблица

CREATE TABLE [dbo].[TreeTable] (
  [id] int IDENTITY(1, 1) NOT NULL,
  [ParentId] int NULL,
  PRIMARY KEY CLUSTERED ([id])
)
ON [PRIMARY]
GO

Вот скрин таблицы

Данные выглядят так

Запрос для получения идентификаторов и уровней вложенности

WITH tree (id, level)
as (SELECT id, 0 
   FROM TreeTable t
   WHERE t.ParentId IS NULL 
UNION ALL
   SELECT c.id, tree.level + 1
   FROM TreeTable c 
     INNER JOIN tree ON tree.id = c.ParentId) 
SELECT *
FROM tree

Получить чилдов по определенному паренту

DECLARE @rootId INT;
SET @rootId = 1;

WITH tree (id, level)
as (SELECT id, 0 
   FROM TreeTable t
   WHERE t.ParentId = @rootId
UNION ALL
   SELECT c.id, tree.level + 1
   FROM TreeTable c 
     INNER JOIN tree ON tree.id = c.ParentId) 
SELECT *
FROM tree

Получить количество чилдов

DECLARE @rootId INT;
SET @rootId = 1;

WITH tree (id, level)
as (SELECT id, 0 
   FROM TreeTable t
   WHERE t.ParentId = @rootId
UNION ALL
   SELECT c.id, tree.level + 1
   FROM TreeTable c 
     INNER JOIN tree ON tree.id = c.ParentId) 
SELECT count(*)
FROM tree

Все остальное по похожему принципу.

Алгоритм Евклида

tym32167@gmail.com — Пн, 29 окт 2012 21:21:00 +0500

Экспериментировал тут с алгоритмами и нашел интересный Алгоритм Евклида для нахождения наибольшего общего делителя. Написал реализацию на C#

        
        /// <summary>
        /// Алгоритм Евклида для нахождения
        /// наибольнего общего делителя
        /// </summary>
        /// <param name="i"></param>
        /// <param name="j"></param>
        /// <returns></returns>
        public static int NOD(int i, int j)
        {
            while ((i!=0 && j!=0))
            {
                if (i > j) i -= j;
                else j -= i;
            }
            return i == 0 ? j : i;
        }

Поменять местами значения двух переменных

tym32167@gmail.com — Пн, 29 окт 2012 05:12:00 +0500

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

int i = 11, j = 17;
i = i + j;
j = i - j;
i = i - j;

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

P.S.

По поводу переполнения. В дотнетах всё отработает нормально, так как при переполнении число просто становится отрицательным и при сложении возвращается на место.

int i = Int32.MaxValue, j = Int32.MaxValue / 2;
Console.WriteLine("i:{0} j:{1}", i, j);
i = i + j;
j = i - j;
i = i - j;
Console.WriteLine("i:{0} j:{1}", i, j);
Console.ReadLine();

Sharepoint и XSLT? Не, не слышал.

tym32167@gmail.com — Вт, 18 сен 2012 03:26:00 +0500

Доброе время суток, друзья. Сегодня темой моего повествования будет Sharepoint 2010. В частности, мы изменим представление готового списка, используя XSLT. Скажу сразу, я не эксперт ни в шарепоинте, ни в XSLT, потому если вы обнаружите ошибки в тексте, прошу мне об этом сообщить. Для опытов я использую Sharepoint Foundation 2010 и Windows Web Server 2008 SP2. (Различия между разными версиями шарепоинта) За подробностями прошу под кат. Итак, допустим, мы создали простой список с набором полей. Пусть это будут название, ссылка, картинка, какой то контент и выбор из нескольких вариантов.

Как известно, при получении данных для списка, шарепоинт получает XML, который впоследствии при помощи XSLT преобраования, образует HTML для вывода на страницу. Весь этот XSLT лежит в папке C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTSXSL . Там несколько файлов, но, как нетрудно догадаться, начинается все с main.xsl. Для того, чтобы что то изменить в представлении списка, нам нужно будет написать свой XSLT файл и (что необязательно), указать ссылку на этот main.xsl. Приступим к написанию своего файла. 1. Создадим файл C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTSXSLcustom.xsl. 2. Укажем начальное его содержимое (я его просто скопировал из main.xsl)

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema"
                xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
                version="1.0"
                exclude-result-prefixes="xsl msxsl ddwrt"
                xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
                xmlns:asp="http://schemas.microsoft.com/ASPNET/20"
                xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns:msxsl="urn:schemas-microsoft-com:xslt"
                xmlns:SharePoint="Microsoft.SharePoint.WebControls"
                xmlns:ddwrt2="urn:frontpage:internal">
</xsl:stylesheet>

3. Далее, открываем страницу со списком, нажимаем "Действия сайта-Изменить страницу" и открываем редактор веб части. Нас интересует параметр "Ссылка на XSL".

4. Укажем значение этого параметра как /_layouts/xsl/custom/custom.xsl . После этого отображаемое содержимое списка пропадет. Это и неудивительно, ведь пока наш XSLT чист и не генерирует никакой разметки. Теперь обратим внимание на файл main.xsl. Вот его содержимое:

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
  <xsl:import href="/_layouts/xsl/fldtypes.xsl"/>
  <xsl:import href="/_layouts/xsl/vwstyles.xsl"/>
  <xsl:output method="html" indent="no"/>
  <xsl:decimal-format NaN=""/>
  <xsl:param name="NavigateForFormsPages" />
  <xsl:param name="MasterVersion" select="3"/>
  <xsl:param name="TabularView"/>
  <xsl:param name="NoAJAX"/>
  <xsl:param name="WPQ"/>
  <xsl:param name="RowLimit" select="5"/>
  <xsl:param name="dvt_sortdir" select="'ascending'"/>
  <xsl:param name="dvt_sortfield" />
  <xsl:param name="WebPartClientID"/>
  <xsl:param name="dvt_filterfields" />
  <xsl:param name="dvt_partguid" />
  <xsl:param name="dvt_firstrow" select="1"/>
  <xsl:param name="dvt_nextpagedata" />
  <xsl:param name="dvt_prevpagedata" />
  <xsl:param name="XmlDefinition" select="."/>
  <xsl:param name="ViewCounter" select="'1'"/>
  <xsl:param name="View" />
  <xsl:param name="ListUrlDir"/>
  <xsl:param name="List" />
  <xsl:param name="Project"/>
  <xsl:param name="WebTitle"/>
  <xsl:param name="ListTitle"/>
  <xsl:param name="FORM_DISPLAY"/>
  <xsl:param name="FORM_DISPLAY_HTMLURLATTRIBUTEENCODED"/>
  <xsl:param name="FORM_EDIT"/>
  <xsl:param name="FORM_NEW"/>
  <xsl:param name="ENCODED_FORM_NEW"/>
  <xsl:param name="Userid" select="-1"/>
  <xsl:param name="PagePath"/>
  <xsl:param name="PagePathFinal" select="concat($PagePath,'?')"/>
  <xsl:param name="HttpVDir"/>
  <xsl:param name="HttpVDirUniEncoded"/>
  <xsl:param name="HttpPath"/>
  <xsl:param name="HttpHost"/>
  <xsl:param name="PresenceEnabled"/>
  <xsl:param name="FilterLink"/>
  <xsl:param name="FilterLinkNoHost"/>
  <xsl:param name="RecursiveView"/>
  <xsl:param name="WebEditorPreview"/>
  <xsl:param name="NoAnnouncements"/>
  <xsl:param name="NoAnnouncementsHowTo"/>
  <xsl:param name="MoreAnnouncements"/>
  <xsl:param name="AddNewAnnouncement"/>
  <xsl:param name="FreeForm" select="0"/>
  <xsl:param name="OpenMenuKeyAccessible"/>
  <xsl:param name="open_menu"/>
  <xsl:param name="select_deselect_all"/>
  <xsl:param name="IsGhosted" select="'0'"/>
  <xsl:param name="Filter" select="'0'"/>
  <xsl:param name="IsDocLib"/>
  <xsl:param name="WorkspaceAltString"/>
  <xsl:param name="NewGifAltString"/>
  <xsl:param name="LCID"/>
  <xsl:param name="ByText"/>
  <xsl:param name="Modified"/>
  <xsl:param name="Modified_By"/>
  <xsl:param name="SelectedID"/>
  <xsl:param name="idPresEnabled"/>
  <xsl:param name="dvt_RowCount" select="0" />
  <xsl:param name="HasTitleField" select="$XmlDefinition/ViewFields/FieldRef[@Name='Title']"/>
  <xsl:param name="IsHomePageView" select="0" />
  <xsl:param name="ManualRefresh" />
  <xsl:param name="ListRight_AddListItems"/>
  <xsl:param name="GroupingRender"/>
  <xsl:param name="dvt_form_key"/>
  <!-- -1 means insert-->
  <xsl:param name="InlineEdit"/>
  <xsl:param name="ServerRelativeUrl"/>
  <xsl:param name="OverrideSelectCommand"/>
  <xsl:param name="OverrideFilterQstring"/>
  <xsl:param name="OverrideScope"/>
  <xsl:param name="EcbMode"/>
  <xsl:param name="FieldSortParam"/>
  <xsl:param name="RootFolderParam"/>
  <xsl:param name="AddServerFilterOperationHash"/>
  <xsl:param name="IsPostBack"/>
  <xsl:param name="ShowWebPart"/>
  <xsl:param name="SortQueryString"/>
  <xsl:param name="NoCTX"/>
  <xsl:param name="ShowAlways"/>
  <xsl:param name="EnableAlert"/>
  <xsl:param name="RootSiteUrl"/>
  <xsl:param name="RenderCTXOnly"/>
  <!-- For Relationships-->
  <xsl:param name="HasRelatedCascadeLists" select="0" />
  <xsl:param name="CascadeDeleteWarningMessage"/>
  <!-- For External Lists-->
  <xsl:param name="EntityName" />
  <xsl:param name="EntityNamespace" />
  <xsl:param name="SpecificFinderName" />
  <xsl:param name="LobSystemInstanceName" />
  <xsl:param name="ExternalDataListPermissions" />
  <xsl:param name="RowTotalCount" select="0"/>
</xsl:stylesheet>

Как вы можете видеть, помимо импорта дополнительных таблиц, тут ещё и полно различных параметров (описание параметров можно поглядеть тут). Давайте глянем на значения этих параметров, а также на XML, с которым нам придется работать. Для этого у меня есть небольшая XSLT таблица. Она покажет значения некоторых параметров, а также пришедший XML

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
    version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
    xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:sharepoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
  <xsl:output method="html" indent="no" />
  <xsl:decimal-format nan="" />
  <xsl:param name="NavigateForFormsPages" />
  <xsl:param name="MasterVersion" select="3" />
  <xsl:param name="TabularView" />
  <xsl:param name="NoAJAX" />
  <xsl:param name="WPQ" />
  <xsl:param name="RowLimit" select="5" />
  <xsl:param name="dvt_sortdir" select="'ascending'" />
  <xsl:param name="dvt_sortfield" />
  <xsl:param name="WebPartClientID" />
  <xsl:param name="dvt_filterfields" />
  <xsl:param name="dvt_partguid" />
  <xsl:param name="dvt_firstrow" select="1" />
  <xsl:param name="dvt_nextpagedata" />
  <xsl:param name="dvt_prevpagedata" />
  <xsl:param name="XmlDefinition" select="." />
  <xsl:param name="ViewCounter" select="'1'" />
  <xsl:param name="View" />
  <xsl:param name="ListUrlDir" />
  <xsl:param name="List" />
  <xsl:param name="Project" />
  <xsl:param name="WebTitle" />
  <xsl:param name="ListTitle" />
  <xsl:param name="FORM_DISPLAY" />
  <xsl:param name="FORM_DISPLAY_HTMLURLATTRIBUTEENCODED" />
  <xsl:param name="FORM_EDIT" />
  <xsl:param name="FORM_NEW" />
  <xsl:param name="ENCODED_FORM_NEW" />
  <xsl:param name="Userid" select="-1" />
  <xsl:param name="PagePath" />
  <xsl:param name="PagePathFinal" select="concat($PagePath,'?')" />
  <xsl:param name="HttpVDir" />
  <xsl:param name="HttpVDirUniEncoded" />
  <xsl:param name="HttpPath" />
  <xsl:param name="HttpHost" />
  <xsl:param name="PresenceEnabled" />
  <xsl:param name="FilterLink" />
  <xsl:param name="FilterLinkNoHost" />
  <xsl:param name="RecursiveView" />
  <xsl:param name="WebEditorPreview" />
  <xsl:param name="NoAnnouncements" />
  <xsl:param name="NoAnnouncementsHowTo" />
  <xsl:param name="MoreAnnouncements" />
  <xsl:param name="AddNewAnnouncement" />
  <xsl:param name="FreeForm" select="0" />
  <xsl:param name="OpenMenuKeyAccessible" />
  <xsl:param name="open_menu" />
  <xsl:param name="select_deselect_all" />
  <xsl:param name="IsGhosted" select="'0'" />
  <xsl:param name="Filter" select="'0'" />
  <xsl:param name="IsDocLib" />
  <xsl:param name="WorkspaceAltString" />
  <xsl:param name="NewGifAltString" />
  <xsl:param name="LCID" />
  <xsl:param name="ByText" />
  <xsl:param name="Modified" />
  <xsl:param name="Modified_By" />
  <xsl:param name="SelectedID" />
  <xsl:param name="idPresEnabled" />
  <xsl:param name="dvt_RowCount" select="0" />
  <xsl:param name="HasTitleField" select="$XmlDefinition/ViewFields/FieldRef[@Name='Title']" />
  <xsl:param name="IsHomePageView" select="0" />
  <xsl:param name="ManualRefresh" />
  <xsl:param name="ListRight_AddListItems" />
  <xsl:param name="GroupingRender" />
  <xsl:param name="dvt_form_key" />
  <!-- -1 means insert-->
  <xsl:param name="InlineEdit" />
  <xsl:param name="ServerRelativeUrl" />
  <xsl:param name="OverrideSelectCommand" />
  <xsl:param name="OverrideFilterQstring" />
  <xsl:param name="OverrideScope" />
  <xsl:param name="EcbMode" />
  <xsl:param name="FieldSortParam" />
  <xsl:param name="RootFolderParam" />
  <xsl:param name="AddServerFilterOperationHash" />
  <xsl:param name="IsPostBack" />
  <xsl:param name="ShowWebPart" />
  <xsl:param name="SortQueryString" />
  <xsl:param name="NoCTX" />
  <xsl:param name="ShowAlways" />
  <xsl:param name="EnableAlert" />
  <xsl:param name="RootSiteUrl" />
  <xsl:param name="RenderCTXOnly" />
  <!-- For Relationships-->
  <xsl:param name="HasRelatedCascadeLists" select="0" />
  <xsl:param name="CascadeDeleteWarningMessage" />
  <!-- For External Lists-->
  <xsl:param name="EntityName" />
  <xsl:param name="EntityNamespace" />
  <xsl:param name="SpecificFinderName" />
  <xsl:param name="LobSystemInstanceName" />
  <xsl:param name="ExternalDataListPermissions" />
  <xsl:param name="RowTotalCount" select="0" />
  <xsl:template match="/">
    <table>
      <tr><td>NavigateForFormsPages</td><td><xsl:value-of select="$NavigateForFormsPages" /></td></tr>
      <tr><td>MasterVersion</td><td><xsl:value-of select="$MasterVersion" /></td></tr>
      <tr><td>TabularView</td><td><xsl:value-of select="$TabularView" /></td></tr>
      <tr><td>NoAJAX</td><td><xsl:value-of select="$NoAJAX" /></td></tr>
      <tr><td>WPQ</td><td><xsl:value-of select="$WPQ" /></td></tr>
      <tr><td>RowLimit</td><td><xsl:value-of select="$RowLimit" /></td></tr>
      <tr><td>dvt_sortdir</td><td><xsl:value-of select="$dvt_sortdir" /></td></tr>
      <tr><td>dvt_sortfield</td><td><xsl:value-of select="$dvt_sortfield" /></td></tr>
      <tr><td>WebPartClientID</td><td><xsl:value-of select="$WebPartClientID" /></td></tr>
      <tr><td>dvt_filterfields</td><td><xsl:value-of select="$dvt_filterfields" /></td></tr>
      <tr><td>dvt_partguid</td><td><xsl:value-of select="$dvt_partguid" /></td></tr>
      <tr><td>dvt_firstrow</td><td><xsl:value-of select="$dvt_firstrow" /></td></tr>
      <tr><td>dvt_nextpagedata</td><td><xsl:value-of select="$dvt_nextpagedata" /></td></tr>
      <tr><td>dvt_prevpagedata</td><td><xsl:value-of select="$dvt_prevpagedata" /></td></tr>
      <tr><td>XmlDefinition</td><td><xsl:value-of select="$XmlDefinition" /></td></tr>
      <tr><td>ViewCounter</td><td><xsl:value-of select="$ViewCounter" /></td></tr>
      <tr><td>View</td><td><xsl:value-of select="$View" /></td></tr>
      <tr><td>ListUrlDir</td><td><xsl:value-of select="$ListUrlDir" /></td></tr>
      <tr><td>List</td><td><xsl:value-of select="$List" /></td></tr>
      <tr><td>Project</td><td><xsl:value-of select="$Project" /></td></tr>
      <tr><td>WebTitle</td><td><xsl:value-of select="$WebTitle" /></td></tr>
      <tr><td>ListTitle</td><td><xsl:value-of select="$ListTitle" /></td></tr>
      <tr><td>FORM_DISPLAY</td><td><xsl:value-of select="$FORM_DISPLAY" /></td></tr>
      <tr><td>FORM_DISPLAY_HTMLURLATTRIBUTEENCODED</td><td><xsl:value-of select="$FORM_DISPLAY_HTMLURLATTRIBUTEENCODED" /></td></tr>
      <tr><td>FORM_EDIT</td><td><xsl:value-of select="$FORM_EDIT" /></td></tr>
      <tr><td>FORM_NEW</td><td><xsl:value-of select="$FORM_NEW" /></td></tr>
      <tr><td>ENCODED_FORM_NEW</td><td><xsl:value-of select="$ENCODED_FORM_NEW" /></td></tr>
      <tr><td>Userid</td><td><xsl:value-of select="$Userid" /></td></tr>
      <tr><td>PagePath</td><td><xsl:value-of select="$PagePath" /></td></tr>
      <tr><td>PagePathFinal</td><td><xsl:value-of select="$PagePathFinal" /></td></tr>
      <tr><td>HttpVDir</td><td><xsl:value-of select="$HttpVDir" /></td></tr>
      <tr><td>HttpVDirUniEncoded</td><td><xsl:value-of select="$HttpVDirUniEncoded" /></td></tr>
      <tr><td>HttpPath</td><td><xsl:value-of select="$HttpPath" /></td></tr>
      <tr><td>HttpHost</td><td><xsl:value-of select="$HttpHost" /></td></tr>
      <tr><td>PresenceEnabled</td><td><xsl:value-of select="$PresenceEnabled" /></td></tr>
      <tr><td>FilterLink</td><td><xsl:value-of select="$FilterLink" /></td></tr>
      <tr><td>FilterLinkNoHost</td><td><xsl:value-of select="$FilterLinkNoHost" /></td></tr>
      <tr><td>RecursiveView</td><td><xsl:value-of select="$RecursiveView" /></td></tr>
      <tr><td>WebEditorPreview</td><td><xsl:value-of select="$WebEditorPreview" /></td></tr>
      <tr><td>NoAnnouncements</td><td><xsl:value-of select="$NoAnnouncements" /></td></tr>
      <tr><td>NoAnnouncementsHowTo</td><td><xsl:value-of select="$NoAnnouncementsHowTo" /></td></tr>
      <tr><td>MoreAnnouncements</td><td><xsl:value-of select="$MoreAnnouncements" /></td></tr>
      <tr><td>AddNewAnnouncement</td><td><xsl:value-of select="$AddNewAnnouncement" /></td></tr>
      <tr><td>FreeForm</td><td><xsl:value-of select="$FreeForm" /></td></tr>
      <tr><td>OpenMenuKeyAccessible</td><td><xsl:value-of select="$OpenMenuKeyAccessible" /></td></tr>
      <tr><td>open_menu</td><td><xsl:value-of select="$open_menu" /></td></tr>
      <tr><td>select_deselect_all</td><td><xsl:value-of select="$select_deselect_all" /></td></tr>
      <tr><td>IsGhosted</td><td><xsl:value-of select="$IsGhosted" /></td></tr>
      <tr><td>Filter</td><td><xsl:value-of select="$Filter" /></td></tr>
      <tr><td>IsDocLib</td><td><xsl:value-of select="$IsDocLib" /></td></tr>
      <tr><td>WorkspaceAltString</td><td><xsl:value-of select="$WorkspaceAltString" /></td></tr>
      <tr><td>NewGifAltString</td><td><xsl:value-of select="$NewGifAltString" /></td></tr>
      <tr><td>LCID</td><td><xsl:value-of select="$LCID" /></td></tr>
      <tr><td>ByText</td><td><xsl:value-of select="$ByText" /></td></tr>
      <tr><td>Modified</td><td><xsl:value-of select="$Modified" /></td></tr>
      <tr><td>Modified_By</td><td><xsl:value-of select="$Modified_By" /></td></tr>
      <tr><td>SelectedID</td><td><xsl:value-of select="$SelectedID" /></td></tr>
      <tr><td>idPresEnabled</td><td><xsl:value-of select="$idPresEnabled" /></td></tr>
      <tr><td>dvt_RowCount</td><td><xsl:value-of select="$dvt_RowCount" /></td></tr>
      <tr><td>HasTitleField</td><td><xsl:value-of select="$HasTitleField" /></td></tr>
      <tr><td>IsHomePageView</td><td><xsl:value-of select="$IsHomePageView" /></td></tr>
      <tr><td>ManualRefresh</td><td><xsl:value-of select="$ManualRefresh" /></td></tr>
      <tr><td>ListRight_AddListItems</td><td><xsl:value-of select="$ListRight_AddListItems" /></td></tr>
      <tr><td>GroupingRender</td><td><xsl:value-of select="$GroupingRender" /></td></tr>
      <tr><td>dvt_form_key</td><td><xsl:value-of select="$dvt_form_key" /></td></tr>
      <tr>
        <td>
          raw xml
        </td>
        <td style='word-wrap: break-word;'>
          <span style="font-size: 10pt; width: 100%; word-wrap: break-word;" align="justify">
            <xmp>
              <xsl:copy-of select="."></xsl:copy-of>
            </xmp>
          </span>
        </td>
      </tr>
    </table>
  </xsl:template>
</xsl:stylesheet>

Вот, что покажет этот стиль:

И в самом низу будет наш XML. Выглядит он так (я его скопировал в текстовый редактор и отформатировал):

Как вы можете заметить, в пришедшем XML есть все необходимые нам поля. Теперь мы знаем, с чем имеем дело, и какие параметры нам доступны. Дальнейшая работа будет выглядеть следующим образом: 1. Мы модифицируем наш XSLT так, чтобы вернулось стандартное представление списка. 2. Мы постепенно будем добавлять элементы в наш XSLT, чем и будем менять визуальное представление списка. Ну, начнем по порядку. Чтобы наш XSLT отображал стандартное представление, необходимо просто в пустом XSLT импортировать main.xsl, а далее всё само заработает. Выглядеть это будет так:

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
  <xsl:import href="/_layouts/xsl/main.xsl"/>
</xsl:stylesheet>

Теперь что я хочу получить на выходе. Я хочу, чтобы название было сверху крупными буквами. А ещё картинка должна быть внутри ссылки, которая будет указывать туда, куда указывает наше поле УРЛ. А надпись с выбранным вариантом мы вообще уберем, но столбец с названием оставим. А ещё ссылку "Добавить элемент" мы переименуем в "Добавить новость". Пока вроде все. Как я уже говорил, вначале файла main.xsl происходит импорт двух других файлов.

<xsl:import href="/_layouts/xsl/fldtypes.xsl"/>
<xsl:import href="/_layouts/xsl/vwstyles.xsl"/>

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

<xsl:template match="/">
  <xsl:choose>
    <xsl:when test="$RenderCTXOnly='True'">
      <xsl:call-template name="CTXGeneration"/>
    </xsl:when>
    <xsl:when test="($ManualRefresh = 'True')">
      <xsl:call-template name="AjaxWrapper" />
    </xsl:when>
    <xsl:otherwise>
      <xsl:apply-templates mode="RootTemplate" select="$XmlDefinition"/>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

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

<xsl:template match="View" mode="full">
  <xsl:param name="ShowSelectAllCheckbox" select="'True'"/>
  <xsl:variable name="ViewStyleID">
    <xsl:value-of select="ViewStyle/@ID"/>
  </xsl:variable>
  <xsl:variable name="dirClass">
    <xsl:choose>
      <xsl:when test="$XmlDefinition/List/@Direction='rtl'"> ms-vhrtl</xsl:when>
      <xsl:otherwise> ms-vhltr</xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <tr valign="top" class="{concat('ms-viewheadertr',$dirClass)}">
    <xsl:if test="$MasterVersion=4 and $TabularView='1'">
      <!-- ViewStyleID ''=Default / ViewStyleID 17=Shaded -->
      <xsl:if test="($ViewStyleID = '' or $ViewStyleID = '17') and $ShowSelectAllCheckbox = 'True'">
        <th class="ms-vh-icon" scope="col">
          <input type="checkbox" title="{$select_deselect_all}" onclick="ToggleAllItems(event,this,{$ViewCounter})" onfocus="EnsureSelectionHandlerOnFocus(event,this,{$ViewCounter})" />
        </th>
      </xsl:if>
    </xsl:if>
    <xsl:if test="$InlineEdit">
      <th class="ms-vh2 ms-vh-inlineedit"/>
    </xsl:if>
    <xsl:if test="not($GroupingRender)">
      <xsl:apply-templates mode="header" select="ViewFields/FieldRef[not(@Explicit='TRUE')]"/>
    </xsl:if>
  </tr>
  <xsl:apply-templates select="." mode="RenderView" />
  <xsl:apply-templates mode="footer" select="." />
</xsl:template>

Затем будет вызван темплейт со строки 1823

<xsl:template match="View" mode="RenderView">
  <xsl:variable name="ViewStyleID">
    <xsl:value-of select="ViewStyle/@ID"/>
  </xsl:variable>
  <xsl:variable name="HasExtraColumn" select="$TabularView='1' and $MasterVersion=4 and ($ViewStyleID = '' or $ViewStyleID = '17')"/>
  <!-- total first -->
  <xsl:if test="Aggregations[not(@Value='Off')]/FieldRef">
    <tr>
      <xsl:if test="$HasExtraColumn">
        <td/>
      </xsl:if>
      <xsl:if test="$InlineEdit">
        <td width="1%"/>
      </xsl:if >
      <xsl:apply-templates mode="aggregate" select="ViewFields/FieldRef[not(@Explicit='TRUE')]">
        <xsl:with-param name="Rows" select="$AllRows"/>
        <xsl:with-param name="GroupLevel" select="0"/>
      </xsl:apply-templates>
    </tr>
  </xsl:if>
  <xsl:variable name="Fields" select="ViewFields/FieldRef[not(@Explicit='TRUE')]"/>
  <xsl:variable name="Groups" select="Query/GroupBy/FieldRef"/>
  <xsl:variable name="Collapse" select="Query/GroupBy[@Collapse='TRUE']"/>
  <xsl:variable name="GroupCount" select="count($Groups)"/>
  <xsl:for-each select="$AllRows">
    <xsl:variable name="thisNode" select="."/>
    <xsl:if test="$GroupCount &gt; 0">
      <xsl:call-template name="GroupTemplate">
        <xsl:with-param name="Groups" select="$Groups"/>
        <xsl:with-param name="Collapse" select="$Collapse"/>
        <xsl:with-param name="HasExtraColumn" select="$HasExtraColumn"/>
      </xsl:call-template>
    </xsl:if>
    <xsl:if test="not(not($NoAJAX) and not($InlineEdit) and $Collapse and $GroupCount &gt; 0)">
      <xsl:apply-templates mode="Item" select=".">
        <xsl:with-param name="Fields" select="$Fields"/>
        <xsl:with-param name="Collapse" select="$Collapse"/>
        <xsl:with-param name="Position" select="position()"/>
        <xsl:with-param name="Last" select="last()"/>
      </xsl:apply-templates>
    </xsl:if>
  </xsl:for-each>
  <xsl:if test="$InlineEdit and not($IsDocLib) and $ListRight_AddListItems = '1'">
    <xsl:call-template name="rowinsert">
      <xsl:with-param name="Fields" select="$Fields"/>
    </xsl:call-template>
  </xsl:if>
</xsl:template>

Как видите, тут есть большой foreach, который будет рендерить каждую строку. Осталось найти шаблон для этой строки. Так как я ничего в представлениях не менял, то найти шаблон для строки очень просто - это первый среди шаблонов строк (строка 1086).

<xsl:template mode="Item" match="Row">
  <xsl:param name="Fields" select="."/>
  <xsl:param name="Collapse" select="."/>
  <xsl:param name="Position" select="1" />
  <xsl:param name="Last" select="1" />
  <xsl:variable name="thisNode" select="."/>
  <xsl:variable name="ID">
    <xsl:call-template name="ResolveId">
      <xsl:with-param name="thisNode" select ="."/>
    </xsl:call-template>
  </xsl:variable>
  <xsl:variable name="FSObjType">
    <xsl:choose>
      <xsl:when test="$EntityName != ''">0</xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="./@FSObjType"/>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <xsl:variable name="altClass">
    <xsl:choose>
      <xsl:when test="$Position mod 2 = 0">ms-alternating</xsl:when>
      <xsl:otherwise></xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <xsl:variable name="hoverClass">
    <xsl:choose>
      <xsl:when test="($TabularView='1' and $MasterVersion=4) or $InlineEdit">ms-itmhover</xsl:when>
      <xsl:otherwise></xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <xsl:variable name="EditMode" select="$dvt_form_key = @ID or $dvt_form_key = @BdcIdentity"/>
  <tr>
    <xsl:if test="$Collapse">
      <xsl:attribute name="style">display:none</xsl:attribute>
    </xsl:if>
    <xsl:attribute name="class">
      <xsl:value-of select="normalize-space(concat($altClass, ' ', $hoverClass))"/>
    </xsl:attribute>
    <xsl:if test="($TabularView='1' and $MasterVersion=4) or $InlineEdit">
      <xsl:attribute name="iid">
        <xsl:value-of select="$ViewCounter"/>,<xsl:value-of select="$ID"/>,<xsl:value-of select="$FSObjType"/>
      </xsl:attribute>
    </xsl:if>
    <xsl:if test="$EditMode">
      <xsl:attribute name="automode">
        <xsl:value-of select ="$ViewCounter"/>
      </xsl:attribute>
    </xsl:if>
    <xsl:if test="$TabularView='1' and $MasterVersion=4">
      <td class="ms-vb-itmcbx ms-vb-firstCell">
        <input type="checkbox" class="s4-itm-cbx"/>
      </td>
    </xsl:if>
    <xsl:if test="$InlineEdit">
      <xsl:call-template name="AutoModeHeader"/>
    </xsl:if>
    <xsl:for-each select="$Fields">
      <xsl:choose>
        <xsl:when test="$EditMode and not(@ReadOnly='TRUE') and not(@FieldType='Recurrence') and not(@FieldType='CrossProjectLink')">
          <xsl:call-template name="AutoModeForm">
            <xsl:with-param name="thisNode" select="$thisNode" />
            <xsl:with-param name="Position" select="$Position"/>
            <xsl:with-param name="Fields" select="$Fields"/>
          </xsl:call-template>
        </xsl:when>
        <xsl:otherwise>
          <xsl:apply-templates select="." mode="printTableCellEcbAllowed">
            <xsl:with-param name="thisNode" select="$thisNode"/>
          </xsl:apply-templates>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:for-each>
  </tr>
</xsl:template>

Если вы взглянете повнимательнее на этот шаблон, то заметите, что тут рендерится конкретная строка для таблицы. Теперь скопируем этот шаблон в свой файл custom.xsl и начнем веселиться! (Небольшое отступление. В зависимости от Вашей задумки, тут возможно использование другого стиля для вашего представления. Соответственно, при выборе другого стиля представления, для рендеринга возможно будут использоваться другие шаблоны из этого же файла. Статья получается итак довольно объемная, поэтому рендеринг в других стилях я сегодня рассматривать не буду). Итак, первым делом, я уберу цикл, который проходит по всем полям. Мне он тут совсем не нужен. Далее, я добавлю только один столбец, и в нем укажу все, что мне надо.

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
    version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
    xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:sharepoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
    <xsl:import href="/_layouts/xsl/main.xsl" />
    <xsl:template mode="Item" match="Row">
        <xsl:param name="Fields" select="." />
        <xsl:param name="Collapse" select="." />
        <xsl:param name="Position" select="1" />
        <xsl:param name="Last" select="1" />
        <xsl:variable name="thisNode" select="." />
        <xsl:variable name="ID">
            <xsl:call-template name="ResolveId">
                <xsl:with-param name="thisNode" select="." />
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="FSObjType">
            <xsl:choose>
                <xsl:when test="$EntityName != ''">0</xsl:when>
                <xsl:otherwise>
                    <xsl:value-of select="./@FSObjType" />
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
        <xsl:variable name="altClass">
            <xsl:choose>
                <xsl:when test="$Position mod 2 = 0">ms-alternating</xsl:when>
                <xsl:otherwise>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
        <xsl:variable name="hoverClass">
            <xsl:choose>
                <xsl:when test="($TabularView='1' and $MasterVersion=4) or $InlineEdit">ms-itmhover</xsl:when>
                <xsl:otherwise>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:variable>
        <xsl:variable name="EditMode" select="$dvt_form_key = @ID or $dvt_form_key = @BdcIdentity" />
        <tr>
            <xsl:if test="$Collapse">
                <xsl:attribute name="style">display:none</xsl:attribute>
            </xsl:if>
            <xsl:attribute name="class">
                <xsl:value-of select="normalize-space(concat($altClass, ' ', $hoverClass))" />
            </xsl:attribute>
            <xsl:if test="($TabularView='1' and $MasterVersion=4) or $InlineEdit">
                <xsl:attribute name="iid">
          <xsl:value-of select="$ViewCounter" />,
<xsl:value-of select="$ID" />,
<xsl:value-of select="$FSObjType" />
        </xsl:attribute>
            </xsl:if>
            <xsl:if test="$EditMode">
                <xsl:attribute name="automode">
                    <xsl:value-of select="$ViewCounter" />
                </xsl:attribute>
            </xsl:if>
            <xsl:if test="$TabularView='1' and $MasterVersion=4">
                <td class="ms-vb-itmcbx ms-vb-firstCell">
                    <input type="checkbox" class="s4-itm-cbx" />
                </td>
            </xsl:if>
            <xsl:if test="$InlineEdit">
                <xsl:call-template name="AutoModeHeader" />
            </xsl:if>
            <td colspan='1000' class="ms-stylebody" style="padding: 10px;" width="100%">
                <div style='display: none;'>
                    <table>
                        <tr>
                            <xsl:apply-templates select="$Fields[@Name='LinkTitle']" mode="printTableCellEcbAllowed">
                                <xsl:with-param name="thisNode" select="$thisNode" />
                            </xsl:apply-templates>
                        </tr>
                    </table>
                </div>
                <xsl:if test="./@Image != ''">
                    <a target="_blank">
                        <xsl:attribute name="href">
                            <xsl:value-of select="./@Url" />
                        </xsl:attribute>
                        <img align="left" width="100px" style="margin: 10px; margin-bottom: 2px; border: none;">
                            <xsl:attribute name="src">
                                <xsl:value-of select="./@Image" />
                            </xsl:attribute>
                        </img>
                    </a>
                </xsl:if>
                <h4 style="margin-bottom: 3px; margin-top: 10px; font-size: 12pt;">
                    <a target="_blank">
                        <xsl:attribute name="href">
                            <xsl:value-of select="./@Url" />
                        </xsl:attribute>
                        <xsl:value-of select="./@Title" />
                    </a>
                </h4>
                <span style="font-size: 10pt;" align="justify">
                    <xsl:value-of select="./@Content" disable-output-escaping="yes" />
                </span>
            </td>
            <!--<xsl:for-each select="$Fields">
        <xsl:choose>
          <xsl:when test="$EditMode and not(@ReadOnly='TRUE') and not(@FieldType='Recurrence') and not(@FieldType='CrossProjectLink')">
            <xsl:call-template name="AutoModeForm">
              <xsl:with-param name="thisNode" select="$thisNode" />
              <xsl:with-param name="Position" select="$Position"/>
              <xsl:with-param name="Fields" select="$Fields"/>
            </xsl:call-template>
          </xsl:when>
          <xsl:otherwise>
            <xsl:apply-templates select="." mode="printTableCellEcbAllowed">
              <xsl:with-param name="thisNode" select="$thisNode"/>
            </xsl:apply-templates>
          </xsl:otherwise>
        </xsl:choose>
      </xsl:for-each>-->
        </tr>
    </xsl:template>
</xsl:stylesheet>

В принципе, тут все понятно, разве что я поясню назначение вот этого:

<div style='display: none;'>
    <table>
        <tr>
            <xsl:apply-templates select="$Fields[@Name='LinkTitle']" mode="printTableCellEcbAllowed">
                <xsl:with-param name="thisNode" select="$thisNode" />
            </xsl:apply-templates>
        </tr>
    </table>
</div>

Без этого при клике на всю строку, кнопки в риббоне для редактирования/удаления не становились активными. Если заглянуть в разметку, там для этого есть какой то javascript. Я не стал разбираться, как он работает, просто добавил в скрытый див одно корректно отрендеренное поле. С ним все работает нормально.

Отлично. остался последний штрих - это переименовать кнопку "Добавить элемент" на кнопку "Добавить новость". Само формирование этой кнопки происходит в строке 1986, Нам достаточно скопировать тот темплейт и поправить его под себя:

<xsl:template name="Freeform">
    <xsl:param name="AddNewText" />
    <xsl:param name="ID"/>
    <xsl:variable name="Url">
      <xsl:choose>
        <xsl:when test="List/@TemplateType='119'"><xsl:value-of select="$HttpVDir"/>/_layouts/CreateWebPage.aspx?List=<xsl:value-of select="$List"/>&amp;RootFolder=<xsl:value-of select="$XmlDefinition/List/@RootFolder"/></xsl:when>
        <xsl:when test="$IsDocLib"><xsl:value-of select="$HttpVDir"/>/_layouts/Upload.aspx?List=<xsl:value-of select="$List"/>&amp;RootFolder=<xsl:value-of select="$XmlDefinition/List/@RootFolder"/></xsl:when>
        <xsl:otherwise><xsl:value-of select="$ENCODED_FORM_NEW"/></xsl:otherwise>
      </xsl:choose>
    </xsl:variable>
    <xsl:variable name="HeroStyle">
      <xsl:choose>
        <xsl:when test="Toolbar[@Type='Standard']">display:none</xsl:when>
        <xsl:otherwise></xsl:otherwise>
      </xsl:choose>
    </xsl:variable>
    <xsl:if test="$ListRight_AddListItems = '1' and (not($InlineEdit) or $IsDocLib)">
      <table id="Hero-{$WPQ}" width="100%" cellpadding="0" cellspacing="0" border="0" style="{$HeroStyle}">
        <tr>
          <td colspan="2" class="ms-partline">
            <img src="/_layouts/images/blank.gif" width="1" height="1" alt="" />
          </td>
        </tr>
        <tr>
          <td class="ms-addnew" style="padding-bottom: 3px">
          <span style="height:10px;width:10px;position:relative;display:inline-block;overflow:hidden;" class="s4-clust"><img src="/_layouts/images/fgimg.png" alt="" style="left:-0px !important;top:-128px !important;position:absolute;"  /></span>
          <xsl:text disable-output-escaping="yes" ddwrt:nbsp-preserve="yes">&amp;nbsp;</xsl:text>
          <xsl:choose>
            <xsl:when test="List/@TemplateType = '115'">
              <a class="ms-addnew" id="{$ID}-{$WPQ}"
                 href="{$Url}"
                 onclick="javascript:NewItem2(event, &quot;{$Url}&quot;);javascript:return false;"
                 target="_self">
                Добавить новость
              </a>
            </xsl:when>
            <xsl:otherwise>
              <a class="ms-addnew" id="{$ID}"
                 href="{$Url}"
                 onclick="javascript:NewItem2(event, &quot;{$Url}&quot;);javascript:return false;"
                 target="_self">
                Добавить новость
              </a>
            </xsl:otherwise>
          </xsl:choose>
          </td>
        </tr>
        <tr>
          <td>
            <img src="/_layouts/images/blank.gif" width="1" height="5" alt="" />
          </td>
        </tr>
      </table>
      <xsl:choose>
        <xsl:when test="Toolbar[@Type='Standard']">
          <script type='text/javascript'>
            if (typeof(heroButtonWebPart<xsl:value-of select="$WPQ"/>) != "undefined")
            {
                <xsl:value-of select="concat('  var eleHero = document.getElementById(&quot;Hero-', $WPQ, '&quot;);')"/>
                if (eleHero != null)
                    eleHero.style.display = "";
            }
          </script>
        </xsl:when>
        <xsl:otherwise>
        </xsl:otherwise>
      </xsl:choose>
      <xsl:if test="List/@TemplateType = '115'">
          <script type='text/javascript'>
            if (typeof(DefaultNewButtonWebPart<xsl:value-of select="$WPQ"/>) != "undefined")
            {
                <xsl:value-of select="concat('  var eleLink = document.getElementById(&quot;', $ID, '-', $WPQ, '&quot;);')"/>
                if (eleLink != null)
                {
                    DefaultNewButtonWebPart<xsl:value-of select="$WPQ"/>(eleLink);
                }
            }
          </script>
      </xsl:if>
    </xsl:if>
  </xsl:template>

И вуаля, мы получаем наше кастомное представление списка.

Конечно, это только вершина айсберга, и, возможно, мои методы тоже неидеальны, но для такого новичка как я это решение подходит, так как оно работает и дает базовое представление о механизмах генерации результирующего представления. На этом все, всем спасибо. Ссылки по теме: Глобальные параметры XSLT Обзор систем отображения представлений списков с помощью XSLT-преобразований SharePoint и XSLT: область ссылок «быстрого доступа» SharePoint и XSLT: Почему XSLT - это важно? SharePoint и XSLT: Hello world! SharePoint Developer Roadmap Интересные блоги GANDJUSTAS' BLOG SharePoint для профессионалов Блог Виталия Жукова Русский блог SharePoint 2010 В качестве подопытных данных были использованы материалы статьи Torrent Stream для Ubuntu ресурса Хабрахабр

Добавляем MVC к проекту Web Forms

tym32167@gmail.com — Вс, 19 фев 2012 15:39:00 +0500

Здравствуйте. Сегодня поговорим о веб разработке, а конкретно о MVC и веб формах. Часто так бывает, что хочется добавить мощь MVC к существующему проекту Web Forms, а переписывать весь код с нуля затратно, да и некоторые фишки в старом коде хотелось бы оставить. Именно о добавлении функциональности MVC к проекту Web Forms далее пойдет речь. Итак, допустим, у нас есть проект Web Forms и мы хотим, чтобы некоторые из его разделов были сгенерированы посредством MVC. Давайте задумаемся, что из себя вообще представляет проект Visual Studio? По сути, это просто файл с настройками (файл проекта), в котором также перечислены все другие файлы, входяшие в этот проект. То есть что я хочу сказать - что только в этом файле то и написано, что вообще проект из себя представляет веб-сайт, а не, например, службу Windows. А в чем кроется функциональность MVC? Oна находится в сборках MVC, и при работе с этой технологией используются классы из этих сборок. То есть было бы логично представить, если мы возьмём эти сборки, подключим к проекту, то мы можем беспрепятственно их использовать для генерации страниц, верно? Итак, первым делом я создаю простое Web Forms приложение.

В нём абсолютно нет ничего особенного - это стандартное приложение, которое создаcтся автоматически. Далее, добавляем нужные сборки MVC. Для этого заходим в web.config и обновляем там секцию compilation

  <compilation debug="true" targetFramework="4.0">
      <assemblies>
          <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
          <add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
          <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
          <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
          <add assembly="System.Web.WebPages, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
      </assemblies>
  </compilation>

Затем добавляем ссылки на все эти указанные сборки (я пользуюсь MVC 3 - если Вы пользуетесь другой версией, то версия сборок должна быть Ваша). Далее добавляем используемые пространства имен для страниц (этого можно и не делать, но мне так удобнее). Для этого добавляем секцию pages в секцию system.web файла web.config

<pages>
  <namespaces>
    <add namespace="System.Web.Helpers" />
    <add namespace="System.Web.Mvc" />
    <add namespace="System.Web.Mvc.Ajax" />
    <add namespace="System.Web.Mvc.Html" />
    <add namespace="System.Web.Routing" />
    <add namespace="System.Web.WebPages"/>
  </namespaces>
</pages>

Затем обновим класс Global, который находится в файле Global.asax.cs. Если честно, то я просто создал второй проект типа MVC и просто скопировал код для этого класса. Но Вы можете тут всё настроить по собственному желанию, конечно.

using System.Web.Mvc;
using System.Web.Routing;
namespace WebApp
{
    public class Global : System.Web.HttpApplication
    {
        public static void RegisterGlobalFilters(GlobalFilterCollection filters)
        {
            filters.Add(new HandleErrorAttribute());
        }
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
            );
        }
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
        }
    }
}

Теперь создадим нужные нам папки Controllers, Models и Views. Работа почти закончена. Но только вот студия пока не понимает, что наш проект уже не просто Web Forms, а уже использует MVC - нет таких менюшек как Add Controller, Add View и тд. Чтобы это исправить, заглянем в сам файл проекта (для этого сгодится любой текстовый редактор). Что мы там увидим? В моём случае, файл WebApp.csproj хранится в формате XML и нам оттуда нужна только секция ProjectTypeGuids. Именно она указывает студии, какой вид проекта мы в данный момент используем (идентификаторы различных типов проектов можно поглядеть тут или тут). Приводим его к следующему виду :

<ProjectTypeGuids>{E53F8FEA-EAE0-44A6-8774-FFD645390401};{349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc}</ProjectTypeGuids>

После этого перегружаем проект в студии. После этого можно добавить первый контроллер в проекте. Добавим контроллер HomeController и представление для него Index.aspx, где просто выведем строку Hello from ASP.NET MVC!

Но это ещё не всё. Благодаря подобным чудесным статьям можно делать даже так:

На этом всё. Всем спасибо.

UPD. В комментариях попросили добавить поддержку Razor. Нет ничего проще! Достаточно в папку Views проекта добавить файл web.config со следующим содержимым:

<?xml version="1.0"?>
<configuration>
    <configSections>
        <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
            <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
            <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
        </sectionGroup>
    </configSections>
    <system.web.webPages.razor>
        <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
        <pages pageBaseType="System.Web.Mvc.WebViewPage">
            <namespaces>
                <add namespace="System.Web.Mvc" />
                <add namespace="System.Web.Mvc.Ajax" />
                <add namespace="System.Web.Mvc.Html" />
                <add namespace="System.Web.Routing" />
            </namespaces>
        </pages>
    </system.web.webPages.razor>
</configuration>

После этого можно использовать представления Razor.

ASP.NET: Пара сценариев отображения данных в GridView

tym32167@gmail.com — Пт, 27 янв 2012 10:38:00 +0500

Здравствуйте. Сегодня поговорим о веб-разработке. Несмотря на то, что популярность MVC растет очень быстро, Web Forms ещё никто не отменял. К тому же много приложений написано с использованием Web Forms, да и уже написанные приложения требуют поддержки. И если простейшие контролы (например, TextBox) у новичков вопросов, как правило, не вызывают, то сориентироваться в чем-то более сложном уже проблема. В данном посте я расскажу в общих чертах, как использовать контрол GridView для работы со списком или специализированным источником данных. Предупреждаю сразу, тема не новая и статья ориентирована на начинающих разработчиков. Поехали. Начнем с теории. Класс GridView

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

Его можно связывать с элементами-источниками данных (например, наследниками DataSourceControl), а можно просто отображать перечисляемые списки, указав значение свойства DataSource. Начнем с последнего. Итак, задача: Имеется страница, на которой расположен GridView, и список, который нужно на этой странице формировать и иметь возможность его изменять (то есть добавлять/удалять элементы). Список хранится только на странице. Порядок действий:

Создаём веб-приложение
Удаляем с домашней страницы всё лишнее (необязательно)
Создаём страницу GridViewList.aspx, указываем для неё мастер страницу
Добавляем в меню пункт со ссылкой на GridViewList.aspx

Отлично, полигон для действий готов. Класс-объект, с которым мы будем работать, я определил так:

[Serializable]
public class People
{
    [XmlAttribute]
    public int Id { get; set; }
    [XmlAttribute]
    public string FirstName { get; set; }
    [XmlAttribute]
    public string LastName { get; set; }
}

Теперь определимся со списком. Во-первых, так как список формируется и изменяется только в рамках этой страницы, я решил хранить его во ViewState. Я просто определил свойство на странице, которое автоматом себя сохраняет.

public List<People> Peoples
{
    get
    {
        // Получение ключа для поиска во ViewState. 
        // hfPeoplesViewState - HiddenField, которое хранит в себе этот ключ
        // Это всё сделано только для того, чтобы обеспечить уникальность ключа на странице. 
        // По идее тут можно было просто написать var str = "Peoples_Key" и всё бы работало
        var str = hfPeoplesViewState.Value;
        if (string.IsNullOrEmpty(str))
        {
            // Если ещё ничего не хранит, то создать ключ
            hfPeoplesViewState.Value = string.Format("Peoples_{0}", Guid.NewGuid());
            str = hfPeoplesViewState.Value;
        }
        // Проверяю, если во ViewState ещё нет того списка, что мне нужен - создаю его
        if (ViewState[str] == null || !(ViewState[str] is List<People>))
        {
            var peoples = new List<People>
                              {
                                  new People {Id = 1, LastName = "Мурадов", FirstName = "Артем"},
                                new People {Id = 2, LastName = "Пупкин", FirstName = "Василий"},
                                new People {Id = 3, LastName = "Елопанов", FirstName = "Инокентий"}
                              };
            ViewState[str] = peoples;
            return peoples;
        }
        return ViewState[str] as List<People>;
    }
    set
    {
        // Аналогично методу get
        var str = hfPeoplesViewState.Value;
        if (string.IsNullOrEmpty(str))
        {
            hfPeoplesViewState.Value = string.Format("Peoples_{0}", Guid.NewGuid());
            str = hfPeoplesViewState.Value;
        }
        ViewState[str] = value;
    }
}

Добавим GridView в разметку. По пути также добавим пару текстовых полей и кнопку, для возможности добавления элемента в коллекцию.

<asp:TextBox runat="server" ID="tbFirstName">
</asp:TextBox>
<asp:TextBox runat="server" ID="tbLastName">
</asp:TextBox>
<asp:Button runat="server" OnClick="BtAddPeople" Text="+" />
<hr />
<asp:GridView runat="server" ID="gv" AutoGenerateColumns="True" Width="60%">
    <EmptyDataTemplate>
        Записей нет</EmptyDataTemplate>
</asp:GridView>

В обработчике событий

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        gv.DataSource = Peoples;
        gv.DataBind();
    }
}
protected void BtAddPeople(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(tbFirstName.Text) && !string.IsNullOrEmpty(tbLastName.Text))
    {
        var id = Peoples.Count > 0 ? Peoples.Max(x => x.Id) + 1 : 1;
        var p = new People
        {
            Id = id,
            FirstName = tbFirstName.Text,
            LastName = tbLastName.Text
        };
        Peoples.Add(p);
        UpdateGrid();
    }
}
private void UpdateGrid()
{
    gv.DataSource = Peoples;
    gv.DataBind();
}

Окей, теперь при первой загрузке страницы, у нас будет заполняться GridView. А при добавлении элемента в коллекцию, GridView будет обновляться. Вот как это выглядит:

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

<asp:GridView runat="server" ID="gv" AutoGenerateColumns="False" Width="60%" AllowSorting="True">
    <Columns>
        <asp:BoundField HeaderText="ИД" DataField="Id" SortExpression="Id" ReadOnly="True">
            <ItemStyle Width="5%"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField HeaderText="Имя" DataField="FirstName" SortExpression="FirstName">
            <ItemStyle Width="40%"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField HeaderText="Фамилия" DataField="LastName" SortExpression="LastName">
            <ItemStyle Width="40%"></ItemStyle>
        </asp:BoundField>
        <asp:CommandField ShowEditButton="True" ShowDeleteButton="True" ShowCancelButton="True">
            <ItemStyle Width="15%"></ItemStyle>
        </asp:CommandField>
    </Columns>
    <EmptyDataTemplate>
        Записей нет</EmptyDataTemplate>
</asp:GridView>

Теперь у нас есть кнопки, для того, чтобы сортировать, редактировать или удалять. Но только этого функционала пока нет. GridView не может самостоятельно править нашу коллекцию. Но это не беда, нам достаточно подписаться на нужные нам события и реализовать всё самим. Для редактирования нужны следующие события: OnRowEditing="GvEditing" OnRowUpdating="GvUpdating" OnRowCancelingEdit="GvCancelingEdit", для сортировки OnSorting="GvSorting", для удаления OnRowDeleting="GvDeleting".

<asp:GridView runat="server" ID="gv" AllowSorting="True" OnSorting="GvSorting" OnRowEditing="GvEditing"
    OnRowUpdating="GvUpdating" OnRowCancelingEdit="GvCancelingEdit" OnRowDeleting="GvDeleting"
    DataKeyNames="Id" AutoGenerateColumns="False" Width="60%" >
    <Columns>
        <asp:BoundField HeaderText="ИД" DataField="Id" SortExpression="Id" ReadOnly="True">
            <ItemStyle Width="5%"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField HeaderText="Имя" DataField="FirstName" SortExpression="FirstName">
            <ItemStyle Width="40%"></ItemStyle>
        </asp:BoundField>
        <asp:BoundField HeaderText="Фамилия" DataField="LastName" SortExpression="LastName">
            <ItemStyle Width="40%"></ItemStyle>
        </asp:BoundField>
        <asp:CommandField ShowEditButton="True" ShowDeleteButton="True" ShowCancelButton="True">
            <ItemStyle Width="15%"></ItemStyle>
        </asp:CommandField>
    </Columns>
    <EmptyDataTemplate>
        Записей нет</EmptyDataTemplate>
</asp:GridView>

Вот код для сортировки

/// <summary>
/// Возникает при сортировке в гриде.
/// </summary>
protected void GvSorting(object sender, GridViewSortEventArgs e)
{
    var p = Peoples;
    // Необходимо определить, по какому именно полю сортировать
    if (e.SortExpression == "LastName")
    {
        // используем вспомогательный метод Sort
        p = Sort("LastName", list => list.OrderBy(x => x.LastName).ToList(),
                 list => list.OrderByDescending(x => x.LastName).ToList(), p);
    }
    if (e.SortExpression == "FirstName")
    {
        p = Sort("FirstName", list => list.OrderBy(x => x.FirstName).ToList(),
                 list => list.OrderByDescending(x => x.FirstName).ToList(), p);
    }
    if (e.SortExpression == "Id")
    {
        p = Sort("Id", list => list.OrderBy(x => x.Id).ToList(),
                 list => list.OrderByDescending(x => x.Id).ToList(), p);
    }
    Peoples = p;
    // обновление грида
    UpdateGrid();
}
/// <summary>
/// Вспомогательный метод для сортировки
/// </summary>
private List<People> Sort(string column, Func<List<People>, List<People>> ascFunc, Func<List<People>, List<People>> descFunc, List<People> data)
{
    List<People> result;
    // Если в прошлвй раз была сортировка по этому же полю
    if (hfLastSortFieldState.Value == column)
    {
        // смотрим, в каком направлении была сортировка в прошлвй раз и сортируем в другом
        result = hfLastSortDirectionState.Value != "ASC" ? ascFunc(data) : descFunc(data);
        // сохраняем колонку и направление сортировки
        hfLastSortDirectionState.Value = hfLastSortDirectionState.Value != "ASC" ? "ASC" : "DESC";
        hfLastSortFieldState.Value = column;
    }
    else
    {
        // Если это поле ещё не сортировано, сортируем по возрастанию
        result = ascFunc(data);
        // сохраняем колонку и направление сортировки
        hfLastSortDirectionState.Value = "ASC";
        hfLastSortFieldState.Value = column;
    }
    return result;
}

Код для редактирования и удаления

/// <summary>
/// Событие удаления элемента. Поле Id попадает в набор ключей, 
/// так как в гриде указано DataKeyNames="Id"
/// Нам осталось только определить ключ и убрать элемент с этим ключем из коллекции 
/// </summary>
protected void GvDeleting(object sender, GridViewDeleteEventArgs e)
{
    int id;
    // Определяем идентификатор
    if (int.TryParse(string.Format("{0}", e.Keys["Id"]), out id))
    {
        // Убираем из списка
        Peoples = Peoples.Where(x => x.Id != id).ToList();
        // обновляем грид
        UpdateGrid();
    }
}
/// <summary>
/// Событие возникает, когда пользователь начинает редактировать строку. 
/// Необходимо просто указать гриду индекс редактируемой строки и обновить грид
/// </summary>
protected void GvEditing(object sender, GridViewEditEventArgs e)
{
    gv.EditIndex = e.NewEditIndex;
    UpdateGrid();
}
/// <summary>
/// Событие возникает, когда пользователь обновляет строку. 
/// Необходимо определить Id строки, получить элемент по этому Id, обновить поля и обновить грид 
/// </summary>
protected void GvUpdating(object sender, GridViewUpdateEventArgs e)
{
    int id;
    if (int.TryParse(string.Format("{0}", e.Keys["Id"]), out id))
    {
        Peoples
            .Where(x => x.Id == id)
            .ToList()
            .ForEach(x =>
                         {
                            // я использую string.Format, так как 
                            // e.NewValues["FirstName"] имеет тип object
                            // и может быть равен null
                             x.FirstName = string.Format("{0}", e.NewValues["FirstName"]);
                             x.LastName = string.Format("{0}", e.NewValues["LastName"]);
                         });
        gv.EditIndex = -1;
        UpdateGrid();
    }
}
/// <summary>
/// Событие возникает, когда пользователь отменяет обновление строки
/// Нужно установить gv.EditIndex = -1; и обновить грид
/// </summary>
protected void GvCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
    gv.EditIndex = -1;
    UpdateGrid();
}

В итоге имеем грид, элементы которого можем удалять, добавлять, редактировать и сортировать.

Это всё хорошо, но что делать, если мы работаем с базой данных? В таких случаях можно определять источники данных (например, наследники DataSourceControl) и связывать их с гридом. Я приведу пример с использованием ObjectDataSource. Я выбрал ObjectDataSource, так как он зависит только от вашего кода и ему всё равно, откуда берутся данные - из базы данных, сервиса, файла, да чего угодно. Формализуем задачу. Необходимо реализовать такой же функционал, как и в предыдущем примере, но с использованием ObjectDataSource. Только на этот раз данные я буду хранить не на странице, а в статической переменной - чтобы эти данные были доступны в рамках всего приложения (ведь так и происходит, когда вы работаете, например, с базой данных). Вот класс автомобиля, с которым будем работать

public class Car
{
    public int Id { get; set; }
    public string Manufacturer { get; set; }
    public string Model { get; set; }
}

Начнем с класса-репозитория. Именно его методы будет вызывать ObjectDataSource для получения данных и манипуляции с ними. Хочу заметить, что я подобрал сигнатуру и набор методов репозитория специально для использования в ObjectDataSource. Вот сам класс:

public class CarRepository
{
    /// <summary>
    /// Статическая переменная. В ней будем хранить наши данные
    /// </summary>
    private static List<Car> _store;
    /// <summary>
    /// Статический конструктор. Внутри инициализируем наши данные
    /// </summary>
    static CarRepository()
    {
        _store = new List<Car>();
        for (var i = 0; i < 1000; i++)
        {
            _store.Add(new Car
            {
                Id = i,
                Manufacturer = "Manufacturer" + i,
                Model = "Model" + i
            });
        }
    }
    /// <summary>
    /// Получение данных. Принимает три параметра. Назначение первых двух очевидно, 
    /// а вот в третьем приходит информация  для сортировки. Например, у нас сортировка по полю
    /// "Id". При сортировке по возрастанию переметр sort будет равен "Id". 
    /// При сортировке по убыванию - "Id DESC"
    /// </summary>
    public IEnumerable<Car> GetCars(int maximumRows, int startRowIndex, string sort)
    {
        IEnumerable<Car> temp = _store;
        // Сперва определяем направление сортировки, затем поле, по которому сортируем
        if (sort.Contains("DESC"))
        {
            if (sort.Contains("Id")) temp = _store.OrderByDescending(x => x.Id);
            if (sort.Contains("Manufacturer")) temp = _store.OrderByDescending(x => x.Manufacturer);
            if (sort.Contains("Model")) temp = _store.OrderByDescending(x => x.Model);
        }
        else
        {
            if (sort.Contains("Id")) temp = _store.OrderBy(x => x.Id);
            if (sort.Contains("Manufacturer")) temp = _store.OrderBy(x => x.Manufacturer);
            if (sort.Contains("Model")) temp = _store.OrderBy(x => x.Model);
        }
        return temp.Skip(startRowIndex).Take(maximumRows);
    }
    /// <summary>
    /// Необходим для подсчёта общего количества элеменов. 
    /// Используется для постраничного вывода данных
    /// </summary>
    public int Count()
    {
        return _store.Count;
    }
    /// <summary>
    /// Для обновления в метод приходит экземпляр Car с
    /// идентификатором обновляемой машины и новыми значениями полей
    /// </summary>
    public void Update(Car car)
    {
        _store
            .Where(x => x.Id == car.Id)
            .ToList()
            .ForEach(x =>
                         {
                             x.Manufacturer = car.Manufacturer;
                             x.Model = car.Model;
                         });
    }
    /// <summary>
    /// Удаление. Код и так понятен.
    /// </summary>
    public void Delete(Car car)
    {
        _store = _store.Where(x => x.Id != car.Id).ToList();
    }
    /// <summary>
    /// Добавление
    /// </summary>
    public void Insert(Car car)
    {
        car.Id = _store.Count > 0 ? _store.Max(x => x.Id) + 1 : 1;
        _store.Add(car);
    }
}

Отлично. Теперь, как и в предыдущем примере, добавляем страницу в проект и кидаем на эту страницу 2 текстбокса и кнопку (для возможности добавления)

<asp:TextBox runat="server" ID="tbManufacturer">
</asp:TextBox>
<asp:TextBox runat="server" ID="tbModel">
</asp:TextBox>
<asp:Button runat="server" OnClick="BtAddCar" Text="+" />
<hr />

protected void BtAddCar(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(tbManufacturer.Text) && !string.IsNullOrEmpty(tbModel.Text))
    {
        var carRepository = new CarRepository();
        carRepository.Insert(new Car {Manufacturer = tbManufacturer.Text, Model = tbModel.Text});
        gv.DataBind();
    }
}

Теперь поработаем над самим контролом ObjectDataSource.

<asp:ObjectDataSource ID="ods" runat="server" TypeName="GridViewTest.CarRepository"
    DataObjectTypeName="GridViewTest.Car" EnablePaging="True" MaximumRowsParameterName="maximumRows"
    StartRowIndexParameterName="startRowIndex" SortParameterName="sort" InsertMethod="Insert"
    SelectCountMethod="Count" SelectMethod="GetCars" UpdateMethod="Update" DeleteMethod="Delete">
</asp:ObjectDataSource>

Поясню по каждому полю.

TypeName="GridViewTest.CarRepository" - указывает класс-источник данных
DataObjectTypeName="GridViewTest.Car" - указывает тип объекта, которым будем оперировать. Благодаря этому мы можем в репозитории указывать методы, принимающие в качестве параметра экземпляр типа Car. Этот тип должен иметь конструктор без параметров и поля, доступные для записи.
EnablePaging="True" указываем, что используется постраничный вывод
MaximumRowsParameterName="maximumRows" StartRowIndexParameterName="startRowIndex" SortParameterName="sort" имена параметров в методах
InsertMethod="Insert" SelectCountMethod="Count" SelectMethod="GetCars" UpdateMethod="Update" DeleteMethod="Delete" имена методов в репозитории

Теперь у нас всё готово для того, чтобы добавить на страницу грид. Приведу весь его код.

<asp:GridView runat="server" ID="gv" AllowSorting="True" DataKeyNames="Id" AutoGenerateColumns="False"
    DataSourceID="ods" Width="60%" AllowPaging="True" PageSize="20">
    <Columns>
        <%--Тут, как и в предыдущем примере, я использую BoundField--%>
        <asp:BoundField HeaderText="ИД" DataField="Id" ReadOnly="True" SortExpression="Id">
            <ItemStyle Width="5%"></ItemStyle>
        </asp:BoundField>
        <%--Здесь я тоже мог бы использовать BoundField, но я хотел показать, как использовать
        TemplateField с односторонней (Eval) и двухсторонней (Bind) привязкой данных--%>
        <asp:TemplateField HeaderText="Производитель" SortExpression="Manufacturer">
            <ItemStyle Width="35%"></ItemStyle>
            <ItemTemplate>
                <%#Eval("Manufacturer")%>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox runat="server" ID="tbMan" Text='<%#Bind("Manufacturer") %>'></asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
        <%--Тут всё аналогично предыдущему столбцу--%>
        <asp:TemplateField HeaderText="Модель" SortExpression="Model">
            <ItemStyle Width="35%"></ItemStyle>
            <ItemTemplate>
                <%#Eval("Model")%>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox runat="server" ID="tbModel" Text='<%#Bind("Model") %>'></asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
        <%--Я хочу показать, что для того, чтобы использовать кнопки редактирования/удаления,
        вам не обязательно пользоваться CommandField. Достаточно указать нужное значение в поле
        CommandName любого кнопочного контрола--%>
        <asp:TemplateField>
            <ItemStyle Width="25%"></ItemStyle>
            <ItemTemplate>
                <asp:LinkButton runat="server" CommandName="Edit" Text="Изменить"></asp:LinkButton>
                <%--А раз это простые кнопки, то можно им добавлять нужное поведение. Например, 
                OnClientClick отработает на клиенте, спросит у пользователя разрешение на действие,
                и постбек произойдет только в том случае, если пользователь ответит утвердительно --%>
                <asp:LinkButton runat="server" CommandName="Delete" Text="Удалить"
                OnClientClick="return confirm('Вы действительно хотите удалить запись?');"></asp:LinkButton>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:LinkButton runat="server" CommandName="Update" Text="Обновить"></asp:LinkButton>
                <asp:LinkButton runat="server" CommandName="Cancel" Text="Отменить"></asp:LinkButton>
            </EditItemTemplate>
        </asp:TemplateField>
    </Columns>
    <%--Контент, который будет показан, если записей не будет вовсе--%>
    <EmptyDataTemplate>
        Записей нет</EmptyDataTemplate>
</asp:GridView>

Собрав всё вместе, получаем результат:

Вот и всё. Данные можно изменять, сортировать, удалять. Таким образом, используя GridView и различные источники данных, можно легко манипулировать данными и представлять их в удобном для вас виде. Исходный код солюшена P.S. Решил добавить немного информации о фильтрации наборов данных. Хотя это и выходит за рамки статьи, но это частый сценарий при работе с источниками данных. Итак, давайте в наш последний пример добавим немного фильтров. Я просто хочу, чтобы можно было фильтровать список по Id используя параметры URL запроса, а также я добавлю 2 текстовых поля для фильтрации по производителю и модели. Итак, наши текстовые поля:

<asp:TextBox runat="server" ID="tbManufacturerFilter">
</asp:TextBox>
<asp:TextBox runat="server" ID="tbModelFilter">
</asp:TextBox>
<asp:Button runat="server" Text="Искать" />

Для чего там кнопка и почему она ничего не делает я поясню позже. Далее необходимо указать источнику данных, что параметры для получения информации необходимо брать из текстовых полей и URL. Это можно сделать с помощью коллекции SelectParameters.

<asp:ObjectDataSource ID="ods" runat="server" TypeName="GridViewTest.CarRepository"
    DataObjectTypeName="GridViewTest.Car" EnablePaging="True" MaximumRowsParameterName="maximumRows"
    StartRowIndexParameterName="startRowIndex" SortParameterName="sort" InsertMethod="Insert"
    SelectCountMethod="Count" SelectMethod="GetCars" UpdateMethod="Update" DeleteMethod="Delete">
    <SelectParameters>
        <asp:QueryStringParameter DefaultValue="-1" QueryStringField="id" Name="id" Type="Int32" />
        <asp:ControlParameter ControlID="tbManufacturerFilter" DefaultValue="" Name="manFilter" ConvertEmptyStringToNull="false"
            PropertyName="Text" Type="String" />
        <asp:ControlParameter ControlID="tbModelFilter" DefaultValue="" Name="modelFilter" ConvertEmptyStringToNull="false"
            PropertyName="Text" Type="String" />
    </SelectParameters>
</asp:ObjectDataSource>

Собственно, названия QueryStringParameter и ControlParameter говорят сами за себя (Список типов параметров и как их использовать). Однако, так как мы имеем дело с ObjectDataSource, наш источник данных должен поддерживать эти параметры. Вот код всех обновленных функций класса-источника данных.

/// <summary>
/// Получение данных. Принимает шесть параметров. Первые три предназначены для фильтрации.
/// Назначение следующих двух очевидно. 
/// А вот в шестом приходит информация  для сортировки. Например, у нас сортировка по полю
/// "Id". При сортировке по возрастанию переметр sort будет равен "Id". 
/// При сортировке по убыванию - "Id DESC"
/// </summary>
public IEnumerable<Car> GetCars(int id, string manFilter, string modelFilter, int maximumRows, int startRowIndex, string sort)
{
    IEnumerable<Car> temp = _store.Where(x => CheckCar(x, id, manFilter, modelFilter));
    // Сперва определяем направление сортировки, затем поле, по которому сортируем
    if (sort.Contains("DESC"))
    {
        if (sort.Contains("Id")) temp = temp.OrderByDescending(x => x.Id);
        if (sort.Contains("Manufacturer")) temp = temp.OrderByDescending(x => x.Manufacturer);
        if (sort.Contains("Model")) temp = temp.OrderByDescending(x => x.Model);
    }
    else
    {
        if (sort.Contains("Id")) temp = temp.OrderBy(x => x.Id);
        if (sort.Contains("Manufacturer")) temp = temp.OrderBy(x => x.Manufacturer);
        if (sort.Contains("Model")) temp = temp.OrderBy(x => x.Model);
    }
    return temp.Skip(startRowIndex).Take(maximumRows);
}
/// <summary>
/// Необходим для подсчёта общего количества элеменов. 
/// Используется для постраничного вывода данных
/// </summary>
public int Count(int id, string manFilter, string modelFilter)
{
    return _store.Where(x => CheckCar(x, id, manFilter, modelFilter)).Count();
}
/// <summary>
/// Проверка соответствия конкретного экземпляра Car входящим параметрам
/// </summary>
private static bool CheckCar(Car car, int id, string manFilter, string modelFilter)
{
    return (id < 0 || car.Id == id) &&
        (string.IsNullOrEmpty(manFilter) || car.Manufacturer.Contains(manFilter)) &&
           (string.IsNullOrEmpty(modelFilter) || car.Model.Contains(modelFilter));
}

Теперь как это работает. При биндинге, GridView будет спрашивать данные у источника данных, который, в свою очередь, будет извлекать параметры и вызывать методы класса-источника данных, отправляя в него значения этих параметров. То есть это будет происходить само собой, при любом постбеке. Это означает, что если мы установим свойство у текстовых полей AutoPostBack=True или просто поставим кнопку (можно даже без обработчика), которая будет делать постбек, то этого достаточно, чтобы данные в гриде обновились с учетом заданных параметров. Как это выглядит:

Конечно, все вкусные плюшки в виде сортировки и добавления/изменения элементов остаются. Новый исходный код солюшена Всем спасибо. Полезные ссылки:

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

tym32167@gmail.com — Сб, 14 янв 2012 13:39:00 +0500

Здравствуйте. Я думаю, у каждого программиста есть свой набор примочек, программ, которые делают процесс работы проще и приятней. Сегодня речь пойдет об одной из таких программ, а точнее о том, как использовать списки переходов (jump lists), дабы уменьшить количество ярлыков на рабочем столе. Вот, что мы получим в итоге:

За подробностями прошу под кат. Итак, начальные условия: 1. У меня есть около 15 программ, которыми я пользуюсь часто (хотя бы раз в день). Хочу иметь возможность запускать эти программы быстро и удобно 2. Большая часть этих программ лежит в папке, которая синхронизируется между всеми моими компами/виртуалками 3. Общее между всеми компами то, что там везде установлена Windows 7 Задача: Написать программу, которая также будет синхронизирована между всеми компами и хранить информацию о запускаемых приложениях, давая возможность запускать эти приложения. Как я это вижу: Для каждой программы надо будет сделать описание (путь к exe файлу, название программы, описание и категория - это как минимум). Набор этих описаний я буду хранить в файле в той же папке что и саму программу. Тогда, благодаря синхронизации, у меня будет один общий список запускаемых программ для всех компьютеров. В самой программе нужно реализовать механизм заполнения списков переходов, запуска приложения из программы, ну и возможность редактирования названия и описания приложения. Инструменты: 1. Списки переходов 2. Я выбрал WPF, так как это моя слабая сторона. Повышаю опыт. 3. MVVM Light Toolkit Ну, вроде всё. Поехали! Для начала я набросал класс этого описания программы

namespace TaskStart.Tasks
{
    [Serializable]
    public class Task
    {
        [XmlAttribute]
        public string ApplicationPath { get; set; }
        [XmlAttribute]
        public string Title { get; set; }
        [XmlAttribute]
        public string Description { get; set; }
        [XmlAttribute]
        public string Category { get; set; }
    }
}

Тут ничего сложного. Далее, мне надо было определить механизм сохранения/загрузки. Я сделал простой класс Settings. Синглтоном я его сделал ради забавы, мог бы реализовать и по другому, но мне так больше нравится. Комментариев я не писал, так как код ну очень простой.

public class Settings
{
    private const string SettingsFileName = "Settings.xml";
    private Settings()
    {
    }
    private static Settings _instance;
    public static Settings Instance
    {
        get { return _instance ?? (_instance = new Settings()); }
    }
    public IEnumerable<Task> GetTasks()
    {
        var result = new List<Task>();
        if (File.Exists(SettingsFileName))
        {
            try
            {
                var xmlSer = new XmlSerializer(typeof(List<Task>));
                using (var sr = new StreamReader(SettingsFileName))
                {
                    var res = xmlSer.Deserialize(sr) as List<Task>;
                    result = res ?? new List<Task>();
                }
            }
            catch (Exception)
            {
                return result;
            }
        }
        return result;
    }
    public void SetTasks(IEnumerable<Task> tasks)
    {
        var taskList = tasks.ToList();
        using (var sw = new StreamWriter(SettingsFileName, false))
        {
            var xmlSer = new XmlSerializer(typeof(List<Task>));
            xmlSer.Serialize(sw, taskList);
        }
    }
}

Вот пример полученного на выходе XML

<?xml version="1.0" encoding="utf-8"?>
<ArrayOfTask xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <Task ApplicationPath="D:PubToolsfoobar2000foobar2000.exe" Title="foobar2000" Category="Entertainment" />
  <Task ApplicationPath="D:PubToolsThe KMPlayerKMPlayer.exe" Title="KMPlayer" Category="Entertainment" />
  <Task ApplicationPath="D:PubMiranda IMMirandaPortable.exe" Title="Miranda" Category="Messaging" />
  <Task ApplicationPath="C:Program Files (x86)SkypePhoneSkype.exe" Title="Skype" Category="Messaging" />
  <Task ApplicationPath="D:PubToolsDotNetNotepadDotNetNotepad.UI.exe" Title="DotNetNotepad" Category="Office" />
  <Task ApplicationPath="C:Program Files (x86)EvernoteEvernoteEvernote.exe" Title="Evernote" Category="Office" />
  <Task ApplicationPath="C:UsersAMuradovAppDataLocalAppsEvernoteEvernoteEvernote.exe" Title="Evernote" Category="Office" />
  <Task ApplicationPath="D:PubToolsNotepad++notepad++.exe" Title="Notepad++" Category="Office" />
  <Task ApplicationPath="D:ProjectsTTKAMuradovAdHelperAdHelper.AppbinReleaseAdHelper.App.exe" Title="AdHelper.App" Category="Programming" />
  <Task ApplicationPath="D:PubToolsFarx64FarEmuConEmu64.exe" Title="Far x64" Category="Programming" />
  <Task ApplicationPath="D:PubToolsSQL ToolsSQL.ManagerMsManager.exe" Title="MsManager" Category="Programming" />
  <Task ApplicationPath="D:PubToolsRad Software Regular Expression DesignerRad.RegexDesigner.exe" Title="Rad.RegexDesigner" Category="Programming" />
  <Task ApplicationPath="C:Program Files (x86)Microsoft SQL Server100ToolsBinnVSShellCommon7IDESsms.exe" Title="Sql Management Studio" Category="Programming" />
  <Task ApplicationPath="C:Program Files (x86)Microsoft Visual Studio 10.0Common7IDEdevenv.exe" Title="Visual Studio 2010" Category="Programming" />
  <Task ApplicationPath="C:Usersuc1АртемAppDataLocalGoogleChromeApplicationchrome.exe" Title="Chrome" Category="Web" />
  <Task ApplicationPath="C:UsersAMuradovAppDataLocalGoogleChromeApplicationchrome.exe" Title="Chrome" Category="Web" />
  <Task ApplicationPath="C:Program Files (x86)Mozilla Firefoxfirefox.exe" Title="Fierfox" Description="Web" Category="Web" />
  <Task ApplicationPath="C:Program Files (x86)Internet Exploreriexplore.exe" Title="IE" Category="Web" />
</ArrayOfTask>

Далее, мне для моей сущности Task нужна была ViewModel - именно её я буду привязывать к интерфейсу.

public class TaskViewModel
{
    private readonly Task _task;
    /// <summary>
    /// Конструктор. Принимает Task и заполняет нужные поля данными. Также инициализирует команду запуска приложения.
    /// </summary>
    /// <param name="task"></param>
    public TaskViewModel( Task task)
    {
        _task = task;
        ApplicationPath = _task.ApplicationPath;
        Category = _task.Category;
        Description = _task.Description;
        Title = _task.Title;
        // Запуск приложения
        StartCommand = new RelayCommand(()=>
                                            {
                                                if (File.Exists(ApplicationPath))
                                                    Process.Start(ApplicationPath);
                                            },
                                            ()=> File.Exists(ApplicationPath));
    }
    /// <summary>
    /// Применяется для получения экземпляра Task - понадобится при сохранении информации из интерфейса в файл
    /// </summary>
    /// <returns></returns>
    public Task GetTask()
    {
        return new Task
                   {
                    // Это поле нельзя изменять через интерфейс. Для этого я и оставил переменную  _task
                    ApplicationPath = _task.ApplicationPath,
                    Category = Category,
                    Description = Description,
                    Title = Title
                   };
    }
    /// <summary>
    /// Публичные поля
    /// </summary>
    public string ApplicationPath { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public string Category { get; set; }
    // Команды
    public ICommand StartCommand { get; set; }
    /// <summary>
    /// Получение иконки. Используется для показа иконки приложения.
    /// Как ни старался, так и не решил проблему с цветом. То есть у результирующей иконки палитра цветов отличается от оригинальной.
    /// </summary>
    private object _icon;
    public object Icon
    {
        get
        {
            if (_icon == null)
            {
                try
                {
                    var ico = System.Drawing.Icon.ExtractAssociatedIcon(ApplicationPath);
                    if (ico != null)
                    {
                        using (var strm = new MemoryStream())
                        {
                            ico.Save(strm);
                            var ibd = new IconBitmapDecoder(strm, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
                            var frame = ibd.Frames.FirstOrDefault();
                            _icon = frame;
                        }
                    }
                }
                catch
                {
                    _icon = null;
                }
            }
            return _icon;
        }
    }
}

Теперь самая главная наша ViewModel.

public class MainViewModel : ViewModelBase
{
    /// <summary>
    /// Список переходов
    /// </summary>
    readonly JumpList _jumpList;
    public MainViewModel()
    {
        // Инициализируем список и коллекцию 
        _jumpList = new JumpList();
        JumpList.SetJumpList(Application.Current, _jumpList);
        _tasks = new ObservableCollection<TaskViewModel>();
        // Загружаем из файла задачи
        Load();
        // Обновляем список переходов
        Apply();
        // Команда обновления списка переходов
        ApplyCommand = new RelayCommand(Apply);
    }
    /// <summary>
    /// Команды
    /// </summary>
    public ICommand ApplyCommand { get; set; }
    /// <summary>
    /// Коллекция задач
    /// </summary>
    private ObservableCollection<TaskViewModel> _tasks;
    public ObservableCollection<TaskViewModel> Tasks
    {
        get { return _tasks; }
        set
        {
            if (_tasks != value)
            {
                _tasks = value;
                RaisePropertyChanged("Tasks");
            }
        }
    }
    /// <summary>
    /// Функция, перезаписывает список переходов.
    /// </summary>
    public void Apply()
    {
        // очистка существующего списка
        _jumpList.JumpItems.Clear();
        // получаем JumpTask
        var jumpTasks =
            (from task in Tasks.Select(x=>x.GetTask())
             where File.Exists(task.ApplicationPath)
             orderby task.Title, task.Category
             select new JumpTask
                        {
                            Title = task.Title ?? string.Empty,
                            Description = task.Description ?? string.Empty,
                            ApplicationPath = task.ApplicationPath ?? string.Empty,
                            IconResourcePath = task.ApplicationPath ?? string.Empty,
                            WorkingDirectory = Path.GetDirectoryName(task.ApplicationPath),
                            CustomCategory = task.Category ?? string.Empty,
                        }).ToList();
        // Шаманим с сортировкой. Этот код вообще не обязателен, просто мне нужен был список в определенном порядке
        jumpTasks.Reverse();
        // добавляем все JumpTask в список jumpTasks
        jumpTasks.ForEach(_jumpList.JumpItems.Add);
        // применяем изменения
        _jumpList.Apply();
        // сохраняем список в файл
        Save();
    }
    // Сохранение списка в файл
    public void Save()
    {
        Settings.Instance.SetTasks(Tasks.Select(x=>x.GetTask()));
    }
    // Загрузка списка из файла
    public void Load()
    {
        try
        {
            var tasks = Settings.Instance.GetTasks();
            foreach (var task in tasks.OrderBy(x=>x.Category).ThenBy(x=>x.Title))
            {
                _tasks.Add(new TaskViewModel(task));
            }
        }
        catch
        {
            _tasks = new ObservableCollection<TaskViewModel>();
        }
    }
    // Добавление нового элемента в список. 
    public void Add(string fileName)
    {
        var task = new Task { ApplicationPath = fileName, Category = string.Empty, Title = Path.GetFileNameWithoutExtension(fileName) };
        _tasks.Add(new TaskViewModel(task));
    }
}

Осталось только прибиндить это всё к гриду. Вот как я это сделал:

<DataGrid  x:Name="dg"
    Grid.Row="2" ItemsSource="{Binding Tasks, Mode=TwoWay}" AutoGenerateColumns="False" CanUserReorderColumns="True" CanUserResizeColumns="True"
  CanUserResizeRows="False" CanUserSortColumns="True" CanUserAddRows="True" CanUserDeleteRows="True"  Margin="5"  >
    <DataGrid.Columns>
        <DataGridTemplateColumn>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image  Source="{Binding Icon, Mode=OneWay}" Stretch="Uniform" Width="16"></Image>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTextColumn Header="Category"  Binding="{Binding Category, Mode=TwoWay}" Width="Auto"></DataGridTextColumn>
        <DataGridTextColumn Header="Title"  Binding="{Binding Title, Mode=TwoWay}" Width="Auto"></DataGridTextColumn>
        <DataGridTextColumn Header="Description" Binding="{Binding Description, Mode=TwoWay}" Width="Auto"></DataGridTextColumn>
        <DataGridTemplateColumn Header="ApplicationPath" Width="*">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button  VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="2" CommandParameter="{Binding ApplicationPath}" Command="{Binding StartCommand}" >
                        <Button.Background>
                            <SolidColorBrush Color="Transparent"></SolidColorBrush>
                        </Button.Background>
                        <Button.Content>
                            <TextBlock  Text="{Binding ApplicationPath, Mode=OneWay}"></TextBlock>
                        </Button.Content>
                    </Button>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>                
    </DataGrid.Columns>
</DataGrid>

Благодаря двухсторонней привязке, у меня есть возможность редактировать мой список задач. Ещё я добавил панель инструментов с одной кнопкой - для сохранения и обновления списка переходов.

<ToolBar Grid.Row="1">    
    <Button Command="{Binding ApplyCommand}">
        <Image Source="Images/apply.png" Height="16"/>
    </Button>            
</ToolBar>

Итак, теперь я могу редактировать мои задачи прямо в интерфейсе. Но я ещё не могу добавить их туда. Я решил использовать событие Drop главного окна, чтобы легко добавлять новые записи в мой список задач.

private void WindowDrop(object sender, DragEventArgs e)
{
    if (e.Data is DataObject && ((DataObject)e.Data).ContainsFileDropList())
    {
        foreach (string filePath in ((DataObject)e.Data).GetFileDropList())
        {
            if (File.Exists(filePath))
                _model.Add(filePath);
        }
    }
}

В итоге, я получил приложение, которое позволяет синхронизировать мои списки переходов между всеми компьютерами. Также я предусмотрел, что если приложения, которое я указал на первом ПК, на втором ПК нет или путь к нему другой, - то ссылка на него на втором ПК не появится. Вот скрины моих результатов:

Теперь об ограничениях. Моя программа никак не работает с папками, она никак не работает с аргументами приложений, и вдобавок ей нужны именно *.exe файлы, ярлыки тоже никак не отработают. Меня все эти ограничения вполне устраивают, поэтому я ими не занимался. Я было хотел выложить код программы на кодеплекс, но, как оказалось (и что, собственно, очевидно), использовать списки переходов для быстрого запуска программ идея не новая. Просто той функциональности, что была нужна мне, я в других программах не нашел, да и пощупать возможности панели задач уже давно чесались руки. Поэтому я свои исходники публиковать не буду (к тому же, я почти весь код в статье написал), а просто приведу несколько программ, которые решают подобные задачи.

Ещё ссылки:

На этом всё. Всем спасибо. UPD. Думаю, следует пояснить. В классе TaskViewModel команда StartCommand запускает приложение. Это я сделал только для того, чтобы у меня была возможность запустить приложение из моей программы. К списку переходов эта команда не имеет никакого отношения. Вся работа со списком переходов в классе MainViewModel

/// <summary>
/// Функция, перезаписывает список переходов.
/// </summary>
public void Apply()
{
    // очистка существующего списка
    _jumpList.JumpItems.Clear();
    // получаем JumpTask
    var jumpTasks =
        (from task in Tasks.Select(x=>x.GetTask())
         where File.Exists(task.ApplicationPath)
         orderby task.Title, task.Category
         select new JumpTask
                    {
                        Title = task.Title ?? string.Empty,
                        Description = task.Description ?? string.Empty,
                        ApplicationPath = task.ApplicationPath ?? string.Empty,
                        IconResourcePath = task.ApplicationPath ?? string.Empty,
                        WorkingDirectory = Path.GetDirectoryName(task.ApplicationPath),
                        CustomCategory = task.Category ?? string.Empty,
                    }).ToList();
    // Шаманим с сортировкой. Этот код вообще не обязателен, просто мне нужен был список в определенном порядке
    jumpTasks.Reverse();
    // добавляем все JumpTask в список jumpTasks
    jumpTasks.ForEach(_jumpList.JumpItems.Add);
    // применяем изменения
    _jumpList.Apply();
    // сохраняем список в файл
    Save();
}

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

UPD2. В комментариях попросили выложить исходники. Вот они.