wiki.visual-prolog.com - User contributions [en]

File:FundamentalVisualPrologBusiness fig3.png

2008-09-30T16:53:46Z

VitalyBuylov: uploaded a new version of "Image:FundamentalVisualPrologBusiness fig3.png": 7201st3 has changed buttons layout.

Fundamental Visual Prolog - Business 03

{{Tutorial Image}}

File:FundamentalVisualPrologBusiness fig6.png

2008-09-30T16:51:03Z

VitalyBuylov: uploaded a new version of "Image:FundamentalVisualPrologBusiness fig6.png": 7201st3 doesn't have public/private radio button anymore.

Fundamental Visual Prolog - Business 06

{{Tutorial Image}}

Ide/Environment Overview

2008-09-30T16:45:00Z

VitalyBuylov:

In this tutorial I will give an overview of the Integrated Development Environment (IDE).The IDE is used to create, develop and maintain your Visual Prolog projects.

Briefly speaking you will use the IDE for the following tasks in a project life cycle:

*'''Creation''': The project is created in the IDE, at creation time you choose important properties of your project, such as whether the project is an executable or a DLL, whether it uses GUI or is text based, etc.

*'''Building''': The project is built, i.e. compiled and linked, from the IDE.

*'''Browsing''': The IDE and the compiler collect information about the project, which is utilized in various ways for quick localization of entities, etc.

*'''Development''': During the development and maintenance of the project, the IDE is used to add and remove source files and GUI entities to the project and to edit these.

*'''Debugging''': The IDE is also used for debugging the project. The debugger is used to follow program execution and exploit the program state when the program runs.In the sequel we will look more detailed at each of these things.

'''Notice''' that the tutorial will start from scratch and create a project that is used for the whole tutorial. The reader is encouraged to do the same. Also notice that clicking on reduced pictures will show them in full scale in a separate window.

==Creation==

First we will create a project by selecting '''Project -> New...''' in the menu. In response to this you are presented to a dialog containing various properties of the project.

[[Image:tut01_projectSettingsS.png]]

I have chosen that my project should have the name ''tut01''.

The project name is also used as the name of the target that is produced. In this case the target is an ''exe'' file so the target name will be ''tut01.exe''.

I have also chosen that the target should be a GUI program, i.e. a program with a graphical user interface.

The '''Base Directory''' is the "base" of all your projects; you should choose a place that is convenient for you.

The new project will be created in a '''Sub-Directory''' of the base directory. By default this directory have the same name as the project itself.

The '''Package Prefix''' is used when creating new "packages" in the system (a later tutorial will explain about the package notion). In case your source files will ever be shared with somebody else it is a good idea if the prefix does not conflict with other prefixes. Therefore it is a good idea to use a prefix that start with a reverse Internet domain name, like ''com/visual-prolog ''(which is the reverse of ''visual-prolog.com'').

For the moment you do not need to consider the remaining tabs and options.

Now create the project by pressing '''OK'''.

The IDE will now look something like this:

[[Image:tut01_totalS.png]] [[Image:tut01_message.png]]

To the left you have the '''Project Window''', which contains information about the entities in your project. Right now there is not very much information, but once we compile the project information will be added. We will explore this window more when we have compiled the project.

To the right/bottom you have the '''Messages Window''', which will contain various status and progress messages.

==Building==

Before we make any modifications, we will build (i.e. compile and link) the project. In the '''Build''' menu you find commands for building, compiling and executing the project.

If you choose '''Execute''' the project is first build, so that it is an up to date version you execute. Therefore I will choose '''Execute'''.

If you have not registered Visual Prolog you will be presented to a special screen telling you so. I will suggest that you register, but you can also choose "Continue Evaluation".

In the '''Messages Window''' the IDE writes which files are compiled, etc.

If the build process succeeds, which it does in this case, the created program is executed. As a result you will see a little ''doing-nothing ''GUI program. You might notice that the program looks a bit like the IDE itself. This is no coincidence since the IDE is actually a Visual Prolog program.

Later in this tutorial we will also see what happens, if the compiler or the linker detects errors in the build process.

==Browsing==

Right now we will turn our eyes to the '''Project Tree''' in the '''Project Window''', and explore that a bit. The tree itself is presented in a standard Windows tree control so you should already be familiar with its usage. Here we shall concentrate on the contents of the tree.

Right now the project tree will look like this:

[[Image:tut01_projectWindow1.png|Project Tree]]

The top node represents the project, and the project directory.

Right below that is the logical node '''$(ProDir)''' which represents the directory in which Visual Prolog is installed. This directory contains (as we shall shortly see) libraries and library code from the Visual Prolog system.

Then comes another directory '''TaskWindow,''' which is a subdirectory of the project directory. This directory contains all the code needed to produce the Task Window, its menu and toolbar and the about dialog.

Finally, you see a number of files. Visual Prolog uses the following conventions:

*.'''ph''' files are '''package headers'''. A package is a collection of classes and interfaces that are intended to be used as a chunk.
*.'''pack''' files are '''packages'''. They contain the implementation/definition of the corresponding .ph files.
*.'''i''' file contains an '''interface'''.
*.'''cl''' file contains a '''class declaration'''
*.'''pro''' file contains a '''class implementation'''

If you expand the main.cl node completely you will see the following:

[[Image:tut01_projectWindow2.png|Project Tree]]

This sub-tree shows that the file '''main.cl''' contains a class called '''main''', which contains two predicates called classinfo and run respectively. Predicates are subroutines, but they will not be considered further in this tutorial.

If we collapse this node again and instead expand the '''TaskWindow''' node, you will see this tree:

You will notice several new kinds of nodes:

*.'''dlg''' file contains a '''dialog'''

*.'''frm''' file contains a '''form'''

*.'''win''' file contains a '''window''' (task window or conventional PFC GUI window)

*.'''mnu''' file contains a '''menu'''

*.'''ico''' file contains an '''icon'''

If you continue to explore you might also meet:

[[Image:tut01_projectWindow3.png|Project Tree: TaskWindow]]

*.'''ctl''' files containing '''controls'''

*.'''tb''' files containing '''toolbars'''

*.'''cur''' files containing '''cursors'''

*.'''bmp''' files containing '''bitmaps'''

*.'''lib''' that are '''libraries'''

If you right click on a node a context menu will appear, with commands that have relevance for that particular node.

If you double click on a node the corresponding entity will be brought up in a suitable editor. All code is edited in a text editor, but windows resources like dialogs and menus are edited in graphical editors. We will look closer to graphical editors below, here we shall try to bring up a text editor.

Some entities are represented twice in the tree, because they have both a declaration and a definition/implementation. For example, the predicate run in the class '''tut01''':

[[Image:tut01_projectWindow2.png|Project Tree]] [[Image:tut01_projectWindow4.png|Project Tree]]

Try double clicking on each of the run nodes, and notice that two editors open showing the declaration and the definition of the run predicate, respectively.

The IDE has other facilities for browsing to specific entities, but these will not be considered here.

==Development==

Now lets try to modify the project a bit. Since we have not yet concerned ourselves with how to program in Visual Prolog, we will keep the changes simple.

We will start by deliberately introducing an error, that way you will not be completely surprised if you make some thing wrong, at the same time you can see the error window.

First you should locate the clauses for the run predicate in the file '''main.pro'''. If you double click the last of the two run nodes in the project tree, an editor opens with the caret placed like this:

[[Image:tut01_editRun1S.png]]

Try inserting a fail like this (notice the comma after show):

<vip>clauses
run():-
TaskWindow = taskWindow::new(),
TaskWindow:show(),
fail.</vip>

After that we try to build the project again: simply press the '''Ctrl+Shift+B''' key combination. The system will now save and compile the file, but since we have made an error, the '''Error Window''' will open:

[[Image:tut01_errorS.png|Error Wondow]]

We will consider what the error message actually means. Instead you should try to double-click on the error message. You will notice that the editor gets focus again and that the caret points exactly to the fail we inserted.

Reestablish the code without the fail and build the project again.

Next we will try to make a modification in the about dialog. It is not a very sensible change, but it will illustrate a number of things.

First we will open the '''About''' dialog in the '''Dialog Editor''', to do this you double click the dialog in the project tree. The node you have to double click is shown here:

[[Image:tut01_projectWindowAbout.png|Project Window: About Dialog]]

Once you have clicked it you will see the dialog in the '''Dialog Editor''', two toolbars and properties window.

We will add a button to the dialog. You click on the "button" on the controls toolbar, and then you click in the dialog next to the project icon in the '''AboutDialog''' window. As a result you can see the properties of the new control and you can edit them. I have changed the '''Text''' to "Press Me", this is the text that will appear on the button. I can also see the '''Name''' field, the IDE will identify this particular control in various contexts by this Name.

Now it should look something like this:

[[Image:tut01_dialogEditorAbout2.png|Dialog Editor: About Dialog with new button]]

Now we want to do something whenever the button is pressed. To do this we will open the '''Code Expert''': Right click the dialog and select '''Code Expert'''. The code expert will open and I have located my button.

The blue dot indicates that the control is not handled. The IDE has suggested the name onPushButton for the handling predicate. We will choose '''Add''' to add this predicate to our code and to bind it to this control.

If you double-click the line corresponding to the control in the code expert, an editor will open positioned at the newly inserted code.

We will change the button text when the button is pressed. To do this we modify the code as follows:

<vip>predicates
onPushButtonClick : button::clickResponder.
clauses
onPushButtonClick(_Source) = button::defaultAction() :-
pushButton_ctl:setText("Pressed").</vip>

Now try to build and execute the program again (i.e. press the '''Ctrl+Shift+B''' key combination). If you have followed the steps carefully this should be a success. In the program you should of course open the '''About''' dialog, by selecting the menu entry '''Help -> About'''; and then press the new button.

This is how it looked in my application:

[[Image:tut01_AboutPressMe.png|About: Press Me]][[Image:tut01_AboutPressed.png|About Pressed]]

==Debugging==

The development environment contains a debugger. With the debugger you can trace the execution of your program and examine the program state.

It does not make much sense to go into details with debugging before you have learned the Visual Prolog language. But I will briefly explain the debugger anyway, because it can be very useful for understanding and experimenting with the language.

To start the debugger, select '''Debug -> Run''' in the menu. If the project is not up-to-date it will first be build, after that the debugging session will start.

'''Notice''' you can stop the debugging at any time by selecting '''Debug -> Stop Debugging''' in the menu.

When debugging starts the IDE will first load the debug information and then it will enter the program. The program execution is stopped just before the goal is executed. To indicate this, the goal is opened in an editor window, and the blue arrow points to the goal:

[[Image:tut01_debug1.png|Editor: Current Position]]

You can single step in the program using the '''Step Into '''and '''Step Over''' commands in the '''Debug '''menu.

Try '''Step Into''': this will open another editor with the code of mainExe::run, and the arrow will point to the entry of this code.

In the view menu you can open various debugger windows, which I will briefly explain.

The '''Run Stack''' window:

[[Image:tut01_runStack.png|Run Stack]]

contains a "picture" of the run stack. Exactly what you see depends on your settings in '''Tools -> Options... -> Debugger'''. In principle, the run stack contains a number of lines corresponding to calls that has been made. However, optimization (so called last call optimization) might have removed some entries.

The run stack not only shows the calls, it also shows trap points and backtrack points, these is described in a later tutorial and there I also describe the run stack window in more details.

The '''Local Variables''' window:

[[Image:tut01_localVariables.png|Local Variables]]

contains the local variables corresponding to the selection in the run stack window. Some variables might not yet have received a value, these are show as an underscore (i.e. like originalraiser in the above picture).

The '''Facts''' window:

[[Image:tut01_factsWindow.png|Facts]]

Contains the global state of the program, this state is stored in fact databases. ''Fact databases ''are a unique Visual Prolog feature, which will be described in a later tutorial. You can also add objects from the '''Local Variables '''window to the '''Facts''' window, that way you can track the state changes in interesting objects.

The '''Breakpoints '''window:

[[Image:tut01_breakPointsWindow.png]]

shows the current breakpoints in the program (I have set open breakpoint so that the window would not be empty). You can set/remove breakpoints by selecting '''Debug -> Toggle Breakpoint'''.

The remaining debug windows are for low level debugging and will not be considered here.

==Summary==

The Integrated Development Environment (IDE) makes it possible for you to:

*create

*build

*maintain, and

*debug

your projects. It contains a number of tools, editor and wizards that will help you in your tasks.

==References==

*[[IDE Key Bindings]]

[[ru:Среда_разработки]]
[[Category:Tutorials]]
[[Category:IDE]]

Ide/Environment Overview

2008-09-30T16:43:32Z

VitalyBuylov:

In this tutorial I will give an overview of the Integrated Development Environment (IDE).The IDE is used to create, develop and maintain your Visual Prolog projects.

Briefly speaking you will use the IDE for the following tasks in a project life cycle:

*'''Creation''': The project is created in the IDE, at creation time you choose important properties of your project, such as whether the project is an executable or a DLL, whether it uses GUI or is text based, etc.

*'''Building''': The project is built, i.e. compiled and linked, from the IDE.

*'''Browsing''': The IDE and the compiler collect information about the project, which is utilized in various ways for quick localization of entities, etc.

*'''Development''': During the development and maintenance of the project, the IDE is used to add and remove source files and GUI entities to the project and to edit these.

*'''Debugging''': The IDE is also used for debugging the project. The debugger is used to follow program execution and exploit the program state when the program runs.In the sequel we will look more detailed at each of these things.

'''Notice''' that the tutorial will start from scratch and create a project that is used for the whole tutorial. The reader is encouraged to do the same. Also notice that clicking on reduced pictures will show them in full scale in a separate window.

==Creation==

First we will create a project by selecting '''Project -> New...''' in the menu. In response to this you are presented to a dialog containing various properties of the project.

[[Image:tut01_projectSettingsS.png]]

I have chosen that my project should have the name ''tut01''.

The project name is also used as the name of the target that is produced. In this case the target is an ''exe'' file so the target name will be ''tut01.exe''.

I have also chosen that the target should be a GUI program, i.e. a program with a graphical user interface.

The '''Base Directory''' is the "base" of all your projects; you should choose a place that is convenient for you.

The new project will be created in a '''Sub-Directory''' of the base directory. By default this directory have the same name as the project itself.

The '''Package Prefix''' is used when creating new "packages" in the system (a later tutorial will explain about the package notion). In case your source files will ever be shared with somebody else it is a good idea if the prefix does not conflict with other prefixes. Therefore it is a good idea to use a prefix that start with a reverse Internet domain name, like ''com/visual-prolog ''(which is the reverse of ''visual-prolog.com'').

For the moment you do not need to consider the remaining tabs and options.

Now create the project by pressing '''OK'''.

The IDE will now look something like this:

[[Image:tut01_totalS.png]] [[Image:tut01_message.png]]

To the left you have the '''Project Window''', which contains information about the entities in your project. Right now there is not very much information, but once we compile the project information will be added. We will explore this window more when we have compiled the project.

To the right/bottom you have the '''Messages Window''', which will contain various status and progress messages.

==Building==

Before we make any modifications, we will build (i.e. compile and link) the project. In the '''Build''' menu you find commands for building, compiling and executing the project.

If you choose '''Execute''' the project is first build, so that it is an up to date version you execute. Therefore I will choose '''Execute'''.

If you have not registered Visual Prolog you will be presented to a special screen telling you so. I will suggest that you register, but you can also choose "Continue Evaluation".

In the '''Messages Window''' the IDE writes which files are compiled, etc.

If the build process succeeds, which it does in this case, the created program is executed. As a result you will see a little ''doing-nothing ''GUI program. You might notice that the program looks a bit like the IDE itself. This is no coincidence since the IDE is actually a Visual Prolog program.

Later in this tutorial we will also see what happens, if the compiler or the linker detects errors in the build process.

==Browsing==

Right now we will turn our eyes to the '''Project Tree''' in the '''Project Window''', and explore that a bit. The tree itself is presented in a standard Windows tree control so you should already be familiar with its usage. Here we shall concentrate on the contents of the tree.

Right now the project tree will look like this:

[[Image:tut01_projectWindow1.png|Project Tree]]

The top node represents the project, and the project directory.

Right below that is the logical node '''$(ProDir)''' which represents the directory in which Visual Prolog is installed. This directory contains (as we shall shortly see) libraries and library code from the Visual Prolog system.

Then comes another directory '''TaskWindow,''' which is a subdirectory of the project directory. This directory contains all the code needed to produce the Task Window, its menu and toolbar and the about dialog.

Finally, you see a number of files. Visual Prolog uses the following conventions:

*.'''ph''' files are '''package headers'''. A package is a collection of classes and interfaces that are intended to be used as a chunk.
*.'''pack''' files are '''packages'''. They contain the implementation/definition of the corresponding .ph files.
*.'''i''' file contains an '''interface'''.
*.'''cl''' file contains a '''class declaration'''
*.'''pro''' file contains a '''class implementation'''

If you expand the main.cl node completely you will see the following:

[[Image:tut01_projectWindow2.png|Project Tree]]

This sub-tree shows that the file '''main.cl''' contains a class called '''main''', which contains two predicates called classinfo and run respectively. Predicates are subroutines, but they will not be considered further in this tutorial.

If we collapse this node again and instead expand the '''TaskWindow''' node, you will see this tree:

You will notice several new kinds of nodes:

*.'''dlg''' file contains a '''dialog'''

*.'''frm''' file contains a '''form'''

*.'''win''' file contains a '''window''' (task window or conventional PFC GUI window)

*.'''mnu''' file contains a '''menu'''

*.'''ico''' file contains an '''icon'''

If you continue to explore you might also meet:

[[Image:tut01_projectWindow3.png|Project Tree: TaskWindow]]

*.'''ctl''' files containing '''controls'''

*.'''tb''' files containing '''toolbars'''

*.'''cur''' files containing '''cursors'''

*.'''bmp''' files containing '''bitmaps'''

*.'''lib''' that are '''libraries'''

If you right click on a node a context menu will appear, with commands that have relevance for that particular node.

If you double click on a node the corresponding entity will be brought up in a suitable editor. All code is edited in a text editor, but windows resources like dialogs and menus are edited in graphical editors. We will look closer to graphical editors below, here we shall try to bring up a text editor.

Some entities are represented twice in the tree, because they have both a declaration and a definition/implementation. For example, the predicate run in the class '''tut01''':

[[Image:tut01_projectWindow2.png|Project Tree]] [[Image:tut01_projectWindow4.png|Project Tree]]

Try double clicking on each of the run nodes, and notice that two editors open showing the declaration and the definition of the run predicate, respectively.

The IDE has other facilities for browsing to specific entities, but these will not be considered here.

==Development==

Now lets try to modify the project a bit. Since we have not yet concerned ourselves with how to program in Visual Prolog, we will keep the changes simple.

We will start by deliberately introducing an error, that way you will not be completely surprised if you make some thing wrong, at the same time you can see the error window.

First you should locate the clauses for the run predicate in the file '''main.pro'''. If you double click the last of the two run nodes in the project tree, an editor opens with the caret placed like this:

[[Image:tut01_editRun1S.png]]

Try inserting a fail like this (notice the comma after show):

<vip>clauses
run():-
TaskWindow = taskWindow::new(),
TaskWindow:show(),
fail.</vip>

After that we try to build the project again: simply press the '''Ctrl-Shift-B''' key combination. The system will now save and compile the file, but since we have made an error, the '''Error Window''' will open:

[[Image:tut01_errorS.png|Error Wondow]]

We will consider what the error message actually means. Instead you should try to double-click on the error message. You will notice that the editor gets focus again and that the caret points exactly to the fail we inserted.

Reestablish the code without the fail and build the project again.

Next we will try to make a modification in the about dialog. It is not a very sensible change, but it will illustrate a number of things.

First we will open the '''About''' dialog in the '''Dialog Editor''', to do this you double click the dialog in the project tree. The node you have to double click is shown here:

[[Image:tut01_projectWindowAbout.png|Project Window: About Dialog]]

Once you have clicked it you will see the dialog in the '''Dialog Editor''', two toolbars and properties window.

We will add a button to the dialog. You click on the "button" on the controls toolbar, and then you click in the dialog next to the project icon in the '''AboutDialog''' window. As a result you can see the properties of the new control and you can edit them. I have changed the '''Text''' to "Press Me", this is the text that will appear on the button. I can also see the '''Name''' field, the IDE will identify this particular control in various contexts by this Name.

Now it should look something like this:

[[Image:tut01_dialogEditorAbout2.png|Dialog Editor: About Dialog with new button]]

Now we want to do something whenever the button is pressed. To do this we will open the '''Code Expert''': Right click the dialog and select '''Code Expert'''. The code expert will open and I have located my button.

The blue dot indicates that the control is not handled. The IDE has suggested the name onPushButton for the handling predicate. We will choose '''Add''' to add this predicate to our code and to bind it to this control.

If you double-click the line corresponding to the control in the code expert, an editor will open positioned at the newly inserted code.

We will change the button text when the button is pressed. To do this we modify the code as follows:

<vip>predicates
onPushButtonClick : button::clickResponder.
clauses
onPushButtonClick(_Source) = button::defaultAction() :-
pushButton_ctl:setText("Pressed").</vip>

Now try to build and execute the program again (i.e. press the '''Ctrl-Shift-B''' key combination). If you have followed the steps carefully this should be a success. In the program you should of course open the '''About''' dialog, by selecting the menu entry '''Help -> About'''; and then press the new button.

This is how it looked in my application:

[[Image:tut01_AboutPressMe.png|About: Press Me]][[Image:tut01_AboutPressed.png|About Pressed]]

==Debugging==

The development environment contains a debugger. With the debugger you can trace the execution of your program and examine the program state.

It does not make much sense to go into details with debugging before you have learned the Visual Prolog language. But I will briefly explain the debugger anyway, because it can be very useful for understanding and experimenting with the language.

To start the debugger, select '''Debug -> Run''' in the menu. If the project is not up-to-date it will first be build, after that the debugging session will start.

'''Notice''' you can stop the debugging at any time by selecting '''Debug -> Stop Debugging''' in the menu.

When debugging starts the IDE will first load the debug information and then it will enter the program. The program execution is stopped just before the goal is executed. To indicate this, the goal is opened in an editor window, and the blue arrow points to the goal:

[[Image:tut01_debug1.png|Editor: Current Position]]

You can single step in the program using the '''Step Into '''and '''Step Over''' commands in the '''Debug '''menu.

Try '''Step Into''': this will open another editor with the code of mainExe::run, and the arrow will point to the entry of this code.

In the view menu you can open various debugger windows, which I will briefly explain.

The '''Run Stack''' window:

[[Image:tut01_runStack.png|Run Stack]]

contains a "picture" of the run stack. Exactly what you see depends on your settings in '''Tools -> Options... -> Debugger'''. In principle, the run stack contains a number of lines corresponding to calls that has been made. However, optimization (so called last call optimization) might have removed some entries.

The run stack not only shows the calls, it also shows trap points and backtrack points, these is described in a later tutorial and there I also describe the run stack window in more details.

The '''Local Variables''' window:

[[Image:tut01_localVariables.png|Local Variables]]

contains the local variables corresponding to the selection in the run stack window. Some variables might not yet have received a value, these are show as an underscore (i.e. like originalraiser in the above picture).

The '''Facts''' window:

[[Image:tut01_factsWindow.png|Facts]]

Contains the global state of the program, this state is stored in fact databases. ''Fact databases ''are a unique Visual Prolog feature, which will be described in a later tutorial. You can also add objects from the '''Local Variables '''window to the '''Facts''' window, that way you can track the state changes in interesting objects.

The '''Breakpoints '''window:

[[Image:tut01_breakPointsWindow.png]]

shows the current breakpoints in the program (I have set open breakpoint so that the window would not be empty). You can set/remove breakpoints by selecting '''Debug -> Toggle Breakpoint'''.

The remaining debug windows are for low level debugging and will not be considered here.

==Summary==

The Integrated Development Environment (IDE) makes it possible for you to:

*create

*build

*maintain, and

*debug

your projects. It contains a number of tools, editor and wizards that will help you in your tasks.

==References==

*[[IDE Key Bindings]]

[[ru:Среда_разработки]]
[[Category:Tutorials]]
[[Category:IDE]]

CGI Applications

2008-09-30T16:04:18Z

VitalyBuylov:

{{CGI Applications Navbar}}

'''CGI''' stands for [[wikipedia:Common Gateway Interface|'''C'''ommon '''G'''ateway '''I'''nterface]]. It is a specification recommended by the World Wide Web Consortium for one kind of information streaming in and out of web servers.

As you maybe know, HTML browsers (such as Internet Explorer, Netscape etc.) send and receive information from web servers. But the experience of the world wide web is not a simple act of just reading some hyper-linked HTML files. There is interaction. Data moves both in and out of a browser, including data filled into forms in the browser by the user. There are many things the web server cannot handle on its own. How does it then handle such interactive data?

A web server is a primitive creature actually. It usually serves out HTML files; and other files of mime-types that it recognizes, back to the browsers. It usually cannot do advanced stuff, like accessing a database in the background and sending database queries back to the browsers. CGI was invented to increase the functionality of web servers. It allows web servers to talk to CGI applications residing on the same machine as the web server itself. CGI applications do the job that the web server by itself is unable to do. For example; accessing databases in the background or conducting sophisticated searches. Web servers that use CGI, are usually able to send more information to the browsers than those that do not use CGI.

===What is the significance of a 'common gateway?'===

The word 'common' signifies that the convention is accepted by all web servers. The word 'gateway' represents the fact that data is obtained, as if by stepping through a 'door' or a gateway into other processes that lay on the other side. Metaphorically, a web server stands on one side of the gateway and a CGI application stand on the other side and both of them ''talk'' to each other using CGI.

===What is streaming?===

By the term streaming, we mean that the information is processed one character at a time in a long queue. Think of a pipe whose diameter allows only one character to pass through at any instance. The characters passing through the pipe will emerge at the other pipe end, only one character at a time, in the form of a stream.

Just like in a pipe, where water cannot go streaming in both directions; a stream in the programming world cannot be both readable and writable simultaneously. Either characters come out from the stream (which means the stream is a readable stream), or characters are placed into the stream (a writable stream) but the same stream cannot be used for both purposes by a single program.

In the case of CGI applications, the characters are in '''ANSI''' format, and so they are 8-bit characters. This point has to be noted later on, as Visual Prolog by default uses '''[[Unicode]]''' characters, which are 16-bit. There are predicates available in Visual Prolog that collect streamed ANSI characters together, so processing streams would not be a problem. Eventually, it must be pointed out, our experience of the world wide web happens because of the streaming characters arriving through the Internet pipeline into our browsers one character at a time. We just don't notice it though, because once the individual characters reach the browser, they are quickly assembled together.

===What is a mime-type?===

Think of mime-type as a file extension. It tells the web server the kind of files it and its clients (i.e., browsers) can handle. Most web servers determine the mime-type by the file extensions it sees. When a browser interacts with a web server, it initially informs the web server about the mime-type handling capabilities the browser has, along with the resource (file of a particular mime-type, etc.) it wants the web server to give. The web server sends over the requisite file to the browser for the browser to display. Examples are: .html, .jpg, .gif, etc. Non-recognized mime-types are either not sent to the browser by the web server, or are sent as plain ASCII or as HTML (the actual behavior depends on the web server).

As the information is sent as a stream to the browser, the web server embeds some headers at the start of the stream, containing the mime-type. See Illustration 1 for a typical example of what gets sent across from a web server to a browser. Once these files with mime-types reach the browser, it analyzes the headers, deduces the mime-type the data represents, and as per its own internal table of mime-types it can handle, it displays the data accordingly.

[[Image:cgiApplicationsInVisualProlog06.jpg|frame|Illustration 1]]

===What is a header?===

A header, in the context of this tutorial, is a line of text followed by a carriage return embedded in the stream before the actual data begins. In Illustration 1, the lines you see above the data, are the headers that were passed by the web server to the browser. There is a blank line separating the headers from the actual data.

Notice the 'Content-type:...' header in the illustration. That line indicates the mime-type of the data. This particular line is specifically relevant to CGI applications, as when a web server calls on the services of a CGI application to provide data to be passed on to a browser, it is clueless on the mime-type of the data that the CGI application would be giving. Hence, by convention, the CGI application is responsible for pass this particular header before the rest of the data (separated by a blank line). Note this point carefully when we actually get around to programming CGI applications, because forgetting either the Content-type header or the blank line (between the set of headers and the actual data), or both is a common occurrence and it can lead to a lot of agony. 

===What is a CGI application?===

A CGI application or a gateway program (see Illustration 2) is an executable file (usually an .exe file), which does not receive any information via the keyboard or the mouse, i.e., it is not an interactive application (a GUI application would be an interactive application). Such applications are known as console applications. They receive their inputs using the ''stdin'' stream and they put out their outputs into the ''stdout'' stream. 
The rest of the headers are added by the web server after a CGI application does its work, and the compiled information is then passed to the browser.

[[Image:cgiApplicationsInVisualProlog07.jpg|frame|Illustration 2]]

In case of CGI applications, once you start them, they terminate on its own without any inputs from you. You can say that they work ''automatically'' like the old DOS command line programs such as xcopy, or format, etc.

A CGI application, however, is not just any console application. It would expect the inputs as per the CGI specification and its outputs should also conform to the CGI specification.

In certain situations, a CGI application can be written as a .DLL file; but such variations are web server dependent. There are even more exotic variations possible. For example, even batch files (.bat files) can be made into simple CGI applications, provided the web server is configured to accept such files as CGI applications. Let us not get into those variations. For the purpose of this tutorial we'll assume that a CGI application is an executable, console application (.exe file), adhering to the CGI specifications.

===What are ''stdin'' and ''stdout'' streams?===

''stdin'' is the name given in various programming languages, to a special stream that acts as the input stream from the underlying OS (Operating System). Programs (such as those written in Visual Prolog) can read the ''stdin'' stream, and use the characters given by that stream as their input. Similarly, ''stdout'' is a stream managed by the OS into which programs will output their characters into.

The ''stdout'' and ''stdin'' streams can be daisy chained (i.e joined end to end) from different programs. For example, a program 'A' can write into its ''stdout'' stream, and then call a program 'B', which in turn will use the ''stdin'' stream to pick up what was written by the program 'A'. This is essentially the transfer mechanism used by web servers: in the previous example, the program 'A' represents the web server and the program 'B' is the CGI application. The ''stdin'' and ''stdout'' streams are often referred together as the console.

===How does the flow of information take place, using CGI?===

The information flow starts from a request placed by the client (i.e., the browser) with the web server. As noted before, the client tells the web server about the various capabilities it has, and also speciies the information that it requires from the web server. See Illustration 3, which shows what gets sent by a browser (the client) to the web server.

[[Image:cgiApplicationsInVisualProlog08.jpg|frame|Illustration 3]]

The first line contains the method field. This indicates the desired HTTP method, the resource being requested, the protocol version, etc., i.e., GET /Tests/file.html HTTP/1.0''.'' Though /Test/file.html looks like a path, it is actually known as a URL (Uniform Resource Locator) and it represents a whole lot of things; including actual filenames and directories on the machine where the web server is located.

Other common methods are '''POST''' (for sending data from the client to the server (not as part of the URL)) and '''HEAD''' (retrieve only header information about the resource).Other fields contain information about the client. The '''Accept:''' fields tell the server the different types of data that the client can accept. These are sent as MIME Content-type messages. Thus Accept: text/plain means that the client can accept plain text files, and so on. This MIME type is important, as this is how web servers tell clients the type of data being sent. The other headers are informational: '''User-Agent:''' - a program making the request, '''From:''' - who is making the request, '''Referer:''' - gives the URL of the document making this request, and so on. The server responds by returning the desired data. It first sends server response headers, which communicate information about the state of the transaction, the type of data being sent, and any additional information. This is followed by a blank line and then the actual data being sent to the client. We saw this, in Illustration 1. Where does the CGI come into this?, - you may wonder. Well, let us re-visit the requested resource, which is in the above example /Tests/file.htm''l,'' if instead of that, it was /cgi-bin/helloworld.exe. Many web servers are configured to let the partial URL /cgi-bin/ indicate that helloword.exe is a CGI program, which the WEB server must invoke.

Hence helloword.exe would be called by the web server and it would pass on some information to helloworld.exe using some environment variables and the ''stdout'' stream (which is the ''stdin'' stream for helloworld.exe). The web server will then wait till the CGI application, helloworld.exe, finishes its work.

Once helloworld.exe ceases execution, the web server would gather the data written by helloworld.exe (including the Content-type header), and send it to the waiting browser.

Phew! All that should ideally happen in the smallest period possible.

Thankfully, all web servers are designed to do its job well and so we do not have to worry about the assembly work performed by a web server after it invokes a CGI application. Let us concentrate instead on how a CGI application should read information from the web server and then pass its data back to the web server, after doing its work.

===What is an environment variable?===

All OS (Operating Systems) allow programmers to insert name=value relationships in what are known as environment variables, somewhere in the computer's RAM (Random Access Memory). For example; the PATH setting in DOS is an environment variable. You can examine the various environment variables that are set for DOS (or Windows XP or Windows 2000 for that matter) using the SET command. Just give SET command on a command line prompt, and the console will display all the currently available environment variables. (In the displayed list, you would see PATH also).

The best part of the concept of environment variables is that you can cook up your very own variables and assign values to them. For example; if you want to keep a password around somewhere, you could do this using the SET command at the OS command line:

<pre>SET password=xyze</pre>Though the value is a string, you don't have to give quotes. All values are internally stored as strings, and they are retrieved by Visual Prolog programs as strings. The significance of environment variables in CGI applications is that a web server uses various environment variables also to pass information to the CGI application that it invokes. Here is an example.

We learnt that a web server places a lot of data on the ''stdout'' stream before calling a CGI application. How does the CGI application know the number of characters to read from the flowing stream? To facilitate this, the web server places the content length into an environment variable called, CONTENT_LENGTH, and using that environment variable's value the CGI application can read the right amount of characters from the stream. Let us examine some Visual Prolog code from cgi.pro (as part of the CGI pack that came with Visual Prolog) that does this: 

<vip>clauses
retrieve_POST_string() = Result :- % Get the length
LenStr = environment::getVariable('CONTENT_LENGTH'),
Len = toTerm(LenStr),
%Read the stream to the desired length only
Stream = console::getConsoleInputStream(),
Stream:setMode(stream::ansi(ansi())),
%The stream is in ANSI mode!
Result = Stream:readString(Len).</vip>

Apart from CONTENT_LENGTH, most web servers set the following ''standard'' environment variables before starting a CGI application. A few additions and subtractions may be possible to these environment variables, depending on the web server that you use. The CGI application, in turn can then look for those variables and use the values that are contained therein. The reader is requested to read about these environment variables elsewhere, else this tutorial would become too lengthy. Of these, the environment variable HTTP_REFERER can be useful in implementing some simple security measures (described later in Section B of the tutorial).

<pre>PATH_INFO
PATH_TRANSLATED
REMOTE_HOST
REMOTE_ADDR
GATEWAY_INTERFACE
SCRIPT_NAME
REQUEST_METHOD
HTTP_ACCEPT
HTTP_ACCEPT_CHARSET
HTTP_ACCEPT_ENCODING
HTTP_ACCEPT_LANGUAGE
HTTP_FROM HTTP_HOST
HTTP_REFERER
HTTP_USER_AGENT
HTTP_COOKIE
QUERY_STRING
SERVER_SOFTWARE
SERVER_NAME
SERVER_PROTOCOL
SERVER_PORT
CONTENT_TYPE
CONTENT_LENGTH
USER_NAME
USER_PASSWORD
AUTH_TYPE</pre>

===How do I test CGI applications?===

You would need to have a web server installed, along with your CGI application in order to test it. You would also need support HTML files, which will trigger the CGI application through the web server. They will obviously vary from one application to another. You'll become aware of such support files, when you study the examples.

As indicated somewhere before, a CGI application has to be placed in the same machine, where the web server is itself running. For reasons of security, a web server is able to fetch files from only a specific set of directories (the set is known as the web-path) on the host machine. Therefore, you should place a CGI application files (CGI executable file and HTML files) into one of these directories.If that was not the case, some malicious user may try to fetch files that should not have been retrievable.

Similarly, a web server can only invoke a CGI application if it is placed in the right directory. You cannot place the CGI application anywhere on the web-path (well, a few web server do allow that too, but not all). Now, all web servers have a configuration method (a separate configuration file, or an .ini file or the windows registry, etc.) to configure its various settings. One of the crucial settings is the location of the CGI applications. When you zero in on a web server for your CGI application, the first thing you should study is how that particular web server configures its CGI application directories.

===Which web server to use?===

As indicated before, web servers are not complicated pieces of software. There are many web servers available free of cost. A large list can be seen at: http://www.serverwatch.com/stypes/index.php/d2Vi . That list includes both commercial software as well as free ones. The complexity of the web server is usually the configuration of the web-path and CGI application directory/directories of the web server.

The TCP-IP protocol should be installed in the computer where the web server is to be setup (It usually would be, if you are able to browse the Internet from that computer) Once you have successfully installed a web server, you should be able to get data from the web server by supplying either the IP address or the domain name of the machine where the web server is installed. Please note that the CGI programs should work fine with the most of web servers including the IIS5 web server which is usually included with Windows 2000 by Microsoft.

===Where to place the CGI application?===

Ensure that the CGI application is placed correctly in such a web server's appropriate script directory. This will vary from a web server to a web server. In this tutorial, we will assume that you have placed it in such a directory that it can be invoked using a browser on the server machine with the following URL: '''<nowiki>http://localhost/cgi-bin/</nowiki>'''''<APPNAME>''.

For example, if you have a CGI application called example1.exe, then it should be accessible with the following URL, on the server machine: '''<nowiki>http://localhost/cgi-bin/example1.exe</nowiki>'''.

===Can you show me a very simple CGI application created using Visual Prolog?===

Yes, indeed! You should unzip the file example1.zip that is included into cgitutorial.zip into a convenient place and examine the Visual Prolog files therein. But, you can create such an application from scratch too by following the instructions given below.

Start a new Visual Prolog project. Note that the UI Strategy is Console:

[[Image:cgiApplicationsInVisualProlog01.png]]

The main Project tree would get displayed. It will include all the necessary files that the IDE has intelligently decided you may require.

[[Image:cgiApplicationsInVisualProlog02.png]]

Now, click on the main ''Build'' menu, and in that menu, select ''Build'' or press '''Ctrl-Shift-B'''. You'll notice something magical, as the build process continues. As the project is being built, the IDE will pull in all the relevant PFC (Prolog Foundation Classes) files that were not visible earlier in the Project Tree. After the build process is over, the Project Tree will now look like this:

[[Image:cgiApplicationsInVisualProlog03.png]]

Congratulations! You have finished 95% of the job. Now you would be having a console application in the EXE folder of your project, which currently does nothing. We need now to add the relevant code to transform the application into a CGI application

As explained in the earlier sections of this tutorial, a CGI application expects some input from the ''stdin'' stream (Along with some environment variables), then it does its work and sends out the output through the ''stdout'' stream. As this is a very simple CGI application (our very first one) we'll ignore all input arriving into our CGI application from the ''stdin'' stream, (which the web server may be sending to the CGI application). Instead, we'll make our little application send some output.

Double click on the file '''main.pro''' in the Project Tree, and go towards the end of the code:

[[Image:cgiApplicationsInVisualProlog04.png]]

You'll notice that the main goal of the program invokes a predicate called run from the PFC module mainEXE. That module in turns invokes the predicate called '''run()''' from '''main.pro''', so let us have a look at that:

<vip>clauses
run():-
console::init(),
succeed(). % place your own code here</vip>

We'll modify that code to make it look like this:

<vip>clauses
run():-
console::init(), %Line 1
cgi::init(stream::ansi(core::ansi)), %Line 2
stdIO::write("Content-type: text/html\n"), %Line 3
stdIO::write("\n"), %Line 4
stdIO::write("<html><body><h1>Hello World!</h1></body></html>"). %Line 5</vip>

Let us now go through the code, line by line:

*'''Line 1:''' is a Visual Prolog requirement. All work using the ''console'', should first start with console::init() .

*'''Line 2:''' captures the ''stdout'' stream object to CGI output. As explained in the paragraph of this tutorial, the CGI application is expected to send its output to the ''stdout''.

*'''Line 3:''' Now the CGI application is prepared to send the first line back to the calling web server. As explained in the paragraph of this tutorial, the data has to be preceded by some headers. The header which is mandatory is the one that sets the mime-type of the data. Here, it states that the Content-type of the data is of the mime-type text/html. Notice that the line ends in a carriage return (\n).

*'''Line 4:''' To separate the headers from the rest of the data a blank line is needed. It is mandatory as per the CGI specification. So the CGI application now sends a blank line (\n) there. Forgetting to do this is very common in CGI applications (Read the paragraph of this tutorial for more), and it can lead to the malfunctioning of the application.

*'''Line 5:''' In the end the actual data is written out to the ''stdout''. In this example, it is simply creating an HTML file and sending that. The HTML file contains just two words : '''Hello World!'''.

===How to test Example1.exe?===

Place it in the script directory of your web server, as explained earlier. Then access the following URL on the same machine as the web server '''<nowiki>http://localhost/cgi-bin/example1.exe</nowiki>''' using a suitable browser.

===What is the functionality of such a primitive application?===

The ''Hello World'' CGI application (Example1) is not actually as primitive as it seems. It is simple alright, but it can serve as the seed for much sophisticated stuff. Take the last line (Line 6 explained in Paragraph of this tutorial). There the complete HTML is created and then dispatched over the ''stdout'' stream to the web server, who in turn, sends it to the requesting browser. If you introduce a database access at that point, and add some more predicates for conditional processing of the data from the background databases, you can easily build a content management system

===What about inputs?===

As indicated earlier, we have ignored whatever inputs the web server may have given to our little application. If the CGI application needed some inputs, then the ''stdin'' stream would have to be read, and processed for information. Also, the environment variables set at the time of the CGI application operation would also have to be examined. This can be a little complex. Luckily for us, we do not have to do much programming in Visual Prolog when developing CGI applications. For example, to know what data the CGI application receives from the web server, all we have to do is to use the cgi::getString() predicate. (We have to include the cgi.pack from the PFC into our project). And if we need the data in a more convenient form, then we can use the cgi::getParamList() predicate. The individual pieces of data are assembled by cgi::getParamList() into name, value pairs similar to environment variables.

==References==

[[Category:Tutorials]]
[[Category:Internet]]

File:CgiApplicationsInVisualProlog04.png

2008-09-30T15:53:47Z

VitalyBuylov:

File:CgiApplicationsInVisualProlog03.png

2008-09-30T15:53:28Z

VitalyBuylov:

File:CgiApplicationsInVisualProlog02.png

2008-09-30T15:52:58Z

VitalyBuylov:

File:CgiApplicationsInVisualProlog01.png

2008-09-30T15:52:15Z

VitalyBuylov: uploaded a new version of "Image:CgiApplicationsInVisualProlog01.png"

CGI Applications in VisualProlog 01

{{Tutorial Image}}

File:Fundamental Prolog 1 PIE.png

2008-09-30T15:38:32Z

VitalyBuylov: uploaded a new version of "Image:Fundamental Prolog 1 PIE.png"

Prolog Inference Engine (PIE)

{{Tutorial Image}}

How to use GUI Package in Visual Prolog

2008-09-30T14:05:07Z

VitalyBuylov:

A sample Graphical User Interface ('''GUI''') application can be created by Integrated Development Environment ('''IDE''') as a default project. In this tutorial, we will explain how to develop such application further. We will learn how to create and edit '''GUI''' components of '''GUI''' style programs directly within the Visual Prolog IDE (Visual Development Environment). We will learn principles of handling '''GUI''' package events (like clicking buttons, activating menu items, etc.), and how these are implemented within''' GUI''' style Visual Prolog programs. We will learn how to program dialogs, etc.

The '''GUI''' package presents object-oriented windows, dialogs, and controls handling. This package is built on top of the '''VPI''' package and delivers a new level of abstraction and ease of use. When using the '''GUI''' package, you can also use the '''VPI''' package.

==Introduction to the '''GUI Package'''==

If you have read our previous GUI programming tutorials "'''Fundamental Visual Prolog - Conventional GUI'''" and "'''Fundamental Visual Prolog - the Business Logical Layer'''", then you already knew that Visual Prolog PFC packages contain the '''VPI''' package, which can be used to program Graphical User Interface applications. But '''VPI''' package classes do not produce GUI objects. Therefore '''VPI''' does not supply the power of state handling via interface predicates.

The '''GUI''' package provides an object oriented style for working with windows, dialogs, controls, events, and other GUI features. The GUI package provides the following window system components, which supports programming of your application presentation layer (GUI of your application):

*Basic window components: windows, dialogs, controls (check buttons, edit controls, icon controls, list boxes, list buttons, list edit controls, push buttons, radio buttons, horizontal and vertical scroll controls, static text controls, custom controls, and some more complex controls like the editor, tree view and list view controls, etc. ).

*Containers - objects to which you can add controls (these are dialogs, container controls, form windows, etc.).

*Layout management system that supports sizing, positioning, and moving of GUI objects.

*The GUI package event handling system. It notices when the user interacts with one of GUI components and pass this information to the application.

*Graphic operations: draw arcs, fill polygons, clip a rectangle, etc.

==Creating a New '''GUI Style Project'''==

Now let us start creating a GUI style project from the very beginning.

First of all, you need to run the ''' IDE'''. At this point we expect that you had already read the '''Environment Overview''' tutorial and know how to do this.

Then you should initiate creation of a new project selecting the '''Project | New''' menu command. The Project Settings dialog appears. In the '''Project Name''' edit control you should type-in the project name, in this example we use '''guiDemo'''. Keep the settings ('''UI Strategy''', '''Target Type''', '''Linker Name''') in their default state. You can also select the '''Base Directory''', which will serve as the default root directory to all your new projects. The default '''Sub-Directory''' name will be generated automatically, as you will type-in the '''Project Name''' (of course, you can manually modify this name). So we have:

*'''Project Name''' = '''guiDemo'''

*'''UI Strategy''' = '''Object-oriented GUI'''

*'''Target Type''' = '''EXE'''

Click '''Create''' to create the default project. After this the ''' IDE''' will generate the initial set of project files required to a '''GUI''' style project.

==Execute the Created Default Project ''''''==

As you can expect the default project creates a trivial but working application, to check this let us run the generated default application. You can run it directly from the ''' IDE''' using the '''Build | Execute''' command or simply press the '''Ctrl+F5''' key combination.

==How to Study the Generated Code==

All components of your application are registered in the '''Project''' window. Here you can see the initial set of project files generated by the IDE to a default '''GUI''' style project in the IDE '''Project''' window (remember that previously you need to build the project using, for example, the '''Build | Build''' command or simply press the '''Ctrl+Shift+B''' key combination). You will see in the '''Project''' window the following tree of the project files:

[[Image:GUI_Package_Project_tree0.png]]

You see that the root directory of your project contains the following files:

*main.pack this is the main package of our application.

*main.ph this is the header file of the application main package.

*main.cl this class declares the application main predicate run.

*main.pro this file implements the application main predicate run and declares the standard application goal.

*resourceidentifiers.i this file is automatically updated by the IDE after any changes of project resource identifiers. It contains definitions of symbolic constants specified for GUI components in the IDE resource editors. 

*guiDemo.manifest this is the manifest file of the application. It contains some settings of the application in XML format.

Notice that you should not make any editing in it since any your changes will be overwritten while automatic update.

The $(ProDir)\PFC subdirectory contains that Prolog Foundation Classes ('''PFC''') packages, which are used by the default '''GUI''' style applications. Each package is in a separate subdirectory. For example, the gui subdirectory contains '''GUI''' package source files and you can see implementation details of '''GUI''' package itself here. Source files of these packages will be compiled and the obtained OBJect files will be linked into the target application.

In the first step we will modify Task Window, therefore let us see which files are generated in the '''taskWindow''' package. Simply click on the '+' box before the taskWindow subdirectory and then click on the '+' box before the appeared Toolbar subdirectory. You will see the following files:

[[Image:GUI_Package_Project_tree2.png]]

At this picture you see that the IDE generates files containing the following GUI components:

*the main Task window of the application (stored in the .\TaskWindow\TaskWindow.win file);

*the main application menu (stored in the .\TaskWindow\TaskWindow.mnu file);

*one top toolbar (stored in the .\TaskWindow\Toolbars\ProjectToolbar.tb file);

*one bottom status bar or status line (stored in the .\TaskWindow\Toolbars\StatusLine.tb file);

*the '''About''' dialog (in the .\TaskWindow\AboutDialog.dlg file).

These are text format files store resources describing GUI components generated for the project. Text descriptions stored in these files hold full information about correspondent GUI components, including resource attributes, resource layout, and settings for '''Code Experts'''. The resource files for GUI components are stored in files with .win, .frm, .ctl, .mnu, .dlg, .tb, .bmp, .ico, and .cur filename extensions.

Let us investigate contents of the TaskWindow.i file. You see that except for other code it contains the following line:

<vip>interface taskWindow supports applicationWindow</vip>

This means that the '''taskWindow''' interface supports the '''applicationWindow''' interface declared in the '''GUI''' package. Select '''applicationWindow''' and press the '''F1''' key, the IDE will activate the Visual Prolog help and open the topic describing the '''applicationWindow''' interface. In this help you can read that the '''applicationWindow::new/0''' predicate creates an '''applicationWindow''' type object correspondent to the Task windows of an application. Notice that the only one '''applicationWindow''' type object can be created during an application execution.

Now open the TaskWindow.pro file. You see the following clauses for the new/0:

<vip>clauses
new():-
applicationWindow::new(),
generatedInitialize().
</vip>
<vip>
predicates
generatedInitialize : ().
clauses
generatedInitialize():-
setText("guiDemo"),
setDecoration(titlebar([closebutton(),maximizebutton(),minimizebutton()])),
setBorder(sizeBorder()),
setState([wsf_ClipSiblings]),
setMdiProperty(mdiProperty),
menuSet(resMenu(resourceIdentifiers::id_TaskMenu)),
addShowListener(generatedOnShow),
addShowListener(onShow),
addSizeListener(onSizeChanged),
addDestroyListener(onDestroy),
addMenuItemListener(resourceIdentifiers::id_help_about, onHelpAbout),
addMenuItemListener(resourceIdentifiers::id_file_exit, onFileExit).

...

% end of automatic code</vip>

You see that the clauses of the new/0 constructor are splitted onto two parts. The clause of the new/0 constructor itself and the generatedInitialize/0 predicate, which is declared privately in the '''taskWindow''' class implementation. You can ask - "What for the extra the generatedInitialize/0 predicate is declared?" The answer to this question is in the lines:

<vip>% This code is maintained. Do not update it manually ... end of automatic code</vip>

The IDE need them to be able to automatically change parameters, which corresponds to the settings in '''Code Experts'''.

==How to Modify the Default Task Window==

Before we start to add any new user defined GUI components to this default project, let us look how we can modify its default task window parameters. In the project file tree click the right mouse button on the TaskWindow.win file. In the appeared popup menu select the '''Attribute''' item. The '''Window Attributes''' dialog appears:

[[Image:GUI_Package_WindowAttributes.png]]

In this dialog you see attributes of the task window. The '''Title''' field specifies the application title (name) '''guiDemo''', which is displayed at run time in the application title bar. Let us modify it to '''GUI Demo Title'''.

The '''Style Flags''' group of check boxes contains the style flags, which will control the look of the window. Let us set '''Maximized''' to ON. If you run the application now, then you will see that it is maximized initially and has got the title '''GUI Demo Title'''.

==How to Add New GUI Dialog==

Let us create a new GUI dialog in '''TaskWindow''' package. You can of course use any package for this purpose. To create the dialog it is necessary to put focus on the necessary package in '''Project''' window and choose menu command '''File | New in Existing Package...''' . You will see the dialog, where it is necessary to select '''Dialog''' type and write a name. We have chosen the name '''firstDialog''':

[[Image:GUI_Package_firstDialog.png]]

After pressing '''Create''' button you will be prompted to set attributes for the new dialog. You can keep default initial attributes at creation time and change the necessary attributes later.

The new dialog should be invoked on some event, therefore we modify '''TaskMenu''' menu by changing '''File | New''' text and making it enabled:

[[Image:GUI_Package_TaskMenu.png]]

Now we should put focus on the '''TaskWindow\TaskWindow.win''' window in '''Project''' window and activate '''Code Experts''':

[[Image:GUI_Package_NewDlgEvent.png]]

After pressing '''Add''' button the IDE will generate a default code for '''onFileNewDialog''' event. Let us modify it by invocation of '''firstDialog''':

<vip>predicates
onFileNew : window::menuItemListener.
clauses
onFileNew(_Source, _MenuTag):-
FirstGuiDialog = firstDialog::new(This),
FirstGuiDialog:show().</vip>

You can run the application now and see that the '''firstDialog''' can be invoked.

==How to Manipulate Controls in GUI Dialog or Form==

Let us create two edit controls '''Edit''' and '''EditCopy''' in '''firstDialog''' and update the contents of '''EditCopy''' on all changes in the contents of '''Edit'''.

We should also add event handling for '''onModify''' event of '''Edit''' control. To do this we put focus on the '''TaskWindow\firstDialog.dlg''' dialog in '''Project''' window and choose '''Edit''':

[[Image:GUI_Package_EditModifyEvent.png]]

Then we can add the code to implement our intention:

<vip>predicates
onEditModified : editControl::modifiedListener.
clauses
onEditModified(_Source) :-
editCopy_ctl:setText(edit_ctl:getText()).</vip>

Let us add a more complicated control now. Let us choose treeViewControl. IDE can insert automatically the necessary declarations, therefore we add '''pfc\gui\treeViewControl\treeViewControl.pack''' package and then build our project.

In dialog editor we choose '''Controls | Custom''' command and select '''treeViewControl''' in the list.

You can run the project now and see that the tree is empty. Let us modify the implementation of the constructor '''new''' in the '''TaskWindow\firstDialog.pro''' file. Here, we can add more code to initialize the tree view control:

<vip>constants
myItemId = 10.
myItemIdChild = 11.

clauses
new(Parent) :-
dialog::new(Parent),
generatedInitialize(),
treeViewControl_ctl:insertItem(myItemId, treeViewControl::wcc_null,
treeViewControl::sorted(),
"Root",
[], resId(resourceIdentifiers::idb_HelpBitmap), resId(resourceIdentifiers::idb_HelpBitmap)),
treeViewControl_ctl:insertItem(myItemIdChild, myItemId,
treeViewControl::sorted(),
"Child",
[], resId(resourceIdentifiers::idb_HelpBitmap), resId(resourceIdentifiers::idb_HelpBitmap)).
</vip>

Now the program can show a simple tree.

==References==

[[Category:Tutorials]]
[[Category:GUI]]

File:GUI Package EditModifyEvent.png

2008-09-30T13:17:57Z

VitalyBuylov: uploaded a new version of "Image:GUI Package EditModifyEvent.png"

GUI Package 07

{{Tutorial Image}}

File:GUI Package NewDlgEvent.png

2008-09-30T13:05:48Z

VitalyBuylov: uploaded a new version of "Image:GUI Package NewDlgEvent.png"

GUI Package 06

{{Tutorial Image}}

File:GUI Package TaskMenu.png

2008-09-30T13:04:00Z

VitalyBuylov: uploaded a new version of "Image:GUI Package TaskMenu.png"

GUI Package 05

{{Tutorial Image}}

File:GUI Package firstDialog.png

2008-09-30T13:00:29Z

VitalyBuylov: uploaded a new version of "Image:GUI Package firstDialog.png"

GUI Package 04

{{Tutorial Image}}

File:GUI Package WindowAttributes.png

2008-09-30T12:59:30Z

VitalyBuylov: uploaded a new version of "Image:GUI Package WindowAttributes.png"

GUI Package 03

{{Tutorial Image}}

File:GUI Package Project tree2.png

2008-09-30T12:10:59Z

VitalyBuylov: uploaded a new version of "Image:GUI Package Project tree2.png"

GUI Package 02

{{Tutorial Image}}

File:GUI Package Project tree0.png

2008-09-30T12:09:29Z

VitalyBuylov: uploaded a new version of "Image:GUI Package Project tree0.png"

GUI Package 01

{{Tutorial Image}}

Ide/Key Bindings

2008-09-30T11:32:03Z

VitalyBuylov:

A number of Visual Prolog menu entries have accelerator keys (hot keys) associated with them.

Beginning with Visual Prolog 7.0 some key binding have been changed to comply with Microsoft de facto standards.
The table below shows Visual Prolog 7.0 accelerator keys by functions.

:{| {{prettytable}}
|- class="header2"
|align="center" style="background:#cee0f2; text-align:center; font-weight:bold; color: #006B9C;" |
Function
|align="center" style="background:#cee0f2; text-align:center; font-weight:bold; color: #006B9C;" |
Key
|-
|colspan="2" align="center" style="background:#cee0f2; text-align:center; font-weight:bold; color: #006B9C;" |
Edit
|-
| Copy
| Ctrl-C
|-
| Cut
| Ctrl-X
|-
| Paste
| Ctrl-V
|-
| Paste
| Ctrl-Ins
|-
| Undo
| Ctrl-Z
|-
| Redo
| Ctrl-Y
|-
| Redo
| Ctrl-Shift-Z
|-
| Select All
| Ctrl-A
|-
| Select Current Word
| Ctrl-W
|-
| Box Editor: Size To Content
| Shift-F6
|-
| Code Expert
| Ctrl+Shift+W
|-
| Delete Line
| Ctrl-Shift-L
|-
| Delete the current line
| Ctrl-K
|-
| Delete to End of Line
| Ctrl-Shift-E
|-
| Word Delete To End
Delete Object from Facts Tree
Retract Fact(s)
| Ctrl-Del
|-
| Insert Predicate
| Ctrl-Shift-I
|-
| Replace
| Ctrl-H
|-
| Lower Case
| Ctrl-U
|-
| Upper Case
| Ctrl-Shift-U
|-
| Toggle Case
| Ctrl-Alt-U
|-
| Zoom In
| Ctrl-[+] or Ctrl-Scroll mouse wheel up
|-
| Zoom Out
| Ctrl-[-] or Ctrl-Scroll mouse wheel down
|-
| Zoom to Normal
| Ctrl-0
|-
| Comment Line(s)
| Ctrl-Alt-5
|-
| Uncomment Line(s)
| Ctrl-Alt-Shift-5
|-
| Insert Date Stamp
| Ctrl-Shift-Y
|-
|colspan="2" align="center" style="background:#cee0f2; text-align:center; font-weight:bold; color: #006B9C;" |
Navigation
|-
| Find
| Ctrl-F
|-
| Find in Files
| Ctrl-Shift-F
|-
| Find Next
| F3
|-
| Locate in Project Tree
| Ctrl-T
|-
| View Current Position
| Shift-F4
|-
| Go Back
| Ctrl+Shift+F8
|-
| Go to Address
| Ctrl-G
|-
| Go to Definition
| F12
Ctrl-Shift-C
|-
| Go To Declaration
| Ctrl-F12
Ctrl-Shift-D
|-
| Go To Definition
|
|-
| Go to Executing Predicate Source
| Ctrl-E
|-
| Go To Facts Database
| Ctrl+Alt+F
|-
| Go To Line
| Ctrl-F2
|-
| Go To Next Error
| F8
|-
| Go To Position on Clipboard
| Shift-F2
|-
| Go To Previous Error
| Shift-F8
|-
| Window Navigation Dialog
| Ctrl-Tab or Ctrl-F6
|-
|colspan="2" align="center" style="background:#cee0f2; text-align:center; font-weight:bold; color: #006B9C;" |
Compile
|-
| Build
| Ctrl-Shift-B
|-
| Stop Build
| Ctrl-Break
|-
| Build Resource Only
| Alt-F8
|-
| Compile
| Ctrl-F7
|-
| Rebuild Project
| Ctrl-Shift-Alt-B
|-
| Run
| Ctrl-F5
|-
| Run in Window
| Alt-F5
|-
| Locate in Project Tree
| Ctrl-T
|-
|colspan="2" align="center" style="background:#cee0f2; text-align:center; font-weight:bold; color: #006B9C;" |
Debug
|-
| Start Debugging
| F5
|-
| Stop Debugging
| Shift-F5
|-
| Breakpoint Properties
| Alt-F9
|-
| Refresh Debug Window
| Ctrl-R
|-
| Registers window
| Ctrl-Alt-G
|-
| Breakpoints Window
| Ctrl-Alt-B
|-
| CallStack Window
| Ctrl-Alt-C
|-
| Disassembly Window
| Ctrl-Alt-D
|-
| Variable window
| Ctrl-Alt-V
|-
| Memory Dump 1 Window
| Ctrl-Alt-M
|-
| Threads Window
| Ctrl-Alt-H
|-
| Enable Breakpoint
| Ctrl-F9
|-
| Toggle Breakpoint
| F9
|-
| Step Into
| F11
|-
| Step out of
| Shift-F11
|-
| Step Over
| F10
|-
| Run To Cursor
| Ctrl-F10
|-
|colspan="2" align="center" style="background:#cee0f2; text-align:center; font-weight:bold; color: #006B9C;" |
Project
|-
| New Project
| Ctrl-Shift-N
|-
| Open Project
| Ctrl-Shift-O
|-
| Add Module to Project
| Ctrl-Shift-A
|-
| Create Project Item
| Ctrl-N
|-
|colspan="2" align="center" style="background:#cee0f2; text-align:center; font-weight:bold; color: #006B9C;" |
IDE
|-
| "Qualification…" Dialog
| Ctrl-Shift-S
|-
| Close all Editors
| Ctrl+Q
|-
| Close all Inactive Editors
| Ctrl+Shift+Q
|-
| Close the active window
| Ctrl-F4
|-
| Project window
| Ctrl-Alt-P
|-
| Project Settings
| Alt-F7
|-
| Save File
| F2
|-
| Save Project
| Ctrl-S
|-
| Source Browser
| Ctrl-B
|-
|colspan="2" align="center" style="background:#cee0f2; text-align:center; font-weight:bold; color: #006B9C;" |
Other
|-
| Help
| F1
|-
| Output
| Ctrl-Alt-O
|-
| Print
| Ctrl-P
|}

[[ru:IDE:Горячие Клавиши]]

[[Category:IDE]]