Writing Explorer in EZY Prolog

By Serguei Penkov© 2002 EDMGROUP Australia

“Hello world”

Every programming language tutorial starts with "Hello World" sample. But once you pass this stage and confident that it is possible, you will start looking into ways how you can write something useful.

It is hard to imagine modern program without rich user interface and modern version of "Hello world" should include graphical user interface.

I think that various Explorers (or Explorer-style applications) could represent modern version of "Hello world".

This tutorial displays step-by-step how to write complex application such as File Explorer using EZY Prolog.

Click mouse to continue

Explorer-style application

Explorer-style application usually consist of 3 major areas: Top Level frame Left Frame withtree view Right Frame withgrid and editor

Explorer-style application

Vertical Splitbar between frames

Press here tocreate Vetrical

Splitbar

Left and Right frames now

separated by vertical bar

Click inside Explorer Frame to

select

Setting colours

Text colour

Background Colour

Border Colour

Border Width

Setting auto-alignmentLeft frame – auto aligned to parent bottom. Right Frame – to parent right bottom

Align to Parent Right

Bottom

Align to Parent Right

Bottom

Align to Parent Bottom

Align to Parent Bottom

Align to Parent Right

Bottom

Generate code frameOne button click code generation

Press Generate

button

Prolog Code generated.Note: GUI declarations loaded

from DCL file.Program code is separated

from GUI declarations.

Preview GUI:Note auto-alignment,

vertical split bar

Adding Treeview element

Add Treeview

Draw rectangle inside Left Frame.Left Top Corner

Draw rectangle inside Left Frame.

Bottom Right Corner

Treeview colour and alignmentSet Treeview auto-align to

Left frame right bottom

Select treeview

Align to parent Right Bottom

Define Background Colour

Group properties settings

Set properties for selected controls

Click inside control to select Click inside

control to select

Click inside control to select

Click inside control to select

Set Background Color

Deselecting controls

Click right mouse button to display

popup menu

Deselect all

Treeview properties

Setting colour for back and fore ground

Select treeview and click right

button

Select Properties

Change Foreground

colour

Setting Treeview font

Change Font settings

Set Treeview auto-alignment

Auto align treeview to the Left Frameright bottom

Preview results

Set alignment:Parent right

bottom

Select treeview control

Set Treeview initial Tree

Click on Tree property

Tree Editor will appear.Use popup

menu for tree editingClick inside

Treeview to select

Preview results

Create EZY Prolog application to display designed GUI

Auto aligned to parent bottom:Explorer Frame

Auto aligned to parent

Right bottom:Explorer Frame

Auto aligned to parent

Right bottom:Left Frame

Slidebar:Supports auto

align properties

Treeview support code

EZY Prolog generates necessary initialization and callback codes

GUI declarations loaded from file on

program start

Generated code for treeview initialization

andcallback

Treeview callback template

automatically generated

Treeview callback in action:

Write to message window on user

action:Open/Close of the

nodeDouble click on node

Adding Grid control

Align grid to Right Frame right border

Draw rectangle inside

Right Frame

Set alignment:Parent right

bottom

Grid control – setting colours

Easy way to define colours for grid control: headers,back/fore ground…

Set title colorsSet title colours

Preview results

Grid control – define headers

Type in headers separated by colon

Define grid headers

Final GUI element - editor

Adding Editor to edit text files

Draw rectangle inside

Right Frame

Explorer-style application

Create Horizontal Splitbar between Grid and Editor

Click insideRight FrameCreate Horizontal

SplitbarSelect EditorAlign to parent right

bottom

Preview results

GUI at run-time.

Treeview is auto-aligned to Left Frame right bottom,

Grid and Editorare separatedby horizontalsplitbar

Move splitbar Select Row

Open/Close nodesDouble click on

node

Generated code template

EZY Prolog Designer generates code frame for GUI initialization and callbacks.

Code templateare readyto use

Treeview callback

Grid callback

Adding Functionality

Treeview – explore file system.Display Folders in Treeview and list of files in the GRID GRID – show selected file in editor EDITOR – default functionality

Treeview – initialize treeThe following code sets initial treeinitialize_explorer_tree( WINDOW ):-EXPLORER_TREE_ADDR =[ "Explorer Frame" , "Left Frame" , "explorer_tree" ],ezy_get_object ( WINDOW , EXPLORER_TREE_ADDR , EXPLORER_TREE_WINDOW ),ezy_treeview_callback ( EXPLORER_TREE_WINDOW , treeview_explorer_tree_handler ),syspath ( PATH , _ ),/* USER CODE – INITIALIZE TREEVIEW */string_to_slist ( PATH , "\\" , DIRECTORIES ),create_directory_tree( PATH , DIRECTORIES , TREEVIEW ),ezy_treeview_item ( EXPLORER_TREE_WINDOW ,[], TREEVIEW ),write ( " *** {explorer_tree} Initialized\n" ),! . /* USER CODE – CONVERT PATH INTO TREEVIEW */create_directory_tree( PATH ,[ DIR , _ ], TREEVIEW ):-! ,directories ( PATH , DIRLIST ),dirlist_to_treelist( DIRLIST , TREELIST ),ezy_treeview_icon ( "book_opened" , OPENED_ICON ),TREEVIEW =bi( 0 , DIR ,node( open , TREELIST ), OPENED_ICON ). create_directory_tree( PATH ,[ DIR |DIRLIST], TREEVIEW ):-! ,create_directory_tree( PATH , DIRLIST , TREEVIEW_CHILD ),ezy_treeview_icon ( "book_opened" , OPENED_ICON ),TREEVIEW =bi( 0 , DIR ,node( open ,[ TREEVIEW_CHILD ]), OPENED_ICON ). /* USER CODE – CONVERT LIST OF DIRECTORIES INTO TREELIST */dirlist_to_treelist([],[]):-! . dirlist_to_treelist([ DIR |DIRLIST], TREELIST ):-DIR = "." ,! ,dirlist_to_treelist( DIRLIST , TREELIST ). dirlist_to_treelist([ DIR |DIRLIST], TREELIST ):-DIR = ".." ,! ,dirlist_to_treelist( DIRLIST , TREELIST ). dirlist_to_treelist([ DIR |DIRLIST],[ ITEM |TREELIST]):-ezy_treeview_icon ( "book_opened" , OPENED_ICON ),ITEM =bi( 0 , DIR , leaf , OPENED_ICON ),dirlist_to_treelist( DIRLIST , TREELIST ).

Treeview – writing callback

Display list of directories and files/* ON DOUBLE CLICK INISDE TREEVIEW – RUN TREE CLICK PROCESSOR */treeview_explorer_tree_handler( WINDOW ,mouse_dbl( _ , _ , _ )):-explorer_process_tree_click( WINDOW ),! . explorer_process_tree_click( WINDOW ):-get_selected_path( WINDOW , SELECTED_PATH_SLASH ),explorer_display_directories( WINDOW , SELECTED_PATH_SLASH ),SELECTION_LIST =[ "*.pro" , "*.dcl" ],files ( SELECTED_PATH_SLASH , SELECTION_LIST , FILELIST ),ezy_get_parent ( WINDOW , "Explorer Frame" , FIRST_WINDOW ),explorer_display_filelist( FIRST_WINDOW , FILELIST , SELECTED_PATH_SLASH ),! . explorer_display_filelist( FIRST_WINDOW , FILELIST , SELECTED_PATH_SLASH ):-GRID_ADDRESS =[ "Explorer Frame" , "Right Frame" , "results" ],ezy_get_object ( FIRST_WINDOW , GRID_ADDRESS , GRID_WINDOW ),ezy_grid_clear ( GRID_WINDOW ),slist_length ( FILELIST , MAXROW ),ezy_grid_rows ( GRID_WINDOW , MAXROW ),explorer_fill_grid( GRID_WINDOW , 1 , FILELIST , SELECTED_PATH_SLASH ),! .

Define what to do when user double clicks in TREEVIEW

Process double clickGet selected PATH

from the tree elements

Display list of directories for selected node

Get list of FILES for selected DirectoryDisplay list of files

in the GRID

Treeview – get current path

Read current selection in treeview Convert it into PATH, display PATH

get_selected_path( WINDOW , SELECTED_PATH_SLASH ):-ezy_treeview_address ( WINDOW , PARENTS , _ ),slist_to_string ( PARENTS , "\\" , SELECTED_PATH ),concat ( SELECTED_PATH , "\\" , SELECTED_PATH_SLASH ),ezy_get_parent ( WINDOW , "Explorer Frame" , FIRST_WINDOW ),PATH_ADDRESS =[ "Explorer Frame" , "Right Frame" ],ezy_get_object ( FIRST_WINDOW , PATH_ADDRESS , PATH_WINDOW ),VPS_TEXT =vps_text( SELECTED_PATH_SLASH ,[]),ezy_frame_caption ( PATH_WINDOW , VPS_TEXT ),! . Get list of SELECTED

NODE PARENTS

Convert SLIST to PATH with slash at the endGet ADDRESS of the

RIGHT FRAMETo display selected PATHDisplay PATH

List = [“c:”,”vpstudio”,”vp_studio_dcl”,”e

xe”]

Treeview – writing callback

Display list of files in the grid/* SAMPLE CODE TO DISPLAY FILELIST IN THE GRID */files ( SELECTED_PATH_SLASH , SELECTION_LIST , FILELIST ),ezy_get_parent ( WINDOW , "Explorer Frame" , FIRST_WINDOW ),explorer_display_filelist( FIRST_WINDOW , FILELIST , SELECTED_PATH_SLASH ),

explorer_fill_grid( _ , _ ,[], _ ):-! . explorer_fill_grid( GRID_WINDOW , ROW ,[ FILENAME |FILELIST], PATH ):-! ,filenameext ( FILENAME , NAME , EXT ),format ( FULLFILENAME , "%s%s" , PATH , FILENAME ),filedetails ( FULLFILENAME , _ , H , M , _ , Y , MM , D , FSize ),dt_min_to_offset ( Y , M , D , H , MM , DATE_OFFSET ),dt_minoffset_to_str ( DATE_OFFSET , "%YL-%MD-%DD %HH:%MM" , DATE_STAMP ),format ( FILESIZE , "%" , FSize ),ezy_grid_cell ( GRID_WINDOW , ROW , 1 , NAME ),ezy_grid_cell ( GRID_WINDOW , ROW , 2 , EXT ),ezy_grid_cell ( GRID_WINDOW , ROW , 3 , DATE_STAMP ),ezy_grid_cell ( GRID_WINDOW , ROW , 4 , FILESIZE ),NEXTROW = ROW + 1,explorer_fill_grid( GRID_WINDOW , NEXTROW , FILELIST , PATH ).

Get list of FILESDisplay in the

GRID

Get File details:Date stamp, Size

Fill file properties into the GRIDContinue with

next ROWStop when list of files is EMPTY ([])

GRID callback

Display selected text file in Editorgrid_results_handler( GRID_WINDOW ,user_action(grid_marker(grid_row_marker([gl( ROW , ROW )]), 1 ))):-explorer_grid_click( GRID_WINDOW , ROW ),! .

explorer_grid_click( GRID_WINDOW , ROW ):-ezy_get_parent ( GRID_WINDOW , "Explorer Frame" , FIRST_WINDOW ),PATH_ADDRESS =[ "Explorer Frame" , "Right Frame" ],ezy_get_object ( FIRST_WINDOW , PATH_ADDRESS , PATH_WINDOW ),ezy_frame_caption ( PATH_WINDOW , VPS_TEXT ),VPS_TEXT =vps_text( SELECTED_PATH , _ ),ezy_grid_cell ( GRID_WINDOW , ROW , 1 , FILENAME ),ezy_grid_cell ( GRID_WINDOW , ROW , 2 , FILETYPE ),format ( FULLNAME , "%s%s.%s" , SELECTED_PATH , FILENAME , FILETYPE ),write ( "explorer_grid_callback selected ROW=" , ROW , " FILE: " , FULLNAME , "\n" ),file_str ( FULLNAME , FILE_DATA ),TEXT_EDITOR_ADDRESS =[ "Explorer Frame" , "Right Frame" , "editor" ],ezy_get_object ( FIRST_WINDOW , TEXT_EDITOR_ADDRESS , EDITOR_WINDOW ),ezy_editor_string ( EDITOR_WINDOW , FILE_DATA ),! .

GRID handler receives control

Get address of the top GUI

elementGet address of the frame with

PATH

Get value of the selected PATHGet value of the

selected FILE.Create full File

Name

Get FILE contentGet address of EDITOR and

display file content

GRID rowselected

Userfull tips:

Getting address of the GUI element

Select control in EZY Designer tree

Click right mouse button

Select – Control Address to Clipboard

ADDR = ["Explorer Frame","Right Frame","editor"]

Paste address into EZY Prolog program

Thank you for your time.

More samples on:

http://www.ezy-software.com

© 2002 EDMGROUP Australia