Suppose I should also give an example of how to use it ;)
var list = new custom.ui.comps.TileView();
this.add(list); // assuming your layout will size this
for (var i = 0; i < 10; i++)
{
var item = new custom.ui.comps.TileViewItem("File " + i + ".png",
"custom/icon/48/file.png", "png file", "520k");
list.add(item); } There is also a screenshot attached. Matthew Gregory wrote:
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=/
<<inline: tileview.JPG>>
------------------------------------------------------------------------- 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
