Hi,
(assumung you're using 0.8)
I've written something similar to this. My basic idea is to use
qx.ui.form.list with a few modifications, mainly using a flowlayout
(you'll have to get this from qooxdoo-contrib).
Here are a couple of classes for this which are still work in progress.
This is currently a bug with scrolling but this will be fixed in 0.8.1
Let me know how you get on :)
Matt
################# begin TileView.js ###########################
qx.Class.define("custom.ui.comps.TileView",
{
extend : qx.ui.form.List,
construct : function()
{
this.base(arguments);
var flow = new flowlayout.FlowLayout();
this.getChildrenContainer().setLayout(flow);
this.getChildrenContainer().setHeight(800);
},
members :
{
_onAddChild : function(e)
{
var el = e.getData();
el.set(
{
width : 250,
minWidth : 250,
maxWidth : 250
});
this.base(arguments, e);
}
}
});
################# end TileView.js ###########################
################# begin TileViewItem.js ###########################
qx.Class.define("custom.ui.comps.TileViewItem",
{
extend : qx.ui.container.Composite,
construct : function(title, icon, description, status)
{
this.base(arguments, new qx.ui.layout.HBox(10));
var iconLayout = new qx.ui.layout.Canvas();
var iconCont = new qx.ui.container.Composite(iconLayout);
iconCont.add(this._icon = new qx.ui.basic.Image(icon));
var labelLayout = new qx.ui.layout.VBox(2);
var labelCont = new qx.ui.container.Composite(labelLayout);
labelCont.setLayoutProperties({flex:1});
labelCont.add(this._title = new qx.ui.basic.Label(title));
labelCont.add(this._description = new qx.ui.basic.Label(description));
labelCont.add(this._status = new qx.ui.basic.Label(status));
iconCont.setAnonymous(true);
labelCont.setAnonymous(true);
this._icon.setAnonymous(true);
this._title.setAnonymous(true);
this._title.setFont("bold");
this._description.setAnonymous(true);
this._status.setAnonymous(true);
this.add(iconCont);
this.add(labelCont);
},
events:
{
/** (Fired by [EMAIL PROTECTED] qx.ui.form.List}) */
"action" : "qx.event.type.Event"
},
properties :
{
appearance :
{
refine : true,
init : "listitem"
},
/** The assigned qx.ui.form.RadioGroup which handles the switching
between registered buttons */
manager :
{
check : "qx.ui.form.RadioGroup",
nullable : true,
apply : "_applyManager"
},
/** Fires a "changeValue" (qx.event.type.Data) event */
value :
{
nullable : true,
event : "changeValue"
},
title :
{
check : "String",
apply : "_applyTitle"
},
description :
{
check : "String",
apply : "_applyDescription"
},
statusText :
{
check : "String",
apply : "_applyStatusText"
}
},
members :
{
_icon : null,
_title : null,
_description : null,
_status : null,
_applyTitle : function(value)
{
this._description.setContent(value);
},
_applyDescription : function(value)
{
this._description.setContent(value);
},
_applyStatusText : function(value)
{
this._status.setContent(value);
},
_applyManager : function(value, old)
{
if (old)
old.remove(this);
if (value)
value.add(this);
}
}
});
################# end TileViewItem.js ###########################
Jean-Baptiste BRIAUD - Novlog wrote:
> Hi,
>
> I'm coding a window that will show files (like Finder of Windows file
> system explorer).
>
> The current version use a table, each line is a file and column show
> file attributes (could be size, ...).
> This is like the details view on Windows OS.
>
> I would like to have another view with icon instead of table's lines
> but I have no idea how to start !
>
> What widget should I use knowing that there could be lots of file
> eventually ... ?
> I'm already inside qx.ui.window.Window.
> I thought I might use Window without title bar and just one icon
> inside, but I'm quite sure its probably a bad idea to use Window
> inside Window...
>
> I don't want that end-user could move file like in real file system to
> void storing all positions.
> I would like to allow drag'n drop between opened window (to move/copy
> file) and in some cases, allow file to be reordered by drag'n drop.
>
> Any ideas welcome :-)
>
> -------------------------------------------------------------------------
> This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
> Build the coolest Linux based applications with Moblin SDK & win great prizes
> Grand prize is a trip for two to an Open Source event anywhere in the world
> http://moblin-contest.org/redirect.php?banner_id=100&url=/
-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
