/// List of persons with updating
Class Zui.Tutorial.DisplayPersonal Extends %ZEN.Component.page
{

/// Имя приложения, которому принадлежит эта страница.
Parameter APPLICATION;

/// Отображаемое имя для нового приложения.
Parameter PAGENAME = "Information about persons";

/// Домен, используемый для локализации.
Parameter DOMAIN;

/// Этот блок Style содержит определение CSS стиля страницы.
XData Style
{
<style type="text/css">
</style>
}

/// Этот XML блок описывает содержимое этой страницы.
XData Contents [ XMLNamespace = " http://www.intersystems.com/zen"  ]
{
<page xmlns=" http://www.intersystems.com/zen"  title="List of Persons">

<tablePane id="table" tableName="Tutorial.Personal" width="95%" align="center" onselectrow="zenPage.rowSelected(zenThis)" valueColumn="ID">
<column header="Фамилия" colName="Surname" filterType="text"/>
<column header="Имя" colName="Name"/>
<column header="Дата рождения" colName="DOB" filterType="date" filterOp="BETWEEN"/>
<column header="Пол" colName="Sex" width="9%" filterType="enum" filterEnum="Мужской,Женский" filterOp="="/>
<column header="Любимый цвет" colName="FavoriteColor"/>
<column header="Образование" colName="Education" width="15%" filterType="enum" filterEnum="нет,среднее,специальное,незаконченное,высшее" filterOp="="/>
<column header="Загран.паспорт" colName="FPassport" colExpression="CASE WHEN FPassport=1 THEN 'Имеется' ELSE 'Нет' END"/>
<column header="Доп.информация" colName="AddInformation"/>
</tablePane>

<pane paneName="editPane" width="70%"/>
<dataController id="controller" modelClass="Tutorial.Personal" />

<form id="MyForm" align="center" labelPosition="top" controllerId="controller">

<hgroup>
<text label="Фамилия:" id="Surname" name="Surname" size="35" required="true" dataBinding="Surname"/>
<spacer width="20"/>
<text label="Имя:" id="Name" name="Name" size="20" dataBinding="Name"/> 
<spacer width="20"/>
<dateText label="Дата рождения:" id="DOB" name="DOB" dataBinding="DOB"/>
</hgroup>
<spacer height="10"/>
<hgroup labelPosition="left">
<radioSet label="Пол:" id="Sex" name="Sex" displayList="Мужской,Женский" valueList="Мужской,Женский" dataBinding="Sex"/>
<spacer width="40"/>
<checkbox id="FPassport" name="FPassport" label="Наличие загран.паспорта:" value="да,нет" dataBinding="FPassport"/>
</hgroup>
<spacer height="10"/>
<hgroup>
<combobox label="Образование:" id="Education" name="Education" displayList="нет,среднее,специальное,незаконченное,высшее" valueList="нет,среднее,специальное,незаконченное высшее,высшее" dataBinding="Education"/>
<spacer width="40"/>
<colorPicker label="Любимый цвет:" id="FavoriteColor" name="FavoriteColor" colorList="white,red,green,blue,black,yellow,orange,purple" dataBinding="FavoriteColor"/>
<spacer height="10"/>
</hgroup>
<textarea label="Доп.информация" id="AddInformation" name="AddInformation" cols="50" rows="5" dataBinding="AddInformation"/>

<hgroup id="btnGroup" cellAlign="left">
<button id="btnNew" caption="Очистить" onclick="zenPage.newItem();"/>
<spacer width="10"/>
<button id="btnSave" caption="Сохранить" onclick="zenPage.saveItem();"/>
<spacer width="10"/>
<button id="btnDelete" caption="Удалить" onclick="zenPage.deleteItem();"/>
<spacer width="10"/>
</hgroup>

</form>

</page>
}

XData editPane [ XMLNamespace = " http://www.intersystems.com/zen"  ]
{
<pane xmlns=" http://www.intersystems.com/zen"  title="List of Persons">
</pane>
}

ClientMethod newItem() [ Language = javascript ]
{
var controller = zenPage.getComponentById('controller');
controller.createNewObject();
}

ClientMethod saveItem() [ Language = javascript ]
{

var controller = zenPage.getComponentById('controller');
controller.save();

var table = zenPage.getComponentById('table');
table.executeQuery();
}

ClientMethod deleteItem() [ Language = javascript ]
{
var controller = zenPage.getComponentById('controller');
var id = controller.getModelId();

if ('' == id) {
alert('Для начала выберите запись');
}
else if (confirm('Вы действительно хотите удалить эту запись?')) {

controller.deleteId(id);
var table = zenPage.getComponentById('table');
table.executeQuery();
}
}

/// Обновление данных на форме при выборе строки таблицы
ClientMethod rowSelected(table) [ Language = javascript ]
{
var id = table.getValue();
zenPage.showObject(id);
}

/// Обновление данных на форме по идентификатору объекта модели данных
ClientMethod showObject(id) [ Language = javascript ]
{
var controller = zenPage.getComponentById('controller');
controller.setModelId(id);
}

}