2008-3
19
第二节课主要是讲GI的事件，这部分比较抽象，因此用图形来说明问题。
GI之父Luke每周的培训讲座是这次来美国难得的收获，把每节课的总结发表出来和大家分享。第一节课主要内容是GI的Box模型，因为要跟整个团队分享，所以用英文写的，大家凑合着看吧。
1, What is GI?
The definition of GI on TIBCO's website is "TIBCO General Interface™ Builder is the award winning AJAX solution for rapidly building and easily deploying Rich Internet Applications (RIA), AJAX components and portlets that look and feel like desktop software." Actually, this definition focuses on what GI can do but not what GI is. Technically speaking, GI is a client-side server which also has the Model, View and Controller as the same as server application. The general server application generates data for client side, but GI generates the data and page for browser. In fact, the core of GI is a Page Server which takes charge of rendering data and view for web browser.
2, Outside-In & Inside-Out
Different web browsers have different understanding on the same HTML and CSS. Generally, there are two types of HTML box model explaining, one is Outside-In, another one is Inside-Out. For example, the code <span style="width:100;height:100;padding:10;border:10 solid"/> illustrate a box in the browser. In the Outside-In model, the real width and height are both 100, and the border and padding are painted inside the box. However, in the Inside-Out model, the real width and height of box are both 140. Because the Inside-Out model is document-centered, that is to say the content in the box possess the 100 width and height, and the padding and border are expanded outward by the content (See the picture below).
The Inside-Out model is friendly for content, but not easy for size controlling and not suitable for the web application. Therefore, GI chosen the Outside-In model. The problem is different browsers draw different boxes according to the same HTML code (e.g. IE6 is Outside-In, but IE7/8/Firefox are Inside-Out). So, what GI has to do is translating the box definition to make all the web browsers behave the same. For example, if you want to get a box with 100*100 dimension, 10px border and padding inside in Firefox. GI will generate <span style="width:60;height:60;border:10 solid; padding:10;"> for Firefox, and "width:100;height:100" for IE6.
3, How is a GI box painted?
Every GI box model is extended from the object model which owns the basic property, such as id, name, etc. And the box model has some more properties which illustrate how the box looks like. Then, the GI will generate the HTML according to the box definition by executing paint method. Finally, the browser display the box on screen.
4, How does a GI box resize?
When the browser window size is changed, the outside parent block will notify the inside child block that “My size is changed, your space is also changed.” Then, the parent tell child how much space the child has. Finally, GI repaint the child according to the new size.
