I'd like to do fancy things the selection indicator. How do I get the bounding box for the currently selected characters?
This was non-trivial. First, a selection may require more than one rectangle. Next, there's no convenient way to do it.
Here's what I had to do:
var start:int = op.activePosition < op.anchorPosition ? op.activePosition : op.anchorPosition;
var end:int = op.activePosition > op.anchorPosition ? op.activePosition : op.anchorPosition;
var textFlow:TextFlow = this.textFlow;
var rectangles:Dictionary = new Dictionary();
// For each selected character, make a box
for( var i:int=start; i < end; i++) {
var flowLine:TextFlowLine = textFlow.flowComposer.findLineAtPosition( i, true );
if( rectangles[ flowLine.absoluteStart ] == null ) {
rectangles[ flowLine.absoluteStart ] = new Rectangle();
(rectangles[ flowLine.absoluteStart ] as Rectangle).x = 0xffffff;
(rectangles[ flowLine.absoluteStart ] as Rectangle).right = 0;
}
var currentRect:Rectangle = rectangles[ flowLine.absoluteStart ];
var textLine:TextLine = flowLine.getTextLine(true);
var atomIndex:int = textLine.getAtomIndexAtCharIndex( i );
if( atomIndex >= 0) {
var atomBounds:Rectangle = textLine.getAtomBounds( atomIndex );
var pt:Point = this.globalToLocal( textLine.localToGlobal( new Point( atomBounds.left, atomBounds.top ) ) );
if( pt.x <= currentRect.left ) {
currentRect.left = pt.x;
currentRect.top = pt.y;
}
pt = this.globalToLocal( textLine.localToGlobal( new Point( atomBounds.right, atomBounds.bottom) ) );
if( pt.x >= currentRect.right ) {
currentRect.right = pt.x;
currentRect.bottom = pt.y;
}
}
}
return rectangles;
I don't believe there's a trivial way to get total control over this, from looking around at the docs a bit I saw this:
http://opensource.adobe.com/wiki/display/flexsdk/Spark+Text+Primitives#SparkTextPrimitives-FTE
[Style(name="focusedTextSelectionColor", type="uint", format="Color", inherit="yes")]
[Style(name="inactiveTextSelectionColor", type="uint", format="Color", inherit="yes")]
[Style(name="unfocusedTextSelectionColor", type="uint", format="Color", inherit="yes")]
also to note:
anchor position - A character index specifying the end of the selection that stays fixed when you extend the selection with the arrow keys.
active position - A character index specifying the end of the selection that moves when you extend the selection with the arrow keys.
Since these are all only colors (or indices) I don't know if they'll get at all the fanciness you'd like to do. I'd worked on something in Flex 3 to deal with custom text selection controls and ended up using an "off screen buffer" of sorts where I put a TextField offscreen with the same properties as the one on screen then dump the characters 1 by 1 until I got to the desired width then I could figure out where in the characters the control was dropped(kind of like android selection).
I would suggest searching for the above styles in the SDK you have (particularly in RichEditableText and its super classes, I would do this but there's quite a few versions out there now and don't know which one your using, TLF and FTE are both a bit in flux it seems). Once you find where these styles are used you'll probably be in the vicinity of the selection indicator drawing code and will likely need to extend from whatever class that is in order to override the appropriate methods.
Sorry I can't give you a straight answer but hopefully this helps or someone else is able to chime in if there's an easier way.
Shaun
Related
This is likely embarrassingly easy but I'm new and I've been beating my head against the wall on this for a while now. What I am attempting to do is basically a modified version of the "Hello App Maker!" If else test.
The necessary info I have the following widgets attached to the appropriate data sources:
Dropdown widget called source_name (string - list)
Label widget I've called name (string)
Text Box widget called qty_duration (number)
Label widget I've called hours (number)
I have a dropdown widget called source_name with 5 options. On selection I have the value appear in a label widget I've called name. If the option selected from the drop down widget is ever LABOUR I am trying to then have the value of a Text Box widget called qty_duration appear in a label widget I've called hours
On the source_name dropdown event - onValueChange I have the following code:
// Define variables for the input and output widgets
var nameWidget = app.pages.Apex_job_details.descendants.name;
var outputWidget = app.pages.Apex_job_details.descendants.hours;
var techhours = app.pages.Apex_job_details.descendants.qty_duration;
var nothing = 0;
// If a name is LABOUR, add the qty to the output widget Else output 0.
if (nameWidget == 'LABOUR') {
outputWidget.text = techhours;
} else {
outputWidget = nothing;
}
It's not giving me any errors, but it's also not outputting to the hours label. If I edit the code as follows just to muck with it:
// Define variables for the input and output widgets
var nameWidget = app.pages.Apex_job_details.descendants.name;
var outputWidget = app.pages.Apex_job_details.descendants.hours;
var techhours = app.pages.Apex_job_details.descendants.qty_duration;
var nothing = 0;
// If a name is LABOUR, add the qty to the output widget Else output 0.
if (nameWidget == 'LABOUR') {
outputWidget.text = techhours;
} else {
outputWidget.text = nothing;
}
I'm not sure what I'm doing wrong.
Assuming all labels and input widgets are inside a table row you will want to adjust your code as follows:
var tablerow = widget.parent;
var nameWidget = tablerow.descendants.name.text;
var outputWidget = tablerow.descendants.hours;
var techhours = tablerow.descendants.qty_duration.value;
if(nameWidget === 'LABOUR') {
outputWidget.text = techhours;
} else {
outputWidget.text = null;
}
By using widget.parent in the onValueChange event of the dropdown you will automatically reference the table row and then by using descendants you are referencing only the descendants of that table row. This will bridge the error by using an absolute reference when using table rows. If it still doesn't work let me know.
I have a treeTable with editable cells within the expanded rows. The editable cells get a dirty flag after editing (in the example the background color is set to red).
The problem i'm running into is that i found no certain way to update the dirty flag on expand/collapse (edited cells get the css class 'edited-cell').
At the moment the code looks like that:
// each editable textfield gets a Listener
textField.attachLiveChange(
var source = oEvent.oSource;
...
jQuery('#' + source.getId()).addClass(EDITED_CELL_CLASS, false)
// list with cell ids, e.g. "__field1-col1-row1"
DIRTY_MODELS.push(model.getId()) //*** add also binding context of row
)
// the table rows are updated on toggleOpenState
new sap.ui.table.TreeTable({
toggleOpenState: function(oEvent) {
...
this.updateRows() // see function below
}
})
// update Rows function is also delegated
oTable.addDelegate({ onAfterRendering : jQuery.proxy(this.updateRows, oTable)});
//http://stackoverflow.com/questions/23683627/access-row-for-styling-in-sap-ui5-template-handler-using-jquery
// this method is called on each expand/collapse: here i can make sure that the whole row has it's correct styling...
// but how to make sure that special cells are dirty?
function updateRows(oEvent) {
if (oEvent.type !== 'AfterRendering'){
this.onvscroll(oEvent);
}
var rows = this.getVisibleRowCount();
var rowStart = this.getFirstVisibleRow();
var actualRow;
for (var i = 0; i < rows; i++){
actualRow = this.getContextByIndex(rowStart + i); //content
var row = this.getRows()[i]
var obj = actualRow.getObject()
var rowId = row.getId()
updateStyleOfRows(obj, rowId, actualRow)
updateDirtyCells(rowId) //*** how to get the binding context in this function???
}
};
// update Dirty Cells in function updateRows():
function updateDirtyCells(rowId){
for (var i = 0; i < DIRTY_MODELS.length; i++){
var dirtyCellId = DIRTY_MODELS[i]
//*** make sure that only the correct expanded/collapsed rows will be updated -> depends on the bindingContext of the row
jQuery('#' + rowId).find('#' + dirtyCellId + '.editable-cell').addClass(EDITED_CELL_CLASS, false)
}
}
This doesn't work correctly, because the ids of the cells change on each layout render (e.g. collapse/expand rows). Please see attached image.
Let me know if i should provide more information.
in Flex I have something like that:
var dg:DataGrid = new DataGrid();
if (something) dg = dg1 else if (something_2) dg = dg2;
dg.dataProvider.getItemAt(3).id;
and dg is ALWAYS pointing at DataGrid (even if dg1 has name DataGrid_test and dg2 = DataGrid_test2) and finally action is made on my first DataGrid (DataGrid_test).
Why?
How can I pass dg1 or dg2 to dg?
Here is pasted almost full code of this part of application. I edited it to make that more clear.
var dg:DataGrid = null;
if ( currentState == "state1" ) { //if this condition is true then app. go into if and
dg = dataGrid_first; // make dg = DataGrid (1)
test.text = "inco"; // shows "inco" in "test" label
} else if ( currentState == "state2" ) { // if this is true then app. go..
dg = dataGrid_second; //here and set dg as DataGrid (exactly!) (2)
test.text = "outgo"; // and change test label into blank text (earlier text disapears)
}
search(dg);
It is modified with advice of '#splash'
Still not working.
EDIT:
I made this sceond edit to answer for all You who are helping me with that :) I think that it will be the best way. In codeblock above I added comments. (please read now comments and after that come back here :) )
Now I will explain exactly what happens.
I debug it many times and here are results:
dg is pointing at DataGrid (as component in flex, not as my dataGrid_first), I needed to extend DataGrid so now it is ColorColumn component (I don't know if I called it properly), not DataGrid. And dg is pointing at ColorColumn not at dataGrid_first or dataGrid_second. I even tried today the same thing what suggest #splash:
if ( currentState == "state1" ) {
test.text = "inco";
search(dataGrid_first);
} else if ( currentState == "state2" ) {
test.text = "outgo";
search(dataGrid_second);
}
and search still points at ColorColumn :/ My problem is really easy- I just want to pass to search different dataGrid on each state. If You have other ideas how I can do that in right way then I will pleased to hear about it. :)
But still I don't understand why it doesn't work. My search function uses algorhitm Boyer-Moor for searching through dataGrid.dataProvider for some text. If it find something then it is pushed into new array and after passing whole dataProvider I colorize rows with searched word.
If dg is never pointing to dg1 and dg2 then your (something) expressions may be evaluate to false. Check the value of your if-conditions - this should be easy to debug.
This should work:
var dg:DataGrid = null;
if (something)
dg = dg1;
else if (something_2)
dg = dg2;
if (dg)
{
// do something with dg
}
[Update]
I still can't see why your code isn't working, but you could simplify it like this:
if ( currentState == "state1" ) {
test.text = "inco";
search(dataGrid_first);
} else if ( currentState == "state2" ) {
test.text = "outgo";
search(dataGrid_second);
}
I'd propose to write this - since I guess either dg1 or dg2 should be assigned:
if (something) {
dg = dg1;
} else {
dg = dg2;
}
There may be cases, where if () {} else () {} neither executes the first or the second conditional block.
Finally a small hint, which structurally eliminates unwanted assignments in if conditions: Always write the literal left of the comparison operation: if ( "state1" == currentState ). If you accidentally typed = instead of ==, the flex compiler emits an error. The other notation silently assigns a value.
Additionally: Did you single-stepped through your code and watched the variables dg1, dg2 and dg? If not, set a breakpoint a few line before the if-statement and run the code step by step from there on. What do you see?
Here's a another tip: Use assertions to check for inconistencies:
package my.company.utilities {
public function assert(expression:Boolean):void {
// probably conditionally compile this statement
if (!expression) {
throw new Error("Assertion failed!");
}
} // assert
}
Use it e.g. at the beginning of a method like this:
public function doTransaction( fromAccount:int, toAccount:int ) {
assert( 0 < fromAccount );
assert( 0 < toAccount );
}
A typically good use of assert is to check variables regarding their range. As of the above example, fromAccount and toAccount should always be positive. Due to a bug, bad values might get passed to doTransaction(). In this case, the assertion fires an error.
I have a OpenLayers.Feature.Vector created as follows:
var multiPol = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.MultiPolygon([polygonGeometry1,polygonGeometry2]));
Both polygons represent same logical object (an "entity") on a map, say a cloud. This is why I keep them in one feature.
I would like to draw it so that each component of this multi-polygon (polygonGeometry1, polygonGeometry2) is drawn with different color when it's added to a layer:
var layer = new OpenLayers.Layer.Vector("polygonLayer");
layer.addFeatures([multiPol]);
I have taken a look at styles, style maps and rules in OpenLayers but they appear to be insufficient. They do enable me to draw each geometry type with different color but only if they belong to different features (vectors). Is there a way to solve this problem? Do really I have to use separate Vector for each polygon?
The proposed solution by Jon Snyder provided us with a general idea, but did not fully work for in the end (especially extending OpenLayers.Layer.Vector wasn't necessary for this task, based on OpenLayers 2.1x).
We created a class YourApp.Handler.EndPointsPath (extending OpenLayers.Handler.Path), where the function geometryClone() returns a new geometry of type YourApp.Geometry.EndPointsPath.
We then patched the function drawGeometry() in OpenLayers.Renderer.Elements to draw this new geometry:
OpenLayers.Util.extend(OpenLayers.Renderer.Elements.prototype, {
drawGeometry: function (geometry, style, featureId) {
var cl = geometry.CLASS_NAME;
var rendered = true,
i, len;
if ((cl === "OpenLayers.Geometry.Collection") ||
(cl === "OpenLayers.Geometry.MultiPoint") ||
(cl === "OpenLayers.Geometry.MultiLineString") ||
(cl === "OpenLayers.Geometry.MultiPolygon") ||
(cl === "YourApp.Geometry.EndPointsPath")) {
// Iterate over all Geometry components and draw each individually
for (i = 0, len = geometry.components.length; i < len; i++) {
// Is there a style for each of the components?
if (OpenLayers.Util.isArray(style)) {
// Draw Geometry with own style
rendered = this.drawGeometry(geometry.components[i], style[i], featureId) && rendered;
} else {
// Draw Geometry with common style
rendered = this.drawGeometry(geometry.components[i], style, featureId) && rendered;
}
}
return rendered;
}
// (...standard code...)
},
eraseGeometry: function (geometry, featureId) {
var cl = geometry.CLASS_NAME,
i, len;
if ((cl === "OpenLayers.Geometry.MultiPoint") ||
(cl === "OpenLayers.Geometry.MultiLineString") ||
(cl === "OpenLayers.Geometry.MultiPolygon") ||
(cl === "YourApp.Geometry.EndPointsPath") ||
(cl === "OpenLayers.Geometry.Collection")) {
for (i = 0, len = geometry.components.length; i < len; i++) {
this.eraseGeometry(geometry.components[i], featureId);
}
// (...standard code...)
}
}
});
As far as I can tell, to get this functionality you will need to extend the classes with your own.
First create an extension to OpenLayers.Feature.Vector, name it YourApp.Feature.MultiVector. You can see examples on how to extend classes by looking at the OpenLayers code. This class should accept an array of styles and the multiPolygon. It should have a method that will return a list of OpenLayers.Feature.Vectors each with their own style.
Second create an extension to OpenLayers.Layer.Vector, name it YourApp.Layer.VectorSupportingMultiStyledFeatures. You will need to override the "drawFeature" method. In the drawFeature method test to see if the type of the feature is a MultiVector. If it is, loop through each feature in the MultiVector and call renderer.drawFeature(feature). Otherwise call the super.drawFeature method.
So your code to call it would look like this:
var multiPol = new YourApp.Feature.MultiVector(
new OpenLayers.Geometry.MultiPolygon([polygonGeometry1,polygonGeometry2]),
[style1,style2,style3,style4]);
var layer = new YourApp.Layer.VectorSupportingMultiStyledFeatures("polygonLayer");
layer.addFeatures([multiPol]);
Is it possible to sort an XMLList? All the examples I can find on it create a new XMLListCollection like this:
MyXMLListCol = new XMLListCollection(MyXMLList);
I don't think the XMLListCollection in this case has any reference to the XMLList so sorting it would leave my XMLList unsorted, is this correct?
How can I sort the XMLList directly?
Thanks
~Mike
So I finally got my search terms altered enough I actually churned up an answer to this.
Using the technique I got from here:
http://freerpad.blogspot.com/2007/07/more-hierarchical-sorting-e4x-xml-for.html
I was able to come up with this:
public function sortXMLListByAttribute(parentNode:XML,xList:XMLList,attr:String):void{
//attr values must be ints
var xListItems:int = xList.length();
if(xListItems !=0){
var sortingArray:Array = new Array();
var sortAttr:Number = new Number();
for each (var item:XML in xList){
sortAttr = Number(item.attribute(attr));
if(sortingArray.indexOf(sortAttr)==-1){
sortingArray.push(sortAttr);
}
//piggy back the removal, just have to remove all of one localName without touching items of other localNames
delete parentNode.child(item.localName())[0];
}
if( sortingArray.length > 1 ) {
sortingArray.sort(Array.NUMERIC);
}
var sortedList:XMLList = new XMLList();
for each(var sortedAttr:Number in sortingArray){
for each (var item2:XML in xList){
var tempVar:Number = Number(item2.attribute(attr));
if(tempVar == sortedAttr){
sortedList += item2
}
}
}
for each(var item3:XML in sortedList){
parentNode.appendChild(item3);
}
}
}
Works pretty fast and keeps my original XML variable updated. I know I may be reinventing the wheel just to not use an XMLListCollection, but I think the ability to sort XML and XMLLists can be pretty important
While there is no native equivalent to the Array.sortOn function, it is trivial enough to implement your own sorting algorithm:
// Bubble sort.
// always initialize variables -- it save memory.
var ordered:Boolean = false;
var l:int = xmlList.length();
var i:int = 0;
var curr:XML = null;
var plus:XML = null;
while( !ordered )
{
// Assume that the order is correct
ordered = true;
for( i = 0; i < l; i++ )
{
curr = xmlList[ i ];
plus = xmlList[ i + 1 ];
// If the order is incorrect, swap and set ordered to false.
if( Number( curr.#order ) < Number( plus.#order ) )
{
xmlList[ i ] = plus;
xmlList[ i + 1 ] = curr;
ordered = false;
}
}
}
but, realistically, it is far easier and less buggy to use XMLListCollection. Further, if someone else is reading your code, they will find it easier to understand. Please do yourself a favor and avoid re-inventing the wheel on this.