layout positioning

General
1

how can i tell a layout how wide it should be? it is pretty darn impossible to create an aesthetically pleasing result without the possibility to tell a layout it’s size… is gridlayout any good?

2

When layouting matters, it is simplest to just use CustomLayout. You can use any wysiwyg designer to layout the components this way.

Grid and Ordered layouts are more suitable for quickly putting components on screen (without worrying about layouting).

3

So I can’t accomplish this in Java? I ain’t that good with HTML, so…

4

You can use any wysiwyg designer for this, so you don’t have to write HTML by hand. Just look at the CustomLayout example - you can get the sources and configuration files by unzipping demo/itmill-toolkit.war. Then look at WEB-INF/lib/themes/example/layout/mainLayout.html.

The file is included here:

<table>
  <tr>
    <td><img src="icon_intro.png" /></td>
    <td width="80%"><b>This is an example application that uses custom layouts</b></td>
    <td align="right">
      <!-- login components -->
      <table align="right">
        <tr>
          <td><div location="loginUser"></div></td>
          <td><div location="loginPassword"></div></td>
          <td><div style="width:100px;margin-top:1em" location="loginButton"></div></td>
        </tr>
      </table>
    </td>  
  </tr>
</table>

<table>
  <tr>
    <!-- menu component -->
    <td valign="top" width="150">
      <div location="menu"></div>
    </td>
    <!-- body component, updated by menu clicked event -->
    <td valign="top">
      <div location="body"></div>
    </td>
  </tr>
</table>

As you can see, you can include components into the layout by just adding

5

Could you provide a complete example of how to embed a Button with ajax functionality to a plain html?

Let’s say I have an existing html:

<html>
 <body>
  <div location="i_want_my_itmill_toolkit_button_here"/>
 </body>
</html>

Or does the toolkit have an built in functionality (written in javascript) that requests data from a toolkit servlet and fills the html according to the response?

There are two questions in this post, sorry for the fuzz :wink:

6

Using custom layouts means that Toolkit is the “main” application controlling your pages. Custom layouts cannot be used to “embed” Toolkit components into existing projects, for that see next post…

Here’s an demo:

http://toolkit.itmill.com/demo/CustomLayoutDemo

and
[url]

http://toolkit.itmill.com/demo/src/com/itmill/toolkit/demo/CustomLayoutDemo.java.html

[/url]
And also WEB-INF/lib/themes/example directory within Toolkit-4.0.3 release package.

Throw out another question if you still got questions…

7

Hmm, if you need to embed e.g. single component to existing HTML page, you can checkout Openajax demo here which exactly does that. But the index.html itself is quite a mess because it uses three separate Ajax toolkits within single page :slight_smile:
[url]

http://toolkit.itmill.com/demo/openajax/index.html

[/url]

8

Here’s another post regarding “embedding Toolkit into existing projects”:

http://forum.itmill.com/posts/list/21.page