GUI example 01

These 6 GUI examples introduce difference ideas and concept of the framework.

More indepth examples can be found here.

The best example of a full application is the mguide application - which is built 100% using the framework. 

A demo version of the toolbox can be downloaded.

Example 01

A GUI with two tabs:
A couple of special features to note here:
  1. A protected edit box is created - this replaces the user input with asterisks.
  2. For the two edit boxes - additional text uicontrols were created automatically by the Framework to describe the reason for the edit.
7 lines of code to the framework create the GUI shown below (in both images):


Once logged in the user has the following GUI, which is a secondary tab with 4 re-sizeable panels (click on image to view animated gif).


% initiate the framework.

obj = matpigui ( 'buttonHeight', 0.1);
% Create the 3 tabs:

obj.addTab ( 'Login Page', 0.2 );
obj.addTab ( 'Work Flow', 0.2, 'enable', 'off' );
% set up variables for the ui controls

posP = 'pos'; posV = [0.35 0.6 0.4 0.075];
titleP = 'title'; titleV = 'Login Name: ';
% add the UIC for the login page

obj.addUIC ( 'Login Page', 'editLogin','edit', posP, posV, titleP, titleV );
posV = [0.35 0.4 0.4 0.075];

titleV = 'Login Name: ';
% add the password entry:

obj.addUIC('Login Page','editPass','protectedEdit', titleP, titleV, posP, posV );
% add the login button:

obj.addUIC ( 'Login Page', 'login', 'pushButton', 'pos', [0.35 0.1 0.4 0.125], ...
             'string', 'Login', 'Callback', @(a,b)obj.enable ( 'Work Flow' ) );
% split the work flow tab into 4 sub tabs

obj.split ( 'Work Flow', [2 2], { 'A' 'B' 'C' 'D' } );

More example GUI layouts can be seen on the animated GIF below (click on image to launch animation), these are all created by simply changing the 'splitTab' call.