Aspects

Core Basic Controls Extension Controls Community Extensions You are here

Aspects Effects Combinations

Why Gaia Ajax?
The ASP.NET world needed a fast, lightfoot and intelligent library.
Gaia boosts your webapp development using C# or VB.NET and your existing ASP.NET knowledge. Gaia only sends what has changed back to the browser.
The result: a rich and responsive user experience.

Runs on ASP.NET

Gaia Ajax Viewport Example

This is our Ajax Viewport Example. This Viewport is built by small building blocks of Ajax widgets like our Ajax Panel, AspectDraggable, ExtendedPanel and so on. And by combining these small building blocks together you experience something far more expressive and flexible than what most other Ajax component vendors can offer you. Gaia Ajax is an Ajax Framework and not an Ajax Component suite. And this makes Gaia extremely flexible. Click the "Show Viewport" button further down and try to resize the different views in the window popping up. Or try to resize the two ExtendedPanels separated by the grey dottet line in the middle of this screen.

We recommend testing out the Viewport Community Extension. This extension made by our community makes it easy to have the Viewport as a separate control and the logic of the Viewport is hidden from your business logic.

Extended Panel with 100% width

This Extended Panel has 100% width which means you can get panels to fill the entire surface of your area.

39% width

Here we have two ExtendedPanels with a third "normal" panel between them which...

60% width

...effectively have created a Split View for us. Important thing to notice is that this splitview is even doing calculations in PERCENTAGE which is quite unique ;)

100px Width

Here we have...

100px Width

...rendered 6 panels...

100px Width

...inside a div with width of 100%...

100px Width

...and all of them are floating to the left...

100px Width

...which means that they will "spill over"...

100px Width

...when they come to the right end of the container they're within!

Shows another viewport

100% Width, no collapsing, movable

This panel have collapsing turned OFF. If you try to click the "arrow icon" in any of the other panels you will see that they are in fact collapsing. This panel have collapsing turned OFF. But you can MOVE this panel around. And if you move it you will see this text change

100% Width, draggable with animation

And this panel will animate for 0.2 seconds when collapsed in addition to that it is movable. And for all logic things which can be done with the panel you have the option of creating an Event Handler for it trapping that event in your own code and respond to it. So you see why we have named this widget "Extended Panel".

ASPX Markup
C# code
VB.NET
styles.css

Markup (ASPX/.aspx)
  
     <div style="width:100%;position:relative;">
         <gaia:ExtendedPanel 
             runat="server" 
             Caption="Extended Panel with 100% width" 
             Collapsed="false"
             Draggable="false"
             style="width:100%;"
             ID="ext1">
             <div style="padding:15px;">
                 This Extended Panel has 100% width which means you can get panels to fill the
                 entire surface of your area.
             </div>
         </gaia:ExtendedPanel>
     </div>
     <div style="width:100%;position:relative;">
         <gaia:ExtendedPanel 
             runat="server" 
             Caption="39% width" 
             Collapsed="false"
             Draggable="false"
             style="width:39%;float:left;overflow:hidden;"
             ID="pnlLeft">
             <div style="padding:15px;height:80px;">
                 Here we have two ExtendedPanels with a third "normal" panel between them which...
             </div>
         </gaia:ExtendedPanel>
         <gaia:Panel 
             runat="server" 
             ID="dragger" 
             CssClass="viewPortDraggerVert"
             style="height:137px;z-index:699;">
         </gaia:Panel>
         <gaia:ExtendedPanel 
             runat="server" 
             
             Caption="60% width" 
             Collapsed="false"
             Draggable="false" 
             style="width:60%;float:left;overflow:hidden;"
             ID="pnlRight">
             <div style="padding:15px;height:80px;">
                 ...effectively have created a Split View for us. Important thing to notice is that this splitview 
                 is even doing calculations in PERCENTAGE which is quite unique ;)
             </div>
         </gaia:ExtendedPanel>
     </div>
     <br style="clear:both;" />
     <div style="width:100%;position:relative;">
         <gaia:ExtendedPanel 
             runat="server" 
             
             Caption="100px Width" 
             Collapsed="false"
             Draggable="false"
             style="width:100px;float:left;"
             ID="dragRight">
             <div style="padding:15px;height:100px;">
                 Here we have...
             </div>
         </gaia:ExtendedPanel>
         <gaia:ExtendedPanel 
             runat="server" 
             
             Caption="100px Width" 
             Collapsed="false"
             Draggable="false"
             style="width:100px;float:left;"
             ID="ExtendedPanel2">
             <div style="padding:15px;height:100px;">
                 ...rendered 6 panels...
             </div>
         </gaia:ExtendedPanel>
         <gaia:ExtendedPanel 
             runat="server" 
             
             Caption="100px Width" 
             Collapsed="false"
             Draggable="false"
             style="width:100px;float:left;"
             ID="ExtendedPanel3">
             <div style="padding:15px;height:100px;">
                 ...inside a div with width of 100%...
             </div>
         </gaia:ExtendedPanel>
         <gaia:ExtendedPanel 
             runat="server" 
             
             Caption="100px Width" 
             Collapsed="false"
             Draggable="false"
             style="width:100px;float:left;"
             ID="ExtendedPanel4">
             <div style="padding:15px;height:100px;">
                 ...and all of them are floating to the left...
             </div>
         </gaia:ExtendedPanel>
         <gaia:ExtendedPanel 
             runat="server" 
             
             Caption="100px Width" 
             Collapsed="false"
             Draggable="false"
             style="width:100px;float:left;"
             ID="ExtendedPanel5">
             <div style="padding:15px;height:100px;">
                 ...which means that they will "spill over"...
             </div>
         </gaia:ExtendedPanel>
         <gaia:ExtendedPanel 
             runat="server" 
             
             Caption="100px Width" 
             Collapsed="false"
             Draggable="false"
             style="width:100px;float:left;"
             ID="ExtendedPanel6">
             <div style="padding:15px;height:100px;">
                 ...when they come to the right end of the container they're within!
             </div>
         </gaia:ExtendedPanel>
         <gaia:ExtendedPanel 
             runat="server" 
             
             Caption="Shows another viewport" 
             Collapsed="false"
             Draggable="false"
             style="width:200px;float:left;"
             ID="ExtendedPanel1">
             <div style="padding:15px;height:100px;">
                 <gaia:ExtendedButton 
                     runat="server" 
                     OnClick="showWindow_Click"
                     
                     ID="showWindow" Height="35" 
                     Text="Show viewport" />
             </div>
         </gaia:ExtendedPanel>
     </div>
     <br style="clear:both;" />
     <div style="width:100%;position:relative;height:130px;">
         <gaia:ExtendedPanel 
             runat="server" 
             
             Caption="100% Width, no collapsing, movable" 
             Collapsed="false"
             Draggable="true"
             style="width:100%;" 
             OnMoved="MovedPanel"
             CanBeToggled="false" 
             ID="ExtendedPanel8">
             <div style="padding:15px;height:70px;">
                 This panel have collapsing turned OFF. If you try to click the "arrow icon"
                 in any of the other panels you will see that they are in fact collapsing. This
                 panel have collapsing turned OFF. But you can MOVE this panel around. And if
                 you move it you will see <gaia:Label runat="server" Text="this text" ID="lblMovable" />
                 change
             </div>
         </gaia:ExtendedPanel>
     </div>
     <div style="width:100%;position:relative;height:140px;">
         <gaia:ExtendedPanel 
             runat="server" 
             
             Caption="100% Width, draggable with animation" 
             Collapsed="false"
             Draggable="true" 
             AnimationDuration="200"
             style="width:100%;" 
             CanBeToggled="true" 
             ID="ExtendedPanel9">
             <div style="padding:15px;height:80px;">
                 And this panel will animate for 0.2 seconds when collapsed in addition to that 
                 it is movable. And for all logic things which can be done with the panel you
                 have the option of creating an Event Handler for it trapping that event
                 in your own code and respond to it. So you see why we have named this
                 widget "Extended Panel".
             </div>
         </gaia:ExtendedPanel>
     </div>
     <gaia:Window 
         id="viewportWindow" 
         Width="800px" 
         Height="700px" 
         Draggable="true" 
         Minimizable="false" 
         Resizable="false" 
         Maximizable="false"
         Caption="Ajax Viewport"
         Closable="true"
         Visible="false"
          
         runat="server">
  
         <gaia:Panel 
             runat="server" 
             ID="viewTop" 
             style="width:100%;height:39%;background-color:#fefefe;overflow:auto;">
  
             <gaia:Accordion 
                 AnimationDuration="300"
                 runat="server" 
                 
                 ID="acc">
  
                 <gaia:ExtendedPanel runat="server" Collapsed="false" Caption="Flash animations">
                     <div style="padding:15px;">
                         <gaia:ExtendedButton 
                             ID="animateButton"
                             OnClick="animateClicked"
                              
                             runat="server" 
                             Text="Click me" />
                     </div>
                 </gaia:ExtendedPanel>
                 <gaia:ExtendedPanel runat="server" Collapsed="true" Caption="Something else">
  
                     <gaia:TabControl runat="server"  Height="150px">
                     
                         <gaia:TabView ID="TabView1" runat="server" Caption="Tab 1">
                             <div style="padding:15px;">
                                 <p>
                                     And HTML within TabControls too :)
                                 </p>
                             </div>
                         </gaia:TabView>
  
                         <gaia:TabView ID="TabView2" runat="server" Caption="Tab 2">
                             <div style="padding:15px;">
                                 <p>
                                     Gaia is about freedom to create! We want to put the fun back into systems development. 
                                 </p>
                             </div>
                         </gaia:TabView>
  
                     </gaia:TabControl>
  
                 </gaia:ExtendedPanel>
                 <gaia:ExtendedPanel runat="server" Collapsed="true" Caption="'Pure' HTML">
                     <div style="padding:15px;">
                         <h3>HTML</h3>
                         <p>
                             As you can see it's easy to also embed <strong>HTML</strong> inside any other Container Widgets...
                         </p>
                     </div>
                 </gaia:ExtendedPanel>
  
             </gaia:Accordion>
  
         </gaia:Panel>
  
         <gaia:Panel 
             runat="server" 
             ID="draggerTop" 
             CssClass="viewPortDraggerHorz">
         </gaia:Panel>
  
         <gaia:ExtendedPanel 
             runat="server" 
             ID="viewLeft" 
              
             Draggable="false" 
             CanBeToggled="false"
             Caption="TreeView here..."
             style="width:25%;height:60%;background-color:#fefefe;float:left;">
  
             <gaia:TreeView 
                 OnNodeSelected="tree_NodeSelected"
                 runat="server" 
                 ID="tree" 
                  
                 style="width:100%;margin-bottom:4px;background-color:#fefefe;">
  
                 <gaia:TreeViewItem runat="server"   Collapsed="false" IconCssClass="folder">
                     Cool Stuff
                     <gaia:TreeViewItem runat="server"  Collapsed="true" IconCssClass="folder">
                         Web
                         <gaia:TreeViewItem ID="xhtml" runat="server"  IsLeaf="true" IconCssClass="file">
                             XHTML
                         </gaia:TreeViewItem>
                         <gaia:TreeViewItem ID="css" runat="server"  IsLeaf="true" IconCssClass="file">
                             CSS
                         </gaia:TreeViewItem>
                         <gaia:TreeViewItem ID="js" runat="server"  IsLeaf="true" IconCssClass="file">
                             JavaScript
                         </gaia:TreeViewItem>
                     </gaia:TreeViewItem>
                     <gaia:TreeViewItem runat="server"  IconCssClass="folder">
                         Music
                         <gaia:TreeViewItem ID="jazz" runat="server"  IsLeaf="true" IconCssClass="file">
                             Jazz
                         </gaia:TreeViewItem>
                         <gaia:TreeViewItem ID="classic" runat="server"  IsLeaf="true" IconCssClass="file">
                             Classic
                         </gaia:TreeViewItem>
                     </gaia:TreeViewItem>
                 </gaia:TreeViewItem>
  
             </gaia:TreeView>
  
         </gaia:ExtendedPanel>
  
         <gaia:Panel 
             runat="server" 
             ID="draggerCenter" 
             CssClass="viewPortDraggerVert">
         </gaia:Panel>
  
         <gaia:ExtendedPanel 
             runat="server" 
             ID="viewRight" 
              
             Draggable="false" 
             CanBeToggled="false"
             Caption="TreeView OUTPUT here..."
             style="width:74%;height:60%;background-color:#fefefe;float:left;">
             <div style="margin:15px;">
                 <gaia:Label 
                     runat="server" 
                     ID="msg" />
             </div>
         </gaia:ExtendedPanel>
  
     </gaia:Window>
     
  
  