[rhmessaging-commits] rhmessaging commits: r3215 - mgmt/trunk/notes.

[rhmessaging-commits at lists.jboss.org]

Author: eallen
Date: 2009-03-26 10:32:55 -0400 (Thu, 26 Mar 2009)
New Revision: 3215

Added:
   mgmt/trunk/notes/fullpage widgets.txt
Log:
Notes on how to make a block of HTML full page.

Added: mgmt/trunk/notes/fullpage widgets.txt
===================================================================
--- mgmt/trunk/notes/fullpage widgets.txt	                        (rev 0)
+++ mgmt/trunk/notes/fullpage widgets.txt	2009-03-26 14:32:55 UTC (rev 3215)
@@ -0,0 +1,53 @@
+How to implement a full page widget
+
+Any block of HTML can be made full page in cumin. By full page, I mean it can be displayed using most of the browser windows width and height.
+
+To do this, you need to add the class "fullpageable" to the block of HTML. If there is no surrounding block, you'll need to add one.
+For example, to make the following HTML fullpage-able:
+    <h2>This is a cool widget</h2>
+    {cool_widget}
+    
+you'll need to surround the HTML with an element that has a class of "fullpageable" like this:
+    <div class="fullpageable">
+    <h2>This is a coll widget</h2>
+    {cool_widget}
+    </div>
+    
+If the HTML already has a surrounding block, you can just add the "fullpageable" class:
+    <p class="explain">
+        {important_stuff}
+    </p>
+    
+    can be made fullpageable like this:
+    
+    <p class="explain fullpageable">
+        {important_stuff}
+    </p>
+    
+How it looks:
+    A block of HTML that is fullpageable will have a special mouseover style. 
+    When the mouse if over any part of the HTML, there will be a light purple bar at the top of the HTML with a 
+    small icon in the upper right corner.
+    Clicking on the icon will display the HTML in a block that is about 95% of the page's width and height.
+    If the contents of the HTML automatically sizes to it's container, it should expand to the full page.
+    
+    If however, the HTML is a fixed size, it won't expand. Instead, you may want to use the background
+    update ability of cumin to re-render the widget using it's new container size.
+    
+Under the kimono:
+    When the page first loads, there is a script that runs and finds all elements containing the class "fullpageable".
+    It then surrounds each of those elements with some divs and wires in some mouseover and click behaviors.
+    When the fullpage icon is clicked, the handler will "promote" the fullpageable HTML to be a direct child
+    of the document.body. This allows the HTML to be positioned and sized to the full window. Clicking the
+    icon again will restore the HTML to it's original position in the DOM.
+    
+    Additionally, when any block of HTML is made fullpage, the current background update url is modified to
+    indicate that cumin is in fullpage mode. This allows any widgets contained in the fullpaged HTML to modify
+    how they are rendered to take advantage of the extra screen space. During render, widgets can optionally call the 
+    self.page.get_fullpage(session) method to determine if they should render normally, or full page.
+    If the return of self.page.get_fullpage(session) is not None, the widget can render full page.
+    The value returned by self.page.get_fullpage(session) is the new width the widget can occupy.
+    
+    
+    
+     
\ No newline at end of file