You are viewing a plain text version of this content. The canonical link for it is here.

Posted to commits@shindig.apache.org by hn...@apache.org on 2010/09/23 20:57:42 UTC

svn commit: r1000579 - in /shindig/trunk/content/samplecontainer/examples/media: ./ Media.xml MediaUI.js Social.js document.png folder.png styles.css

Author: hnguy
Date: Thu Sep 23 18:57:41 2010
New Revision: 1000579

URL: http://svn.apache.org/viewvc?rev=1000579&view=rev
Log:
SHINDIG-1430 - Patch from Eric Woods - Media Sample Gadget

Added:
    shindig/trunk/content/samplecontainer/examples/media/
    shindig/trunk/content/samplecontainer/examples/media/Media.xml
    shindig/trunk/content/samplecontainer/examples/media/MediaUI.js
    shindig/trunk/content/samplecontainer/examples/media/Social.js
    shindig/trunk/content/samplecontainer/examples/media/document.png   (with props)
    shindig/trunk/content/samplecontainer/examples/media/folder.png   (with props)
    shindig/trunk/content/samplecontainer/examples/media/styles.css

Added: shindig/trunk/content/samplecontainer/examples/media/Media.xml
URL: http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/Media.xml?rev=1000579&view=auto
==============================================================================
--- shindig/trunk/content/samplecontainer/examples/media/Media.xml (added)
+++ shindig/trunk/content/samplecontainer/examples/media/Media.xml Thu Sep 23 18:57:41 2010
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Module>
+    <ModulePrefs title="Albums and MediaItems">
+        <Require feature="osapi"/>
+        <Require feature="dynamic-height"/>
+    </ModulePrefs>
+    
+    <Content type="html"><![CDATA[
+    <html>
+        <head>	
+            <!-- Source imports -->
+            <script src='http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js' type='text/javascript' djConfig='parseOnLoad:true, isDebug:true'></script>
+            <script src='Social.js' type='text/javascript'></script>
+            <script src='MediaUI.js' type='text/javascript'></script>
+            
+            
+            <!-- Styling -->
+            <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css"></link>
+            <link rel="stylesheet" type="text/css" href="styles.css">
+            <style type="text/css">
+            </style>
+            
+            <!-- DOJO requires -->
+            <script type='text/javascript'>
+                dojo.require('dijit.form.Button');
+                dojo.require('dijit.form.Form');
+                dojo.require('dijit.form.TextBox');
+                dojo.require('dijit.form.ValidationTextBox');
+                dojo.require('dijit.Dialog');
+                dojo.require('dijit.form.Textarea');
+                dojo.require('dijit.layout.ContentPane');
+                dojo.require('dijit.layout.TabContainer');
+            </script>
+            
+            <!-- JavaScript -->
+            <script type="text/javascript"> 
+                <!-- Entry point to the gadget -->
+                function init() {
+                    console.log("dojo initialized");
+                    new MediaUI(new SocialWrapper()).init();
+                }
+            
+                <!-- Register entry point -->
+                dojo.addOnLoad(init);   // TODO: work-around to tundra.css issue
+                //gadgets.util.registerOnLoadHandler(function() {
+                    //dojo.addOnLoad(init);
+                //});     
+            </script>   
+        </head>
+        <body class="tundra">
+        </body>
+    </html>
+    ]]></Content>
+</Module>
\ No newline at end of file

Added: shindig/trunk/content/samplecontainer/examples/media/MediaUI.js
URL: http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/MediaUI.js?rev=1000579&view=auto
==============================================================================
--- shindig/trunk/content/samplecontainer/examples/media/MediaUI.js (added)
+++ shindig/trunk/content/samplecontainer/examples/media/MediaUI.js Thu Sep 23 18:57:41 2010
@@ -0,0 +1,503 @@
+/*
+ * The User Interface for the Albums & MediaItems gadget.
+ *
+ * SHINDIG TODOS
+ *  set ownerId automatically?
+ *  delete children mediaitems when album deleted?
+ *  update only updates given fields?
+ *  update album mediaitem count when inserting/removing mediaitem?
+ *
+ * GADGET TODOS
+ *  album info such as how many albums are contained
+ *  fix auto height for edit album popup
+ *  thumnail pictures
+ */
+function MediaUI(social) {
+    var viewer = null;
+    var divManager = null;
+
+    /*
+     * Initializes the gadget.
+     */
+    this.init = function() {
+        console.log("initializing AlbumsUI");
+        
+        // Manages high-level divs
+        divManager = new DivManager();
+        divManager.init();
+        
+        // Load data and render
+        loadData(function() {
+            social.getAlbumsByUser(viewer.id, function(response) {
+                renderAlbums(response.list);
+                divManager.showAlbums();
+            });
+        });
+    }
+    
+    /*
+     * Pre-load data for gadget.
+     */
+    function loadData(callback) {
+        social.getViewer(function(data) {
+            viewer = data;
+            callback();
+        });
+    }
+    
+    /*
+     * Manages the gadgets main DIV elements.
+     * 
+     * TODO: use dojo.query() & classes rather than divs[]
+     * TODO: showOnly() function to avoid flashing/pauses
+     */
+    function DivManager() {
+        var divs = [];
+    
+        this.init = function() {
+            console.log('DivManager.init');
+            addDiv('albumsDiv');
+            addDiv('mediaItemsDiv');
+            addDiv('mediaItemDiv');
+            hideAll();
+        }
+    
+        this.showAlbums = function() {
+            console.log('DivManager.showAlbums');
+            hideAll();
+            divs['albumsDiv'].style.display = 'block';
+            this.refreshWindow();
+        }
+        
+        this.showMediaItems = function() {
+            console.log('DivManager.showMediaItems');
+            hideAll();
+            divs['mediaItemsDiv'].style.display = 'block';
+            this.refreshWindow();
+        }
+        
+        this.showMediaItem = function() {
+            console.log('DivManager.showMediaItem');
+            hideAll();
+            divs['mediaItemDiv'].style.display = 'block';
+            this.refreshWindow();
+        }
+        
+        this.refreshWindow = function() {
+            gadgets.window.adjustHeight(500);
+        }
+        
+        function hideAll() {
+            for (key in divs) { divs[key].style.display = 'none'; }
+        }
+        
+        function addDiv(id) { divs[id] = dojo.create('div', {id: id}, dojo.body()); }
+    }
+    
+    /*
+     * Renders a list of the given albums.
+     */
+    function renderAlbums(albums) {
+        console.log('renderAlbums');
+
+        dojo.empty('albumsDiv');
+        var albumsDiv = dojo.byId('albumsDiv');
+        
+        var albumsBanner = dojo.create('div', null, albumsDiv);
+        var table = dojo.create('table', null, albumsBanner);
+        var tbody = dojo.create('tbody', null, table);
+        var tr = dojo.create('tr', null, tbody);
+        dojo.create('td', {innerHTML: viewer.name.formatted + "'s Albums", className: 'albumsTitle'}, tr);
+        dojo.create('td', null, tr).appendChild(new dijit.form.Button({label: '+ New Album', onClick: dojo.hitch(this, editAlbumPopup, null)}).domNode);
+        
+        var albumsList = dojo.create('div', null, albumsDiv);
+        if (albums.length > 0) {
+            var table = dojo.create('table', {className: 'albumsTable'}, albumsList);
+            var tbody = dojo.create('tbody', null, table);
+            for (i = 0; i < albums.length; i++) {
+                var albumRow = dojo.create('tr', null, tbody);
+                var albumLeft = dojo.create('td', {className: 'albumListThumbnail'}, albumRow);
+                var imgLink = dojo.create('a', {href: "javascript:;", onclick: dojo.hitch(this, onClickAlbum, viewer.id, albums[i])}, albumLeft);
+                dojo.create('img', {src: albums[i].thumbnailUrl, onerror: "this.src='/samplecontainer/examples/media/folder.png';", width: '100%'}, imgLink);
+                var albumRight = dojo.create('td', {className: 'albumListRight'}, albumRow);
+                var albumTitleRow = dojo.create('tr', null, albumRight);
+                var titleTd = dojo.create('td', {className: 'albumListTitle'}, albumTitleRow); 
+                dojo.create('a', {innerHTML: albums[i].title, href: 'javascript:;', onclick: dojo.hitch(this, onClickAlbum, viewer.id, albums[i])}, titleTd);
+                var editTd = dojo.create('td', {className: 'actionLinks', style: 'text-align: right'}, albumTitleRow);
+                dojo.create('a', {innerHTML: 'edit', href: 'javascript:;', onclick: dojo.hitch(this, editAlbumPopup, albums[i])}, editTd);
+                editTd.appendChild(dojo.doc.createTextNode(' | '));
+                dojo.create('a', {innerHTML: 'delete', href: 'javascript:;', onclick: dojo.hitch(this, deleteAlbumPopup, albums[i])}, editTd);
+                if (albums[i].description) {
+                    var albumDescription = dojo.create('tr', null, albumRight);
+                    dojo.create('td', {innerHTML: albums[i].description, className: 'albumListDescription', colspan: '2'}, albumDescription);
+                }
+                //var albumInfo = dojo.create('tr', null, albumRight);
+                //var infoStr = "ID: " + albums[i].id + " | Owner ID: " + albums[i].ownerId;
+                //dojo.create('td', {innerHTML: infoStr, className: 'albumListInfo', colspan: '2'}, albumInfo);
+            }
+        } else {
+            albumsDiv.appendChild(dojo.doc.createTextNode("No albums found."));
+        }
+        divManager.refreshWindow();
+        
+        // Handles when user clicks an album
+        function onClickAlbum(userId, album) {
+            social.getMediaItemsByAlbum(userId, album.id, function(response) {
+                renderMediaItems(album, response.list);
+                divManager.showMediaItems();
+            });
+        }
+    }
+    
+    /*
+     * Convenience function to retrieve albums and render.
+     */
+    function renderAlbumsByUser(userId, callback) {
+        social.getAlbumsByUser(userId, function(response) {
+            renderAlbums(response.list);
+            divManager.showAlbums();
+            if (callback != null) callback();
+        });
+    }
+    
+    /*
+     * Renders a grid of the given MediaItems.
+     * 
+     * TODO: simplify this by simply taking in 'album', retrieving MediaItems here
+     */
+    function renderMediaItems(album, mediaItems) {
+        console.log('renderMediaItems');
+        dojo.empty('mediaItemsDiv');
+        var mediaItemsDiv = dojo.byId('mediaItemsDiv');
+        var numCols = 5;
+        
+        // Div to display navation bar and Create button
+        var topDiv = dojo.create('div', null, mediaItemsDiv);
+        var table = dojo.create('table', null, topDiv);
+        var tbody = dojo.create('tbody', null, table);
+        var tr = dojo.create('tr', null, tbody);
+        var td = dojo.create('td', {style: 'width:100%'}, tr);
+        dojo.create('a', {innerHTML: 'Albums', href: 'javascript:;', onclick: dojo.hitch(this, renderAlbumsByUser, viewer.id, null)}, td);
+        td.appendChild(dojo.doc.createTextNode(' > ' + album.title));
+        td = dojo.create('td', {style: 'width:100%'}, tr);
+        var createButton = new dijit.form.Button({label: '+ New MediaItem', onClick: dojo.hitch(this, editMediaItemPopup, album, null)});
+        td.appendChild(createButton.domNode);
+        
+        // Div to display MediaItems in a grid
+        var gridDiv = dojo.create('div', null, mediaItemsDiv);
+        if (mediaItems.length > 0) {
+            var table = dojo.create('table', null, gridDiv);
+            var tbody = dojo.create('tbody', null, table);
+            var tr = null;
+            for (i = 0; i < mediaItems.length; i++) {
+                if (i % numCols == 0) {
+                    tr = dojo.create('tr', null, tbody);
+                }
+                var td = dojo.create('td', {className: 'mediaItemBox'}, tr);
+                var imageTd = dojo.create('tr', null, td).appendChild(dojo.create('td', {className: 'mediaItemThumbnail'}));
+                if (mediaItems[i].url) {
+                    var imageLink = dojo.create('a', {href: "javascript:;", onclick: dojo.hitch(this, renderMediaItem, album, mediaItems[i])}, imageTd);
+                    imageLink.appendChild(dojo.create('img', {src: mediaItems[i].thumbnailUrl, onerror: "this.src='/samplecontainer/examples/media/document.png';", style:'height:100px;'}));
+                } else {
+                    dojo.create('img', {src: mediaItems[i].thumbnailUrl, onerror: "this.src='/samplecontainer/examples/media/document.png';", style:'height:100px;'}, imageTd);
+                }
+                var titleTd = dojo.create('tr', null, td).appendChild(dojo.create('td', {style: "text-align:center; font-family:'comic sans ms';white-space:nowrap;"}));
+                titleTd.appendChild(dojo.doc.createTextNode(mediaItems[i].title));
+                var actionsTd = dojo.create('tr', null, td).appendChild(dojo.create('td', {className: 'actionLinks', style: 'text-align: center;'}));
+                dojo.create('a', {innerHTML: 'edit', href: 'javascript:;', onclick: dojo.hitch(this, editMediaItemPopup, album, mediaItems[i])}, actionsTd);
+                actionsTd.appendChild(dojo.doc.createTextNode(' | '));
+                dojo.create('a', {innerHTML: 'delete', href: 'javascript:;', onclick: dojo.hitch(this, deleteMediaItemPopup, album, mediaItems[i])}, actionsTd);
+            }
+        } else {
+            gridDiv.appendChild(dojo.doc.createTextNode('Album is empty'));
+        }
+        divManager.refreshWindow();
+    }
+    
+    /*
+     * Convenience function to retriev & render MediaItems by Album.
+     */
+    function retrieveAndRenderMediaItems(album) {
+        social.getMediaItemsByAlbum(viewer.id, album.id, function(response) {
+            divManager.showMediaItems();
+            renderMediaItems(album, response.list);
+        });
+    }
+    
+    /*
+     * Renders the view for a single MediaItem.
+     */
+    function renderMediaItem(album, mediaItem) {
+        console.log('renderMediaItem');
+        dojo.empty('mediaItemDiv');
+        var mediaItemDiv = dojo.byId('mediaItemDiv');
+        
+        // Div to display navation bar and Create button
+        var topDiv = dojo.create('div', null, mediaItemDiv);
+        var table = dojo.create('table', null, topDiv);
+        var tbody = dojo.create('tbody', null, table);
+        var tr = dojo.create('tr', null, tbody);
+        var td = dojo.create('td', {style: 'width:100%'}, tr);
+        dojo.create('a', {innerHTML: 'Albums', href: 'javascript:;', onclick: dojo.hitch(this, renderAlbumsByUser, viewer.id, null)}, td);
+        td.appendChild(dojo.doc.createTextNode(" > "));
+        dojo.create('a', {innerHTML: album.title, href: "javascript:;", onclick: dojo.hitch(this, retrieveAndRenderMediaItems, album)}, td);
+        td.appendChild(dojo.doc.createTextNode(" > " + mediaItem.title));
+        
+        // Div to show MediaItem
+        var itemDiv = dojo.create('div', null, mediaItemDiv);
+        var table = dojo.create('table', null, itemDiv);
+        var tbody = dojo.create('tbody', null, table);
+        var tr = dojo.create('tr', null, tbody);
+        var td = dojo.create('td', null, tr);
+        dojo.create('img', {src: mediaItem.url}, td);
+        if (mediaItem.description) {
+            tr = dojo.create('tr', null, tbody);
+            td = dojo.create('td', null, tr);
+            td.appendChild(dojo.doc.createTextNode(mediaItem.description));
+        }
+        
+        divManager.showMediaItem();
+    }
+    
+    /*
+     * Popup to edit album.
+     */
+    function editAlbumPopup(album) {
+        console.log('editAlbumPopup: ' + JSON.stringify(album));
+        
+        var title = (album == null ? 'Create' : 'Edit') + ' Album';
+        var dialog = new dijit.Dialog({id: 'editAlbumPopup', title: title, onCancel: destroyDialog});
+        dojo.body().appendChild(dialog.domNode);
+        
+        var formDiv = dojo.create('div', {id: 'editAlbumFormDiv'});
+        var form = new dijit.form.Form({id: 'editAlbumForm'});
+        formDiv.appendChild(form.domNode);
+        var table = dojo.create('table', null, form.domNode);
+        var tbody = dojo.create('tbody', null, table);
+        var tr = dojo.create('tr', null, tbody);
+        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Title', for: 'title'}));
+        dojo.create('td', null, tr).appendChild(
+            new dijit.form.ValidationTextBox({
+                name: 'title',
+                value: album == null ? '' : album.title
+            }).domNode
+        );
+        tr = dojo.create('tr', null, tbody);
+        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Thumnail URL', for: 'thumbnail'}));
+        dojo.create('td', null, tr).appendChild(
+            new dijit.form.ValidationTextBox({
+                name: 'thumbnail',
+                value: album == null ? '' : album.thumbnailUrl
+            }).domNode
+        );
+        tr = dojo.create('tr', null, tbody);
+        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Description', for: 'description'}));
+        dojo.create('td', null, tr).appendChild(
+            new dijit.form.Textarea({
+                name: 'description',
+                value: album == null ? '' : album.description
+            }).domNode
+        );
+        tr = dojo.create('tr', null, tbody);
+        var buttonTd = dojo.create('td', {colspan: '2', align: 'center'}, tr);
+        buttonTd.appendChild(new dijit.form.Button({
+                label: 'Save',
+                onClick: saveForm
+            }).domNode
+        );
+        buttonTd.appendChild(new dijit.form.Button({
+                label: 'Cancel',
+                onClick: destroyDialog
+            }).domNode
+        );
+        
+        dialog.set('content', formDiv);
+        dialog.show();
+        
+        function saveForm() {
+            console.log('saveForm');
+            var values = form.get('value');
+            var newAlbum = {
+                title: values.title,
+                thumbnailUrl: values.thumbnail,
+                description: values.description,
+                ownerId: viewer.id  // TODO: bug? Albums service should set this
+            };
+            if (album == null) {
+                social.createAlbum(viewer.id, newAlbum, function(response) {
+                    console.log('created album response: ' + JSON.stringify(response));
+                    renderAlbumsByUser(viewer.id);
+                });
+            } else {
+                social.updateAlbum(viewer.id, album.id, newAlbum, function(response) {
+                    console.log('updated album response: ' + JSON.stringify(response));
+                    renderAlbumsByUser(viewer.id);
+                });
+            }
+            destroyDialog();
+        }
+        
+        // Handles destroying the dialog popup
+        function destroyDialog() {
+            console.log('destroyDialog');
+            dialog.destroyRecursive(false);
+            dialog.destroyRendering(false);
+            dialog.destroy(false);
+        }
+    }
+    
+    /*
+     * Popup to edit MediaItem.
+     */
+    function editMediaItemPopup(album, mediaItem) {
+        console.log('editMediaItemPopup: ' + JSON.stringify(mediaItem));
+        
+        var albumId = mediaItem == null ? album.id : mediaItem.albumId;
+        var title = (mediaItem == null ? 'Create' : 'Edit') + ' MediaItem';
+        var dialog = new dijit.Dialog({id: 'editMediaItemPopup', title: title, onCancel: destroyDialog});
+        dojo.body().appendChild(dialog.domNode);
+        
+        // Form div
+        var formDiv = dojo.create('div', {id: 'editMediaItemFormDiv'});
+        var form = new dijit.form.Form({id: 'editMediaItemForm'});
+        formDiv.appendChild(form.domNode);
+        var table = dojo.create('table', null, form.domNode);
+        var tbody = dojo.create('tbody', null, table);
+        var tr = dojo.create('tr', null, tbody);
+        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Title', for: 'title'}));
+        dojo.create('td', null, tr).appendChild(
+            new dijit.form.ValidationTextBox({
+                name: 'title',
+                value: mediaItem == null ? '' : mediaItem.title
+            }).domNode
+        );
+        tr = dojo.create('tr', null, tbody);
+        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Description', for: 'description'}));
+        dojo.create('td', null, tr).appendChild(
+            new dijit.form.Textarea({
+                name: 'description',
+                value: mediaItem == null ? '' : mediaItem.description
+            }).domNode
+        );
+        tr = dojo.create('tr', null, tbody);
+        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Type', for: 'type'}));
+        dojo.create('td', null, tr).appendChild(
+            new dijit.form.ValidationTextBox({
+                name: 'type',
+                value: mediaItem == null ? '' : mediaItem.type
+            }).domNode
+        );
+        tr = dojo.create('tr', null, tbody);
+        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Thumnail URL', for: 'thumbnailUrl'}));
+        dojo.create('td', null, tr).appendChild(
+            new dijit.form.ValidationTextBox({
+                name: 'thumbnailUrl',
+                value: mediaItem == null ? '' : mediaItem.thumbnailUrl
+            }).domNode
+        );
+        tr = dojo.create('tr', null, tbody);
+        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'URL', for: 'url'}));
+        dojo.create('td', null, tr).appendChild(
+            new dijit.form.ValidationTextBox({
+                name: 'url',
+                value: mediaItem == null ? '' : mediaItem.url
+            }).domNode
+        );
+        tr = dojo.create('tr', null, tbody);
+        var buttonTd = dojo.create('td', {colspan: '2', align: 'center'}, tr);
+        buttonTd.appendChild(new dijit.form.Button({
+                label: 'Save',
+                onClick: saveForm
+            }).domNode
+        );
+        buttonTd.appendChild(new dijit.form.Button({
+                label: 'Cancel',
+                onClick: destroyDialog
+            }).domNode
+        );
+        
+        // Textarea div for JSON
+        var textAreaDiv = dojo.create('div', {style: "width:100%; height:100%;", id: 'textAreaDiv'});
+        var textArea = new dijit.form.Textarea({value: JSON.stringify(mediaItem), rows: "20"});
+        textAreaDiv.appendChild(textArea.domNode);
+        
+        // Put divs together
+        var tabContainer = new dijit.layout.TabContainer({style: "width:400px; height:300px;"});
+        var formContentPane = new dijit.layout.ContentPane({title: "Form", content: formDiv});
+        tabContainer.addChild(formContentPane);
+        var textAreaContentPane = new dijit.layout.ContentPane({title: "JSON", content: textAreaDiv});
+        tabContainer.addChild(textAreaContentPane);
+        tabContainer.startup();
+        var dialogDiv = dojo.create('div', null);
+        dialogDiv.appendChild(tabContainer.domNode);
+        
+        dialog.set('content', dialogDiv);
+        dialog.show();
+        
+        function saveForm() {
+            console.log('saveForm mediaItem');
+            var values = form.get('value');
+            var newMediaItem = {
+                title: values.title,
+                description: values.description,
+                type: values.type,
+                thumbnailUrl: values.thumbnailUrl,
+                url: values.url
+            };
+            if (newMediaItem.type == null || newMediaItem.type == "") newMediaItem.type = "image";
+            if (mediaItem == null) {
+                social.createMediaItem(viewer.id, albumId, newMediaItem, function(response) {
+                    console.log('created MediaItem response: ' + JSON.stringify(response));
+                    social.getMediaItemsByAlbum(viewer.id, album.id, function(response) {
+                        renderMediaItems(album, response.list);
+                    });
+                });
+            } else {
+                social.updateMediaItem(viewer.id, albumId, mediaItem.id, newMediaItem, function(response) {
+                    console.log('updated MediaItem response: ' + JSON.stringify(response));
+                    social.getMediaItemsByAlbum(viewer.id, album.id, function(response) {
+                        renderMediaItems(album, response.list);
+                    });
+                });
+            }
+            destroyDialog();
+        }
+        
+        // Handles destroying the dialog popup
+        function destroyDialog() {
+            console.log('destroyDialog');
+            dialog.destroyRecursive(false);
+            dialog.destroyRendering(false);
+            dialog.destroy(false);
+        }
+    }
+    
+    /*
+     * Popup to confirm that the user wants to delete album.
+     */
+    function deleteAlbumPopup(album) {
+        console.log('deleteAlbumPopup');
+        if (confirm("Delete '" + album.title + "'?")) {
+            social.deleteAlbum(viewer.id, album.id, function(response) {
+                console.log('delete album response: ' + JSON.stringify(response));
+                renderAlbumsByUser(viewer.id);
+            });
+        }
+    }
+    
+    /*
+     * Popup to confirm user wants to delete MediaItem.
+     */
+    function deleteMediaItemPopup(album, mediaItem) {
+        console.log('deleteMediaItemPopup');
+        var albumId = mediaItem.albumId;
+        if (confirm("Delete '" + mediaItem.title + "'?")) {
+            social.deleteMediaItem(viewer.id, albumId, mediaItem.id, function(response) {
+                console.log('delete mediaItem response: ' + JSON.stringify(response));
+                social.getMediaItemsByAlbum(viewer.id, albumId, function(response) {
+                    renderMediaItems(album, response.list);
+                });
+            });
+        }
+    }
+}
\ No newline at end of file

Added: shindig/trunk/content/samplecontainer/examples/media/Social.js
URL: http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/Social.js?rev=1000579&view=auto
==============================================================================
--- shindig/trunk/content/samplecontainer/examples/media/Social.js (added)
+++ shindig/trunk/content/samplecontainer/examples/media/Social.js Thu Sep 23 18:57:41 2010
@@ -0,0 +1,138 @@
+/*
+ * Defines high level functionality to interact with the OpenSocial API.
+ */
+function SocialWrapper() {
+
+    /*
+     * Retrieves the current viewer.
+     */
+    this.getViewer = function(callback) {
+        osapi.people.getViewer().execute(callback);
+    }
+    
+    /*
+     * Retrieves the current owner.
+     */
+    this.getOwner = function(callback) {
+        osapi.people.getOwner().execute(callback);
+    }
+    
+    //------------------------ ALBUMS ----------------------
+    /*
+     * Retrieves albums by ID(s).
+     */
+    this.getAlbumsById = function(userId, albumId, callback) {
+        var params = {userId: userId, albumId: albumId};
+        osapi.albums.get(params).execute(callback);
+    }
+     
+    /*
+     * Retrieves albums by user.
+     */
+    this.getAlbumsByUser = function(userId, callback) {
+        osapi.albums.get({userId: userId}).execute(callback);
+    }
+    
+    /*
+     * Retrieves albums by group.
+     */
+    this.getAlbumsByGroup = function(userId, groupId, callback) {
+        osapi.albums.get({userId: userId, groupId: groupId}).execute(callback);
+    }
+    
+    /*
+     * Creates an album for the given user.
+     */
+    this.createAlbum = function(userId, album, callback) {
+        var params = {
+            userId: userId,
+            album: album
+        };
+        osapi.albums.create(params).execute(callback);
+    }
+    
+    /*
+     * Updates an album by ID.
+     */
+    this.updateAlbum = function(userId, albumId, album, callback) {
+        var params = {
+            userId: userId,
+            albumId: albumId,
+            album: album
+        };
+        osapi.albums.update(params).execute(callback);
+    }
+    
+    /*
+     * Deletes an album by ID.
+     */
+    this.deleteAlbum = function(userId, albumId, callback) {
+        var params = {userId: userId, albumId: albumId};
+        osapi.albums.delete(params).execute(callback);
+    }
+    
+    //------------------------------- MEDIAITEMS ----------------------------
+    /*
+     * Creates a MediaItem.
+     */
+    this.createMediaItem = function(userId, albumId, mediaItem, callback) {
+        var params = {
+            userId: userId,
+            albumId: albumId,
+            mediaItem: mediaItem
+        };
+        osapi.mediaItems.create(params).execute(callback);
+    }
+    
+    /*
+     * Updates a MediaItem by ID.
+     */
+    this.updateMediaItem = function(userId, albumId, mediaItemId, mediaItem, callback) {
+        var params = {
+            userId: userId,
+            albumId: albumId,
+            mediaItemId: mediaItemId,
+            mediaItem: mediaItem
+        };
+        console.log("PARAMS: " + JSON.stringify(params));
+        osapi.mediaItems.update(params).execute(callback);
+    }
+    
+    /*
+     * Retrieves MediaItems by ID(s).
+     */
+    this.getMediaItemsById = function(userId, albumId, mediaItemId, callback) {
+        var params = {
+            userId: userId,
+            albumId: albumId,
+            mediaItemId: mediaItemId
+        };
+        osapi.mediaItems.get(params).execute(callback);
+    }
+    
+    /*
+     * Retrieves MediaItems by album.
+     */
+    this.getMediaItemsByAlbum = function(userId, albumId, callback) {
+        osapi.mediaItems.get({userId: userId, albumId: albumId}).execute(callback);
+    }
+     
+    /*
+     * Retrieves MediaItems by user and group.
+     */
+    this.getMediaItemsByUser = function(userId, groupId, callback) {
+        osapi.mediaItems.get({userId: userId, groupId: groupId}).execute(callback);
+    }
+     
+    /*
+     * Deletes a MediaItem by ID.
+     */
+    this.deleteMediaItem = function(userId, albumId, mediaItemId, callback) {
+        var params = {
+            userId: userId,
+            albumId: albumId,
+            mediaItemId: mediaItemId
+        };
+        osapi.mediaItems.delete(params).execute(callback);
+    }
+}
\ No newline at end of file

Added: shindig/trunk/content/samplecontainer/examples/media/document.png
URL: http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/document.png?rev=1000579&view=auto
==============================================================================
Binary file - no diff available.

Propchange: shindig/trunk/content/samplecontainer/examples/media/document.png
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: shindig/trunk/content/samplecontainer/examples/media/folder.png
URL: http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/folder.png?rev=1000579&view=auto
==============================================================================
Binary file - no diff available.

Propchange: shindig/trunk/content/samplecontainer/examples/media/folder.png
------------------------------------------------------------------------------
    svn:mime-type = application/octet-stream

Added: shindig/trunk/content/samplecontainer/examples/media/styles.css
URL: http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/styles.css?rev=1000579&view=auto
==============================================================================
--- shindig/trunk/content/samplecontainer/examples/media/styles.css (added)
+++ shindig/trunk/content/samplecontainer/examples/media/styles.css Thu Sep 23 18:57:41 2010
@@ -0,0 +1,92 @@
+/* ============ ROUND 2 ============== */
+
+td.albumsTitle {
+    font-family:'comic sans ms';
+    width: 100%;
+    font-size:24px;
+}
+
+td.albumListThumbnail {
+    width: 10%;
+    height: 75px;
+}
+
+td.albumListRight {
+    width: 90%;
+}
+
+td.actionLinks {
+    width:100%;
+    font-size:12px;
+}
+
+td.albumListTitle {
+    font-size:24px;
+    white-space:nowrap;
+    font-family:'comic sans ms';
+}
+
+td.albumListDescription {
+    font-family:'comic sans ms';
+}
+
+.albumsTable {
+    width:100%;
+    border-style:solid;
+    background-color:#b0c4de;
+}
+
+td.mediaItemThumbnail {
+    height:100%;
+}
+
+td.mediaItemBox {
+    width: 150px;
+    height: 100px;
+}
+
+.mediaItemControls {
+
+}
+
+
+/* ============ ROUND 1 ============== */
+.temp1 {background-color:#6495ed;}
+.temp2 {background-color:#e0ffff;}
+.temp3 {
+    background-color:#b0c4de;
+    background-image:url('img_flwr.png');
+    background-repeat:no-repeat;
+    background-position:top right;
+}
+
+td2 {
+    border-style:solid;
+}
+
+td.albumLeft {
+    width:10%;
+}
+
+td.albumRight {
+    width: 90%;
+}
+
+
+
+td.albumEdit {
+    width:100%;
+    text-align:right;
+    vertical-align:middle;
+    font-size:12px;
+}
+
+
+
+.albumTitleStyle {
+    color: blue;
+    
+}
+.albumElement {
+    background-color:#b0c4de;
+}

Re: svn commit: r1000579 - in /shindig/trunk/content/samplecontainer/examples/media: ./ Media.xml MediaUI.js Social.js document.png folder.png styles.css

Posted by Paul Lindner <li...@inuus.com>.

By definition, yes.   I asked that the appropriate boiler plate be added in
the review request.

Han, can you add the Apache headers to these files and commit?

Thanks!

On Thu, Sep 23, 2010 at 12:03 PM, Chirag Shah <ch...@gmail.com> wrote:

> Are these files licensed under the Apache License?
>
> On Thu, Sep 23, 2010 at 11:57 AM,  <hn...@apache.org> wrote:
> > Author: hnguy
> > Date: Thu Sep 23 18:57:41 2010
> > New Revision: 1000579
> >
> > URL: http://svn.apache.org/viewvc?rev=1000579&view=rev
> > Log:
> > SHINDIG-1430 - Patch from Eric Woods - Media Sample Gadget
> >
> > Added:
> >    shindig/trunk/content/samplecontainer/examples/media/
> >    shindig/trunk/content/samplecontainer/examples/media/Media.xml
> >    shindig/trunk/content/samplecontainer/examples/media/MediaUI.js
> >    shindig/trunk/content/samplecontainer/examples/media/Social.js
> >    shindig/trunk/content/samplecontainer/examples/media/document.png
> (with props)
> >    shindig/trunk/content/samplecontainer/examples/media/folder.png
> (with props)
> >    shindig/trunk/content/samplecontainer/examples/media/styles.css
> >
> > Added: shindig/trunk/content/samplecontainer/examples/media/Media.xml
> > URL:
> http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/Media.xml?rev=1000579&view=auto
> >
> ==============================================================================
> > --- shindig/trunk/content/samplecontainer/examples/media/Media.xml
> (added)
> > +++ shindig/trunk/content/samplecontainer/examples/media/Media.xml Thu
> Sep 23 18:57:41 2010
> > @@ -0,0 +1,54 @@
> > +<?xml version="1.0" encoding="UTF-8"?>
> > +<Module>
> > +    <ModulePrefs title="Albums and MediaItems">
> > +        <Require feature="osapi"/>
> > +        <Require feature="dynamic-height"/>
> > +    </ModulePrefs>
> > +
> > +    <Content type="html"><![CDATA[
> > +    <html>
> > +        <head>
> > +            <!-- Source imports -->
> > +            <script src='
> http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js'
> type='text/javascript' djConfig='parseOnLoad:true, isDebug:true'></script>
> > +            <script src='Social.js' type='text/javascript'></script>
> > +            <script src='MediaUI.js' type='text/javascript'></script>
> > +
> > +
> > +            <!-- Styling -->
> > +            <link rel="stylesheet" type="text/css" href="
> http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css
> "></link>
> > +            <link rel="stylesheet" type="text/css" href="styles.css">
> > +            <style type="text/css">
> > +            </style>
> > +
> > +            <!-- DOJO requires -->
> > +            <script type='text/javascript'>
> > +                dojo.require('dijit.form.Button');
> > +                dojo.require('dijit.form.Form');
> > +                dojo.require('dijit.form.TextBox');
> > +                dojo.require('dijit.form.ValidationTextBox');
> > +                dojo.require('dijit.Dialog');
> > +                dojo.require('dijit.form.Textarea');
> > +                dojo.require('dijit.layout.ContentPane');
> > +                dojo.require('dijit.layout.TabContainer');
> > +            </script>
> > +
> > +            <!-- JavaScript -->
> > +            <script type="text/javascript">
> > +                <!-- Entry point to the gadget -->
> > +                function init() {
> > +                    console.log("dojo initialized");
> > +                    new MediaUI(new SocialWrapper()).init();
> > +                }
> > +
> > +                <!-- Register entry point -->
> > +                dojo.addOnLoad(init);   // TODO: work-around to
> tundra.css issue
> > +                //gadgets.util.registerOnLoadHandler(function() {
> > +                    //dojo.addOnLoad(init);
> > +                //});
> > +            </script>
> > +        </head>
> > +        <body class="tundra">
> > +        </body>
> > +    </html>
> > +    ]]></Content>
> > +</Module>
> > \ No newline at end of file
> >
> > Added: shindig/trunk/content/samplecontainer/examples/media/MediaUI.js
> > URL:
> http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/MediaUI.js?rev=1000579&view=auto
> >
> ==============================================================================
> > --- shindig/trunk/content/samplecontainer/examples/media/MediaUI.js
> (added)
> > +++ shindig/trunk/content/samplecontainer/examples/media/MediaUI.js Thu
> Sep 23 18:57:41 2010
> > @@ -0,0 +1,503 @@
> > +/*
> > + * The User Interface for the Albums & MediaItems gadget.
> > + *
> > + * SHINDIG TODOS
> > + *  set ownerId automatically?
> > + *  delete children mediaitems when album deleted?
> > + *  update only updates given fields?
> > + *  update album mediaitem count when inserting/removing mediaitem?
> > + *
> > + * GADGET TODOS
> > + *  album info such as how many albums are contained
> > + *  fix auto height for edit album popup
> > + *  thumnail pictures
> > + */
> > +function MediaUI(social) {
> > +    var viewer = null;
> > +    var divManager = null;
> > +
> > +    /*
> > +     * Initializes the gadget.
> > +     */
> > +    this.init = function() {
> > +        console.log("initializing AlbumsUI");
> > +
> > +        // Manages high-level divs
> > +        divManager = new DivManager();
> > +        divManager.init();
> > +
> > +        // Load data and render
> > +        loadData(function() {
> > +            social.getAlbumsByUser(viewer.id, function(response) {
> > +                renderAlbums(response.list);
> > +                divManager.showAlbums();
> > +            });
> > +        });
> > +    }
> > +
> > +    /*
> > +     * Pre-load data for gadget.
> > +     */
> > +    function loadData(callback) {
> > +        social.getViewer(function(data) {
> > +            viewer = data;
> > +            callback();
> > +        });
> > +    }
> > +
> > +    /*
> > +     * Manages the gadgets main DIV elements.
> > +     *
> > +     * TODO: use dojo.query() & classes rather than divs[]
> > +     * TODO: showOnly() function to avoid flashing/pauses
> > +     */
> > +    function DivManager() {
> > +        var divs = [];
> > +
> > +        this.init = function() {
> > +            console.log('DivManager.init');
> > +            addDiv('albumsDiv');
> > +            addDiv('mediaItemsDiv');
> > +            addDiv('mediaItemDiv');
> > +            hideAll();
> > +        }
> > +
> > +        this.showAlbums = function() {
> > +            console.log('DivManager.showAlbums');
> > +            hideAll();
> > +            divs['albumsDiv'].style.display = 'block';
> > +            this.refreshWindow();
> > +        }
> > +
> > +        this.showMediaItems = function() {
> > +            console.log('DivManager.showMediaItems');
> > +            hideAll();
> > +            divs['mediaItemsDiv'].style.display = 'block';
> > +            this.refreshWindow();
> > +        }
> > +
> > +        this.showMediaItem = function() {
> > +            console.log('DivManager.showMediaItem');
> > +            hideAll();
> > +            divs['mediaItemDiv'].style.display = 'block';
> > +            this.refreshWindow();
> > +        }
> > +
> > +        this.refreshWindow = function() {
> > +            gadgets.window.adjustHeight(500);
> > +        }
> > +
> > +        function hideAll() {
> > +            for (key in divs) { divs[key].style.display = 'none'; }
> > +        }
> > +
> > +        function addDiv(id) { divs[id] = dojo.create('div', {id: id},
> dojo.body()); }
> > +    }
> > +
> > +    /*
> > +     * Renders a list of the given albums.
> > +     */
> > +    function renderAlbums(albums) {
> > +        console.log('renderAlbums');
> > +
> > +        dojo.empty('albumsDiv');
> > +        var albumsDiv = dojo.byId('albumsDiv');
> > +
> > +        var albumsBanner = dojo.create('div', null, albumsDiv);
> > +        var table = dojo.create('table', null, albumsBanner);
> > +        var tbody = dojo.create('tbody', null, table);
> > +        var tr = dojo.create('tr', null, tbody);
> > +        dojo.create('td', {innerHTML: viewer.name.formatted + "'s
> Albums", className: 'albumsTitle'}, tr);
> > +        dojo.create('td', null, tr).appendChild(new
> dijit.form.Button({label: '+ New Album', onClick: dojo.hitch(this,
> editAlbumPopup, null)}).domNode);
> > +
> > +        var albumsList = dojo.create('div', null, albumsDiv);
> > +        if (albums.length > 0) {
> > +            var table = dojo.create('table', {className: 'albumsTable'},
> albumsList);
> > +            var tbody = dojo.create('tbody', null, table);
> > +            for (i = 0; i < albums.length; i++) {
> > +                var albumRow = dojo.create('tr', null, tbody);
> > +                var albumLeft = dojo.create('td', {className:
> 'albumListThumbnail'}, albumRow);
> > +                var imgLink = dojo.create('a', {href: "javascript:;",
> onclick: dojo.hitch(this, onClickAlbum, viewer.id, albums[i])},
> albumLeft);
> > +                dojo.create('img', {src: albums[i].thumbnailUrl,
> onerror: "this.src='/samplecontainer/examples/media/folder.png';", width:
> '100%'}, imgLink);
> > +                var albumRight = dojo.create('td', {className:
> 'albumListRight'}, albumRow);
> > +                var albumTitleRow = dojo.create('tr', null, albumRight);
> > +                var titleTd = dojo.create('td', {className:
> 'albumListTitle'}, albumTitleRow);
> > +                dojo.create('a', {innerHTML: albums[i].title, href:
> 'javascript:;', onclick: dojo.hitch(this, onClickAlbum, viewer.id,
> albums[i])}, titleTd);
> > +                var editTd = dojo.create('td', {className:
> 'actionLinks', style: 'text-align: right'}, albumTitleRow);
> > +                dojo.create('a', {innerHTML: 'edit', href:
> 'javascript:;', onclick: dojo.hitch(this, editAlbumPopup, albums[i])},
> editTd);
> > +                editTd.appendChild(dojo.doc.createTextNode(' | '));
> > +                dojo.create('a', {innerHTML: 'delete', href:
> 'javascript:;', onclick: dojo.hitch(this, deleteAlbumPopup, albums[i])},
> editTd);
> > +                if (albums[i].description) {
> > +                    var albumDescription = dojo.create('tr', null,
> albumRight);
> > +                    dojo.create('td', {innerHTML: albums[i].description,
> className: 'albumListDescription', colspan: '2'}, albumDescription);
> > +                }
> > +                //var albumInfo = dojo.create('tr', null, albumRight);
> > +                //var infoStr = "ID: " + albums[i].id + " | Owner ID: "
> + albums[i].ownerId;
> > +                //dojo.create('td', {innerHTML: infoStr, className:
> 'albumListInfo', colspan: '2'}, albumInfo);
> > +            }
> > +        } else {
> > +            albumsDiv.appendChild(dojo.doc.createTextNode("No albums
> found."));
> > +        }
> > +        divManager.refreshWindow();
> > +
> > +        // Handles when user clicks an album
> > +        function onClickAlbum(userId, album) {
> > +            social.getMediaItemsByAlbum(userId, album.id,
> function(response) {
> > +                renderMediaItems(album, response.list);
> > +                divManager.showMediaItems();
> > +            });
> > +        }
> > +    }
> > +
> > +    /*
> > +     * Convenience function to retrieve albums and render.
> > +     */
> > +    function renderAlbumsByUser(userId, callback) {
> > +        social.getAlbumsByUser(userId, function(response) {
> > +            renderAlbums(response.list);
> > +            divManager.showAlbums();
> > +            if (callback != null) callback();
> > +        });
> > +    }
> > +
> > +    /*
> > +     * Renders a grid of the given MediaItems.
> > +     *
> > +     * TODO: simplify this by simply taking in 'album', retrieving
> MediaItems here
> > +     */
> > +    function renderMediaItems(album, mediaItems) {
> > +        console.log('renderMediaItems');
> > +        dojo.empty('mediaItemsDiv');
> > +        var mediaItemsDiv = dojo.byId('mediaItemsDiv');
> > +        var numCols = 5;
> > +
> > +        // Div to display navation bar and Create button
> > +        var topDiv = dojo.create('div', null, mediaItemsDiv);
> > +        var table = dojo.create('table', null, topDiv);
> > +        var tbody = dojo.create('tbody', null, table);
> > +        var tr = dojo.create('tr', null, tbody);
> > +        var td = dojo.create('td', {style: 'width:100%'}, tr);
> > +        dojo.create('a', {innerHTML: 'Albums', href: 'javascript:;',
> onclick: dojo.hitch(this, renderAlbumsByUser, viewer.id, null)}, td);
> > +        td.appendChild(dojo.doc.createTextNode(' > ' + album.title));
> > +        td = dojo.create('td', {style: 'width:100%'}, tr);
> > +        var createButton = new dijit.form.Button({label: '+ New
> MediaItem', onClick: dojo.hitch(this, editMediaItemPopup, album, null)});
> > +        td.appendChild(createButton.domNode);
> > +
> > +        // Div to display MediaItems in a grid
> > +        var gridDiv = dojo.create('div', null, mediaItemsDiv);
> > +        if (mediaItems.length > 0) {
> > +            var table = dojo.create('table', null, gridDiv);
> > +            var tbody = dojo.create('tbody', null, table);
> > +            var tr = null;
> > +            for (i = 0; i < mediaItems.length; i++) {
> > +                if (i % numCols == 0) {
> > +                    tr = dojo.create('tr', null, tbody);
> > +                }
> > +                var td = dojo.create('td', {className: 'mediaItemBox'},
> tr);
> > +                var imageTd = dojo.create('tr', null,
> td).appendChild(dojo.create('td', {className: 'mediaItemThumbnail'}));
> > +                if (mediaItems[i].url) {
> > +                    var imageLink = dojo.create('a', {href:
> "javascript:;", onclick: dojo.hitch(this, renderMediaItem, album,
> mediaItems[i])}, imageTd);
> > +                    imageLink.appendChild(dojo.create('img', {src:
> mediaItems[i].thumbnailUrl, onerror:
> "this.src='/samplecontainer/examples/media/document.png';",
> style:'height:100px;'}));
> > +                } else {
> > +                    dojo.create('img', {src: mediaItems[i].thumbnailUrl,
> onerror: "this.src='/samplecontainer/examples/media/document.png';",
> style:'height:100px;'}, imageTd);
> > +                }
> > +                var titleTd = dojo.create('tr', null,
> td).appendChild(dojo.create('td', {style: "text-align:center;
> font-family:'comic sans ms';white-space:nowrap;"}));
> > +
>  titleTd.appendChild(dojo.doc.createTextNode(mediaItems[i].title));
> > +                var actionsTd = dojo.create('tr', null,
> td).appendChild(dojo.create('td', {className: 'actionLinks', style:
> 'text-align: center;'}));
> > +                dojo.create('a', {innerHTML: 'edit', href:
> 'javascript:;', onclick: dojo.hitch(this, editMediaItemPopup, album,
> mediaItems[i])}, actionsTd);
> > +                actionsTd.appendChild(dojo.doc.createTextNode(' | '));
> > +                dojo.create('a', {innerHTML: 'delete', href:
> 'javascript:;', onclick: dojo.hitch(this, deleteMediaItemPopup, album,
> mediaItems[i])}, actionsTd);
> > +            }
> > +        } else {
> > +            gridDiv.appendChild(dojo.doc.createTextNode('Album is
> empty'));
> > +        }
> > +        divManager.refreshWindow();
> > +    }
> > +
> > +    /*
> > +     * Convenience function to retriev & render MediaItems by Album.
> > +     */
> > +    function retrieveAndRenderMediaItems(album) {
> > +        social.getMediaItemsByAlbum(viewer.id, album.id,
> function(response) {
> > +            divManager.showMediaItems();
> > +            renderMediaItems(album, response.list);
> > +        });
> > +    }
> > +
> > +    /*
> > +     * Renders the view for a single MediaItem.
> > +     */
> > +    function renderMediaItem(album, mediaItem) {
> > +        console.log('renderMediaItem');
> > +        dojo.empty('mediaItemDiv');
> > +        var mediaItemDiv = dojo.byId('mediaItemDiv');
> > +
> > +        // Div to display navation bar and Create button
> > +        var topDiv = dojo.create('div', null, mediaItemDiv);
> > +        var table = dojo.create('table', null, topDiv);
> > +        var tbody = dojo.create('tbody', null, table);
> > +        var tr = dojo.create('tr', null, tbody);
> > +        var td = dojo.create('td', {style: 'width:100%'}, tr);
> > +        dojo.create('a', {innerHTML: 'Albums', href: 'javascript:;',
> onclick: dojo.hitch(this, renderAlbumsByUser, viewer.id, null)}, td);
> > +        td.appendChild(dojo.doc.createTextNode(" > "));
> > +        dojo.create('a', {innerHTML: album.title, href: "javascript:;",
> onclick: dojo.hitch(this, retrieveAndRenderMediaItems, album)}, td);
> > +        td.appendChild(dojo.doc.createTextNode(" > " +
> mediaItem.title));
> > +
> > +        // Div to show MediaItem
> > +        var itemDiv = dojo.create('div', null, mediaItemDiv);
> > +        var table = dojo.create('table', null, itemDiv);
> > +        var tbody = dojo.create('tbody', null, table);
> > +        var tr = dojo.create('tr', null, tbody);
> > +        var td = dojo.create('td', null, tr);
> > +        dojo.create('img', {src: mediaItem.url}, td);
> > +        if (mediaItem.description) {
> > +            tr = dojo.create('tr', null, tbody);
> > +            td = dojo.create('td', null, tr);
> > +
>  td.appendChild(dojo.doc.createTextNode(mediaItem.description));
> > +        }
> > +
> > +        divManager.showMediaItem();
> > +    }
> > +
> > +    /*
> > +     * Popup to edit album.
> > +     */
> > +    function editAlbumPopup(album) {
> > +        console.log('editAlbumPopup: ' + JSON.stringify(album));
> > +
> > +        var title = (album == null ? 'Create' : 'Edit') + ' Album';
> > +        var dialog = new dijit.Dialog({id: 'editAlbumPopup', title:
> title, onCancel: destroyDialog});
> > +        dojo.body().appendChild(dialog.domNode);
> > +
> > +        var formDiv = dojo.create('div', {id: 'editAlbumFormDiv'});
> > +        var form = new dijit.form.Form({id: 'editAlbumForm'});
> > +        formDiv.appendChild(form.domNode);
> > +        var table = dojo.create('table', null, form.domNode);
> > +        var tbody = dojo.create('tbody', null, table);
> > +        var tr = dojo.create('tr', null, tbody);
> > +        dojo.create('td', null, tr).appendChild(dojo.create('label',
> {innerHTML: 'Title', for: 'title'}));
> > +        dojo.create('td', null, tr).appendChild(
> > +            new dijit.form.ValidationTextBox({
> > +                name: 'title',
> > +                value: album == null ? '' : album.title
> > +            }).domNode
> > +        );
> > +        tr = dojo.create('tr', null, tbody);
> > +        dojo.create('td', null, tr).appendChild(dojo.create('label',
> {innerHTML: 'Thumnail URL', for: 'thumbnail'}));
> > +        dojo.create('td', null, tr).appendChild(
> > +            new dijit.form.ValidationTextBox({
> > +                name: 'thumbnail',
> > +                value: album == null ? '' : album.thumbnailUrl
> > +            }).domNode
> > +        );
> > +        tr = dojo.create('tr', null, tbody);
> > +        dojo.create('td', null, tr).appendChild(dojo.create('label',
> {innerHTML: 'Description', for: 'description'}));
> > +        dojo.create('td', null, tr).appendChild(
> > +            new dijit.form.Textarea({
> > +                name: 'description',
> > +                value: album == null ? '' : album.description
> > +            }).domNode
> > +        );
> > +        tr = dojo.create('tr', null, tbody);
> > +        var buttonTd = dojo.create('td', {colspan: '2', align:
> 'center'}, tr);
> > +        buttonTd.appendChild(new dijit.form.Button({
> > +                label: 'Save',
> > +                onClick: saveForm
> > +            }).domNode
> > +        );
> > +        buttonTd.appendChild(new dijit.form.Button({
> > +                label: 'Cancel',
> > +                onClick: destroyDialog
> > +            }).domNode
> > +        );
> > +
> > +        dialog.set('content', formDiv);
> > +        dialog.show();
> > +
> > +        function saveForm() {
> > +            console.log('saveForm');
> > +            var values = form.get('value');
> > +            var newAlbum = {
> > +                title: values.title,
> > +                thumbnailUrl: values.thumbnail,
> > +                description: values.description,
> > +                ownerId: viewer.id  // TODO: bug? Albums service should
> set this
> > +            };
> > +            if (album == null) {
> > +                social.createAlbum(viewer.id, newAlbum,
> function(response) {
> > +                    console.log('created album response: ' +
> JSON.stringify(response));
> > +                    renderAlbumsByUser(viewer.id);
> > +                });
> > +            } else {
> > +                social.updateAlbum(viewer.id, album.id, newAlbum,
> function(response) {
> > +                    console.log('updated album response: ' +
> JSON.stringify(response));
> > +                    renderAlbumsByUser(viewer.id);
> > +                });
> > +            }
> > +            destroyDialog();
> > +        }
> > +
> > +        // Handles destroying the dialog popup
> > +        function destroyDialog() {
> > +            console.log('destroyDialog');
> > +            dialog.destroyRecursive(false);
> > +            dialog.destroyRendering(false);
> > +            dialog.destroy(false);
> > +        }
> > +    }
> > +
> > +    /*
> > +     * Popup to edit MediaItem.
> > +     */
> > +    function editMediaItemPopup(album, mediaItem) {
> > +        console.log('editMediaItemPopup: ' + JSON.stringify(mediaItem));
> > +
> > +        var albumId = mediaItem == null ? album.id : mediaItem.albumId;
> > +        var title = (mediaItem == null ? 'Create' : 'Edit') + '
> MediaItem';
> > +        var dialog = new dijit.Dialog({id: 'editMediaItemPopup', title:
> title, onCancel: destroyDialog});
> > +        dojo.body().appendChild(dialog.domNode);
> > +
> > +        // Form div
> > +        var formDiv = dojo.create('div', {id: 'editMediaItemFormDiv'});
> > +        var form = new dijit.form.Form({id: 'editMediaItemForm'});
> > +        formDiv.appendChild(form.domNode);
> > +        var table = dojo.create('table', null, form.domNode);
> > +        var tbody = dojo.create('tbody', null, table);
> > +        var tr = dojo.create('tr', null, tbody);
> > +        dojo.create('td', null, tr).appendChild(dojo.create('label',
> {innerHTML: 'Title', for: 'title'}));
> > +        dojo.create('td', null, tr).appendChild(
> > +            new dijit.form.ValidationTextBox({
> > +                name: 'title',
> > +                value: mediaItem == null ? '' : mediaItem.title
> > +            }).domNode
> > +        );
> > +        tr = dojo.create('tr', null, tbody);
> > +        dojo.create('td', null, tr).appendChild(dojo.create('label',
> {innerHTML: 'Description', for: 'description'}));
> > +        dojo.create('td', null, tr).appendChild(
> > +            new dijit.form.Textarea({
> > +                name: 'description',
> > +                value: mediaItem == null ? '' : mediaItem.description
> > +            }).domNode
> > +        );
> > +        tr = dojo.create('tr', null, tbody);
> > +        dojo.create('td', null, tr).appendChild(dojo.create('label',
> {innerHTML: 'Type', for: 'type'}));
> > +        dojo.create('td', null, tr).appendChild(
> > +            new dijit.form.ValidationTextBox({
> > +                name: 'type',
> > +                value: mediaItem == null ? '' : mediaItem.type
> > +            }).domNode
> > +        );
> > +        tr = dojo.create('tr', null, tbody);
> > +        dojo.create('td', null, tr).appendChild(dojo.create('label',
> {innerHTML: 'Thumnail URL', for: 'thumbnailUrl'}));
> > +        dojo.create('td', null, tr).appendChild(
> > +            new dijit.form.ValidationTextBox({
> > +                name: 'thumbnailUrl',
> > +                value: mediaItem == null ? '' : mediaItem.thumbnailUrl
> > +            }).domNode
> > +        );
> > +        tr = dojo.create('tr', null, tbody);
> > +        dojo.create('td', null, tr).appendChild(dojo.create('label',
> {innerHTML: 'URL', for: 'url'}));
> > +        dojo.create('td', null, tr).appendChild(
> > +            new dijit.form.ValidationTextBox({
> > +                name: 'url',
> > +                value: mediaItem == null ? '' : mediaItem.url
> > +            }).domNode
> > +        );
> > +        tr = dojo.create('tr', null, tbody);
> > +        var buttonTd = dojo.create('td', {colspan: '2', align:
> 'center'}, tr);
> > +        buttonTd.appendChild(new dijit.form.Button({
> > +                label: 'Save',
> > +                onClick: saveForm
> > +            }).domNode
> > +        );
> > +        buttonTd.appendChild(new dijit.form.Button({
> > +                label: 'Cancel',
> > +                onClick: destroyDialog
> > +            }).domNode
> > +        );
> > +
> > +        // Textarea div for JSON
> > +        var textAreaDiv = dojo.create('div', {style: "width:100%;
> height:100%;", id: 'textAreaDiv'});
> > +        var textArea = new dijit.form.Textarea({value:
> JSON.stringify(mediaItem), rows: "20"});
> > +        textAreaDiv.appendChild(textArea.domNode);
> > +
> > +        // Put divs together
> > +        var tabContainer = new dijit.layout.TabContainer({style:
> "width:400px; height:300px;"});
> > +        var formContentPane = new dijit.layout.ContentPane({title:
> "Form", content: formDiv});
> > +        tabContainer.addChild(formContentPane);
> > +        var textAreaContentPane = new dijit.layout.ContentPane({title:
> "JSON", content: textAreaDiv});
> > +        tabContainer.addChild(textAreaContentPane);
> > +        tabContainer.startup();
> > +        var dialogDiv = dojo.create('div', null);
> > +        dialogDiv.appendChild(tabContainer.domNode);
> > +
> > +        dialog.set('content', dialogDiv);
> > +        dialog.show();
> > +
> > +        function saveForm() {
> > +            console.log('saveForm mediaItem');
> > +            var values = form.get('value');
> > +            var newMediaItem = {
> > +                title: values.title,
> > +                description: values.description,
> > +                type: values.type,
> > +                thumbnailUrl: values.thumbnailUrl,
> > +                url: values.url
> > +            };
> > +            if (newMediaItem.type == null || newMediaItem.type == "")
> newMediaItem.type = "image";
> > +            if (mediaItem == null) {
> > +                social.createMediaItem(viewer.id, albumId,
> newMediaItem, function(response) {
> > +                    console.log('created MediaItem response: ' +
> JSON.stringify(response));
> > +                    social.getMediaItemsByAlbum(viewer.id, album.id,
> function(response) {
> > +                        renderMediaItems(album, response.list);
> > +                    });
> > +                });
> > +            } else {
> > +                social.updateMediaItem(viewer.id, albumId,
> mediaItem.id, newMediaItem, function(response) {
> > +                    console.log('updated MediaItem response: ' +
> JSON.stringify(response));
> > +                    social.getMediaItemsByAlbum(viewer.id, album.id,
> function(response) {
> > +                        renderMediaItems(album, response.list);
> > +                    });
> > +                });
> > +            }
> > +            destroyDialog();
> > +        }
> > +
> > +        // Handles destroying the dialog popup
> > +        function destroyDialog() {
> > +            console.log('destroyDialog');
> > +            dialog.destroyRecursive(false);
> > +            dialog.destroyRendering(false);
> > +            dialog.destroy(false);
> > +        }
> > +    }
> > +
> > +    /*
> > +     * Popup to confirm that the user wants to delete album.
> > +     */
> > +    function deleteAlbumPopup(album) {
> > +        console.log('deleteAlbumPopup');
> > +        if (confirm("Delete '" + album.title + "'?")) {
> > +            social.deleteAlbum(viewer.id, album.id, function(response)
> {
> > +                console.log('delete album response: ' +
> JSON.stringify(response));
> > +                renderAlbumsByUser(viewer.id);
> > +            });
> > +        }
> > +    }
> > +
> > +    /*
> > +     * Popup to confirm user wants to delete MediaItem.
> > +     */
> > +    function deleteMediaItemPopup(album, mediaItem) {
> > +        console.log('deleteMediaItemPopup');
> > +        var albumId = mediaItem.albumId;
> > +        if (confirm("Delete '" + mediaItem.title + "'?")) {
> > +            social.deleteMediaItem(viewer.id, albumId, mediaItem.id,
> function(response) {
> > +                console.log('delete mediaItem response: ' +
> JSON.stringify(response));
> > +                social.getMediaItemsByAlbum(viewer.id, albumId,
> function(response) {
> > +                    renderMediaItems(album, response.list);
> > +                });
> > +            });
> > +        }
> > +    }
> > +}
> > \ No newline at end of file
> >
> > Added: shindig/trunk/content/samplecontainer/examples/media/Social.js
> > URL:
> http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/Social.js?rev=1000579&view=auto
> >
> ==============================================================================
> > --- shindig/trunk/content/samplecontainer/examples/media/Social.js
> (added)
> > +++ shindig/trunk/content/samplecontainer/examples/media/Social.js Thu
> Sep 23 18:57:41 2010
> > @@ -0,0 +1,138 @@
> > +/*
> > + * Defines high level functionality to interact with the OpenSocial API.
> > + */
> > +function SocialWrapper() {
> > +
> > +    /*
> > +     * Retrieves the current viewer.
> > +     */
> > +    this.getViewer = function(callback) {
> > +        osapi.people.getViewer().execute(callback);
> > +    }
> > +
> > +    /*
> > +     * Retrieves the current owner.
> > +     */
> > +    this.getOwner = function(callback) {
> > +        osapi.people.getOwner().execute(callback);
> > +    }
> > +
> > +    //------------------------ ALBUMS ----------------------
> > +    /*
> > +     * Retrieves albums by ID(s).
> > +     */
> > +    this.getAlbumsById = function(userId, albumId, callback) {
> > +        var params = {userId: userId, albumId: albumId};
> > +        osapi.albums.get(params).execute(callback);
> > +    }
> > +
> > +    /*
> > +     * Retrieves albums by user.
> > +     */
> > +    this.getAlbumsByUser = function(userId, callback) {
> > +        osapi.albums.get({userId: userId}).execute(callback);
> > +    }
> > +
> > +    /*
> > +     * Retrieves albums by group.
> > +     */
> > +    this.getAlbumsByGroup = function(userId, groupId, callback) {
> > +        osapi.albums.get({userId: userId, groupId:
> groupId}).execute(callback);
> > +    }
> > +
> > +    /*
> > +     * Creates an album for the given user.
> > +     */
> > +    this.createAlbum = function(userId, album, callback) {
> > +        var params = {
> > +            userId: userId,
> > +            album: album
> > +        };
> > +        osapi.albums.create(params).execute(callback);
> > +    }
> > +
> > +    /*
> > +     * Updates an album by ID.
> > +     */
> > +    this.updateAlbum = function(userId, albumId, album, callback) {
> > +        var params = {
> > +            userId: userId,
> > +            albumId: albumId,
> > +            album: album
> > +        };
> > +        osapi.albums.update(params).execute(callback);
> > +    }
> > +
> > +    /*
> > +     * Deletes an album by ID.
> > +     */
> > +    this.deleteAlbum = function(userId, albumId, callback) {
> > +        var params = {userId: userId, albumId: albumId};
> > +        osapi.albums.delete(params).execute(callback);
> > +    }
> > +
> > +    //------------------------------- MEDIAITEMS
> ----------------------------
> > +    /*
> > +     * Creates a MediaItem.
> > +     */
> > +    this.createMediaItem = function(userId, albumId, mediaItem,
> callback) {
> > +        var params = {
> > +            userId: userId,
> > +            albumId: albumId,
> > +            mediaItem: mediaItem
> > +        };
> > +        osapi.mediaItems.create(params).execute(callback);
> > +    }
> > +
> > +    /*
> > +     * Updates a MediaItem by ID.
> > +     */
> > +    this.updateMediaItem = function(userId, albumId, mediaItemId,
> mediaItem, callback) {
> > +        var params = {
> > +            userId: userId,
> > +            albumId: albumId,
> > +            mediaItemId: mediaItemId,
> > +            mediaItem: mediaItem
> > +        };
> > +        console.log("PARAMS: " + JSON.stringify(params));
> > +        osapi.mediaItems.update(params).execute(callback);
> > +    }
> > +
> > +    /*
> > +     * Retrieves MediaItems by ID(s).
> > +     */
> > +    this.getMediaItemsById = function(userId, albumId, mediaItemId,
> callback) {
> > +        var params = {
> > +            userId: userId,
> > +            albumId: albumId,
> > +            mediaItemId: mediaItemId
> > +        };
> > +        osapi.mediaItems.get(params).execute(callback);
> > +    }
> > +
> > +    /*
> > +     * Retrieves MediaItems by album.
> > +     */
> > +    this.getMediaItemsByAlbum = function(userId, albumId, callback) {
> > +        osapi.mediaItems.get({userId: userId, albumId:
> albumId}).execute(callback);
> > +    }
> > +
> > +    /*
> > +     * Retrieves MediaItems by user and group.
> > +     */
> > +    this.getMediaItemsByUser = function(userId, groupId, callback) {
> > +        osapi.mediaItems.get({userId: userId, groupId:
> groupId}).execute(callback);
> > +    }
> > +
> > +    /*
> > +     * Deletes a MediaItem by ID.
> > +     */
> > +    this.deleteMediaItem = function(userId, albumId, mediaItemId,
> callback) {
> > +        var params = {
> > +            userId: userId,
> > +            albumId: albumId,
> > +            mediaItemId: mediaItemId
> > +        };
> > +        osapi.mediaItems.delete(params).execute(callback);
> > +    }
> > +}
> > \ No newline at end of file
> >
> > Added: shindig/trunk/content/samplecontainer/examples/media/document.png
> > URL:
> http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/document.png?rev=1000579&view=auto
> >
> ==============================================================================
> > Binary file - no diff available.
> >
> > Propchange:
> shindig/trunk/content/samplecontainer/examples/media/document.png
> >
> ------------------------------------------------------------------------------
> >    svn:mime-type = application/octet-stream
> >
> > Added: shindig/trunk/content/samplecontainer/examples/media/folder.png
> > URL:
> http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/folder.png?rev=1000579&view=auto
> >
> ==============================================================================
> > Binary file - no diff available.
> >
> > Propchange:
> shindig/trunk/content/samplecontainer/examples/media/folder.png
> >
> ------------------------------------------------------------------------------
> >    svn:mime-type = application/octet-stream
> >
> > Added: shindig/trunk/content/samplecontainer/examples/media/styles.css
> > URL:
> http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/styles.css?rev=1000579&view=auto
> >
> ==============================================================================
> > --- shindig/trunk/content/samplecontainer/examples/media/styles.css
> (added)
> > +++ shindig/trunk/content/samplecontainer/examples/media/styles.css Thu
> Sep 23 18:57:41 2010
> > @@ -0,0 +1,92 @@
> > +/* ============ ROUND 2 ============== */
> > +
> > +td.albumsTitle {
> > +    font-family:'comic sans ms';
> > +    width: 100%;
> > +    font-size:24px;
> > +}
> > +
> > +td.albumListThumbnail {
> > +    width: 10%;
> > +    height: 75px;
> > +}
> > +
> > +td.albumListRight {
> > +    width: 90%;
> > +}
> > +
> > +td.actionLinks {
> > +    width:100%;
> > +    font-size:12px;
> > +}
> > +
> > +td.albumListTitle {
> > +    font-size:24px;
> > +    white-space:nowrap;
> > +    font-family:'comic sans ms';
> > +}
> > +
> > +td.albumListDescription {
> > +    font-family:'comic sans ms';
> > +}
> > +
> > +.albumsTable {
> > +    width:100%;
> > +    border-style:solid;
> > +    background-color:#b0c4de;
> > +}
> > +
> > +td.mediaItemThumbnail {
> > +    height:100%;
> > +}
> > +
> > +td.mediaItemBox {
> > +    width: 150px;
> > +    height: 100px;
> > +}
> > +
> > +.mediaItemControls {
> > +
> > +}
> > +
> > +
> > +/* ============ ROUND 1 ============== */
> > +.temp1 {background-color:#6495ed;}
> > +.temp2 {background-color:#e0ffff;}
> > +.temp3 {
> > +    background-color:#b0c4de;
> > +    background-image:url('img_flwr.png');
> > +    background-repeat:no-repeat;
> > +    background-position:top right;
> > +}
> > +
> > +td2 {
> > +    border-style:solid;
> > +}
> > +
> > +td.albumLeft {
> > +    width:10%;
> > +}
> > +
> > +td.albumRight {
> > +    width: 90%;
> > +}
> > +
> > +
> > +
> > +td.albumEdit {
> > +    width:100%;
> > +    text-align:right;
> > +    vertical-align:middle;
> > +    font-size:12px;
> > +}
> > +
> > +
> > +
> > +.albumTitleStyle {
> > +    color: blue;
> > +
> > +}
> > +.albumElement {
> > +    background-color:#b0c4de;
> > +}
> >
> >
> >
>



-- 
Paul Lindner -- lindner@inuus.com -- linkedin.com/in/plindner

Re: svn commit: r1000579 - in /shindig/trunk/content/samplecontainer/examples/media: ./ Media.xml MediaUI.js Social.js document.png folder.png styles.css

Posted by Han Nguyen <hn...@us.ibm.com>.

Yes they are, will update the license info. Thanks for catching that.



From:   Chirag Shah <ch...@gmail.com>
To:     dev@shindig.apache.org
Date:   09/23/2010 03:05 PM
Subject:        Re: svn commit: r1000579 - in 
/shindig/trunk/content/samplecontainer/examples/media: ./ Media.xml 
MediaUI.js Social.js document.png folder.png styles.css



Are these files licensed under the Apache License?

On Thu, Sep 23, 2010 at 11:57 AM,  <hn...@apache.org> wrote:
> Author: hnguy
> Date: Thu Sep 23 18:57:41 2010
> New Revision: 1000579
>
> URL: http://svn.apache.org/viewvc?rev=1000579&view=rev
> Log:
> SHINDIG-1430 - Patch from Eric Woods - Media Sample Gadget
>
> Added:
>    shindig/trunk/content/samplecontainer/examples/media/
>    shindig/trunk/content/samplecontainer/examples/media/Media.xml
>    shindig/trunk/content/samplecontainer/examples/media/MediaUI.js
>    shindig/trunk/content/samplecontainer/examples/media/Social.js
>    shindig/trunk/content/samplecontainer/examples/media/document.png   
(with props)
>    shindig/trunk/content/samplecontainer/examples/media/folder.png   
(with props)
>    shindig/trunk/content/samplecontainer/examples/media/styles.css
>
> Added: shindig/trunk/content/samplecontainer/examples/media/Media.xml
> URL: 
http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/Media.xml?rev=1000579&view=auto

> 
==============================================================================
> --- shindig/trunk/content/samplecontainer/examples/media/Media.xml 
(added)
> +++ shindig/trunk/content/samplecontainer/examples/media/Media.xml Thu 
Sep 23 18:57:41 2010
> @@ -0,0 +1,54 @@
> +<?xml version="1.0" encoding="UTF-8"?>
> +<Module>
> +    <ModulePrefs title="Albums and MediaItems">
> +        <Require feature="osapi"/>
> +        <Require feature="dynamic-height"/>
> +    </ModulePrefs>
> +
> +    <Content type="html"><![CDATA[
> +    <html>
> +        <head>
> +            <!-- Source imports -->
> +            <script 
src='http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js' 
type='text/javascript' djConfig='parseOnLoad:true, isDebug:true'></script>
> +            <script src='Social.js' type='text/javascript'></script>
> +            <script src='MediaUI.js' type='text/javascript'></script>
> +
> +
> +            <!-- Styling -->
> +            <link rel="stylesheet" type="text/css" href="
http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css
"></link>
> +            <link rel="stylesheet" type="text/css" href="styles.css">
> +            <style type="text/css">
> +            </style>
> +
> +            <!-- DOJO requires -->
> +            <script type='text/javascript'>
> +                dojo.require('dijit.form.Button');
> +                dojo.require('dijit.form.Form');
> +                dojo.require('dijit.form.TextBox');
> +                dojo.require('dijit.form.ValidationTextBox');
> +                dojo.require('dijit.Dialog');
> +                dojo.require('dijit.form.Textarea');
> +                dojo.require('dijit.layout.ContentPane');
> +                dojo.require('dijit.layout.TabContainer');
> +            </script>
> +
> +            <!-- JavaScript -->
> +            <script type="text/javascript">
> +                <!-- Entry point to the gadget -->
> +                function init() {
> +                    console.log("dojo initialized");
> +                    new MediaUI(new SocialWrapper()).init();
> +                }
> +
> +                <!-- Register entry point -->
> +                dojo.addOnLoad(init);   // TODO: work-around to 
tundra.css issue
> +                //gadgets.util.registerOnLoadHandler(function() {
> +                    //dojo.addOnLoad(init);
> +                //});
> +            </script>
> +        </head>
> +        <body class="tundra">
> +        </body>
> +    </html>
> +    ]]></Content>
> +</Module>
> \ No newline at end of file
>
> Added: shindig/trunk/content/samplecontainer/examples/media/MediaUI.js
> URL: 
http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/MediaUI.js?rev=1000579&view=auto

> 
==============================================================================
> --- shindig/trunk/content/samplecontainer/examples/media/MediaUI.js 
(added)
> +++ shindig/trunk/content/samplecontainer/examples/media/MediaUI.js Thu 
Sep 23 18:57:41 2010
> @@ -0,0 +1,503 @@
> +/*
> + * The User Interface for the Albums & MediaItems gadget.
> + *
> + * SHINDIG TODOS
> + *  set ownerId automatically?
> + *  delete children mediaitems when album deleted?
> + *  update only updates given fields?
> + *  update album mediaitem count when inserting/removing mediaitem?
> + *
> + * GADGET TODOS
> + *  album info such as how many albums are contained
> + *  fix auto height for edit album popup
> + *  thumnail pictures
> + */
> +function MediaUI(social) {
> +    var viewer = null;
> +    var divManager = null;
> +
> +    /*
> +     * Initializes the gadget.
> +     */
> +    this.init = function() {
> +        console.log("initializing AlbumsUI");
> +
> +        // Manages high-level divs
> +        divManager = new DivManager();
> +        divManager.init();
> +
> +        // Load data and render
> +        loadData(function() {
> +            social.getAlbumsByUser(viewer.id, function(response) {
> +                renderAlbums(response.list);
> +                divManager.showAlbums();
> +            });
> +        });
> +    }
> +
> +    /*
> +     * Pre-load data for gadget.
> +     */
> +    function loadData(callback) {
> +        social.getViewer(function(data) {
> +            viewer = data;
> +            callback();
> +        });
> +    }
> +
> +    /*
> +     * Manages the gadgets main DIV elements.
> +     *
> +     * TODO: use dojo.query() & classes rather than divs[]
> +     * TODO: showOnly() function to avoid flashing/pauses
> +     */
> +    function DivManager() {
> +        var divs = [];
> +
> +        this.init = function() {
> +            console.log('DivManager.init');
> +            addDiv('albumsDiv');
> +            addDiv('mediaItemsDiv');
> +            addDiv('mediaItemDiv');
> +            hideAll();
> +        }
> +
> +        this.showAlbums = function() {
> +            console.log('DivManager.showAlbums');
> +            hideAll();
> +            divs['albumsDiv'].style.display = 'block';
> +            this.refreshWindow();
> +        }
> +
> +        this.showMediaItems = function() {
> +            console.log('DivManager.showMediaItems');
> +            hideAll();
> +            divs['mediaItemsDiv'].style.display = 'block';
> +            this.refreshWindow();
> +        }
> +
> +        this.showMediaItem = function() {
> +            console.log('DivManager.showMediaItem');
> +            hideAll();
> +            divs['mediaItemDiv'].style.display = 'block';
> +            this.refreshWindow();
> +        }
> +
> +        this.refreshWindow = function() {
> +            gadgets.window.adjustHeight(500);
> +        }
> +
> +        function hideAll() {
> +            for (key in divs) { divs[key].style.display = 'none'; }
> +        }
> +
> +        function addDiv(id) { divs[id] = dojo.create('div', {id: id}, 
dojo.body()); }
> +    }
> +
> +    /*
> +     * Renders a list of the given albums.
> +     */
> +    function renderAlbums(albums) {
> +        console.log('renderAlbums');
> +
> +        dojo.empty('albumsDiv');
> +        var albumsDiv = dojo.byId('albumsDiv');
> +
> +        var albumsBanner = dojo.create('div', null, albumsDiv);
> +        var table = dojo.create('table', null, albumsBanner);
> +        var tbody = dojo.create('tbody', null, table);
> +        var tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', {innerHTML: viewer.name.formatted + "'s 
Albums", className: 'albumsTitle'}, tr);
> +        dojo.create('td', null, tr).appendChild(new 
dijit.form.Button({label: '+ New Album', onClick: dojo.hitch(this, 
editAlbumPopup, null)}).domNode);
> +
> +        var albumsList = dojo.create('div', null, albumsDiv);
> +        if (albums.length > 0) {
> +            var table = dojo.create('table', {className: 
'albumsTable'}, albumsList);
> +            var tbody = dojo.create('tbody', null, table);
> +            for (i = 0; i < albums.length; i++) {
> +                var albumRow = dojo.create('tr', null, tbody);
> +                var albumLeft = dojo.create('td', {className: 
'albumListThumbnail'}, albumRow);
> +                var imgLink = dojo.create('a', {href: "javascript:;", 
onclick: dojo.hitch(this, onClickAlbum, viewer.id, albums[i])}, 
albumLeft);
> +                dojo.create('img', {src: albums[i].thumbnailUrl, 
onerror: "this.src='/samplecontainer/examples/media/folder.png';", width: 
'100%'}, imgLink);
> +                var albumRight = dojo.create('td', {className: 
'albumListRight'}, albumRow);
> +                var albumTitleRow = dojo.create('tr', null, 
albumRight);
> +                var titleTd = dojo.create('td', {className: 
'albumListTitle'}, albumTitleRow);
> +                dojo.create('a', {innerHTML: albums[i].title, href: 
'javascript:;', onclick: dojo.hitch(this, onClickAlbum, viewer.id, 
albums[i])}, titleTd);
> +                var editTd = dojo.create('td', {className: 
'actionLinks', style: 'text-align: right'}, albumTitleRow);
> +                dojo.create('a', {innerHTML: 'edit', href: 
'javascript:;', onclick: dojo.hitch(this, editAlbumPopup, albums[i])}, 
editTd);
> +                editTd.appendChild(dojo.doc.createTextNode(' | '));
> +                dojo.create('a', {innerHTML: 'delete', href: 
'javascript:;', onclick: dojo.hitch(this, deleteAlbumPopup, albums[i])}, 
editTd);
> +                if (albums[i].description) {
> +                    var albumDescription = dojo.create('tr', null, 
albumRight);
> +                    dojo.create('td', {innerHTML: 
albums[i].description, className: 'albumListDescription', colspan: '2'}, 
albumDescription);
> +                }
> +                //var albumInfo = dojo.create('tr', null, albumRight);
> +                //var infoStr = "ID: " + albums[i].id + " | Owner ID: " 
+ albums[i].ownerId;
> +                //dojo.create('td', {innerHTML: infoStr, className: 
'albumListInfo', colspan: '2'}, albumInfo);
> +            }
> +        } else {
> +            albumsDiv.appendChild(dojo.doc.createTextNode("No albums 
found."));
> +        }
> +        divManager.refreshWindow();
> +
> +        // Handles when user clicks an album
> +        function onClickAlbum(userId, album) {
> +            social.getMediaItemsByAlbum(userId, album.id, 
function(response) {
> +                renderMediaItems(album, response.list);
> +                divManager.showMediaItems();
> +            });
> +        }
> +    }
> +
> +    /*
> +     * Convenience function to retrieve albums and render.
> +     */
> +    function renderAlbumsByUser(userId, callback) {
> +        social.getAlbumsByUser(userId, function(response) {
> +            renderAlbums(response.list);
> +            divManager.showAlbums();
> +            if (callback != null) callback();
> +        });
> +    }
> +
> +    /*
> +     * Renders a grid of the given MediaItems.
> +     *
> +     * TODO: simplify this by simply taking in 'album', retrieving 
MediaItems here
> +     */
> +    function renderMediaItems(album, mediaItems) {
> +        console.log('renderMediaItems');
> +        dojo.empty('mediaItemsDiv');
> +        var mediaItemsDiv = dojo.byId('mediaItemsDiv');
> +        var numCols = 5;
> +
> +        // Div to display navation bar and Create button
> +        var topDiv = dojo.create('div', null, mediaItemsDiv);
> +        var table = dojo.create('table', null, topDiv);
> +        var tbody = dojo.create('tbody', null, table);
> +        var tr = dojo.create('tr', null, tbody);
> +        var td = dojo.create('td', {style: 'width:100%'}, tr);
> +        dojo.create('a', {innerHTML: 'Albums', href: 'javascript:;', 
onclick: dojo.hitch(this, renderAlbumsByUser, viewer.id, null)}, td);
> +        td.appendChild(dojo.doc.createTextNode(' > ' + album.title));
> +        td = dojo.create('td', {style: 'width:100%'}, tr);
> +        var createButton = new dijit.form.Button({label: '+ New 
MediaItem', onClick: dojo.hitch(this, editMediaItemPopup, album, null)});
> +        td.appendChild(createButton.domNode);
> +
> +        // Div to display MediaItems in a grid
> +        var gridDiv = dojo.create('div', null, mediaItemsDiv);
> +        if (mediaItems.length > 0) {
> +            var table = dojo.create('table', null, gridDiv);
> +            var tbody = dojo.create('tbody', null, table);
> +            var tr = null;
> +            for (i = 0; i < mediaItems.length; i++) {
> +                if (i % numCols == 0) {
> +                    tr = dojo.create('tr', null, tbody);
> +                }
> +                var td = dojo.create('td', {className: 'mediaItemBox'}, 
tr);
> +                var imageTd = dojo.create('tr', null, 
td).appendChild(dojo.create('td', {className: 'mediaItemThumbnail'}));
> +                if (mediaItems[i].url) {
> +                    var imageLink = dojo.create('a', {href: "
javascript:;", onclick: dojo.hitch(this, renderMediaItem, album, 
mediaItems[i])}, imageTd);
> +                    imageLink.appendChild(dojo.create('img', {src: 
mediaItems[i].thumbnailUrl, onerror: 
"this.src='/samplecontainer/examples/media/document.png';", 
style:'height:100px;'}));
> +                } else {
> +                    dojo.create('img', {src: 
mediaItems[i].thumbnailUrl, onerror: 
"this.src='/samplecontainer/examples/media/document.png';", 
style:'height:100px;'}, imageTd);
> +                }
> +                var titleTd = dojo.create('tr', null, 
td).appendChild(dojo.create('td', {style: "text-align:center; 
font-family:'comic sans ms';white-space:nowrap;"}));
> +               
 titleTd.appendChild(dojo.doc.createTextNode(mediaItems[i].title));
> +                var actionsTd = dojo.create('tr', null, 
td).appendChild(dojo.create('td', {className: 'actionLinks', style: 
'text-align: center;'}));
> +                dojo.create('a', {innerHTML: 'edit', href: 
'javascript:;', onclick: dojo.hitch(this, editMediaItemPopup, album, 
mediaItems[i])}, actionsTd);
> +                actionsTd.appendChild(dojo.doc.createTextNode(' | '));
> +                dojo.create('a', {innerHTML: 'delete', href: 
'javascript:;', onclick: dojo.hitch(this, deleteMediaItemPopup, album, 
mediaItems[i])}, actionsTd);
> +            }
> +        } else {
> +            gridDiv.appendChild(dojo.doc.createTextNode('Album is 
empty'));
> +        }
> +        divManager.refreshWindow();
> +    }
> +
> +    /*
> +     * Convenience function to retriev & render MediaItems by Album.
> +     */
> +    function retrieveAndRenderMediaItems(album) {
> +        social.getMediaItemsByAlbum(viewer.id, album.id, 
function(response) {
> +            divManager.showMediaItems();
> +            renderMediaItems(album, response.list);
> +        });
> +    }
> +
> +    /*
> +     * Renders the view for a single MediaItem.
> +     */
> +    function renderMediaItem(album, mediaItem) {
> +        console.log('renderMediaItem');
> +        dojo.empty('mediaItemDiv');
> +        var mediaItemDiv = dojo.byId('mediaItemDiv');
> +
> +        // Div to display navation bar and Create button
> +        var topDiv = dojo.create('div', null, mediaItemDiv);
> +        var table = dojo.create('table', null, topDiv);
> +        var tbody = dojo.create('tbody', null, table);
> +        var tr = dojo.create('tr', null, tbody);
> +        var td = dojo.create('td', {style: 'width:100%'}, tr);
> +        dojo.create('a', {innerHTML: 'Albums', href: 'javascript:;', 
onclick: dojo.hitch(this, renderAlbumsByUser, viewer.id, null)}, td);
> +        td.appendChild(dojo.doc.createTextNode(" > "));
> +        dojo.create('a', {innerHTML: album.title, href: "javascript:;", 
onclick: dojo.hitch(this, retrieveAndRenderMediaItems, album)}, td);
> +        td.appendChild(dojo.doc.createTextNode(" > " + 
mediaItem.title));
> +
> +        // Div to show MediaItem
> +        var itemDiv = dojo.create('div', null, mediaItemDiv);
> +        var table = dojo.create('table', null, itemDiv);
> +        var tbody = dojo.create('tbody', null, table);
> +        var tr = dojo.create('tr', null, tbody);
> +        var td = dojo.create('td', null, tr);
> +        dojo.create('img', {src: mediaItem.url}, td);
> +        if (mediaItem.description) {
> +            tr = dojo.create('tr', null, tbody);
> +            td = dojo.create('td', null, tr);
> +           
 td.appendChild(dojo.doc.createTextNode(mediaItem.description));
> +        }
> +
> +        divManager.showMediaItem();
> +    }
> +
> +    /*
> +     * Popup to edit album.
> +     */
> +    function editAlbumPopup(album) {
> +        console.log('editAlbumPopup: ' + JSON.stringify(album));
> +
> +        var title = (album == null ? 'Create' : 'Edit') + ' Album';
> +        var dialog = new dijit.Dialog({id: 'editAlbumPopup', title: 
title, onCancel: destroyDialog});
> +        dojo.body().appendChild(dialog.domNode);
> +
> +        var formDiv = dojo.create('div', {id: 'editAlbumFormDiv'});
> +        var form = new dijit.form.Form({id: 'editAlbumForm'});
> +        formDiv.appendChild(form.domNode);
> +        var table = dojo.create('table', null, form.domNode);
> +        var tbody = dojo.create('tbody', null, table);
> +        var tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', 
{innerHTML: 'Title', for: 'title'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.ValidationTextBox({
> +                name: 'title',
> +                value: album == null ? '' : album.title
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', 
{innerHTML: 'Thumnail URL', for: 'thumbnail'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.ValidationTextBox({
> +                name: 'thumbnail',
> +                value: album == null ? '' : album.thumbnailUrl
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', 
{innerHTML: 'Description', for: 'description'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.Textarea({
> +                name: 'description',
> +                value: album == null ? '' : album.description
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        var buttonTd = dojo.create('td', {colspan: '2', align: 
'center'}, tr);
> +        buttonTd.appendChild(new dijit.form.Button({
> +                label: 'Save',
> +                onClick: saveForm
> +            }).domNode
> +        );
> +        buttonTd.appendChild(new dijit.form.Button({
> +                label: 'Cancel',
> +                onClick: destroyDialog
> +            }).domNode
> +        );
> +
> +        dialog.set('content', formDiv);
> +        dialog.show();
> +
> +        function saveForm() {
> +            console.log('saveForm');
> +            var values = form.get('value');
> +            var newAlbum = {
> +                title: values.title,
> +                thumbnailUrl: values.thumbnail,
> +                description: values.description,
> +                ownerId: viewer.id  // TODO: bug? Albums service should 
set this
> +            };
> +            if (album == null) {
> +                social.createAlbum(viewer.id, newAlbum, 
function(response) {
> +                    console.log('created album response: ' + 
JSON.stringify(response));
> +                    renderAlbumsByUser(viewer.id);
> +                });
> +            } else {
> +                social.updateAlbum(viewer.id, album.id, newAlbum, 
function(response) {
> +                    console.log('updated album response: ' + 
JSON.stringify(response));
> +                    renderAlbumsByUser(viewer.id);
> +                });
> +            }
> +            destroyDialog();
> +        }
> +
> +        // Handles destroying the dialog popup
> +        function destroyDialog() {
> +            console.log('destroyDialog');
> +            dialog.destroyRecursive(false);
> +            dialog.destroyRendering(false);
> +            dialog.destroy(false);
> +        }
> +    }
> +
> +    /*
> +     * Popup to edit MediaItem.
> +     */
> +    function editMediaItemPopup(album, mediaItem) {
> +        console.log('editMediaItemPopup: ' + 
JSON.stringify(mediaItem));
> +
> +        var albumId = mediaItem == null ? album.id : mediaItem.albumId;
> +        var title = (mediaItem == null ? 'Create' : 'Edit') + ' 
MediaItem';
> +        var dialog = new dijit.Dialog({id: 'editMediaItemPopup', title: 
title, onCancel: destroyDialog});
> +        dojo.body().appendChild(dialog.domNode);
> +
> +        // Form div
> +        var formDiv = dojo.create('div', {id: 'editMediaItemFormDiv'});
> +        var form = new dijit.form.Form({id: 'editMediaItemForm'});
> +        formDiv.appendChild(form.domNode);
> +        var table = dojo.create('table', null, form.domNode);
> +        var tbody = dojo.create('tbody', null, table);
> +        var tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', 
{innerHTML: 'Title', for: 'title'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.ValidationTextBox({
> +                name: 'title',
> +                value: mediaItem == null ? '' : mediaItem.title
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', 
{innerHTML: 'Description', for: 'description'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.Textarea({
> +                name: 'description',
> +                value: mediaItem == null ? '' : mediaItem.description
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', 
{innerHTML: 'Type', for: 'type'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.ValidationTextBox({
> +                name: 'type',
> +                value: mediaItem == null ? '' : mediaItem.type
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', 
{innerHTML: 'Thumnail URL', for: 'thumbnailUrl'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.ValidationTextBox({
> +                name: 'thumbnailUrl',
> +                value: mediaItem == null ? '' : mediaItem.thumbnailUrl
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', 
{innerHTML: 'URL', for: 'url'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.ValidationTextBox({
> +                name: 'url',
> +                value: mediaItem == null ? '' : mediaItem.url
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        var buttonTd = dojo.create('td', {colspan: '2', align: 
'center'}, tr);
> +        buttonTd.appendChild(new dijit.form.Button({
> +                label: 'Save',
> +                onClick: saveForm
> +            }).domNode
> +        );
> +        buttonTd.appendChild(new dijit.form.Button({
> +                label: 'Cancel',
> +                onClick: destroyDialog
> +            }).domNode
> +        );
> +
> +        // Textarea div for JSON
> +        var textAreaDiv = dojo.create('div', {style: "width:100%; 
height:100%;", id: 'textAreaDiv'});
> +        var textArea = new dijit.form.Textarea({value: 
JSON.stringify(mediaItem), rows: "20"});
> +        textAreaDiv.appendChild(textArea.domNode);
> +
> +        // Put divs together
> +        var tabContainer = new dijit.layout.TabContainer({style: 
"width:400px; height:300px;"});
> +        var formContentPane = new dijit.layout.ContentPane({title: 
"Form", content: formDiv});
> +        tabContainer.addChild(formContentPane);
> +        var textAreaContentPane = new dijit.layout.ContentPane({title: 
"JSON", content: textAreaDiv});
> +        tabContainer.addChild(textAreaContentPane);
> +        tabContainer.startup();
> +        var dialogDiv = dojo.create('div', null);
> +        dialogDiv.appendChild(tabContainer.domNode);
> +
> +        dialog.set('content', dialogDiv);
> +        dialog.show();
> +
> +        function saveForm() {
> +            console.log('saveForm mediaItem');
> +            var values = form.get('value');
> +            var newMediaItem = {
> +                title: values.title,
> +                description: values.description,
> +                type: values.type,
> +                thumbnailUrl: values.thumbnailUrl,
> +                url: values.url
> +            };
> +            if (newMediaItem.type == null || newMediaItem.type == "") 
newMediaItem.type = "image";
> +            if (mediaItem == null) {
> +                social.createMediaItem(viewer.id, albumId, 
newMediaItem, function(response) {
> +                    console.log('created MediaItem response: ' + 
JSON.stringify(response));
> +                    social.getMediaItemsByAlbum(viewer.id, album.id, 
function(response) {
> +                        renderMediaItems(album, response.list);
> +                    });
> +                });
> +            } else {
> +                social.updateMediaItem(viewer.id, albumId, 
mediaItem.id, newMediaItem, function(response) {
> +                    console.log('updated MediaItem response: ' + 
JSON.stringify(response));
> +                    social.getMediaItemsByAlbum(viewer.id, album.id, 
function(response) {
> +                        renderMediaItems(album, response.list);
> +                    });
> +                });
> +            }
> +            destroyDialog();
> +        }
> +
> +        // Handles destroying the dialog popup
> +        function destroyDialog() {
> +            console.log('destroyDialog');
> +            dialog.destroyRecursive(false);
> +            dialog.destroyRendering(false);
> +            dialog.destroy(false);
> +        }
> +    }
> +
> +    /*
> +     * Popup to confirm that the user wants to delete album.
> +     */
> +    function deleteAlbumPopup(album) {
> +        console.log('deleteAlbumPopup');
> +        if (confirm("Delete '" + album.title + "'?")) {
> +            social.deleteAlbum(viewer.id, album.id, function(response) 
{
> +                console.log('delete album response: ' + 
JSON.stringify(response));
> +                renderAlbumsByUser(viewer.id);
> +            });
> +        }
> +    }
> +
> +    /*
> +     * Popup to confirm user wants to delete MediaItem.
> +     */
> +    function deleteMediaItemPopup(album, mediaItem) {
> +        console.log('deleteMediaItemPopup');
> +        var albumId = mediaItem.albumId;
> +        if (confirm("Delete '" + mediaItem.title + "'?")) {
> +            social.deleteMediaItem(viewer.id, albumId, mediaItem.id, 
function(response) {
> +                console.log('delete mediaItem response: ' + 
JSON.stringify(response));
> +                social.getMediaItemsByAlbum(viewer.id, albumId, 
function(response) {
> +                    renderMediaItems(album, response.list);
> +                });
> +            });
> +        }
> +    }
> +}
> \ No newline at end of file
>
> Added: shindig/trunk/content/samplecontainer/examples/media/Social.js
> URL: 
http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/Social.js?rev=1000579&view=auto

> 
==============================================================================
> --- shindig/trunk/content/samplecontainer/examples/media/Social.js 
(added)
> +++ shindig/trunk/content/samplecontainer/examples/media/Social.js Thu 
Sep 23 18:57:41 2010
> @@ -0,0 +1,138 @@
> +/*
> + * Defines high level functionality to interact with the OpenSocial 
API.
> + */
> +function SocialWrapper() {
> +
> +    /*
> +     * Retrieves the current viewer.
> +     */
> +    this.getViewer = function(callback) {
> +        osapi.people.getViewer().execute(callback);
> +    }
> +
> +    /*
> +     * Retrieves the current owner.
> +     */
> +    this.getOwner = function(callback) {
> +        osapi.people.getOwner().execute(callback);
> +    }
> +
> +    //------------------------ ALBUMS ----------------------
> +    /*
> +     * Retrieves albums by ID(s).
> +     */
> +    this.getAlbumsById = function(userId, albumId, callback) {
> +        var params = {userId: userId, albumId: albumId};
> +        osapi.albums.get(params).execute(callback);
> +    }
> +
> +    /*
> +     * Retrieves albums by user.
> +     */
> +    this.getAlbumsByUser = function(userId, callback) {
> +        osapi.albums.get({userId: userId}).execute(callback);
> +    }
> +
> +    /*
> +     * Retrieves albums by group.
> +     */
> +    this.getAlbumsByGroup = function(userId, groupId, callback) {
> +        osapi.albums.get({userId: userId, groupId: 
groupId}).execute(callback);
> +    }
> +
> +    /*
> +     * Creates an album for the given user.
> +     */
> +    this.createAlbum = function(userId, album, callback) {
> +        var params = {
> +            userId: userId,
> +            album: album
> +        };
> +        osapi.albums.create(params).execute(callback);
> +    }
> +
> +    /*
> +     * Updates an album by ID.
> +     */
> +    this.updateAlbum = function(userId, albumId, album, callback) {
> +        var params = {
> +            userId: userId,
> +            albumId: albumId,
> +            album: album
> +        };
> +        osapi.albums.update(params).execute(callback);
> +    }
> +
> +    /*
> +     * Deletes an album by ID.
> +     */
> +    this.deleteAlbum = function(userId, albumId, callback) {
> +        var params = {userId: userId, albumId: albumId};
> +        osapi.albums.delete(params).execute(callback);
> +    }
> +
> +    //------------------------------- MEDIAITEMS 
----------------------------
> +    /*
> +     * Creates a MediaItem.
> +     */
> +    this.createMediaItem = function(userId, albumId, mediaItem, 
callback) {
> +        var params = {
> +            userId: userId,
> +            albumId: albumId,
> +            mediaItem: mediaItem
> +        };
> +        osapi.mediaItems.create(params).execute(callback);
> +    }
> +
> +    /*
> +     * Updates a MediaItem by ID.
> +     */
> +    this.updateMediaItem = function(userId, albumId, mediaItemId, 
mediaItem, callback) {
> +        var params = {
> +            userId: userId,
> +            albumId: albumId,
> +            mediaItemId: mediaItemId,
> +            mediaItem: mediaItem
> +        };
> +        console.log("PARAMS: " + JSON.stringify(params));
> +        osapi.mediaItems.update(params).execute(callback);
> +    }
> +
> +    /*
> +     * Retrieves MediaItems by ID(s).
> +     */
> +    this.getMediaItemsById = function(userId, albumId, mediaItemId, 
callback) {
> +        var params = {
> +            userId: userId,
> +            albumId: albumId,
> +            mediaItemId: mediaItemId
> +        };
> +        osapi.mediaItems.get(params).execute(callback);
> +    }
> +
> +    /*
> +     * Retrieves MediaItems by album.
> +     */
> +    this.getMediaItemsByAlbum = function(userId, albumId, callback) {
> +        osapi.mediaItems.get({userId: userId, albumId: 
albumId}).execute(callback);
> +    }
> +
> +    /*
> +     * Retrieves MediaItems by user and group.
> +     */
> +    this.getMediaItemsByUser = function(userId, groupId, callback) {
> +        osapi.mediaItems.get({userId: userId, groupId: 
groupId}).execute(callback);
> +    }
> +
> +    /*
> +     * Deletes a MediaItem by ID.
> +     */
> +    this.deleteMediaItem = function(userId, albumId, mediaItemId, 
callback) {
> +        var params = {
> +            userId: userId,
> +            albumId: albumId,
> +            mediaItemId: mediaItemId
> +        };
> +        osapi.mediaItems.delete(params).execute(callback);
> +    }
> +}
> \ No newline at end of file
>
> Added: shindig/trunk/content/samplecontainer/examples/media/document.png
> URL: 
http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/document.png?rev=1000579&view=auto

> 
==============================================================================
> Binary file - no diff available.
>
> Propchange: 
shindig/trunk/content/samplecontainer/examples/media/document.png
> 
------------------------------------------------------------------------------
>    svn:mime-type = application/octet-stream
>
> Added: shindig/trunk/content/samplecontainer/examples/media/folder.png
> URL: 
http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/folder.png?rev=1000579&view=auto

> 
==============================================================================
> Binary file - no diff available.
>
> Propchange: 
shindig/trunk/content/samplecontainer/examples/media/folder.png
> 
------------------------------------------------------------------------------
>    svn:mime-type = application/octet-stream
>
> Added: shindig/trunk/content/samplecontainer/examples/media/styles.css
> URL: 
http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/styles.css?rev=1000579&view=auto

> 
==============================================================================
> --- shindig/trunk/content/samplecontainer/examples/media/styles.css 
(added)
> +++ shindig/trunk/content/samplecontainer/examples/media/styles.css Thu 
Sep 23 18:57:41 2010
> @@ -0,0 +1,92 @@
> +/* ============ ROUND 2 ============== */
> +
> +td.albumsTitle {
> +    font-family:'comic sans ms';
> +    width: 100%;
> +    font-size:24px;
> +}
> +
> +td.albumListThumbnail {
> +    width: 10%;
> +    height: 75px;
> +}
> +
> +td.albumListRight {
> +    width: 90%;
> +}
> +
> +td.actionLinks {
> +    width:100%;
> +    font-size:12px;
> +}
> +
> +td.albumListTitle {
> +    font-size:24px;
> +    white-space:nowrap;
> +    font-family:'comic sans ms';
> +}
> +
> +td.albumListDescription {
> +    font-family:'comic sans ms';
> +}
> +
> +.albumsTable {
> +    width:100%;
> +    border-style:solid;
> +    background-color:#b0c4de;
> +}
> +
> +td.mediaItemThumbnail {
> +    height:100%;
> +}
> +
> +td.mediaItemBox {
> +    width: 150px;
> +    height: 100px;
> +}
> +
> +.mediaItemControls {
> +
> +}
> +
> +
> +/* ============ ROUND 1 ============== */
> +.temp1 {background-color:#6495ed;}
> +.temp2 {background-color:#e0ffff;}
> +.temp3 {
> +    background-color:#b0c4de;
> +    background-image:url('img_flwr.png');
> +    background-repeat:no-repeat;
> +    background-position:top right;
> +}
> +
> +td2 {
> +    border-style:solid;
> +}
> +
> +td.albumLeft {
> +    width:10%;
> +}
> +
> +td.albumRight {
> +    width: 90%;
> +}
> +
> +
> +
> +td.albumEdit {
> +    width:100%;
> +    text-align:right;
> +    vertical-align:middle;
> +    font-size:12px;
> +}
> +
> +
> +
> +.albumTitleStyle {
> +    color: blue;
> +
> +}
> +.albumElement {
> +    background-color:#b0c4de;
> +}
>
>
>

Re: svn commit: r1000579 - in /shindig/trunk/content/samplecontainer/examples/media: ./ Media.xml MediaUI.js Social.js document.png folder.png styles.css

Posted by Chirag Shah <ch...@gmail.com>.

Are these files licensed under the Apache License?

On Thu, Sep 23, 2010 at 11:57 AM,  <hn...@apache.org> wrote:
> Author: hnguy
> Date: Thu Sep 23 18:57:41 2010
> New Revision: 1000579
>
> URL: http://svn.apache.org/viewvc?rev=1000579&view=rev
> Log:
> SHINDIG-1430 - Patch from Eric Woods - Media Sample Gadget
>
> Added:
>    shindig/trunk/content/samplecontainer/examples/media/
>    shindig/trunk/content/samplecontainer/examples/media/Media.xml
>    shindig/trunk/content/samplecontainer/examples/media/MediaUI.js
>    shindig/trunk/content/samplecontainer/examples/media/Social.js
>    shindig/trunk/content/samplecontainer/examples/media/document.png   (with props)
>    shindig/trunk/content/samplecontainer/examples/media/folder.png   (with props)
>    shindig/trunk/content/samplecontainer/examples/media/styles.css
>
> Added: shindig/trunk/content/samplecontainer/examples/media/Media.xml
> URL: http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/Media.xml?rev=1000579&view=auto
> ==============================================================================
> --- shindig/trunk/content/samplecontainer/examples/media/Media.xml (added)
> +++ shindig/trunk/content/samplecontainer/examples/media/Media.xml Thu Sep 23 18:57:41 2010
> @@ -0,0 +1,54 @@
> +<?xml version="1.0" encoding="UTF-8"?>
> +<Module>
> +    <ModulePrefs title="Albums and MediaItems">
> +        <Require feature="osapi"/>
> +        <Require feature="dynamic-height"/>
> +    </ModulePrefs>
> +
> +    <Content type="html"><![CDATA[
> +    <html>
> +        <head>
> +            <!-- Source imports -->
> +            <script src='http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js' type='text/javascript' djConfig='parseOnLoad:true, isDebug:true'></script>
> +            <script src='Social.js' type='text/javascript'></script>
> +            <script src='MediaUI.js' type='text/javascript'></script>
> +
> +
> +            <!-- Styling -->
> +            <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/tundra/tundra.css"></link>
> +            <link rel="stylesheet" type="text/css" href="styles.css">
> +            <style type="text/css">
> +            </style>
> +
> +            <!-- DOJO requires -->
> +            <script type='text/javascript'>
> +                dojo.require('dijit.form.Button');
> +                dojo.require('dijit.form.Form');
> +                dojo.require('dijit.form.TextBox');
> +                dojo.require('dijit.form.ValidationTextBox');
> +                dojo.require('dijit.Dialog');
> +                dojo.require('dijit.form.Textarea');
> +                dojo.require('dijit.layout.ContentPane');
> +                dojo.require('dijit.layout.TabContainer');
> +            </script>
> +
> +            <!-- JavaScript -->
> +            <script type="text/javascript">
> +                <!-- Entry point to the gadget -->
> +                function init() {
> +                    console.log("dojo initialized");
> +                    new MediaUI(new SocialWrapper()).init();
> +                }
> +
> +                <!-- Register entry point -->
> +                dojo.addOnLoad(init);   // TODO: work-around to tundra.css issue
> +                //gadgets.util.registerOnLoadHandler(function() {
> +                    //dojo.addOnLoad(init);
> +                //});
> +            </script>
> +        </head>
> +        <body class="tundra">
> +        </body>
> +    </html>
> +    ]]></Content>
> +</Module>
> \ No newline at end of file
>
> Added: shindig/trunk/content/samplecontainer/examples/media/MediaUI.js
> URL: http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/MediaUI.js?rev=1000579&view=auto
> ==============================================================================
> --- shindig/trunk/content/samplecontainer/examples/media/MediaUI.js (added)
> +++ shindig/trunk/content/samplecontainer/examples/media/MediaUI.js Thu Sep 23 18:57:41 2010
> @@ -0,0 +1,503 @@
> +/*
> + * The User Interface for the Albums & MediaItems gadget.
> + *
> + * SHINDIG TODOS
> + *  set ownerId automatically?
> + *  delete children mediaitems when album deleted?
> + *  update only updates given fields?
> + *  update album mediaitem count when inserting/removing mediaitem?
> + *
> + * GADGET TODOS
> + *  album info such as how many albums are contained
> + *  fix auto height for edit album popup
> + *  thumnail pictures
> + */
> +function MediaUI(social) {
> +    var viewer = null;
> +    var divManager = null;
> +
> +    /*
> +     * Initializes the gadget.
> +     */
> +    this.init = function() {
> +        console.log("initializing AlbumsUI");
> +
> +        // Manages high-level divs
> +        divManager = new DivManager();
> +        divManager.init();
> +
> +        // Load data and render
> +        loadData(function() {
> +            social.getAlbumsByUser(viewer.id, function(response) {
> +                renderAlbums(response.list);
> +                divManager.showAlbums();
> +            });
> +        });
> +    }
> +
> +    /*
> +     * Pre-load data for gadget.
> +     */
> +    function loadData(callback) {
> +        social.getViewer(function(data) {
> +            viewer = data;
> +            callback();
> +        });
> +    }
> +
> +    /*
> +     * Manages the gadgets main DIV elements.
> +     *
> +     * TODO: use dojo.query() & classes rather than divs[]
> +     * TODO: showOnly() function to avoid flashing/pauses
> +     */
> +    function DivManager() {
> +        var divs = [];
> +
> +        this.init = function() {
> +            console.log('DivManager.init');
> +            addDiv('albumsDiv');
> +            addDiv('mediaItemsDiv');
> +            addDiv('mediaItemDiv');
> +            hideAll();
> +        }
> +
> +        this.showAlbums = function() {
> +            console.log('DivManager.showAlbums');
> +            hideAll();
> +            divs['albumsDiv'].style.display = 'block';
> +            this.refreshWindow();
> +        }
> +
> +        this.showMediaItems = function() {
> +            console.log('DivManager.showMediaItems');
> +            hideAll();
> +            divs['mediaItemsDiv'].style.display = 'block';
> +            this.refreshWindow();
> +        }
> +
> +        this.showMediaItem = function() {
> +            console.log('DivManager.showMediaItem');
> +            hideAll();
> +            divs['mediaItemDiv'].style.display = 'block';
> +            this.refreshWindow();
> +        }
> +
> +        this.refreshWindow = function() {
> +            gadgets.window.adjustHeight(500);
> +        }
> +
> +        function hideAll() {
> +            for (key in divs) { divs[key].style.display = 'none'; }
> +        }
> +
> +        function addDiv(id) { divs[id] = dojo.create('div', {id: id}, dojo.body()); }
> +    }
> +
> +    /*
> +     * Renders a list of the given albums.
> +     */
> +    function renderAlbums(albums) {
> +        console.log('renderAlbums');
> +
> +        dojo.empty('albumsDiv');
> +        var albumsDiv = dojo.byId('albumsDiv');
> +
> +        var albumsBanner = dojo.create('div', null, albumsDiv);
> +        var table = dojo.create('table', null, albumsBanner);
> +        var tbody = dojo.create('tbody', null, table);
> +        var tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', {innerHTML: viewer.name.formatted + "'s Albums", className: 'albumsTitle'}, tr);
> +        dojo.create('td', null, tr).appendChild(new dijit.form.Button({label: '+ New Album', onClick: dojo.hitch(this, editAlbumPopup, null)}).domNode);
> +
> +        var albumsList = dojo.create('div', null, albumsDiv);
> +        if (albums.length > 0) {
> +            var table = dojo.create('table', {className: 'albumsTable'}, albumsList);
> +            var tbody = dojo.create('tbody', null, table);
> +            for (i = 0; i < albums.length; i++) {
> +                var albumRow = dojo.create('tr', null, tbody);
> +                var albumLeft = dojo.create('td', {className: 'albumListThumbnail'}, albumRow);
> +                var imgLink = dojo.create('a', {href: "javascript:;", onclick: dojo.hitch(this, onClickAlbum, viewer.id, albums[i])}, albumLeft);
> +                dojo.create('img', {src: albums[i].thumbnailUrl, onerror: "this.src='/samplecontainer/examples/media/folder.png';", width: '100%'}, imgLink);
> +                var albumRight = dojo.create('td', {className: 'albumListRight'}, albumRow);
> +                var albumTitleRow = dojo.create('tr', null, albumRight);
> +                var titleTd = dojo.create('td', {className: 'albumListTitle'}, albumTitleRow);
> +                dojo.create('a', {innerHTML: albums[i].title, href: 'javascript:;', onclick: dojo.hitch(this, onClickAlbum, viewer.id, albums[i])}, titleTd);
> +                var editTd = dojo.create('td', {className: 'actionLinks', style: 'text-align: right'}, albumTitleRow);
> +                dojo.create('a', {innerHTML: 'edit', href: 'javascript:;', onclick: dojo.hitch(this, editAlbumPopup, albums[i])}, editTd);
> +                editTd.appendChild(dojo.doc.createTextNode(' | '));
> +                dojo.create('a', {innerHTML: 'delete', href: 'javascript:;', onclick: dojo.hitch(this, deleteAlbumPopup, albums[i])}, editTd);
> +                if (albums[i].description) {
> +                    var albumDescription = dojo.create('tr', null, albumRight);
> +                    dojo.create('td', {innerHTML: albums[i].description, className: 'albumListDescription', colspan: '2'}, albumDescription);
> +                }
> +                //var albumInfo = dojo.create('tr', null, albumRight);
> +                //var infoStr = "ID: " + albums[i].id + " | Owner ID: " + albums[i].ownerId;
> +                //dojo.create('td', {innerHTML: infoStr, className: 'albumListInfo', colspan: '2'}, albumInfo);
> +            }
> +        } else {
> +            albumsDiv.appendChild(dojo.doc.createTextNode("No albums found."));
> +        }
> +        divManager.refreshWindow();
> +
> +        // Handles when user clicks an album
> +        function onClickAlbum(userId, album) {
> +            social.getMediaItemsByAlbum(userId, album.id, function(response) {
> +                renderMediaItems(album, response.list);
> +                divManager.showMediaItems();
> +            });
> +        }
> +    }
> +
> +    /*
> +     * Convenience function to retrieve albums and render.
> +     */
> +    function renderAlbumsByUser(userId, callback) {
> +        social.getAlbumsByUser(userId, function(response) {
> +            renderAlbums(response.list);
> +            divManager.showAlbums();
> +            if (callback != null) callback();
> +        });
> +    }
> +
> +    /*
> +     * Renders a grid of the given MediaItems.
> +     *
> +     * TODO: simplify this by simply taking in 'album', retrieving MediaItems here
> +     */
> +    function renderMediaItems(album, mediaItems) {
> +        console.log('renderMediaItems');
> +        dojo.empty('mediaItemsDiv');
> +        var mediaItemsDiv = dojo.byId('mediaItemsDiv');
> +        var numCols = 5;
> +
> +        // Div to display navation bar and Create button
> +        var topDiv = dojo.create('div', null, mediaItemsDiv);
> +        var table = dojo.create('table', null, topDiv);
> +        var tbody = dojo.create('tbody', null, table);
> +        var tr = dojo.create('tr', null, tbody);
> +        var td = dojo.create('td', {style: 'width:100%'}, tr);
> +        dojo.create('a', {innerHTML: 'Albums', href: 'javascript:;', onclick: dojo.hitch(this, renderAlbumsByUser, viewer.id, null)}, td);
> +        td.appendChild(dojo.doc.createTextNode(' > ' + album.title));
> +        td = dojo.create('td', {style: 'width:100%'}, tr);
> +        var createButton = new dijit.form.Button({label: '+ New MediaItem', onClick: dojo.hitch(this, editMediaItemPopup, album, null)});
> +        td.appendChild(createButton.domNode);
> +
> +        // Div to display MediaItems in a grid
> +        var gridDiv = dojo.create('div', null, mediaItemsDiv);
> +        if (mediaItems.length > 0) {
> +            var table = dojo.create('table', null, gridDiv);
> +            var tbody = dojo.create('tbody', null, table);
> +            var tr = null;
> +            for (i = 0; i < mediaItems.length; i++) {
> +                if (i % numCols == 0) {
> +                    tr = dojo.create('tr', null, tbody);
> +                }
> +                var td = dojo.create('td', {className: 'mediaItemBox'}, tr);
> +                var imageTd = dojo.create('tr', null, td).appendChild(dojo.create('td', {className: 'mediaItemThumbnail'}));
> +                if (mediaItems[i].url) {
> +                    var imageLink = dojo.create('a', {href: "javascript:;", onclick: dojo.hitch(this, renderMediaItem, album, mediaItems[i])}, imageTd);
> +                    imageLink.appendChild(dojo.create('img', {src: mediaItems[i].thumbnailUrl, onerror: "this.src='/samplecontainer/examples/media/document.png';", style:'height:100px;'}));
> +                } else {
> +                    dojo.create('img', {src: mediaItems[i].thumbnailUrl, onerror: "this.src='/samplecontainer/examples/media/document.png';", style:'height:100px;'}, imageTd);
> +                }
> +                var titleTd = dojo.create('tr', null, td).appendChild(dojo.create('td', {style: "text-align:center; font-family:'comic sans ms';white-space:nowrap;"}));
> +                titleTd.appendChild(dojo.doc.createTextNode(mediaItems[i].title));
> +                var actionsTd = dojo.create('tr', null, td).appendChild(dojo.create('td', {className: 'actionLinks', style: 'text-align: center;'}));
> +                dojo.create('a', {innerHTML: 'edit', href: 'javascript:;', onclick: dojo.hitch(this, editMediaItemPopup, album, mediaItems[i])}, actionsTd);
> +                actionsTd.appendChild(dojo.doc.createTextNode(' | '));
> +                dojo.create('a', {innerHTML: 'delete', href: 'javascript:;', onclick: dojo.hitch(this, deleteMediaItemPopup, album, mediaItems[i])}, actionsTd);
> +            }
> +        } else {
> +            gridDiv.appendChild(dojo.doc.createTextNode('Album is empty'));
> +        }
> +        divManager.refreshWindow();
> +    }
> +
> +    /*
> +     * Convenience function to retriev & render MediaItems by Album.
> +     */
> +    function retrieveAndRenderMediaItems(album) {
> +        social.getMediaItemsByAlbum(viewer.id, album.id, function(response) {
> +            divManager.showMediaItems();
> +            renderMediaItems(album, response.list);
> +        });
> +    }
> +
> +    /*
> +     * Renders the view for a single MediaItem.
> +     */
> +    function renderMediaItem(album, mediaItem) {
> +        console.log('renderMediaItem');
> +        dojo.empty('mediaItemDiv');
> +        var mediaItemDiv = dojo.byId('mediaItemDiv');
> +
> +        // Div to display navation bar and Create button
> +        var topDiv = dojo.create('div', null, mediaItemDiv);
> +        var table = dojo.create('table', null, topDiv);
> +        var tbody = dojo.create('tbody', null, table);
> +        var tr = dojo.create('tr', null, tbody);
> +        var td = dojo.create('td', {style: 'width:100%'}, tr);
> +        dojo.create('a', {innerHTML: 'Albums', href: 'javascript:;', onclick: dojo.hitch(this, renderAlbumsByUser, viewer.id, null)}, td);
> +        td.appendChild(dojo.doc.createTextNode(" > "));
> +        dojo.create('a', {innerHTML: album.title, href: "javascript:;", onclick: dojo.hitch(this, retrieveAndRenderMediaItems, album)}, td);
> +        td.appendChild(dojo.doc.createTextNode(" > " + mediaItem.title));
> +
> +        // Div to show MediaItem
> +        var itemDiv = dojo.create('div', null, mediaItemDiv);
> +        var table = dojo.create('table', null, itemDiv);
> +        var tbody = dojo.create('tbody', null, table);
> +        var tr = dojo.create('tr', null, tbody);
> +        var td = dojo.create('td', null, tr);
> +        dojo.create('img', {src: mediaItem.url}, td);
> +        if (mediaItem.description) {
> +            tr = dojo.create('tr', null, tbody);
> +            td = dojo.create('td', null, tr);
> +            td.appendChild(dojo.doc.createTextNode(mediaItem.description));
> +        }
> +
> +        divManager.showMediaItem();
> +    }
> +
> +    /*
> +     * Popup to edit album.
> +     */
> +    function editAlbumPopup(album) {
> +        console.log('editAlbumPopup: ' + JSON.stringify(album));
> +
> +        var title = (album == null ? 'Create' : 'Edit') + ' Album';
> +        var dialog = new dijit.Dialog({id: 'editAlbumPopup', title: title, onCancel: destroyDialog});
> +        dojo.body().appendChild(dialog.domNode);
> +
> +        var formDiv = dojo.create('div', {id: 'editAlbumFormDiv'});
> +        var form = new dijit.form.Form({id: 'editAlbumForm'});
> +        formDiv.appendChild(form.domNode);
> +        var table = dojo.create('table', null, form.domNode);
> +        var tbody = dojo.create('tbody', null, table);
> +        var tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Title', for: 'title'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.ValidationTextBox({
> +                name: 'title',
> +                value: album == null ? '' : album.title
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Thumnail URL', for: 'thumbnail'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.ValidationTextBox({
> +                name: 'thumbnail',
> +                value: album == null ? '' : album.thumbnailUrl
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Description', for: 'description'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.Textarea({
> +                name: 'description',
> +                value: album == null ? '' : album.description
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        var buttonTd = dojo.create('td', {colspan: '2', align: 'center'}, tr);
> +        buttonTd.appendChild(new dijit.form.Button({
> +                label: 'Save',
> +                onClick: saveForm
> +            }).domNode
> +        );
> +        buttonTd.appendChild(new dijit.form.Button({
> +                label: 'Cancel',
> +                onClick: destroyDialog
> +            }).domNode
> +        );
> +
> +        dialog.set('content', formDiv);
> +        dialog.show();
> +
> +        function saveForm() {
> +            console.log('saveForm');
> +            var values = form.get('value');
> +            var newAlbum = {
> +                title: values.title,
> +                thumbnailUrl: values.thumbnail,
> +                description: values.description,
> +                ownerId: viewer.id  // TODO: bug? Albums service should set this
> +            };
> +            if (album == null) {
> +                social.createAlbum(viewer.id, newAlbum, function(response) {
> +                    console.log('created album response: ' + JSON.stringify(response));
> +                    renderAlbumsByUser(viewer.id);
> +                });
> +            } else {
> +                social.updateAlbum(viewer.id, album.id, newAlbum, function(response) {
> +                    console.log('updated album response: ' + JSON.stringify(response));
> +                    renderAlbumsByUser(viewer.id);
> +                });
> +            }
> +            destroyDialog();
> +        }
> +
> +        // Handles destroying the dialog popup
> +        function destroyDialog() {
> +            console.log('destroyDialog');
> +            dialog.destroyRecursive(false);
> +            dialog.destroyRendering(false);
> +            dialog.destroy(false);
> +        }
> +    }
> +
> +    /*
> +     * Popup to edit MediaItem.
> +     */
> +    function editMediaItemPopup(album, mediaItem) {
> +        console.log('editMediaItemPopup: ' + JSON.stringify(mediaItem));
> +
> +        var albumId = mediaItem == null ? album.id : mediaItem.albumId;
> +        var title = (mediaItem == null ? 'Create' : 'Edit') + ' MediaItem';
> +        var dialog = new dijit.Dialog({id: 'editMediaItemPopup', title: title, onCancel: destroyDialog});
> +        dojo.body().appendChild(dialog.domNode);
> +
> +        // Form div
> +        var formDiv = dojo.create('div', {id: 'editMediaItemFormDiv'});
> +        var form = new dijit.form.Form({id: 'editMediaItemForm'});
> +        formDiv.appendChild(form.domNode);
> +        var table = dojo.create('table', null, form.domNode);
> +        var tbody = dojo.create('tbody', null, table);
> +        var tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Title', for: 'title'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.ValidationTextBox({
> +                name: 'title',
> +                value: mediaItem == null ? '' : mediaItem.title
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Description', for: 'description'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.Textarea({
> +                name: 'description',
> +                value: mediaItem == null ? '' : mediaItem.description
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Type', for: 'type'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.ValidationTextBox({
> +                name: 'type',
> +                value: mediaItem == null ? '' : mediaItem.type
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'Thumnail URL', for: 'thumbnailUrl'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.ValidationTextBox({
> +                name: 'thumbnailUrl',
> +                value: mediaItem == null ? '' : mediaItem.thumbnailUrl
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        dojo.create('td', null, tr).appendChild(dojo.create('label', {innerHTML: 'URL', for: 'url'}));
> +        dojo.create('td', null, tr).appendChild(
> +            new dijit.form.ValidationTextBox({
> +                name: 'url',
> +                value: mediaItem == null ? '' : mediaItem.url
> +            }).domNode
> +        );
> +        tr = dojo.create('tr', null, tbody);
> +        var buttonTd = dojo.create('td', {colspan: '2', align: 'center'}, tr);
> +        buttonTd.appendChild(new dijit.form.Button({
> +                label: 'Save',
> +                onClick: saveForm
> +            }).domNode
> +        );
> +        buttonTd.appendChild(new dijit.form.Button({
> +                label: 'Cancel',
> +                onClick: destroyDialog
> +            }).domNode
> +        );
> +
> +        // Textarea div for JSON
> +        var textAreaDiv = dojo.create('div', {style: "width:100%; height:100%;", id: 'textAreaDiv'});
> +        var textArea = new dijit.form.Textarea({value: JSON.stringify(mediaItem), rows: "20"});
> +        textAreaDiv.appendChild(textArea.domNode);
> +
> +        // Put divs together
> +        var tabContainer = new dijit.layout.TabContainer({style: "width:400px; height:300px;"});
> +        var formContentPane = new dijit.layout.ContentPane({title: "Form", content: formDiv});
> +        tabContainer.addChild(formContentPane);
> +        var textAreaContentPane = new dijit.layout.ContentPane({title: "JSON", content: textAreaDiv});
> +        tabContainer.addChild(textAreaContentPane);
> +        tabContainer.startup();
> +        var dialogDiv = dojo.create('div', null);
> +        dialogDiv.appendChild(tabContainer.domNode);
> +
> +        dialog.set('content', dialogDiv);
> +        dialog.show();
> +
> +        function saveForm() {
> +            console.log('saveForm mediaItem');
> +            var values = form.get('value');
> +            var newMediaItem = {
> +                title: values.title,
> +                description: values.description,
> +                type: values.type,
> +                thumbnailUrl: values.thumbnailUrl,
> +                url: values.url
> +            };
> +            if (newMediaItem.type == null || newMediaItem.type == "") newMediaItem.type = "image";
> +            if (mediaItem == null) {
> +                social.createMediaItem(viewer.id, albumId, newMediaItem, function(response) {
> +                    console.log('created MediaItem response: ' + JSON.stringify(response));
> +                    social.getMediaItemsByAlbum(viewer.id, album.id, function(response) {
> +                        renderMediaItems(album, response.list);
> +                    });
> +                });
> +            } else {
> +                social.updateMediaItem(viewer.id, albumId, mediaItem.id, newMediaItem, function(response) {
> +                    console.log('updated MediaItem response: ' + JSON.stringify(response));
> +                    social.getMediaItemsByAlbum(viewer.id, album.id, function(response) {
> +                        renderMediaItems(album, response.list);
> +                    });
> +                });
> +            }
> +            destroyDialog();
> +        }
> +
> +        // Handles destroying the dialog popup
> +        function destroyDialog() {
> +            console.log('destroyDialog');
> +            dialog.destroyRecursive(false);
> +            dialog.destroyRendering(false);
> +            dialog.destroy(false);
> +        }
> +    }
> +
> +    /*
> +     * Popup to confirm that the user wants to delete album.
> +     */
> +    function deleteAlbumPopup(album) {
> +        console.log('deleteAlbumPopup');
> +        if (confirm("Delete '" + album.title + "'?")) {
> +            social.deleteAlbum(viewer.id, album.id, function(response) {
> +                console.log('delete album response: ' + JSON.stringify(response));
> +                renderAlbumsByUser(viewer.id);
> +            });
> +        }
> +    }
> +
> +    /*
> +     * Popup to confirm user wants to delete MediaItem.
> +     */
> +    function deleteMediaItemPopup(album, mediaItem) {
> +        console.log('deleteMediaItemPopup');
> +        var albumId = mediaItem.albumId;
> +        if (confirm("Delete '" + mediaItem.title + "'?")) {
> +            social.deleteMediaItem(viewer.id, albumId, mediaItem.id, function(response) {
> +                console.log('delete mediaItem response: ' + JSON.stringify(response));
> +                social.getMediaItemsByAlbum(viewer.id, albumId, function(response) {
> +                    renderMediaItems(album, response.list);
> +                });
> +            });
> +        }
> +    }
> +}
> \ No newline at end of file
>
> Added: shindig/trunk/content/samplecontainer/examples/media/Social.js
> URL: http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/Social.js?rev=1000579&view=auto
> ==============================================================================
> --- shindig/trunk/content/samplecontainer/examples/media/Social.js (added)
> +++ shindig/trunk/content/samplecontainer/examples/media/Social.js Thu Sep 23 18:57:41 2010
> @@ -0,0 +1,138 @@
> +/*
> + * Defines high level functionality to interact with the OpenSocial API.
> + */
> +function SocialWrapper() {
> +
> +    /*
> +     * Retrieves the current viewer.
> +     */
> +    this.getViewer = function(callback) {
> +        osapi.people.getViewer().execute(callback);
> +    }
> +
> +    /*
> +     * Retrieves the current owner.
> +     */
> +    this.getOwner = function(callback) {
> +        osapi.people.getOwner().execute(callback);
> +    }
> +
> +    //------------------------ ALBUMS ----------------------
> +    /*
> +     * Retrieves albums by ID(s).
> +     */
> +    this.getAlbumsById = function(userId, albumId, callback) {
> +        var params = {userId: userId, albumId: albumId};
> +        osapi.albums.get(params).execute(callback);
> +    }
> +
> +    /*
> +     * Retrieves albums by user.
> +     */
> +    this.getAlbumsByUser = function(userId, callback) {
> +        osapi.albums.get({userId: userId}).execute(callback);
> +    }
> +
> +    /*
> +     * Retrieves albums by group.
> +     */
> +    this.getAlbumsByGroup = function(userId, groupId, callback) {
> +        osapi.albums.get({userId: userId, groupId: groupId}).execute(callback);
> +    }
> +
> +    /*
> +     * Creates an album for the given user.
> +     */
> +    this.createAlbum = function(userId, album, callback) {
> +        var params = {
> +            userId: userId,
> +            album: album
> +        };
> +        osapi.albums.create(params).execute(callback);
> +    }
> +
> +    /*
> +     * Updates an album by ID.
> +     */
> +    this.updateAlbum = function(userId, albumId, album, callback) {
> +        var params = {
> +            userId: userId,
> +            albumId: albumId,
> +            album: album
> +        };
> +        osapi.albums.update(params).execute(callback);
> +    }
> +
> +    /*
> +     * Deletes an album by ID.
> +     */
> +    this.deleteAlbum = function(userId, albumId, callback) {
> +        var params = {userId: userId, albumId: albumId};
> +        osapi.albums.delete(params).execute(callback);
> +    }
> +
> +    //------------------------------- MEDIAITEMS ----------------------------
> +    /*
> +     * Creates a MediaItem.
> +     */
> +    this.createMediaItem = function(userId, albumId, mediaItem, callback) {
> +        var params = {
> +            userId: userId,
> +            albumId: albumId,
> +            mediaItem: mediaItem
> +        };
> +        osapi.mediaItems.create(params).execute(callback);
> +    }
> +
> +    /*
> +     * Updates a MediaItem by ID.
> +     */
> +    this.updateMediaItem = function(userId, albumId, mediaItemId, mediaItem, callback) {
> +        var params = {
> +            userId: userId,
> +            albumId: albumId,
> +            mediaItemId: mediaItemId,
> +            mediaItem: mediaItem
> +        };
> +        console.log("PARAMS: " + JSON.stringify(params));
> +        osapi.mediaItems.update(params).execute(callback);
> +    }
> +
> +    /*
> +     * Retrieves MediaItems by ID(s).
> +     */
> +    this.getMediaItemsById = function(userId, albumId, mediaItemId, callback) {
> +        var params = {
> +            userId: userId,
> +            albumId: albumId,
> +            mediaItemId: mediaItemId
> +        };
> +        osapi.mediaItems.get(params).execute(callback);
> +    }
> +
> +    /*
> +     * Retrieves MediaItems by album.
> +     */
> +    this.getMediaItemsByAlbum = function(userId, albumId, callback) {
> +        osapi.mediaItems.get({userId: userId, albumId: albumId}).execute(callback);
> +    }
> +
> +    /*
> +     * Retrieves MediaItems by user and group.
> +     */
> +    this.getMediaItemsByUser = function(userId, groupId, callback) {
> +        osapi.mediaItems.get({userId: userId, groupId: groupId}).execute(callback);
> +    }
> +
> +    /*
> +     * Deletes a MediaItem by ID.
> +     */
> +    this.deleteMediaItem = function(userId, albumId, mediaItemId, callback) {
> +        var params = {
> +            userId: userId,
> +            albumId: albumId,
> +            mediaItemId: mediaItemId
> +        };
> +        osapi.mediaItems.delete(params).execute(callback);
> +    }
> +}
> \ No newline at end of file
>
> Added: shindig/trunk/content/samplecontainer/examples/media/document.png
> URL: http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/document.png?rev=1000579&view=auto
> ==============================================================================
> Binary file - no diff available.
>
> Propchange: shindig/trunk/content/samplecontainer/examples/media/document.png
> ------------------------------------------------------------------------------
>    svn:mime-type = application/octet-stream
>
> Added: shindig/trunk/content/samplecontainer/examples/media/folder.png
> URL: http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/folder.png?rev=1000579&view=auto
> ==============================================================================
> Binary file - no diff available.
>
> Propchange: shindig/trunk/content/samplecontainer/examples/media/folder.png
> ------------------------------------------------------------------------------
>    svn:mime-type = application/octet-stream
>
> Added: shindig/trunk/content/samplecontainer/examples/media/styles.css
> URL: http://svn.apache.org/viewvc/shindig/trunk/content/samplecontainer/examples/media/styles.css?rev=1000579&view=auto
> ==============================================================================
> --- shindig/trunk/content/samplecontainer/examples/media/styles.css (added)
> +++ shindig/trunk/content/samplecontainer/examples/media/styles.css Thu Sep 23 18:57:41 2010
> @@ -0,0 +1,92 @@
> +/* ============ ROUND 2 ============== */
> +
> +td.albumsTitle {
> +    font-family:'comic sans ms';
> +    width: 100%;
> +    font-size:24px;
> +}
> +
> +td.albumListThumbnail {
> +    width: 10%;
> +    height: 75px;
> +}
> +
> +td.albumListRight {
> +    width: 90%;
> +}
> +
> +td.actionLinks {
> +    width:100%;
> +    font-size:12px;
> +}
> +
> +td.albumListTitle {
> +    font-size:24px;
> +    white-space:nowrap;
> +    font-family:'comic sans ms';
> +}
> +
> +td.albumListDescription {
> +    font-family:'comic sans ms';
> +}
> +
> +.albumsTable {
> +    width:100%;
> +    border-style:solid;
> +    background-color:#b0c4de;
> +}
> +
> +td.mediaItemThumbnail {
> +    height:100%;
> +}
> +
> +td.mediaItemBox {
> +    width: 150px;
> +    height: 100px;
> +}
> +
> +.mediaItemControls {
> +
> +}
> +
> +
> +/* ============ ROUND 1 ============== */
> +.temp1 {background-color:#6495ed;}
> +.temp2 {background-color:#e0ffff;}
> +.temp3 {
> +    background-color:#b0c4de;
> +    background-image:url('img_flwr.png');
> +    background-repeat:no-repeat;
> +    background-position:top right;
> +}
> +
> +td2 {
> +    border-style:solid;
> +}
> +
> +td.albumLeft {
> +    width:10%;
> +}
> +
> +td.albumRight {
> +    width: 90%;
> +}
> +
> +
> +
> +td.albumEdit {
> +    width:100%;
> +    text-align:right;
> +    vertical-align:middle;
> +    font-size:12px;
> +}
> +
> +
> +
> +.albumTitleStyle {
> +    color: blue;
> +
> +}
> +.albumElement {
> +    background-color:#b0c4de;
> +}
>
>
>