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