The View class

The View class is used to create windows in the Friend Workspace. The Workspace also has a Screen class to open new Screens for applications where this makes sense. In most cases, the View class is used to provider a user interface for an application.

// Make a new window with some flags

    var v = new View( {

        title: 'Welcome to FriendUP!',
        width: 640,
        height: 500

    } );

    // Overload onClose event
    v.onClose = function( closeCallback )
    {
        // Ask the user to confirm closing
        Confirm( 'Do you really want to close?', 'This will close the program.', function( result )
        {
            // We cancelled the confirm dialog, send false to close callback
            if( result.data != true ) { closeCallback( false ); }
        } );
    }

The code snippet above shows a couple of lines from the example application. A view is instantiated with a configuration object. The following properties are supported:

title – String – no default – title of the View
top – Integer or “center” – placement on y axis on screen
left – Integer or “center” – placement on x axis on screen
width – Integer – no default – initial width of the view
height – Integer – no default – initial height of the view
mobileMaximised – Boolean – default: false – maximize view in mobile view
maximized – Boolean – default: false – maximize view to available screen real estate.
hidden – Boolean – default: false – hide the view
invisible – Boolean – default: false – make the view invisible
borderless – Boolean – default: false – display the windows without border
resize – Boolean – default: true – makes the windows resizable/fixed size – even a fixed size window will never be bigger than the available screen real estate
screen – display this view window on the screen specified (object)
fullscreenenabled – enables ctrl+f keys to set the window content to full screen
viewGroups – allows for nested view windows
viewGroup – redirects the display of the view window to a view group
frameworks – object – allows you to select GUI framework and definition (see below)

There are more options that the system uses internally. For application development, these are not relevant.

Link to sectionView groups

If you want to group view windows inside of existing windows to simplify or unclutter your applications, view groups give you this opportunity. View groups are areas inside an open view window where you can add other view windows, either as rectangular areas or inside a tabbed list.

Grouped view windows technically behaves the same way as a normal view window. This means that your code connected to the view needs no alteration. Where their behavior differs, is that these nested views are stripped of their window management properties. The views can not be minimized or moved separately. Their window glyphs are not rendered, and their position is determined by the group layout.

To enable view groups, you define your view group on your host view window and then you redirect other views to display in that group.

Example:

// Create a new view with a view group

var v = new View( {
    title: "My view group window",
    width: 600,
    height: 600
} );
// Create a view group, using tabs

v.setFlag( "viewGroups", { id: "Mygroup", xposition: "right", yposition: "top", width: "20%", height: "100%", mode: "horizontalTabs" } );

// Add the first nested view window

var nested1 = new View( {
    title: "Nested 1",
    viewGroup: { view: v.getViewId(), viewGroup: "Mygroup" }
} );


// Add the second nested view window

var nested2 = new View( {
    title: "Nested 2",
    viewGroup: { view: v.getViewId(), viewGroup: "Mygroup" }
} );

View group properties

id – the identifying name for the view group
width – the width of the group. Takes value just like CSS.
height – the height of the group. Takes value just like CSS.
xposition – “left” or “right”.
yposition – “top or bottom”.
mode – how to manage nested view windows. Can be:
horizontalTabs – ignores view dimensions and manages in tabs
verticalTabs – ignores view dimensions and manages in tabs
unmanaged – no tabs

Link to sectionMethods in the View class

The View class provides the following functions to let developers set its contents:

setContent( content ) – sets content as the content of the View; content should be an HTML string. The content will be added as child to the body tag in the iFrame the View uses. Standard theme dependent Friend CSS is applied. The API is available to script references in the content. The content string will be stripped from inline script and style tags.

setRichContent( content ) – sets rich content in an additional iFrame in the View. Script tags are removed from the provided content string.

setRichContentUrl( url, base, appId, filePath, callback ) – sets the content to be an iFrame with the source defined by the url parameter. The API is not available. No Friend theme CSS is applied to the content.

loadTemplate( url ) – load a template from an URL. The API is not available to script references in the content.

setContentById( id, data, callback ) – set the content of a given node – node is identified by its id. The callback is executed once the content has been set.

getContentById( identifier, flag, callback ) – get the content of a node inside a View. The callback is executed once the content has been acquired.

preventClose( trueOrFalse ) – set value to prevent the app to close its view window. You can still kill the application to close the view window, but the close() function will no longer be able to affect the view window.

sendMessage( dataObject ) – sends a message to the main Application object that is located in the scope of the View window. Each View has its own Application object when it is using the API. The main application should keep track of its view so that it can send messages between them.

setMenuItems( jsonObject ) – sets the menu for the view window. The parameter it takes is in the form of a JSON object. Please read more in “Pulldown menus”.

getId() – gets the unique view object id

Link to sectionEvent hooks

The View class provides a couple of interfaces to let an application react to user interaction on the view:

onClose – fired when the view is closed. Either by click on the close button or by a function call from the Application that controls the view. When overloading this event, you get a first argument, closeCallback. If you run this callback with a negative boolean (false), it will cancel closing the view window. If the onClose event function returns false, it aborts closing the view window.

Link to sectionWindow buttons

A View has a resize element that allows users to resize the view (if resize is not set to false). A View also has a title bar that allows the View to be dragged around on the workspace.

On the top of a View, a couple of buttons are available. The availability of the different buttons depends both on the theme used and on the end users device (desktop/mobile):

Close button – always available.
Minimize button – minimizes the view
Swap depth button – brings a view to the front or sends it to the back of the display stack. The workspace user may also single click on the View title bar to raise that View to the front (or ‘top’ of the display stack).

Link to sectionGlobal functions related to view

View has some global functions that manipulate the views in your applications. Sometimes, you will be in an application scope where your view object is not directly available.

CloseView( {viewId|viewObject} ) – closes a view window. You can either pass the ID of the view window (by calling getId() on the object), or pass the object directly.

Link to sectionUsing frameworks

Friend supports multiple GUI frameworks – and has built-in support for HTML template driven GUI as well as an agnostic JSON defined GUI called FUI. The HTML template driven GUI implementation is there for web developers who are more comfortable to design and create layouts using markup. Please refer to “Programming GUIs” to read more about that.

Frameworks ought to be more comfortable with programmers who are used to various traditional GUI toolkits – and they come with some fundamental advantages. When deciding to use FUI to build your GUI, you can retarget your application on multiple GUI engines without changing your application logic.

Please refer to the FUI section of this document to read more about this GUI framework.

Search documentation