Конструктор HTML, CSS и javascript

05.06.23

Разработка - Инструментарий разработчика

–

> > > > > > >

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

Скачать файлы

	Наименование	Файл	Версия	Размер
	Конструктор HTML, CSS и javascript .epf 14,38Kb 142	.epf	1.0	14,38Kb	142	Скачать

Как работать

Пользовательский интерфейс обработки состоит из трех блоков, слева направо:

• Иерархия элементов HTML в виде дерева;

• Область редактирования текущего (выделенного в дереве) элемента;

• Просмотр результата.

Состав и структуру элементов программист определяет сам. Предполагается, что одним элементом в иерархии является узел (тег HTML), однако это не является обязательным правилом. К примеру, все функции JS или несколько логически взаимосвязанных можно поместить в один элемент иерархии. Точно так же и с CSS.

Пример работы

Выведем веселенькую анимацию.

1. Разносим следующую заготовку страницы в обработке так, как на картинке:

<!DOCTYPE html>
<HTML>
	<style type="text/css">
	</style>
	<body>
	</body>
	<script type="text/javascript">
	</script>
</HTML>

2. Выделим строку с объявлением стилей (<style...), нажмем кнопку "Внутрь" и в содержимое вставим скопируем следующий текст со стилями CSS:

CSS

.aquarium {
  position: relative;
  overflow: hidden;
  background: white;
  width: 800px; height: 500px;
  margin: auto;
}
  .aquarium *, .aquarium *::before, .aquarium *::after {
    position: absolute;
    content: '';
  }
  .aquarium__table {
    left: 230px; top: 381px;
    width: 341px; height: 6px;
    border-radius: 3px;
    background: black;
  }
    .aquarium__table:before {
      left: 105px; top: -15px;
      width: 131px; height: 19px;
      box-sizing: border-box;
      border-radius: 6px;
      border: 4px solid black;
      background: #00AAFF;
    }
  .aquarium__aquarium {
    left: 296px; top: 223px;
    width: 209px; height: 148px;
    box-sizing: border-box;
    border: 5px solid black;
    border-radius: 40px 40px 50px 50px / 74px 74px 74px 74px;
    box-shadow: inset -30px 0 0 0 rgba(54, 125, 231, 0.2);
    overflow: hidden;
    z-index: 1;
  }
  .aquarium__water {
    left: 0; top: 39px;
    width: 100%; height: 100%;
    opacity: .5;
    background: #5bb8ff;
    animation: sponge-water 2.5s linear infinite;
  }
  .aquarium__drops {
    top: 142px; left: 304px;
    width: 190px; height: 125px;
    overflow: hidden;
  }
  .aquarium__drop {
    top: 100px; left: 93px;
    width: 8px; height: 8px;
    border-radius: 100%;
    background: #80D5FF;
    animation: sponge-drop 2.5s linear infinite;
  }
  .aquarium__water-column {
    top: 122px; left: 70px;
    width: 60px; height: 130px;
    opacity: .5;
    background: #5bb8ff;
    animation: sponge-water-column 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(2) {
    left: 30px; top: 25px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-1 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(3) {
    left: 140px; top: 84px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-2 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(4) {
    left: 139px; top: 58px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-3 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(5) {
    left: 48px; top: 67px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-4 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(6) {
    left: 48px; top: 92px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-5 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(7) {
    left: 140px; top: 92px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-6 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(8) {
    left: 139px; top: 93px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-7 2.5s linear infinite;
  }
  .aquarium__bubble:nth-child(9) {
    left: 48px; top: 82px;
    width: 10px; height: 10px;
    background: white;
    border-radius: 100%;
    transform: scale(1);
    z-index: 2;
    animation: sponge-bubble-8 2.5s linear infinite;
  }
  .aquarium__splash:nth-child(3) {
    top: 84px; left: 30px;
    height: 8px; width: 4px;
    border-radius: 2px;
    opacity: .5;
    background: #5bb8ff;
    animation: sponge-splash-1 2.5s linear infinite;
  }
    .aquarium__splash:nth-child(3):before {
      top: 22px; left: -23px;
      height: 4px; width: 8px;
      border-radius: 2px;
      background: #5bb8ff;
    }
    .aquarium__splash:nth-child(3):after {
      top: 22px; left: 18px;
      height: 4px; width: 8px;
      border-radius: 2px;
      background: #5bb8ff;
    }
  .aquarium__splash:nth-child(4) {
    top: 84px; left: 155px;
    height: 8px; width: 4px;
    border-radius: 2px;
    opacity: .5;
    background: #5bb8ff;
    animation: sponge-splash-2 2.5s linear infinite;
  }
    .aquarium__splash:nth-child(4):before {
      top: 22px; left: -23px;
      height: 4px; width: 8px;
      border-radius: 2px;
      background: #5bb8ff;
    }
    .aquarium__splash:nth-child(4):after {
      top: 22px; left: 18px;
      height: 4px; width: 8px;
      border-radius: 2px;
      background: #5bb8ff;
    }
  .aquarium__sponge-box {
    width: 86px; height: 106px;
    left: 357px; top: 233px;
    animation: sponge-box 2.5s linear infinite;
  }
  .aquarium__body {
    width: 100%; height: 100%;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 5px black, inset -10px 0 0 5px rgba(221, 165, 33, 0.47);
    border-radius: 13px;
    background: #FAEF37;
    overflow: hidden;
    animation: sponge-body 2.5s linear infinite;
  }
    .aquarium__body:before {
      top: 62px; left: 74px;
      width: 24px; height: 24px;
      box-sizing: border-box;
      background: white;
      border-radius: 100%;
      border: 5px solid black;
    }
    .aquarium__body:after {
      top: 93px; left: 14px;
      width: 24px; height: 24px;
      box-sizing: border-box;
      background: white;
      border-radius: 100%;
      border: 5px solid black;
    }
  .aquarium__body-hole {
    width: 22px; height: 22px;
    left: -3px; top: 67px;
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.1);
  }
    .aquarium__body-hole:before {
      width: 15px; height: 15px;
      left: 70px; top: -46px;
      border-radius: 100%;
      background: rgba(0, 0, 0, 0.1);
    }
    .aquarium__body-hole:after {
      width: 10px; height: 10px;
      left: 57px; top: 17px;
      border-radius: 100%;
      background: rgba(0, 0, 0, 0.1);
    }
  .aquarium__body-stripe {
    width: 23px; height: 13px;
    left: 45px; top: 0;
    border-radius: 0 10px 0 0;
    border-top: 5px solid black;
    border-right: 5px solid black;
  }
    .aquarium__body-stripe:before {
      width: 5px; height: 10px;
      left: 23px; top: 9px;
      border-radius: 3px;
      background: black;
    }
  .aquarium__face {
    width: 46px; height: 56px;
    left: 20px; top: 42px;
  }
    .aquarium__face:before {
      width: 9px; height: 9px;
      border-radius: 100%;
      background: black;
      animation: sponge-eye 2.5s linear infinite;
    }
    .aquarium__face:after {
      left: 37px; top: 0px;
      width: 9px; height: 9px;
      border-radius: 100%;
      background: black;
      animation: sponge-eye 2.5s linear infinite;
    }
  .aquarium__mouth {
    left: 13px; top: 14px;
    width: 20px; height: 14px;
    box-sizing: border-box;
    border-radius: 4px 4px 14px 14px;
    border: 3px solid black;
    border-top-width: 6px;
    background: red;
    animation: sponge-mouth 2.5s linear infinite;
  }
  .aquarium__smile {
    left: 24px; top: 12px;
    animation: sponge-smile 2.5s linear infinite;
  }
    .aquarium__smile:before {
      left: -10px;
      width: 6px; height: 6px;
      border-radius: 0 0 0 6px;
      border-bottom: 3px solid black;
      border-left: 3px solid black;
      transform: rotate(-45deg);
    }
    .aquarium__smile:after {
      left: -2px;
      width: 6px; height: 6px;
      border-radius: 0 0 0 6px;
      border-bottom: 3px solid black;
      border-left: 3px solid black;
      transform: rotate(-45deg);
    }

@keyframes sponge-splash-1 {
  0% { transform: scale(0) translateY(30px); }
  9.01% { transform: scale(0) translateY(30px); }
  16.84% { transform: scale(1) translateY(0); }
  16.9% { transform: scale(0) translateY(0); }
  72.64% { transform: scale(0) translateY(30px); }
  81.44% { transform: scale(1) translateY(0); }
  81.5% { transform: scale(0) translateY(0); }
  100% { transform: scale(0) translateY(30px); }
}
@keyframes sponge-splash-2 {
  0% { transform: scale(0) translateY(30px); }
  14.4% { transform: scale(0) translateY(30px); }
  20.64% { transform: scale(1) translateY(0); }
  20.7% { transform: scale(0) translateY(0); }
  77% { transform: scale(0) translateY(30px); }
  83.24% { transform: scale(1) translateY(0); }
  83.3% { transform: scale(0) translateY(30px); }
  100% { transform: scale(0) translateY(30px); }
}
@keyframes sponge-bubble-1 {
  0% { transform: scale(0) translate(0, 0); }
  45.9% { transform: scale(0) translate(8px, 16px); }
  46% { transform: scale(0.2) translate(8px, 16px); }
  50% { transform: scale(1) translate(17px, 33px); }
  50.1% { transform: scale(0) translate(17px, 33px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-2 {
  0% { transform: scale(0) translate(0, 0); }
  47.9% { transform: scale(0) translate(0, 0); }
  48% { transform: scale(0.2) translate(0, 0); }
  52% { transform: scale(1) translate(25px, -58px); }
  52.1% { transform: scale(0) translate(25px, -58px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-3 {
  0% { transform: scale(0) translate(0, 0); }
  50.9% { transform: scale(0) translate(0, 0); }
  51% { transform: scale(0.2) translate(0, 0); }
  55% { transform: scale(1) translate(18px, -34px); }
  55.1% { transform: scale(0) translate(18px, -34px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-4 {
  0% { transform: scale(0) translate(0, 0); }
  52.9% { transform: scale(0) translate(0, 0); }
  53% { transform: scale(0.2) translate(0, 0); }
  57% { transform: scale(1) translate(-10px, -42px); }
  57.1% { transform: scale(0) translate(-10px, -42px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-5 {
  0% { transform: scale(0) translate(0, 0); }
  54.9% { transform: scale(0) translate(0, 0); }
  55% { transform: scale(0.2) translate(0, 0); }
  60% { transform: scale(1) translate(-18px, -68px); }
  60.1% { transform: scale(0) translate(-18px, -68px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-6 {
  0% { transform: scale(0) translate(0, 0); }
  57.9% { transform: scale(0) translate(0, 0); }
  58% { transform: scale(0.2) translate(0, 0); }
  62% { transform: scale(1) translate(-2px, -68px); }
  62.1% { transform: scale(0) translate(-2px, -68px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-7 {
  0% { transform: scale(0) translate(0, 0); }
  60.9% { transform: scale(0) translate(0, 0); }
  61% { transform: scale(0.2) translate(0, 0); }
  65% { transform: scale(1) translate(20px, -68px); }
  65.1% { transform: scale(0) translate(20px, -68px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-8 {
  0% { transform: scale(0) translate(0, 0); }
  62.9% { transform: scale(0) translate(0, 0); }
  63% { transform: scale(0.2) translate(0, 0); }
  67% { transform: scale(1) translate(-8px, -56px); }
  67.9% { transform: scale(0) translate(-8px, -56px); }
  100% { transform: scale(0) translate(0, 0); }
}
@keyframes sponge-eye {
  9.36% { transform: scale(1); }
  9.37% { transform: scale(0); }
  14.0% { transform: scale(0); }
  14.01% { transform: scale(1); }
}
@keyframes sponge-mouth {
  0% {
    border-radius: 4px 4px 14px 14px;
    transform: scale(1);
    background: red;
  }
  9.36% {
    border-radius: 4px 4px 14px 14px;
    transform: scale(0);
    background: red;
  }
  28.08% {
    border-radius: 100%;
    transform: scale(0);
    background: black;
  }
  40.56% {
    border-radius: 100%;
    transform: scaleY(1.4);
    background: black;
  }
  42.12% {
    border-radius: 100%;
    transform: scaleY(1.4);
    background: black;
  }
  48.36% {
    border-radius: 100%;
    transform: scale(0);
    background: black;
  }
  76.4% {
    border-radius: 4px 4px 14px 14px;
    transform: scale(0);
    background: red;
  }
  76.44% {
    border-radius: 4px 4px 14px 14px;
    transform: scale(0.3);
    background: red;
  }
  93.6% {
    border-radius: 4px 4px 14px 14px;
    transform: scale(1);
    background: red;
  }
  100% {
    border-radius: 4px 4px 14px 14px;
    transform: scale(1);
    background: red;
  }
}
@keyframes sponge-smile {
  0%, 48.2% { opacity: 0; }
  48.36%, 76.44% { opacity: 1; }
  76.5%, 100% { opacity: 0; }
}
@keyframes sponge-water {
  6.24% { transform: translateY(0); }
  12.48% { transform: translateY(-11px); }
  78% { transform: translateY(-11px); }
  85.8% { transform: translateY(0); }
}
@keyframes sponge-drop {
  0% { transform: scale(0) translate(0, 24px); }
  7% { transform: scale(0) translate(0, 24px); }
  15.44% { transform: scale(2) translate(0, -36px); }
  27.8% { transform: scale(0) translate(0, 24px); }
  100% { transform: scale(0) translate(0, 24px); }
}
@keyframes sponge-water-column {
  0% { transform: scaleX(0) translateY(20px); }
  7.8% { transform: scaleX(1) translateY(20px); }
  18.72% { transform: scaleX(0.1) translateY(-12px); }
  29.64% { transform: scaleX(0.3) translateY(28px); }
  81.12% { transform: scaleX(1.4) translateY(28px); }
  95.16% { transform: scaleX(0) translateY(-132px); }
  100% { transform: scaleX(0) translateY(-132px); }
}
@keyframes sponge-box {
  0% { transform: translateY(-145px); }
  9.36% { transform: translateY(20px); }
  18.72% { transform: translateY(-5px); }
  28.08% { transform: translateY(-7px); }
  43.68% { transform: translateY(0px); }
  60.84% { transform: translateY(14px); }
  78% { transform: translateY(14px); }
  85.8% { transform: translateY(-144px); }
  93.6% { transform: translateY(-197px); }
  100% { transform: translateY(-164px); }
}
@keyframes sponge-body {
  0% { transform: rotate(-134deg) scale(1) translateX(0); }
  9.36% { transform: rotate(0deg) scale(1) translateX(0); }
  48.36% { transform: rotate(0deg) scale(1) translateX(0); }
  59.28% { transform: rotate(0deg) scale(0.95) translateX(0); }
  60.84% { transform: rotate(0deg) scale(0.9) translateX(-1px); }
  62.4% { transform: rotate(0deg) scale(0.9) translateX(-3px); }
  65.52% { transform: rotate(0deg) scale(0.9) translateX(3px); }
  68.64% { transform: rotate(0deg) scale(0.9) translateX(-3px); }
  71.76% { transform: rotate(0deg) scale(0.9) translateX(5px); }
  74.88% { transform: rotate(0deg) scale(0.9) translateX(-5px); }
  78% { transform: rotate(0deg) scale(0.9) translateX(0); }
  85.8% { transform: rotate(135deg) scale(1) translateX(0); }
  93.6% { transform: rotate(180deg) scale(1) translateX(0); }
  100% { transform: rotate(210deg) scale(1) translateX(0); }
}

3. Выделим строку с телом HTML (<body>), нажмем кнопку "Внутрь" и добавим в поле "Тег и его свойства" текст <div class="aquarium"> , а в поле "содержимое" вставим скопом все блоки div:

div's

<div class="aquarium__table"></div>
  <div class="aquarium__aquarium">
    <div class="aquarium__water"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
  </div>
  <div class="aquarium__drops">
    <div class="aquarium__drop"></div>
    <div class="aquarium__water-column"></div>
    <div class="aquarium__splash"></div>
    <div class="aquarium__splash"></div>
  </div>
  <div class="aquarium__sponge-box">
    <div class="aquarium__body">
      <div class="aquarium__body-stripe"></div>
      <div class="aquarium__body-hole"></div>
    </div>
    <div class="aquarium__face">
      <div class="aquarium__mouth"></div>
      <div class="aquarium__smile"></div>
    </div>
  </div>

Готово. Нажимаем кнопку "Сформировать" и любуемся результатом.

Проверено на платформе 8.3.21.1709 (64), но будет работать на всех версиях платформы 8.3.

Смотрите и другие мои публикации - делаю удобные инструменты для работы.

Обработка 1С HTML CSS Javascript инструменты разработки web-разработка

–

См. также

INFOSTART TECH EVENT 2023, 11-13 октября, Санкт-Петербург

Инструментарий разработчика Мобильная разработка DevOps и автоматизация разработки Администрирование СУБД Мероприятия Россия Платные (руб)

XIII конференция по управлению и технологиям автоматизации учета на платформе 1С:Предприятие, которая пройдет в Санкт-Петербурге и соберет 1500 участников из разных регионов России и мира.

4000 руб.

09.12.2022 30068 12 0

440

Онлайн-интенсив "DevOps для 1С". с 4 сентября по 17 октября 2023 г.

Инструментарий разработчика DevOps и автоматизация разработки DevOps для 1С Платные (руб)

Данный онлайн-курс (интенсив) предусматривает изучение процессов, инструментов и методик DevOps, их применение при разработке на платформе 1С.

18000 руб.

20.06.2023 9928 40 2

122

SALE! %

Infostart Toolkit: Инструменты разработчика 1С 8.3 на управляемых формах

Инструментарий разработчика Роли и права Запросы СКД Платформа 1С v8.3 Управляемые формы Запросы Система компоновки данных Конфигурации 1cv8 Платные (руб)

Набор инструментов программиста и специалиста 1С для всех конфигураций на управляемых формах. В состав входят инструменты: Консоль запросов, Консоль СКД, Консоль кода, Редактор объекта, Анализ прав доступа, Метаданные, Поиск ссылок, Сравнение объектов, Все функции, Подписки на события и др. Редактор запросов и кода с раскраской и контекстной подсказкой. Доработанный конструктор запросов тонкого клиента. Продукт хорошо оптимизирован и обладает самым широким функционалом среди всех инструментов, представленных на рынке.

~~12000~~ 10000 руб.

02.09.2020 93801 478 380

532

SALE! 30%

PowerTools

Инструментарий разработчика Инструменты администратора БД Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Россия Платные (руб)

Универсальный инструмент программиста для администрирования конфигураций. Сборник наиболее часто используемых обработок под единым интерфейсом.

~~3600~~ 2520 руб.

14.01.2013 170313 1052 0

793

Автоматизация труда программиста. Библиотека прикладных функций

Инструментарий разработчика Платформа 1С v8.3 Платформа 1C v8.2 Платформа 1С v8.1 Конфигурации 1cv8 Платные (руб)

Программист - это человек, непрерывно принимающий решения. Написание кода не является процессом принятия решения - это всего лишь трансляция ваших желаний. Если вас периодически тяготит написание сотен строк кода ради решения задач, то прошу обратить внимание. Данный продукт позволит существенно сократить время на рутинные операции при разработке. За счет библиотечной реализации сокращается объём кода, а его читаемость повышается. К библиотеке прилагается документация API и шаблоны кода для наиболее популярных методов.

4200 руб.

16.04.2021 12573 3 9

Многопоточность. Универсальный «Менеджер потоков» 2.1

Инструментарий разработчика Платформа 1С v8.3 Конфигурации 1cv8 Россия Платные (руб)

Восстановление партий или взаиморасчетов, расчет зарплаты, пакетное формирование документов или отчетов - теперь все это стало доступнее. * Есть желание повысить скорость работы медленных алгоритмов! Но... * Нет времени думать о реализации многопоточности? * о запуске и остановке потоков? * о поддержании потоков в рабочем состоянии? * о передаче данных в потоки и как получить ответ из потока? * об организации последовательности? Тогда ЭТО - то что надо!!!

5000 руб.

07.02.2018 96540 234 97

286

Условное оформление элементов форм в пользовательском режиме 1С (управление видимостью и доступностью элементов форм)

Работа с интерфейсом Платформа 1С v8.3 Платные (руб)

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

6000 руб.

18.01.2022 7767 1 2

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015 60063 40 57

Комментарии

В избранное Подписаться на ответы

Свернуть все

1. ubnkfl 10.04.23 22:36 Сейчас в теме

Используете ли вы свой механизм в реальной работе? Можете показать примеры, когда это нужно?

3. acces969 327 11.04.23 08:31 Сейчас в теме

(1) Постоянно. Особенно при разработке мобильных приложений - там все на веб-страницах. Потому и написал этот инструмент. К сожалению, показывать их я не могу.

Прикрепленные файлы:

Ответить

14. maksa2005 450 12.04.23 07:05 Сейчас в теме

(3)тут от части html

30. acvatoris 499 04.08.23 14:22 Сейчас в теме

Добрый день. Вы говорите, что разрабатываете мобильные приложения в html, js. Скажите, я правильно вам понимаю, что вы при разработке мобильных приложений используйте технологическую платформу 1С, но верстаете страницы в html и навешиваете обработчики js? Если это так, то меня интересует быстродействие таких приложений. А так же не возникает ли при эксплуатации такого рода приложений каких либо непонятных моментов, например приложение просто закрылось.
Я написал с десяток несколько мобильных приложений на платформе 1С, но я не использовал веб. Но когда я открыл для себя flutter, то полностью перешел на него, это было в 2020 году. Ни на секунду об этом не жалею. (Агитирую вас поэкспериментировать с ним. :))

2. maksa2005 450 11.04.23 07:02 Сейчас в теме

Лично я красивый интерфейс для мобилки делал через dw

5. pyrkin_vanya 480 11.04.23 09:52 Сейчас в теме

(2)любопытна эта тема. Можно чуть точнее? Через что делали? Что такое dw?

7. maksa2005 450 11.04.23 10:00 Сейчас в теме

(5)через Adobe DreamWeaver мне удобнее чем через 1с.
Написано 3 успешных проекта с использованием js+html5+css. Посмотрите в гугле плей: Мастерок86 ,а там уже в разделе Автора)

Ответить

11. Созинов 11.04.23 20:12 Сейчас в теме

(7) интересно было узнать, что DW еще жив. Пользовался им лет 15 назад.

13. maksa2005 450 12.04.23 07:04 Сейчас в теме

(11)жив не жив. не важно. мне удобно там)

15. Созинов 12.04.23 07:31 Сейчас в теме

(13)
(13)я без наезда, каждый выбирает свой инструмент. Интересно было узнать, что он развивается. Свои задачи он решает и решает хорошо.

19. maximus_2712 14 16.04.23 16:30 Сейчас в теме

(7) ваш мастерок какая то шляпа, это вы называете успешный проект? скачал, но зарегистрироваться не даёт, в настройках доступна отладка, сразу при открытии нужен доступ к файлам

20. maksa2005 450 16.04.23 19:22 Сейчас в теме

(19)шляпа это то что у вас на плечах, а проект был под заказчика. И правильно что Вас и не пустил)

4. sandr13 26 11.04.23 08:33 Сейчас в теме

Идеи интересные. Спасибо!

6. acces969 327 11.04.23 09:55 Сейчас в теме

Интересно - как сделал обработку бесплатной, так все переставили ставить плюсики)

Ответить

8. cheshirshik 45 11.04.23 10:25 Сейчас в теме

(6) плюсик поставил. Не переживай. Ещё минус влепить могут.

9. arsvlg 11.04.23 11:03 Сейчас в теме

Большое спасибо!
Тоже сейчас размышляем на тему рисования мобильных форм.

Ответить

10. akR00b 22 11.04.23 16:45 Сейчас в теме

спасибо

12. kirill_sh 1 11.04.23 21:57 Сейчас в теме

Классная тема, плюс автору в карму :)

16. Matveev_VS 156 12.04.23 09:32 Сейчас в теме

Отличная идея, интересно. Спасибо)

17. JohnyDeath 301 14.04.23 09:57 Сейчас в теме

Непонятно самое главное: откуда берутся все эти CSS и скрипты?
Надо гуглить в определенном месте? По каким ключевым словам?

18. acces969 327 15.04.23 10:58 Сейчас в теме

(17) Да, все гуглить - там ничего сложного нет, если начинать делать свое с нуля.

21. Viktor_Ermakov 354 17.04.23 15:18 Сейчас в теме

Я так и не понял чем этот инструмент облегчает работу, есть например
https://codepen.io/
Там можно сверстать страницу так же, и посмотреть.
Какую именно дополнительную пользу дает инструмент?

Ответить

25. acces969 327 02.05.23 08:08 Сейчас в теме

(21) тем, что создаваемая страничка нацелена на работу с 1С, и разрабатывать, проверять ее удобно тут же, в 1С. Это позволяет, помимо прочего, решить два важных вопроса:
1. Как web-станичка нарисуется и будет работать в 1С, а не в обычных веб-браузерах
2. Отладить взаимодействие и обмен данными, вызов функций между js и исполняемым кодом 1С.
Касаемое второго пункта замечу, что сейчас такого функционала в обработке нет, но я планирую его добавить в будущем. Сейчас же, тот, кому это нужно, может сам добавить этот функционал в обработку так, как ему удобно.

26. Viktor_Ermakov 354 02.05.23 18:14 Сейчас в теме

(25)

Касаемое второго пункта замечу, что сейчас такого функционала в обработке нет, но я планирую его добавить в будущем. Сейчас же, тот, кому это нужно, может сам добавить этот функционал в обработку так, как ему удобно.

Идею понял, спасибо за ответ.

22. adhocprog 1137 29.04.23 00:53 Сейчас в теме

Потратил 20 минут, но взлетело )

Прикрепленные файлы:

23. adhocprog 1137 29.04.23 00:54 Сейчас в теме

(0) Когда выйдет релиз с кнопками Сохранить/Открыть? )

24. adhocprog 1137 29.04.23 01:04 Сейчас в теме

Ниже добавил вариант css и html для тех, кому ближе велосипед )

Прикрепленные файлы:

Css2.txt
Div2.txt

Ответить

27. Viktor_Ermakov 354 02.05.23 18:19 Сейчас в теме

А не сравнивали свой инструмент и вот расширение https://github.com/cpr1c/tools_ui_1c ?
Там помимо разнообразных возможностей есть так же редактор HTML.

28. ip0593 20 10.05.23 13:25 Сейчас в теме

а каким редактором/сервисов для создания html и css пользуетесь?

29. Viktor_Ermakov 354 06.07.23 13:43 Сейчас в теме

(28) я исключительно VSC, оттуда переношу уже в например макет текстовый, а его уже подсовываю в HTML поле.

31. Светлый ум 351 28.08.23 11:48 Сейчас в теме

а для XML / JSON есть такие конструкторы ?

Оставьте свое сообщение

E-mail:

Автор:

Николай Волкотюк

acces969

Рейтинг: 327

Для получения уведомлений о новых публикациях автора подключите телеграм бот: Инфостарт бот

Публикация:

№ 1843000

Создание 10.04.23 16:30

Обновление 05.06.23 06:23

Статистика:

Просмотры 7524

Загрузки 142

Рейтинг 109

Комментарии 31

Характеристики:

Код открыт Да

Рубрики Инструментарий разработчика Работа с интерфейсом

Кому Программист

Тип файла Внешняя обработка (ert,epf)

Платформа Платформа 1С v8.3

Конфигурация Конфигурации 1cv8

Операционная система Не имеет значения

Страна Не имеет значения

Отрасль Не имеет значения

Налоги Не имеет значения

Вид учета Не имеет значения

Доступ к файлу Абонемент ($m)