While "ask file" or "answer file" commands that bring up standard file selection dialogues usually satisfy most of the file browsing needs in cross-platform applications, sometimes it is nice to have a customised file browser embedded right into application's window, so that it provides a constant access to files with just a single mouse click. Creating a minimalistic cross-platform image viewer like the one in the snapshots below with an embedded file browser is not a big challenge in Revolution and can be implemented in a matter of minutes.
Snapshot of the viewer stack on MS Windows XP
See snapshot on:
Here is the recipe:
1)
choose or create a Scrolling List Field that accommodates the browser. Make sure that the lock text, auto hilite text and list behaviour properties are all checked (set to TRUE) and the field is empty;
2)
copy the three handlers from the text below and paste into the field's script;
3)
create image area anywhere nearby. That's it! Now mouse-click the field to initialise the application.
Let's analyse how this stuff is done. First choose File/New Mainstack in the menu of the Revolution IDE and put two objects - a scrolling list field that will hold the browser and image area - to the newly created stack.
The entire script of the scrolling list field consists of 3 handlers. The first handler traps mouseDown event and, if the field is empty, initialises the browser with the current listing of the default folder's contents, otherwise it just passes mouseDown event's message to the next handler. The source of the first handler is as simple as:
on mouseDown
if me is empty then
drawList
else
pass mouseDown
end if
end mouseDown
The next handler (let's call it "drawList"- it is just what it is going to do) will retrieve contents of the folder whose path is stored in the defaultFolder property and format the list of files and folders so that it looks nicer when displayed. The handler puts the list containing the default folder, sub-folders, volumes and the list of files, the later being separated by an empty line into the field whom the script belongs to - thence we use "me" to refer to the field. It formats each line of the list by adding 3 empty spaces in front of each file name and 2 spaces before any other items of the list. This makes the list look tidier and also will serve the purpose of telling the files from folders later on. Finally it assigns standard icons by their numeric identifiers indicating the open folder, sub-folders and right arrow for files, to every first space character in the list. Of course you can use any images here. Using standard icon set just simplifies and speeds up the whole implementation. Here is the the handler:
on drawList
local myLine
local flag
put 0 into flag #the flag will be set to 1 for files and 0 for folders
lock screen #no output to screen will speed it up while processing...
#generating list of folders and files
put the defaultfolder & return into me
if (the volumes) is not empty then
put the volumes & return after me
end if
if the folders is not empty then
put the folders & return after me
end if
if the files is not empty then
put return & the files after me
end if
#formatting and inserting icons
repeat with i = 1 to the number of lines in me
put line i of me into myLine
if myLine is empty then
put 1 into flag
next repeat
else
if flag = 1 then #files
put " " before line i of me
set the imageSource of char 1 of line i of me to 201066
else #folders or volumes
put " " before line i of me
set the imageSource of char 1 of line i of me to 210087
end if
end if
end repeat
set the imageSource of char 1 of line 1 of me to 210088
set the textStyle of line 1 of me to "bold"
unlock screen
end drawList
Now we need a script that will catch your selection and pass the event's message to the drawList handler if the selection was folder or otherwise will do file processing depending on type of selected file. In our case it loads selected image file into the image area and adjusts positioning of the application's window. So here is how we capture a selectionChanged event:
on selectionChanged
local myLine
local stackLeft
local stackTop
if char 2 to 3 of the selectedtext = " " then
# if it is a file... All the file-related processing goes here...
if matchText(the selectedtext, "\.jpg|\.png|\.gif|\.bmp|\.p.m|\.JPG|\.PNG|\.GIF|\.BMP|\.P.M") then
set the filename of img "Image" to (the defaultfolder & "/" & char 4 to -1 of the selectedtext)
# repositioning the image relatively to the field's position
set the left of img "Image" to (the left of me) + (the width of me) + 5
set the top of img "Image" to the top of me
# let's remember where our stack sits to fix its position after resizing
put the left of this stack into stackLeft
put the top of this stack into stackTop
# now adjust the size of application's window accordingly
set the width of this stack to (the width of me + the width of img "Image" + 12)
if 200 >= the height of img "Image" then
set the height of this stack to 200
else
set the height of this stack to (the height of img "Image" + 5)
end if
set the left of this stack to stackLeft
set the top of this stack to stackTop
end if
exit selectionChanged # no need to redraw the list, so exiting the handler here...
else if ":" is in the selectedtext then # if it is a volume...
set the defaultfolder to (char 3 to -1 of the selectedtext & "/")
else # if folder...
set the defaultfolder to (the defaultfolder & "/" & char 3 to -1 of the selectedtext)
end if
drawList
end selectionChanged
Of course your are free to explore the script and make your own modifications and improvements.
By the way, you can grab the whole sample stack (29 Kb) right now by executing in the message box:
go stack url "http://www.ekoinf.net/revolution/viewer_legacy.rev"
