Getting size of array in XTemplate - gxt

First of all, I'm working with GXT 2.2.5 and GWT 2.3.
I have a ListView that displays the items generated by a user. I want it to display the items already entered, or a single row that says "No Items Attached" if the store is empty.
I figure I could use the "tpl if" tag in the template, but how can I detemine the size of the store for comparison?
In other words, what value do I use for "size" in the following?
<tpl if="size == 0">
<p>No Items attached</p>
</tpl>
<tpl if="size > 0">
<tpl for =".">
...
</tpl>
</tpl>
Thanks!

GXT 2 XTemplates are based on JavaScript, so instead of keying off of size, use length, the name of the property that holds the size of a JavaScript array. In GXT 3, XTemplates were rewritten to work with any Java object, so expect the size method like you've written here.
Modified template from http://www.sencha.com/examples-2/#listview :
private native String getTemplate() /*-{
return ['<tpl if="length == 0">',
'nothing to show',
'</tpl>',
'<tpl if="length != 0">',
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{path}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>',
'</tpl>'
].join("");
}-*/;

Related

Can I use a Jade if conditional to change a style class value? Using flash variables

Currently I get my message with no problem when the login if it isnt successfull, but I want to display a div if theres any message (for this time just the error message)
This is the code
div(class='formPosSize')
form(action='/auth/login' method='post' autocomplete='off')
fieldset
legend.legend Login
.input
input(name='username', placeholder='Email', required='')
span
i.fa.fa-envelope-o
.input
input(type='password',name='password', placeholder='Password', required='')
span
i.fa.fa-lock
button.submit(type='submit')
i.fa.fa-long-arrow-right
.feedback(class=message!=="undefined" ? "" : "feederror")
if(message)
| #{message}
if theres any message at all, I would like to change the current feedback style variable "display: none and opacity : 0" to "display: block and opacity : 1" a
the feedback class is just a rectangle, I want the message value in there and showing it if it does exist
i tried this too, but it didnt work
if(message)
.feedback(class=feederror)
| #{message}
I have another class called "feederror" that is the same as feedback, but the difference is with opacity and display..
I fixed it at last!
One afternoon lost, but victory!
whenever you get the "message" variable its better to check its lenght rather than check if exist, or is empty, or if true:
this code:
if (message.length > 0)
div.feederror
div #{message}
Generates this if the message variable has anything on it:
<div class="feederror">
<div>Usuario o contraseƱa incorrectas.</div>
</div>
And it does not generate anything if message does not have anything or does not exist.
This helps when you need to show an already designed div with its class (in my code is feederror) containing the message variable from flash.

Visual Studio Coded UI: Select HTML Element by CSS Selector

I have run into a problem selecting an item within Microsoft's CodedUI framework. I have a page full of items that can be added/removed via selecting a checkbox. The checkboxes do not have unique id on them, and I am having trouble selecting other than the first item when looking for a particular Tag/class combination. Is there some trick to doing this that isn't immediately obvious.
There are a couple different options here:
1. You could select the object by selecting the item related to it
<div id="parent">
<label id="checkbox1234">MyCheckBox</label>
<input checked="false"></input>
</div>
... could be selected as:
HtmlDiv parent = new HtmlDiv(browserWindow);
parent.SearchProperties["innerText"] = "MyCheckBox";
HtmlCheckBox target = new HtmlCheckbox(parent);
target.SearchProperties["TagName"] = "INPUT";
return target;
or
HtmlLabel sibling = new HtmlLabel(browserWindow);
sibling.SearchProperties["id"] = "checkbox1234";
UITestControlCollection col = sibling.GetParent().GetChildren();
foreach (UITestControl control in col)
{
if (control.ControlType.ToString().Equals("HtmlCheckBox"))
{
return (HtmlCheckBox)control;
}
}
You can use these test utilities created by Gautam Goenka. They worked wonders for me as far as identifying the content of an object and using it for assertions. Still, if you don't have any meaningful way of identifying the objects based on content, this won't help you either. When all else fails, add some useful identifying properties to the HTML.

Alloy user interface (access a tag value)

I'm working with liferay portal 6.2. And I want to get the value of the text in a tag with alloy user interface.
exemple:
<div>
<p> Paragraph </p>
"value"
</div>
the desired result is: value
please help.
AlloyUI, being an extension of YUI3, uses get/set methods to access and manipulate the properties/attributes of the object (YUI3 Node / AlloyUI Node) that is returned when looking up elements from the page.
Some examples can be reviewed in this documentation as well as this documentation.
In general you'll need something unique (i.e. id, css class) to the div in order to fetch only that element. Once you have that element, divNode.get('text') will give you all of the text within the element. There is not a means to easily "skip" the paragraph contents within the div without the value being contained within some other markup. If you have control over the markup and can do this, that would be the best option. Otherwise you are left to using the replace function to strip out the paragraph contents from the text.
<script>
AUI().use('aui-base', function(A) {
var paragraphText = A.one('#myDiv>p').get('text');
var divText = A.one('#myDiv').get('text')
var onlyValue = divText.replace(paragraphText, "").trim()
console.log(onlyValue)
})
</script>

How can I know an object is not visible when any of parent object is not visible in an HTML page using java script?

Let say I have an text box in an HTML page as follows.
<DIV style = "display:none;">
<DIV style = "display:inline;">
<INPUT type = "text" style = "display:inline;">
</DIV>
</DIV>
In this case, the text box will not be visible to the user. How can I identify that text is not currently visible to the user.
Dont say that, I should travel up to the parent objects to find out if they are set to not visible. I have bunch of fields to be validated like this and this would reduce the application performance.
Is there any other way to find out as this object is not visible to the user?
Thanks in advance.
If you don't need it to be pure JavaScript I would suggest using jQuery. Using the :visible or :hidden selector will accomplish what you want:
if ( $('yourElement').is(":hidden") ) {
// The element is not visible
}
http://api.jquery.com/visible-selector/
http://api.jquery.com/hidden-selector/
If you need pure JavaScript and you don't want to travel up through every ancestor element, you could try checking the element's offsetWidth and offsetHeight. If the element is hidden because of an ancestor element, they should both be 0. Note: I've always used jQuery for this, so I don't know how reliable this is.
var yourElement = document.getElementById('yourElementsId');
if ( yourElement.offsetWidth == 0 && yourElement.offsetHeight == 0) {
// The element is not visible
}
https://developer.mozilla.org/en-US/docs/DOM/element.offsetWidth
https://developer.mozilla.org/en-US/docs/DOM/element.offsetHeight

how to populate a javascript array from a Notes dropdown field

i have a notes dropdown field. i need to get its 'options' list to create an array in javascript.
If your dropdown field's value list is being computed in a Domino formula (like a DBColumn or DBLookup), then you can build the javascript array the same way, using an approach like this:
On your form, add the following - all set as pass-through HTML:
<script>
var arValues, i;
i=0;
[COMPUTED-FIELD]
</script>
Add a computed field, set to be pass-through HTML and set with a multi-value separator of newline. Have computed field have a formula something like:
list:=#DBLookup (""; ""; ...)
#if(#iserror(list); ""; ("arValues[i++]='" + list) + '';");
The result should be soemthing written back to the browser like:
<script>
var arValues, i;
i=0;
arValues[i++]='VAL 1';
arValues[i++]='VAL 2';
...
</script>
You could also do this from Javascript client-side instead. Be sure to give the dropdown an ID in Domino (on html tab), then in Javascript, document.getElementById("YOUR_DROPDOWN_ID").options will be an array of objects, each with a "value" and "text" property. Depending on what you need, just use that, or run through the elements, grab each value and build your own new array.

Resources