Bootstrap

As a first step, let’s change our button to be a Bootstrap button. This can be done by removing and re-adding the button. This would be required to change a class in a VCL forms application as well. But this is another type of change that is much faster and easier to do by simply modifying the IWML:

ACORN 1.0 IWML 1.0
TUnit1:Unit1
  Cells[]
    SimpleStack[]
      Edit:GuessEdit;
      Text:MsgText;
      Text:CountText;
      Gap;
      BS.Button:GuessButton
        ServerEvents:
          Click
        ]
        Text: Guess
      ]
    ]
  ]
]

Our application now looks like this:

Now we have a Bootstrap button instead of a the built in IntraWeb button. All we had to do was add the namespace for Bootstrap (BS.) and now we have a different button. The BS.Button is upward compatible with the built in Button, as the BS.Button inherits from Button.

Let’s customize the button a little. This can be easily done with the object inspector:

Or you can modify the IWML:

ACORN 1.0 IWML 1.0
TUnit1:Unit1
  Cells[]
    SimpleStack[]
      Edit:GuessEdit;
      Text:MsgText;
      Text:CountText;
      Gap;
      BS.Button:GuessButton
        ServerEvents:
          Click
        ]
        Text: Guess
        Face: Info
        ButtonSize: Large
      ]
    ]
  ]
]

We changed the Face and ButtonSize. Now it looks like this:

Conclusion

IntraWeb also supports Bootstrap layouts. Next, let’s add in some JQueryUI.