locked
StorageDataSource files to html child elements (Javascript/html windows store app)

    Question

  • So i am not using listview to display images (i really would like drag and drop in my app its 2012) in my javascript/html windows store app and will be using a jquery plugin...heres where i have an issue...i can't find anything on the msdn about using the storagedatasource data to display in anything other that the listview/gridview/flipview....only tutorials on how to display the data in those views...i am working on displaying my data in a jquery plugin (most likely something like gridster) so i can have the functionality i want my app to have (i didnt think drag and drop would be non-existent making a windows storeapp with web programming) without learning a whole new language/s...I read the tutorials and if i were to display the data in listview...i would have a make an html template to use for each item...could it be the same if i am displaying it in not listview but jquery?  Do i create an array of data from a folder like picturefolder and then that array gets placed in a li tag? am i making sense? 
    • Edited by -orYan- Tuesday, December 4, 2012 4:42 AM
    Monday, December 3, 2012 9:29 PM

All replies

  • Hi,

    Which jquery plugin you are using? And also post the code by now.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, December 4, 2012 3:36 AM
  • Sorry I am using gridster..i am referencing a bunch of js files...in the source of this fiddle you can see the references..i can post it all here but its a lot...

    here is the html tho

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>App3</title>
    
        <!-- WinJS references -->
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <!-- App3 references -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
    
    	<!-- Gridster references -->
    	<script src="/js/mootools-core-1.4.5-nocompat.js"></script>
    	<link href="/css/normalize.css" rel="stylesheet" />
    	<link href="/css/result-light.css" rel="stylesheet" />
    	<script src="/js/jquery-1.8.2.js"></script>
    	<script src="/js/jquery-ui.js"></script>
    	<link href="/css/jquery-ui.css" rel="stylesheet" />
    	<link href="/css/jquery.gridster.min.css" rel="stylesheet" />
    	<script src="/js/jquery.gridster.js"></script> 
    
    	<script type='text/javascript'>//<![CDATA[ 
    window.addEvent('load', function() {
    var layout;
    var grid_size = 100;
    var grid_margin = 5;
    var block_params = {
        max_width: 6,
        max_height: 2,
    };
    $(function() {
    
        layout = $('.layouts_grid ul').gridster({
            widget_margins: [grid_margin, grid_margin],
            widget_base_dimensions: [grid_size, grid_size],
            serialize_params: function($w, wgd) {
                return {
                    x: wgd.col,
                    y: wgd.row,
                    width: wgd.size_x,
                    height: wgd.size_y,
                    id: $($w).attr('data-id'),
                    name: $($w).find('.block_name').html(),
                };
            },
            min_rows: block_params.max_height
        }).data('gridster');
    
        $('.layout_block').resizable({
            grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
            animate: false,
            minWidth: grid_size,
            minHeight: grid_size,
            containment: '#layouts_grid ul',
            autoHide: true,
            stop: function(event, ui) {
                var resized = $(this);
                setTimeout(function() {
                    resizeBlock(resized);
                }, 300);
            }
        });
    
        $('.ui-resizable-handle').hover(function() {
            layout.disable();
        }, function() {
    
            layout.enable();
        });
    
        function resizeBlock(elmObj) {
    
            var elmObj = $(elmObj);
            var w = elmObj.width() - grid_size;
            var h = elmObj.height() - grid_size;
    
            for (var grid_w = 1; w > 0; w -= (grid_size + (grid_margin * 2))) {
    
                grid_w++;
            }
    
            for (var grid_h = 1; h > 0; h -= (grid_size + (grid_margin * 2))) {
    
                grid_h++;
            }
    
            layout.resize_widget(elmObj, grid_w, grid_h);
        }
    });
    });//]]>  
    
    </script>
    </head>
    <body>
    <img id="gif" src="/images/testgif1.gif" style="opacity: 0">
    <div class="layouts_grid" id="layouts_grid">
    <ul>
    <li class="layout_block" data-id="7" data-row="1" data-col="1" data-sizex="1" data-sizey="1" style="background-color: #D24726;">
    <div class="remove_element">X</div>
    <div class="info">
    <span class="block_name">Logo</span>
    </div>    
    </li>
    <li class="layout_block" data-id="2" data-row="1" data-col="2" data-sizex="5" data-sizey="1" style="background-color: #15992A;">
    <div class="remove_element">X</div>
    <div class="info">
    <span class="block_name">Ads top</span>
    </div>    
    </li>
    <li class="layout_block" data-id="13" data-row="2" data-col="1" data-sizex="4" data-sizey="1" style="background-color: #B60000;">
    <div class="remove_element">X</div>
    <div class="info">
    <span class="block_name">Ads small</span>
    </div>    
    </li>
    <li class="layout_block" data-id="5" data-row="2" data-col="5" data-sizex="2" data-sizey="3" style="background-color: #666666;">
    <div class="remove_element">X</div>
    <div class="info">
    <span class="block_name">Ads right</span>
    </div>    
    </li>
    <li class="layout_block" data-id="1" data-row="3" data-col="1" data-sizex="4" data-sizey="2" style="background-color: #333333;">
    <div class="remove_element">X</div>
    <div class="info">
    <span class="block_name">Main</span>
    </div>    
    </li>
    <li class="layout_block" data-id="6" data-row="5" data-col="1" data-sizex="4" data-sizey="3" style="background-color: #008299;">
    <div class="remove_element">X</div>
    <div class="info">
    <span class="block_name">User photos</span>
    </div>    
    </li>
    <li class="layout_block" data-id="3" data-row="5" data-col="5" data-sizex="2" data-sizey="3" style="background-color: #008A00;">
    <div class="remove_element">X</div>
    <div class="info">
    <span class="block_name">Feed</span>
    </div>    
    </li>
    <li class="layout_block" data-id="8" data-row="8" data-col="1" data-sizex="6" data-sizey="1" style="background-color: #FE7C22;">
    <div class="remove_element">X</div>
    <div class="info">
    <span class="block_name">Ads middle</span>
    </div>    
    </li>
        <li class="layout_block" data-id="8" data-row="8" data-col="1" data-sizex="6" data-sizey="1" style="background-color: #FE7C22;">
    <div class="remove_element">X</div>
    <div class="info">
    <span class="block_name">Ads middle</span>
    </div>    
    </li>
    <li class="layout_block" data-id="3" data-row="5" data-col="5" data-sizex="2" data-sizey="3" style="background-color: #008A00;">
    <div class="remove_element">X</div>
    <div class="info">
    <span class="block_name">Feed</span>
    </div>    
    </li>
    <li class="layout_block" data-id="3" data-row="5" data-col="5" data-sizex="2" data-sizey="3" style="background-color: #008A00;">
    <div class="remove_element">X</div>
    <div class="info">
    <span class="block_name">Feed</span>
    </div>    
    </li>
    <li class="layout_block" data-id="3" data-row="5" data-col="5" data-sizex="2" data-sizey="3" style="background-color: #008A00;">
    <div class="remove_element">X</div>
    <div class="info">
    <span class="block_name">Feed</span>
    </div>    
    </li>
    <li class="layout_block" data-id="3" data-row="5" data-col="5" data-sizex="2" data-sizey="3" style="background-color: #008A00;">
    <div class="remove_element">X</div>
    <div class="info">
    <span class="block_name">Feed</span>
    </div>    
    </li>
    <li class="layout_block" data-id="3" data-row="5" data-col="5" data-sizex="4" data-sizey="3" style="background-color: #008A00;">
    

    <div class="remove_element">X</div> <div class="info"> <span class="block_name">Feed</span>

    </div>

    </li> <li class="layout_block" data-id="3" data-row="5" data-col="5" data-sizex="2" data-sizey="3" style="background-color: #008A00;"> <div class="remove_element">X</div> <div class="info"> <span class="block_name">Feed</span> </div> </li> <li class="layout_block" data-id="3" data-row="5" data-col="5" data-sizex="2" data-sizey="3" style="background-color: #008A00;"> <div class="remove_element">X</div> <div class="info"> <span class="block_name">Feed</span> </div> </li> <li class="layout_block" data-id="3" data-row="5" data-col="5" data-sizex="2" data-sizey="3" style="background-color: #008A00;"> <div class="remove_element">X</div> <div class="info"> <span class="block_name">Feed</span> </div> </li> <li class="layout_block" data-id="3" data-row="5" data-col="5" data-sizex="2" data-sizey="3" style="background-color: #008A00;"> <div class="remove_element">X</div> <div class="info"> <span class="block_name">Feed</span> </div> </li><li class="layout_block" data-id="3" data-row="5" data-col="5" data-sizex="2" data-sizey="3" style="background-color: #008A00;"> <div class="remove_element">X</div> <div class="info"> <span class="block_name">Feed</span> </div> </li> <li class="layout_block" data-id="3" data-row="5" data-col="5" data-sizex="2" data-sizey="3" style="background-color: #008A00;"> <div class="remove_element">X</div> <div class="info"> <span class="block_name">Feed</span> </div> </li> </ul> </div>​ <script> </body> </html>

    Tuesday, December 4, 2012 4:40 AM
  • sorry i edited my question, i didnt realize all the div boxes were in <li> tags...
    Tuesday, December 4, 2012 4:43 AM
  • Hi,

    I think you can't use storagedatasource to do that. There is no better method except gridster.add_widget, and put that in a foreach function.

    gridster.add_widget('<li class="new">The HTML of the widget...</li>', 2, 1);


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Friday, December 7, 2012 5:56 AM
  • ohh okay i see...i was reading this page http://msdn.microsoft.com/en-us/library/windows/apps/hh967755.aspx, and it looks like it has the information i need...

    is this the function i would be using to get the local files?

    outputHeader(picturesLibrary.name, items.size); items.forEach(function (item) { if (item.isOfType(Windows.Storage.StorageItemTypes.folder)) { output(id(picturesLibrary.name), item.name + "\\"); } else { output(id(picturesLibrary.name), item.fileName); } });

    or something of that sort? and do whatever I want to the "items"? display them as children

    Friday, December 7, 2012 3:22 PM