Divis Blog

Just another geeks blog.

Writing ICQ Open Xtraz

clock January 15, 2009 08:04 by author Divi

As I read that ICQ 6.5 has been release some days agon, I wasn’t quite excited ... various errors, crashes and disturbing little things had put the old versions into a bad light. Actually I had sworn to myself never to use ICQ again, after it crashed the last time without any reason, but because I already broke that intention several times by clicking quicklaunch-items that were laying around, I thought I could at least have a look at the new version ... The only thing worth to mention seemed to be the "Open Xtraz"-campaign:

clip_image002

I almost left the page as I decided to find out what these Open Xtraz would be. So I opened the Developers Zone and got desperately disappointed ... about 10 forum entries and only rudimentary instructions for the Xtraz just wasn’t what I expected. But at least there was a list of things to do when you wanted to develop your own extra:

1.) Download Open Xtraz Developer Tool

2.) Download Open Xtraz Template

3.) Develope and test

4.) Upload Xtra into the gallery

Seemed to be quite simple – so I downloaded the DevTool and clicked the link for getting the template – but the template didn’t want to be loaded as long as I wouldn’t have installed the new ICQ, so I decided to install it.

After everything was installed, I first opened the screen "My Xtraz" (See below). The screens had been empty at this point. So I clicked the "button" "Create Xtra" (at the right bottom).

clip_image004

But that didn’t open, as expected, the developer tool, but a link which pointed back to the "Developer Zone". Here I had to click on the link "Download template", which made ICQ create a directory on my drive. In this directory were placed two subfolders named "content" and "theme" as well as several configuration files. All together it remembered me on the packages which are used to create Firefox extensions. In another subfolder in the themes directory you can find the icons (ICQ not wants you to change their file names). And lastly there’re Javascript-, HTML and some image files in the "content"-folder.

If you open the Xtra it will look somehow like this:

clip_image006

And here we can see the reason why it’s necessary to download a new template for each Xtra. ICQ seems to create the IDs in this way (see the title of the page (green bar))… As if they couldn’t have done this while uploading the Xtra into the gallery ;-)

Well ... at least we now know that it’s just HTML and Javascript. So let’s have a look into the "developer tool" ... you guess it:

clip_image008

Nothing special - instead of some kind of developement environment or at least something that could give you a hint how to do it, it’s just a UI for setting some metadata for the project. For example you can set the name or the description of the project as well as the size of the window in which the Xtra should be displayed.

In the middle you’ll find two radio-buttons, which decide where the project is located ... The upper radio button (default) simply contains a link to the directory which ICQ created while creating the Xtra. The lower radio button (this could be quite interesting) tells the Xtra that the project is located at a specific web address. This means that you could for example host interactive content on your own server with a database behind it.

The locations below the radio buttons are more for your information then meaningful for any actions - they just help you getting through the jungle of icq template-directories ;-). Lastly at the very bottom there’s a link for creating a zip archive out of your Xtra which you then can upload - that’s all about the "developer tool".

So let’s have a look at the files in the directories themselves.

The HTML-file:

The HTML file has links to the included func.js file as well as a link to a Javascript file that is located at the ICQ-server, which contains the API. The rest of the files only contain some HTML and CSS, which result at the screenshot you could see above.

The JS-file:

In the JS file you got the following first line:

var icqConnector = XtrazConnector.getIcqConnector();

Here will be the XtrazConnector-object used to initialize the so called IcqConnector. If you got a debugger, just like the Visual Studio, you simply can insert the keyword "debugger" into the first line of the init method and you get any information about the Connector:

clip_image010

At my first peek at this interface, I really had to laugh quite loud – didn’t I just read that the JS file, which was hosted at the ICQ server itself, was named "open_xtraz_wrapper_1.js"?  So why did we get here already ApiVersion 2? ;-) ... well ... details ;-D.

At least we can see here a rough overview about the functions which the Xtraz API is offering. We can create "Alerts" (Alerts are the small windows which appear directly above the SysTray) and send a message there... The attempt to use it for debugging reasons turned out to be very very annoying, because I flooded myself with Alerts and had to click each single one to read the next one ;-).

Another method for example is GetUserList(). This method returns the following object:

clip_image012

At first I was a little bit over-challenged, because I thought I could access the properties via their indexes – but this was prohibited to me. Would I have had a look into the documentation a little bit earlier (which btw. doesn’t explain how it works), I could have saved me some time for searching, because at the definition of the method "GetGroupList()" they’re accessed via "Group(Idx)" which also works for this method ... So we can simply create a loop through all the users via a for loop which walks all the items from zero to the number of items:

var users = icqConnector.getUserList();
for (var i = 0; i < users.Count; i++)
{
  var user = users.Item(i);
}

 

The user object then offer you all the information about your contacts which these entered – that means in my case I always had the nick name at hand but only very rarely the real name. The birthday was filled at the half of all my contacts, so I decided to create a birthday list for testing. After some attempts it looked similar to this:

clip_image014

The scrollbar I had to add myself, but that was done very quickly, because the "Developer Tool" allowed me to set a fix height of the window and I just had to add a DIV with the specific height and the style property "overflow:auto". Of cause I added a small headline, as well as a link to my website – but that’s all. One interesting thing about this was the case that ICQ threw an Javascript-error as I tried to access a table via innerHTML – because of this the list is only mad of floating DIVs.

After everything was finished I tested if everything worked fine - and then you could instantly upload it ... I thought :-D ... As I tried to upload the project I got the error message that my mail address could not be verified ... ok - because of security reasons they should do something like this, to prevent malware from being uploaded ... But: After the confirmation of my mail address (ICQ itself removed the "not verified" message from the settings), I still got the message. So I searched via Google for a solution of my problem and found someone who wrote that it didn’t work for him as well until he created a new account. Because I already spent some time for writing this Xtra I decided to try this solution and created (unwillingly) a new account - but that also didn’t work - so I tried to restart my ICQ - and - I was able to upload a version...

Because I could neither find a hint if it worked in the "My Dev" section nor on icq.com, I posted a complaint, that something didn’t work over there...

Meanwhile I got a mail from ICQ ... In this they write, that my Xtra doesn’t match the requirements ... Reason: I didn’t create my own icon. ... damn - ok - icon created and tried again to upload ... obviously they respected my complaint, because now you can’t read anymore "Mail address not valid", but just:

clip_image016

"Upload failed" ... without any reason - without description - nothing that says why the upload failed - I think they just replaced the error message, so that noone can see how they are unable to conrol their own system...

Conclusion:

I think Open Xtraz are a really nice idea ... I think you could create almost something like a second Apple AppStore - but I also think they really fouled up while implementing it. I hit that often on my desk because of the frustration that made me headaches while I was kicked out, tried to login without success or upload files that were blocked without any help, that I’m quite unwilling to deal any further with it ... Request to ICQ: Fix that damn bugs - or at least don’t be that petty to refuse working uploads because they don’t have the icon you want. THANKS!

If someone is interested enough to engage with this and hasn’t been infected by my annoyance, you can find the reference to the API here. I wish you a lot of fun with your projects - it’s quite funny - I hope you will succeed with your uploads ;-)

[Update]

About 3-4 days after my second complaint I got a message from ICQ that told me that my error was recognized and fixed. Meanwhile the birthday list has been downloaded about 10.000 times. You can find its gallery page here. Now everything seems to be working fine. I'm glad to see that ICQ was able to fix their problems. One warning I'd like to give you for your way: If you're using alternative clients for the ICQ network, you might get multiple contact requests daily by bots that try to add you to their contact list. I got about 4-5 contact requests a day from several russian accounts. (And of course - I also tried to reply to them to check wheter it could be just someone interested in talking to me ;-D). If you're using ICQ itself, you can open your settings and block all messages from persons which are not in your contact list. That's working fine with ICQ. In Trillian this doesn't seem to work the way I wanted it to (as far as I experienced it).

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


Various javascript libraries

clock March 10, 2008 22:04 by author Divi

In the last few days I got the time to read some magazines I neglected for the last 1-2 weeks. While I read them, I found some very interesting JS libraries:

 

Bevel-JS

Link: http://www.netzgesta.de/bevel/

A cool script, which enables you to modify images via javascript.

image

In the foreground, you can see the image which can be found in the example directory of the library, while in the background there're the modified images with applied image filters. Both included JS files only have an altogether size of 48kb.

 

Flot-JS

Link: http://code.google.com/p/flot/

The following code is from the example directory:

$(function () {

var d1 = [];

for (var i = 0; i < 14; i += 0.5)

d1.push([i, Math.sin(i)]);

var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

// a null signifies separate line segments

var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

$.plot($("#placeholder"), [ d1, d2, d3 ]);

});

What looks a little bit mathematical is just the description of several graphs, which look as following:

image 

This is just a simple version of what the flot-library offers. Another slightly more complex version, which consists of several different graph types can also be found in the example dir:

image

To say it with the words of a colleague of mine: "I won't need that more than once a year - but then it could be realy useful."

One nice thing about these diagrams is: The library offers methods to retrieve the values at the current cursor position and also a way to zoom the displayed diagram.

 

Ext-JS

Link: http://extjs.com

The ExtJS seems to offer some very nice controls. A screenshot of the API-Documentation of the frameworks demonstrates some of the controls, which are also used on their own page:

image

As you can see in the tree on the left-hand side, there're some very useful controls, which can be found in almost all applications. E.g.: Grid, Menu, Tree.

For the lazy guys: There're also some video tutorials available on the page ;-)

 

zXml

Link: http://nczonline.net/downloads/

If you click on the link above, you'll be redirected to a page, where you can find many nice JS-libraries. E.g. one extension extends the JS-arrays with the method "clone".

But the class I've been interested in most, offers an browser independent interface to handle XML. The JS file is only 14kb in size and offers to write code like the following:

//create a DOM document

var oXml = zXmlDom.createDocument();

//fill it with some XML

oXml.loadXML("<root><child index=\"1\"/><child index=\"2\"/> <child index=\"1\"/><child index=\"3\"/></root>");

//look around

alert("Root is: " + oXml.documentElement.tagName);

alert("First child is: " + oXml.documentElement.firstChild.tagName);

As you can see, you're able to use the usual terms like firstChild or tagName to work with the various elements and their values.

 

Dojo-Offline-Toolkit

Link: http://dojotoolkit.org/offline

The "entwickler"-magazine (edition: march/april) wrote an article about the usage of the dojo-offline-toolkit in cooperation with Google-Gears. Google-Gears offers a SQLite database and a proxy server to store dynamic content on the client to display it controlled when it's needed.

The dojo-offline toolkit doesn't add new functionality to Google-Gears, but offers some methods to ease the work with Gears. Some of the methods are the "Dojo-Storage" which can persist objects, methods to execute sql and some to download resources from the given page (called 'slurp').

 

Only for the completeness of this page are here some further links to frameworks I know:

- Prototype

- Script.Aculo.Us

- Moo-Ajax und Moo-FX

- JQuery

- ASP.Net Ajax

All of these are great frameworks which don't only focus on ajax but also add perfect effects for your page. However I assume that these frameworks are much more common and don't need any explanation here.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


Sitecore Xpress released

clock February 7, 2008 23:13 by author Divi

Today it was the time I waited for. Almost as on christmas I was glad that as I entered the page of "Sitecore Xpress", there was no longer the teaser saying "Coming to a server near you...", but a nice looking download page. For sure I logged in instantly and downloaded it. Small 250MB, which needed less than 10 minutes on their way to my desktop ... the license code on the other hand took his time ... I got it at 4pm - But the waiting was worth it. Now I can finally play around with it on VISTA...

image

The commercial Sitecore (recently called "Sitecore red") had some problems with IIS on Vista ... But I think that will be also fixed on the next version, which I await shortly.

In any way - it's nice to simply ignore the small error message on the beginning (saying the IIS would not run) and just start installing it and - who would have believed - after some minutes - a browser window opened, the page appeared and it simply works. This is how it looks on my screen: 

image

That cheered my heart.

 

But what the hell is Sitecore? Sitecore is a highly developed CMS - the best I've ever seen. You almost have the like on your own desktop, if you're welcomed directly after the login with the following screen:

image

(Yes - that's a screenshot of the current version) ... so just don't wonder if the windows need a little bit longer on the first opening... .Net has to compile the libraries for the first run.

As you can see on the screenshot, the interface looks almost like an Windows-desktop ... and also the "Content Editor" corresponds to the layout of the Windows-Explorer. As a Windows user you shouldn't have any problems to find your way through the system:

image

 

So if you would gladly try that CMS, which is normally for commercial use only and which is also used in enterprise solutions: Download Sitecore Xpress in any case! It's free and you won't ever have the same kind of fun with any other CMS ;-).

 

Links

Sitecore Website

Sitecore Xpress Website (DOWNLOAD)

German Sitecore Solution Partner "netzkern GmbH"

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


Center content on page

clock January 31, 2008 10:47 by author Divi

One day after another I'm having the problem of centering content in the middle of a web-page.

My default way was to enclose the whole page in <center>-tags and put matching content into it - but there're some problems with that.

But from time to time there has been some kind of solution using the "margin"-style-property. The problem: Sometimes it worked - but sometimes it didn't - here it is how you have to do it:

margin:0 auto

With this combination you tell the page "take care of the distance of the content on the left and the right side, so that they match each other.".

Explanation: The first value combines the properties margin-top and -bottom, while the second value combines the -left and -right values.

To get that working there's only one very important thing you have to remember. If you use only this property, the browser will take ALL THE PLACE IT GETS - and that means that it will just fill the whole page with the content and say "ok - space filled - no margin needed". To prevent this you have to set a specific width for the content of the page:

width: Xpx (X = numeric value for the content width)

If you use both style-properties in the tag of the main-content element, it will center automatically (no matter how wide the window is).

 

AutoMargin

 

Hint: If you're working with the <center>-tag - that also works great - you only have to align the content manually again (e.g. if you don't want the text to be centered, you have to say "text-align:left".

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5


Disadvantageous chosen design

clock January 9, 2008 20:35 by author Divi

As we exported a list of voucher codes today, we were shocked, because the list was completely empty. There were only two users that seemed to have entered a code, but there were just the first two digits saved.

We've searched with two persons for about 45 minutes for that bug, because we guessed that there'd be an error while saving the other parts of the code - but despite of which special cases we tried: Everything just worked fine.

After several tests we just went to the page itself and wanted to check if there'd also work everything - but it became obvious: It just was a matter of the design :-D

The place were the voucher codes should be inserted just contained two UNLABELED textboxes. Something like this:

 

The problem that occured, caused by the design, was: The left box was intended to carry the code, while the right box just should take some kind of location information (e.g. a zip or something like that) which allowed every value you entered. Because the voucher code seems to be writte with a dash, or simply just because there was no information about what to insert into the second box, the potential customers splitted the code into both fields. That caused an error in the validation, which could only be resolved, if you deleted both fields. (The reason why the first value was saved is: We didn't clean up the value, if you just entered nothing). Obviously most of the people have tried just stopped trying it after some errors ... or even left the page. That's the reason why we just got the two incomplete codes.

Note: You shouldn't assume that the people which visit your page have the same thoughts as you had when you created the page (after you thought about that for several weeks during the layout period) ;-)

Appendix: Something I forgot to say - the design was created by the customer himself.

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5