In WatiN RC1 how can I create ElementFinder which will find any element on page?
Here is what I found out.
I can create ElementFinder using two ways
First. When creating custom control (extending Div, Table and so on) there is a protected method CreateElementFinder<T>. Here is an example:
var elementFinder = CreateElementFinder<Element>(
nativeEl => nativeEl.AllDescendants,
Find.ById("id"));
Second. If you are not extending any control you can use NativeElementFinder constructor. Here is an example:
var finder = new NativeElementFinder(
() => browser.Body.NativeElement.AllDescendants,
browser.DomContainer,
new[] { ElementTag.Any },
Find.ById("id"));
Related
I defined a new type of model element as a plug-in; let's refer to it as Foo. A Foo node in the model should translate to a section element in the view. So far, so good. I managed to do that by defining simple conversion rules. I also managed to define a new FooCommand that transforms (renames) selected blocks to Foo.
I got stuck trying to have attributes on those Foo model nodes be translated to attributes on the view elements (and vice-versa). Suppose Foos have an attribute named fooClass which should map to the view element's class attribute.
<Foo fooClass="green-foo"> should map to/from <section class="green-foo">
I can successfully receive parameters in FooCommand, but I can't seem to set them on the blocks being processed by the command:
execute(options = {}) {
const document = this.editor.document;
const fooClass = options.fooClass;
document.enqueueChanges(() => {
const batch = options.batch || document.batch();
const blocks = (options.selection || document.selection).getSelectedBlocks();
for (const block of blocks) {
if (!block.is('foo')) {
batch.rename(block, 'foo');
batch.setAttribute(block, 'fooClass', fooClass);
}
}
});
}
Below is the code for the init function in the Foo plugin, including the model→view and view→model conversions:
init() {
const editor = this.editor;
const doc = editor.document;
const data = editor.data;
const editing = editor.editing;
editor.commands.add('foo', new FooCommand(editor));
doc.schema.registerItem('foo', '$block');
buildModelConverter().for(data.modelToView, editing.modelToView)
.fromElement('foo')
.toElement(modelElement => {
const fooClass = modelElement.item.getAttribute('fooClass'));
return new ContainerElement('section', {'class': fooClass});
});
buildViewConverter().for(data.viewToModel)
.fromElement('section')
.toElement(viewElement => {
let classes = Array.from(viewElement.getClassNames());
let modelElement = new ModelElement('foo', {'fooClass': classes[0]});
return modelElement;
});
}
When I try to run the command via
editor.execute('foo', { fooClass: 'green-foo' })
I can see that the green-foo value is available to FooCommand, but the modelElement in the model→view conversion, on the other hand, has no fooClass attribute.
I'm sure I'm missing the point here and misusing the APIs. I'd be really thankful if someone could shed some light on this issue. I can provide more details, as needed.
Follow-up after initial suggestions
Thanks to #Reinmar and #jodator for their suggestion regarding configuring the document schema to allow for the custom attribute. I really thought that would have taken care of it, but no. It may have been a necessary step anyway, but I'm still unable to get the attribute value from the model element during the model→view conversion.
First, let me add an important piece of information I had left out: the CKEditor5's version I'm working with is 1.0.0-alpha2. I am aware several of the APIs are bound to change, but I would still like to get things working with the present version.
Model→view conversion
If I understand it correctly, one can either pass a string or a function to the toElement call. A question about using the latter: what exactly are the parameters passed to the function? I assumed it would be the model element (node?) to be converted. Is that the case? If so, why is the attribute set on that node via batch.setAttribute (inside a document.enqueueChanges) not available when requested? Should it be?
A sequencing problem?
Additional testing seems to indicate there's some kind of order-of-execution issue happening. I've observed that, even though the attribute is not available when I first try to read it from the modelElement parameter, it will be so if I read it again later. Let me try to illustrate the situation below. First, I'll modify the conversion code to make it use some dummy value in case the attribute value is not available when read:
buildModelConverter().for(data.modelToView, editing.modelToView)
.fromElement('foo')
.toElement(modelElement => {
let fooClass = modelElement.item.getAttribute('fooClass') || 'naught';
let viewElement = new ContainerElement('section');
viewElement.setAttribute('class', fooClass);
return viewElement;
});
Now I reload the page and execute the following instructions on the console:
c = Array.from(editor.document.getRoot().getChildren());
c[1].is('paragraph'); // true
// Changing the node from 'paragraph' to 'foo' and adding an attribute
// 'fooClass' with value 'green-foo' to it.
editor.document.enqueueChanges(() => {
const batch = editor.document.batch();
batch.rename(c[1], 'foo');
batch.setAttribute(c[1], 'fooClass', 'green-foo');
return batch;
});
c[1].is('paragraph'); // false
c[1].is('foo'); // true
c[1].hasAttribute('fooClass'); // true
c[1].getAttribute('fooClass'); // 'green-foo'
Even though it looks like the expected output is being produced, a glance at the generated view element shows the problem:
<section class="naught"/>
Lastly, even if I try to reset the fooClass attribute on the model element, the change is not reflected on the view element. Why is that? Shouldn't changes made via enqueueChanges cause the view to update?
Sorry for the very long post, but I'm trying to convey as many details as I can. Here's hoping someone will spot my mistake or misunderstanding of how the CKEditor 5's API actually works.
View not updating?
I turned to Document's events and experimented with the changesDone event. It successfully addresses the "timing" issue, as it consistently triggers only after all changes have been processed. Still, the problem of the view not updating in response to a change in the model remains. To make it clear, the model does change, but the view does not reflect that. Here is the call:
editor.document.enqueueChanges(() => editor.document.batch().setAttribute(c[1], 'fooClass', 'red-foo'));
To be 100% sure I wrote the whole feature myself. I use the 1.0.0-beta.1 API which is completely different than what you had.
Basically – it works. It isn't 100% correct yet, but I'll get to that.
How to convert an element+attribute pair?
The thing when implementing a feature which needs to convert element + attribute is that it requires handling the element and attribute conversion separately as they are treated separately by CKEditor 5.
Therefore, in the code below you'll find that I used elementToElement():
editor.conversion.elementToElement( {
model: 'foo',
view: 'section'
} );
So a converter between model's <foo> element and view's <section> element. This is a two-way converter so it handles upcasting (view -> model) and downcasting (model -> view) conversion.
NOTE: It doesn't handle the attribute.
Theoretically, as the view property you could write a callback which would read the model element's attribute and create view element with this attribute set too. But that wouldn't work because such a configuration would only make sense in case of downcasting (model -> view). How could we use that callback to downcast a view structure?
NOTE: You can write converters for downcast and upcast pipelines separately (by using editor.conversion.for()), in which case you could really use callbacks. But it doesn't really make sense in this case.
The attribute may change independently!
The other problem is that let's say you wrote an element converter which sets the attribute at the same time. Tada, you load <section class=ohmy> and gets <foo class=ohmy> in your model.
But then... what if the attribute will change in the model?
In the downcast pipeline CKEditor 5 treats element changes separately from attribute changes. It fires them as separate events. So, when your FooCommand is executed on a heading it calls writer.rename() and we get the following events in DowncastDispatcher:
remove with <heading>
insert:section
But then the attribute is changed too (writer.setAttribute()), so we also get:
setAttibute:class:section
The elementToElement() conversion helper listens to insert:section event. So it's blind to setAttribute:class:selection.
Therefore, when you change the value of the attribute, you need the attributeToAttribute() conversion.
Sequencing
I didn't want to reply to your question before we released 1.0.0-beta.1 because 1.0.0-beta.1 brought the Differ.
Before 1.0.0-beta.1 all changes were converted immediately when they were applied. So, rename() would cause immediate remove and insert:section events. At this point, the element that you got in the latter one wouldn't have the class attribute set yet.
Thanks to the Differ we're able to start the conversion once all the changes are applied (after change() block is executed). This means that the insert:section event is fired once the model <foo> element has the class attribute set already. That's why you could write a callback-based converters... bur you shouldn't :D
The code
import { downcastAttributeToAttribute } from '#ckeditor/ckeditor5-engine/src/conversion/downcast-converters';
import { upcastAttributeToAttribute } from '#ckeditor/ckeditor5-engine/src/conversion/upcast-converters';
class FooCommand extends Command {
execute( options = {} ) {
const model = this.editor.model;
const fooClass = options.class;
model.change( writer => {
const blocks = model.document.selection.getSelectedBlocks();
for ( const block of blocks ) {
if ( !block.is( 'foo' ) ) {
writer.rename( block, 'foo' );
writer.setAttribute( 'class', fooClass, block );
}
}
} );
}
}
class FooPlugin extends Plugin {
init() {
const editor = this.editor;
editor.commands.add( 'foo', new FooCommand( editor ) );
editor.model.schema.register( 'foo', {
allowAttributes: 'class',
inheritAllFrom: '$block'
} );
editor.conversion.elementToElement( {
model: 'foo',
view: 'section'
} );
editor.conversion.for( 'upcast' ).add(
upcastAttributeToAttribute( {
model: 'class',
view: 'class'
} )
);
editor.conversion.for( 'downcast' ).add(
downcastAttributeToAttribute( {
model: 'class',
view: 'class'
} )
);
// This should work but it does not due to https://github.com/ckeditor/ckeditor5-engine/issues/1379 :(((
// EDIT: The above issue is fixed and will be released in 1.0.0-beta.2.
// editor.conversion.attributeToAttribute( {
// model: {
// name: 'foo',
// key: 'class'
// },
// view: {
// name: 'section',
// key: 'class'
// }
// } );
}
}
This code works quite well, except the fact that it converts the class attribute on any possible element that has it. That's because I had to use very generic downcastAttributeToAttribute() and upcastAttributeToAttribute() converters because of a bug that I found (EDIT: it's fixed and will be available in 1.0.0-beta.2). The commented out piece of code is how you it should be defined if everything worked fine and it will work in 1.0.0-beta.2.
It's sad that we missed such a simple case, but that's mainly due to the fact that all our features... are much more complicated than this.
I'm planning on having multiple ace editor instances on a page and I'd like to know if the core libraries are keeping track of them so I can easily get a reference to them later.
If not, would keeping the editor instances in a dictionary or object be a good way to do it? Could I create an object on the ace class and should they be by reference or id?
var editor1 = ace.edit("myEditorDivID");
var editor2 = ace.edit("myEditorDivID2");
var editors = ace.editors;
console(editor1==editors["myEditorDivID"]); // true
console.log(editors["myEditorDivID"]); // editor1
var editorIds = ace.editorIds;
console.log(editorIds[0]); // myEditorDivID
And is there an ace destroy method that should be used to remove references to these instances?
Nevermind on part two of this question. I just found the destroy methods:
editor.destroy();
editor.container.remove();
Update:
I just thought of something else. If we can keep track of the id's or references we can prevent same id collisions. It can also help track how many editors are on a page or if multiple are being created by accident.
I just looked at the ace source and don't see anything keeping track of the editors as they are created. Should I try to whip something up or let someone else tackle it?
Update 2:
I'm thinking to add an editors property and set it by id. I've added an answer with a suggestion.
Answering my own question, no, it does not. But I suggest the following Pseudo code:
ace.addEditorById = function (id, editor) {
if (ace.editors[id]!=null) throw Error ("Editor already created");
ace.editors[id] = editor;
}
ace.getEditorById = function (id) {
return ace.editors[id];
}
ace.removeEditorById = function (id) {
var editor = ace.editors[id];
if (editor) {
editor.destroy();
editor.container.remove();
delete ace.editors[id];
}
}
ace.editors = {};
// then when I create an editor I use the following code:
editor = ace.edit("editor1");
ace.addEditorById(editor);
editor2 = ace.edit("editor2");
ace.addEditorById(editor2);
Maybe the editor can be added in the edit call. What do you think?
Does anybody know what the "Data" part of the Grid Ajax Read fluent API does.
The reason I ask is because my set up is like this:
// razor setup
.Kendo()
.Grid<MyModel>()
.Name("KENDO_UI_GRID")
.DataSource(d =>
d.Ajax()
.Read(r => r
.Data("k_get_datafromform")
.Action("ResultsJson", "ControllerName")
)
.Events(e => e.RequestEnd("k_grid_requestend"))
.Events(e => e.Error("k_grid_error"))
.PageSize(Model.MaxItemsPerPage))
.Columns(// etc etc
// javascript function
function k_get_datafromform() {
var theFormFound = jQuery(".search-form:first");
if (theFormFound) {
// custom helper to convert form to object
return theFormFound.serializeObject();
};
return null;
}
But when the grid POSTs to get the results, it doesn't send the data along with it. The form collection contains the usual Kendo stuff (pagesize etc) but nothing else. What am I doing wrong???
From Telerik:
"This is a known issue in the first service pack release(2013.3.1316) that is already fixed. The additional data for the read request was not included in the serialized request data and was not sent to the server. Please update the version that you are using to the latest service pack(2013.3.1324) which is available for download from your account. I am sorry for the inconvenience caused."
And that's that.
You are using the Data function to send addtional parameters to the server, when the dataSource is performing the operation - in your case the Read operation.
So if you return from the function something like {foo :42}. This parameter equal to 42 will be send to the server.
In your case I assume that the result from the serializeObject is not right.
Can you try to see how you object looks like and share it with us?
You can use
alert(kendo.stringify(theFormFound.serializeObject()));
or
console.log(kendo.stringify(theFormFound.serializeObject())
to investigate
For example, here is a DropdownList (left stuff out to be more clear) that requires additionalData, you'll notice the javascript function "OnAdditionalData" in the .data tag
#(Html.Kendo().DropDownListFor(x => x.FromOpportunity)
.Name("OpportunityDDL")
.DataSource(source => {
source.Read(read =>
{
read.Action("SomeMethod", "SomeController")
.Data("OnAdditionalData");
})
)
and The JS
function OnAdditionalData() {
var Item = 3
return {
partyItem: Item
};
}
So when the data is read it says ok, go to SomeMethod in SomeController and read the Data, but says wait! i need data, what am I bringing to the party. It looks at the JS function and says ok I have a partyItem with a value of 3.
public JsonResult SomeMethod(int partyItem)
{
// partyItem will == 3
}
Notice "partyItem" in the controller is the same name as "partyItem" in the function, they must be the same. Be aware that if you expected a string in the Controller it wouldn't work. if it was var Item = "3" then it would work.
I'm currently using the following code in Flash Builder to return a list of variables from an XML file:
[Bindable] private var I_Authors:ArrayCollection = new ArrayCollection ();
private function init():void {
var param:Object = new Object();
param.action = "getAuthorXML";
authorService.send(param);
}
protected function authorService_resultHandler(event:ResultEvent):void
{
I_Authors = event.result.authors.author;
}
My problem is making use of this data in a dropdown list.
I have no trouble putting it into a data grid using dataProvider="{I_Authors}" and dataField="ID" etc., but all the attempts I've made to put a specific field (ID) into a dropdown list have resulted in "object Object".
I'm just starting out with flash builder so its probably a basic question but all of the tutorials I've followed on Adobe's website don't seem to be any help.
Would appreciate any advice.
Turns out you use labelField="" , just incase anyone else is a bit confused about this.
<s:DropDownList id="dropdownList" dataProvider="{________}" labelField="________"></s:DropDownList>
The problem is "author" is an object.
When you get your results from authorService you receive an object
I_Authors = event.result.authors.author;
So you have an array of objects.
You probably want to get property of your object eg.: author.ID
I_Authors = event.result.authors.author.ID;
So you have an array of author ID.
dataProvider= I_Authors
Let me know if it wasn't clear and you need more explanation.
I am getting up to speed on Composite WPF, building a small demo app to work through the issues. My app has one region, and two modules, Module A and Module B. Each module contains a simple "Hello World" text block. Both modules are set up as load-on-demand, as per this MSDN How-To.
The shell has two buttons, "Load Module A" and "Load Module B". When a button is clicked, the corresponding module is loaded. So, lets say I click "Load Module A", then "Load Module B". Module A, then Module B load as expected. But if I click "Load Module A" again, nothing happens.
I'm stuck at this point. I think my problem is that I need to activate and deactivate the views in the modules, rather than using load-on-demand. But I have no idea how to do that, and I can't find any documentation or blogs that talk about it.
So, here's my question: How to I load/unload (or show/hide) views? If someone can point me to sample code, I'd really appreciate it. Thanks for your help.
I found my answer. Here is the approach: Load all the modules at startup, then activate and deactivate views as you need them. I am going to write this issue up as a CodeProject article, but here is an outline of how to do it:
(1) In the module Initialize() method, add the module, but don't activate it:
public void Initialize()
{
// Get main region
var mainRegion = m_RegionManager.Regions["MainRegion"];
// Load Module B
var newView = new ModuleBView();
mainRegion.Add(newView, "ModuleA.ModuleAView");
}
Note that the Add() method has two parameters. The second parameter is the name of the view, which we set to the value produced by the ToString() method of the view. We'll see why in the next step.
(2) When activating a view, we need to deactivate the previous view. But we may not know the name of the view, so we deactivate all active views:
public static void ClearRegion(IRegion region)
{
// Get existing view names
var oldViewNames = new List<string>();
foreach (var v in region.Views)
{
var s = v.ToString();
oldViewNames.Add(s);
}
// Remove existing views
foreach (var oldViewName in oldViewNames)
{
var oldView = region.GetView(oldViewName);
region.Deactivate(oldView);
}
}
Since we set the name of each view equal to its ToString() value, we can get the names easily without knowing anything about them in advance.
(3) Now we activate the new view. I do it in an MVVM ICommand.Execute() method:
public void Execute(object parameter)
{
// Get main region
var mainRegion = m_ViewModel.RegionManager.Regions["MainRegion"];
// Clear region
ModuleServices.ClearRegion(mainRegion);
// Activate Module A view
var moduleAView = mainRegion.GetView("ModuleA.ModuleAView");
mainRegion.Activate(moduleAView);
}
Hopefully, that will be enough to get you going. Like I said, I plan to do a more complete writeup, with demo code, for CodeProject.
David Veeneman
Foresight Systems