Итак. Удалось добиться функционирования HTML интерфейса в SAP с использованием библиотеки jquery_ui. Что же дает нам эта библиотека? Прежде всего конечно обилие элементов управления, вот как это выглядит:
Согласитесь - существенная разница с тем, что было показано в первой части. Внешний вид - это конечно хорошо, но как с реализацией всей этой красоты? Спешу обрадовать - количество написанного кода (как в SAP, так и в HTML) существенно сократилось. Например: при реализации вкладок без использования библиотеки приходилось обрабатывать события нажатия на них в SAP, а затем перерисовывать полностью всю страницу. То-есть очень много ручного формирования тегов включая их оформление
Код
DEFINE add_html_creat. "Макрос для формирования таблицы HTML кода для подстановки
APPEND &1 TO gt_html_creat-html.
END-OF-DEFINITION.
CLEAR gt_html_creat.
gt_html_creat-NAME = '<!INFO_PAGE!>'.
form ....
.....
add_html_creat:
'<tr>',
'<td class="menu1_1" onclick="location.href=''SAPEVENT:SubMenu?item=01''" height=60px>Выполнение должностных обязанностей</td>',
'</tr>',
'<tr>',
'<td class="menu1_s" height=47px>Выполнение индивидуальных задач</td> ',
'</tr>',
'<tr>',
'<td class="menu1_1" onclick="location.href=''SAPEVENT:SubMenu?item=03''" height=80px>Достижение ключевых показателей деятельности подразделения</td> ',
'</tr>',
'<tr>',
'<td class="menu1_1" onclick="location.href=''SAPEVENT:SubMenu?item=04''" height=80px>Оценка руководителем корпоративных компетенций </td> ',
'</tr>',
'<tr>',
'<td class="menu1_1" onclick="location.href=''SAPEVENT:SubMenu?item=05''" height=92px>Оценка руководством </td>',
'</tr>',
'<tr>',
'<td class="menu1_1" onclick="location.href=''SAPEVENT:SubMenu?item=06''" height=60px>Выводы по результатам корпоративной аттестации</td>',
'</tr></table>',
*-----------------------------------------------------------------------------------------
'<form id="frm" action="sapevent:M_ocenka" method="GET" width=640px BORDER=0 CELLPADDING=0 CELLSPACING=0 style=" margin: 0; ">',
'<table width=640px BORDER=0 CELLPADDING=0 CELLSPACING=0 style="table-layout:fixed;position: relative;top:23px ;left:150px;">',
'<tr>',
'<td class="row_data" style="width: 20px;">№ п/п</td>',
'<td class="row_data" style="width: 235px;">Наименование задачи</td>',
'<td class="row_data" style="width: 55px;">Единица измерения</td>',
'<td class="row_data" style="width: 100px;">Целевое значение</td>',
'<td class="row_data" style="width: 100px;">Показатель (факт)</td>',
'</tr>'.
do 6 times.
add_html_creat:
'<tr>',
'<td class="row_data" style="width: 20px;">',
sy-index,
'</td>',
'<td class="row_data" style="width: 235px;"><textarea name="i_text_1" maxlength=1024 style="width: 230px;"></textarea></td>',
'<td class="row_data" style="width: 55px;"><input type="text" name="i_ed_1" style="width: 50px;"></td>',
'<td class="row_data" style="width: 100px"><textarea name="i_val_1" maxlength=50 style="width: 90px;"></textarea></td>',
'<td class="row_data" style="width: 100px"><textarea name="i_fact_1" maxlength=50 style="width: 90px;"></textarea></td>',
'</tr>'.
enddo.
add_html_creat:
'</table></form></td>'.
И это только начало метода по формированию страницы. А вот как выглядит примерно это-же действие при использовании JQUERY
Код
form REFRESH_TAB2_2 .
data:
ls_index(2),
ls_param type string.
CLEAR gt_html_creat.
gt_html_creat-NAME = '<!FORM2_2!>'.
do 5 times.
ls_index = sy-index.
condense ls_index.
add_html_creat:
'<tr><td class="row_data">',
ls_index,
'</td><td class="row_data" ><textarea id=',
'class="text ui-widget-content ui-corner-all" maxlength=1024>',
'</textarea><td class="row_data"><input id=',
ls_param,
'class="text ui-widget-content ui-corner-all"</td>',
'<td class="row_data"><input id=',
ls_param,
'class="text ui-widget-content ui-corner-all"></td>',
'<td class="row_data" ><input id=',
ls_param,
'class="text ui-widget-content ui-corner-all"></td></tr>'.
enddo.
APPEND gt_html_creat.
endform. " REFRESH_TAB2_2
Как видно - гораздо меньше оформления и больше упор сделан на заполнение. Существенного упрощения можно добиться, если перенести ответственность за оформление контента на сторону HTML, а там в свою очередь можно в полный рост использовать всю мощь JQUERY.
Теперь предлагаю вернуться к JScript и посмотреть, как на стороне HTML шаблона реализовать некоторые вещи, полезные при вызове из SAP.
Для облегчения работы с группами объектов (тэгов) в JQuery есть возможность пользоваться селекторами - селекторы, это как-бы групповые описания объектов, например селектор $("input") - означает что будут обрабатываться все тэги <input>, а селектор $("input.edit_phone") означает что будем работать со всеми input у которых в атрибуте class есть "edit_phone". Вообще про селекторы можно писать очень много - лучше поискать информацию на эту тему в интернете. Обратите внимание, что селекторы заключены в обертку $() - это и есть собственно сам класс JQUERY, альтернатива такой записи - jQuery(). Вот пара примеров, которые мне лично пригодились при реализации моей задачи.
Например, чтобы не прописывать обработчики событий в каждом поле ввода в шаблоне, можно в заголовок добавить следующий скрипт:
Код
<script>
$(function() {
$("input").bind("keyup",function(event){evntKey(event.target);});
$("input").bind("change",function(event){sendVal(event.target);});
$("textarea").bind("keyup",function(event){evntKey(event.target);});
$("textarea").bind("change",function(event){sendVal(event.target);});
}
Этот скрипт отработает после полной загрузки страницы и ко всем тэгам <input> и <textarea> зарегистрирует обработчики, необходимые для передачи данных в SAP. Теперь при динамическом формировании форм на стороне SAP не нужно беспокоиться о передаче данных. Запись $(function() {....} ) говорит о том что код расположенный внутри фигурных скобок будет отрабатывать после загрузки страницы.
А если добавить еще такой код:
Код
<script>
$(function() {
А вот код скрипта, который превращает поле ввода в поле ввода с бегунком, как на рисунке:
Код
<script>
$(function() {
$("input.spinner_0_3").each(function(){
var divslider = $("<div></div>",{
id: $(this).attr("ID")
}
).css({
align:'center',
width: '95%'
});
$(this).attr("readonly","");
$(this).css("text-align", "center");
$(divslider).slider({min:0,max: 3,step:0.5,value: $(this).attr("value"),slide: function( event, ui ) {
var sel_name = this.id.replace("#",function myFunction(x){return "\\"+x});
var edtField = $( "input#"+sel_name );
$(edtField).val(ui.value );
evntKey(edtField[0]);
},
});
$(this).after($(divslider));
});
}
Код
DEFINE add_html_creat. "Макрос для формирования таблицы HTML кода для подстановки
APPEND &1 TO gt_html_creat-html.
END-OF-DEFINITION.
CLEAR gt_html_creat.
gt_html_creat-NAME = '<!INFO_PAGE!>'.
form ....
.....
add_html_creat:
'<tr>',
'<td class="menu1_1" onclick="location.href=''SAPEVENT:SubMenu?item=01''" height=60px>Выполнение должностных обязанностей</td>',
'</tr>',
'<tr>',
'<td class="menu1_s" height=47px>Выполнение индивидуальных задач</td> ',
'</tr>',
'<tr>',
'<td class="menu1_1" onclick="location.href=''SAPEVENT:SubMenu?item=03''" height=80px>Достижение ключевых показателей деятельности подразделения</td> ',
'</tr>',
'<tr>',
'<td class="menu1_1" onclick="location.href=''SAPEVENT:SubMenu?item=04''" height=80px>Оценка руководителем корпоративных компетенций </td> ',
'</tr>',
'<tr>',
'<td class="menu1_1" onclick="location.href=''SAPEVENT:SubMenu?item=05''" height=92px>Оценка руководством </td>',
'</tr>',
'<tr>',
'<td class="menu1_1" onclick="location.href=''SAPEVENT:SubMenu?item=06''" height=60px>Выводы по результатам корпоративной аттестации</td>',
'</tr></table>',
*-----------------------------------------------------------------------------------------
'<form id="frm" action="sapevent:M_ocenka" method="GET" width=640px BORDER=0 CELLPADDING=0 CELLSPACING=0 style=" margin: 0; ">',
'<table width=640px BORDER=0 CELLPADDING=0 CELLSPACING=0 style="table-layout:fixed;position: relative;top:23px ;left:150px;">',
'<tr>',
'<td class="row_data" style="width: 20px;">№ п/п</td>',
'<td class="row_data" style="width: 235px;">Наименование задачи</td>',
'<td class="row_data" style="width: 55px;">Единица измерения</td>',
'<td class="row_data" style="width: 100px;">Целевое значение</td>',
'<td class="row_data" style="width: 100px;">Показатель (факт)</td>',
'</tr>'.
do 6 times.
add_html_creat:
'<tr>',
'<td class="row_data" style="width: 20px;">',
sy-index,
'</td>',
'<td class="row_data" style="width: 235px;"><textarea name="i_text_1" maxlength=1024 style="width: 230px;"></textarea></td>',
'<td class="row_data" style="width: 55px;"><input type="text" name="i_ed_1" style="width: 50px;"></td>',
'<td class="row_data" style="width: 100px"><textarea name="i_val_1" maxlength=50 style="width: 90px;"></textarea></td>',
'<td class="row_data" style="width: 100px"><textarea name="i_fact_1" maxlength=50 style="width: 90px;"></textarea></td>',
'</tr>'.
enddo.
add_html_creat:
'</table></form></td>'.
И это только начало метода по формированию страницы. А вот как выглядит примерно это-же действие при использовании JQUERY
Код
form REFRESH_TAB2_2 .
data:
ls_index(2),
ls_param type string.
CLEAR gt_html_creat.
gt_html_creat-NAME = '<!FORM2_2!>'.
do 5 times.
ls_index = sy-index.
condense ls_index.
add_html_creat:
'<tr><td class="row_data">',
ls_index,
'</td><td class="row_data" ><textarea id=',
'class="text ui-widget-content ui-corner-all" maxlength=1024>',
'</textarea><td class="row_data"><input id=',
ls_param,
'class="text ui-widget-content ui-corner-all"</td>',
'<td class="row_data"><input id=',
ls_param,
'class="text ui-widget-content ui-corner-all"></td>',
'<td class="row_data" ><input id=',
ls_param,
'class="text ui-widget-content ui-corner-all"></td></tr>'.
enddo.
APPEND gt_html_creat.
endform. " REFRESH_TAB2_2
Как видно - гораздо меньше оформления и больше упор сделан на заполнение. Существенного упрощения можно добиться, если перенести ответственность за оформление контента на сторону HTML, а там в свою очередь можно в полный рост использовать всю мощь JQUERY.
Теперь предлагаю вернуться к JScript и посмотреть, как на стороне HTML шаблона реализовать некоторые вещи, полезные при вызове из SAP.
Для облегчения работы с группами объектов (тэгов) в JQuery есть возможность пользоваться селекторами - селекторы, это как-бы групповые описания объектов, например селектор $("input") - означает что будут обрабатываться все тэги <input>, а селектор $("input.edit_phone") означает что будем работать со всеми input у которых в атрибуте class есть "edit_phone". Вообще про селекторы можно писать очень много - лучше поискать информацию на эту тему в интернете. Обратите внимание, что селекторы заключены в обертку $() - это и есть собственно сам класс JQUERY, альтернатива такой записи - jQuery(). Вот пара примеров, которые мне лично пригодились при реализации моей задачи.
Например, чтобы не прописывать обработчики событий в каждом поле ввода в шаблоне, можно в заголовок добавить следующий скрипт:
Код
<script>
$(function() {
$("input").bind("keyup",function(event){evntKey(event.target);});
$("input").bind("change",function(event){sendVal(event.target);});
$("textarea").bind("keyup",function(event){evntKey(event.target);});
$("textarea").bind("change",function(event){sendVal(event.target);});
}
</script>
Этот скрипт отработает после полной загрузки страницы и ко всем тэгам <input> и <textarea> зарегистрирует обработчики, необходимые для передачи данных в SAP. Теперь при динамическом формировании форм на стороне SAP не нужно беспокоиться о передаче данных. Запись $(function() {....} ) говорит о том что код расположенный внутри фигурных скобок будет отрабатывать после загрузки страницы.
А если добавить еще такой код:
Код
<script>
$(function() {
$("table#frm").bind("mouseout",function(event){sendKey();});
}
То для корректной отработки передачи данных при отсутствии события OnChange достаточно табличке в которой размещены элементы для ввода данных присвоить атрибут ID="frm".
</script>
А вот код скрипта, который превращает поле ввода в поле ввода с бегунком, как на рисунке:
Код
<script>
$(function() {
$("input.spinner_0_3").each(function(){
var divslider = $("<div></div>",{
id: $(this).attr("ID")
}
).css({
align:'center',
width: '95%'
});
$(this).attr("readonly","");
$(this).css("text-align", "center");
$(divslider).slider({min:0,max: 3,step:0.5,value: $(this).attr("value"),slide: function( event, ui ) {
var sel_name = this.id.replace("#",function myFunction(x){return "\\"+x});
var edtField = $( "input#"+sel_name );
$(edtField).val(ui.value );
evntKey(edtField[0]);
},
});
$(this).after($(divslider));
});
}
</script>
Теперь, если мы хотим, чтобы пользователь вводил число не руками, а с помощью бегунка, достаточно добавить в HTML <input class="spinner_0_3" id="EDIT_1"> и все, после загрузки страницы под полем ввода автоматически создастся элемент управления slider, который будет передавать значения в поле ввода, ну и в SAP заодно.
Комментариев нет:
Отправить комментарий