User Rating: 5 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Active
 

Ну что начнем делать движок для сайта? Открывайте скорей конфигуратор.

На этом этапе первым делом надо продумать структуру данных. Потом, т.к. данными будут текстовые статьи с разными возможностями оформления, нам понадобится некий текстовый редактор. Т.е. на этом этапе мы потренируемся разрабатывать управляемые формы. До HTTP пока дело не дойдет.

Вводная для этой статьи находится тут. Там и ТЗ и зачем вообще это нужно.

 

  



 

С данными все достаточно просто. Нам нужен справочник, который будет хранить главы, назовем его «РазделыСправочнойИнформации». В любой книге оглавление это иерархическая структура, значит справочник иерархический. Т.к. глава являющаяся родителем для других, сама по себе может содержать информацию, то выбираем иерархию элементов. Количество уровней ограничивать не будем.

В плане данных:

⦁ стандартному наименованию зададим синоним «Заголовок», а длину – 100 знаков.

⦁ Добавим реквизит «ID». Пусть будет строка 100 с индексацией. Название даю английское, чтобы намекнуть на английское содержимое.

⦁ Добавим реквизит «ИмеетСвойТекст» с типом «Булево».

⦁ Добавим реквизит «Текст» с типом «Строка» неограниченной длины.

 

Создаем справочник с разделами сайта
Создаем справочник с разделами сайта

Теперь начнем рисовать форму элемента справочника, форма списка нас устроит по умолчанию.

По умолчанию форма нарисуется вот такая:

 

Форма справочника по умолчанию
Форма справочника по умолчанию

Начнем её править. Элементу формы «Текст» свойство «МногострочныйРежим» выставляем в значение «Да». Ширину ставим 100, а высоту 8.

 

Изменим размеры многострочного поля
Изменим размеры многострочного поля

Создадим обычную группу элементов с именем «ГруппаЗаголовок». Группировка – горизонтальная. Отображение – Нет. ОтображатьЗаголовок – галку снимаем. Тащим в неё по порядку элементы «Наименование», «Код» и «Родитель».

Создаем еще одну такую же группу с такими же свойствами с именем «ГруппаРеквизитыШапки» и тащим туда «ID» и «ИмеетСвойТекст».

 

Группируем элементы управления
Группируем элементы управления

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

Задача – редактировать и форматировать текст. В простом текстовом поле форматировать текст нельзя. Поэтому для того, чтобы выделить слово жирным шрифтом надо его обрамить какими-то тегами. Я сначала думал сделать теги следующего вида: «в этом тексте [B]Жирное[/B] слово». Но потом решил, что пусть это будут сразу теги формата html. Это упростит задачу генерации html кода. Т.е. для выделения жирным шрифтом надо писать так: «в этом тексте <B>Жирное</B> слово». В обязанности админа не входит знание html языка, поэтому надо упростить ему работу и нарисовать кнопки как во всех текстовых редакторах, которые будут заключать слова в нужные теги.

Такой подход редактирования не очень удобен пользователю и сложноват в реализации. Альтернативой может стать размещение на форме реквизита с типом «ФорматированныйДокумент», отображением его в виде элемента формы «Поле форматированного документа» и командной панели связанной с этим реквизитом. При записи, можно было бы получать готовый html из реквизита формы методом «ПолучитьHTML(…)» и писать его в текстовый реквизит объекта. При открытии записанного ранее элемента справочника совершать обратную процедуру. Но минусом будет то, что будут очень богатые возможности форматирования и каждую главу нашей справки будет сложно поддерживать в едином стиле. HTML код в этом случае будет сложным, и трудно поддаваться обработке. А при вставке из word через буфер обмена там вообще будет такая гадость.

Ниже на рисунке пример содержимого форматированного документа и html код, который получен методом «ПолучитьHTML(…)»

 

Пример HTML полученного объектом 1С
Пример HTML полученного объектом 1С "форматированный документ"

Мой же «спратанский» метод позволит, ограничив админа в возможностях, делать единое оформление с применением единой таблицы стилей.

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

Рисуем на форме группу «ГруппаПанельФорматирования» типа «Командная панель». Добавляем команду с именем «ф1_Жирный», заголовком «Ж» и тащим её в панель.

 

Выделение жирным шрифтом
Выделение жирным шрифтом

Пишем следующий обработчик кнопки на клиенте:

НачалоСтрока = 0;
НачалоСимвол = 0;
КонецСтрока = 0;
КонецСимвол = 0;
Элементы.Текст.ПолучитьГраницыВыделения(НачалоСтрока, НачалоСимвол, КонецСтрока, КонецСимвол);
ОбрамитьВыделенное("<B>", "</B>", НачалоСтрока, НачалоСимвол, КонецСтрока, КонецСимвол);

В нем мы получаем позиции курсора в текстовом поле и, если есть выделенный текст, обрамляем его тегами. Само обрамление делается в процедуре «ОбрамитьВыделенное(…)». Ниже её текст:

&НаКлиенте
Процедура ОбрамитьВыделенное(ВставкаДо, ВставкаПосле, НачалоСтрока, НачалоСимвол, КонецСтрока, КонецСимвол)

новаяСтрока = "";

//до выделения
Для ж=1 По НачалоСтрока-1 Цикл
новаяСтрока = новаяСтрока + СтрПолучитьСтроку(Объект.Текст,ж) + Символы.ПС;
КонецЦикла;
//выделение
Если НачалоСтрока = КонецСтрока тогда
//все внутри одной строки
стр = СтрПолучитьСтроку(Объект.Текст,НачалоСтрока);

новаяСтрока = новаяСтрока
//до начала
+ Сред(стр,1,НачалоСимвол-1)
+ ВставкаДо
//выделенное
+ Сред(стр,НачалоСимвол, КонецСимвол - НачалоСимвол)
+ ВставкаПосле
//хвост
+ Сред(стр, КонецСимвол) + Символы.ПС; 
Иначе
//строка начала и конца - разные
стр = СтрПолучитьСтроку(Объект.Текст,НачалоСтрока);
новаяСтрока = новаяСтрока
//до начала
+ Сред(стр,1,НачалоСимвол-1)
+ ВставкаДо
+ Сред(стр,НачалоСимвол) + Символы.ПС;
Для ж = НачалоСтрока + 1 По КонецСтрока - 1 Цикл
новаяСтрока = новаяСтрока + СтрПолучитьСтроку(Объект.Текст,ж) + Символы.ПС;
КонецЦикла;

стр = СтрПолучитьСтроку(Объект.Текст,КонецСтрока);
новаяСтрока = новаяСтрока
//до начала
+ Сред(стр,1,КонецСимвол-1)
+ ВставкаПосле
+ Сред(стр,КонецСимвол) + Символы.ПС;
КонецЕсли;

//хвост после выделения
Для ж=КонецСтрока + 1 По СтрЧислоСтрок(Объект.Текст) Цикл
новаяСтрока = новаяСтрока + СтрПолучитьСтроку(Объект.Текст,ж) + Символы.ПС;
КонецЦикла;

Объект.Текст = новаяСтрока;
КонецПроцедуры

Теперь сохранимся и запустим базу в режиме предприятия. Зайдем в справочник и создадим новый элемент с заголовком «введение». Поставим галку «имеет свой текст». Id присвоим «vvedenie».

Напишем в поле «Текст»: Пишеем первую главу. Первой главой нашей справки будет введение.

Выделим слово «Ввдедение» и нажмем кнопку «Ж». Получим следующий результат:

 

Запишем и вернемся в конфигуратор. Нам надо написать по аналогии кнопки: 

ф2_Курсив, заголовок «К», теги <I>…</I>

ф3_Подчеркнутый, заголовок «Ч», теги <U>… </U>

ф4_З1, заголовок «Заголовок 1», теги <H1>… </H1>

ф5_З2, заголовок «Заголовок 2», теги <H2>… </H2>

ф6_З3, заголовок «Заголовок 3», теги <H3>… </H3>

ф4, ф5 и ф6 я объединил в подменю.

 

Кнопкам я давал префикс «ф» и порядковый номер, чтобы они в списке кнопок шли в том порядке, как на панели инструментов, а не по алфавиту.

Так с элементарным форматированием разобрались. Далее по ТЗ у нас есть блоки цитат и блоки кода. Я решил сделать универсальные блоки. Т.е. это будет справочник, содержащий код обработки текста.

Имя справочника будет «БлокиОформления». Наименование уберём, поставив длину 0, а код увеличим до 20 знаков. Синоним кода будет «Ключевое слово». Это нам позволит исключить два одинаковых по названию блока. Добавим реквизит «ЕстьЗакрывающееСлово» с типом булево. Добавим реквизит «ФункцияОбрабоки» и «Описание» с типом строка неограниченной длины и длина 50 соответсвенно. Пока формы пусть генерятся платформой, красоту наведем позже. 

Запустим в режиме предприятия и создадим два элемента с ключом «code» и «quote». Оба с галкой «ЕстьЗакрывающееСлово». Первый будет обрамлять код, второй цитаты, напишите это в описании.

 

Поле функции пока оставим пустым, с ним будем работать на этапе 2.

Вернемся в конфигуратор в форму элемента справочника «РазделыСправочнойИнформации». Нам надо динамически рисовать подменю для вставки блоков.

Создадим на форме группу с типом подменю и именем «Свои». У формы создадим обработчик события «ПриСозданииНаСервере». В нем нам надо получить все ключевые слова (не помеченные на удаление) и нарисовать необходимые команды.

Этот код создает кнопки, команды формы, связывает их, а обработчиком команд назначает процедуру «ф_КлючевоеСлово(…)». Опишем эту процедуру в модуле формы.

Так же нужна серверная процедура «ПолучитьПараметрыКлючевогоСлова(…)», которая по его имени вернет его реквизиты (пока только 1).

&НаСервере

Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
//получим список ключевых слов
Запрос = Новый Запрос("ВЫБРАТЬ
                     |БлокиОформления.Код КАК КлючевоеСлово,
                     |БлокиОформления.Описание КАК Описание
                     |ИЗ
                     |Справочник.БлокиОформления КАК БлокиОформления
                     |ГДЕ
                     |НЕ БлокиОформления.ПометкаУдаления");
рез = Запрос.Выполнить();
выб = рез.Выбрать();

//в цикле нарисуем соответсвующие кнопки
Пока выб.Следующий() Цикл
//Добавляем форме команду
Кмд = ЭтаФорма.Команды.Добавить("ф_"+ выб.КлючевоеСлово);
Кмд.Действие = "ф_КлючевоеСлово";
Кмд.Заголовок = "Ключевое слово";
//Добавляем саму кнопку
Элемент = ЭтаФорма.Элементы.Добавить("ф_"+ выб.КлючевоеСлово, Тип("КнопкаФормы"), Элементы.Свои);
Элемент.Вид = ВидКнопкиФормы.КнопкаКоманднойПанели;
Элемент.ИмяКоманды = "ф_"+ выб.КлючевоеСлово;
Элемент.Заголовок = выб.Описание + " [" + выб.КлючевоеСлово + "]";
КонецЦикла;

КонецПроцедуры

&НаКлиенте
Процедура ф_КлючевоеСлово(Команда)
ИмяКлючевогоСлова = Сред(Команда.Имя,3);
НачалоСтрока = 0;
НачалоСимвол = 0;
КонецСтрока = 0;
КонецСимвол = 0;
Элементы.ТекстСправки.ПолучитьГраницыВыделения(НачалоСтрока, НачалоСимвол, КонецСтрока, КонецСимвол);

свойстваСлова = ПолучитьПараметрыКлючевогоСлова(ИмяКлючевогоСлова);
Если свойстваСлова = Неопределено Тогда Возврат; КонецЕсли;
Если свойстваСлова.ЕстьЗакрывающееСлово Тогда
ОбрамитьВыделенное("["+ИмяКлючевогоСлова+"]", "[/"+ИмяКлючевогоСлова+"]", НачалоСтрока, НачалоСимвол, КонецСтрока, КонецСимвол);
Иначе
ОбрамитьВыделенное("["+ИмяКлючевогоСлова+"]", "", НачалоСтрока, НачалоСимвол, КонецСтрока, КонецСимвол);
КонецЕсли;
КонецПроцедуры

&НаСервереБезКонтекста
Функция ПолучитьПараметрыКлючевогоСлова(слово)
Запрос = Новый Запрос("ВЫБРАТЬ
                     |БлокиОформления.ЕстьЗакрывающееСлово КАК ЕстьЗакрывающееСлово
                     |ИЗ
                     |Справочник.БлокиОформления КАК БлокиОформления
                     |ГДЕ
                     |БлокиОформления.Код = &КлючевоеСлово");
Запрос.УстановитьПараметр("КлючевоеСлово", слово);
Рез = Запрос.Выполнить();
Выб = Рез.Выбрать();
Если Выб.Следующий() Тогда
Возврат Новый Структура("ЕстьЗакрывающееСлово", выб.ЕстьЗакрывающееСлово);
Иначе
Возврат Неопределено;
КонецЕсли;
КонецФункции

Собственно на этом первый этап работ можно считать законченным. Осталось только наметить план работ на второй этап и можно идти спать.

 

План работ на второй этап:

⦁ Реализация функции, которая по тексту главы справки сгенерирует финальный html код.

⦁ Разработаем структуру данных для хранения таблицы стилей.

⦁ Доработаем процедуру из п.1 с учетом таблицы стилей.

⦁ В форме элемента справочника глав создадим предпросмотр.

⦁ Разработаем процедуру замены «своих» блоков, на нужное html оформление и вставим её в процедуру из п.1

⦁ Т.к. раскрасить 1С код в одной процедуре сложно (хотя и можно) напишем все нужное в отдельном общем модуле, чтобы потом просто вызвать экспортную процедуру

В конце прилагаю dt файл с результатами первого этапа этого чудесного практикума.

 

Вложения
Download this file (DvizokSaitaEtap01.dt)DvizokSaitaEtap01.dt[ ]39 kB

Авторизуйтесь пожалуйста

Comments   

+1 # Sergey 2017-12-09 17:45
Я тоже болею идеей создания своего интерфейса, отличного от стандартного 1С-овского. Например в вечернее время неплохо бы менять цвета на темные. Пока никаких разработок в этой области не встречал, а сам только начинаю осваивать WEB-программиро вание, поэтому статья заинтересовала.