GridView
Компонент GridView представляет собой плоскую таблицу. Для GridView можно использовать собственные поля для отображения элементов данных, создав класс, производный от класса ArrayAdapter или BaseAdapter и т.п, и переопределив его метод getView().
В старых версиях студии находился в разделе Containers, сейчас находится в Legacy и считается устаревшим.
Число столбцов для GridView чаще задаётся статически. Число строк в элементе определяется динамически на основании числа элементов, которые предоставляет адаптер.
Свойства
Базовый пример
Если поместить GridView на форму, то увидим следующую картину.
Внесём небольшие правки
В коде реализуем наполнение таблицы через адаптер. Создадим новый файл DataAdapter.java:
Теперь напишем код для основного окна приложения. Как и у ListView, нам нужно использовать метод setAdapter(), а также методы setOnItemSelectedListener(), onItemSelected(), onNothingSelected().
GridView с картинками
Вместо текста можно использовать и картинки. Немного модифицируем проект. В шаблоне разметки изменим GridView:
Создадим новый адаптер ImageAdapter.java, в котором будет возможность подключать картинки
Теперь код в основной активности:
Зная номер позиции можно доработать программу, чтобы при щелчке на картинке, она открывалась на весь экран. Давайте так и сделаем. Создадим новый XML-файл разметки в папке res/layout под именем full_image.xml:
Создадим новую активность, в которой будет выводиться изображение на весь экран (файл FullImageActivity.java):
Класс получает от намерения номер позиции и выводит по этому номеру изображение из ресурсов.
Теперь в основной активности модифицируем код для щелчка
Осталось добавить в манифест новую активность:
У нас получилась галерея с просмотром отдельной картинки.
GridView с картинками и пояснительным текстом
Модифицируем предыдущий пример и создадим сетку, состоящую из картинок с сопроводительным текстом внизу.
Можно было оставить предыдущую разметку для активности, но я решил чуть её изменить, убрав лишние элементы
res/layout/cellgrid.xml
Создадим новый класс ImageTextAdapter. Он практически не отличается от класса ImageAdapter, поменялся только метод getView(), разницу в коде я закоментировал для сравнения
Осталось вызвать нужный адаптер в активности:
Убрать вертикальную прокрутку
Прочитал заметку про убирание вертикальной прокрутки, которая возникает при движении пальцем вверх. Может пригодится кому-то:
Галерея
Рассмотрим вариант создания галереи на основе GridView.
Создаём новый проект. Также нужно подготовить фотографии для галереи, которые следует поместить в папку res/drawable-hdpi.
Поместим на главном экране приложения GridView:
Создадим новый класс ImageAdapter.java, наследующий от BaseAdapter, для размещения изображений в сетке GridView через собственный адаптер.
Открываем основной класс приложения и связываем через созданный адаптер изображения с GridView:
Запустим проект и проверим, что всё отображается нормально.
Не обращайте внимания, что картинки на скриншоте повторяются, просто было лень готовить пятнадцать разных фотографий.
На этом урок можно было закончить, но давайте доработаем приложение, чтобы выбранная картинка отображалась в полном размере на весь экран. Для этого нужно передать идентификатор выбранного изображения новой активности.
Создадим в папке layout файл разметки full_image.xml для этой цели.
Создадим новый класс FullImageActivity.java для активности, которая будет отображать картинку на весь экран. Активность через намерение будет получать идентификатор картинки и выводить её на экран.
Не забываем прописать новый класс в манифесте проекта.
Возвращаемся к главной активности и добавляем обработчик щелчков на сетке:
Загружаем картинки из внешнего накопителя
Попробуем загрузить картинки с внешнего накопителя в GridView. Пример писался под Android 2.3, возможно сейчас уже не заработает.
Разметка основного экрана состоит из одного компонента GridView:
Для данного компонента нужен адаптер. Создадим новый класс ImageAdapter.
ImageAdapter.java
Код для главной активности:
В этом примере при щелчке выводится всплывающее сообщение. Вы можете запустить новую активность с показом выбранной картинки.
Обзор GridView
Что такое GridView
С точки зрения функциональности – это такая же таблица, как и DataGrid, каждая запись которой соответствует записи в источнике данных. Каждый столбец может быть ассоциирован с полем в источнике данных. Помимо этого, GridView (как и DataGrid) имеет шапку (Header), нижний колонтитул (Footer) и информацию о разбивке на страницы (Pager).
GridView обявлен как:
CompositeDataBoundControl – это базовый класс, который обеспечивает связывание с данными (данный класс в свою очередь наследует DataBoundControl который является базовым для всех data-bound контролов в ASP.NET 2.0.
IPostBackContainer и IPostBackEventHandler необходимы для обработки всех PostBack’ов контрола, а реализация интерфейсов ICallbackContainer и ICallbackEventHandler позволяет задействовать новый механизм клиентских асинхронных вызовов.
GridView имеет множество свойств и событий, которые определяют его поведение. Прежде всего, это соединение с источником данных и получение данных, вывод данных, обновление данных, а также сортировка и разбивка на страницы.
Объектная модель источников данных
Эта модель представляет собой схему, когда между самим источником данных и слоем вывода данных (в нашем случае это GridView) находится еще один слой, который является посредником между источником и контролом визуализации данных и который предоставляет общий интерфейс как для первого (источника данных), так и для вторых (контролов визуализации, будь то наш GridView или допустим FormView). Для примера рассмотрим один из основных контролов визуализации – SqlDataSource. Как видно из названия, данный контрол предназначен для работы с SQL. Прежде всего, мы должны поместить этот контрол на форму (в любое место формы между тегами ):
Этот контрол имеет 4 основных свойства, по названиям которых можно догадаться об их предназначении – SelectCommand, InsertCommand, UpdateCommand и DeleteCommand. На том, как передавать в эти sql-команды параметры, я останавливаться не буду – это достойно отдельной статьи; для нас сейчас важно то, что эти свойства описывают sql-команды для каждого из 4-х действий над данными.
Выборка, добавление, обновление и удаление данных.
Прежде всего, нам необходимо связать наш GridView с контролом-источником. Для этого у GridView есть свойство DataSourceID, значение которого должно соответствовать ID контрола-источника. Хочу обратить внимание на то, что GridView имеет также свойство DataSource, которое служит для связывания данных «по старинке» — в коде с присваиванием объекта типа IList. Использование обоих свойств одновременно приведет к ошибке – необходимо использовать либо DataSource, либо DataSourceID.
Итак, мы связали DataSource с контролом-источником данных. Если свойство SelectCommand (для объекта ObjectDataSource это SelectMethod) установлено – с GridView будут связаны данные, полученные в результате выполнения этой команды (или метода в случае с ObjectDataSource).
Если мы сейчас откроем нашу страницу – мы увидим что-то вроде:
Далее займемся удалением строк (и записей из источника данных). Как мы видим, DeleteCommand принимает параметр типа int, который называется id и соответствует id записи в таблице. Мы знаем, что id является уникальным полем и поэтому с чистой совестью делаем это поле ключевым для нашего GridView:
Далее нам необходимо добавить кнопку для каждой строки, которая будет удалять строку из GridView и из источника данных. Проще всего это сделать, добавив новый столбец типа CommandField:
Пробуем нашу страницу в действии:
Отлично. Теперь более сложное действие – редактирование. Для редактирования необходимо перевести необходимую нам строку в состояние редактирования. Для этого в нашем (или в новом, это кто как хочет) столбце CommandField добавляем ShowEditButton=»true»
Посмотрим, что у нас получается:
Как мы видим, строка переводится в режим редактирования и для каждого BoundField вместо обычного текста появляется текстовое поле. Но если мы посмотрим на наш UpdateCommand, то увидим, что помимо Name и Price мы должны еще передать id_cat (ID категории, к которой принадлежит товар). Проще всего это можно сделать добавив еще один BoundField, который будет связывать данный столбец с полем id_cat из таблицы, а в состоянии редактирования будет отображать TextBox. Но менять категорию, указывая ее id, соответствующее id в таблице – не лучший вариант, гораздо лучше было бы отразить в DropDownList. Прежде всего мы добавим новый столбец типа TemplateField, и для этого столбца определим ItemTemplate и EditItemTemplate как показано ниже:
Теперь при переходе строки в состояние редактирования вместо TextBox будет показан DropDownList. Далее нам необходимо связать этот DropDownList со списком из таблицы Categories. Хочу сообщить, что в ASP.NET 2.0 множество контролов получило возможность работать с объектной моделью источников данных, в том числе и DropDownList. Поэтому добавляем еще один SqlDataSource на форму, устанавливаем ему SelectCommand-=”SELECT * FROM Categories”, далее устанавливаем свойство нашего DropDownList DataSourceID=”SqlDataSource2”.
Редактирование работает, но в состоянии отображения строки нам необходимо вывести название категории. Для этого нам нужно по значению id_cat получить название. Хоть и эту задачу при желании можно решить декларативно, напишем пару строчек кода J
Прежде всего обработаем событие RowDataBound – аналог события ItemDataBound в DataGrid.
GridViewRow имеет свойства RowState и RowType, которые имеют типы перечислений DataControlRowState и DataControlRowType соответственно. Как нетрудно догадаться – первое из них хранит текущее состояние строки (например, строка в состоянии редактирования), а второе – тип строки (например, что данная строка является заголовком). Для того, чтобы выбрать все «нормальные» строки и только в режиме отображения, можно использовать следующую проверку:
В GridView все нечетные строки считаются «нормальными», а все нечетные – альтернативными, поэтому RowState проверяется на 2 значения. Используя помимо декларативного программирования «обычное» программирование в коде страницы можно реализовать в GridView довольно сложную логику.
Также хочу заметить, что в случае использования «обычного» программирования для случаев обновления или удаления данных необходимо использовать
Вставка новых строк.
GridView не имеет стандартных средств для вставки новых записей. Для этого удобно использовать FormView и DetailView. Если же очень хочется реализовать вставку в GridView – можно создать форму в PagerTemplate.
Обратите внимание, что контрол SqlDataSource имеет свойство InsertCommand.
GridView и Visual Studio.NET 2005.
Все операции, которые мы проделали со страницей с GridView, можно проделывать и в режиме дизайнера Visual Studio.NET 2005. Скажу, что в Visual Studio.NET 2005 появилась новая возможность, называемая smart tags, которая представляет собой всплывающие окошка с настройками того или иного компонента. Главные особенности этой возможности – удобство в использовании и легкость создания smart tags для своих собственных компонентов. О том, как создавать smart tags, вы можете прочитать в статье в журнале MSDN Magazine за июль 2005 г. Статья называется: “Smart tags. Simplify UI Development With Custom Designer Actions In Visual Studio”, автор статьи: Michael Weinhardt. Итак, перведем нашу страницу в режим Design и и на GridView нажмем в правом верхнем углу на треугольную стрелку. Справа от контрола появится всплывающее окно:
Как мы видим, используя Visual Studio.NET 2005 мы можем еще больше облегчить себе жизнь – создание/редактирование столбов, настройка сортировки, разбивки на страницы, а также подключение к тем или иным DataSource, в общем, многое из того, что мы делали выше, мы можем сделать через эту возможность. Кроме всего прочего, сюда входит такжеюможем сделать через подобныныйделали выше, мы можем сделать через подобный конфигурационный раздел.м или иным
ованным парамет возможность сконфигурировать сам DataSource. Раздел Columns также позволяет в еще одном дополнительном окошке сконфигурировать столбцы как нам необходимо – для каждого типа столбцов справа имеется полный перечень его свойств, а ссылка “Convert this field into a Template Column” позволяет перевести тот или иной столбец в аналогичный по функциональности, но типа TemplateField. Далее в TemplateField мы можем задать новые «значения» для разных режимов столбца, например установить DropDownList вместо TextBox для режима редактирования, как нам это требовалось выше.
Помимо новой концепции связи с источником данных, GridView по сравнению с DataGrid имеет несколько не столь существенных, но все же приятных нововведений.
EmptyDataTemplate
В DataGrid eсли источник не имеет ни одной записи – то чтобы вывести сообщение вроде «Нет записей» приходилось делать такой финт – добавлять любой контрол, который выводит текст (например, Label) и при биндинге проверять количество записей в источнике и если это количество было 0 – то прятать DataGrid, а в Label выводить надпись. Причем нужно было также не забыть «обнулять» эту строку каждый раз при биндинге, т.к. в противном случае надпись бы оставалась, даже если данные уже появились. В GridView введен новый шаблон EmptyDataTemplate:
Эта надпись будет выведена только в случае, если источник не имеет ни одной записи, иначе этот блок игнорируется.
«Парные» события.
В ASP.NET 2.0 практически все контролы (и GridView в их числе) имеют по два события для каждого «физического» события. Одно из них возникает до начала выполнения операции, второе – после. Например, RowDeleting и RowDeleted – в RowDeleting мы можем узнать что будет удаляться.
Применение обратных вызовов страницы из javascript сценариев.
Свойство EnablePagingAndSortingCallbacks (по умолчанию false) позволяет применять технологию обратных вызовов страницы (это также нововведение в ASP.NET 2.0) для перехода между страницами и сортировки данных. Напомню, что данная технология позволяет не перегружать всю страницу, а как бы перегрузить только сам контрол.
Адаптация GridView для мобильных устройств.
ASP.NET 2.0 позволяет программисту адаптировать GridView для генерации HTML, более «дружественного» для мобильных устройств. Наиболее яркое отличие мобильных устройств от ПК – это меньший экран. Для вывода только одной записи и механизма навигации между ними существует группа элементов SummaryTitle, DetailLink, DetailTitle и свойство SummaryViewColumn.
Разбивка на страницы.
Прежде всего хочу сказать, что SqlDataSource позволяет оптимизировать запрос к БД и выбирать только данные, необходимые для текущей страницы GridView (допустим, если в GridView стоит PageSize=20, то SqlDataSource выберет только 20 записей из тех нескольких тысяч, что есть в таблице). И хотя это больше заслуга SqlDataSource, чем GridView – результат этого сказывается на GridView J Также класс PagerSettings (класс для работы с paging) имеет новые предопределенные кнопки – первая и последняя страницы. Кроме всего прочего, вместо текста можно использовать картинки.
Новые типы столбцов.
Для GridView введены некоторые новые типы столбцов: CheckBoxField и ImageField, по названиям которых несложно догадаться что они из себя представляют J
Локализация GridView.
GridView, и с чем его едят (часть вторая, большая)
В прошлой вводной части я немного познакомил тех, кто не был знаком, с элементом GridView, предназначенным для отображения табличной информации на форме. Я рассказал о том, что GridView (для своего удобства я буду называть этот элемент далее везде как гридвью) можно связать с источником данных. Источников может быть несколько типов. В моих примерах везде будет в качестве источника использоваться ObjectDataSource.
Итак, как я уже сказал, используем ObjectDataSource. Эта часть будет посвящена именно ему. Ниже мы определим методы, возвращающие данные, добавим штришки, которые в будущем помогут нам при разработке из визуальной среды, а также повторю все действия, но на этот раз уже через codebehind страницы.
Условимся, что для разработки у нас используется VS 2008. Открываем студию, создаем новый проект типа ASP.NET WebSite, язык разработки – C#. Открываем страницу Default.aspx в режиме Split или Design. Бросаем на форму гридвью. Кликаем на стрелочку в правом верхнем углу гридвью, выбираем датасурс – new data source. Тип источника укажем Object. Переходим дальше и видм форму, где нас просят выбрать бизнес объект. 
Так как никаких объектов пока у нас нет, то выбрать мы ничего не сможем. Поэтому приступим к созданию нашего бизнес объекта.
Чтобы в будущем ускорить разработку объектов, создадим абстрактный класс. Этот класс будет содержать как минимум два публичных метода, общих для всех предков нашего класса. Первый – назовём его Select – будет возвращать нам массив объектов, второй – назовем его SelectCount – будет возвращать количество всех элементов, удовлетворяющих запросу. Не забудем пропейджинг, поэтому в качестве обязательных параметров для метода Select укажем два входных параметра: int maximumRows, int startRowIndex. Данные имена по умолчанию используются ObjectDataSource для передачи в метод количество строк для выборки и индекс, с которого начинать выбор. Для метода SelectCount пока никаких параметров не указываем.
[System.ComponentModel.DataObject]
public abstract class BusinessObject
<
protected T[] _objs;
private int maximumRows, startRowIndex;
List arr = new List ();
int to = startRowIndex + maximumRows;
if (to > _objs.Length)
to = _objs.Length;
for ( int i = startRowIndex; i return arr.ToArray();
>
Рассотрим класс поподробнее. Что такое после имени класса я объяснять не буду. Незнающие могут погуглить по поводу генериков. Внутри класса объявлена переменная-массив _objs типа Т. По-умолчанию получается, что внутри каждого класса наследника у нас будет переменная, содержащая тип, который мы укажем (посмотрим дальше). Пока не буду объяснять к чему нам атрибуты у заголовка класса и метода Select, скажу лишь, что они на код никак не влияют, и вполне можно обойтись без них.
Метод Select сделаем виртуальным, чтобы иметь возможность переопределить его в классах-наследниках. Метод SelectCount возвращает все количество элементов для метода Select. У себя в проекте я условился, что для каждого селекта, возвращающего массив обектов, существует свой метод, возвращающий количество записей. Название этого метода всегда состоит из имени метода селекта плюс суффикс Count. Т.е. если у нас есть метод SelectById, то для него должен быть метод SelectByIdCount. Внимательные могли бы возразить мне, что для метода SelectById не нужно возвращать количество элементов, ибо этот метод будет всегда возвращать всего один элемент. Поэтому в данном случае мы можем не определять метод SelectByIdCount.
Идём дальше, создадим наш бизнес класс на основе абстрактного класса BusinesObject.
[System.ComponentModel.DataObject]
public class SimpleBusinesObject:BusinessObject
<
private int cnt = 0;
public SimpleBusinesObject()
<
List
[System.ComponentModel.DataObjectMethodAttribute
(System.ComponentModel.DataObjectMethodType.Select, false )]
public Person[] SelectByName( int maximumRows, int startRowIndex, String name)
<
List
();
for ( int i = 0; i if (_objs[i].Name.IndexOf(name))
p.Add(_objs[i]);
>
cnt = p.Count;
return p.GetRange(startRowIndex, maximumRows).ToArray();
>
public int SelectByNameCount( String name)
<
return cnt;
>
>
public class Person
<
private String _name;
private String _phone;
private String _address;
public Person()
<
_name = «No Name» ;
_phone = «555-5555» ;
_address = «без определенного места жительства» ;
>
Теперь можно заняться нашей страничкой default.aspx
.
Как видно на скриншоте, мы можем выбрать наш созданный бизнес объект SimpleBusinessObject. Справа от списка с выбором бизнес объектов стоит галочка Show only data components. Что это такое, зачем оно нужно. Я сейчас объясню. Вспомним, какой атрибут мы указывали у нашего класса: [System.ComponentModel.DataObject]. Этим атрибутом мы помечаем классы, которые у нас используются для доступа к данным. Представьте. Если бы в нашем проекте было определено сотня и больше различных классов, было бы сложновато найти нужный нам объект. А использование этого атрибута вместе с установленной галочкой отфильтровывают только те классы. Которые нам нужны. На следующей форме, после выбора нашего бизнес объекта, нас просят выбрать метод, который будет использоваться для селекта. Здесь снова нам поможет атрибут [System.ComponentModel.DataObjectMethodAttribute (System.ComponentModel.DataObjectMethodType.Select, true)]
Которым мы помечаем наши методы. Возвращающие данные. В конце можно заметить, что у нас стоит true, это говорит о том, что данный метод будет сразу выбран в списке методов. Поэтому имеет смысл выставить для одно из методов true, если он будет использоваться чаще других. Так, для метода Select стоит true, а для метода SelectByName стоит false. Итак выбираем первый метод в списке, идем дальше, видим, что у нас есть список параметров. Здесь пока ничего менять не будем, жмем пимпу, готово. Теперь посмотрим на наш сгенерированный html код:
asp:GridView ID =»GridView1″
runat =»server»
AllowPaging =»True»
PageSize =»10″
AutoGenerateColumns =»False»
DataSourceID =»ObjectDataSource1″ >
Columns >
asp:BoundField DataField =»Name» HeaderText =»Name» SortExpression =»Name»/>
asp:BoundField DataField =»Phone» HeaderText =»Phone» SortExpression =»Phone»/>
asp:BoundField DataField =»Address» HeaderText =»Address»
SortExpression =»Address»/>
Columns >
asp:GridView >
Я уже подправил здесь всё, что нужно, организовал пейджинг. Замечу, что если мы хотим пейджинг, который создан нами вручную (выбор идет именно того, что нужно и сколько нужно, без фильтрации необходимых элементов средствами asp.net), то к чёрту выкидываем все параметры из ObjectDataSource (если точнее, то не все, а только два, maximumRows и startRowIndex)! Это очень важное замечание. Ибо тут и бывает куча всяких проблем, вынос мозга и т.п. Еще раз отмечу:
Теперь отобразим только список тех персон, корые имеют определеннуюподстроку в имени
Лишнее я уже все убрал, добавил необходимое. Запускаем, ура! Работает. Но заметим, что последнюю страничку мы открыть не можем, ибо «Offset and length were out of bounds for the array or count is greater than the number of elements from index to the end of the source collection.» Желающие могут исправить сие недоразумение и убедиться, что в конце списка у нас не будет персоны с именем Misha. А теперь можно сходить покурить (если Вы курите, либо попить кофейку), Представить себя мега крутым программистом на asp.net и забить на все
Итак, мы рассмотрели простой пейджинг, отфильтровали все, что нам нужно. Сейчас лишь могу сделать несколько замечаний. Если вы используете ORM, то, вполне возможно, что Вам придется в методе Select переделать sql запрос таким образом, чтобы БД отдавала необходимую порцию данных. Также для метода SelectCount Вам снова придется переделать sql запрос, чтобы он не возвращал ничего, кроме количества элементов, удовлетворяющих запросу. Таким образом Вы значительно уменьшите объем передаваемых данных между сервером БД и веб сервером.
За сим откланяюсь, а в будущем, возможно, разберем сортировку, вставку новых элементов, удаление и обновление. Но это уже будет намного проще, ибо азы работы с GridView & ObjectDataSource мы уже имеем.
