PostHeaderIcon MultiView Component in C++ Builder mobile development

TMultiView Component

TMultiView component represents a container (the master pane) for other controls, and provides a way for you to easily present alternate views of information. The TMultiView component allows you to implement a master-detail interface, which can be used for any supported target platform.

  • The master pane can display a collection of any visual controls, such as edit boxes, labels, lists, and so forth.
  • The detail pane typically displays information based on the properties of the controls in the master pane.

The following picture illustrates an example master-detail interface.

the left is master panel is master, with the right as detail.

Master Pane Presentation Modes

The TMultiView class defines a set of properties that allow you to control the interface behavior. For example, the TMultiView.Mode property specifies the master pane presentation mode as described in the following table:

TMultiView.Mode Master Pane Presentation
Drawer Drawer (Push/Overlap)
Panel Docked panel
PlatformBehaviour (see the following table)
Popover Popup menu
Custom For details, see the Custom Mode subsection.

Camerademo app

Master Pane

  1. Select the TMultiView component in the Tool Palette, and drop it on the Form Designer.
  2. Drop two TButton components into the TMultiview container, and then in the Object Inspector specify the following properties of those buttons:
    • Set the Name property to bStartCamera and bStopCamera, respectively.
    • Set the Text property to Start Camera and Stop Camera, respectively.
  3. Drop a TLabel component into the TMultiview container, and then in the Object Inspector, set its Text property to Camera type:.
  4. Drop two TButton components into the TMultiview container, and then in the Object Inspector specify the following properties of those buttons:
    • Set the Name property to bFrontCamera and bBackCamera, respectively.
    • Set the Text property to Front and Back, respectively.

Detail Pane

  1. Select the TPanel component in the Tool Palette, and drop it on the Form Designer.
  2. In the Object Inspector, set the TPanel.Align property to Client.
  3. Drop the TCameraComponent into the TPanel container.
  4. Drop the TImage into the TPanel container, and set the following properties:
    • NameimgCameraView
    • AlignClient

Implementing the Camera Buttons Functionality

To complete the application development, you should implement event handlers for the application buttons and the GetImage private method that gets an image from the device camera.

implement the OnClick event handlers

  1. implement button-click the Start Camera method;
  2. implement button-click the Stop Camera method;
  3. implement button-click the Front method;
  4. implement button-click the Back method.

Above actions code is below:

// ---------------------------------------------------------------------------
void __fastcall TCameraForm::bStartCameraClick(TObject *Sender) {
    myCameraComponent->Active = true;
}

// ---------------------------------------------------------------------------
void __fastcall TCameraForm::bStopCameraClick(TObject *Sender) {
    myCameraComponent->Active = false;
}

// ---------------------------------------------------------------------------
void __fastcall TCameraForm::bFrontCameraClick(TObject *Sender) {
    myCameraComponent->Active = false;
    myCameraComponent->Kind = TCameraKind::FrontCamera;
    myCameraComponent->Active = true;
}
// ---------------------------------------------------------------------------

void __fastcall TCameraForm::bBackCameraClick(TObject *Sender) {
    myCameraComponent->Active = false;
    myCameraComponent->Kind = TCameraKind::BackCamera;
    myCameraComponent->Active = true;
}
// ---------------------------------------------------------------------------

implement the onSampleBufferReady event handler

myCameraComponent handle the onSampleBufferReady event:

void __fastcall TCameraForm::myCameraComponentSampleBufferReady(TObject *Sender,
    const TMediaTime ATime)

{
    GetImage();
}

// ---------------------------------------------------------------------------
void __fastcall TCameraForm::GetImage() {
    myCameraComponent->SampleBufferToBitmap(imgCameraView->Bitmap, true);
}

Setting the TMultiView Component Properties

In the Form Designer, select the TMultiView component, and then in the Object Inspector, set the following properties:

  • TargetControl = myPanel
  • Mode = Panel
  • VisibleTrue
  • Expand the DrawerOptions node, and set the Mode property to OverlapDetailView.
  • Expand the ShadowOptions node, and set the Color property to Beige. (This property defines the color of the master panel shadow. You can use any available color.)

Run App

13,890 views

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


Copyright © 2010 - C++ Technology. All Rights Reserved.

Powered by Jerry | Free Space Provided by connove.com