The Media List Object

Media list is a data bound component used to view media files (images, audio, and video files). It takes XML data as an input.

var mediaList = new TMediaList(3, 5, 'GetMedia.php');
var wndMediaListSample = createWindow('Media List Sample');

mediaList.setAuxiliaryParameters('<FolderID>/FolderId>');
mediaList.update();
wndMediaListSample.add(mediaList);
showModal(wndMediaListSample);

Media list object constructor takes four parameters:

new TMediaList(numberOfRows, numberOfRowItems, url, autoUpdate);

Where:

Data Structure

Data returned from the server must have specific structure, so the media list object can read it.

Data Structure From Server:

<Root>
    <NumberOfPages>Number of pages in the list</NumberOfPages>
    <PageNumber>Current page number</PageNumber>
    <Rows>
      <Row>
        <Id>Record id</Id>
        <Title>Media title</Title>
        <Type>Mime type like image/*</Type>
        <URL>Media URL</URL>
        <Description>Media description</Description>
      </Row>
      .
      .
      .
    </Rows>
</Root>

Data sent to the server have specific structure also. It contains data you may use at your server script. These data is sent by media list automatically, so you do not need to do anything here.

Data Structure To Server:

<Vtf>
    <SessionId>This tag will be passed only if you define g_sessionId variable</SessionId>
    <ItemsOnPage>Number of item on each page</ItemsOnPage>
    <PageNumber>Current page number</PageNumber>
    /*
       You may pass other tags here to use on the server. Use setAuxiliaryParameters property to do so.
    */
</Vtf>
Media List Methods and Properties
Method/Property Description
addMenuCommand When user right clicks on media item list a context menu appear. By default, this contenxt menu contains one command (Select). To add more commands to it, use addMenuCommand method.
Form:
addMenuCommand(id, commandText, CommandCallback)
getRightClickedMedia Gets right clicked media item. Example:
var mediaItem = mediaList.getRightClickedMedia();
// Access data: media.id, media.type, media.title, media.description, media.url
getSelectedMedia Gets selected media items as an array. Example:
var mediaArray = mediaList.getSelectedMedia();
// to access second media item id: mediaArray[1].id
loadXML Load XML data to the list. This method takes XML document as an argument: mediaList.loadXML(xmlDoc);

Tip Use this method if your XML data is in your hands and you do not need to connect to the server using update method
setAuxiliaryParameters Sets addtional parameters that you want to pass to the server script which is called via update method. Example:
mediaList.setAuxiliaryParameters('<FolderId>1</FolderId>');
setCommandCallback Sets a callback for already existing commands in the context menu. Form:
setCommandCallback(command, callback)
setDblClickCallback Sets an event handler for the double click event on media items. Form:
setDblClickCallback(eventHandler)
setSelectionChangedCallback Sets an event handler for the selected item changed event on the media list. Form:
setSelectionChangedCallback(eventHandler)
setMediaHeight Sets media item height in the media list
setMediaWidth Sets media item width in the media list
update Sends request to the server script to fetch data. Form:
update(updateCallback)
Where updateCallback will be called after the data gets from the server