Using appcelerator, how do you go about inserting elements before and after specific elements. Such as
<View id='element'>Some Content</View>
Using $.element.add() the new element will be inside it but i need it to go either before or after. In simple terms is there an equivalent to .before and.after in jQuery?
Many thanks
You can use the method insertAt (docs).
If the parent view's layout is horizontal or vertial, then you'll see the children views displayed according to their array positions.
There are 2 workarounds for insert elements before the actual views:
Save the $.elements.children in a array, and unshift the new elements to the array, and add all those views in array to the $.elements;
While you adding the views, set the left or top property (depending on your design), and every time you add a new child, run a loop of the children and increase their left or top property; ex (child views with 200):
$.elements.children[0].left = 0;
$.elements.children[1].left = 200;
$.elements.children[2].left = 400;
Related
I am trying to retrieve a list of elements using XPATH and from this list I want to retrieve a child element based on classname and click it.
var rowList = XPATH1 + className;
var titleList = className + innerHTMLofChildElement;
for(var i = 0; i < titleList.length; i++) {
if(titleList[i][0] === title) {
browser.click(titleList[i][0]); //I don't know what to do inside the click function
}
}
I had a similar implementation perhaps to what you are trying to do, however my implementation is perhaps more complex due to using CSS selectors rather than XPath. I'm certain this is not optimized, and can most likely be improved upon.
This uses the methods elementIdText() and elementIdClick() from WebdriverIO to work with the "Text Values" of the Web JSON Elements and then click the intended Element after matching what you're looking for.
http://webdriver.io/api/protocol/elementIdText.html
http://webdriver.io/api/protocol/elementIdClick.html
Step 1 - Find all your potential elements you want to work with:
// Elements Query to return Elements matching Selector (titles) as JSON Web Elements.
// Also `browser.elements('<selector>')`
titles = browser.$$('<XPath or CSS selector>')
Step 2 - Cycle through the Elements stripping out the InnerHTML or Text Values and pushing it into a separate Array:
// Create an Array of Titles
var titlesTextArray = [];
titles.forEach(function(elem) {
// Push all found element's Text values (titles) to the titlesTextArray
titlesTextArray.push(browser.elementIdText(elem.value.ELEMENT))
})
Step 3 - Cycle through the Array of Title Texts Values to find what you're looking for. Use elementIdClick() function to click your desired value:
//Loop through the titleTexts array looking for matching text to the desired title.
for (var i = 0; i < titleTextsArray.length; i++) {
if (titleTextsArray[i].value === title) {
// Found a match - Click the corresponding element that
// it belongs to that was found above in the Titles
browser.elementIdClick(titles[i].value.ELEMENT)
}
}
I wrapped all of this into a function in which i provided the intended Text (in your case a particular title) I wanted to search for. Hope this helps!
I don't know node.js, but in Java you should achieve your goal by:
titleList[i].findElementBy(By.className("classToFind"))
assuming titleList[i] is an element on list you want to get child elements from
If I have a parent-child-dimension, whose data I show in the IcCube/PivotTable and I want to show the leaves only (with descendants([categories].[categories].[All-M],,leaves)), those leaves are shown hierarchically. So a level5 leave of one category is suddenly the parent of a level6 leave of the next category.
Is there a way to "flatten" this tree, so that those leaves are all shown on one level and not sorted in the tree wrongly?
EDIT:
Here is a query:
SELECT
NON EMPTY { [Measures].[group_quality] } ON COLUMNS,
NON EMPTY { TopCount(descendants([categories].[categories].[Level$0].[Portal],,leaves),30,[Measures].[revenue_potential]) } ON ROWS
FROM [Cube]
All categories in the picture are leaves, so none of them has any children.
As workaround for that case you can use simple CSS dirty-hack.
1) First of all under Widget option tab of your widget you should set Hide icons to yes.
2) After this, to avoid collision with other Pivot Tables, add custom CSS class
3) Add these styles to Report CSS.
.pt-flattened .pt-hcont{
margin-left: 0 !important
}
So i'm trying to make a map from an .svg file I produced with Illustrator because it's a map of the Netherlands with not so straightforward regions.
All the regions have their own #ID.
Now i'm trying to color each region according to their value in the dataset. I can force color on the regions by CSS ive done so on one region but thats obviously not good solution.
If I for example try to select(#id) and then change the .attr("fill","red"); it doesnt work.
How would I update region colors by id using d3.js according to the d[1] value in the dataset ?
Files: https://gist.github.com/gordonhatusupy/9466794
Live link: http://www.gordonjakob.me/regio_map/
The problem is that your Illustrator file already specifies fill colours on the individual <path> elements, and your id values are for parent <g> elements. Child elements inherit styles from parents, but only if the child doesn't have values of its own.
There are a couple things you could do to change it:
Change the Illustrator file so that the paths have no fill. Then they will inherit a fill colour set on the parent.
Select the paths directly, using d3.selectAll("g#id path") or d3.select("g#id").selectAll("path"); either version will select all <path> elements that are descendents of the <g> elment with id "id". Then you can set the fill attribute directly to over-write the value from Illustrator.
As discussed in the comments to the main question, if you want to take this a step further and actually join the data to the elements for future reference (e.g., in an event handler), the easiest way is to loop through your dataset, select each element, then use the .datum(newData) method to attach the data to each element:
dataset.forEach(function(d){ //d is of form [id,value]
d3.select("g#"+d[0]) //select the group matching the id
.datum(d) //attach this data for future reference
.selectAll("path, polygon") //grab the shapes
.datum(d) //attach the data directly to *each* shape for future reference
.attr("fill", colour(d[1]) ); //colour based on the data
});
http://jsfiddle.net/ybAj5/6/
If you want to be able to select all the top-level <g> elements in the future, I would suggest also giving them a class, so you can select them with, for example, d3.select("g.region"). For example:
dataset.forEach(function(d){ //d is of form [id,value]
d3.select("g#"+d[0]) //select the group matching the id
.datum(d) //attach this data for future reference
.classed("region", true) //add a class, without erasing any existing classes
.selectAll("path, polygon") //grab the shapes
.datum(d) //attach the data directly to *each* shape for future reference
.attr("fill", colour(d[1]) ); //colour based on the data
});
d3.selectAll("g.region")
.on("click", function(d,i) {
infoBox.html("<strong>" + d[0] + ": </strong>" + d[1] );
//print the associated data to the page
});
Example implementation: http://jsfiddle.net/ybAj5/7/
Although using dataset.forEach doesn't seem to be using the full capability of d3, it is actually much simpler than trying to attach the whole dataset at once -- especially since there is such variability in the structure of the regions, some of which have nested <g> elements:
//Option two: select all elements at once and create a datajoin
d3.selectAll("g[id]") //select only g elements that have id values
.datum(function(){
var id=d3.select(this).attr("id");
return [id, null]; })
//create an initial [id, value] dataset based on the id attribute,
//with null value for now
.data(dataset, function(d){return d[0];})
//use the first entry in [id,value] as the key
//to match the dataset with the placeholder data we just created for each
.selectAll("path, polygon") //grab the shapes
.datum(function(){
return d3.select(this.parentNode).datum() ||
d3.select(this.parentNode.parentNode).datum();
}) //use the parent's data if it exists, else the grandparent's data
.attr("fill", function(d){return d?colour(d[1]):"lightgray";});
//set the colour based on the data, if there is a valid data element
//else use gray.
This fiddle shows the above code in action, but again I would recommend using the forEach approach.
I am need of a requirement that in a list, some of the list item should exhibit different style than others. How can this be achieved in lwuit?
For Example,
List menu = new List();
menu.addItem("1. Green");
menu.addItem("2. Red");
menu.addItem("3. Blue");
In this list Each item should have the style of representing its color(i.e) Green should have green Background and Red should have Red Background. Is it possible in LWUIT? How can we achieve this?
Thanks in Advance.
You must create a cell renderer for this use case. Just derive 'DefaultListCellRenderer' e.g.:
DefaultListCellRenderer rend = new DefaultListCellRenderer() {
public Component getCellRendererComponent(Component list, Object model, Object value, int index, boolean isSelected) {
Component c = super.getCellRendererComponent(...);
c.getStyle().setBgTransparency(255);
c.getStyle().setBgColor(theColorYouWant);
return c;
}
};
Then set this renderer to the list. You will probably need some additional refinements here since this is a WAY oversimplified example of a renderer.
This is one way of doing it.
1. Create a component for each item in the list
2. Add the bg color and text to it.
3. Once done, add it to a form or any other custon component you have created.
Other way:
You can create your own List renderer. Here is some information on how you can do it
I have a notes form with a series of fields such as city_1, city_2, city_3 etc.
I have an XPage and on that XPage I have a repeat.
The repeat is based on an array with ten values 1 - 10
var repArray = new Array() ;
for (var i=1;i<=10;i++) {
repArray.push(i) ;
}
return(repArray) ;
Within the repeat I have a custom control which is used to surface the fields city_1 through city_10
The repeat has a custom property docdatasource which is passed in
It also has a string custom property called cityFieldName which is computed using the repeat
collection name so that in the first repeat row it is city_1 and in the second it is city_2 etc..
The editable text field on the custom control is bound using the EL formula
compositeData.docdatasource[compositeData.cityFieldName]
This works fine but each time I add new fields I have to remember to create a new custom property and then a reference to it on the parent page.
I would like to be able to simply compute the data binding such as
compositeData.docdatasource['city_' + indexvar]
where indexvar is a variable representing the current row number.
Is this possible ? I have read that you cannot use '+' in Expression Language.
First: you wouldn't need an array for a counter. Just 10 would do (the number) - repeats 10 times too. But you could build an array of arrays:
var repArray = [];
for (var i=1;i<=10;i++) {
repArray.push(["city","street","zip","country","planet"]) ;
}
return repArray;
then you should be able to use
#{datasource.indexvar[0]}
to bind city,
#{datasource.indexvar[1]}
to bind street. etc.
Carries a little the danger of messing with the sequence of the array, if that's a concern you would need to dig deeper in using an Object here.
compute to javascript and use something like
var viewnam = "#{" + (compositeData.searchVar )+ "}"
return viewnam
make sure this is computed on page load in the custom control
I was never able to do the addition within EL but I have been very successful with simply computing the field names outside the custom control and then passing those values into the custom control.
I can send you some working code if you wish from a presentation I gave.