view source

[sasha]

This is probably a silly question but when I try to view the source of the initial zimbra page ( the one you get after logging in ) , I see absolutely no html just 100% javascript ... I am a little perplexed ... where is the html ? Even if it is created on the fly by javascript it should still show up in the page source . Huh?
What ?

[czaveri]

For me it is significantly more JavaScript than HTML.

I did, File->Save As and saved the page on my disk and opened it with 'vi'.

There is a lot of JavaScript but not 100%.
And there is a lot of  

...

[sasha]

I am using latest code from svn EDISON branch ...

[pshah]

You wont see a whole lot of static HTML because we use JS to dynamically create and set HTML into the DOM (for example, using innerHTML).

[sasha]

I understand that is probably what you are doing ... but I still don't get it ... 'page source' is 'page source' ... you should still see the resulting
HTML . I thought anyway .

Maybe I need a crash course in DHTML ... maybe that will give me some idea what is going on here ....

But you do realize this kind of code makes it very difficult to decipher and manipulate the HTML .... can anyone recommend what kind of prerequisite knowledge I need for this code ? I am mostly just a Java person and I have done some AJAX on .NET . But this pure 100% javascript is too over the top for me ... at least so far .

[czaveri]

Exactly, Sasha! I would like to know, too, ... what are the pre-requisites to be able to hack into code. :-)

One, I know, is the DWT (DHTML Windowing Toolkit) which is a part of larger AjaxTk from Zimbra.

There is some documentation on the Wiki but nothing comprehensive or a tutorial-like. It's more of a reference.

(I think)
Regarding JavaScript displaying code in browser:

In a normal Ajax based page you don't see the many results that you fetch from database when you try to view source. But they will be dynamically generated using the XMLHTTPObject on some event or using some other logic.

Now, say you want to display image1.gif if some logic is true or display image2.gif if that logic is false.

In such a case, your source will look only JavaScript. Right?

Is that what you say JIT Compiler? Or maybe something of that sort. The browser interprets JavaScript and displays on the fly.

[pshah]

Sasha, what you are seeing is indeed the "source code" - it just so happens that the source code is generating more "code" that gets added to the DOM dynamically. This is the beauty of DHTML.

As for pre-req's, it all depends on what you're trying to do at the end of the day. Generally, you need a *very* good undertanding of Javascript which does all the logic (as well as layout when used in conjunction w/ DHTML). This not only includes the core Javascript API, but also event handling, prototyping (i.e. in terms of creating objects), etc. The DHTML part also includes having a good understanding of CSS and of course basic HTML. The O'Reilly books for Javascript and DHTML are great resources to start with.

More specifically, to learn how the client communicates with the server, you'll want to understand AJAX and JSON.

To learn how the client is architected, it helps to understand MVC (model-view-controller) design pattern as well object oriented design (and more specifically with how to do OO using JS).

To learn the AJAX toolkit, it helps to understand Java AWT/Swing and SWT as this is what it was originally based on.

I think any more details is beyond the scope of a forum article. A more specific question/issue may be easier to answer

[czaveri]

Wow! pshah,

Thanks so much for these details. This is really the most comprehensive information on Pre-requisites...

[cdamon]

What you see when you View Source is the starting point (launch page) for ZCS, which loads a big pile of Javascript and creates an empty skin that we fill in later programmatically. The content you see (eg your inbox) is created by adding to the DOM dynamically (via DOM methods or innerHTML), so it doesn't show up as source to the browser because the browser didn't download it when you made the HTTP request.

You can view the DOM using a DOM inspector. If you're using Firefox, you may already have one (depends which version you have). It's in the Tools menu. If you don't have it, the extension is easy to find and install. It's a neat tool that will show you all kinds of details about the DOM tree. You can even click on a node and have it dump its HTML (right-click, Copy XML).

All those spaces are a workaround for a Firefox bug that breaks DnD (they fill in dead spots). We hate those spaces too, and are looking for a better workaround.

-Conrad

[sasha]

Thanks guys ... the DOM Inspector thing is something new to me ... thanks for that also .