SelectionCheckBox::SelectionCheckBox(Container * parent) :
CustomControl(parent)
{
// The title is stored in the custom control so that we can present which olive
// has been added or removed from the mix. So we initialize the title to an empty QString.
mTitle = QString("");
// A colored rectangle representing the olive color and the
// CheckBox is aligned to the Right side of the component.
Container *checkBoxContainer = Container::create().top(43.0f).bottom(43.0f);
StackLayout *checkBoxLayout = new StackLayout();
checkBoxLayout->setOrientation(LayoutOrientation::LeftToRight);
checkBoxContainer->setLayout(checkBoxLayout);
mColorContainer = new Container();
mColorContainer->setBackground(Color::Black);
mColorContainer->setPreferredSize(42, 42);
mColorContainer->setRightMargin(33.0f);
mColorContainer->setVerticalAlignment(VerticalAlignment::Center);
// The CheckBox which will tell if the olive should be part of the
// olive mix or not.
mOliveCheckBox = new CheckBox();
mOliveCheckBox->setObjectName("checkBox");
mOliveCheckBox->setLayoutProperties(StackLayoutProperties::create().spaceQuota(1));
connect(mOliveCheckBox, SIGNAL(checkedChanged(bool)), this,
SLOT(onCheckedChanged(bool)));
checkBoxContainer->add(mOliveCheckBox);
checkBoxContainer->add(mColorContainer);
setRoot(checkBoxContainer);
}
AlbumItem::AlbumItem(Container *parent) :
CustomControl(parent)
{
// Dock layout with margins inside
Container *itemContainer = new Container();
DockLayout *itemLayout = new DockLayout();
itemContainer->setLayout(itemLayout);
itemContainer->setBackground(ImagePaint(QUrl("asset:///images/customcomponents/list_background.png"), RepeatPattern::XY));
itemContainer->setHorizontalAlignment(HorizontalAlignment::Center);
itemContainer->setMinHeight(212);
itemContainer->setPreferredWidth(740);
// Sub item container
Container *subItemContainer = Container::create();
StackLayout *stackLayout = new StackLayout();
stackLayout->setOrientation( LayoutOrientation::LeftToRight );
subItemContainer->setLayout(stackLayout);
subItemContainer->setTopPadding(10);
subItemContainer->setLeftPadding(10);
subItemContainer->setRightPadding(10);
subItemContainer->setBottomPadding(13);
subItemContainer->setHorizontalAlignment(HorizontalAlignment::Fill);
subItemContainer->setVerticalAlignment(VerticalAlignment::Fill);
// A Colored Container will be used to show if an item is highlighted
mHighlighContainer = Container::create().background(Color::fromARGB(0xff75b5d3)).opacity(0.0);
mHighlighContainer->setHorizontalAlignment(HorizontalAlignment::Fill);
mHighlighContainer->setVerticalAlignment(VerticalAlignment::Fill);
// The list item image, the actual image is set in updateItem
mItemImage = ImageView::create("asset:///images/loading.jpg");
//mItemImage->setHorizontalAlignment(HorizontalAlignment::Left);
mItemImage->setVerticalAlignment(VerticalAlignment::Center);
mItemImage->setPreferredSize(144.0, 192.0);
mItemTitle = Label::create("Title");
mItemTitle->setLayoutProperties(StackLayoutProperties::create().spaceQuota(1));
mItemTitle->textStyle()->setColor(Color::DarkGray);
//mItemTitle->setHorizontalAlignment(HorizontalAlignment::Center);
mItemTitle->setVerticalAlignment(VerticalAlignment::Center);
mItemDescription = Label::create("Description");
mItemDescription->textStyle()->setBase(SystemDefaults::TextStyles::subtitleText());
mItemDescription->setHorizontalAlignment(HorizontalAlignment::Center);
mItemDescription->setVerticalAlignment(VerticalAlignment::Center);
mItemDescription->setMultiline(true);
// Add the shopitem details to the subitem container
subItemContainer->add(mItemImage);
subItemContainer->add(mItemTitle);
subItemContainer->add(mItemDescription);
// Add the background image and the content to the full item container.
itemContainer->add(mHighlighContainer);
itemContainer->add(subItemContainer);
setRoot(itemContainer);
}
LabelRecipe::LabelRecipe(Container *parent) :
CustomControl(parent)
{
Container *recipeContainer = new Container();
StackLayout *recipeLayout = new StackLayout();
recipeLayout->setLayoutDirection(LayoutDirection::LeftToRight);
recipeContainer->setLayout(recipeLayout);
// Here all the available bold type fonts are stacked in a Container.
Container *headerStyleContainer = new Container();
headerStyleContainer->setLayoutProperties(
DockLayoutProperties::create().horizontal(HorizontalAlignment::Center).vertical(
VerticalAlignment::Center));
headerStyleContainer->setRightMargin(60);
headerStyleContainer->add(
setUpLabelWithStyle((const QString) "BigText", SystemDefaults::TextStyles::bigText(),
true, Color::Gray , true));
headerStyleContainer->add(
setUpLabelWithStyle((const QString) "TitleText", SystemDefaults::TextStyles::titleText(),
true, Color::Gray, true));
headerStyleContainer->add(
setUpLabelWithStyle((const QString) "BodyText", SystemDefaults::TextStyles::bodyText(),
true, Color::Gray, true));
headerStyleContainer->add(
setUpLabelWithStyle((const QString) "SubtitleText", SystemDefaults::TextStyles::subtitleText(),
true, Color::Gray, true ));
headerStyleContainer->add(
setUpLabelWithStyle((const QString) "SmallText", SystemDefaults::TextStyles::smallText(),
true, Color::Gray, true));
// The second stacked Container show the regular style fonts.
Container *paragraphStyleContainer = new Container();
paragraphStyleContainer->add(
setUpLabelWithStyle((const QString) "BigText", SystemDefaults::TextStyles::bigText(),
false, Color::Gray, false));
paragraphStyleContainer->add(
setUpLabelWithStyle((const QString) "TitleText", SystemDefaults::TextStyles::titleText(),
false, Color::Gray, false));
paragraphStyleContainer->add(
setUpLabelWithStyle((const QString) "BodyText", SystemDefaults::TextStyles::bodyText(),
false, Color::Gray, false));
paragraphStyleContainer->add(
setUpLabelWithStyle((const QString) "SubtitleText", SystemDefaults::TextStyles::subtitleText(),
false, Color::Gray, false));
paragraphStyleContainer->add(
setUpLabelWithStyle((const QString) "SmallText", SystemDefaults::TextStyles::smallText(),
false, Color::Gray, false));
recipeContainer->add(headerStyleContainer);
recipeContainer->add(paragraphStyleContainer);
setRoot(recipeContainer);
}
RepeatedImage::RepeatedImage(Container *parent)
: CustomControl(parent)
, m_count(0)
, m_imageWidth(0)
, m_imageHeight(0)
{
StackLayout *pStackLayout = new StackLayout();
pStackLayout->setOrientation( LayoutOrientation::LeftToRight );
m_rootContainer = Container::create().layout(pStackLayout);
setRoot(m_rootContainer);
}
ChannelListItem::ChannelListItem(Container *parent) : CustomControl(parent)
{
// A background Container that will hold a background image and an item content Container
Container *itemContainer = new Container();
DockLayout *itemLayout = new DockLayout();
itemContainer->setLayout(itemLayout);
itemContainer->setPreferredWidth(768.0f);
// The white background image for an item
ImageView *bkgImage = ImageView::create("asset:///images/white_photo.png").preferredSize(768.0f, 173.0f);
// A Colored Container will be used to show if an item is highlighted
m_highlighContainer = new Container();
m_highlighContainer->setBackground(Color::fromARGB(0xff75b5d3));
m_highlighContainer->setHorizontalAlignment(HorizontalAlignment::Center);
m_highlighContainer->setOpacity(0.0);
m_highlighContainer->setPreferredWidth(760.0f);
m_highlighContainer->setPreferredHeight(168.0f);
// Content Container containing an image and label with padding for the alignment
// on background image. Note that we disable implicit layout animations to avoid
// unsynchronized animations on the list items as the item image is asynchronously loaded.
Container *contentContainer = new Container();
StackLayout *contentLayout = new StackLayout();
contentLayout->setOrientation(LayoutOrientation::LeftToRight);
contentContainer->setLeftPadding(3.0f);
contentContainer->setLayout(contentLayout);
contentContainer->setImplicitLayoutAnimationsEnabled(false);
// A list item label, docked to the center, the text is set in updateItem.
m_itemLabel = Label::create().text(" ");
m_itemLabel->setVerticalAlignment(VerticalAlignment::Center);
m_itemLabel->setLeftMargin(30.0f);
m_itemLabel->textStyle()->setBase(SystemDefaults::TextStyles::titleText());
m_itemLabel->textStyle()->setColor(Color::Black);
m_itemLabel->setImplicitLayoutAnimationsEnabled(false);
contentContainer->add(m_itemLabel);
// Add the background image and the content to the full item container.
itemContainer->add(bkgImage);
itemContainer->add(m_highlighContainer);
itemContainer->add(contentContainer);
setRoot(itemContainer);
}
ProgressIndicatorRecipe::ProgressIndicatorRecipe(Container *parent) :
CustomControl(parent)
{
// The recipe Container.
Container *recipeContainer = new Container();
StackLayout *recipeLayout = new StackLayout();
recipeLayout->setLeftPadding(20.0);
recipeLayout->setRightPadding(20.0);
recipeContainer->setLayout(recipeLayout);
// The introduction text.
TextArea *introText = new TextArea();
introText->setText((const QString) "Drag the slider to change the ProgressIndicator");
introText->setEditable(false);
introText->textStyle()->setColor(Color::Gray);
introText->textStyle()->setBase(SystemDefaults::TextStyles::bodyText());
introText->setBottomMargin(100);
mProgressIndicator = new ProgressIndicator();
mProgressIndicator->setFromValue(0);
mProgressIndicator->setToValue(100);
connect(mProgressIndicator, SIGNAL(valueChanged(float)), this, SLOT(onValueChanged(float)));
// Create a Slider and connect a slot to the signal for Slider value changing.
Slider *slider = new Slider();
slider->setTopMargin(100);
slider->setFromValue(0);
slider->setToValue(100);
// Connect the Slider value directly to the value property of the ProgressIndicator.
QObject::connect(slider, SIGNAL(valueChanging(float)), mProgressIndicator, SLOT(setValue(float)));
// Create a Slider and connect a slot to the signal for Slider value changing.
mButton = new Button();
mButton->setText((const QString) "Pause");
connect(mButton, SIGNAL(clicked()), this, SLOT(onClicked()));
// Add the controls to the recipe Container and set it as root.
recipeContainer->add(introText);
recipeContainer->add(mProgressIndicator);
recipeContainer->add(slider);
recipeContainer->add(mButton);
setRoot(recipeContainer);
}
LeadingVisual::LeadingVisual():
Container(),
_resetUpdater(new QTimer(this)),
_updateDone(new QTimer(this)),
_activity(NULL),
_loadingLabel(NULL),
_refreshLabel(NULL)
{
_resetUpdater->setSingleShot(true);
_updateDone->setSingleShot(true);
connect(_resetUpdater, SIGNAL(timeout()), this, SLOT(resetUpdaterTimeout()));
connect(_updateDone, SIGNAL(timeout()), this, SLOT(updateDoneTimeout()));
this->setPreferredSize(768, 100);
this->setLayout(new DockLayout());
Container* container = new Container(this);
StackLayout* layout = new StackLayout;
layout->setOrientation(LayoutOrientation::LeftToRight);
container->setLayout(layout);
container->setVerticalAlignment(VerticalAlignment::Center);
container->setHorizontalAlignment(HorizontalAlignment::Center);
_activity = new ActivityIndicator(container);
connect(_activity, SIGNAL(runningChanged(bool)), this, SLOT(activityStatusChanged(bool)));
_loadingLabel = new Label(container);
_loadingLabel->setText("Loading...");
_loadingLabel->setVisible(false);
_refreshLabel = new Label(container);
_refreshLabel->setText("Pull down to refresh...");
_refreshLabel->setVisible(true);
LayoutUpdateHandler::create(this).onLayoutFrameChanged(this, SLOT(handleLayoutFrameUpdated(QRectF)));
}
Container *AnimationRecipe::setUpControllerContainer()
{
// The Controller Container is the bottom part of the animation recipe.
// It is where the descriptive text and a toggle button for triggering the
// animations is kept.
Container *controllerContainer = new Container();
DockLayout *controllerLayout = new DockLayout();
controllerLayout->setLeftPadding(30.0f);
controllerContainer->setLayout(controllerLayout);
controllerContainer->setBackground(Color::fromRGBA(0.84f, 0.84f, 0.84f));
controllerContainer->setPreferredSize(768.0f, 360.0f);
controllerContainer->setLayoutProperties(
DockLayoutProperties::create().vertical(VerticalAlignment::Bottom));
// A recipe text.
Container *descriptionContainer = new Container();
StackLayout *descriptionLayout = new StackLayout();
descriptionLayout->setTopPadding(42.0f);
descriptionContainer->setLayout(descriptionLayout);
descriptionContainer->setLayoutProperties(
DockLayoutProperties::create().vertical(VerticalAlignment::Top).horizontal(
HorizontalAlignment::Left));
// A Label is used for the header and a text area for the descriptive text.
Label *descriptionHeader = new Label();
descriptionHeader->textStyle()->setBase(SystemDefaults::TextStyles::bigText());
descriptionHeader->textStyle()->setColor(Color::Black);
descriptionHeader->setText("Scrambled eggs");
descriptionHeader->setBottomMargin(32.0f);
// Three labels for describing how to scramble the eggs.
Label *line1 = new Label();
line1->textStyle()->setBase(SystemDefaults::TextStyles::bodyText());
line1->setText("1. Take two eggs.");
line1->textStyle()->setColor(Color::Black);
Label *line2 = new Label();
line2->textStyle()->setBase(SystemDefaults::TextStyles::bodyText());
line2->setText("2. Scramble them.");
line2->textStyle()->setColor(Color::Black);
Label *line3 = new Label();
line3->textStyle()->setBase(SystemDefaults::TextStyles::bodyText());
line3->setText("3. Done.");
line3->textStyle()->setColor(Color::Black);
// Add the texts to the description Container.
descriptionContainer->add(descriptionHeader);
descriptionContainer->add(line1);
descriptionContainer->add(line2);
descriptionContainer->add(line3);
// The Controller is a toggle Button and it has a descriptive Label.
// They are stacked in a Container that is aligned to the bottom right corner.
Container *toggleContainer = new Container();
StackLayout *toggleLayout = new StackLayout();
toggleLayout->setBottomPadding(45.0f);
toggleLayout->setRightPadding(30.0f);
toggleContainer->setLayout(toggleLayout);
toggleContainer->setLayoutProperties(
DockLayoutProperties::create().vertical(VerticalAlignment::Bottom).horizontal(
HorizontalAlignment::Right));
// Set up of a Label with a descriptive text.
Label *actionLabel = new Label();
actionLabel->setLayoutProperties(
StackLayoutProperties::create().horizontal(HorizontalAlignment::Right));
actionLabel->textStyle()->setBase(SystemDefaults::TextStyles::bodyText());
actionLabel->setText("Super size");
actionLabel->textStyle()->setColor(Color::Black);
// Set up of a toggle Button and connect to its onChanged signal, its in
// the slot function onToggleChanged were animations are triggered.
ToggleButton *toggle = new ToggleButton();
toggle->setLayoutProperties(
StackLayoutProperties::create().horizontal(HorizontalAlignment::Right));
connect(toggle, SIGNAL(checkedChanged(bool)), this, SLOT(onToggleChanged(bool)));
// Add the Label and the toggle Button to the toggle Container then add
// that Container to the main controller Container.
toggleContainer->add(toggle);
toggleContainer->add(actionLabel);
// Add the description and the toggle button Container.
controllerContainer->add(descriptionContainer);
controllerContainer->add(toggleContainer);
return controllerContainer;
}
SelectionCheckBox::SelectionCheckBox(Container * parent) :
CustomControl(parent)
{
Container *checkBoxComponent = new Container();
DockLayout *checkBoxComponentLayout = new DockLayout();
checkBoxComponentLayout->setTopPadding(41.0f);
checkBoxComponentLayout->setBottomPadding(41.0f);
checkBoxComponent->setPreferredWidth(600.0f);
checkBoxComponent->setLayout(checkBoxComponentLayout);
this->setLayoutProperties(
StackLayoutProperties::create().horizontal(HorizontalAlignment::Fill));
// The title is stored in the custom control so that we can present which olive
// has been added or removed from the mix.
mTitle = QString("");
mTitleLabel = new Label();
mTitleLabel->setText(mTitle);
mTitleLabel->textStyle()->setBase(SystemDefaults::TextStyles::titleText());
mTitleLabel->setLayoutProperties(
DockLayoutProperties::create().vertical(VerticalAlignment::Center));
// A colored rectangle representing the olive color and the
// CheckBox is aligned to the Right side of the component.
Container *checkBoxContainer = new Container();
StackLayout *checkBoxLayout = new StackLayout();
checkBoxLayout->setLayoutDirection(LayoutDirection::LeftToRight);
// A colored rectangle representing the olive color and the
// CheckBox is aligned to the Right side of the component.
checkBoxContainer->setLayout(checkBoxLayout);
checkBoxContainer->setLayoutProperties(
DockLayoutProperties::create().horizontal(HorizontalAlignment::Right));
mColorContainer = new Container();
mColorContainer->setBackground(Color::Black);
mColorContainer->setPreferredSize(42, 42);
mColorContainer->setRightMargin(33.0f);
mColorContainer->setLayoutProperties(
StackLayoutProperties::create().vertical(VerticalAlignment::Center));
// The CheckBox which will tell if the olive should be part of the
// olive mix or not.
CheckBox *oliveCheckBox = new CheckBox();
oliveCheckBox->setObjectName("checkBox");
connect(oliveCheckBox, SIGNAL(checkedChanged(bool)), this, SLOT(onCheckedChanged(bool)));
checkBoxContainer->add(mColorContainer);
checkBoxContainer->add(oliveCheckBox);
checkBoxComponent->add(mTitleLabel);
checkBoxComponent->add(checkBoxContainer);
// To get a behavior that is consistent with how the RadioGroupOptions work
// we need to change the checked state when interacting with the entire
// check box option (not only the check box itself). So we listen for
// touch events on the entire Container and keep track of if the press
// down occurred on the Container
connect(checkBoxComponent, SIGNAL(touch(bb::cascades::TouchEvent *)), this,
SLOT(onCheckBoxComponentTouch(bb::cascades::TouchEvent *)));
setRoot(checkBoxComponent);
}
SelectionRecipe::SelectionRecipe(Container * parent) :
CustomControl(parent)
{
Container *recipeContainer = new Container();
StackLayout *recipeLayout = new StackLayout();
recipeLayout->setLeftPadding(80);
recipeLayout->setRightPadding(80);
recipeContainer->setLayout(recipeLayout);
Container *checkBoxContainer = new Container();
Label *typeLabel = new Label();
typeLabel->setText("Olive Type");
typeLabel->textStyle()->setBase(SystemDefaults::TextStyles::titleText());
typeLabel->textStyle()->setFontWeight(FontWeight::Bold);
typeLabel->setBottomMargin(0);
checkBoxContainer->add(typeLabel);
// Since we want the CheckBox Control to also have a colored box to represent the
// selection of which olives should be in the mix a CustomControl is used, see SelectionCheckBox.cpp.
SelectionCheckBox *limonCello = new SelectionCheckBox();
limonCello->setOliveColor(QVariant::fromValue<Color>(Color::fromARGB(0xff808000)));
limonCello->setTitle("Limoncello");
limonCello->setLayoutProperties(
StackLayoutProperties::create().horizontal(HorizontalAlignment::Fill));
SelectionCheckBox *greek = new SelectionCheckBox();
greek->setOliveColor(QVariant::fromValue<Color>(Color::fromARGB(0xff698B22)));
greek->setTitle("Greek");
SelectionCheckBox *kalamata = new SelectionCheckBox();
kalamata->setOliveColor(QVariant::fromValue<Color>(Color::fromARGB(0xff733D1A)));
kalamata->setTitle("Kalamata");
checkBoxContainer->add(limonCello);
checkBoxContainer->add(greek);
checkBoxContainer->add(kalamata);
// The two menu selections are separated by a Divider.
Divider *divider = new Divider();
divider->setBottomMargin(60);
Label *fillingLabel = new Label();
fillingLabel->setText("Filling");
fillingLabel->textStyle()->setBase(SystemDefaults::TextStyles::titleText());
fillingLabel->textStyle()->setFontWeight(FontWeight::Bold);
fillingLabel->setBottomMargin(9);
// The RadioGroup is a Control that one use if only one option can
// be selected at the time. RadioGroupOptions are added to the Control
// and by listening for the onSelectedOptionChanged signal its possible
// to keep track of what the current selection is.
RadioGroup *radioGroup = new RadioGroup();
radioGroup->setDividersVisible(false);
Option *stoneOption = new Option();
stoneOption->setText("Stone");
Option *pimentoOption = new Option();
pimentoOption->setText("Pimento");
radioGroup->add(stoneOption);
radioGroup->add(pimentoOption);
// We listen for changes in selected options on the RadioGroup.
connect(radioGroup, SIGNAL(selectedIndexChanged(int)), this,
SLOT(fillingSelectedOptionChanged(int)));
// Add the controls.
recipeContainer->add(checkBoxContainer);
recipeContainer->add(divider);
recipeContainer->add(fillingLabel);
recipeContainer->add(radioGroup);
setRoot(recipeContainer);
}
ActivityIndicatorRecipe::ActivityIndicatorRecipe(Container *parent) :
CustomControl(parent)
{
// The recipe Container.
Container *recipeContainer = new Container();
StackLayout *recipeLayout = new StackLayout();
recipeLayout->setLeftPadding(20.0);
recipeLayout->setRightPadding(20.0);
recipeContainer->setLayout(recipeLayout);
// The introduction text.
TextArea *introText = new TextArea();
introText->setText((const QString) "This is a milk boiling simulator recepie");
introText->setEditable(false);
introText->textStyle()->setColor(Color::Gray);
introText->textStyle()->setBase(SystemDefaults::TextStyles::bodyText());
introText->setBottomMargin(100);
Container* smashContainer = new Container();
smashContainer->setLayout(new DockLayout());
// This the big image that was taking during the night
// it's at the same position as the day one, but further from the viewer.
mUnbroken = ImageView::create("asset:///images/stockcurve/egg.png");
// Center it using dock layout info.
mUnbroken->setLayoutProperties( DockLayoutProperties::create()
.horizontal(HorizontalAlignment::Center)
.vertical(VerticalAlignment::Center));
// Since this image is on top of the night one, we can hide the
// night image with changing the opacity value of this image.
mBroken = ImageView::create("asset:///images/stockcurve/broken_egg.png").opacity(0.0);
// Center it using dock layout info.
mBroken->setLayoutProperties( DockLayoutProperties::create()
.horizontal(HorizontalAlignment::Center)
.vertical(VerticalAlignment::Center));
mActivityIndicator = new ActivityIndicator();
mActivityIndicator->setPreferredSize(130, 130);
smashContainer->add(mUnbroken);
smashContainer->add(mActivityIndicator);
smashContainer->add(mBroken);
mButton = new Button();
mButton->setTopMargin(100);
mButton->setText((const QString) "start cooking");
connect(mButton, SIGNAL(clicked()), this, SLOT(onClicked()));
// Add the controls to the recipe Container and set it as root.
recipeContainer->add(introText);
recipeContainer->add(smashContainer);
recipeContainer->add(mButton);
setRoot(recipeContainer);
}
RecipeItem::RecipeItem(Container *parent) :
CustomControl(parent)
{
// Dock layout with margins inside.
Container *itemContainer = new Container();
DockLayout *itemLayout = new DockLayout();
itemContainer->setLayout(itemLayout);
itemContainer->setPreferredWidth(768.0f);
// A background Container that will hold a background image and a item content Container.
Container *backgroundContainer = new Container();
DockLayout *backgroundLayout = new DockLayout();
backgroundContainer->setLayout(backgroundLayout);
backgroundContainer->setLayoutProperties(
DockLayoutProperties::create().horizontal(HorizontalAlignment::Center));
// The white background item image.
ImageView *bkgImage = ImageView::create("asset:///images/white_photo.png").preferredSize(768.0f,
173.0f);
// A Colored Container will be used to show if an item is highlighted.
mHighlighContainer = new Container();
mHighlighContainer->setBackground(Color::fromARGB(0xff75b5d3));
mHighlighContainer->setLayoutProperties(DockLayoutProperties::create().horizontal(HorizontalAlignment::Center));
mHighlighContainer->setOpacity(0.0);
mHighlighContainer->setPreferredWidth(760.0f);
mHighlighContainer->setPreferredHeight(168.0f);
// Content Container, Image + text with padding to get alignment on background image.
Container *contentContainer = new Container();
StackLayout *contentLayout = new StackLayout();
contentLayout->setLayoutDirection(LayoutDirection::LeftToRight);
contentLayout->setLeftPadding(3.0f);
contentContainer->setLayout(contentLayout);
// The list item image, docked to the top, the actual image is set in updateItem.
mItemImage =
ImageView::create("asset:///images/white_photo.png").preferredSize(250.0f, 168.0f).layoutProperties(
StackLayoutProperties::create().vertical(VerticalAlignment::Top));
// A list item label, docked to the center, the text is set in updateItem.
mItemLabel = Label::create().text(" ").layoutProperties(
StackLayoutProperties::create().vertical(VerticalAlignment::Center)).leftMargin(30.0f);
mItemLabel->textStyle()->setBase(SystemDefaults::TextStyles::titleText());
mItemLabel->textStyle()->setColor(Color::Black);
// Add the Image and Label to the content.
contentContainer->add(mItemImage);
contentContainer->add(mItemLabel);
// Add the background image and the content to the full item container.
backgroundContainer->add(bkgImage);
backgroundContainer->add(mHighlighContainer);
backgroundContainer->add(contentContainer);
// Finally add the background Container to the item Container.
itemContainer->add(backgroundContainer);
setRoot(itemContainer);
}
InputRecipe::InputRecipe(Container *parent) :
CustomControl(parent)
{
Container *recipeContainer = new Container();
StackLayout *recipeLayout = new StackLayout();
recipeContainer->setLayout(recipeLayout);
recipeLayout->setLeftPadding(80);
recipeLayout->setRightPadding(80);
// Label used to display the entered text.
mInputLabel = new Label();
mInputLabel->setText((const QString) " ");
mInputLabel->setLayoutProperties(
StackLayoutProperties::create().horizontal(HorizontalAlignment::Fill));
mInputLabel->setBottomMargin(50.0);
mInputLabel->textStyle()->setBase(SystemDefaults::TextStyles::bodyText());
// A multi line text input.
TextArea *textArea = new TextArea();
textArea->setHintText("Enter text into multi-line TextArea");
textArea->setMinHeight(120.0f);
textArea->setMaxHeight(200.0f);
textArea->setPreferredHeight(0);
textArea->setBottomMargin(50.0);
textArea->textStyle()->setBase(SystemDefaults::TextStyles::bodyText());
textArea->setLayoutProperties(
StackLayoutProperties::create().horizontal(HorizontalAlignment::Fill));
// Connect to the textChanged (to update text).
connect(textArea, SIGNAL(textChanging(const QString &)), this,
SLOT(onTextChanging(const QString &)));
// A single line input field with a clear functionality.
TextField *textField = new TextField();
textField->setHintText("Enter text into a single line TextField");
textField->setLayoutProperties(
StackLayoutProperties::create().horizontal(HorizontalAlignment::Fill));
textField->setBottomMargin(50.0);
// Connect to the textChanged (to update text).
connect(textField, SIGNAL(textChanging(const QString &)), this,
SLOT(onTextChanging(const QString &)));
// A disabled text field.
TextField *disabledTextField = new TextField();
disabledTextField->setHintText("This is a disabled text field");
disabledTextField->setEnabled(false);
disabledTextField->setLayoutProperties(
StackLayoutProperties::create().horizontal(HorizontalAlignment::Fill));
disabledTextField->setBottomMargin(50.0);
// Add the controls to the recipe Container and set it as the CustomControl root.
recipeContainer->add(mInputLabel);
recipeContainer->add(textField);
recipeContainer->add(disabledTextField);
recipeContainer->add(textArea);
//recipeContainer->add(inputContainer);
setRoot(recipeContainer);
}
