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!

02/25/2016 13:38:34

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