RU2799988C2

RU2799988C2 - System and method for dynamic visualization of software elements

Info

Publication number: RU2799988C2
Application number: RU2021138979A
Authority: RU
Inventors: Егор Игоревич Гончаров
Original assignee: Общество С Ограниченной Ответственностью "Кейс Студио"
Filing date: 2021-12-27
Publication date: 2023-07-14

Abstract

FIELD: software.

SUBSTANCE: invention relates to a system and method for dynamic visualization of software elements. The system comprises a runtime including at least a runtime control rendering component; a runtime integration component configured to integrate the control into the software; and a module for interacting with the renderer in the runtime, configured to receive and pass the layout and includes a render component connected to the render component of the control in the runtime and configured to lazy load the functions of the control, and also contains the following connected to each other: an editing environment that includes at least the render component of the control in the editing environment; an integration component in the editing environment, configured to integrate the control into the visual editor; and a renderer interaction module in the editing environment, configured to create a layout and connected to the renderer interaction module in the runtime, connected to each other, and an interface with at least one control connected to the render component of the control in the runtime, and to a control rendering component in the editing environment and configured to generate lines of code.

EFFECT: reducing the time of output (rendering) of graphic elements to the interface.

18 cl, 6 dwg

Description

Область техникиTechnical field

[1] Настоящее изобретение относится к способам создания визуальных элементов программного обеспечения, позволяющих визуализировать элементы управления программного обеспечения.[1] The present invention relates to methods for creating visual software elements that allow visualization of software controls.

Уровень техникиState of the art

[2] С началом цифровизации многие бизнесы и пользователи начали создавать свои собственные приложения. Для этих целей зачастую привлекались внештатные разработки-программисты, услуги которых были недешевы, а для малых бизнесов - часто недоступными. К тому же, если такой разработчик-программист не предусмотрел удобную для пользователей, не владеющих навыками программирования, возможность внесения изменений в программное обеспечение (ПО), например, добавления туда новых товаров или обновления данных внутри ПО, то пользователям приходилось повторно обращаться за услугами разработчиков.[2] With the advent of digitalization, many businesses and users have begun to create their own applications. For these purposes, freelance programmers were often involved, whose services were not cheap, and for small businesses - often inaccessible. In addition, if such a developer-programmer did not provide a convenient for users who do not have programming skills, the ability to make changes to the software (software), for example, adding new products there or updating data inside the software, then users had to re-apply for the services of developers.

[3] Позднее появились платформы для конфигурации сайтов и приложений, не требующих знаний программирования. В них элементы управления (виджеты) являются визуализированными элементами в интерфейсе платформы. За счет этого пользователю, не владеющему навыком программирования, удобно и понятно применять визуализированные функциональные элементы для создания собственного программного обеспечения. Однако часто ПО, созданное при помощи таких платформ, сильно уступает ПО, написанному программистом-разработчиком: в скорости визуализации, в скорости отклика программы в ответ на взаимодействия пользователя с программой и в целом, в функциональности программного обеспечения.[3] Later, platforms appeared for configuring sites and applications that did not require programming knowledge. In them, controls (widgets) are rendered elements in the platform interface. Due to this, it is convenient and understandable for a user who does not have programming skills to use the visualized functional elements to create their own software. However, often the software created using such platforms is much inferior to the software written by the programmer-developer: in the speed of visualization, in the speed of the program's response to user interactions with the program, and in general, in the functionality of the software.

[4] В настоящее время существует множество различных систем для динамического создания визуальных элементов программного обеспечения или сайтов. Большинство из них включают две среды: среду редактирования, где создаются страницы сайта или программного обеспечения посредством перетаскивания виджетов или других визуальных элементов в пользовательский интерфейс среды редактирования, и среду выполнения, в которую интегрируют все использованные визуальные элементы среды редактирования посредством генерации машиночитаемого кода. Обычно интеграция производится после того, как пользователь, создавший программное обеспечение или сайт в среде редактирования нажал на кнопку компиляции. После нажатия на эту кнопку генерируется машиночитаемый код, включающий кодифицировано заданное программное обеспечение. При этом обычно вместе с визуальными элементами интегрируются все ссылки и связи между визуальными элементами, которые были предусмотрены в процессе разработки программного обеспечения или сайта в среде редактирования. Это значительно уменьшает скорость отображения страницы сайта или программного обеспечения.[4] There are currently many different systems for dynamically creating visual elements of software or websites. Most of them include two environments: an editing environment, where pages of a site or software are created by dragging widgets or other visual elements into the user interface of the editing environment, and a runtime environment, into which all used visual elements of the editing environment are integrated by generating machine-readable code. Usually, the integration is done after the user who created the software or site in the editing environment clicked on the compile button. Upon pressing this button, a machine-readable code is generated, including the codified predetermined software. In this case, usually, along with visual elements, all links and links between visual elements that were provided during the development of software or a site in an editing environment are integrated. This significantly reduces the page display speed of the site or software.

[5] Известно решение, описанное в патенте на изобретение US8533661B2 (опубл. 28.04.2008; МПК: G06F 9/44). В нем представляется веб-интерфейс для визуального моделирования процесса интеграции бизнеса или приложения путем выбора и связывания предварительно определенных визуальных элементов, представляющих процесс. Настраиваемое исполняемое программное приложение для конкретного предприятия («динамический механизм выполнения») автоматически создается программным обеспечением, работающим удаленно. Механизм динамической среды выполнения создается для включения общего шаблона приложения, предопределенных «стандартных» кодовых наборов, выбранных в зависимости от моделируемого процесса, и кодового набора профиля данных, который включает ввод, предоставляемый пользователем для настройки стандартных компонентов для конкретного процесса интеграции конкретное предприятие. Шаблон приложения и выбранные кодовые наборы могут быть впоследствии загружены для предоставления исполняемого программного приложения динамического механизма выполнения, которое настроено для выполнения определенного процесса интеграции для конкретного предприятия. Таким образом, программное обеспечение динамического механизма выполнения создается автоматически за пределами вычислительной сети предприятия, но настраивается для конкретного предприятия до того, как оно поступит в вычислительную сеть предприятия или другую сеть назначения. Одним из недостатков этого решения является то, что визуальный элемент изначально существует только в среде редактирования, а затем, посредством перевода его в машиночитаемый код, отображается в среде выполнения. Это значительно замедляет процесс отображения визуального элемента в среде выполнения. Еще одним недостатком является то, что каждый визуальный элемент в режиме выполнения сразу связан со всеми ссылками и программными элементами, которые были в него заложены в режиме редактирования. За счет этого процесс отображения в среде выполнения еще больше замедляется, т.к. каждый визуальный элемент может нести в себе большое количество ссылок. Также из второго недостатка вытекает еще одно отличие от настоящего изобретения, заключающееся в том, что в вышеописанном решении не предусматривается формирование и присвоение карт ключ-значение для организации связи между метаданными и визуальными элементами. Еще один недостаток заключается в том, что не предусматривается предрасчет минимальных и максимальных размеров визуальных элементов перед их использованием. Это может приводить к неверной разметке и к некорректному отображению, особенно в процессе перевода в машиночитаемый код.[5] The solution described in the patent for the invention US8533661B2 (publ. 28.04.2008; IPC: G06F 9/44) is known. It provides a web interface for visually modeling a business or application integration process by selecting and linking predefined visual elements that represent the process. A custom enterprise-specific executable software application (“dynamic execution engine”) is automatically created by the software running remotely. The dynamic runtime engine is built to include a common application template, predefined "standard" code sets chosen based on the process being modeled, and a data profile code set that includes input provided by the user to customize the standard components for a particular enterprise-specific integration process. The application template and selected code sets may subsequently be loaded to provide an executable dynamic execution engine software application that is configured to perform a particular enterprise-specific integration process. Thus, the dynamic execution engine software is automatically created outside of the enterprise computer network, but configured for a particular enterprise before it enters the enterprise computer network or other destination network. One of the disadvantages of this solution is that the visual element initially exists only in the editing environment, and then, by translating it into machine-readable code, is displayed in the runtime environment. This significantly slows down the process of rendering the visual element at runtime. Another disadvantage is that each visual element in runtime is immediately associated with all the links and programming elements that were put into it in edit mode. Due to this, the display process in the runtime environment is even more slowed down, because. each visual element can carry a large number of links. Also from the second disadvantage follows another difference from the present invention, which consists in the fact that the above solution does not provide for the formation and assignment of key-value maps to organize the relationship between metadata and visual elements. Another drawback is that it does not provide for precalculation of the minimum and maximum sizes of visual elements before using them. This can lead to incorrect markup and incorrect display, especially during translation into machine-readable code.

[6] В другом патенте на изобретение US7774745B2 (опубл. 29.12.2005; МПК: G06F 9/44) описываются способы и устройства, включая программные продукты, для создания исполняемых сущностей в среде визуального моделирования. Метод включает в себя предоставление сущностей языка графического моделирования во время разработки для использования в программе визуального моделирования, получение входных данных, определяющих определение приложения во время разработки как включающих, по крайней мере, первую и вторую сущности во время разработки в качестве компонентов версии приложения во время разработки, и создание сущностей среды выполнения для приложения. Сущности языка графического моделирования среды разработки включают в себя первую и вторую сущности среды разработки, а первая сущность среды разработки имеет связанный первый объект среды выполнения, предварительно скомпилированный для первой платформы. Входные данные включают в себя конфигурацию свойств первой и второй сущностей среды разработки, а создание сущностей среды выполнения включает установку свойств первой сущности среды выполнения в соответствии с конфигурацией свойств первой сущности среды разработки. Одним из недостатков этого решения является то, что визуальный элемент изначально существует только в среде редактирования, а затем, посредством перевода его в машиночитаемый код, отображается в среде выполнения. Это влечет за собой то, что визуальный элемент в среде редактирования и в среде выполнения являются технически разными объектами, следовательно в момент создания в среде редактирования визуальный элемент может отличаться от того, что получится в итоге в среде выполнения. Еще одним недостатком является то, что каждый визуальный элемент в режиме выполнения сразу связан со всеми компилируемыми функциями и программными элементами, которые были в него заложены в режиме редактирования. За счет этого процесс отображения в среде выполнения еще больше замедляется, т.к. каждый визуальный элемент может нести в себе большое количество компилируемых функций. Также из второго недостатка вытекает еще одно отличие от настоящего изобретения, заключающееся в том, что в вышеописанном решении не предусматривается формирование и присвоение карт ключ-значение для организации связи между метаданными и визуальными элементами. Еще один недостаток заключается в том, что не предусматривается предрасчет минимальных и максимальных размеров визуальных элементов перед их использованием. Это может приводить к неверной разметке и к некорректному отображению, особенно в процессе перевода в машиночитаемый код.[6] Another patent for the invention US7774745B2 (publ. 12/29/2005; IPC: G06F 9/44) describes methods and devices, including software products, for creating executable entities in a visual modeling environment. The method includes providing graphical modeling language entities at design time for use in a visual modeling program, obtaining input data defining a design-time application definition as including at least the first and second design-time entities as components of a design-time version of the application, and generating runtime entities for the application. The development environment graphical modeling language entities include first and second development environment entities, and the first development environment entity has an associated first runtime environment object pre-compiled for the first platform. The input includes a property configuration of the first and second development environment entities, and creating the runtime entities includes setting properties of the first runtime entity according to a property configuration of the first development environment entity. One of the disadvantages of this solution is that the visual element initially exists only in the editing environment, and then, by translating it into machine-readable code, is displayed in the runtime environment. This entails that the visual element in the editing environment and in the runtime are technically different objects, therefore, at the time of creation in the editing environment, the visual element may differ from what will end up in the runtime. Another disadvantage is that each visual element in runtime is immediately associated with all the compiled functions and programming elements that were put into it in edit mode. Due to this, the display process in the runtime environment is even more slowed down, because. each visual element can carry a large number of compiled functions. Also from the second disadvantage follows another difference from the present invention, which consists in the fact that the above solution does not provide for the formation and assignment of key-value maps to organize the relationship between metadata and visual elements. Another drawback is that it does not provide for precalculation of the minimum and maximum sizes of visual elements before using them. This can lead to incorrect markup and incorrect display, especially during translation into machine-readable code.

[7] В патенте на изобретение US9582254B2 (опубл. 20.05.2015; МПК: G06F 9/44; G06Q 10/06) описываются варианты систем и способов для создания компонентов среды выполнения в различных аппаратных и программных компьютерных системах. Более конкретно, определенные варианты осуществления настоящего изобретения описывают интерфейс среды разработки, с помощью которого приложения могут быть спроектированы, созданы и развернуты в соответствии с базовыми исходными системами компьютерной системы. Компоненты можно выбирать, настраивать и связывать вместе, чтобы сформировать функциональное сквозное приложение, основанное на множестве базовых технологий внутри системы. После завершения проектирования приложения метаданные приложения и/или компоненты среды выполнения могут быть сгенерированы и развернуты в компьютерной системе. Во время выполнения такие компоненты среды выполнения, развернутые в системе, могут взаимодействовать для получения и обработки потоков событий из различных источников событий, анализа входящих данных и создания объектов логических транзакций, предупреждений и других ответов с использованием различных исходных систем. Одним из недостатков этого решения является то, что визуальный элемент изначально существует только в среде редактирования, а затем, посредством перевода его в машиночитаемый код, отображается в среде выполнения. Это влечет за собой то, что визуальный элемент в среде редактирования и в среде выполнения являются технически разными объектами, следовательно в момент создания в среде редактирования визуальный элемент может отличаться от того, что получится в итоге в среде выполнения. Еще одним недостатком является то, что каждый визуальный элемент в режиме выполнения сразу связан со всеми компилируемыми функциями и программными элементами, которые были в него заложены в режиме редактирования. За счет этого процесс отображения в среде выполнения еще больше замедляется, т.к. каждый визуальный элемент может нести в себе большое количество компилируемых функций. Также из второго недостатка вытекает еще одно отличие от настоящего изобретения, заключающееся в том, что в вышеописанном решении не предусматривается формирование и присвоение карт ключ-значение для организации связи между метаданными и визуальными элементами. Еще один недостаток заключается в том, что не предусматривается предрасчет минимальных и максимальных размеров визуальных элементов перед их использованием. Это может приводить к неверной разметке и к некорректному отображению, особенно в процессе перевода в машиночитаемый код.[7] US9582254B2 (published May 20, 2015; IPC: G06F 9/44; G06Q 10/06) describes variants of systems and methods for creating runtime components in various hardware and software computer systems. More specifically, certain embodiments of the present invention describe a development environment interface with which applications can be designed, built, and deployed in accordance with the underlying source systems of a computer system. Components can be selected, configured, and linked together to form a functional end-to-end application based on a variety of underlying technologies within the system. After application design is complete, application metadata and/or runtime components may be generated and deployed to a computer system. At runtime, such runtime components deployed on a system can interact to receive and process event streams from different event sources, parse incoming data, and create logical transaction objects, alerts, and other responses using different source systems. One of the disadvantages of this solution is that the visual element initially exists only in the editing environment, and then, by translating it into machine-readable code, is displayed in the runtime environment. This entails that the visual element in the editing environment and in the runtime are technically different objects, therefore, at the time of creation in the editing environment, the visual element may differ from what will end up in the runtime. Another disadvantage is that each visual element in runtime is immediately associated with all the compiled functions and programming elements that were put into it in edit mode. Due to this, the display process in the runtime environment is even more slowed down, because. each visual element can carry a large number of compiled functions. Also from the second disadvantage follows another difference from the present invention, which consists in the fact that the above solution does not provide for the formation and assignment of key-value maps to organize the relationship between metadata and visual elements. Another drawback is that it does not provide for precalculation of the minimum and maximum sizes of visual elements before using them. This can lead to incorrect markup and incorrect display, especially during translation into machine-readable code.

[8] В патенте на изобретение US7412658B2 (опубл. 12.11.2003; МПК: G06F 3/00) описывается система моделирования для универсальной спецификации пользовательских интерфейсов. Система предоставляет средства для определения пользовательских интерфейсов, включая очень сложные и динамические пользовательские интерфейсы, способом, который не зависит от любого контекста реализации. Система моделирования основывается на удобном для пользователя визуальном представлении пользовательского интерфейса через постепенно детализированные спецификации структурных и поведенческих аспектов частей пользовательского интерфейса, пока не будет достигнуто строгое определение пользовательского интерфейса во всех его контекстах использования. Используя информацию, зафиксированную в модели, можно создавать инструменты, которые автоматически генерируют полностью рабочий код пользовательского интерфейса. Одним из недостатков этого решения является то, что визуальный элемент изначально существует только в среде редактирования, а затем, посредством перевода его в машиночитаемый код, отображается в среде выполнения. Это влечет за собой то, что визуальный элемент в среде редактирования и в среде выполнения являются технически разными объектами, следовательно в момент создания в среде редактирования визуальный элемент может отличаться от того, что получится в итоге в среде выполнения. Еще одним недостатком является то, что каждый визуальный элемент в режиме выполнения сразу связан со всеми компилируемыми функциями и программными элементами, которые были в него заложены в режиме редактирования. За счет этого процесс отображения в среде выполнения еще больше замедляется, т.к. каждый визуальный элемент может нести в себе большое количество компилируемых функций. Еще один недостаток заключается в том, что не предусматривается предрасчет минимальных и максимальных размеров визуальных элементов перед их использованием. Это может приводить к неверной разметке и к некорректному отображению, особенно в процессе перевода в машиночитаемый код.[8] In the invention patent US7412658B2 (publ. 12.11.2003; IPC: G06F 3/00) describes a modeling system for the universal specification of user interfaces. The system provides the means to define user interfaces, including very complex and dynamic user interfaces, in a way that is independent of any implementation context. The modeling system builds on a user-friendly visual representation of the user interface through progressively detailed specifications of the structural and behavioral aspects of the parts of the user interface until a rigorous definition of the user interface is achieved in all its contexts of use. Using the information captured in the model, you can create tools that automatically generate fully working user interface code. One of the disadvantages of this solution is that the visual element initially exists only in the editing environment, and then, by translating it into machine-readable code, is displayed in the runtime environment. This entails that the visual element in the editing environment and in the runtime are technically different objects, therefore, at the time of creation in the editing environment, the visual element may differ from what will end up in the runtime. Another disadvantage is that each visual element in runtime is immediately associated with all the compiled functions and programming elements that were put into it in edit mode. Due to this, the display process in the runtime environment is even more slowed down, because. each visual element can carry a large number of compiled functions. Another drawback is that it does not provide for precalculation of the minimum and maximum sizes of visual elements before using them. This can lead to incorrect markup and incorrect display, especially during translation into machine-readable code.

[9] Еще один патент на изобретение US7493594B2 (опубл. 14.03.2005; МПК: G06F 9/44) описывает систему и способ для обеспечения системы пользовательского интерфейса для разработки приложения, имеющего первый компонент с дескрипторами, выраженными на языке структурированных определений, и второй компонент, выраженный как последовательность инструкций. Отдельные компоненты взаимодействуют для обработки сообщений в среде выполнения устройства, полученных от источника данных по сети. Компонентные приложения содержат компоненты данных, компоненты представления и компоненты сообщений, которые написаны в коде XML. Компонентные приложения дополнительно содержат компоненты рабочего процесса, которые написаны в подмножестве ECMAScript и дополнены кодом XML. Система пользовательского интерфейса содержит первый модуль, такой как средство просмотра или редактор, для разработки определений первого компонента посредством взаимодействия с моделью данных, которая обеспечивает постоянное состояние приложения. Система пользовательского интерфейса содержит второй модуль для разработки инструкций второго компонента посредством взаимодействия с моделью данных. и серверный соединитель для предоставления информации об отображении сообщений источника данных первому модулю. Первый модуль генерирует определения на основе информации отображения. Первый и второй компоненты, разработанные соответствующими первым и вторым модулями, включены в приложение вместе с другими компонентами, где это применимо. Одним из недостатков этого решения является то, что визуальный элемент изначально существует только в среде редактирования, а затем, посредством перевода его в машиночитаемый код, отображается в среде выполнения. Это влечет за собой то, что визуальный элемент в среде редактирования и в среде выполнения являются технически разными объектами, следовательно в момент создания в среде редактирования визуальный элемент может отличаться от того, что получится в итоге в среде выполнения. Еще одним недостатком является то, что каждый визуальный элемент в режиме выполнения сразу связан со всеми компилируемыми функциями и программными элементами, которые были в него заложены в режиме редактирования. За счет этого процесс отображения в среде выполнения еще больше замедляется, т.к. каждый визуальный элемент может нести в себе большое количество компилируемых функций. Еще один недостаток заключается в том, что не предусматривается предрасчет минимальных и максимальных размеров визуальных элементов перед их использованием. Это может приводить к неверной разметке и к некорректному отображению, особенно в процессе перевода в машиночитаемый код.[9] Another US7493594B2 (publ. 03/14/2005; IPC: G06F 9/44) describes a system and method for providing a user interface system for developing an application having a first component with descriptors expressed in structured definition language and a second component expressed as a sequence of instructions. The individual components cooperate to process the device runtime messages received from the data source over the network. Component applications contain data components, presentation components, and message components that are written in XML code. Component applications additionally contain workflow components that are written in a subset of ECMAScript and augmented with XML code. The user interface system includes a first module, such as a viewer or editor, for developing first component definitions by interacting with a data model that provides a persistent application state. The user interface system includes a second module for developing instructions of the second component by interacting with the data model. and a server connector for providing data source message mapping information to the first module. The first module generates definitions based on the mapping information. The first and second components, developed by the respective first and second modules, are included in the application along with other components, where applicable. One of the disadvantages of this solution is that the visual element initially exists only in the editing environment, and then, by translating it into machine-readable code, is displayed in the runtime environment. This entails that the visual element in the editing environment and in the runtime are technically different objects, therefore, at the time of creation in the editing environment, the visual element may differ from what will end up in the runtime. Another disadvantage is that each visual element in runtime is immediately associated with all the compiled functions and programming elements that were put into it in edit mode. Due to this, the display process in the runtime environment is even more slowed down, because. each visual element can carry a large number of compiled functions. Another drawback is that it does not provide for precalculation of the minimum and maximum sizes of visual elements before using them. This can lead to incorrect markup and incorrect display, especially during translation into machine-readable code.

[10] Иным близким аналогом является патент на изобретение US10846060B2 (опубл. 24.11.2020; МПК: G06F 8/34; G06F 8/38; G06F 3/30482; G06F 8/35; G06F 16/23). В нем описываются система и способ построения декларативного одностраничного веб-приложения (Single Page Web Application, SPA), которые можно использовать для создания сложного, полнофункционального SPA без излишнего кодирования. Конструктор SPA содержит набор правил, облегчающих создание SPA. Набор правил в построителе SPA может включать в себя набор элементов пользовательского интерфейса и модель конечного автомата (finite-state machine model) с набором правил зависимости данных, набором правил визуализации пользовательского интерфейса и набором правил потока данных выполнения действий. Построитель SPA может также использовать фиктивные данные (mock data - «данные-имитация»), которые позволяют пользователю создавать и проверять потоки взаимодействия с пользователем SPA в среде редактирования. Одним из недостатков этого решения является то, что визуальный элемент изначально существует только в среде редактирования, а затем, посредством перевода его в машиночитаемый код, отображается в среде выполнения. Это влечет за собой то, что визуальный элемент в среде редактирования и в среде выполнения являются технически разными объектами, следовательно в момент создания в среде редактирования визуальный элемент может отличаться от того, что получится в итоге в среде выполнения. Еще один недостаток заключается в том, что не предусматривается предрасчет минимальных и максимальных размеров визуальных элементов перед их использованием. Это может приводить к неверной разметке и к некорректному отображению, особенно в процессе перевода в машиночитаемый код.[10] Another close analogue is the patent for the invention US10846060B2 (publ. 11/24/2020; IPC: G06F 8/34; G06F 8/38; G06F 3/30482; G06F 8/35; G06F 16/23). It describes a system and method for building a declarative Single Page Web Application (SPA) that can be used to create a complex, full-featured SPA without excessive coding. The SPA constructor contains a set of rules that make it easy to create a SPA. The set of rules in the SPA builder may include a set of user interface elements and a finite-state machine model with a set of data dependency rules, a set of user interface rendering rules, and a set of action execution data flow rules. The SPA Builder can also use mock data, which allows the user to create and test SPA user interaction flows in the editing environment. One of the disadvantages of this solution is that the visual element initially exists only in the editing environment, and then, by translating it into machine-readable code, is displayed in the runtime environment. This entails that the visual element in the editing environment and in the runtime are technically different objects, therefore, at the time of creation in the editing environment, the visual element may differ from what will end up in the runtime. Another drawback is that it does not provide for precalculation of the minimum and maximum sizes of visual elements before using them. This can lead to incorrect markup and incorrect display, especially during translation into machine-readable code.

Сущность изобретенияThe essence of the invention

[11] Задачей настоящего изобретения является создание и разработка системы и способа динамической визуализации элементов программного обеспечения, предназначенных для создания сложного, полнофункционального программного обеспечения без излишнего кодирования и обеспечивающих значительное уменьшение времени компиляции программного обеспечения.[11] It is an object of the present invention to provide and develop a system and method for dynamically rendering software elements to create complex, full-featured software without excessive coding and to significantly reduce software compilation time.

[12] Указанная задача решается благодаря достижению такого технического результата, как создание системы и способа визуализации элементов программного обеспечения, способных обеспечить создание сложных и полнофункциональных интерфейсов программного обеспечения без излишнего кодирования, а также высокую скорость компиляции интерфейса в программном обеспечении, за счет периодических малых затрат вычислительных мощностей. Указанная задача достигается в том числе, но не ограничиваясь, благодаря:[12] This problem is solved due to the achievement of such a technical result as the creation of a system and a method for visualizing software elements that can provide the creation of complex and full-featured software interfaces without excessive coding, as well as a high speed of compiling the interface in the software, due to periodic low costs of computing power. This objective is achieved, among other things, but not limited to:

• реализации элементов управления одновременно в двух средах: редактирования и выполнения;• implementation of controls simultaneously in two environments: editing and execution;

• предварительному расчету минимальных размеров визуальных элементов в среде редактирования;• preliminary calculation of the minimum dimensions of visual elements in the editing environment;

• интеграции метаданных и функций элемента управления в элемент управления в момент взаимодействия пользователя с ним.• Integrating the metadata and functionality of the control into the control at the time the user interacts with it.

[13] Более полно, технический результат достигается описанной системой динамической визуализации элементов программного обеспечения, включающей среду выполнения, среду редактирования и интерфейс с по крайней мере одним элементом управления. При этом среда выполнения включает подключенные друг к другу компонент визуализации в среде выполнения, компонент интеграции в среде выполнения, сконфигурированный для интеграции элемента управления в программное обеспечение, и модуль взаимодействия с визуализатором в среде выполнения, сконфигурированный с возможностью получения и передачи макета. Среда редактирования включает подключенные друг к другу компонент визуализации в среде редактирования, компонент интеграции в среде редактирования, сконфигурированный для интеграции элемента управления в визуальный редактор, и модуль взаимодействия с визуализатором в среде редактирования, сконфигурированный с возможностью создания макета и подключенный к модулю взаимодействия с визуализатором в среде выполнения. Интерфейс с по крайней мере одним элементом управления, подключенным к компоненту визуализации в среде выполнения и к компоненту визуализации в среде редактирования и сконфигурированным с возможностью генерации строк кода.[13] More fully, the technical result is achieved by the described system for dynamic visualization of software elements, including a runtime environment, an editing environment and an interface with at least one control element. Wherein, the runtime includes connected to each other a visualization component in the runtime environment, an integration component in the runtime environment, configured to integrate the control into the software, and a module for interacting with the renderer in the runtime environment, configured to receive and pass the layout. The editing environment includes a visualization component connected to each other in the editing environment, an integration component in the editing environment configured to integrate the control into the visual editor, and a visualizer interaction module in the editing environment configured to create a layout and connected to the visualizer interaction module in the runtime environment. An interface with at least one control connected to a render component in the runtime and to a render component in the edit environment and configured to generate lines of code.

[14] При этом среда редактирования необходима для внесения изменений в программное обеспечения, причем по крайней мере визуальных изменений. Компонент визуализации в среде редактирования необходим для визуализации внесенных в программное обеспечение изменений, а компонент интеграции в среде редактирования необходим для взаимодействия с элементом управления в среде редактирования. Среда выполнения необходима для визуализации программного обеспечения, а именно его итоговой и промежуточных версий. Компонент визуализации в среде выполнения необходим для визуализации внесенных в программное обеспечение изменений, а компонент интеграции в среде выполнения необходим для взаимодействия с элементов управления в созданном программном обеспечении. Модуль взаимодействия с визуализатором в среде редактирования необходим для создания макета с по крайней мере одним элементом управления для последующей визуализации этого макета в среде редактирования, а также для передачи макета модулю взаимодействия с визуализатором в среде выполнения. При этом сам модуль взаимодействия с визуализатором в среде выполнения необходим для получения макета и его передачи компоненту визуализации в среде выполнения. Сам элемент управления необходим для его использования в процессе создания программного обеспечения. А то, что он сконфигурирован с возможностью генерации строк кода, необходимо для преобразования визуализированного представления программного обеспечения в машиночитаемый код, а также ускорить процесс визуализации в среде редактирования и в среде выполнения. Интерфейс при этом необходим для реализации элементов управления одновременно в двух средах: редактирования и выполнения.[14] However, the editing environment is necessary to make changes to the software, and at least visual changes. The renderer component in the editing environment is required to render the changes made to the software, and the integration component in the editing environment is required to interact with the control in the editing environment. The runtime environment is necessary for the visualization of the software, namely its final and intermediate versions. The runtime rendering component is required to render the changes made to the software, while the runtime integration component is required to interact with the controls in the generated software. The renderer interface module in the editing environment is required to create a layout with at least one control to render that layout later in the editing environment, and to pass the layout to the renderer interface module in the runtime. At the same time, the module for interacting with the renderer in the runtime environment is necessary to receive the layout and pass it to the visualization component in the runtime environment. The control itself is necessary for its use in the process of creating software. And the fact that it is configured to generate lines of code is necessary to convert the rendered representation of the software into machine-readable code, as well as speed up the rendering process in the editing environment and in the runtime environment. The interface is necessary for the implementation of controls simultaneously in two environments: editing and execution.

[15] Модуль взаимодействия с визуализатором в среде редактирования может дополнительно включать компонент преобразования действий пользователя. При его включении в систему его можно подключить к компоненту визуализации в среде редактирования. Он может служить для обработки действий пользователя. Также модуль взаимодействия с визуализатором в среде редактирования может дополнительно включать компонент организации доступа к интерфейсу, подключенный к компоненту преобразования действий пользователя. Это может позволить организовать доступ к интерфейсу с элементами управления в среде редактирования. Он также может накапливать внесенные изменения для того, чтобы любое изменение могло быть как применено, так и отменено.[15] The module for interacting with the visualizer in the editing environment may further include a user action transformation component. When included in the system, it can be connected to the visualization component in the editing environment. It can serve to process user actions. Also, the module for interacting with the visualizer in the editing environment may additionally include a component for organizing access to the interface connected to the component for transforming user actions. This may allow access to the interface with controls in the editing environment. It can also accumulate changes made so that any change can be both applied and undone.

[16] Также модуль взаимодействия с визуализатором в среде редактирования может дополнительно включать компонент хранения элементов управления, подключенный к компоненту организации доступа к интерфейсу. Это может быть полезно для хранения всех созданных и/или сгенерированных элементов управления. Таким образом будет возможно элементы управления, созданные или сгенерированные ранее, сохранить и впоследствии добавить к другому элементу управления/форме/программному обеспечению. Также он может позволить хранить логику и функции конкретного элемента управления.[16] Also, the module for interacting with the visualizer in the editing environment may additionally include a component for storing controls connected to the component for organizing access to the interface. This can be useful for storing all created and/or generated controls. In this way, it will be possible for controls created or generated earlier to be saved and subsequently added to another control/form/software. It can also allow you to store the logic and functions of a particular control.

[17] Модуль взаимодействия с визуализатором в среде выполнения, в свою очередь, может дополнительно включать компонент загрузки, подключенный к компоненту визуализации в среде выполнения и сконфигурированный для конвертации функций для визуализации и для загрузки функций в элемент управления, а также для приема созданных макетов и их отложенной передачи. Этот компонент может позволить добавлять логику в элемент управления в среде выполнения.[17] The runtime renderer interaction module, in turn, may further include a loading component connected to the runtime renderer component and configured to convert functions for rendering and to load functions into the control, as well as to receive generated layouts and lazily pass them. This component can allow logic to be added to the control at runtime.

[18] Также модуль взаимодействия с визуализатором в среде выполнения может дополнительно включать компонент рендеринга, подключенный к компоненту загрузки и к компоненту визуализации в среде выполнения. Он может позволить производить отложенный рендеринг функций элемента управления, что таже может еще больше уменьшить время компиляции программного обеспечения.[18] Also, the runtime renderer interaction module may further include a rendering component connected to the loading component and to the renderer component in the runtime. It can allow delayed rendering of the control's functions, which can further reduce software compilation time.

[19] Среда редактирования может дополнительно включать компонент хранения и обработки данных. Он может быть подключен к компоненту хранения элементов управления. Компонент хранения и обработки данных может предоставлять функциональные возможности для взаимодействия с различными типами данных.[19] The editing environment may further include a data storage and processing component. It can be connected to a control storage component. The data storage and processing component may provide functionality for interacting with various types of data.

[20] Также система может дополнительно включать базу данных элементов управления, включающее по крайней мере один элемент управления. Это может позволить пользователю интегрировать в программное обеспечение ранее созданные элементы управления или ранее преднастроенные элементы управления, что может облегчить создание программного обеспечения, а также ускорить процесс его создания.[20] Also, the system may further include a database of controls, including at least one control. This may allow the user to integrate previously created controls or previously pre-configured controls into the software, which may make it easier to create software as well as speed up the process of creating it.

[21] Также технический результат достигается способом динамической визуализации элементов программного обеспечения, по которому сначала добавляют элемент управления в среду редактирования. После добавления, при помощи элемента управления генерируют код и передают его в интерфейс. При помощи интерфейса полученный код передают в компонент визуализации в среде редактирования. После этого получают информацию от компонента интеграции в среде редактирования о месте визуализации элемента управления в среде редактирования. Далее создают макет, включающий добавленный элемент управления, а в среде редактирования визуализируют созданный макет в среде редактирования. После этого интегрируют элемент управления в визуальный редактор. Далее созданный макет передают в модуль взаимодействия с визуализатором в среде выполнения и визуализируют полученный макет в среде выполнения. После этого интегрируют элемент управления в программное обеспечение.[21] Also, the technical result is achieved by a method of dynamic visualization of software elements, according to which the control element is first added to the editing environment. Once added, code is generated using the control and passed to the interface. Using the interface, the resulting code is passed to the visualization component in the editing environment. After that, information is received from the integration component in the editing environment about the place where the control is rendered in the editing environment. Next, a layout is created that includes the added control element, and in the editing environment, the created layout is rendered in the editing environment. After that, the control element is integrated into the visual editor. Next, the created layout is passed to the module for interacting with the visualizer in the runtime environment and the resulting layout is rendered in the runtime environment. After that, the control element is integrated into the software.

[22] При этом этап добавления элемента управления в среду редактирования необходим для того, чтобы выбрать элемент управления, который станет частью программного обеспечения, или добавить созданный элемент управления в него. Этап генерации кода элементом управления необходим для преобразования человекочитаемого элемента управления в машиночитаемый код, а этап его передачи интерфейсом в среду редактирования и среду выполнения необходим для организации взаимодействия с элементом управления в среде редактирования и в среде выполнения. Этап создания макета необходим для размещения элемента управления в конкретном месте макета перед его визуализацией. А этап его передачи в среду выполнения необходим для того, чтобы в среде редактирования и в среде выполнения визуальное воплощение элемента управления было отображено одинаково. Этап визуализации элемента управления в среде редактирования и в среде выполнения необходим для того, чтобы элемент управления был виден в обеих средах. А этап интеграции элемента управления необходим того, чтобы с видимым в обеих средах элементом управления можно было взаимодействовать.[22] In this case, the step of adding a control to the editing environment is necessary in order to select the control that will become part of the software, or add the created control to it. The code generation step by the control is necessary to convert the human-readable control into machine-readable code, and the step of passing it by the interface to the editing environment and the runtime is necessary to organize interaction with the control in the editing environment and in the runtime. The layout step is required to position the control at a specific location in the layout before it is rendered. And the stage of passing it to the runtime is necessary so that the visual embodiment of the control is displayed in the same way in the editing environment and in the runtime. The rendering step of the control in the editing environment and in the runtime is necessary for the control to be visible in both environments. And the stage of integrating the control is necessary so that the control visible in both environments can be interacted with.

[23] На этапе создания макета могут детектировать добавление пользователем элемента управления при помощи компонента обработки действий пользователя. После этого могут сохранять добавление пользователем элемента управления и применять это действие.[23] In the layout step, the user adding a control can be detected using the user action processing component. The user's addition of the control can then be saved and the action can be applied.

[24] После передачи созданного макета в модуль взаимодействия с визуализатором в среде выполнения могут получать созданный макет при помощи компонента загрузки, передавать полученный макет компоненту рендеринга. При помощи компонента рендеринга могут получать строки кода, сгенерированные элементом управления, включающимся в полученный макет. После этого полученный макет со строками кода могут передавать в компонент визуализации в среде выполнения.[24] After passing the created layout to the renderer interface module, the runtime can receive the created layout using the loading component, pass the resulting layout to the rendering component. With the help of the render component, you can get the lines of code generated by the control that is included in the resulting layout. After that, the resulting layout with lines of code can be passed to the render component at runtime.

[25] После этапа интеграции элемента управления в программное обеспечение в среде редактирования пользователь может взаимодействовать с элементом управления, при этом могут обрабатывать действия пользователя при помощи компонента преобразования действий пользователя. Это может служить для обработки действий пользователя, а именно для их преобразования в машиночитаемый код и анализа того, была ли пользователем добавлена функция в элемент управления и/или был ли добавлен сам элемент управления.[25] After the step of integrating the control into the software in the editing environment, the user can interact with the control, and the user's actions can be processed using the user action transformation component. This may serve to process user actions, namely to convert them into machine-readable code and analyze whether the user has added a function to the control and/or whether the control itself has been added.

[26] После интеграции элемента управления в среду редактирования могут генерировать функцию для элемента управления при помощи интерфейса и передавать данные о функции компоненту организации доступа к интерфейсу. Это может позволить добавлять логику в элемент управления в среде редактирования.[26] After integrating the control into the editing environment, a function for the control can be generated using the interface and pass data about the function to the interface accessor. This can allow logic to be added to the control in the editing environment.

[27] В случае если при помощи интерфейса добавили функцию в элемент управления, передают данные о функции компоненту организации доступа к интерфейсу. Сгенерированные функции также могут сохранять при помощи компонента организации доступа к интерфейсу. Это может позволить хранить и накапливать функции для того, чтобы любое изменение могло быть как применено, так и отменено.[27] In the event that a function was added to the control using the interface, data about the function is passed to the component of organizing access to the interface. Generated functions can also be stored using the interface access organization component. This can allow functions to be stored and accumulated so that any change can be both applied and undone.

[28] Также сгенерированную функцию могут передавать в компонент хранения элементов управления и обновлять созданный макет посредством элементов управления с функциями. Это может позволить хранить логику и функции конкретного элемента управления.[28] Also, the generated function can be passed to the control storage component and update the generated layout via controls with functions. This may allow the logic and functionality of a particular control to be stored.

[29] После этапа обновления созданного макета могут передавать макет с загруженными функциями в компонент загрузки, а затем передавать загруженные функции в компонент рендеринга при помощи компонента загрузки при взаимодействии пользователя с элементом управления в среде выполнения. Это может позволить осуществлять отложенный рендеринг функций элементов управления только при необходимости.[29] After the stage of updating the generated layout, a layout with loaded functions can be passed to the loading component, and then the loaded functions can be passed to the render component using the loading component when the user interacts with the control in the runtime. This may allow delayed rendering of control functions only when needed.

[30] После передачи загруженных функций в компонент рендеринга могут получать строки кода, сгенерированные элементом управления при помощи компонента рендеринга и передавать полученный макет со строками кода в компонент визуализации в среде выполнения, при помощи которого, в свою очередь, могут визуализировать обновленный макет.[30] After passing the loaded functions to the render component, they can receive the lines of code generated by the control using the render component and pass the resulting layout with lines of code to the render component in the runtime, which, in turn, can render the updated layout.

[31] При этом перед этапом созданного макета могут дополнительно загружать функции из компонента хранения и обработки данных в компонент хранения элементов управления. Это может предоставить функциональные возможности для взаимодействия с различными типами данных.[31] At the same time, before the stage of the created layout, functions can be additionally loaded from the data storage and processing component into the control storage component. This can provide functionality for interacting with different types of data.

Описание чертежейDescription of drawings

[32] На Фиг. 1 представлена схема системы динамической визуализации элемента программного обеспечения согласно настоящему изобретению.[32] FIG. 1 is a diagram of a software element dynamic rendering system according to the present invention.

[33] На Фиг. 2 представлена схема системы динамической визуализации элемента программного обеспечения с дополнительными компонентами согласно настоящему изобретению.[33] FIG. 2 is a diagram of a software element dynamic rendering system with additional components according to the present invention.

[34] На Фиг. 3 представлена блок-схема, иллюстрирующая способ динамической визуализации элемента программного обеспечения, согласно настоящему изобретению.[34] FIG. 3 is a flowchart illustrating a method for dynamically rendering a software element in accordance with the present invention.

[35] На Фиг. 4 представлена блок-схема, иллюстрирующая дополнительные этапы способа динамической визуализации элемента программного обеспечения производящиеся в среде редактирования, согласно настоящему изобретению.[35] FIG. 4 is a flowchart illustrating additional steps in the method for dynamically rendering a software element in an editing environment, in accordance with the present invention.

[36] На Фиг. 5 представлена блок-схема, иллюстрирующая дополнительные этапы способа динамической визуализации элемента программного обеспечения производящиеся в среде выполнения, согласно настоящему изобретению.[36] FIG. 5 is a flowchart illustrating the additional steps of a method for dynamically rendering a software element in a runtime environment in accordance with the present invention.

[37] На Фиг. 6 представлена блок-схема, иллюстрирующая вариант воплощения способа визуализации элементов программного обеспечения для системы визуализации элементов программного обеспечения, показанной на Фиг. 2, согласно настоящему изобретению.[37] FIG. 6 is a flow diagram illustrating an embodiment of the software element rendering method for the software element rendering system shown in FIG. 2 according to the present invention.

Подробное описаниеDetailed description

[38] В приведенном ниже подробном описании реализации изобретения приведены многочисленные детали реализации, призванные обеспечить отчетливое понимание настоящего изобретения. Однако, квалифицированному в предметной области специалисту очевидно, каким образом можно использовать настоящее изобретение, как с данными деталями реализации, так и без них. В других случаях, хорошо известные методы, процедуры и компоненты не описаны подробно, чтобы не затруднять излишнее понимание особенностей настоящего изобретения.[38] In the following detailed description of the implementation of the invention, numerous implementation details are provided to provide a clear understanding of the present invention. However, it will be obvious to one skilled in the art how the present invention can be used, both with and without these implementation details. In other cases, well-known methods, procedures and components are not described in detail so as not to obscure the features of the present invention.

[39] Кроме того, из приведенного изложения ясно, что изобретение не ограничивается приведенной реализацией. Многочисленные возможные модификации, изменения, вариации и замены, сохраняющие суть и форму настоящего изобретения, очевидны для квалифицированных в предметной области специалистов.[39] In addition, from the foregoing it is clear that the invention is not limited to the above implementation. Numerous possible modifications, alterations, variations, and substitutions that retain the spirit and form of the present invention will be apparent to those skilled in the art.

[40] На Фиг. 1 представлена схема системы динамической визуализации элемента программного обеспечения согласно настоящему изобретению. Система динамической визуализации элемента программного обеспечения включает среду редактирования 100, среду выполнения 200 и интерфейс 2 с по крайней мере одним элементом управления 1. При этом среда редактирования 100 включает компонент визуализации в среде редактирования 101, компонент интеграции в среде редактирования 102 и модуль взаимодействия с визуализатором в среде редактирования 103, подключенные друг к другу. Среда выполнения 200, в свою очередь, включает компонент визуализации в среде выполнения 201, компонент интеграции в среде выполнения 202 и модуль взаимодействия с визуализатором в среде выполнения 203, подключенные друг к другу. Компоненты интеграции в среде редактирования 102 и в среде выполнения 202 сконфигурированы для интеграции элемента управления 1 в визуальный (графический) редактор и в программное обеспечение соответственно. Сам же элемент управления 1 подключен к компоненту визуализации в среде выполнения 201 и к компоненту визуализации в среде редактирования 101. При этом элемент управления 1 сконфигурирован с возможностью генерации строк кода. Под строками кода понимается машиночитаемый код, причем код может генерироваться на любом языке программирования, предназначенном для создания программного обеспечения, например, Python, Java, Javascript, C#, Си (С) и С++, PHP, R, Objective-C, Swift, MATLAB, HTML, XHTML, XML и др. Интерфейс 2 позволяет реализовать элементы управления 1 одновременно в двух средах: редактирования 100 и выполнения 200. Настоящая система может быть реализована на клиентском сервере, облачной архитектуре или на любых других компьютерных архитектурах, находящихся в пределах объемов раскрытия изобретения. Например, система может быть реализована как автономная компьютерная система или в программном обеспечении как сервисная архитектура. В представленных материалах применение системы в большей степени описано со стороны применения системы в программном обеспечении в качестве сервисной архитектуры, однако для специалиста в этой области техники очевиден способ ее внедрения и в другие компьютерные системы.[40] In FIG. 1 is a diagram of a software element dynamic rendering system according to the present invention. The software element dynamic rendering system includes an editing environment 100 , a runtime environment 200 , and an interface 2 with at least one control element 1 . Meanwhile, the editing environment 100 includes a visualization component in the editing environment 101 , an integration component in the editing environment 102 , and a visualizer interaction module in the editing environment 103 connected to each other. The runtime 200 in turn includes a runtime rendering component 201 , a runtime integration component 202 , and a runtime renderer interface module 203 connected to each other. The integration components in the editing environment 102 and in the runtime environment 202 are configured to integrate the control 1 into the visual editor and into the software, respectively. The control 1 itself is connected to the rendering component in the runtime environment 201 and to the rendering component in the editing environment 101 . In this case, the control element 1 is configured to generate lines of code. Code lines are understood as machine-readable code, and the code can be generated in any programming language intended for creating software, for example, Python, Java, Javascript, C#, C (C) and C++, PHP, R, Objective-C, Swift, MATLAB, HTML, XHTML, XML, etc. Interface 2 allows you to implement controls 1 simultaneously in two environments: editing 100 and execution 200 . The present system may be implemented on a client server, cloud architecture, or any other computer architectures within the scope of the invention. For example, the system may be implemented as a standalone computer system or in software as a service architecture. In the presented materials, the application of the system is largely described from the side of using the system in software as a service architecture, however, for a person skilled in this field of technology, the method of its implementation in other computer systems is obvious.

[41] Элемент управления 1 может представлять из себя виджет. По своей сути, это графические элементы управления («виджеты» GUI), являющиеся примерами многократно используемых модульных компонентов. Они могут применяться в совокупности для создания более сложного приложения, что позволяет программистам создавать пользовательские интерфейсы, комбинируя простые, более мелкие компоненты. Каждый элемент управления 1 может включать заранее в него заложенные функции. При этом эти функции также могут иметь возможность редактирования. Все элементы управления 1 при этом могут храниться в базе данных элементов управления. База данных элементов управления может являться внутренней базой данных системы или внешней базой данных.[41] Control 1 may be a widget. At their core, these are graphical controls (“GUI widgets”) that are examples of reusable modular components. They can be used in combination to create a more complex application, allowing programmers to create user interfaces by combining simple, smaller components. Each control element 1 may include pre-built functions. However, these functions can also be editable. All controls 1 can be stored in the control database. The control database can be an internal system database or an external database.

[42] Среда редактирования 100 является визуальным редактором, позволяющим создавать формы на основе элементов управления 1. Основными элементами среды редактирования 100, отвечающими за визуализацию и интеграцию элементов управления в визуальный редактор, являются компонент визуализации в среде редактирования 101 и компонент интеграции в среде редактирования 102.[42] The editing environment 100 is a visual editor that allows you to create forms based on controls 1 . The main elements of the editing environment 100 responsible for rendering and integrating controls into the visual editor are the rendering component in the editing environment 101 and the integration component in the editing environment 102 .

[43] Компонент визуализации в среде редактирования 101 предназначен для визуализации по крайней мере одного элемента управления 1 в визуальном редакторе. Также компонент визуализации в среде редактирования 101 может визуализировать другие дополнительные элементы пользовательского интерфейса (user interface elements - UI-элементы), необходимые для осуществления редактирования элементов управления 1 в среде редактирования 100. Например, он 101 может визуализировать меню, панель с инструментами и функциями редактирования и др. Меню, в свою очередь, может, например, включать переключение между проектами программного обеспечения, инструкцию по использованию среды редактирования, набор преднастроенных форм и элементов управления 1. На панели инструментов редактирования могут быть предусмотрены инструменты добавления элемента управления 1, копирования элемента управления 1, сохранения элемента управления 1, удаления элемента управления 1, выделения элемента управления 1, перемещения элемента управления 1 и инструменты рисования, подобные инструментам графического редактора.[43] The rendering component in the editing environment 101 is designed to render at least one control 1 in the visual editor. Also, the rendering component in the editing environment 101 can render other additional user interface elements (user interface elements - UI-elements) necessary for editing the controls 1 in the editing environment 100 . For example, it 101 can visualize a menu, a panel with editing tools and functions, etc. The menu, in turn, can, for example, include switching between software projects, instructions for using the editing environment, a set of pre-configured forms and controls 1 . The editing toolbar may provide tools for adding a control 1 , copying a control 1 , saving a control 1 , deleting a control 1 , selecting a control 1 , moving a control 1 , and drawing tools similar to those of a graphics editor.

[44] Компонент интеграции в среде редактирования 102 представляет собой специальный компонент, организующий связь между формой или элементом управления 1, реализованными системой, и визуальным редактором (средой редактирования 100), использующим данную форму. Он 102 организует контейнер для отображения компонента визуализации в среде редактирования 101 и обеспечивает интерфейс взаимодействия между ним 101 и средой редактирования 100. Предназначен для размещения на странице визуального редактора. Это позволяет встраивать визуализированные при помощи компонента визуализации в среде редактирования 101 элементы управления 1 в интерфейс любого программного обеспечения. При этом компонент визуализации 101 и компонент интеграции 102 элемента управления в среду редактирования должны быть подключены друг к другу напрямую.[44] The integration component in the editing environment 102 is a special component that organizes the connection between the form or control 1 implemented by the system and the visual editor (editing environment 100 ) using this form. It 102 organizes a container to display the render component in the editing environment 101 and provides an interface for interaction between it 101 and the editing environment 100 . Designed to be placed on the page of the visual editor. This allows you to embed controls 1 rendered by the visualization component in the editing environment 101 into the interface of any software. In this case, the visualization component 101 and the integration component 102 of the control element into the editing environment must be connected to each other directly.

[45] Среда выполнения 200 представляет собой среду компиляции. В ней происходит интеграция и визуализация форм или элементов управления 1 с последующей возможностью с ними взаимодействовать. Формы при этом состоят из элементов управления 1. Для ускорения процесса интеграции элементов управления 1 в программное обеспечение в среде выполнения 200 применяется специальный подход к визуализации элементов управления 1, предназначенный для сокращения затрат вычислительных мощностей на визуализацию элемента управления 1. Целевой показатель 150 миллисекунд на форму из 1000 элементов управления 1, скомпонованных в любой последовательности.[45] The runtime 200 is a compilation environment. It integrates and renders forms or controls 1 with the subsequent ability to interact with them. Forms in this case consist of controls 1 . To speed up the process of integrating the controls 1 into the software, the runtime 200 takes a special approach to rendering the controls 1 to reduce the computational cost of rendering the control 1 . The target is 150 milliseconds per form of 1000 controls 1 arranged in any order.

[46] В среде выполнения 200 компонент визуализации 201 отвечает за организацию интерфейса взаимодействия между элементами управления и пользовательскими настройками. А компонент интеграции в среде выполнения 202 организует связь между формой, реализованной на основе элементов управления 1, или элементов управления 1 и программным обеспечением, использующим данную форму. Он 202 организует контейнер для визуализации компонентом визуализации в среде выполнения 201 и обеспечивает интерфейс взаимодействия между компонентом визуализации 201 и программным обеспечением.[46] In the runtime 200, the rendering component 201 is responsible for organizing the interaction interface between controls and user settings. And the integration component in the runtime 202 organizes the connection between the form implemented on the basis of controls 1 or controls 1 and the software using this form. It 202 organizes a container for rendering by the render component in the runtime 201 and provides an interaction interface between the render component 201 and the software.

[47] Интерфейс 2 представляет собой жесткий интерфейс взаимодействия элементов управления 1 со средами редактирования 100 и выполнения 200. Интерфейс 2 может представлять собой интерфейс прикладного программирования. Интерфейс прикладного программирования представляет собой функциональный интерфейс прикладного программирования (application programming interface, API) по изменению модели. Он представляет собой набор методов (функций), который пользователь может использовать для доступа к функциональности программного компонента (программы, модуля, библиотеки). API является важной абстракцией, описывающей функциональность «в чистом виде», безотносительно того, как реализована эта функциональность. Программные компоненты взаимодействуют друг с другом посредством API. При этом обычно компоненты образуют иерархию - высокоуровневые компоненты используют API низкоуровневых компонентов, а те, в свою очередь, используют API еще более низкоуровневых компонентов. Пользователь может задавать в интерфейсе прикладного программирования сигнатуру функции в качестве части общего объявления функции, позволяющей средствами трансляции идентифицировать функцию среди других. Также он может задавать семантику функции, т.е. описание того, какой исполнительный код будет реализовывать эта функция. Семантика функции включает в себя описание того, что является результатом вычисления функции, как и от чего этот результат зависит. Обычно результат выполнения зависит только от значений аргументов функции, но в некоторых модулях есть понятие состояния. Тогда результат функции может зависеть от этого состояния, и, кроме того, результатом может стать изменение состояния. Логика этих зависимостей и изменений относится к семантике функции. Полным описанием семантики функций является исполняемый код функции или математическое определение функции.[47] Interface2represents a rigid interface for the interaction of controls1 with editing environments100 and implementation200. Interface2 may be an application programming interface. Application programming interface is a functional application programming interface (API) for changing the model. It is a set of methods (functions) that the user can use to access the functionality of a software component (program, module, library). An API is an important abstraction that describes "pure" functionality, regardless of how that functionality is implemented. Software components interact with each other through APIs. In this case, components usually form a hierarchy - high-level components use the API of low-level components, and those, in turn, use the API of even lower-level components. A user may specify a function signature in an application programming interface as part of a general function declaration, allowing translation tools to identify the function among others. It can also set the semantics of a function, i.e. a description of what executing code will implement this function. The semantics of a function includes a description of what is the result of the evaluation of the function, how and on what this result depends. Usually the execution result depends only on the values of the function arguments, but in some modules there is a concept of state. Then the result of the function may depend on this state, and, in addition, the result may be a state change. The logic behind these dependencies and changes is related to the semantics of the function. A complete description of the semantics of functions is the executable code of the function or the mathematical definition of the function.

[48] Интерфейс прикладного программирования может быть реализован различными способами, подходящими для пользователей с разными уровнями навыков программирования. Например, для пользователей, не имеющих знаний в области логики и программирования, могут быть заданы заранее сгенерированные функции, которые они могут использовать для создания программного обеспечения. Заранее сгенерированные функции могут быть заранее встроенными в элементы управления 1 форм. Такой пользователь может просто добавить эти функции в элемент управления 1 путем, например, перетаскивания функции в элемент управления 1.[48] The application programming interface may be implemented in various ways suitable for users with different levels of programming skills. For example, users without knowledge of logic and programming can be given pre-generated functions that they can use to create software. Pre-generated functions can be pre-built into form controls 1 . Such a user can simply add these functions to control 1 by, for example, dragging the function to control 1 .

[49] В другом варианте интерфейс прикладного программирования 2 может быть реализован для пользователей, обладающих знаниями в логике, но не обладающих знаниями в программировании. Это может быть реализовано, например, посредством блок-схем или диаграмм. То есть, логика элемента управления 1 может задаваться в виде блок-схемы для обозначения последовательности действий элемента управления 1, а также триггерные события, которые могут инициировать переход к тому или иному действию элемента управления 1.[49] Alternatively, the application programming interface 2 may be implemented for users with knowledge of logic but no knowledge of programming. This can be implemented, for example, by means of block diagrams or diagrams. That is, the logic of control 1 can be defined in the form of a flowchart to indicate the sequence of actions of control 1 , as well as trigger events that can initiate a transition to one or another action of control 1 .

[50] Еще одним вариантом реализации интерфейса прикладного программирования может являться окно для написания кода. Этот вариант может быть удобен для пользователей, имеющих навыки программирования. Причем код может быть написан на любом языке программирования, предназначенном для создания программного обеспечения, например, Python, Java, Javascript, C#, Си (С) и С++, PHP, R, Objective-C, Swift, MATLAB, HTML, XHTML, XML и др.[50] Another implementation of the application programming interface may be a window for writing code. This option may be convenient for users with programming skills. Moreover, the code can be written in any programming language intended for creating software, for example, Python, Java, Javascript, C#, C (C) and C++, PHP, R, Objective-C, Swift, MATLAB, HTML, XHTML, XML, etc.

[51] При этом интерфейс 2 сконфигурирован с возможностью контроля того, какие функции могут быть добавлены в конкретный элемент управления 1. [51] In this case, the interface 2 is configured to control which functions can be added to a particular control 1.

[52] Интерфейс 2 взаимодействует со средой редактирования 100 и со средой выполнения 200 по-разному. После получения строк кода от элемента управления 1 интерфейс 2 передает код в компоненты визуализации в среде редактирования 101 и в среде выполнения 201 в отдельности. При этом, после получения строк кода в компонент визуализации в среде редактирования 101 интерфейс 2 дополняет функционал элементу управления 1. Например, при добавлении элемента управления 1 в среду редактирования 100 интерфейс 2 создает для него 1 ячейку. Благодаря этой ячейке возможно перемещение элемента управления 1 по макету программного обеспечения в среде редактирования 100. В среде выполнения 200 ячейки для элементов управления 1 не создают.[52] Interface 2 interacts with the editing environment 100 and with the execution environment 200 in different ways. After receiving lines of code from control 1 , interface 2 passes the code to the render components in the editing environment 101 and the runtime 201 separately. At the same time, after receiving lines of code into the visualization component in the editing environment 101, interface 2 supplements the functionality of control 1 . For example, when control 1 is added to edit environment 100, interface 2 creates 1 cell for it. This cell makes it possible to move control 1 around the software layout in the editing environment 100 . At runtime 200, cells for controls 1 are not created.

[53] Система динамической визуализации элементов программного обеспечения, показанная на Фиг. 1, работает следующим образом. Пользователь добавляет элемент управления 1 в интерфейс среды редактирования 100. В момент добавления элемент управления 1 генерирует строки кода в интерфейс 2. Интерфейс 2 передает код среде редактирования 100 и среде выполнения 200 и взаимодействует с ними. Далее компонент визуализации в среде редактирования 101 визуализирует элемент управления 1 в среде редактирования 100, а именно в интерфейсе визуального редактора. Причем, перед визуализацией получают информацию от компонента интеграции в среде редактирования 102 о том, в каком месте визуализировать элемент управления 1 в среде редактирования 100, создают макет с по крайней мере одним элементом управления 1 и передают макет компоненту визуализации в среде редактирования 101 при помощи модуля взаимодействия с визуализатором в среде редактирования 103. Компонент интеграции в среде редактирования 102 интегрирует элемент управления 1 в среду редактирования 100, а именно в интерфейс визуального редактора. При этом у пользователя появляется возможность взаимодействия с элементов управления 1 в интерфейсе визуального редактора, т.е. становится возможным вносить изменения в элемент управления. Приблизительно в одно время, спустя какое-то время или одновременно с визуализацией элемента управления 1 в среде редактирования 100 визуализируют элемент управления 1 в среде выполнения 200, а именно в интерфейсе программного обеспечения, при помощи компонента визуализации в среде выполнения 201. Причем, перед визуализацией при помощи модуля взаимодействия с визуализатором в среде выполнения 203 получают макет с по крайней мере одним элементом управления 1 от модуля взаимодействия с визуализатором в среде редактирования 203 и передают макет компоненту визуализации в среде выполнения 201.. Компонент интеграции в среде выполнения 202 интегрирует элемент управления 1 в среду выполнения 200, а именно в интерфейс программного обеспечения. При этом у пользователя программного обеспечения появляется возможность взаимодействовать с элементом управления 1 в программном обеспечении.[53] The dynamic software element rendering system shown in FIG. 1 works as follows. The user adds control 1 to the editing environment interface 100 . When added, control 1 generates lines of code to interface 2 . Interface 2 passes code to the editing environment 100 and the runtime 200 and interacts with them. Next, the rendering component in the editing environment 101 renders the control 1 in the editing environment 100 , namely the visual editor interface. Moreover, before rendering, they receive information from the integration component in the editing environment 102 about where to render the control 1 in the editing environment 100 , create a layout with at least one control 1 and transfer the layout to the visualization component in the editing environment 101 using the module for interacting with the visualizer in the editing environment 103 . The integration component in the editing environment 102 integrates the control 1 into the editing environment 100 , namely the visual editor interface. In this case, the user has the opportunity to interact with controls 1 in the interface of the visual editor, i.e. it becomes possible to make changes to the control. Approximately at the same time, after some time or simultaneously with the rendering of the control 1 in the editing environment 100 , the control 1 is rendered in the runtime 200 , namely in the software interface, using the rendering component in the runtime 201 . Moreover , before rendering using the renderer interaction module in the runtime 203 , a layout with at least one control element 1 is received from the renderer interaction module in the editing environment 203 and the layout is passed to the rendering component in the runtime environment 201 . This gives the user of the software the ability to interact with the control 1 in the software.

[54] Под взаимодействием интерфейса 2 со средой редактирования 100 и средой выполнения 200 понимается дополнение или преобразование строк кода, сгенерированных элементом управления 1 разными способами для каждой из сред 100, 200. Таким образом, элемент управления 1 в среде редактирования 100 и в среде выполнения 200, имея при этом тот же внешний вид и тот же внутренний кол, имеет разный функционал в каждой из сред 100, 200, то есть интерфейс 2 создает разные протоколы взаимодействия пользователя с элементом управления 1.[54] Interaction of interface 2 with editing environment 100 and runtime 200 is understood to mean adding or transforming lines of code generated by control 1 in different ways for each of environments 100 , 200 . Thus, control 1 in editing environment 100 and in runtime 200 , while having the same appearance and the same internal stake, has a different functionality in each of the environments 100 , 200 , that is, interface 2 creates different protocols for user interaction with control 1 .

[55] Вышеописанные компоненты и элементу системы могут быть реализованы на вычислительных устройствах, включающих по крайней мере процессор и память, дисплей для отображения пользовательского интерфейса (UI) веб-браузера или UI компоновщика программного обеспечения пользователя. Предпочтительно, чтобы вычислительное устройство также имело доступ к беспроводным каналам связи для взаимодействия с сервером. Например, вычислительное устройство может быть устройством смартфона, таким как Apple iPhone или операционная система Android, базовое устройство, персональный компьютер, портативный компьютер, планшет и т.п.[55] The above-described system components and elements may be implemented on computing devices including at least a processor and memory, a display for displaying a web browser user interface (UI), or a user software linker UI. Preferably, the computing device also has access to wireless communication channels to communicate with the server. For example, the computing device may be a smartphone device such as an Apple iPhone or an Android operating system, a base device, a personal computer, a laptop computer, a tablet, or the like.

[56] Для взаимодействия с системой вычислительно устройство может пользоваться каналами связи, включающими, например, одно или несколько проводных соединений, таких как Ethernet, и беспроводных соединений, таких как сотовая цифровая сеть передачи данных, компьютерная сеть, сеть Wi-Fi и т.п. Канал связи может использовать различные известные протоколы связи и данных. Например, в одном варианте осуществления канал связи может быть TCP / IP и HTTPS или HTTP. Кроме того, канал связи может также передавать данные, имеющие другие форматы, такие как данные JSON.[56] To interact with the system, the computing device may use communication channels including, for example, one or more wired connections, such as Ethernet, and wireless connections, such as a cellular digital data network, a computer network, a Wi-Fi network, and the like. The communication channel may use various known communication and data protocols. For example, in one embodiment, the communication channel may be TCP/IP and HTTPS or HTTP. In addition, the communication channel may also transmit data having other formats, such as JSON data.

[57] На Фиг. 2 представлена схема системы динамической визуализации элементов программного обеспечения с дополнительными элементами согласно настоящему изобретению. Среда редактирования 100 может дополнительно включать компонент преобразования действий пользователя 104, компонент организации доступа к интерфейсу 105 и/или компонент хранения элементов управления 106, в зависимости от назначения и поставленной задачи системы. При использовании сочетания всех этих трех компонент (104, 105, 106) наиболее предпочтительным является подключение компонента преобразования действий пользователя 104 к компоненту визуализации в среде редактирования 101 и к компоненту организации доступа к интерфейсу 105. Компонент организации доступа к интерфейсу 105, в свою очередь, может быть дополнительно подключен к компоненту хранения элементов управления 106. А компонент хранения элементов управления 106 может быть подключен к компоненту визуализации в среде редактирования 101, замыкая цепочку взаимодействия компонент. Среда выполнения 200 может дополнительно включать компонент загрузки 204 и компонент рендеринга 205, подключенные друг к другу и к компоненту визуализации в среде выполнения 101. Дополнительно система может включать компонент хранения и обработки данных 107. Компонент хранения и обработки данных 107 может быть подключен к компоненту хранения элементов управления 106.[57] FIG. 2 is a diagram of a system for dynamic visualization of software elements with additional elements according to the present invention. Editing environment 100 may additionally include a user action transformation component 104 , an interface access organization component 105 , and/or a control storage component 106 , depending on the purpose and task of the system. When using a combination of all three of these components ( 104 , 105 , 106 ) , it is most preferable to connect the user action transformation component 104 to the visualization component in the editing environment 101 and to the interface access component 105 . The interface access organization component 105 , in turn, can be additionally connected to the control storage component 106 . And the control storage component 106 can be connected to the render component in the edit environment 101 , completing the component interaction chain. The runtime 200 may further include a load component 204 and a render component 205 connected to each other and to the render component in the runtime 101 . Additionally, the system may include a data storage and processing component 107 . The data storage and processing component 107 can be connected to the control storage component 106 .

[58] Компонент преобразования действий пользователя 104 выполняет обработку действий пользователя с помощью подключаемых функций. Компонент преобразования действий пользователя 104 может напрямую влиять на компонент визуализации в среде редактирования 101, например, предоставляя пользователю подсказку при добавлении новых элементов управления 1 в форму. Также он может служить для инициирования триггерного события, используемого в функциях, генерируемых в компоненте организации доступа к интерфейсу105. Для пользовательского взаимодействия с элементом управления 1 пользователь может использовать пользовательские устройства ввода для ввода пользователем информации, такие как клавиатура, мышь и т.д. Возможно применение голосового управления.[58] The user action transformation component 104 performs user action processing using plug-in functions. The user action transformation component 104 can directly influence the rendering component in the editing environment 101 , for example by providing a hint to the user when adding new controls 1 to the form. It can also be used to initiate a trigger event used in functions generated in the 105 interface accessor. For user interaction with control 1, the user may use user input devices for user input, such as a keyboard, mouse, and so on. Voice control is possible.

[59] Компонент преобразования действий пользователя 104 преобразовывает действия пользователя в класс behavior (рус. поведение). Behavior - это класс, обрабатывающий конкретные действия пользователя перехватываемые при помощи компонента преобразования действий пользователя 103. Например, может использоваться behavior, обрабатывающий добавление элементов управления 1 на форму, а также behavior изменения размера элемента управления 1, размера всей формы и т.д. Behavior является базовым классом для обобщенных определяемых пользователем реакций на произвольные условия и события. Это может быть реализовано посредством инициализации нового экземпляра класса behavior и присвоением ему определенных свойств и методов, зависящих от действия пользователя. [ 59] The user action conversion component 104 converts the user's actions into a behavior class. Behavior is a class that handles specific user actions intercepted by the user behavior transformation component 103 . For example, a behavior can be used that handles adding controls 1 to the form, as well as a behavior for changing the size of control 1 , the size of the entire form, etc. Behavior is the base class for generalized user-defined reactions to arbitrary conditions and events. This can be done by initializing a new instance of the behavior class and assigning certain properties and methods to it depending on the user's action.

[60] Например, в качестве свойства может применяться возвращение типа элементов управления 1, с которым может быть связано это действие behavior. В другом варианте, behavior может возвращать или задавать элемент управления 1, содержащий свойства, которые будут являться целевыми для привязанных свойств, относящихся к этому элементу управления 1.[60] For example, the return type of controls 1 can be used as a property, with which this behavior can be associated. Alternatively, behavior may return or set a control 1 containing the properties that will be the target of bound properties related to that control 1 .

[61] В качестве методов behavior могут использоваться нижеописанные методы. Например, применение привязок к элементу управления 1, содержащему свойства, которые будут являться целевыми для привязанных свойств, относящихся к этому элементу управления 1. Возможно также предусмотреть удаление ранее заданных привязок, присваивание привязок свойству и отмена применения всех заданных ранее привязок. Также в качестве метода может использоваться присвоение значения свойству и резервное хранение для свойств, разрешающих привязку к элементу управления 1. При помощи метода это значение также может очищаться или возвращаться. Может быть предусмотрен метод, возвращающий логическую «1» в случае, если целевое свойство behavior существует или задано.[61] The following methods can be used as behavior methods. For example, applying bindings to a control 1 that contains properties that will be the target of bound properties related to that control 1 . It is also possible to provide for deleting previously defined bindings, assigning bindings to a property, and unapplying all previously defined bindings. It can also be used as a method to assign a value to a property and fall back for properties that allow binding to a control 1 . This value can also be cleared or returned using the method. A method may be provided that returns a boolean "1" if the target behavior property exists or is set.

[62] Компонент преобразования действий пользователя 104 также может распознавать, была ли пользователем добавлена новая функция в элемент управления. В случае если была, то компонент преобразования действий пользователя может передавать функцию в компонент организации доступа к интерфейсу 105.[62] The user action transformation component 104 can also recognize whether a new function has been added to the control by the user. If it was, then the user action transformation component can pass the function to the component of organizing access to the interface 105 .

[63] В частности, компонент преобразования действий пользователя 104 может детектировать добавление пользователем элемента управления 1 в среду редактирования 100, в результате чего будет триггериться визуализация элемента управления 1 в среде редактирования 100.[63] In particular, the user action transformation component 104 can detect that the user has added control 1 to the editing environment 100 , which will trigger the rendering of control 1 in the editing environment 100 .

[64] Компонент организации доступа к интерфейсу 105 может быть выполнен с возможностью хранения функций и/или действий пользователя и их накапливания. Таким образом, в интерфейсе организовывается возможность применения и/или отмены функций/действий пользователя. Компонент организации доступа к интерфейсу 105 может накапливать изменения, внесенные пользователем в функции элементов управления 1 в виде списка операций, произведенных пользователем, для того чтобы любое изменение могло быть применено, отменено или возвращено (undo/redo). Одним из примеров хранение действий пользователя является хранение действия пользователя по добавлению элемента управления 1 в среду редактирования 100.[64] The access organization component of the interface 105 may be configured to store functions and/or user actions and accumulate them. Thus, the interface organizes the possibility of applying and/or canceling user functions/actions. The interface accessor 105 may store changes made by the user to the functions of the controls 1 as a list of operations performed by the user so that any change can be applied, undone or redoed (undo/redo). One example of storing user actions is storing the user's action to add control 1 to edit environment 100 .

[65] При взаимодействии компонента преобразования действий пользователя 104 и компонента организации доступа к интерфейсу 105 может происходить следующее. Пользователь добавляет элементу правления 1 в среду редактирования 100. Компонент преобразования действий пользователя 104 детектирует добавление элемента управления 1 и оповещает компонент организации доступа к интерфейсу 105 о том, что элемент управления 1 был добавлен. Компонент организации доступа к интерфейсу 105 сохраняет действие по добавлению этого элемента управления 1.[65] The interaction between the user action transformation component 104 and the interface access organization component 105 may include the following. The user adds control element 1 to edit environment 100 . The user action transformation component 104 detects the addition of control 1 and notifies the interface accessor 105 that control 1 has been added. The interface accessor 105 saves the action of adding this control to 1 .

[66] Компонент хранения элементов управления 106 отвечает за загрузку, хранение и сохранение элементов управления 1. При этом компонент хранения элементов управления 106 может создавать макет, включающий элемент управления 1, с привязкой элементу управления 1 к конкретному месту на макете. Каждый визуализированный при помощи компонента визуализации в среде редактирования 101 элемент управления 1 привязан к своему элементу управления 1. Это позволяет при изменении элемента управления 1, т.е. при добавлении к нему функций, передавать информацию компоненту визуализации в среде редактирования 101 для перестроения визуализации элемента управления 1 в режиме реального времени. Элемент управления 1 может быть представлен, например, в виде json-структуры. Таким образом, пользователь сможет сохранять созданные или сгенерированные элементы управления 1 для последующего их использование в других элементах управления 1/формах или в другом программном обеспечении. Пользователи, которые не создают и не генерируют функции сами, смогут добавлять в свои элементы управления 1 ранее созданные и сохраненные элементу управления 1, сохраненные компонентом хранения элементов управления 106. Они смогут это делать путем перетаскивания функции на элемент управления 1 или при помощи специальной кнопки «добавить элементу правления», содержащейся в панели инструментов редактирования интерфейса 2. Элементы управления 1 могут сохранять в базе данных элементов управления (на Фигурах не показана).[66] The control storage component 106 is responsible for loading, storing and saving controls 1 . In this case, the control storage component 106 can create a layout that includes control 1 , with control 1 tied to a specific location on the layout. Each control 1 rendered by the rendering component in the editing environment 101 is bound to its own control 1 . This allows when the control 1 changes, i.e. when adding functions to it, pass information to the visualization component in the editing environment 101 to rebuild the visualization of control 1 in real time. Control 1 can be represented, for example, as a json structure. Thus, the user will be able to save the created or generated controls 1 for later use in other controls 1 /forms or in other software. Users who do not create or generate functions themselves will be able to add to their controls 1 previously created and saved controls 1 saved by the control storage component 106 . They can do this by dragging a function onto control 1 or by using the special "add to control" button contained in the interface editing toolbar 2 . The controls 1 can be stored in a database of controls (not shown in the Figures).

[67] В предпочтительном варианте добавление логики и функций элементу управления 1 для пользователя предполагает его взаимодействие с редакторами свойств элементов управления 1, а также создания функций элемента управления 1 на основе визуального программирования при помощи интерфейса прикладного программирования.[67] In the preferred embodiment, adding logic and functionality to the control 1 for the user involves interacting with the property editors of the controls 1 , as well as creating control 1 functions based on visual programming using an application programming interface.

[68] При взаимодействии компонента преобразования действий пользователя 104, компонента организации доступа к интерфейсу 105 и компонента хранения элементов управления 106 может происходить следующее. Пользователь добавляет элементу правления 1 в среду редактирования 100. Компонент преобразования действий пользователя 104 детектирует добавление элемента управления 1 и оповещает компонент организации доступа к интерфейсу 105 о том, что элемент управления 1 был добавлен. Компонент организации доступа к интерфейсу 105 сохраняет действие по добавлению этого элемента управления 1 и передает элемент управления 1 в компонент хранения элементов управления 106, а также информацию о действии пользователя, включающую, в частности, место расположения элемента управления 1. Компонент хранения элементов управления 106 сохраняет элемент управления 1 и создает макет, включающий этот элемент управления 1, с привязкой элементу управления 1 к конкретному месту на макете на основании о месте расположения элемента управления 1.[68] The interaction of the user action transformation component 104 , the interface access organization component 105 , and the control storage component 106 can occur as follows. The user adds control element 1 to edit environment 100 . The user action transformation component 104 detects the addition of control 1 and notifies the interface accessor 105 that control 1 has been added. The interface accessor component 105 stores the action of adding this control 1 and passes the control 1 to the control storage component 106 , as well as information about the user's action, including, in particular, the location of the control 1 . The control store component 106 stores control 1 and creates a layout including that control 1 , anchoring control 1 to a specific location on the layout based on the location of control 1 .

[69] При этом возможно также исключение компонента организации доступа к интерфейсу 105 из системы. В таком случае, компонент преобразования действий пользователя 104 может передавать информацию о действиях пользователя и элементы управления 1 напрямую компоненту хранения элементов управления 106. Также в этом случае не будут накапливаться действия пользователя, что немного снизит требуемую вычислительную мощность системы, однако лишит пользователя возможности отменять, возвращать и применять ранее накопленные действия.[69] In this case, it is also possible to exclude the component of the organization of access to the interface 105 from the system. In such a case, the user action mapping component 104 can pass the user action information and controls 1 directly to the control storage component 106 . Also, in this case, user actions will not be accumulated, which will slightly reduce the required computing power of the system, but will deprive the user of the ability to cancel, redo, and apply previously accumulated actions.

[70] Компонент хранения и обработки данных 107 при этом может преобразовывать функции в конкретный типизованный набор данных, стандартный для элементов управления 1. Это может быть нужно, например, если функции были написаны на человекочитаемом языке и/или если они были описаны на отличном от используемого элементами управления 1 языке программирования. Таким образом, в макет компонентом хранения элементов управления 106 будет добавляться только функции, написанные при помощи определенного языка программирования.[70] The data storage and processing component 107 can then convert functions into a specific typed data set, standard for controls 1 . This may be necessary, for example, if the functions were written in a human-readable language and/or if they were described in a programming language other than that used by the controls 1 . Thus, only functions written using a specific programming language will be added to the layout by the control storage component 106 .

[71] Компонент загрузки 204, включающийся в среду выполнения 200, отвечает за получение макета, включающего по крайней мере один элемент управления 1, функций для визуализации и жизненного цикла элемента управления 1, включающего структуру элемента управления 1 и пользовательские настройки (функции), от компонента хранения элементов управления 106. Также компонент загрузки 204 может производить сохранение и загрузку новых функций в результате взаимодействия пользователя с элементом управления 1 в программном обеспечении. Компонент загрузки 204 может осуществлять взаимодействие только с компонентом визуализации в среде выполнения 201. Компонент загрузки 204 при получении функций внешних источников, преобразовывает их в машиночитаемый язык элементов управления 1. Также им 204 может быть реализована обратная операция, а именно преобразование функций элементов управления в машиночитаемый или человекочитаемый язык, понятный внешнему источнику. Под внешним источником может пониматься пользователь, стороння программа, сторонний интерфейс прикладного программирования, компонент организации доступа к интерфейсу 105 в случае, если функции в нем были созданы не на машиночитаемом языке элементов управления 1, и др.[71] The loading component 204 , included in the runtime 200 , is responsible for obtaining the layout, including at least one control 1 , functions for rendering and the life cycle of the control 1 , including the structure of the control 1 and user settings (functions), from the control storage component 106 . Also, the loading component 204 may store and load new functions as a result of user interaction with the control 1 in the software. The download component 204 can only interact with the rendering component in the runtime 201 . The download component 204, upon receiving the functions of external sources, converts them into a machine-readable language of the controls 1 . Also, it 204 can implement the reverse operation, namely the transformation of the functions of the controls into a machine-readable or human-readable language understandable to an external source. An external source can be understood as a user, a third-party program, a third-party application programming interface, a component for organizing access to the interface 105 if the functions in it were not created in a machine-readable language of controls 1 , etc.

[72] Компонент рендеринга 205 состоит из совокупности высокопроизводительных обработчиков, позволяющих отобразить элементу правления 1 в программном обеспечении пользователя на основании функций элементу управления 1, а также обеспечить отложенный рендер изначально скрытых функций, но появляющихся в результате взаимодействия пользователя с элементом управления 1. Компонент рендеринга 205 также взаимодействовать только с компонентом визуализации в среде выполнения 201.[72] Render component 205 consists of a collection of high-performance handlers to render control 1 in user software based on the functionality of control 1 , as well as to provide delayed rendering of features that are initially hidden but appear as a result of user interaction with control 1 . The render component 205 also only interact with the render component in the runtime 201 .

[73] Одной из особенностей среды выполнения 200 является алгоритм, обеспечивающий максимально быструю визуализацию элемента управления 1 в программном обеспечении. Это достигается посредством следующих решений. При получении данных с сервера формируются быстрые карты ключ-значение для организации связи между функциями и элементами управления 1, что, в свою очередь, позволяет сформировать специальные дата-объекты, описывающие элементы управления 1 с точки зрения их привязки к функциям и положению в структуре форм. Далее сформированные дата-объекты передают в компонент рендеринга 205, где к каждому дата-объекту применяется шаблон-функция, генерирующая строки кода. Все привязки к объектной модели формируются внутри строчной структуры кода. Далее строчная структура кода добавляется в объектную модель по средствам интерфейса программного обеспечения. Так как при визуализации элемента управления 1 минимизируют операции с объектной моделью, а все пользовательские функции добавляют только после начала взаимодействия пользователя с элементом управления 1, который ими обладает, то это позволяет сосредоточить ресурсы браузера на обновлении одной объектной модели в браузере, а не на всех сразу. Данный подход позволяет добиться среднего целевого показателя в 150 миллисекунд на форму из 1000 элементов управления 1. Важную роль в данном алгоритме так же играют шаблоны-функции элементов управления 1, основывающиеся на объединении строк. Для каждого элемента управления 1 существует своя функция, позволяющая ему быстро генерировать строки кода. Позднее связывание же элементов управления 1 и объектной модели осуществляется на основе идентификаторов (ключ-значение), генерация которых происходит в реальном времени в момент первого рендера компонентом рендеринга 205 и производится только при необходимости, когда пользователь начал взаимодействовать с элементом управления 1. При наличии пользовательской функции события, ее генерация происходит в момент первого обращения к нему. Таким образом функции, ни разу не потребовавшиеся, не генерируются, а элементы управления 1, с которыми не взаимодействовал пользователь, не связываются с объектной моделью.[73] One of the features of the runtime 200 is an algorithm that provides the fastest possible rendering of the control 1 in the software. This is achieved through the following solutions. When data is received from the server, fast key-value maps are formed to organize the connection between functions and controls 1 , which, in turn, allows you to create special data objects that describe controls 1 in terms of their binding to functions and position in the form structure. Next, the generated data objects are passed to the rendering component 205 , where a function template is applied to each data object that generates lines of code. All bindings to the object model are formed inside the inline code structure. Next, the line structure of the code is added to the object model using the software interface. Since control 1 is rendered to minimize object model operations, and all custom functionality is added only after the user has started interacting with control 1 that has them, this allows browser resources to be focused on updating one object model in the browser rather than all at once. This approach achieves an average target of 150 milliseconds per form with 1000 controls 1 . An important role in this algorithm is also played by template-functions of controls 1 , based on string concatenation. Each control 1 has its own function that allows it to quickly generate lines of code. Later, the binding of controls 1 and the object model is based on identifiers (key-value), the generation of which occurs in real time at the time of the first render by the rendering component 205 and is performed only if necessary, when the user begins to interact with the control 1 . If there is a user-defined event function, its generation occurs at the time of the first call to it. Thus, functions that were never required are not generated, and controls 1 that have not been interacted with by the user are not associated with the object model.

[74] Объектная модель при этом представляет собой объектную модель документа (DOM, от англ. Document Object Model). Это независящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML-, XHTML- и XML-документов, а также изменять содержимое, структуру и оформление таких документов.[74] The object model is the Document Object Model (DOM ). It is a platform and language independent programming interface that allows programs and scripts to access the content of HTML, XHTML, and XML documents and modify the content, structure, and appearance of such documents.

[75] Совокупное применение компонента преобразования действий пользователя 104, компонента организации доступа к интерфейсу 105 и компонента хранения элементов управления 106 представляет собой частный вариант воплощения модуля взаимодействия с визуализатором в среде редактирования 103, а совокупное применение компонента загрузки 204 и компонента рендеринга 205 - модуля взаимодействия с визуализатором в среде редактирования 203.[75] The combined use of the user action transformation component 104 , the interface access organization component 105 and the control storage component 106 is a particular embodiment of the module for interacting with the visualizer in the editing environment 103 , and the combined use of the loading component 204 and the rendering component 205 is the module for interacting with the visualizer in the editing environment 203 .

[76] Система, показанная на Фиг. 2, работает следующим образом. Пользователь добавляет элемент управления 1 в интерфейс среды редактирования 100. В момент добавления элемент управления 1 генерирует строки кода в интерфейс 2. При помощи интерфейса 2 полученный код передают в компонент визуализации в среде редактирования 101 и в среде выполнения 201. Компонент преобразования действий пользователя 104 детектирует добавление пользователем элемента управления 1 и передает это действие в компонент организации доступа к интерфейсу 105. Компонент организации доступа к интерфейсу 105 передает это действие в компонент хранения элементов управления 106, который в свою очередь, создает макет с этим элементом управления 1 и передает созданный макет компоненту визуализации в среде редактирования 101. Далее компонент интеграции в среде редактирования 102 оповещает компонент визуализации в среде редактирования 101 о том, в какой области визуализировать элемент управления 1. А компонент визуализации в среде редактирования 101 визуализирует элемент управления 1 в среде редактирования 100, а именно в интерфейсе визуального редактора. Компонент интеграции в среде редактирования 102 интегрирует элемент управления 1 в среду редактирования 100, а именно в интерфейс визуального редактора. При этом у пользователя появляется возможность взаимодействия с элементом управления 1 в интерфейсе визуального редактора, т.е. становится возможным вносить изменения в элемент управления. Приблизительно в одно время, спустя какое-то время или одновременно с визуализацией элемента управления 1 в среде редактирования 100 визуализируют элемент управления 1 в среде выполнения 200, а именно в интерфейсе программного обеспечения. Для этого сначала передают созданный макет компоненту загрузки 204 при помощи компонента хранения элементов управления 106, который, в свою очередь, передает макет в компонент рендеринга 205. Компонент рендеринга 205 по макету получает строки кода, сгенерированные по крайней мере одним элементом управления 1 и передает макет со строками кода в компонент визуализации в среде выполнения 201. Компонент интеграции в среде выполнения 202 оповещает компонент визуализации в среде выполнения 201 о том, в какой области визуализировать элемент управления 1. Компонент визуализации в среде выполнения 201 на основании макета и строк кода визуализирует элемент управления 1 в среде выполнения 200 в области. Компонент интеграции в среде выполнения 202 интегрирует элемент управления 1 в среду выполнения 200, а именно в интерфейс программного обеспечения. При этом у пользователя программного обеспечения появляется возможность взаимодействовать с элементом управления 1 в программном обеспечении.[76] The system shown in FIG. 2 works as follows. The user adds a control1 to the editing environment interface100. When the control is added1 generates lines of code into an interface2. Using the interface2 the resulting code is passed to the visualization component in the editing environment101 and in runtime201. User Action Transformation Component104 detects the user adding a control1 and passes this action to the component of organizing access to the interface105. Interface access organization component105 passes this action to the control storage component106, which in turn creates a layout with that control1 and passes the generated layout to the render component in the editing environment101. Next, the integration component in the editing environment102 notifies the render component in the editing environment101 about which area to render the control1. A visualization component in the editing environment101 renders the control1 in the editing environment100, namely in the interface of the visual editor. Integration Component in Editing Environment102 integrates the control1 into the editing environment100, namely in the interface of the visual editor. This gives the user the ability to interact with the control.1 in the visual editor interface, i.e. it becomes possible to make changes to the control. Approximately at the same time, after some time, or simultaneously with the rendering of the control1in the editing environment100 render the control1 at runtime200, namely in the software interface. To do this, first pass the created layout to the loading component204 using the control storage component106which in turn passes the layout to the render component205. render component205 by layout gets lines of code generated by at least one control1 and passes the layout with lines of code to the render component at runtime201. Runtime Integration Component202 notifies the render component at runtime201 about which area to render the control1. Runtime render component201 renders the control based on the layout and lines of code1 at runtime200 in area. Runtime Integration Component202 integrates the control1 to runtime 200, namely in the interface of the software. In this case, the user of the software has the opportunity to interact with the control1 in software.

[77] При этом то, что этапы визуализации элемента управления 1 в среде выполнения 200 могут производиться спустя какое-то время, подразумевает, что визуализацию производят, например, только после сохранения элемента управления 1 в среде редактирования 100.[77] However, the fact that the rendering steps of the control 1 in the runtime 200 may be performed after some time implies that the rendering is performed, for example, only after the control 1 is saved in the editing environment 100 .

[78] Также после визуализации элемента управления 1 в среде визуального редактора 100 пользователь взаимодействует с элементом управления 1 и его функциями. Во время взаимодействия с элементом управления 1, компонент преобразования действий пользователя 104 распознает действия пользователя и преобразовывает их в машиночитаемый код для того, чтобы система в целом откликалась на действия пользователя. В среде редактирования 100 при помощи интерфейса 2 пользователь добавляет функции элементу управления 1, например, одним из трех вышеописанных способов. Компонент преобразования действий пользователя 104 передает сегрегированные функции в компонент организации доступа к интерфейсу. Компонент организации доступа к интерфейсу 105 накапливает функции. После чего, эти функции могут быть переданы компоненту хранения элементов управления 106. Таким образом, сгенерированные функции привязываются к конкретному элементу управления 1, после чего элемент управления 1 с функциями могут передать в базу данных элементов управления для последующего использования. Из компонента хранения элементов управления 106 функции могут быть переданы в среду выполнения 200. Их можно передать компоненту загрузки 204 напрямую. Компонент загрузки 204, в свою очередь, хранит функции с привязкой к конкретному элементу управления 1 в среде выполнения 200. Он 204 также может преобразовывать функции в машиночитаемый язык элементов управления 1. При взаимодействии пользователя с элементом управления 1 в среде выполнения 200, компонент рендеринга 204 подгружает функции конкретного элемента управления 1 этому элементу управления 1 и передает их в компонент визуализации в среде выполнения 201. Компонент визуализации в среде выполнения 201, в свою очередь, визуализирует полученные функции. Таким образом, элемент управления 1 обретает функционал, заданный добавленной функцией, наряду с визуальным воплощением.[78] Also, after the control 1 is rendered in the visual editor environment 100, the user interacts with the control 1 and its functions. During interaction with the control 1 , the user action conversion component 104 recognizes the user's actions and converts them into machine-readable code so that the system as a whole is responsive to the user's actions. In the editing environment 100 , using interface 2 , the user adds functionality to control 1 , for example, in one of the three ways described above. The user action transformation component 104 passes the segregated functions to the interface access provider component. The interface access organization component 105 accumulates functions. After that, these functions can be passed to the control storage component 106 . Thus, the generated functions are bound to a specific control 1 , after which the control 1 with functions can be transferred to the control database for later use. From the control store component 106 , functions can be passed to the runtime 200 . They can be passed to the download component 204 directly. The loading component 204 in turn stores the functions associated with a specific control 1 in the runtime 200 . It 204 can also convert functions into machine readable language of controls 1 . When a user interacts with control 1 at runtime 200 , render component 204 loads the functions of particular control 1 into that control 1 and passes them to render component at runtime 201 . The renderer component in the runtime 201 in turn renders the resulting functions. Thus, the control 1 acquires the functionality specified by the added function, along with a visual embodiment.

[79] Например, если пользователь добавил элемент управления 1 «кнопка» в среду редактирования 100, а затем при помощи интерфейса 2 задал функцию «кнопке», заключающуюся в том, что при нажатии пользователем на «кнопку», «кнопка» меняет цвет, то в среде выполнения 200 эта функция не будет сразу же преобразована и загружена. Функция загрузится или добавится в элемент управления 1 только в момент взаимодействия с «кнопкой» пользователя, то есть в момент нажатия. А затем будет провизуализирована при помощи компонента визуализации в среде выполнения 201.[79] For example, if a user adds control 1 "button" to edit environment 100 and then uses interface 2 to set a function for "button" that when the user clicks on "button", the "button" changes color, then in runtime 200 that function will not be immediately converted and loaded. The function will be loaded or added to control 1 only at the moment of interaction with the user's "button", that is, at the moment of pressing. And then it will be rendered using the render component in the runtime 201 .

[80] На Фиг. 3 изображена блок-схема, иллюстрирующая способ динамической визуализации элементов программного обеспечения, в соответствии с настоящим изобретением. Согласно нему, сначала добавляют элемент управления 1 в среду редактирования 100. После этого, при помощи элемента управления 1 генерируют код в интерфейс 2. Интерфейс 2 передает код в компонент визуализации в среде редактирования 101. Далее получают информацию от компонентов интеграции в среде редактирования 102 и в среде выполнения 202 о том, в каком месте визуализировать элемент управления 1 в среде редактирования 100 и в среде выполнения 200 соответственно. После этого создают макет с по крайней мере одним элементом управления 1 и передают макет компоненту визуализации в среде редактирования 101 при помощи модуля взаимодействия с визуализатором в среде редактирования 103. При помощи компонента визуализации в среде редактирования 101 визуализируют элемент управления 1 в среде редактирования 100. Компонент интеграции в среде редактирования 102 интегрирует элемент управления 1 в среду редактирования 100, а именно в интерфейс визуального редактора. При этом у пользователя появляется возможность взаимодействия с элементов управления 1 в интерфейсе визуального редактора, т.е. становится возможным вносить изменения в элемент управления. Приблизительно в одно время, спустя какое-то время или одновременно с визуализацией элемента управления 1 в среде редактирования 100 визуализируют элемент управления 1 в среде выполнения 200, а именно в интерфейсе программного обеспечения, при помощи компонента визуализации в среде выполнения 201. Причем, перед визуализацией при помощи модуля взаимодействия с визуализатором в среде выполнения 203 получают макет с по крайней мере одним элементом управления 1 от модуля взаимодействия с визуализатором в среде редактирования 203 и передают макет компоненту визуализации в среде выполнения 201. Компонент интеграции в среде выполнения 202 интегрирует элемент управления 1 в среду выполнения 200, а именно в интерфейс программного обеспечения. При этом у пользователя программного обеспечения появляется возможность взаимодействовать с элементом управления 1 в программном обеспечении.[80] In FIG. 3 is a flow diagram illustrating a method for dynamically rendering software elements in accordance with the present invention. According to it, control 1 is first added to edit environment 100 . After that, using control 1 generate code to interface 2 . Interface 2 passes code to the render component in the editing environment 101 . Further, information is received from the integration components in the editing environment 102 and in the runtime 202 about where to render the control 1 in the editing environment 100 and in the runtime 200 , respectively. After that, a layout is created with at least one control element 1 and the layout is passed to the render component in the editing environment 101 using the renderer interaction module in the editing environment 103 . Using the rendering component in the editing environment 101, control 1 is rendered in the editing environment 100 . The integration component in the editing environment 102 integrates the control 1 into the editing environment 100 , namely the visual editor interface. In this case, the user has the opportunity to interact with controls 1 in the interface of the visual editor, i.e. it becomes possible to make changes to the control. Approximately at the same time, after some time or simultaneously with the rendering of the control 1 in the editing environment 100 , the control 1 is rendered in the runtime 200 , namely in the software interface, using the rendering component in the runtime 201 . Moreover, before rendering using the renderer interaction module in the runtime 203 , a layout with at least one control element 1 is received from the renderer interaction module in the editing environment 203 and the layout is passed to the render component in the runtime 201 . The runtime integration component 202 integrates the control 1 into the runtime 2 00 , namely the software interface. This gives the user of the software the ability to interact with the control 1 in the software.

[81] В среде редактирования 100 могут производиться дополнительные этапы способа динамической визуализации элементов программного обеспечения, показанные на Фиг. 4. Таким образом, после этапа интеграции элемента управления 1 в программное обеспечение визуального редактора могут генерировать по крайней мере одну функцию для интегрированного элемента управления 1 при помощи интерфейса 2 посредством взаимодействия пользователя с элементом управления 1. Генерация функций может быть реализована, например, одним из трех способов, описанных выше. В момент взаимодействия, компонент преобразования действий пользователя 104 обрабатывает действия пользователя и распознает, была ли пользователем сгенерирована функция. После, по крайней мере одна сгенерированная функция может быть передана в компонент организации доступа к интерфейсу 105, при помощи которого накапливают переданные ему функции. Далее функции могут быть переданы компонент хранения элементов управления 106, который обновляет ранее созданный макет посредством добавления функций в элемент управления 1. Таким образом, сгенерированные функции привязываются к конкретному элементу управления 1, после чего элемент управления 1 с функциями могут передать в базу данных элементов управления для последующего использования и/или могут передать макет, включающий по крайней мере один элемент управления 1 с по крайней мере одной привязанной функцией.[81] In the editing environment 100, additional steps of the method for dynamically rendering software elements shown in FIG. 4. Thus, after the step of integrating the control 1 into the visual editor software, at least one function for the integrated control 1 can be generated using the interface 2 through user interaction with the control 1 . Function generation can be implemented, for example, in one of the three ways described above. At the moment of interaction, the user action transformation component 104 processes the user's actions and recognizes whether a function has been generated by the user. After that, at least one generated function can be passed to the component of the organization of access to the interface 105 , with the help of which the functions passed to it are accumulated. The control storage component 106 can then be passed to the function, which updates the previously created layout by adding functions to the control 1 . Thus, the generated functions are bound to a particular control 1 , whereupon the control 1 with functions may be passed to the control database for later use and/or may be passed a layout that includes at least one control 1 with at least one bound function.

[82] В среде выполнения 200 могут производиться дополнительные этапы способа динамической визуализации элементов программного обеспечения, показанные на Фиг. 5. После интеграции элемента управления 1 в программное обеспечения пользователь может провзаимодействовать с элементом управления 1 в среде выполнения 200. В момент взаимодействия загружают функции, связанные с конкретным взаимодействием с конкретным элементом управления 1, из компонента загрузки 204 в компонент рендеринга 205. После этого при помощи компонента рендеринга 205 осуществляют отложенный рендеринг функций элемента управления 1. А именно передают функции в компонент визуализации в среде выполнения 201 и визуализируют элемент управления 1 при помощи компонента визуализации в среде выполнения 201.[82] At runtime 200, additional steps of the method for dynamically rendering software elements shown in FIG. 5. Once control 1 is integrated into the software, the user can interact with control 1 at runtime 200 . At the moment of interaction, functions associated with a particular interaction with a particular control 1 are loaded from the loading component 204 to the rendering component 205 . After that, using the rendering component 205 perform delayed rendering of the functions of the control 1 . Namely, functions are passed to the render component in the runtime 201 and control 1 is rendered using the render component in the runtime 201 .

[83] При объединении дополнительных этапов, показанных на Фиг. 4 и Фиг. 5, этапы, производящиеся после добавления пользователем функций в элемент управления, могут быть реализованы следующим образом. После этапа интеграции элемента управления 1 в программное обеспечение визуального редактора могут генерировать по крайней мере одну функцию для интегрированного элемента управления 1 при помощи интерфейса 2 посредством взаимодействия пользователя с элементом управления 1. Генерация функций может быть реализована, например, одним из трех способов, описанных выше. В момент взаимодействия, компонент преобразования действий пользователя 104 обрабатывает действия пользователя и распознает, была ли пользователем сгенерирована функция. После, по крайней мере одна сгенерированная функция может быть передана в компонент организации доступа к интерфейсу 105, при помощи которого накапливают переданные ему функции. Далее функции могут быть переданы компонент хранения элементов управления 106, который обновляет ранее созданный макет посредством добавления функций в элемент управления 1. Таким образом, сгенерированные функции привязываются к конкретному элементу управления 1, после чего элемент управления 1 с функциями могут передать в базу данных элементов управления для последующего использования. Из компонента хранения элементов управления 106 функции могут быть переданы в среду выполнения 200, а именно в компонент загрузки 204. Далее пользователь может провзаимодействовать с элементом управления 1 в среде выполнения 200. В момент взаимодействия при помощи компонента загрузки 204 передают функции, связанные с конкретным взаимодействием с конкретным элементом управления 1, в компонент рендеринга 205. После этого при помощи компонента рендеринга 205 осуществляют отложенный рендеринг функций элемента управления 1. А именно передают функции в компонент визуализации в среде выполнения 201 и визуализируют элемент управления 1 при помощи компонента визуализации в среде выполнения 201.[83] By combining the additional steps shown in FIG. 4 and FIG. 5, the steps that occur after the user adds functionality to the control can be implemented as follows. After the step of integrating the control 1 into the visual editor software, at least one function for the integrated control 1 can be generated using the interface 2 through user interaction with the control 1 . Function generation can be implemented, for example, in one of the three ways described above. At the moment of interaction, the user action transformation component 104 processes the user's actions and recognizes whether a function has been generated by the user. After that, at least one generated function can be passed to the component of the organization of access to the interface 105 , with the help of which the functions passed to it are accumulated. The control storage component 106 can then be passed to the function, which updates the previously created layout by adding functions to the control 1 . Thus, the generated functions are bound to a specific control 1 , after which the control 1 with functions can be transferred to the control database for later use. From the control store component 106 , functions can be passed to the runtime 200 , namely the load component 204 . The user can then interact with control 1 at runtime 200 . At the time of interaction, the loading component 204 passes functions associated with a particular interaction with a particular control 1 to the rendering component 205 . After that, using the rendering component 205 perform delayed rendering of the functions of the control 1 . Namely, functions are passed to the render component in the runtime 201 and control 1 is rendered using the render component in the runtime 201 .

[84] На Фиг. 6 изображен способ динамической визуализации элементов программного обеспечения, используемый в системе визуализации элементов программного обеспечения, показанной на Фиг. 2. Согласно нему, сначала добавляют элемент управления 1 в среду редактирования 100. После этого, при помощи элемента управления 1 генерируют код в интерфейс 2. При помощи интерфейса 2 полученный код передают в компонент визуализации в среде редактирования 101. Компонент преобразования действий пользователя 104 детектирует добавление пользователем элемента управления 1 и передает это действие в компонент организации доступа к интерфейсу 105. Компонент организации доступа к интерфейсу 105 передает это действие в компонент хранения элементов управления 106, который в свою очередь, создает макет с этим элементом управления 1 и передает созданный макет компоненту визуализации в среде редактирования 101. Далее компонент интеграции в среде редактирования 102 оповещает компонент визуализации в среде редактирования 101 о том, в какой области визуализировать элемент управления 1. А компонент визуализации в среде редактирования 101 визуализирует элемент управления 1 в среде редактирования 100, а именно в интерфейсе визуального редактора. Компонент интеграции в среде редактирования 102 интегрирует элемент управления 1 в среду редактирования 100, а именно в интерфейс визуального редактора. При этом у пользователя появляется возможность взаимодействия с элементом управления 1 в интерфейсе визуального редактора, т.е. становится возможным вносить изменения в элемент управления. Приблизительно в одно время, спустя какое-то время или одновременно с визуализацией элемента управления 1 в среде редактирования 100 визуализируют элемент управления 1 в среде выполнения 200, а именно в интерфейсе программного обеспечения. Для этого сначала передают созданный макет компоненту загрузки 204 при помощи компонента хранения элементов управления 106, который, в свою очередь, передает макет в компонент рендеринга 205. Компонент рендеринга 205 по макету получает строки кода, сгенерированные по крайней мере одним элементом управления 1 и передает макет со строками кода в компонент визуализации в среде выполнения 201. Компонент интеграции в среде выполнения 202 оповещает компонент визуализации в среде выполнения 201 о том, в какой области визуализировать элемент управления 1. Компонент визуализации в среде выполнения 201 на основании макета и строк кода визуализирует элемент управления 1 в среде выполнения 200 в области. Компонент интеграции в среде выполнения 202 интегрирует элемент управления 1 в среду выполнения 200, а именно в интерфейс программного обеспечения. При этом у пользователя программного обеспечения появляется возможность взаимодействовать с элементом управления 1 в программном обеспечении.[84] In FIG. 6 shows a method for dynamically rendering software elements used in the software element rendering system shown in FIG. 2. According to him, first add a control1 into the editing environment100. After that, using the control1 generate code in interface2. Using the interface2 the resulting code is passed to the visualization component in the editing environment101. User Action Transformation Component104 detects the user adding a control1 and passes this action to the component of organizing access to the interface105. Interface access organization component105 passes this action to the control storage component106, which in turn creates a layout with that control1 and passes the generated layout to the render component in the editing environment101. Next, the integration component in the editing environment102 notifies the render component in the editing environment101 about which area to render the control1. A visualization component in the editing environment101 renders the control1 in the editing environment100, namely in the interface of the visual editor. Integration Component in Editing Environment102 integrates the control1 into the editing environment100, namely in the interface of the visual editor. This gives the user the ability to interact with the control.1 in the visual editor interface, i.e. it becomes possible to make changes to the control. Approximately at the same time, after some time, or simultaneously with the rendering of the control1in the editing environment100 render the control1 at runtime200, namely in the software interface. To do this, first pass the created layout to the loading component204 using the control storage component106which in turn passes the layout to the render component205. render component205 by layout gets lines of code generated by at least one control1 and passes the layout with lines of code to the render component at runtime201. Runtime Integration Component202 notifies the render component at runtime201 about which area to render the control1. Runtime render component201 renders the control based on the layout and lines of code1 at runtime200 in area. Runtime Integration Component202 integrates the control1 to runtime 200, namely in the interface of the software. In this case, the user of the software has the opportunity to interact with the control1 in software.

[85] При этом то, что этапы визуализации элемента управления 1 в среде выполнения 200 могут производиться спустя какое-то время, подразумевает, что визуализацию производят, например, только после сохранения элемента управления 1 в среде редактирования 100.[85] However, the fact that the rendering steps of the control 1 in the runtime 200 may be performed after some time implies that the rendering is performed, for example, only after the control 1 is saved in the editing environment 100 .

[86] В настоящих материалах заявки представлено предпочтительное раскрытие осуществления заявленного технического решения, которое не должно использоваться как ограничивающее иные, частные воплощения его реализации, которые не выходят за рамки запрашиваемого объема правовой охраны и являются очевидными для специалистов в соответствующей области техники.[86] The present application materials provide a preferred disclosure of the implementation of the claimed technical solution, which should not be used as limiting other, private embodiments of its implementation, which do not go beyond the requested scope of legal protection and are obvious to specialists in the relevant field of technology.

Claims

1. A system for dynamic visualization of software elements, including:

• a runtime environment that includes at least

a runtime control rendering component;

a runtime integration component configured to integrate the control into the software; And

a module for interacting with the renderer in the runtime, configured to receive and pass the layout and includes a render component connected to the render component of the control in the runtime and configured to lazy load the functions of the control,

connected to each other

• an editing environment that includes at least

control rendering component in the editing environment;

an integration component in the editing environment, configured to integrate the control into the visual editor; And

a visualizer interaction module in the editing environment, configured to create a layout and connected to the visualizer interaction module in the runtime environment,

connected to each other

• and an interface with at least one control connected to the control render component in the runtime environment and to the control render component in the editing environment and configured to generate lines of code.

2. The system for dynamic rendering of software elements according to claim 1, characterized in that the module for interacting with the visualizer in the editing environment further includes a user action transformation component connected to the visualization component of the control in the editing environment and configured to process user actions.

3. The system for dynamic visualization of software elements according to claim 2, characterized in that the module for interacting with the visualizer in the editing environment additionally includes a component for organizing access to the interface connected to the user action transformation component.

4. The system for dynamic visualization of software elements according to claim 3, characterized in that the module for interacting with the visualizer in the editing environment additionally includes a component for storing controls connected to the interface of the component for organizing access to the interface and to the visualization component of the control in the editing environment.

5. The system for dynamic rendering of software elements according to claim 1, characterized in that the module for interacting with the renderer in the runtime environment additionally includes a loading component connected to the visualization component of the control in the runtime environment and to the control storage component.

6. The system for dynamic rendering of software elements according to claim 5, characterized in that the rendering component is additionally connected to the loading component.

7. The system for dynamic visualization of software elements according to claim 1, characterized in that it additionally includes a data storage and processing component connected to the control storage component.

8. The system for dynamic visualization of software elements according to claim 1, characterized in that it additionally includes a database of controls, including at least one control.

9. A method for dynamic visualization of software elements, according to which:

• add a control to the editing environment;

• generate lines of code using the control element;

• pass the generated lines of code to the interface;

• transform the code using the interface;

• pass the code to the render component of the control in the editing environment;

• receive information from the integration component in the editing environment about the place where the control is rendered in the editing environment;

• create a layout that includes the added control;

• visualize the created layout in the editing environment;

• integrate the control into the visual editor;

• pass the created layout to the module of interaction with the visualizer in the execution environment;

• render the resulting layout in the runtime environment;

• integrate the control into the software;

• load the functions of the control when the user interacts with the control using the rendering component.

10. The method for dynamic visualization of software elements according to claim 9, characterized in that at the stage of creating a layout:

• detecting that a user has added a control using a user action processing component;

• save the user's addition of the control using the component of the organization of access to the interface;

• apply the user action using the control storage component.

11. The method of dynamic visualization of software elements according to claim 9, characterized in that after transferring the created layout to the module for interacting with the visualizer in the runtime environment:

• get the created layout using the loading component;

• pass the resulting layout to the rendering component.

• get the lines of code generated by the control included in the resulting layout, using the rendering component;

• pass the resulting layout with lines of code to the render component in the runtime.

12. The method of dynamic visualization of software elements according to claim 9, characterized in that after the stage of integrating the control element into the software in the editing environment, the user interacts with the control element and, using the user action transformation component, the user action with the control element is processed.

13. The method for dynamically visualizing software elements according to claim 12, characterized in that a function is generated using an interface and data about the function is passed to the interface access organization component.

14. The method for dynamic visualization of software elements according to claim 13, characterized in that the generated function is saved using the interface access organization component.

15. The method of dynamically rendering software elements according to claim 14, characterized in that the function is passed to the control storage component and the created layout is updated by adding functions to the control using the control storage component.

16. The method of dynamic visualization of software elements according to claim 15, characterized in that after the stage of updating the created layout:

• pass the layout with the loaded functions to the loading component and

• pass the loaded functions to the render component using the load component when the user interacts with the control at runtime.

17. The method for dynamically rendering software elements according to claim 16, characterized in that after transferring the loaded functions to the rendering component:

• pass the resulting layout with lines of code to the rendering component in the runtime environment;

• render a layout that includes a control with functions using a render component in the runtime environment.

18. The method for dynamically rendering software elements according to claim 15, characterized in that before the stage of updating the created layout, functions are loaded from the data storage and processing component into the control storage component.