WebSocket Applications

Intro

Disclaimer:- My understanding of WebSockets is poor, and apologies if this contains errors. However, GUIDeFATE appears to be able to create a server, and an accompanying client that allows a person to create a Web-Application-a-like in pure Perl. The objective? To abstract out the complexities of both the Websocket interactions and Graphical interface design. The result? see for your self.

A typical websocket application...

A web app 1) runs through a browser interface or equivalent renderer 2) communicates bidirectionally with a server 3) The server and and the client respond according to message received by each. So typically the Client may be written in JavaScript and HTML, the server can be written in Perl, JS, C, Java etc. The developer has therefore to know both languages. Now GUIDeFATE through the GFhtml can already generate an HTML interface. If at the same time it could generate the WebSocket server, one could easily see such network applications being developed.

In use

Generate the client interface using GUIDeFATE method e.g.

#!/usr/bin/env perl 
# A test script that creates a minimalist test environment for
# websockets file operations and dialog boxes for GUIDeFATE

use strict;
use warnings;
use lib "../lib/";  # or wherever GFweb and GUIDeFATE >0.09
use GUIDeFATE;

my $window=<<END;
+-------------------------------------------------------------+
|T  Test Dialogs For Web                                      |
+M------------------------------------------------------------+
|+T------------------------------++I-------------------------+|
||TextCtrl1:                     ||dataFiles/trump.jpg       ||
||                               ||                          ||
||                               ||                          ||
||                               ||                          ||
||                               ||                          ||
||                               ||                          ||
|+-------------------------------------++--------------------+|
| {Dialog} {FileSelector to Open} {File  selector to save}    |
+-------------------------------------------------------------+

END

my $gui=GUIDeFATE->new($window,"web","q","localhost:8087");
my $frame=$gui->getFrame()||$gui;
$gui->MainLoop();

This generates a window with a textarea (Text control box), an Image panel, and three buttons from the string in $window.

GUIDeFATE triggers interface generator using the interface information in $window, "web" option informs thet interface is a Websocket interface, "q" means quiet, i.e. no messages to be passed (other options are "a" to assist the generation of interface code, "v" to generate verbose messages and "d" to make the client open a separate window containing the messages passed for debugging purposes.)

Optionally the host and port is also passed. If no host is specified, then local host is used, if no port is specified the 8085 is tried. If port not available, the port number is incremented to find a free port to start listening on, automatically gets the next available port if port not available.

The client restarts the Websocket when window regains focus in case webSocket connect was lost This allows multiple web applications to be run each with its own listener. But can not yet run multiple clients on one listening server..so can not yet do a chat application

Interactions with the interface are passed as a message to the server as in the desktop applications and call the relevant subroutines. So a button with ID btn4 sends a message to the server where the function btn4 is called etc. The server can also set specific elements (the image and text elements on the interface) in exactly the same way as the desktop interface. Similarly functions getValue(), setValue(), appendValue(), setLabel() and setImage(), pass a message to the client which is interpreted and the relevant action or response triggered.

Example

The following code demonstrates Dialog/Message Boxes and File Handling as these are the only components that a quite different from the Desktop Applications. Clicking any dialog box button merely announces that the button was clicked in the Textarea. Selecting a file for upload allows the user to send files to the server which are then stored in a folder in the application directory in a folder called dataFiles (created if not already present). Downloading a file is possible and the client is instructed to generate a link to the file, for the user to save.

sub btn4{
	# the following lines add actions to each potential response to
	#the Dialog.  Allowed responses Ok, Cancel, Yes, No and is
	# defined by the parameter in showDialog e.g. OKC= Ok and Cancel,
	# YNC is Yes No and Cancel
	$frame->dialogAction(  "OK",     # action if ok clicked
	     sub{$frame->appendValue("TextCtrl1","\nClicked OK\n"    )   } );
	$frame->dialogAction(  "Cancel", # action if cancel clicked
	     sub{$frame->appendValue("TextCtrl1","\nClicked Cancel\n")   } );
	$frame->showDialog("The Dialog Title",
	                   "The dialog Message goes here",
	                   "OKC","!");
}

sub btn5{
	# the following allows the user to upload a file to the server
	# the server stores the file in a folder called dataFiles in the
	# directory of the running application
	$frame->dialogAction(  "Cancel",
	     sub{$frame->appendValue("TextCtrl1","\nClicked Cancel\n")   } );
	$frame->dialogAction(  "File",
	     sub{  # action to run after file is loaded.
			   # In this example add the filename to the text box
			   # and set the Imagepanel to have this picture
		    my $file=shift;  #the name of the file is passed as parameter
		    $frame->appendValue("TextCtrl1","\n Loaded File: $file \n"),
		    $frame->setImage("Image2","dataFiles/$file")
		 }	);
	$frame->showFileSelectorDialog("Pick a picture File",1,"");
}

sub btn6{
	# the following allows the user to download a file from the server
	# the location of files are in a folder called dataFiles  in the
	# directory of the running application
	$frame->dialogAction(  "Cancel",
	     sub{$frame->appendValue("TextCtrl1","\nClicked Cancel\n")   } );
	$frame->showFileSelectorDialog("Test File Downloader",0,"trump.jng");
}