2. Writing Explorer in EZY Prolog By Serguei Penkov © 2002 EDMGROUP Australia

3. “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

4. Explorer-style application Explorer-style application usually consist of 3 major areas: Top Level frame Left Frame with tree view Right Frame with grid and editor

5. Explorer-style application Vertical Splitbar between frames Press here to create Vetrical Splitbar Left and Right frames now separated by vertical bar Click inside Explorer Frame to select

6. Setting colours Text colour Background Colour Border Colour Border Width

7. Setting auto-alignment Left frame – auto aligned to parent bottom. Right Frame – to parent right bottom Align to Parent Right Bottom Align to Parent Bottom Align to Parent Right Bottom

8. Generate code frame One 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

9. Adding Treeview element Add Treeview Draw rectangle inside Left Frame. Left Top Corner Draw rectangle inside Left Frame. Bottom Right Corner

10. Treeview colour and alignment Set Treeview auto-align to Left frame right bottom Select treeview Align to parent Right Bottom Define Background Colour

11. Group properties settings Set properties for selected controls Click inside control to select Set Background Color

12. Deselecting controls Click right mouse button to display popup menu Deselect all

13. Treeview properties Setting colour for back and fore ground Select treeview and click right button Select Properties Change Foreground colour

14. Setting Treeview font Change Font settings

15. Set Treeview auto-alignment Auto align treeview to the Left Frame right bottom Preview results Set alignment: Parent right bottom Select treeview control

16. Set Treeview initial Tree Click on Tree property Tree Editor will appear. Use popup menu for tree editing Click inside Treeview to select

17. 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

18. Treeview support code EZY Prolog generates necessary initialization and callback codes GUI declarations loaded from file on program start Generated code for treeview initialization and callback Treeview callback template automatically generated Treeview callback in action: Write to message window on user action: Open/Close of the node Double click on node

19. Adding Grid control Align grid to Right Frame right border Draw rectangle inside Right Frame Set alignment: Parent right bottom

20. Grid control – setting colours Easy way to define colours for grid control: headers,back/fore ground… Set title colors Set title colours Preview results

21. Grid control – define headers Type in headers separated by colon Define grid headers

22. Final GUI element - editor Adding Editor to edit text files Draw rectangle inside Right Frame

23. Explorer-style application Create Horizontal Splitbar between Grid and Editor Click inside Right Frame Create Horizontal Splitbar Select Editor Align to parent right bottom Preview results

24. GUI at run-time. Treeview is auto-aligned to Left Frame right bottom, Grid and Editor are separated by horizontal splitbar Move splitbarSelect Row Open/Close nodes Double click on node

25. Generated code template EZY Prolog Designer generates code frame for GUI initialization and callbacks. Code template are ready to use Treeview callbackGrid callback

26. 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

27. Treeview – initialize tree The following code sets initial tree initialize_explorer_tree( WINDOW ):- EXPLORER_TREE_ADDR =[ "Explorer Frame", "Left Frame", "explorer_tree" ], ezy_get_object ezy_get_object ( WINDOW, EXPLORER_TREE_ADDR, EXPLORER_TREE_WINDOW ), ezy_treeview_callback 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 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 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 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 ezy_treeview_icon ( "book_opened", OPENED_ICON ), ITEM =bi( 0, DIR, leaf, OPENED_ICON ), dirlist_to_treelist( DIRLIST, TREELIST ).

28. 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 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 ezy_get_object ( FIRST_WINDOW, GRID_ADDRESS, GRID_WINDOW ), ezy_grid_clear ezy_grid_clear ( GRID_WINDOW ), slist_length ( FILELIST, MAXROW ), ezy_grid_rows 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 click Get selected PATH from the tree elements Display list of directories for selected node Get list of FILES for selected Directory Display list of files in the GRID

29. 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 ezy_treeview_address ( WINDOW, PARENTS, _ ), slist_to_string ( PARENTS, "\\", SELECTED_PATH ), concat ( SELECTED_PATH, "\\", SELECTED_PATH_SLASH ), ezy_get_parent ezy_get_parent ( WINDOW, "Explorer Frame", FIRST_WINDOW ), PATH_ADDRESS =[ "Explorer Frame", "Right Frame" ], ezy_get_object ezy_get_object ( FIRST_WINDOW, PATH_ADDRESS, PATH_WINDOW ), VPS_TEXT =vps_text( SELECTED_PATH_SLASH,[]), ezy_frame_caption ezy_frame_caption ( PATH_WINDOW, VPS_TEXT ), !. Get list of SELECTED NODE PARENTS Convert SLIST to PATH with slash at the end Get ADDRESS of the RIGHT FRAME To display selected PATH Display PATH List = [“c:”,”vpstudio”,”vp_studio_dcl”,”exe”]

30. 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 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 ezy_grid_cell ( GRID_WINDOW, ROW, 1, NAME ), ezy_grid_cell ezy_grid_cell ( GRID_WINDOW, ROW, 2, EXT ), ezy_grid_cell ezy_grid_cell ( GRID_WINDOW, ROW, 3, DATE_STAMP ), ezy_grid_cell ezy_grid_cell ( GRID_WINDOW, ROW, 4, FILESIZE ), NEXTROW = ROW + 1, explorer_fill_grid( GRID_WINDOW, NEXTROW, FILELIST, PATH ). Get list of FILES Display in the GRID Get File details: Date stamp, Size Fill file properties into the GRID Continue with next ROW Stop when list of files is EMPTY ([])

31. GRID callback Display selected text file in Editor grid_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 ezy_get_parent ( GRID_WINDOW, "Explorer Frame", FIRST_WINDOW ), PATH_ADDRESS =[ "Explorer Frame", "Right Frame" ], ezy_get_object ezy_get_object ( FIRST_WINDOW, PATH_ADDRESS, PATH_WINDOW ), ezy_frame_caption ezy_frame_caption ( PATH_WINDOW, VPS_TEXT ), VPS_TEXT =vps_text( SELECTED_PATH, _ ), ezy_grid_cell ezy_grid_cell ( GRID_WINDOW, ROW, 1, FILENAME ), ezy_grid_cell 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 ezy_get_object ( FIRST_WINDOW, TEXT_EDITOR_ADDRESS, EDITOR_WINDOW ), ezy_editor_string ezy_editor_string ( EDITOR_WINDOW, FILE_DATA ), !. GRID handler receives control Get address of the top GUI element Get address of the frame with PATH Get value of the selected PATH Get value of the selected FILE. Create full File Name Get FILE content Get address of EDITOR and display file content GRID row selected

32. 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

33. Thank you for your time. More samples on: http://www.ezy-software.com © 2002 EDMGROUP Australia