First and foremost, I'm really enjoying UIZE and have made several
successful implementations into the Montana Department of Corrections
web application OMIS (Offender Management Information System).
We've used the UIZE framework to publish OMIS 2.0, which includes the
customization of an Icon bar. In order to accomplish this, I would
love to use the Uize.Collection.Dynamic widget to let users build
their icon bar. It's seriously the perfect tool for the job!
However, I can't seem to get the delete to work when using:
var page = window.page = new Uize.Widget.Page;
It works great when I use the example page. I've researched the issue
and debugged it some, and think it's somewhere in the confirm.dialog
js. When doing some more research I stumbled across this group and
figured it would be worth a shot to just ask yah!
Any assistance would be greatly appreciated by me, and several hundred
web app users!
Jason
Jason
--
UIZE JavaScript Framework...
...OFFICIAL WEB SITE: http://www.uize.com
...COOL UIZE SWAG: http://www.zazzle.com/uize_merch?rf=238804607086393908
UIZE JavaScript Framework Google Group...
...WEB SITE: http://groups.google.com/group/uize?hl=en
...TO POST: email to ui...@googlegroups.com
...TO UNSUBSCRIBE: email to uize-uns...@googlegroups.com
Ben,
Thanks for the response!
Here's the code in our jsp that is not working currently...
Uize.module ({
required:[
'Uize.Widget.Page',
'Uize.Widget.Collection.Dynamic',
'Uize.Widget.CollectionItem',
'Uize.Templates.Collection',
'Uize.Templates.CollectionItem',
'Uize.OmisIconBarImages'
],
builder:function () {
/*** create the example page widget ***/
/*** add the Uize.Widget.Bar.Slider child widget ***/
var collection = page.addChild (
'collection',
Uize.Widget.Collection.Dynamic,
{
built:false,
html:Uize.Templates.Collection,
itemWidgetClass:Uize.Widget.CollectionItem,
itemWidgetProperties:{
html:Uize.Templates.CollectionItem,
cssClassBase:'collectionItem',
cssClassActive:'collectionItemActive',
cssClassOver:'collectionItemOver',
previewClickAction:'Select'
},
dragToReorder:true,
makeNewlyAddedSelected:false,
localized:{
draggingToReorderSingular:'Moving one item.',
draggingToReorderPlural:'Moving {totalItems} items.',
removeItemConfirmation:'Are you sure you would like to
remove this image?',
removeItemsConfirmation:'Are you sure you would like to
remove the {0} selected images?',
removeItemConfirmationTitle:'Remove Image?',
removeItemsConfirmationTitle:'Remove Images?'
}
}
);
/*** wire up the page widget ***/
page.wireUi ();
/*** add initial items ***/
var
items = [],
photos = Uize.OmisIconBarImages()
;
for (var photoNo = -1, photosLength = photos.length; ++photoNo <
photosLength;) {
var photo = photos [photoNo];
items.push ({
title:photo.title,
previewUrl:photo.image.replace ('max_dim=500','max_dim=105')
})
}
collection.add (items);
}
});
The only thing I really changed there was Uize.SampleImages () to
Uize.OmisIconBarImages ()
The delete will not work with the above code set...
I can get it to work in a play folder using the sample page
below......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Collection | JavaScript Examples | UIZE JavaScript
Framework</title>
<meta name="keywords" content="featured drag-and-drop ipad touch
widget Uize.Widget.Collection.Dynamic"/>
<meta name="description" content="See an example of a dynamic grid
of images, where you can select one or more, drag-and-drop to
rearrange, remove, select all, clear selection, etc."/>
<link rel="alternate" type="application/rss+xml" title="UIZE
JavaScript Framework - Latest News" href="http://www.uize.com/latest-
news.rss"/>
<link rel="stylesheet" href="css/page.css"/>
<link rel="stylesheet" href="css/page.example.css"/>
<link rel="stylesheet" href="css/widget.collection.css"/>
<link rel="stylesheet" href="css/widget.collectionitem.css"/>
<link rel="stylesheet" href="css/widget.dialog.css"/>
<link rel="stylesheet" href="css/widget.dialog.confirm.css"/>
</head>
<body>
<script type="text/javascript" src="js/Uize.js"></script>
<h1 class="document-title">
<a id="page-homeLink" href="../index.html" title="UIZE JavaScript
Framework home"></a>
<a href="../javascript-examples.html" class="breadcrumb
breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
Dynamic Collection
<div id="page-actions" class="pageActions">
<a href="source-code/collection-dynamic.html"
class="buttonLink">SOURCE</a>
</div>
</h1>
<div class="main">
<!-- explanation copy -->
<div class="explanation">
<p>In this example, an instance of the <a href="../reference/
Uize.Widget.Collection.Dynamic.html"><code>Uize.Widget.Collection.Dynamic</
code></a> widget class is being used to wire up an editable grid of
photos. You can select items in the grid by clicking on them. You can
make a non-contiguous selection by ctrl-clicking on items. You can
make a range selection by clicking on one item and then shift-clicking
on another. Use the "<b>SELECT NONE</b>" button above the grid to
clear a selection, or use the "<b>SELECT ALL</b>" button to select all
the items. With some items selected, click the "<b>REMOVE</b>" button
to remove the selected items. Also with a selection, click-and-drag to
reposition the selected items within the collection.</p>
<p>Each item in the grid utilizes the <a href="../reference/
Uize.Widget.CollectionItem.html"><code>Uize.Widget.CollectionItem</
code></a> widget class. This limited utilization of the
<code>Uize.Widget.Collection.Dynamic</code> class is not connected up
to an application, so there are no consequences to reordering or
removing items. To restore the grid contents, just <a href="collection-
dynamic.html">reload the page</a>.</p>
</div>
<!-- shell for dynamically generated photo grid -->
<div id="page_collection-shell"></div>
<div style="clear:left;"></div>
</div>
<!-- JavaScript code to make the dynamic collection "come alive" -->
<script type="text/javascript">
Uize.module ({
required:[
'UizeDotCom.Page.Example.library',
'UizeDotCom.Page.Example',
'Uize.Widget.Collection.Dynamic',
'Uize.Widget.CollectionItem',
'Uize.Templates.Collection',
'Uize.Templates.CollectionItem',
'Uize.OmisIconBarImages'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = new UizeDotCom.Page.Example;
/*** add the Uize.Widget.Bar.Slider child widget ***/
var collection = page.addChild (
'collection',
Uize.Widget.Collection.Dynamic,
{
built:false,
html:Uize.Templates.Collection,
itemWidgetClass:Uize.Widget.CollectionItem,
itemWidgetProperties:{
html:Uize.Templates.CollectionItem,
cssClassBase:'collectionItem',
cssClassActive:'collectionItemActive',
cssClassOver:'collectionItemOver',
previewClickAction:'Select'
},
dragToReorder:true,
makeNewlyAddedSelected:false,
localized:{
draggingToReorderSingular:'Moving one item.',
draggingToReorderPlural:'Moving {totalItems} items.',
removeItemConfirmation:'Are you sure you would like to
remove this image?',
removeItemsConfirmation:'Are you sure you would like to
remove the {0} selected images?',
removeItemConfirmationTitle:'Remove Image?',
removeItemsConfirmationTitle:'Remove Images?'
}
}
);
/*** wire up the page widget ***/
page.wireUi ();
/*** add initial items ***/
var
items = [],
photos = Uize.OmisIconBarImages()
;
for (var photoNo = -1, photosLength = photos.length; ++photoNo <
photosLength;) {
var photo = photos [photoNo];
items.push ({
title:photo.title,
previewUrl:photo.image.replace ('max_dim=500','max_dim=105')
})
}
collection.add (items);
}
});
</script>
</body>
</html>
Thanks for the response!
Here's the code in our jsp that is not working currently...
Uize.module ({
required:[
'Uize.Widget.Page',
'Uize.Widget.Collection.Dynamic',
'Uize.Widget.CollectionItem',
'Uize.Templates.Collection',
'Uize.Templates.CollectionItem',
'Uize.OmisIconBarImages'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = new Uize.Widget.Page;
/*** add the Uize.Widget.Bar.Slider child widget ***/
When I just set up a folder on my desktop that contains the UIZE
example framework and a test.html page that uses OmisIconBarImages()
the delete functions perfectly :)
When I actually import the functionality (No changes except changing
from widget.page.example to widget.page) into our web app, the delete
functions do not work.
Here's the markup for the OmisIconBarImages()
/*
UIZE Web Site 2011-02-20
http:/www.uize.com/reference/UizeDotCom.TestDataPhotos.html
Available under MIT License or GNU General Public License -- http:/
www.uize.com/license.html
*/
Uize.module(
{name:'Uize.OmisIconBarImages',
builder:function(){var _a;
return function(_b){if(_a&& !_b)
return _a;
var _c=[
{title:'Offender Search',
category:'Profile',
image:'../images/offenderSearch.png',
description:'Offender Search',
rating:1},
{title:'Search Results',
category:'Profile',
image:'../images/offenderSearchResults.png',
description:'',
rating:1},
{title:'Profile',
category:'Profile',
image:'../images/offenderProfile.png',
description:'',
rating:1},
{title:'Address',
category:'Profile',
image:'../images/addressProfile.png',
description:'',
rating:1},
{title:'Alerts',
category:'Profile',
image:'../images/genericAlert.png',
description:'',
rating:1},
{title:'Risk Assessments',
category:'Profile',
image:'../images/riskAssessmentProfile.png',
description:'',
rating:1},
{title:'Basic Info',
category:'Profile',
image:'../images/basicInfoProfile.png',
description:'',
rating:1},
{title:'Birth Dates',
category:'Profile',
image:'../images/birthDatesProfile.png',
description:'',
rating:1},
{title:'Case Plan',
category:'Profile',
image:'../images/casePlan.png',
description:'',
rating:1},
{title:'Cautions',
category:'Profile',
image:'../images/genericCaution.png',
description:'',
rating:1},
{title:'Chonological Notes',
category:'Profile',
image:'../images/chronologicalNotes.png',
description:'',
rating:1},
{title:'Commit Status',
category:'Profile',
image:'../images/commitStatusProfile.png',
description:'',
rating:1},
{title:'Correctional Status',
category:'Profile',
image:'../images/correctionalStatusProfile.png',
description:'',
rating:1},
{title:'Court Case(s)',
category:'Profile',
image:'../images/courtCaseProfile.png',
description:'',
rating:1},
{title:'Current Offense(s)',
category:'Profile',
image:'../images/currentOffensesProfile.png',
description:'',
rating:1},
{title:'DNA',
category:'Profile',
image:'../images/dnaProfile.png',
description:'',
rating:1},
{title:'Education',
category:'Profile',
image:'../images/educationProfile.png',
description:'',
rating:1},
{title:'Employment',
category:'Profile',
image:'../images/employmentProfile.png',
description:'',
rating:1},
{title:'Family',
category:'Profile',
image:'../images/familyProfile.png',
description:'',
rating:1},
{title:'Gang',
category:'Profile',
image:'../images/gangProfile.png',
description:'',
rating:1},
{title:'Location',
category:'Profile',
image:'../images/locationProfile.png',
description:'',
rating:1},
{title:'Military',
category:'Profile',
image:'../images/offenderMilitary.png',
description:'',
rating:1},
{title:'Names (AKA\'s)',
category:'Profile',
image:'../images/nameProfile.png',
description:'',
rating:1},
{title:'Numbers',
category:'Profile',
image:'../images/numbersProfile.png',
description:'',
rating:1},
{title:'Officers',
category:'Profile',
image:'../images/officerProfile.png',
description:'',
rating:1},
{title:'Other Photos',
category:'Profile',
image:'../images/otherPhotosProfile.png',
description:'',
rating:1},
{title:'Registered Victims',
category:'Profile',
image:'../images/registeredVictimsProfile.png',
description:'',
rating:1},
{title:'Scars and Marks',
category:'Profile',
image:'../images/scarsMarksProfile.png',
description:'',
rating:1},
{title:'Substance Tests',
category:'Profile',
image:'../images/substanceTestProfile.png',
description:'',
rating:1},
{title:'Tier Designation',
category:'Profile',
image:'../images/tierDesignationProfile.png',
description:'',
rating:1},
{title:'Vehicles',
category:'Profile',
image:'../images/vehicleProfile.png',
description:'',
rating:1}
];
return _b?_c:(_a=_c);};}});
I'll send some pictures to you via e-mail.