Ham is a Geek: November 2007

Wednesday, November 21, 2007

VMware Server 2.0 Beta : Tempted ? Don't !!!

If you're tempted to give VMware 2.0 BETA for a spin, take my advice and wait.
Here are 2 compelling reasons why NOT ....

The VMware server console desktop application is gone. The only 2 ways to access your virtual machine is (a) thru the web browser by installing a plugin to view and control the console and (b) remote desktop access (e.g. vnc or rdp)

It installs tomcat and friends. It's possible that memory management on virtual machines may have improved on 2.0 but whatever memory you save will no doubt be consumed by the web server that serves up the web interface.

I for one am extremely disappointed that the server console is gone. It seems I am not alone. VMware server 2.0 would be great if I have a dedicated server to run all my virtual machines, problem is I and many others don't and VMware is forgetting about us by not including a desktop client like VMware server 1.0 has.

Are we doomed to VMware player instead ? Or maybe it's time to try VirtualBox :-)

Wednesday, November 14, 2007

multiple TinyMCE 3 instances on one page

Two of my favorite javascript libraries, YUI and ExtJS, both have WYSIWYG editors. While the editor for ExtJS , in my opinion, has some more ways to go, I've heard raves about YUI's implementation at least from one other developer.

However, there is one WYSIWYG editor that trumps them both and all the others I've seen, it's called TinyMCE.

So it's no wonder that many a developer would like to use it and/or integrate it into their javascript library of choice, including myself.

If you visit the TinyMCE wiki, you'll probably learn to initialize TinyMCE like this


tinyMCE.init({
theme : "advanced",
mode : "textarea",
language : "en",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough"
});

This works great if :

you want the editor to appear immediately after the page has loaded
all the editors on your page share the same configuration

In one of my recent projects with ExtJS 2.0 I needed to instantiate two different TinyMCE instances in different layout panels so the method above won't work, so here's how I did it.

Store the configuration objects in an array.


var configArray = [{
theme : "advanced",
mode : "none",
language : "en",
height:"200",
width:"100%",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""
},{
theme : "advanced",
mode : "none",
language : "en",
width:"100%",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left"
}]

In a DOM event, like click or expand that reveals one of my TinyMCE instances (textarea1), I do ..



tinyMCE.settings = configArray[0];
tinyMCE.execCommand('mceAddControl', true, "textarea1");

When I want to reveal my second TinyMCE instance (textarea2), I do ..



tinyMCE.settings = configArray[1];
tinyMCE.execCommand('mceAddControl', true, "textarea2");

To clear the contents of the TinyMCE editor on textarea1, I do ...



tinyMCE.editors.textarea1.setContent(" ");

Here is an html page with the above in action. Remember to change the src of the tinymce javascript.


<html>

<head>
<title>TinyMCE </title>

<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script>

var tinymceConfigs = [ {theme : "advanced",
        mode : "none",
        language : "en",
        height:"200",
        width:"100%",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : "" },{ theme : "advanced",
        mode : "none",
        language : "en",
        height:"200",
        width:"100%",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left"}];

function tinyfy(settingid,el_id) {
    tinyMCE.settings = tinymceConfigs[settingid];
    tinyMCE.execCommand('mceAddControl', true, el_id);
}

</script>

</head>

<body>

<h2>Editor 1</h2>
<a href="javascript:void(0)" onclick="tinyfy(0,'ed1')">show editor 1</a>

<br><textarea id="ed1"></textarea>

<h2>Editor 2</h2>
<a href="javascript:void(0)" onclick="tinyfy(1,'ed2')">show editor 2</a>

<br><textarea id="ed2"></textarea>

</body>

</html>