Visual design. Visual modeling in designing

Visual design. Visual modeling in designing

Visual programming is one of the technologies in modern programming

Visual programming (from Latin visualis - visual) is a programming technology that involves the creation of applications using visual aids.

Visual programming also includes Rapid Application Development (RAD) - rapid development of programs. RAD is a programming technology that accelerates the development and modification of applications through the use of object-oriented and visual programming.

Visual programming tools usually solve the problems of building user interface and simplifying application development by replacing the "write the program" method with the design method.

Visual programming certainly has the virtue of visual presentation of information and is much better suited to the nature of human perception than traditional, text-based programming methods. However, almost all visual tools need to be supplemented with functions that cannot be represented in the form of graphic structures and require textual expression. Visual aids are complemented special programs- "scripts" written in various programming languages.

For example, IBM has most fully implemented the concept of visual programming in the VisualAge Smalltalk environment.

VisualAge is a powerful application development environment for client-server architecture. The environment is focused primarily on the development of business applications, including systems for online transaction processing and decision support systems. VisualAge allows professional developers to build client parts of application systems with a complex graphical interface, design business logic for applications with access to local and remote resources.

VisualAge is an object-oriented development tool that includes a set of visual interactive tools, a library of ready-made components, and a set of tools for building a client-server environment.

The GUI support provided by the ready-made components meets the CUA (Common User Access) specifications and contains a number of extensions for organizing flexible I/O in complex forms and tables. The library of ready-made components also provides support for multimedia devices, communications via APPC, TCP / IP, NetBIOS protocols, CICS External Call Interface, EHLLAPI, Message Queue Interface (MQI), work with relational databases data families DB2, Oracle, Sybase and much more.

Microsoft, developing the concept of the .NET Framework, created Visual Studio .NET Enterprise Architect 2003, in which it implemented all the latest achievements in the field of programming and, in particular, in visual programming technology.

Visual Studio .NET is a complete multilingual development environment for the Microsoft .NET platform. Visual Studio .NET provides a set of technologies that make it easy to build, deploy, and then enhance secure, scalable, and highly available web applications and XML Web services.

Borland Software Corporation traditionally develops an integrated programming environment that has undoubted success in the professional software market. This environment has always supported visual programming methods, offering the developer powerful libraries, interactive master builders, and ready-made graphical interface elements. Today, Borland Developer Studio is a software product from Borland Software Corporation, which is a rapid application development (RAD) environment for Win32 and .NET platforms in Delphi (Object Pascal), C ++ and C #.

Another package from Borland is Delphi Enterprise Edition 7.0. This package provides support for the latest emerging Web Services technologies and includes a pre-release version of the Microsoft .NET Framework tools.

With Delphi 7, developers using Delphi can acquire .NET programming skills, prepare their applications to run under .NET, without losing their existing experience and skills on the Windows platform. The Delphi 7 development environment is all about design; deploy model-driven architecture (MDA); integrating modeling, development and deployment of e-business applications and systems for the Windows platform.

Borland Software Corporation is the first company to open an independent path to .NET with Delphi 7, a rapid application development (RAD) cross-platform environment for the Windows platform. A characteristic feature of Delphi 7 is the ability to develop and deploy enterprise applications. This allows developers to create corporate applications, from concept to finished product, even faster with the new UML™ designer and Model Driven Architecture™ (MDA™) technology.

We examined the role and place of visual programming in the field of modern programming. Now let's move on to the consideration of specific techniques and methods related to visual programming. Consider the use of visual programming components and techniques within the Visual Studio.NET Framework by Microsoft.

Fundamentals of Visual Programming

Visualization is the process of graphically displaying complex processes or concepts on a computer screen in the form of graphical primitives. You can visualize many processes: management, construction, drawing, etc.

Application users are accustomed to the graphical interface of applications and often do not even think that the familiar interface elements are visual graphical primitives. For example, the simplest visualization option is a progress bar (a rectangle whose filling percentage is directly proportional to the execution time of any operation). Looking at it, you can roughly estimate the end time of the operation. But, if the value of the execution time was displayed as a number or percentage without a progress bar, then such an output would only be a display current value, but not visualization of the process.

Today it is customary to visualize interfaces software. Visualization removes the problems of "communication" by the user with software product. Graphic images on the controls allow the user to intuitively understand the purpose of these elements.

To visualize software interfaces, there are a number of specially designed interface elements - visual components that allow you to display various information and manage the program as a whole. The simplest example- visual button on the computer screen. The soft button mimics the behavior of a normal button on the control panel of any instrument. The button can be "pressed" like a real one.

Perhaps it was the presence of visual interface building tools in languages ​​such as Microsoft Visual Basic and Delphi, as well as the visual programming interfaces created using these languages, that fixed the term "visual programming" behind them. Of course, there are many other similar products (Visual C++, Borland C++ since version 4, Symantec Visual Cafe, C++ Builder, etc.), but they have not been able to gain such popularity as Visual Basic and Delphi. It was thanks to Visual Basic that the world learned about the possibility of visually building program interfaces for Windows.

Visual Basic and Delphi build the program interface visually, but not the code itself. The defining elements of the visualization process are:

  • A rendered model is a model that is displayed in order to be able to change its structure or its parameters (or the parameters of its individual parts).

  • Toolbox (ToolBox) - a window containing a set of elements from which a visual model is built. Usually, elements are divided according to their purpose into separate groups placed on separate tabs of the tool window.

  • PropertyBox - a window that displays the parameters (properties) of the selected element of the visual model. The term "property" comes from object-oriented programming and denotes a parameter of an object (element).
  • The rendered model in Visual Basic and Delphi is the Windows window (form, dialog), not the program code.

    It is common practice to visualize work with interface elements, when the visual components that make up the forms (windows and dialogs) of the program interface are considered as visualization objects. But the program statements can also be considered as visualization objects. In this case, the parameters of the program operators and functions can be configured using the PropertyBox, and the operators and functions themselves are stored in a list (tabular) form.

    As a possible option for implementing such a visual development of the program code, one can consider a tabular form of recording macros in Microsoft Access (Fig. 8.1). In this case, the rendered model is a macro-program for managing data in a database or controlling the process of displaying data. The macro commands are in different lines of the macro entry. The properties window is located directly below the list of commands. There is no tool window in its usual form, but it is implemented as a drop-down list with commands, i.e. in each line of the macro recording separately, it is possible to select or change current command macro. This is the visualized form of the program record.

    Fig.8.1. Visualization of program code development

    Attaching a module created by means of visual programming is also carried out by visual means - in the design mode (Fig. 8.2).

    Fig.8.2. Visual programming tools

    Another example of visualizing the creation of program code is the process of creating macro programs in Microsoft Excel(fig.8.3).

    Fig.8.3. MS Excel dialog automatic recording user actions

    The rendered model in this case is an Excel worksheet in which the programmer performs data processing actions. The program code is written automatically in the background, while the description in the VBA (Visual Basic for Application) language statements of all visual user actions takes place.

    The Properties window is present, but not in the worksheet itself, but in the VBA environment (Fig. 8.4). The tool window turns off when the Module object is selected, but in the case of editing the program code, a drop-down list appears for each program object with properties, methods and events, i.e. in each line of the macro record separately, it is possible to select or change the current macro command.

    An example of the resulting program, the call of which in the working Excel sheet can be organized by command button or directly by the name of the recorded macro, shown in Fig.8.4.

    Fig.8.4. The result of automatic recording of program code as a protocol of user actions

    Using visual programming when building an application interface in Visual Studio.Net

    Visual Studio .NET is a universal development environment for all types of applications based on .NET and based on a single visual interface. The .NET Framework is a set of objects and plans (blueprints, that is, descriptions of objects) created by Microsoft for application development (Windows and Internet). A large collection of visual objects allows you to design various controls: Label, Label with a hyperlink, Button, Field, Checkbox and many others. All these elements are located on the toolbar (Fig. 8.5). Element properties are set using the property list.

    Controls, like all other .NET environment objects, are implemented as classes in a specific namespace, in this case System.Windows.Forms.

    Fig.8.5. Visual programming with Visual Studio.NET

    Element methods are programmed by the user "manually", but even here there are visual assistants: after double-clicking on the control in the designer, the code editor window automatically opens and the title of the event procedure is automatically written. Moreover, after typing the name of the object, a list of properties and methods of the object automatically appears (Fig. 8.6). Thus, the process of writing program code is also partially visualized.

    Fig.8.6. Visualization of object properties and methods

    In addition to controls, as a rule, the application interface contains other standard components, the implementation of which is also supported by visual programming tools, for example, standard dialog boxes.

    There is no separate Dialog class in .NET. A dialog box is a form (Fig. 8.7.) with some special characteristics. Programming dialog boxes, like many other standard components, in Visual Studio is supported by visual programming tools (Fig.8.8).

    Fig.8.7. Standard Dialog Example

    Fig.8.8. Programming standard elements using Visual Studio

    The .NET Framework and Visual Studio .NET provide programmers with a huge library of objects that speeds up the application development process. Many of the objects in this library have a visual representation and allow you to assign object properties in design mode using the Properties window or dialogs with the Builder Wizard.

    conclusions

    Visual programming involves creating applications using visual aids.

    Visual programming tools usually solve the problems of building a user interface and simplifying application development by replacing the "write the program" method with the design method.

    Visual programming has the advantage of visual representation of information and is much better suited to the nature of human perception than traditional, text-based programming methods. However, almost all visual tools need to be supplemented with functions that cannot be represented in the form of graphic structures and require textual expression.

    The concept of visual programming is implemented in many modern development environments software systems. All leading firms that create tools for programming and design have systems that support visual programming technology.

    The visual programming aids in Visual Studio.NET turn programmers into Windows and Internet application developers.

    Questions for self-examination

    1. What is the fundamental difference between visual programming and any other programming?
    2. Is it possible to create a complete software application using visual programming?
    3. What are the advantages and disadvantages of visual programming?
    4. What programming languages ​​support the visual style of programming?
    5. In what programming environments is the visual style of programming implemented?
    6. Which software package firms have the best visual programming solutions?
    7. Can we say that visual programming is building a graphical user interface?
    8. What elements of the visualization process can you list?
    9. What is a "rendered model"?
    10. Give examples of visual programming in programming environments known to you.

    Literature

    1. Garnaev F.Yu. Visual Studio.NET Tutorial 2003.- St. Petersburg: BHV-Petersburg, 2005.- 688.p.: ill.
    2. Authentic Sh. Master your own programming for Microsoft Excel 2000. Per. from English: Uch. Pos. - M.: Publishing House "Williams", 2006. - 304 p.: Ill. - Paral. tit. English
    3. Kharitonova I.A., Mikheeva V.D. Microsoft ACCESS 2000: Application development. - St. Petersburg: BHV-Petersburg, 2004. - 832 p.: ill.

    form of control: offset

    semester 4 (full-time)

    semester 5 (correspondence course)

    1. Visual and verbal in culture: the problem of correlation.

    2. "Machinery" in the culture of the Renaissance and Post-Renaissance (camera obscura, profile machine, laterna magic).

    3. Perspective systems: comparative analysis.

    4. Architecture as a communication system.

    5. Reproduction technologies of the pre-industrial era.

    6. The origin of photography (the experiments of Niépce, Daguerre, Talbot and their results).

    7. Daguerreotype and calotype: comparative analysis.

    8. Photo of the middle of the XIX century. (based on the wet collodion process).

    9. Portrait in photography 1850 - 1870s. (on the example of the works of Nadar, Dizderi, J.-M. Cameron, A. Karelin).

    10. Pictorial photography and the problem of the relationship between art and photography.

    11. Photography of movement (experiments of Muybridge and Mare).

    12. The concept of New Vision in the avant-garde culture of the 1920s - 1930s. (on the example of the activities of Dziga Vertov, L. Mokhoi-Nagy, Lissitzky, Rodchenko and others).

    13. Photography in the system of industrial-utilitarian art.

    14. Walter Benjamin and his essay on photography and reproduction.

    15. social photography 1930s (A. Zander, D. Lange, W. Evans, B. Shan).

    16. Photography in French surrealism (Man Ray, Bouffard, Bellmer and others).

    17. Photo of the middle of the XX century. - leading craftsmen

    18. Roland Barthes and his book on photography.

    19. The place of photography in contemporary art (pop art, conceptualism, Cindy Sherman, Sherri Levine, Richard Prince, A. Gursky, D. Wall, B. Struili, etc.).

    20. The impact of new technologies on photography. Computer photograph.

    21. Photography and painting: the history of relationships (from "artistic experiences" in photography in the 1850s - 1860s to the current situation).

    22. Prehistory of the appearance of cinema.

    23. Features of cinema as a means of mass communication.

    24. Cinema: visual and narrative aspects.

    25. The main innovations of early cinema (1890s - 1910s).

    26. Creativity D.-U. Griffith.

    27. German film expressionism of the 1920s.

    28. Cinema avant-garde 1920 - 1930s: general trends development.

    29. Soviet montage cinema of the 1920s: main works.

    30. The problem of the ratio of sound and image in cinema. The rise of sound cinema.

    31. Cinema of the 1930s - 1940s: general characteristics.

    32. Cinema of the 1950s - 1960s: a general description.

    33. Modern cinema: the main directions of development.

    34. Origin and history of animation.

    35. Marshall McLuhan and his media theory.

    36. The theory of avant-garde and kitsch. The role of visuality in modern mass culture.

    37. Genre video installation.

    Introduction to Visual Design

    visual design

    Delphi, being a visual application development environment, is aimed at those programmers who “assemble” from ready-made components specific applications for end users. visual Delphi tools built on the concept of dual tools (Two-Way Tools), which allows you to change the properties of objects both in the process of visual design at the stage of "assembly" (Design time), and programmatically, during the application (Run time). In Delphi, this concept is implemented using components.

    On the other hand, as an extensible object-oriented toolkit, Delphi allows you to create your own components.

    A component is a specially designed class. Its properties can be changed at the "assembly" stage of the program using the Object Inspector. All changes are immediately displayed on the monitor screen, so this approach allows you to quickly create the interface part of the application. As you know, this part usually takes up to 80% of the programmer's work.

    Delphi components are combined into the VCL library - Visual Component Library (library of visual components). All Delphi components can be classified as follows:

    Invisible (non-visual) components are typically components that access system resources, such as the system timer. They are displayed during interface construction, but are not visible while the application is running.

    Control elements enable the user to receive information and/or control the program operation while the program is running.

    Window elements, visual controls can take input focus (become selected), they are windows Windows systems and have all window properties, i.e. have a unique Windows identifier and receive messages from the operating system.

    Graphical components differ from the previous ones in that they do not have an identifier and, accordingly, cannot receive messages from Windows. They take much less resources from the system than all the others.

    The Delphi class hierarchy is a well-chosen base class hierarchy. This is largely due to the fact that traditionally Windows environment it was quite difficult to implement the user interface. The event model in Windows has always been difficult to understand and debug. But it is the development of an interface in Delphi that is the easiest task for a programmer.

    Delphi environment includes a complete set of visual tools for Rapid Application Development (RAD), supporting user interface development and connecting to corporate databases. VCL - visual component library - includes standard objects building a user interface, data management objects, graphical objects, multimedia objects, dialogs and file management objects, OLE management.

    The palette of components (Fig. 4.1.2) allows you to select the necessary objects to place them on the Form Designer. To use the Component Palette, simply first click on one of the objects in the Component Palette and then a second time on the Form Designer. The selected object will appear on the projected window and can be manipulated with the mouse.

    The component palette uses a paginated grouping of objects. At the top of the palette there is a set of tabs - Standard, Additional, Dialogs, etc. To select the page of the palette of components, use the navigation arrows located in the upper right corner.

    Polymorphism (having many forms)

    Inheritance

    Encapsulation

    Three Basic Principles of OOP

    Object-oriented programming is based on three main principles: encapsulation, inheritance and polymorphism . A program built according to these principles is a set of objects and ways of their interaction, while the exchange of information between objects occurs through messages.

    On the one hand, an object has certain properties that characterize its state in this moment. On the other hand, operations on objects are possible that lead to a change in these properties. Access to changing properties is carried out only with the help of methods inherent in this class of objects. There is a method given property this object can be changed, if there is no method, it is impossible. Methods, as it were, "surround" the properties of the object, they say that the properties are "encapsulated" in the object. To ensure encapsulation, a class must not allow direct access to its data. Encapsulation is a mechanism for hiding all the internal details of an object that do not affect its behavior.

    Derived classes can inherit the characteristics of parent classes. Those. one object acquires the properties of another object, adding to them properties that are specific only to it.

    Inheritance defines the relationship between classes: objects of a class-successor have all the properties and methods of objects of the parent class and do not have to re-implement them.

    You can apply the same method to objects of different classes, but this method will act differently. For example, the same methods can be applied to most objects in Windows&Office: copying, moving, renaming, deleting, etc. However, the mechanisms for implementing these methods for different classes (file in Windows and word document) are not the same.

    Polymorphism is the ability to use the same methods for objects of different classes, only the implementation of these methods will be individual for each class.

    To overcome difficulties at the stage of creating a user interface, visual programming has become widespread. The work began to be done in Integrated Development Environments (IDE - ISR) applications that provide the programmer with a set of tools for visual interface design. This set of tools has been programmatically developed in advance, a list of their properties, methods and modes of use has been defined. These tools are contained in the standard libraries.



    Such ISR environments include such programming environments as Visual Basic and Delphi, which provide the programmer with a screen form project on which he can place various components available in the standard libraries of these environments. With simple mouse manipulations, you can change the size and position of these components. The results of the design are immediately reflected on the screen. If necessary, the application developer can change the default properties of components using a special dialog box.

    But the most important advantage of visual programming is that during the design of the form and the placement of components on it, the IDE code editor automatically generates program code, including the appropriate fragments that describe this component.

    Such an environment significantly reduces time and facilitates the process of creating an application's graphical interface. But this is only the first part of the problem. The second part - writing a program code that corresponds to the meaning of the problem being solved - remains with the developer and is solved standard means IDE programming language (VB or Pascal).

    Do you want to create your own program, but do not have special skills? Thanks to visual environments, programming has become available to all users of electronic devices.

    More recently, visual environments were primitive and had limited functionality, in contrast to the integrated ones based on working with languages. But digital technologies do not stand still, and today powerful tools are available to us that can replace code with a convenient interface.

    Principle of Visual Programming

    Visual environments are based on the same programming language, but unlike the IDE, you do not need to write it yourself here. The process of creating a program consists in the manipulation of blocks (their designation and connection in a serial circuit). The universal possibilities of visual environments make it possible to implement the most unusual ideas and speed up the creation process at times.

    To make it easier for you to choose the right program for you, we have put together best tools into a single archive. Choose and download your visual programming environment via torrent or file sharing services (MEGA or Yandex.Disk).

    Program Development Environments

    Integrated programming environments are different environments programming combined into one software package and using the same tools (the Microsoft Visual Studio example includes several programming languages, but with a combined compiler, i.e. in any programming language (from those included in the package), the program is written and then assembled (assembly each language has its own) and is passed to the compiler (one compiler) or use the same program debugging tools, etc.).

    Also, support for various ActiveX, COM, ADO and other technologies is integrated into the development environment, which allows you to write programs or components using these technologies.

    Usually the development environment includes text editor, a compiler and/or interpreter, build automation tools, and a debugger. Sometimes also contains tools for integration with version control systems and various tools to simplify the construction of a graphical user interface. Many modern development environments also include a class browser, an object inspector, and a class hierarchy diagram for use in object-oriented software development. Although there are development environments designed for multiple languages ​​- such as Eclipse or Microsoft Visual Studio - usually a development environment is intended for one specific programming language - such as Visual Basic.

    Example Development Environments - NetBeans, Eclipse, Sun Studio, Turbo Pascal, Borland C++, GNU toolchain, DrPython, Borland Delphi, PascalABC.NET, Dev-C++, Lazarus, KDevelop, QDevelop, QNX Momentics IDE, XCode

    Visual programming is a way of creating a computer program by manipulating graphic objects instead of writing its text.

    It is necessary to distinguish:

    graphic language programming - which is primarily a programming language (with its own syntax)

    visual development tools - as a rule, they mean interface design tools or some kind of CASE system. for rapid application development or a SCADA system for programming microcontrollers.

    Visual programming languages ​​can be further classified, depending on the type and degree of visual expression, into the following types:

    object-based languages, where the visual programming environment provides graphical or character elements that can be manipulated interactively according to some rules;

    languages ​​in whose integrated development environment forms are used at the interface design stage, with the ability to configure their properties. Examples: Delphi and C++ Builder by Borland, C#


    schema languages ​​based on the idea of ​​"shapes and lines", where shapes (rectangles, ovals, etc.) are treated as subjects and connected by lines (arrows, arcs, etc.) that represent relationships. Example: UML.

    With the invention of visual programming, the first sign of which was the Visual Basic development environment, creating a graphical user interface became possible even for a beginner. In a Visual Basic environment, you could quickly create an application for the Windows operating system that had all the elements inherent in a graphical user interface: windows, menus, buttons, input fields, and so on. All these elements have become the building blocks of the program - components - objects that have a visual representation at the design stage and during operation.

    Designing the user interface has become much simpler, however, for professional programmers, the Basic language turned out to be clearly weak. The lack of data type control and the mechanism for their expansion turned out to be a stumbling block in the way of creating serious programs. Creating non-standard components in the Visual Basic environment was extremely difficult (for this, one had to resort to other development tools, in particular, to the C ++ language). In general, the Visual Basic environment was great for prototyping applications, but not for developing commercial software products.