Примерна предварително дефинирана таблица.
В тази лабораторна работа ще видим прост пример, показващ как да използваме компонента DataTable, този елемент ни позволява да свържем таблица с данни към нашата страница по следния начин:
За този първи пример само предварително попълненият компонент ще бъде свързан от нашия клас bean, по-късно той ще покаже как да манипулира динамично неговата информация.
Първоначално нека създадем JSF проект със следната структура:
Както виждаме, създадени са 2 Java класа, единият съответства на класа person, който ни позволява да обработваме хората, които ще покажем в нашата таблица, а другият на bean, който ще ни позволи да управляваме нашата таблица със съответните колони и записи.
Класът Person.java ни предоставя основните данни за човека, които ще покажем в таблицата, тук добавяме съответните методи set и get, както и конструктор с параметри за директно попълване на хора.
Класът TablaBean.java се отнася до таблицата и управлението на хората в нея, записите, които се показват, се съхраняват в типа човек ArrayList, който за целите на това ръководство се попълва в конструктора.
В index.xhtml ние създаваме компонента DataTable, към който свързваме списъка с хора директно в стойността и в съответните колони атрибутите на bean-а, който е посочен във var="data", като data е елементът, който представлява данните на обектът Person във всеки ред от таблицата.
Когато го стартираме, ще имаме нещо подобно
Както виждаме, информацията се представя в табличен режим, тъй като все още не сме свързали CSS стиловете, оценяваме само структурата в редове и колони без какъвто и да е дизайн, но можем да добавим свойство „граница“ към таблицата и марж с нещо подобно:
Най-накрая знаем, че можем да се възползваме
Пример за управление на данни в DataTable.
В този раздел ще продължим с предишния пример, където ще видим как да манипулираме таблични данни, за да извършваме общи процеси като регистриране, модифициране или изтриване на информация.
Добави хора.
За да регистрираме хора, ние ще променим нашата страница index.xhtml, към която ще свържем формуляра за регистрация на лица. Ние правим това, като свързваме компонентите за въвеждане и избор в мрежов панел, надлежно свързан с обекта „myPerson", към който се изпращат различните данни. В нашата система се регистрира нов човек.
Както виждаме, тези нови елементи се добавят преди DataTable да получи резултат като този:
След като модифицираме индекса, нека направим необходимите промени в класа TableBean.java, защото в този пример ще продължим да използваме нивото на обхват по подразбиране, така че нека направим списъка с хора статичен, така че да може да се манипулира без проблеми, ние допълнително елиминирайте подпълването на списъка, тъй като идеята е да можете да регистрирате хора чрез регистрационен формуляр.
Както можем да видим, когато дефинираме списъка като статичен, ние създаваме неговия екземпляр на ниво клас, ние не правим това в конструктора, тъй като това ще бъде извиквано в различни случаи от нашия jsf, което би причинило нов екземпляр на списъка, който би причинил да загубим информацията, която може да съдържа.
Освен това добавихме обект от тип Person, за да можем да управляваме регистрационните данни и добавихме метода „aggregarPersona()“, който позволява добавяне на нов елемент към списъка и се извиква от бутона jsf, по-късно генерираме нов екземпляр на обектът „minhaPersona“, който ще позволи почистването на регистрационния формуляр.
Когато стартираме системата, ще видим следното поведение:
Първоначално формулярът е празен и заглавката на нашата таблица също се показва, но без съдържание (не забравяйте, че премахнахме попълването в списъка), така че заглавката да не се показва, когато все още няма регистрирани хора, така че използваме „ rendered”, където потвърждаваме, че дължината на списъка е по-голяма от нула, в противен случай не трябва да показва заглавките. (Работата на това свойство ще бъде разгледана подробно по-късно)
Докато добавяме хора, те се съхраняват в списъка и се представят в DataTable
Изключване на хора.
След като успешно сме регистрирали хора в нашия списък, можем да ги премахнем от него, за това ще добавим нова колона с действия в нашата dataTable, която ще съдържа връзка към метода „eliminarPerson()“, който ще създадем в нашия bean
За целта променяме index.xhtml, където след колоната „Секс“ ще добавим колоната „Действия“
Както виждаме, използваме компонент
По-късно в класа TablaBean.java добавяме метода „eliminarPersona()“, който получава като параметър обекта person, който искаме да изтрием, това съответства на „данните“, които изпращаме от jsf, и е еквивалентно на лицето в реда, което искаме да изтрием, така че след това го премахнете от списъка.
При стартиране на системата ще имаме следното:
И всеки път, когато изтрием запис чрез съответната връзка, таблицата ще се актуализира
Редактиране на хора.
След като успешно сме регистрирали и изтрили хора от нашия списък, можем да ги модифицираме, за това ще модифицираме нашата таблица, правейки я редактируема, когато искаме да актуализираме някои от данните, за това ще използваме отново свойството „rendered“, което ще покаже или скриване на редактируемите опции в зависимост от това, което потребителят реши.
Както виждаме във всяка от колоните е добавен компонент
В нашия случай „data.edit“ извиква булева променлива (edit), която добавихме в класа Person, ако свойството е true, тогава ще покаже
Същото трябва да се направи съответно за графите професия, заплата и пол, където вместо да се добави a
По същия начин изобразеното свойство е задължително да показва комбото или етикета според случая.
Впоследствие колоната „Действия“ е променена, където преди имахме само връзка към „Изтриване“, сега ще добавим още 2 връзки, едната за „редактиране“, а другата за „запазване“ на информацията, след като я редактирате.
Както виждаме, сега има 3 връзки съответно за методите за редактиране, запазване и изтриване, но редактирането и запазването имат изобразено свойство, което прави само 2 от 3-те връзки видими наведнъж (не забравяйте, че изобразената съдържа true или false в зависимост от условието), така че по подразбиране връзката за изтриване винаги ще се показва, тъй като няма изобразеното свойство, докато редактиране и запазване никога няма да се виждат заедно. (позволява ви да добавите интервал между връзките)
Вътрешно на графично ниво dataTable ще изглежда така:
Въпреки че графично можете да видите всички компоненти заедно, важно е да стане ясно, че изобразеното свойство ще показва компонентите само в зависимост от стойността true или false в момента.
След като модифицирахте index.xhtml, сега е време да модифицирате класа Person.java, в който се добавя свойството „редактиране“, използвано от рендирането, споменато по-горе.
Както виждаме, нов булев атрибут е свързан със съответния му set и get. Освен това, за да пасне на структурата на упражнението, добавихме свойството към параметризирания конструктор, въпреки че вече не се използва на този етап от упражнението.
По този начин всеки път, когато rendered=”#{data.edit}” се прави в index.xhtml, ще се извиква тази променлива, което ще позволи показване или скриване на компоненти в зависимост от случая.
Накрая, и вече с предишните промени, пристъпваме към модифициране на класа Bean, където трябва да добавим съответните методи за изтриване и запазване, които се извикват от полето „Действия“.
Както можем да видим, методът editPersona() получава обект person (от jsf извикването, точно както се прави в метода delete) и неговото свойство „edit“ се променя чрез изпращане на стойността true, което ще позволи този запис за да скриете
От друга страна, методът savePersona() ще бъде отговорен за промяната на всяко свойство „редактиране“ на всички обекти в списъка на false, така че dataTable да се възстанови със стойностите на хората, а не с редактируемите елементи.
При стартиране на системата ще имаме следното:
И при натискане на редактиране системата се променя на:
Както може да се види, когато се щракне върху връзката за редактиране, компонентите, които могат да се редактират, се показват автоматично, докато тези, които не могат да се редактират, са скрити, по същия начин връзката за редактиране изчезва, за да направи място за връзката за запазване, както е обяснено по-горе.
И готово!!!
В моя блог и в моя канал споделям материали за този страхотен език за програмиране, можете да намерите много статии и видеоклипове от нулатаПоказвам ви как да изтеглите необходимите инструменти, за да започнете да програмирате, преминаваме все повече и повече през основните концепции, преминавайки през концепции за обектно-ориентирано програмиранестандарти, темиструктури от данни, достъп до бази данни, между другото, до конструкцията приложения с потребителски интерфейс.
Също така можете да намерите a курс от нулата, където преподавам как да създавам мобилни приложения на android чрез видео поредица стъпка по стъпка, която непрекъснато се актуализира.
А сега също ще започна последователността от нулата, където ще навлезем в света на изданието на Java Enterprise, ще ви покажем как да настроите средата за разработка и как да създадете първите си уеб приложения с Java.
Ето защо ви каня да посетите codejavu.blogspot.com, да посетите моят канал Cristian Henao и че са много наясно с новите продължения
Може също да ви заинтересува.
Има ли нещо, което искате да добавите или коментирате за този запис? чувствайте се свободни да правите....и ако ви е харесало, каня ви да го споделите г Абонирайте се, като щракнете върху бутона „Присъединете се към този сайт“, за да чуете повече публикации като тази 😉