ÿþ<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="author" content="Luka Cvrk (www.solucija.com)" /> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <title title="Himalia: Layout">Himalia: Layout</title> <meta name="description" content="Himalia defines a very intuitive a reusable Layout model." /> <meta name="keywords" content="Model-driven user interfaces, user interface builder, layout, panels" /> <link rel="stylesheet" href="images/style.css" type="text/css" /> <link rel="shortcut icon" href="BrowserIcon.ico" /> </head> <body> <div class="content" style="width:99%"> <div class="header"> <div class="logo"> <table> <tr> <td valign="top"><img src="images/UserInterfaceIcon.png" height="50" /></td> <td width="100%"><h1><a href="#"><span class="dark">himalia</span>.net</a></h1></td> </tr> </table> </div> </div> <div class="bar"> <ul> <li id="catHome"><a href="index.html">Home</a></li> <li id="catShowcases"><a href="cases.html">Showcases</a></li> <li id="catDownload"><a href="download.html">Download</a></li> <li id="catDocumentation" class="active"><a href="docs.html">Learn</a></li> <li id="catCommunity"><a href="community.html">Community</a></li> <li id="catFaq"><a href="faq.html">FAQ</a></li> <li id="catAbout"><a href="about.html">About Us</a></li> </ul> </div> <!-- Bradcumbs START --> <h5> &nbsp; <a href="docs.html">Learn</a> &nbsp;>&nbsp; Model & Process &nbsp;>&nbsp; <a href="docs_modelOverview.html">Models</a> </h5> <!-- Bradcumbs END --> <div id="spanDocumentation" class="left"> <span style="font-size: 16pt; color: #666699">Layout Model</span><br /> <span style="font-size: 1.1em"> </span> <br /> <table width="100%"> <tr> <td valign="top" width="20px">&nbsp;</td> <td width="*"> <span style="font-size: 1.1em"> The Layout Model defines the visual composition of the user interface in terms of ScreenAreas. <br /> <br /> A ScreenArea is a contiguous area of a graphical user interface that serves a purpose. ScreenAreas are rectangular, but multiple independent ScreenAreas may be arranged to form arbitrarily shaped areas in future versions. Each ScreenArea is used to model an area on a screen mockup or piece of software. The root ScreenArea is the Screen. It contains all elements of a GUI that are displayed at one point. Its instances are for example application windows or a web page displayed in a web browser. <br /> <br /> <img src="images/layoutExample.gif" /> <br /> <br /> There are four kind of areas:<br /> <br /> <b>Final:</b> The final areas are used to present <a href="docs_navigationModel.html">navigational</a> content using a <a href="docs_himaliaControls.html">control</a>. A final area cannot contain areas; they are  leafs in the composite of areas. In this kind of areas, you must define content rules that look as follows: "For all indexes, use the IndexViewer control." In the image above, <i>help1</i> can be a final area. <br /> <br /> <b>Container:</b> These areas only contain other areas. The <a href="docs_navigationModel.html">navigation elements</a> are not presented in these areas directly. The content is only propagated to the contained areas. In the image above, <i>LeftArea</i> is a container area. <br /> <br /> <b>Abstract or Conditional:</b> This kind of area is used  to break the <a href="http://designinginterfaces.com/Visual_Framework">Visual Framework pattern</a> . When you inherit from an abstract area, you can break the layout within this area in different configurations. In the image above, <i>Target</i> is an abstract area, and <i>VerticalTarget</i> and <i>HorizontalTarget</i> are inheriting from it. Only one sub-area is displayed on screen at a time. <br /> <br /> <b>Disconnected:</b> They are final areas that do not present <a href="docs_navigationModel.html">navigation</a> content. That is, they do not use a control to present application domain navigational content. Usually, they are used to show another type of content such as UI state, top-level navigation, animations, etc. In the image above, <i>ApplicationStateHolder</i> can be a disconnected area. Disconnected areas cannot start <a href="docs_layoutBehavior.html">transitions</a>. <br /> <br /> </span> </td> <td width="*">&nbsp;</td> </tr> </table> </div> <div class="footer"> <table width="100%"> <tr> <td align=left> &copy; <b>Copyright 2006 Himalia. </b> <div style="display:none"> <!--ONESTAT SCRIPTCODE START--> <!-- // Modification of this code is not allowed and will permanently disable your account! // Account ID : 322915 // Website URL: http://www.himalia.net // Copyright (C) 2002-2006 OneStat.com All Rights Reserved --> <div id="OneStatTag"> <table border='0' cellpadding='0' cellspacing='0'> <tr> <td align='center'> <script type="text/javascript"> <!-- function OneStat_Pageview() { var d=document; var sid="322915"; var CONTENTSECTION=""; var osp_URL=d.URL; var osp_Title=d.title; var t=new Date(); var p="http"+(d.URL.indexOf('https:')==0?'s':'')+"://stat.onestat.com/stat.aspx?tagver=2&sid="+sid; p+="&url="+escape(osp_URL); p+="&ti="+escape(osp_Title); p+="&section="+escape(CONTENTSECTION); p+="&rf="+escape(parent==self?document.referrer:top.document.referrer); p+="&tz="+escape(t.getTimezoneOffset()); p+="&ch="+escape(t.getHours()); p+="&js=1"; p+="&ul="+escape(navigator.appName=="Netscape"?navigator.language:navigator.userLanguage); if(typeof(screen)=="object"){ p+="&sr="+screen.width+"x"+screen.height;p+="&cd="+screen.colorDepth; p+="&jo="+(navigator.javaEnabled()?"Yes":"No"); } d.write('<a href="http://www.onestat.com/aspx/login.aspx?sid='+sid+'" target=_blank><img id="ONESTAT_TAG" border="0" src="'+p+'" alt="This site tracked by OneStat.com. Get your own free site tracker."></'+'a>'); } OneStat_Pageview(); //--> </script> <noscript><a href="http://www.onestat.com/aspx/login.aspx?sid='+sid+'"> <img border="0" src="http://stat.onestat.com/stat.aspx?tagver=2&amp;sid=322915&amp;js=No&amp;" alt="internet stats" /></a></noscript></td> </tr> <tr> <td align='center'> <div style="color: black; display: none; font-family: 'Verdana';"> <a href="http://www.onestat.com/" style="text-decoration: none;">internet stats</a><br /> </div> </td> </tr> </table> </div> <!--ONESTAT SCRIPTCODE END--> </div> </td> </tr> </table> </div> </div> </body> <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-648379-1"; urchinTracker(); </script> </html>