CSS based chevrons
This week we are seeing some very cool ideas finally maturing onto the visual canvas. First and foremost: inline graphics. Under the traditional HTML paradigm resources such as images or soundfiles were always losely bound external entities. So before an image could be used it naturally had to download its content from a webserver or read it from a local file. But under HTML5 all of that goes out the window, because now you can embed your graphics as Base64 encoded characters. In short: transform your graphics into text and they can be applied anywhere.
So today our TW3MenuListItem class got automatic support for inline glyphs. The default glyph is of-course the ordinary iPhone chevron picture, but when TImageList is done you will be able to apply just about anything. Since this is HTML5 you can also make use of your styles to add further “bling” to your elements – but we will leave that part up to you. Our job is to deliver a system with the basic iOS widgets ready – but object pascal style, which means easy to use, easy to work with and as little fluff as possible.
Orientation
Angles should be used prudently
Another cool feature that is now going through the test phase is the Angle property. All components that derive from TCustomControl have this property, and as the name suggests you can use it to rotate the control as you see fit. While it’s not the biggest feature in the world it does open up for a more colorful expression in the user interface. Want a yellow price banner over a product? Put a label on it, set the color and put -30 in the degree property.
Animations
This feature is my favorite, but it’s also the most complex to capture under object pascal. Webkit allows you to define animation sequences, which can then be applied to a html element or a style. You then use a trigger rule to activate the animation. The cool part is of-course that most of these effects have hardware support – so they run smoothly and without any flicker what so ever.
Since Javascript is not the fastest horse in the stable, at least not on devices like iPhone 3GS – it’s very important to use hardware accelerated animations as much as possible. You don’t want to rotate a picture by manipulating the degree property under a timer. It works of-course, but the results cant be compared to the effects produced by hardware accelerated CSS3 animations.
But of-course, under OP4JS you don’t have to worry about that