There is no documentation in the API doc for the constructors. I would like to understand the purpose/use cases for SvgElement.tag() .
The SvgElement.tag(String tag) constructor creates a new SvgElement for a corresponding tag value.
For example:
var foo = new SvgElement.tag('view');
print(foo is ViewElement); // prints 'true'
would create a new SvgElement specified by the <view> tag.
This means that the above code is the same as:
var bar = new ViewElement();
print(bar is ViewElement); // prints 'true'
See also the tag constructor from the superclass Element.
Use cases for this constructor are places where you get the value of the tag from text and want to generate a new element of that tag value.
You might get the tag from parsing the DOM, or maybe from a different API. The tag constructor is a way to write DOM code in a "Darty" way (with objects and classes) while being able to work with DOM elements via text.
In many cases, it is preferable to create this Element object instead of say, using innerHtml to set the DOM inside of another Element.
Compare:
var someTagName = 'view';
var someDomNode = query('#id');
// BAD
someDomNode.innerHtml = '<$someTagName> ... </$someTagName>';
// GOOD
var myElement = new SvgElement.tag(someTagName);
someDomNode.append(myElement);
Related
Suppose I'm cleaning some html using HtmlCleaner (v2.18) and I want to set the property invalidAttributeNamePrefix (see section Cleaner parameters) to some value, i.e.: data-.
This way an attribute my-custom-attr="my-value" in the HTML will be transformed to data-my-custom-attr="my-value".
How can I do that? I wasn't able to find any example for the Java usage.
You can take as reference this piece of code:
HtmlCleaner cleaner = new HtmlCleaner();
CleanerProperties properties = cleaner.getProperties();
properties.setOmitComments(true);
// properties.setInvalidAttributeNamePrefix("data-"); there is no such method
// html is a declared variable which contains some html content
TagNode rootTagNode = cleaner.clean(html);
XmlSerializer xmlSerializer = new PrettyXmlSerializer(properties);
String cleanedHtml = xmlSerializer.getAsString(rootTagNode);
Upgrading to version 2.22 solves this.
Now it can be done
// ...
properties.setInvalidXmlAttributeNamePrefix("data-");
//...
I'm using the Chrome driver and Selenium tools in my CodedUI tests. I can find the element I need using the SearchProperties and a Contains operator however I need the full Id for subsequent searches.
For example I need to find an input element with Id "pm_modal_28".
This is easy enough by doing a search where Id contains "pm_modal".
I then need to parse the value "28" out of the Id that was found so I can search for the next nested element which has an Id of "dp_28".
When I use the Id property of HtmlDiv I get a NotSupportedException. Is there anyway I can get all of the Html attributes from an Element or get the Id from an element after it has been found?
Not sure if this what you are after, once the control is identified, you would have all its properties to play around with.
For example
var control = new HtmlDiv ();
control.SearchProperties.Add("Id", "MyDiv_28");
if (!control.TryFind()) return;
var newControl = new HtmlDiv();
newControl.SearchProperties.Add("Id", control.Id.Split('_')[1]);
newControl.TryFind();
HtmlDiv myDiv = new HtmlDiv(browser);
//Add the search logic u want !
myDiv.SearchProperties.Add("class", "ClassName");
string onewayforID = myDiv.Id;
string anotherWay = myDiv.GetProperty(HtmlDiv.PropertyNames.Id).ToString(); // Or u can simpy pass "Id"
See if that Works !
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>
I need to find all Html controls which have a given css class.
var htmlControl = new HtmlControl(document);
htmlControl.SearchProperties[HtmlControl.PropertyNames.Class] = #class;
var uiTestControlCollection = htmlControl.FindMatchingControls();
Using the class name works when there is just one css class on the control. If I have more than one css classes applied on the element, can I search for the element by specifying just one css class and not all of them?
Thanks
You can perform a partial match, like so:
htmlControl.SearchProperties.Add(HtmlControl.PropertyNames.Class, #class, PropertyExpressionOperator.Contains);
var uiTestControlCollection = htmlControl.FindMatchingControls();
The main draw back of this is that it is just a simple string compare. To illustrate, imagine you have two controls A and B. A has class "Test" and B has classes "testdiv topnav". Now if you perform a search for "test", both controls A and B will be selected.
To match a class exactly, you can provide a close as match as possible using the above method and write a helper function to:
Loop through the collection
Get the class of each control
Split the class string on the spaces
Loop through this array and test each for an exact match
Keep the elements where a class matches exactly
Note: This is clearly non-optimal - I'm all ears if someone has a better solution.
Cheers,
Seb
I'm using the YUI2 framework.
I want to be able to get a reference to an object that was created on the page. I don't want to change the existing JS code to store a global handle to it when it is created, if possible.
The page has something like this on it:
<script type="text/javascript">//<![CDATA[
new FirstRate.Reporter("report1").setOptions(
{
inData: "testfunc"
}));
//]]></script>
I don't see any methods in YAHOO.util.Dom specific to finding objects.
How can I get an object reference to FirstRate.Reporter? Is there anything to ennumerate the objects on the page?
Thanks
YUI contains lots of methods for finding objects in the webpage DOM. YAHOO.util.DOM contains methods:
HTMLElement | Array get ( el )
Array getElementsBy ( method , tag , root , apply , o , overrides )
HTMLElement getElementBy ( method , tag , root )
Array getElementsByClassName ( className , tag , root , apply , o , overrides )
and many more. These retrieve objects from the DOM. To find an object in the page with YUI2, you would typically use some combination of the tag type, the class name or the id to query the page using YUI methods to find the object you want. It's easiest to find a specific object in the page if you give it a unique id value and then you can just using YAHOO.util.DOM.get("myObject") to retrieve it (where "myObject" is the id of the HTML element).
If you want to get regular javascript objects, then you have to store references to them yourself in your own javascript variables. YUI doesn't do that for you except when using some UI widgets (which also have DOM elements).
If you want to keep track of the result of this:
new FirstRate.Reporter("report1").setOptions(
{
inData: "testfunc"
})
Then, you have to assign it to a variable or to a property of an object whose scope allows it to last long enough for you to use it.
var theReporter = new FirstRate.Reporter("report1").setOptions(
{
inData: "testfunc"
})
or
myObject.reporter = new FirstRate.Reporter("report1").setOptions(
{
inData: "testfunc"
})
where myObject is some other object you've created and are storing.
JavaScript objects aren't part of DOM. DOM is the Document Object Model, it's about objects in HTML document like divs, forms, inputs etc, the kind of objects Browser displays.
There is no "global enumeration" of objects in JavaScript. There are global variables.
I don't want to change the existing JS code to store a global handle to it
So you don't want to use global variable. But why?
This is the only way to do it, and it's also very simple:
var myGlobalVar = new FirstRate.Reporter("report1").setOptions({inData: "testfunc"}));
Here you'll store reference ("handle" as you say) to your object in global var myGlobalVar, which you can later access in another part of your JavaScript code.