<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<div class="moz-cite-prefix">On 01/24/2014 08:53 AM, Rodrigo
Trujillo wrote:<br>
</div>
<blockquote cite="mid:52E1B979.9040103@linux.vnet.ibm.com"
type="cite">Hi guys, <br>
<br>
I wonder if someone expert in UI can help me with my latest patch.
<br>
Actually, the patch: [PATCH V2 7/7] (WIP) Storagepool SCSI/FC:
Draft UI to allow user to select a LUN to new VM <br>
<br>
You guys will find the code some TODO's and FIXME <br>
<br>
I need to popup a window with LUN's names and allow user to select
one of them. Then retrieve this selection. I think this is not
that complicated, but I could not research deeper how to do it.
See an example below: <br>
<br>
********************************* <br>
(X) Close <br>
Select Host <br>
<br>
() Lun 1 <br>
() Lun 2 <br>
() Lun xxx <br>
<br>
---------------------------------------- <br>
________ <br>
| Select | <br>
********************************* <br>
<br>
</blockquote>
Hi Rodrigo, the general process to add a pop-up window is like:<br>
<br>
1) Add the content page, related files include HTML, JS, and CSS.<br>
<br>
2) Add a hook to trigger the window in parent page.<br>
<br>
3) Add other corresponding content including Makefile, translation,
etc.<br>
<br>
To quickly make it, you can copy existing window page file (like
guest-add.html.tmpl, guest-edit.html.tmpl, etc.) and then modify
based-on it. Here let me give you a draft code fragment.<br>
<br>
<b>create ui/pages/lun-select.html.tmpl</b><br>
<br>
<div id="lun-select-window" class="window"><br>
<form id="form-lun-select"><br>
<header><br>
<h1 class="title">$_("Select LUN")</h1><br>
<div class="close">X</div><br>
</header><br>
<div class="content"><br>
<fieldset class="lun-select-fieldset"><br>
<legend>$_("Select a Name")</legend><br>
<div id="lun-select-names"><br>
<br>
...<br>
</div><br>
</fieldset><br>
</div><br>
<footer><br>
<div class="btn-group"><br>
<button
id="lun-select-button-select">$_("Select")</button><br>
</div><br>
</footer><br>
</form><br>
</div><br>
<br>
<b>create ui/js/src/kimchi.lun_select_main.js</b><br>
<br>
kimchi.lun_select_main = function() {<br>
var lunSelectForm = $('#lun-select-form');<br>
var selectButton = $('#lun-select-button-select');<br>
<br>
kimchi.listLUNs(function(luns) {<br>
$.each(luns, function(i, lun) {<br>
// Create radio button and append it to DOM node<br>
// e.g. $('<input id="lun-name-radio-' + i + '"
type="radio" value="' + lun + '"><label for="lun-name-radio-'
+ i +'">' + lun + '</label>').appendTo('#lun-select-names')<br>
});<br>
});<br>
<br>
var submitForm = function(event) {<br>
$(selectButton).prop('disabled', true);<br>
var selected = $('input[checked="true"]', lunSelectForm).val();<br>
// Save to a kimchi scoped property<br>
kimchi.selecteLUN = selected;<br>
kimchi.window.close();<br>
event.preventDefault();<br>
};<br>
<br>
$(lunSelectForm).on('submit', submitForm);<br>
$(selectButton).on('click', submitForm);<br>
};<br>
<br>
<b>create ui/css/theme-default/lun-select.css</b><br>
<br>
/* Please refer to similar CSS files like guest-edit.css. */<br>
<br>
<b>Update ui/pages/Makefile.am</b><br>
<br>
add one line in proper position:<br>
<br>
lun-select.html.tmpl \<br>
<b><br>
</b><b>Update po file</b><br>
<br>
<b>(optional) add related i18n variables in ui/pages/i18n.html.tmpl</b><br>
<br>
<blockquote cite="mid:52E1B979.9040103@linux.vnet.ibm.com"
type="cite">Appreciate any help <br>
<br>
Regards, <br>
Rodrigo <br>
<br>
_______________________________________________ <br>
Kimchi-devel mailing list <br>
<a class="moz-txt-link-abbreviated"
href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<br>
<a class="moz-txt-link-freetext"
href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a>
<br>
<br>
</blockquote>
<br>
</body>
</html>