TheHippo » Programming

Flex: Using embedded image in HTML-Text

Hippo — Wed, 02 Mar 2011 18:05:09 +0000

I am currently working on a Flash project. Because it has a lot of GUI stuff and it is always a lot of code to make some nice GUI components in pure ActionScript 3 I decided to give Flex a change. Surprisingly I really like it. It’s nice and a little bit sick (for a framework a lot of magic happens during compilation). Like for ActionScript 3 Adobe again did a really good job on writing a nice documentation.

But not everything works flawless. Here is a thing struggled with:

Embedding an image is quite easy (the image will be compiled into the final swf file):

Using HTML to format text shouldn’t be a problem for anyone.

some text
]]>

This will show the image from the given URL and “some text”. The Image is going to be loaded when displayed, it is not embedded into the swf file.

How to use a embedded image in a HTML text element?

It took a while, so here is the solution. It is not clean as it should, but it works.

First you need a helper class, which embeds the image:

package embeds {
import mx.core.BitmapAsset;
import flash.display.Sprite;
public class ImageAsset extends Sprite {
[Embed(source="image.jpg")]
[Bindable]
private var source : Class;
public function ImageAsset() {
super();
var image:BitmapAsset = new source();
addChild(image);
}
}
}

Then you could do this, as I said it looks a little bit like a hack, but it works just fine.

import embeds.ImageAsset;
// this is needed, otherwise the image is not
// available within the html text
private var hack:ImageAsset;
]]>
some text
]]>

How to combine DELETE and JOIN in one MySQL query

Hippo — Tue, 18 Jan 2011 18:33:30 +0000

Today I discovered that a while back on a PHP/HTML/MySQL project I made some serious mistakes on my database design. To explain it in short:

I have one a table, lets call it “table1″, and another table, lets call it “table2″. Table1 references a row from table2, but I didn’t used foreign keys in these days. (I don’t if I didn’t know that they are exist or if InnoDB wasn’t available.) The Website has an admin tool which edits all the tables through some HTML forms. My mistake was that it is possible to delete a row from table2 which leaves all the rows in table1 referencing this row in table2 somehow broken. Today someone discovered this mistake I needed to clean this up. My idea was to create a simple query which cleans table1 and the alter the PHP which deleting rows from table2 to also clean up table1.

I started which the following query:

DELETE FROM table1 WHERE id IN (
SELECT t1.id
FROM table1 AS t1
LEFT JOIN table2 AS t2 ON t1.key = t2.key
WHERE t2.key IS NULL
)

Which leads to the following error:

#1093 - You can't specify target table 'table1' for update in FROM clause

I was some kind of shocked because I had no idea whats wrong with this query. After searching the web for a while I found out that it is some kind of bug in MySQL but there is a weird looking workaround:

DELETE FROM table1 WHERE id IN (
SELECT id
FROM (
SELECT t1.id
FROM table1 AS t1
LEFT JOIN table2 AS t2 ON t1.key = t2.key
WHERE t2.key IS NULL
) AS temp
)

This works very nicely, but costs a lot of performance, because you need to add another subquery and you create a temporary table. So the better solution is to sanitise all your data before you remove some referenced rows

JavaScript curiosity: mixing function and global scope

Hippo — Mon, 31 May 2010 15:05:46 +0000

I am developing with JavaScript for a while and I am used to a lot of it quirks. But even after years of using this language you still find new curiosities. Today a struggled a while with this one.
Considering this piece of JavaScript code:

var i = 10;
function foo() {
i++; // i is now 11
console.log("foo1: "+i);
i = 0; // i is now 0
console.log("foo2: "+i);
};
console.log("global1: "+i); // should be 10
foo();
console.log("global2: "+i); // and now 0

Ok. That’s fine. Now we change the code a little bit to this one:

var i = 10;
function foo() {
i++; // is now 11
console.log("foo1: "+i);
var i = 0; //create a new variable with value 0
console.log("foo2: "+i);
};
console.log("global1: "+i); // expect: 10
foo();
console.log("global2: "+i); // expect: 11

What do you expect? I was quite surprised:

global1: 10
foo1: NaN
foo2: 0
global2: 10

Why do we get a Not a Number? Why is JavaScript not using the global var as in the first example? Why is the global variable i not increased, the operation took place before the declaration of the local variable i? JavaScript has some “strange” rules about variable declaration. Every variable declared within a function is initialised at the beginning of the function, so our function actually would look like this:

var i = 10;
function foo() {
var i; //undefined
i++; // undefined + 1 = NaN
console.log("foo1: "+i);
i = 0; //and now 0
console.log("foo2: "+i);
};
console.log("global1: "+i); //10
foo();
console.log("global2: "+i);//still 10, because global i has not changed

Looking into the rules of JSLint which helps to verify JavaScript code to improve the quality of your JavaScript you get a few rules how to safely declare variables:

JavaScript allows var definitions to occur anywhere within a function. JSLint is more strict.
JSLint expects that a var will be declared only once, and that it will be declared before it is used.
JSLint expects that a function will be declared before it is used.
JSLint expects that parameters will not also be declared as vars.
JSLint does not expect the arguments array to be declared as a var.
JSLint does not expect that a var will be defined in a block. This is because JavaScript blocks do not have block scope. This can have unexpected consequences. Define all variables at the top of the function.

So Remember: Variables are not initialised when they are declared!

Links:

all JSLint rules for quality JavaScript code.
WTFJS.com, a page collection all kinds of JavaScript curiosities.