The best way to look at a ABMContainer component is like it is a mini ABMPage helper. It has less options but the flow is almost the same. You can add Rows, Cells and other components.
ABMContainers are mosly used to further drill down a cell defined in the page. With an ABMContainer control, you get again a grid of 12 cells so you can do exactly as it was a page.
Lets show an example. We have a page with a row split into two columns of each 6 cells. In the left cell we've added a container with the grid example from the ABMPage chapter.
12 Cells
Our standard grid has 12 cells. No matter the size of the browser, each of these cells will always have an equal width.
1
2
3
4
5
6
7
8
9
10
11
12
To get a feel of how the grid is used ...
// create the container Dim cont1 As ABMContainer cont1.Initialize(page, "cont1", "") cont1.AddRows(1,True, "").AddCells12(1,"") cont1.AddRowsM(1,True,0,0, "").AddCellsOS(12,0,0,0,1,1,1,"") cont1.AddRows(1,True, "").AddCells12(1,"") cont1.BuildGrid // IMPORTANT // add sub header cont1.Cell(1,1).AddComponent(ABMShared.BuildSubHeader(page, "shdr1", "12 Cells")) // add paragraph cont1.Cell(1,1).AddComponent(ABMShared.BuildParagraph(page, "par2","Our standard grid has 12 cells. No matter the size of the browser, each of these cells will always have an equal width.")) // add 12 cells For i=1 To 12 cont1.Cell(2,i).UseTheme("cellLB") Dim lblGrid As ABMLabel lblGrid.Initialize(page, "Rgrid2C" & i & "Label", "" & i, ABM.SIZE_H6, True, "lblGrid") cont1.Cell(2,i).AddComponent(lblGrid) Next // add paragraph cont1.Cell(3,1).AddComponent(ABMShared.BuildParagraph(page, "par3", "To get a feel of how the grid is used ...")) page.Cell(2,1).AddComponent(cont1)
As you can see, this code is almost exactly the same as the beginning of the code in the ABMPage chapter, except we changed page.Add... to cont1.Add... and added the components accordingly.
This is a very powerful component and if you take your time to think about how the grid of your page must look like, a real time saver.
For further information on how the container works, check out the ABMPage and the Grids chapter (but I'm sure you know that one by heart by now).
Animations
ABMContainers (and ergo all it's children) can be animated with scaling, rotating, moving, blurring and transparancies. This can be done with InitializeAnimated() and creating ABMAnimation objects. See the blur demo to see how it is done!

This is a new animated card
// the blur effect Dim btn2 As ABMButton btn2.InitializeRaised(page, "btn2", "", "", "Unblur", "bluegrey") btn2.Tag = "unblur" page.Cell(8,1).AddComponent(btn2) // create the container with animation // you ALWAYS need an Initial state, duration should be 0 for the initial state Dim myAnim4 As ABMAnimation myAnim4.Initialize("initialblur", 0, ABM.TWEEN_EASEINQUAD) myAnim4.Opacity(0.0) myAnim4.Blur(20) page.AddAnimation(myAnim4) // we create an animation to 'unblur' Dim myAnim5 As ABMAnimation myAnim5.Initialize("unblur", 500, ABM.TWEEN_EASEINQUAD) myAnim5.Opacity(1) myAnim5.Blur(0) page.AddAnimation(myAnim5) // we create an animation to 'blur' Dim myAnim6 As ABMAnimation myAnim6.Initialize("blur", 500, ABM.TWEEN_EASEINQUAD) myAnim6.Opacity(0.0) myAnim6.Blur(20) page.AddAnimation(myAnim6) Dim cont3 As ABMContainer // new initialize method where you have to set your initial animation cont3.InitializeAnimated(page, "cont3", "initialblur", "") cont3.AddRowsM(1,False,0,0, "").AddCells12(1,"") cont3.BuildGrid // IMPORTANT Dim codeBlock As String = "..." cont3.Cell(1,1).AddComponent(ABMShared.BuildCodeBlockFromSmartString(page, "codeblock", codeBlock)) page.Cell(9,1).AddComponent(cont3)
Using the AnimationFinished event and the RunAnimation method, you can control what must be animated:
Sub cont3_AnimationFinished(Target As String, lastAnimation As String) Log("Animation finished: " & lastAnimation) Select Case lastAnimation Case "unblur" Dim btn2 As ABMButton = page.Component("btn2") btn2.Tag = "blur" btn2.Text = "Blur" btn2.Refresh Case "blur" Dim btn2 As ABMButton = page.Component("btn2") btn2.Tag = "unblur" btn2.Text = "Unblur" btn2.Refresh // reset to start position Dim cont3 As ABMContainer = page.Component("cont3") cont3.RunAnimation("initialblur") End Select End Sub
Sub btn2_Clicked(Target As String) Dim btn2 As ABMButton = page.Component("btn2") Dim cont3 As ABMContainer = page.Component("cont3") Select Case btn2.Tag Case "unblur" cont3.RunAnimation("unblur") Case "blur" cont3.RunAnimation("blur") End Select End Sub