Tag Archives: Markup languages

PHP: Does SimpleXMLElement have toString() method? No, better use asXML()!

SimpleXML is a PHP extension that “provides a very simple and easily usable toolset to convert XML to an object” [1]. Thus you can pass a link to an XML file and SimpleXML will return an object.

$xml = simplexml_load_file('path_to_the_file');

Sometimes you’d need to dump or save the entire XML as a string, but there’s no toString method! As you can see $xml is an instance of the SimpleXMLElement class.

var_dump($xml); // object(SimpleXMLElement)...

Actually if you take a closer look:

$xml->toString();

will return “Call to an undefined method toString()”, which is frustrating because the developers community is used to use toString() when converting an object into a string.

XML
PHP's SimpleXML doesn't have toString() method. asXML() is used instead!

The solution

In fact there’s a method doing exactly what’s needed. This is SimpleXMLElement::asXML

As described in the manual page: “SimpleXMLElement::asXML — Return a well-formed XML string based on SimpleXML element” [2].

Besides that it does exactly what’s needed it sounds irrelevant, because you’ve an XML object and the name “asXML” doesn’t describe correctly what’s expected.

$xml->asXML() // ?!
  1. SimpleXMLElement::asXML
  2. SimpleXML Introduction

Wanted – onfocus/onblur. Why They Don’t Work Always!

On Focus

onfocus

Perhaps you think of onfocus and onblur events as a default behavior existing in any web page. This is not quite true! Onfocurs and onblur are well known in web developing (js) and are fired, of course, when the user tries to point something or leaves some element. Onfocurs is fired when the user either goes to an element with the Tab button on with the mouse. When the element is on focus, evidently, the onfocus event is fired. Actually you can see which element is on focus, like an anchor or input, when the element is outlined by the browser by default. In the same scenario, when some element has been on focus and than the user switches to another element, the onblur event is fired. Thus you may guess that this element is no longer on focus. Continue reading Wanted – onfocus/onblur. Why They Don’t Work Always!

jQuery: Setting Up a Vector Path Fill Color

It’s quite unusual to think of the jQuery’s attr() method as a generic method that can only change basic attributes as value, style, etc. However attr() can change whatever DOM element attribute. In this case you may know that the SVG path element can have a fill attribute, so you can simply setup a:

$('path').attr('fill', '#ccc');

2xjQuery: Select a Selector

Selectors in jQuery

jQuery JavaScript Library

If you’re familiar with jQuery you should already know what are selectors and how they work. However we’re used to get some DOM element with a specific selector, but actually sometimes you cannot select directly what you need. This is especially true when mixing more than one JavaScript libraries. In my case OpenLayers generated a vector layer and jQuery was supposed to change the vectors fill-color property.

OpenLayers

With the simple $(‘path’) I easily got all vectors in the current document, but the problem was that I took them as text. Thus it came to me to use nested jQuery – $($(‘selector’));

To describe what actually happened in my case, let me show you a breve example.

Example

Here’s a short HTML markup:

<div><span>text text</span></div>

With jQuery I can select both the DIV and SPAN with the simple $(‘div’) and $(‘span’), but just for the example lets assume I’ve only the inner text of the DIV tag:

$('div').html();

That was the case in the OpenLayers/jQuery problem. Now I can easily use another jQuery selector:

$($('div').html());

This will return the same as $(‘span’) – a jQuery object.

Looping Animation with JavaScript and Raphaël

Raphael is a popular JavaScript library helping you to manage vectors via SVG or VML in your browser. It is extremely helpful and very easy to learn and use. The interesting thing is that in the browser you can do very powerful things with vectors, but they remain very less known. However with such libraries like Raphael the task is really simple.

Animation

As I said animating some vector properties is as simple as:

var paper = Raphael('canvas', 1024, 500);
var c = paper.circle(50, 50, 6).attr({fill : '#f00'});
c.animate({r : 10, fill : '#00f'}, 1000);

Here we change the radius and the background color of the circle for 1000 milliseconds.

The same thing can be done with any property with any other JavaScript library as jQuery. But as in jQuery, Raphael or whatever library the animation is not looping. That’s natural you can just change a property by animating it, but the looping animation suggests at least two animations. So it’s a developers job to implement this. Here’s a simple way to do this.

Two Way Animation

The solution here is using two functions calling each other.

var paper = Raphael('canvas', 1024, 500);
var c = paper.circle(50, 50, 6).attr({fill : '#f00'});
 
function a() {
    c.animate({r : 10, fill : '#00f'}, 1000, b);
}
function b() {
    c.animate({r : 6, fill : '#f00'}, 1000, a);
}
a();