Shine Time Package

The Morfik ShineTime package contains a single widget (ShineTimeItem) that uses a number of the built-in Morfik graphic transitions to create flyover effects for thumbnail images as seen at http://www.addyosmani.com/resources/shinetime/. The primary difference between the Morfik version and the Addy Osmani one is that the Morfik implementation does not rely on an external javascript file. The code in the package is also a good introduction to utilizing the native Morfik image transition effects.


package-view.png
package-down.png


A quick walkthrough

To use the Morfik ShineTime package simply add the package to the project by utilizing the “Used Packages” command on the project ribbon (see Figure 1 Used Packages Command), or simply drag the package file onto the application main client area. Once added a single widget will appear on the home ribbon when the form designer is active (see Figure 2 Widgets List). These widgets can be placed on application forms and provide immediate functionality with minimal coding.


security-fig1.png
Figure 1: Used Packages Command


1.png
Figure 2: Widgets List


To get started, open a new Morifk 3 application and add the ShineTime package. Then drop a ShintTimeItem widget onto a form. Set the picture to an image in the repository (a 54 pixel x 54 pixel jpg image would be good to start with). You can then run the application and view the effects on the mouse over and mouse out events.


Making Things More Interesting

If you look at the properties tab in the IDE for a ShineTimeItem, you will see a Picture Large text item. This property can be used in conjunction with an Image component to show a picture corresponding to one of the ShineTime Image thumbnails. After assigning an image to each of the Picture Large properties for each ShineTimeItem widget, the code sample below indicates how to set the ShineTimeItem OnClicked event (NOT the OnClick event) to display the Picture Large image:


FX Code

Procedure Form1.WebFormReady(Var Ready: Boolean);
Begin
    mfk_ShineTimeItem1.OnClicked := @ShineTimeItemClicked;
    mfk_ShineTimeItem2.OnClicked := @ShineTimeItemClicked;
    mfk_ShineTimeItem3.OnClicked := @ShineTimeItemClicked;
    …
End;
Procedure Form1.ShineTimeItemClicked(Sender: TObject);
Begin
  If mfk_ShineTimeItem(Sender).imgLarge.Picture <> '' Then
  Begin
      Image1.Picture := mfk_ShineTimeItem(Sender).imgLarge.Picture; 
      TextLabel1.Caption := mfk_ShineTimeItem(Sender).Tag;
  End;
End;


Note that the Image1.Picture property is set to the mkf_ShineTimeItem imgLarge.Picture property in the OnClicked event. This approach will also work when the widget’s picture fields are tied to database fields (See below). Also a text label can be placed below the image to display information about the image. For an illustration of how to make the text label display the same graphics effects as the widget, refer to the downloadable ShineTime demonstration project.


Working with Databases

The ShineTimeItem widget can also be used in conjunction with databases by setting the Picture Field and Picture Large Field properties to image blob fields. At runtime, again, use the imgLarge.Picture property to set the Image1.Picture property. The ShineTime web site referenced at the start of this document can be imitated with images from a database file by implementing the following: Create a Form1 with an Image1 to display the large images from a ShineTimeItem. Create a subform in Form1 and place Form2 in the subform. Connect Form2 to your database table containing the images, set the ColumnCount property of the form to 3 and set the form’s View Mode to vmContinuous. Drop a ShineTimeItem widget on the Detail band of Form2 and resize Form2 to make it as close to the thumbnail size as possible. Set the widget Picture Field and Picture Large Fields to blob fields in the data table (if you are using Firebird, be sure to add a hidden text label with the data field set to MFK$GUID). Place a hidden text label on the detail band and link it to a description field in the table. Add Uses Form1 to the implementation section of Form2 and create an event for the mfk_ShineTimeItem1 OnClick event (not OnClicked) and use the following code:


FX Code

Procedure Form2.ShineTimeItemClick(Sender: TObject; DOMEvent: TDOMEvent);
Begin
    SwitchBandIndex(DOMEvent);
    Form1(XApp.Forms['Form1']).Image1.Picture := mfk_ShineTimeItem1.imgLarge.Picture;
    TextLabel1.BandIndex := mfk_ShineTimeItem1.BandIndex;
    Form1(XApp.Forms['Form1']).TextLabel1.Caption := TextLabel1.Caption;
End;


Compile and run the application and admire your work!


Another potential use for the ShineTimeItem is as a fancy menu item or an image button.

See Also

Back to top