Spark Application Layout Questions

Just started playing out with Flex 4 Beta...
Does anyone know the reasoning why spark application's layout property has to be set to a new instance of a layoutContainer?  For instance, in my MXML I have to say layout="{new spark.layouts.VerticalLayout()}".  With halo I could do layout="Vertical".
Are there new enhancements to the spark components with regards to layouts that prompted this change?  What cool new things can I do with them?
Thanks,
Bryan

And another cool thing you can do with the new layout system is change values using the new states syntax:
<?xml version="1.0"?><s:Application 
xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
    <s:VerticalLayout gap="24" gap.state2="4"            paddingLeft="
20" paddingTop="20" /> 
</s:layout>
<s:states>
    <s:State name="state1" /> 
    <s:State name="state2" /> 
</s:states>
<s:HGroup>
    <s:Button label="goto state1" click="currentState='state1';" /> 
    <s:Button label="goto state2" click="currentState='state2';" /> 
</s:HGroup>
<s:Button label="Button 1" /> 
<s:Button label="Button 2" /> 
<s:Button label="Button 3" /> 
<s:Button label="Button 4" />
</s:Application>
Using the code above, the default/state1 state will use a vertial gap of 24 pixels, while state2 will use a vertical gap of only 4 pixels.
Peter

Similar Messages

  • Flex 3 vs Flex4 ..Application Layout Question

    When we develop a same dummy application in Flex3 and Flex4 and run them.
    Flash4: I see a space reserved for vertical scroll bar on the right side of the screen. How can we remove that as the reduces my screen size.
    Flex3: i dont see any.

    Nevermind.
    I got around this issue by renaming my sub-classed Application to "...Application".
    Now I can use a directive to specify an import statement for the extends Application portion rather than specifiing the fully qualified spark.components.Application or mx.core.Application.
    Lame - but done.

  • [svn:fx-trunk] 5019: ASDoc updates to indicate that some Halo containers do not work with the Spark equiv (ControlBar does not work with Spark Panel/ AppControlBar does not work with Spark Application), and indicate that Canvas, Box, Tile, Panel have Spa

    Revision: 5019
    Author: [email protected]
    Date: 2009-02-19 13:17:21 -0800 (Thu, 19 Feb 2009)
    Log Message:
    ASDoc updates to indicate that some Halo containers do not work with the Spark equiv (ControlBar does not work with Spark Panel/AppControlBar does not work with Spark Application), and indicate that Canvas, Box, Tile, Panel have Spark equivs
    QE Notes: None
    Doc Notes: None
    Bugs: -
    Modified Paths:
    flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/Accordion.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/ApplicationControlBar.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/Box.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/Canvas.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/ControlBar.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/HBox.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/Panel.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/TabNavigator.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/Tile.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/VBox.as
    flex/sdk/trunk/frameworks/projects/framework/src/mx/containers/ViewStack.as

    Hi DST
    This is a great effort and gesture. thank you on behalf of all the newbies.
    PJ

  • [svn:fx-trunk] 10358: Change Application. application so it can return spark Applications and spark WindowedApplications .

    Revision: 10358
    Author:   [email protected]
    Date:     2009-09-17 14:18:43 -0700 (Thu, 17 Sep 2009)
    Log Message:
    Change Application.application so it can return spark Applications and spark WindowedApplications.
    Application.application is still deprecated but this change makes the transition to using Spark Applications easier.
    QE notes: None.
    Doc notes: None.
    Bugs: SDK-21898
    Reviewer: Gordon
    Tests run: checkintests, Application
    Is noteworthy for integration: no.
    Ticket Links:
        http://bugs.adobe.com/jira/browse/SDK-21898
    Modified Paths:
        flex/sdk/trunk/frameworks/projects/framework/src/mx/core/Application.as

    Try setting the stepSize on the slider to 4. That should reduce the jiggle effect.
    Not sure if it helps, but the following way of placing the graphic in the skin means you don't need to use those binding tags. The group within the graphic will automatically scale. (I use 48 as an arbitrary size for the group. But it will always display relative to the size of the button. You may need to adjust the 30 and 8 values to match your original.)
    <s:Graphic left="1" right="1" top="1" bottom="1"  >
    <s:Group width="48" height="48" >
    <s:Rect  horizontalCenter="0" verticalCenter="0" height="30" width="8">
    <s:stroke>
    <s:SolidColorStroke color="0x000000"/>
    </s:stroke>
    <s:fill>
    <s:SolidColor color="0xff0000"/>
    </s:fill>
    </s:Rect>
    <s:Rect  horizontalCenter="0" verticalCenter="0" height="8" width="30">
    <s:stroke>
    <s:SolidColorStroke color="0x000000"/>
    </s:stroke>
    <s:fill>
    <s:SolidColor color="0xff0000"/>
    </s:fill>
    </s:Rect>
    </s:Group>
    </s:Graphic>

  • Scroll bar in spark application

    hi all
    i have developed a spark application, but its vey strange that scroll are not coming automatically if the application is resized.
    So how can i get the scroll bars.
    Please Help
    regards
    kapil arora

    Tried that but still scroll are not coming.

  • Footer in Spark application

    I'd love to be able to setup a footer at the bottom of my spark application, which runs in a browser. I was reading through the documentation of Application and the awesome Adobe examples. Unfortunately I keep getting lost when the documentation talks about how to position the control bar area at the bottom via spark.skins.spark.ApplicationSkin - sadly I'm not sure what that means from a practical standpoint and am stuck. How exactly do I set this up?
    Do I need to create an application skin (doesn't seem to be an option for the MXML skins) and apply it to the skin? Or instantiate ApplicationSkin and do something with it (what, exactly)?
    Sorry, I'm sure this offensively simple, but I can't find any obvious example anywhere...
    f

    You would want to copy the default Application skin, and then move the "topGroup" after the "contentGroup" in its parent's VerticalLayout.
    For example with attached custom skin:
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   skinClass="CustomApplicationSkin">
        <s:controlBarContent>
            <s:Button label="hello world" />
        </s:controlBarContent>
    </s:Application>

  • Application specific questions

    Hello.
    In what transaction can I process application-specific questions of Support Message?

    Hi
    You can give the reply using the action
    SLFN0001_ADVANCED_COMP_QUEST Answers to appl-spec. questions
    within the same ticket or support message  from the action button in the change mode
    are you referring to same.
    Regards
    Prakhar

  • [svn:fx-4.x] 14141: Spark AT Marshalling: Registering the application so that appropriate listeners can be added by AutomationManager to support automation of marshalled spark applications .

    Revision: 14141
    Revision: 14141
    Author:   [email protected]
    Date:     2010-02-12 00:07:28 -0800 (Fri, 12 Feb 2010)
    Log Message:
    Spark AT Marshalling: Registering the application so that appropriate listeners can be added by AutomationManager to support automation of marshalled spark applications.
    QE notes:
    Doc notes:
    Bugs: FLEXENT-1234 - (id is incorrect for marshalled spark WindowedApplication)
    Reviewer:
    Tests run: Checkintests
    Is noteworthy for integration:
    Ticket Links:
        http://bugs.adobe.com/jira/browse/FLEXENT-1234
    Modified Paths:
        flex/sdk/branches/4.x/frameworks/projects/automation_spark/src/spark/automation/delegates /components/SparkApplicationAutomationImpl.as

    thx... have tried it now... works great so far.. good work!! Maybe CL could learn something from us. Everything doesnt have to cost money!!? Once again, great job.Message Edited by HaZe303 on 04-2-2006 09:43 PM

  • Multiple edition magazine layout question

    Magazine(s) layout question
    Details:
    - There are 9 total magazines. The only thing that changes are the ads.
    - I have all text set up in Master Pages and the Different publications set up as 'versions' in my file.
    My issue:
    I also need to ad a footer master (with page number, Publication name, and Date)
    - Publication name changes for each version.
    In the end I need one master with all magazine text assigned to all version. And a different footer master with page numbers to all versions....
    any suggestions on how to complete this?

    Either you can use Alternative Layouts in one document, you will need only to work on the first layout, the text in the outher layouts or you can the Content-Tools and Create LInk option to take the original and place it into the new document. Later you have only to update the links in the link panel. You can take by option the whole page with all elements.

  • Spark Layout Question

    Hi,
    I am experimenting with Spark Layouts and this what I have
    <s:List id="list" height="123" verticalCenter="0" dataProvider="{itemList}"
                     itemRenderer="MyRenderer" width="350" horizontalCenter="0" depth="100">
            <s:layout>
                <layouts:CircularLayout id="myLayout" />
            </s:layout>
        </s:List>
    In updateDisplayList of CircularLayout.as
    var layoutTarget:DataGroup = target as DataGroup;
    for(var i:int = 0; i < target.numElements; i++)
         var element:IVisualElement = layoutTarget.getElementAt(i) as IVisualElement;
    element is null.
    I am using Flex 4.5 SDK
    Any ideas why this could happen?
    Thanks

    If you do get to a point where you want to use virtual layout then this post might be useful to learn how:
    http://flexponential.com/2010/03/06/learn-how-to-create-a-simple-virtual-layout-in-flex-4/

  • LAYOUT QUESTIONS - CSS ISSUES

    I am trying to center the three middle divs (the one with the three tabs and purple text, the one that says rotating images and the black nav - these are 3 separate divs) of the attached page so there is a green border on just the sides with white at the bottom below the footer (and ideally white in the sides of the top blue nav). I tried creating a wrapper, but it dos not cause anything to center. I centered the top blue nav bar with auto margins left and right. Layout/Formatting Questions:
    1) How do I center this so there is a green "background" only on eitehr side of this "center" section of the page?
    2) how do I ensure the black navigation div Icreated always falls as pictured here and that is rests on topp of the footer, with no green in between? (sometimes it moves to the right of the div above it)
    3) How can I right justify just the Email and Facebook icons - I can't get them to move to the right?
    Code is pasted below.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>JAHMA New Jersey Affordable Housing Management Association</title>
    <style type="text/css">
    <!--
    #wrapper {
    background-color:#FFFFFF;
    width: 960px;
    margin-left:auto;
    margin-right:auto;
    body  {
    text-align: left;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #9ACD32;
    #header {
    height:189px;
    background: #FFF;
    #mainNavigation {
    width:860px;
    height:48px;
    margin-left:auto;
    margin-right:auto;
    background-color: #FFF;
    #subNavigation {
    background-color:#FFF;
    width:50%;
    margin-left:50px;
    float:left;
    margin-bottom: 0px;
    #mainContent {
    background-color:#FFF;
    width:38%;
    margin-left:100px;
    float:left;
    padding-left: 15px;
    line-height: normal;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    color: #000;
    border-bottom-color: #666;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-right-style: solid;
    border-right-color: #666;
    border-right-width: 1px;
    #rightSidebar {
    width:28%;
    float: left;
    padding: 10px;
    margin: 0 0 5 0;
    border-left-style: solid;
    border-left-color: #666;
    border-left-width: 1px;
    border-bottom-color: #666;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    background-color: #FFF;
    #memberNav {
    background-color:#000;
    clear:right;
    width: 28%;
    float: left;
    color: #FFF;
    height: 45px;
    margin: 0 0 0 0;
    padding: 10px;
    #memberNav ul {
    padding: 10 20 10 20;
    color: #FFF;
    background #000
    ; font-size: 16px;
    display: inline;
    list-style-type: none;
    #memberNav ul li a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #FFF;
    text-decoration: none;
    float: left;
    text-align: center;
    padding-right: 20px;
    padding-left: 20px;
    #footer {
    clear:both;
    font-size:12px;
    color:#999;
    text-align:left;
    padding-left: 50px;
    padding-right: 50px;
    background-color: #FFF;
    height: 150px;
    a:link {
    text-decoration: none;
    color: #FFF;
    a:visited {
    text-decoration: none;
    color:#999999;
    a:hover {
    text-decoration: none;
    color:#CCCCCC;
    a:active {
    text-decoration: none;
    p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-align: left;
    margin: 0;
    padding: 0;
    line-height: 1;
    h1 {
    color: #08ADEF;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.5;
    margin: 1 0 0 0;
    padding: 0;
    h2 {
    color: #92278F;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    margin: 0 0 0 0;
    padding: 0;
    .icon {
    float: none;
    padding-right: 5px;
    padding-left: 10px;
    .navButton {
    .search {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #999;
    #searchBar {
    position:absolute;
    width:260px;
    height:84px;
    z-index:1;
    left: 568px;
    top: 115px;
    .floatRight {
    margin: 5px;
    float: right;
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    </script>
    </head>
    <body leftmargin="0" topmargin="0" onload="MM_preloadImages('images/news-tab-rollover.jpg','images/jahma-resources-tab-rollo ver.jpg','images/events-tab-rollover.jpg','images/about-rollover.jpg','images/programs-tab -rollover.jpg','images/foundation-tab-rollover.jpg')">
    <script type="text/javascript">
    // Google Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
    // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
    // This notice must stay intact for use
    //Enter domain of site to search.
    var domainroot="www.jahma.org.com"
    function Gsitesearch(curobj){
    curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
    </script>
    <div id="searchBar">
      <form action="http://www.google.com/search" method="get" onSubmit="Gsitesearch(this)">
    <input name="q2" type="hidden" />
       <br />
       <input name="qfront" type="text" style="width: 180px" /> <input type="image" class="icon" value="Search" src="images/search.png" align="bottom" />
    <br />
    <span class="search">SEARCH</span>
    </p>
      </form>
    </div>
    <div id="#wrapper">
      <div id="header">
      <img src="images/jahma-banner.jpg" width="960" height="189" alt="logo" /></div>
      <div id="mainNavigation">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#" class="MenuBarItemSubmenu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/about-rollover.jpg',1)"><img src="images/about.jpg" alt="about JAHMA" name="about" width="210" height="49" border="0" id="about" /></a>
            <ul>
              <li><a href="#" class="MenuBarItemSubmenu">Who We Are</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">What We Do</a></li>
              <li><a href="#" >Joining JAHMA</a>
                <ul>
                  <li><a href="#" class="MenuBarItemSubmenu">Membership</a></li>
                  <li><a href="#" class="MenuBarItemSubmenu">Application</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">JAHMA Members</a>
                <ul>
                  <li><a href="#" class="MenuBarItemSubmenu">Regular Members</a></li>
                  <li><a href="#" class="MenuBarItemSubmenu">Associate Members</a></li>
                  <li><a href="#" class="MenuBarItemSubmenu">Affiliate Members</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">Board of Directors and Committees</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">JAHMA Administration &amp; Contact Info</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('programs','','images/programs-tab-rollover.jpg',1)"><img src="images/programs-tab.jpg" alt="JAHMA programs" name="programs" width="210" height="49" border="0" id="progams" /></a>
            <ul>
              <li><a href="#" class="MenuBarItemSubmenu">Events &amp; Training</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Poster/Calendar Contest</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Publications and Ad Rates</a>
                <ul>
      <li><a href="#" class="MenuBarItemSubmenu">JAHMA Talk</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Membership Directory</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">Ad Order Form</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">Job Opportunities</a>
                <ul>
                  <li><a href="#"class="MenuBarItemSubmenu">Post a Job</a></li>
                  <li><a href="#"class="MenuBarItemSubmenu">Available Jobs</a></li>
                  <li><a href="#"class="MenuBarItemSubmenu">NAHMA's Career Center</a></li>
                  <li><a href="#"class="MenuBarItemSubmenu">USA jobs.gov</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('foundation','','images/foundation-tab-rollover.jpg',1)"><img src="images/foundation-tab.jpg" alt="JAHMA foundation" name="foundation" width="210" height="49" border="0" id="foundation" /></a>
            <ul>
              <li><a href="#" class="MenuBarItemSubmenu">What the Foundation is</a>        </li>
              <li><a href="#" class="MenuBarItemSubmenu">The Scholarship Program</a>
                <ul>
                  <li><a href="#" class="MenuBarItemSubmenu">Scholarship Application</a></li>
                  <li><a href="#" class="MenuBarItemSubmenu">Past Scholarship Recipients</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">Golf Outing Fundraiser</a>
                <ul>
                  <li><a href="#" class="MenuBarItemSubmenu">List of Supporters</a></li>
                  <li><a href="#" class="MenuBarItemSubmenu">Golf Outing Sign-Up Sheet</a></li>
                  <li><a href="#" class="MenuBarItemSubmenu">Make a Contribution</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">In Time of Need</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact', '','images/contact-tab-rollover.jpg',1)"><img src="images/contact-tab.jpg" alt="contacts" name="contacts" width="210" height="49" border="0" id="contacts" /></a>
            <ul>
              <li><a href="#" class="MenuBarItemSubmenu">JAHMA Administration &amp; Contact Info</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">NAHMA</a>
                <ul>
                  <li><a href="#" class="MenuBarItemSubmenu">Communities of Quality Program</a></li>
                  <li><a href="#" class="MenuBarItemSubmenu">Credentials</a></li>
                  <li><a href="#" class="MenuBarItemSubmenu">NAHMA Education and Training</a></li>
                </ul>
              </li>
              <li><a href="#" class="MenuBarItemSubmenu">PennDel AHMA</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Industry/Realtors Associations</a></li>
              <li><a href="#" class="MenuBarItemSubmenu">Government Agencies</a>
                <ul>
                  <li><a href="#" class="MenuBarItemSubmenu">NJ Agencies</a></li>
                  <li><a href="#" class="MenuBarItemSubmenu">Federal</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div id="mainContent"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','images/events-tab-rollover.jpg',1)"><img src="images/events-tab.jpg" alt="events" name="events" width="150" height="53" border="0" id="events" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('news','','images/news-tab-rollover.jpg',1)"><img src="images/news-tab.jpg" alt="news" name="news" width="150" height="53" border="0" id="news" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resources','','images/jahma-resources-tab-rollover.jpg',1)"><i mg src="images/jahma-resources-tab.jpg" alt="resources" name="resources" width="150" height="53" border="0" id="resources" /></a>
        <h1>September 22-23, 2011</h1>
        <h2><img src="images/register-button.jpg" alt="register button" width="100" height="102" class="floatRight" />  NAHMA's TAX CREDIT TRAINING &amp; SHCM&#8482; EXAM</h2>
        <p>sponsored by PennDel AHMA &amp; JAHMA Hotel ML formerly Mt. Laurel Marriott<br />
          Mt. Laurel, NJ<br />
          More Information  </p>
        <div id="registerButton"></div>
        <h1>September 27, 2011</h1>
        <img src="images/register-button.jpg" alt="register button" width="100" height="102" class="floatRight" />
        <h2>MAINTENANCE TECHNICIAN'S WORKSHOP: PART II REAC ON-SITE WORKSHOP</h2>
        <p>Gloucester Towne, Gloucester, NJ<br />
          More Information</p>
        <p> </p>
      </div>
      <div id="rightSidebar">
        <p>Rotating images here</p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        <p> </p>
        </div>
      <div id="memberNav">
        <ul>
          <li><a href="#" >Regular<br />
          Members</a></li>
          <li><a href="#" >Associate<br />
          Members</a></li>
          <li><a href="#" >Affiliate<br />
          Members</a></li>
          </ul>
      </div>
      <div id="footer">
        <p> <img src="images/JAHMA-footer-logo.jpg" width="100" alt="logo" />P.O. Box 4 &#8226; Riverton, NJ 0807 &#8226; 856-786-9590 &#8226; Fax 856-786-6265<img src="images/email.png" alt="email" width="32" height="42" class="icon" />
        <img src="images/facebook.png" alt="facebook" width="42" height="42" class="icon" /></p>
      </div>
    </div>
    <p> </p>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

    To centre the 3 divs under the navigation you'll need to first delete the left margin of 100px set on the 'mainContent' <div> css.
    Then you'll need to wrap all three <divs> in another <div></div> and set its width to the same width as the navigation <div> - 860px and use  margin: 0 auto; on the wrapper <div>. Then you can adjust the widths of the 3 <divs> inside it.
    Trying to get a web page that balances up with equal length columns is a pointless exercise. You need to design taking into account that the web is not a 'fixed' medium such as a desk top publishing package. There may be some javascript methods which you might be able to resort to such as 'equal length columns' over at the Project Seven website (that's if they have that extention still available for download. I don't know have'nt been there for a while)
    Wrap your address in its own <div> and float it left and then wrap your icons in their own <div> and float them right (inline css stylng is shown below)
    <div style="float: left; width: 400px;"> <img src="images/JAHMA-footer-logo.jpg" width="100" alt="logo" />P.O. Box 4 &#8226; Riverton, NJ 0807 &#8226; 856-786-9590 &#8226; Fax 856-786-6265</div>
        <div style="float: right; width: 200px;"><img src="images/email.png"  alt="email" width="32" height="42" class="icon" />
        <img src="images/facebook.png" alt="facebook" width="42" height="42" class="icon" /></div>

  • Simple Layout Question

    I need to create an application with the following layout properties:
    a) It's always in the 4;3 ratio with default size of 800x600 and resizeable from 640x480 to 1024x768
    b) It needs to be divided into left side that takes up 20% of space and right side that takes up 80% of space.
    c) Left and right sides are to be independent rectangular areas within which widgets can be docked.
    What is the simplest way for a noob ( : me : ) to do this?
    Thanks.

    Set the layout property of the Application to horizontal
    If your using Flex 3, use <mx:Canvas /> tags
    If using Flex 4, use <s:Group /> tags
    Here's a Flex 4 example:;
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
         width="800" height="600" >
         <s:layout>
              <s:HorizontalLayout />
         </s:layout>
         <s:Group width="20%" />
         <s:Group width="80%" />
    </s:Application>

  • Designing Swing Applications - Layout

    When using JDeveloper to design a Swing application (not ADF Swing) is it possible to;
    1. when viewing the design of a frame for example, is it possible to display a grid so that you can align components correctly?
    2. when you have selected a layout from the properties editor for the panel you are working on, is it possible to display the grid lines of that layout so that you can clearly see what component/group of components are in each of the areas? Similar to when using Macromedia Dreamweaver and dragging components into a table where you can see which cell each component is currently within...
    3. add additional swing layouts to JDeveloper so that they can be used within the properties editor? i.e. tablelayout or design grid layout for example
    4. has anyone come across any guides/tutorials on using JDeveloper to design Swing based applications visually by dragging and dropping components from the palette?
    Thanks in advance for your help/advice
    David

    David - I had alot of those questions when I developed a Swing application. While I won't answer your question directly, take a look at this demo.
    http://www.oracle.com/technology/products/jdev/tips/muench/screencasts/simplejgoodies/binding_demo.html?_template=/ocom/ocom_item_templates/print
    The FormLayout as part of JGoodies managed makes the layout a lot easier - still a few things you have to get used to but it managed most of the hard stuff for your.
    Let me know if that helps
    Regards
    Grant

  • Choosing application-layout

    Hi everyone,
    i don't know if i'm right here but i didn't found where else to post.
    So here is the problem: I've developed a desktop application in java for which i have used the grouplayout since it seemed to me the easiest way to place the elements when i worked with the eclipse and netbeans framework. Now the elements are all placed related to my screen and my screen is 19". When i tried to install it on another computer came up the big problem. Some windows were so big that they couldn't be displayed as in my screen. Somewindows elements where not to be seen and and not to mention the fact that you couldn't even close it because you couldn't see the 'X' button of the window(except Alt+F4). Even after i tried to make those windows smaller to fit in the new screen i had the problem of the panels inside those windows. Some of the java panels i had build inside those windows were to big for that screen or better to say they were placed so that even if i made the big application window smaller by draging the sides with the mouse during running no panel would become smaller. All the elements were like static in their positions.
    the Questions:
    1) Is that the grouplayout is suposed to do? And if yes than why to use such a layout? Why is it there?
    2) What layout should i use in the future not to have this problem again?
    p.s: an example of what i want is any internet browser. While trying to write on this textarea if i maximize the window the element will be i think rebuild to fit in the new size. This textarea will become bigger and also the other way around if i try to make this window smaller this textarea will become smaller. This is something that my application does not do and i think that is the fault of the grouplayout.
    thanx a lot
    anteo

    GroupLayout was designed to be used by IDE's, not human beings.
    What layout should i use in the future not to have this problem again?You don't use a single layout. That is a limitation of using an IDE.
    Generally people start with a BorderLayout. Then you add a toolbar to the North and and a status bar to the south. That leaves the Center for you main application. You would use whatever layout manager or combination of layout manager you require to get the desired effect.
    So start by reading the Swing tutorial on "How to Use Layout Managers" to become familiar with them and then experiment.

  • A few Layout questions.

    Ok, so I'm completely hopeless at making GUIs and was wondering if anyone could give me a few tips.
    This is what I have so far:
    JFrame frame = new JFrame("WindowTitle");
              frame.setSize(800, 600);
              JTextPane text = new JTextPane();
              text.setEditable(false);
              SpringLayout layout = new SpringLayout();
              Container contentPane = frame.getContentPane();
              frame.setLayout(layout);
              contentPane.add(text);
              layout.putConstraint(SpringLayout.WEST, text, 5, SpringLayout.WEST, contentPane);
                  layout.putConstraint(SpringLayout.NORTH, text, 5, SpringLayout.NORTH, contentPane);
              layout.putConstraint(SpringLayout.SOUTH, text, 5, SpringLayout.SOUTH, contentPane);
              JPanel buttonPanel = new JPanel();
              JButton disconnect = new JButton("Disconnect");
              buttonPanel.add(disconnect);
              contentPane.add(buttonPanel, BorderLayout.EAST);
              layout.putConstraint(SpringLayout.WEST, buttonPanel, 5, SpringLayout.EAST, text);
                   layout.putConstraint(SpringLayout.NORTH, buttonPanel, 5, SpringLayout.NORTH, contentPane);
              layout.putConstraint(SpringLayout.SOUTH, buttonPanel, 5, SpringLayout.SOUTH, contentPane);
              frame.setVisible(true);I chose SpringLayout so that I could resize the window and everything would still be in the right place relative to each other.
    Now the problems I have are:
    - The bottom constraint of the JTextPane isn't working. It goes right to the bottom of the Frame.
    - The JPanel takes up the majority of the Frame and the JTextPane only gets a tiny thin strip.
    How can I give the JTextPane priority?
    Edited by: KrimsonEagl on 13/07/2009 00:28

    KrimsonEagl wrote:
    Ahhh thank you heaps!The key in my mind is to nest JPanels or other JComponents each using their own layout, and the simpler the layout used the easier. Many here avoid GridBagLayout if they can, but use it if they need to.
    Just a few questions about your code:
    - How did that code actually make the JTextPane take up most of the space?I first set the preferred size of the mainPanel, not its size. This way the layout managers will try to size it correctly when pack() is called on the JFrame.
    The mainPanel is then added to the JFrame's contentPane. Since I know that contentPane uses a BorderLayout by default, the mainPanel will be added BorderLayout.CENTER by default and will fill the contentPane.
    I then had the mainPanel use the BorderLayout layout manager. The buttonPanel was placed onto mainPanel BorderLayout.LINE_END which is the same as BorderLayout.EAST if the component's ComponentOrientation is set to ComponentOrientation.LEFT_TO_RIGHT, but gives the flexibility of swapping these positions by changing ComponentOrientation. If you'd prefer to use EAST, I think that this is OK, but you'll hear different opinions on this on this forum. Check out the BorderLayout API for a discussion on this as well.
    - What exactly are PAGE_START and LINE_END, why use them instead of WEST and EASTSee above
    - Why use the invokeLater thing? I've seen it a lot but never really understood it.I'm sure that you've read that Swing is not "thread-safe". This doesn't mean that it's broken, but instead means that you should take care to run things in a Swing thread-safe way. Thus when starting a Swing application, you should take care that it starts on the EDT or Event Dispatch Thread, the one Swing thread responsible for painting the GUI and interacting with the user. The "invokeLater thing" does just this: all calls in its Runnable object's run method are called on the EDT.
    Good luck, and HTH.
    edit: I didn't discuss the taking up of space by the editpane...
    best that you read the BorderLayout tutorial and API, as there you'll see how borderlayout distributes its space. Then you can study the other layouts as well.
    Edited by: Encephalopathic on Jul 12, 2009 6:43 AM

Maybe you are looking for

  • Caching problem for iViews with URL parameters

    Hi, We have a big problem with <b>iView caching.</b> Our objective is to use <b>SAP Netweaver Portal 2004s & External Facing portal </b> for a public Internet Portal For performances reasons we need to activate iviews caching on the principal iviews.

  • Between SAP Licenses and Employee Records Realtinship

    Hi Experts <u>The Scenario of the issue is as below.</u> <b>SAP Licenses held by the company is -- numbers. And the employee records including PD(appraisal),PA  & OM exceeds the allowed records numbers.</b> Qn1 Whats the realtion between SAP license

  • Sap HR: how to create Thusda halfday to a ep group

    Hi, I wana create periodic work schedule in which,ever thusda is halfda should be there. working days mon-friday. sat-sun off. Thusday should be halfda. is it posible to create this by using "RULES FOR VARIENTS" under daily work schedule nod" if i ha

  • Images not visible in applet

    Dear all I have this applet for which i designed a toolbar.This toolbar has image icons that display some of the more used controlls. When i test it inside Eclipse i can see if perfectrly. But when i load it inside a browser i get some unexpected beh

  • Rental Help!!!

    I just rented 300 and the download went fine... But when i try to play it it says connecting to itunes store, but won't start playing, i hit the play button and it repets the same thing. I only have 24 hours i need help.... Message was edited by: jam