X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=examples%2Ftext-editor%2Ftext-editor-example.cpp;h=4183daafd5264095aeba33ca653e01f526c0a0f8;hb=2e182925204bf3ef9f2a36cbfbf998e79fbafaf5;hp=eb83eecf984ab8b6c0fbdc6cd1ca4e1befe19ba5;hpb=c16c433bf14981b02298a9e5e1ed07f19631a667;p=platform%2Fcore%2Fuifw%2Fdali-demo.git diff --git a/examples/text-editor/text-editor-example.cpp b/examples/text-editor/text-editor-example.cpp index eb83eec..4183daa 100644 --- a/examples/text-editor/text-editor-example.cpp +++ b/examples/text-editor/text-editor-example.cpp @@ -1,5 +1,5 @@ /* - * Copyright (c) 2016 Samsung Electronics Co., Ltd. + * Copyright (c) 2020 Samsung Electronics Co., Ltd. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -22,7 +22,6 @@ // EXTERNAL INCLUDES #include -#include #include // INTERNAL INCLUDES @@ -34,14 +33,15 @@ using namespace Dali::Toolkit; namespace { +const char * const THEME_PATH( DEMO_STYLE_DIR "text-editor-example-theme.json" ); ///< The theme used for this example const Vector4 BACKGROUND_COLOR( 0.04f, 0.345f, 0.392f, 1.0f ); ///< The background color. const char* TOOLBAR_IMAGE = DEMO_IMAGE_DIR "top-bar.png"; ///< The tool-bar image. const float TOOLBAR_BUTTON_PERCENTAGE = 0.1f; ///< The button's space width as a percentage of the toolbar's width. const float TOOLBAR_TITLE_PERCENTAGE = 0.7f; ///< The title's width as a percentage of the toolbar's width. const float TOOLBAR_HEIGHT_PERCENTAGE = 0.05f; ///< The toolbar's height as a percentage of the stage's height. const float TOOLBAR_PADDING = 4.f; ///< The padding in pixels. -const Vector3 BUTTON_PERCENTAGE( 0.8f, 0.8f, 1.f ); ///< The button's width as a percentage of the space for the buttons in the toolbar. -const Vector3 TEXT_EDITOR_RELATIVE_SIZE( 1.f, 0.45f, 1.0f ); ///< The size of the text editor as a percentage of the stage's size. +const float BUTTON_PERCENTAGE = 0.8f; ///< The button's height as a percentage of the space for the buttons in the toolbar. +const Vector3 TEXT_EDITOR_RELATIVE_SIZE( 0.9f, 0.5f, 1.0f ); ///< The size of the text editor as a percentage of the stage's size. const Vector4 TEXT_EDITOR_BACKGROUND_COLOR( 1.f, 1.f, 1.f, 0.15f ); ///< The background color of the text editor. const Vector4 COLORS[] = { Color::RED, @@ -62,7 +62,6 @@ const unsigned int NUMBER_OF_COLORS = sizeof( COLORS ) / sizeof( Vector4 ); class TextEditorExample : public ConnectionTracker { public: - TextEditorExample( Application& application ) : mApplication( application ) { @@ -109,25 +108,53 @@ public: "", viewStyle ); + // Create a label for the color selection button. + // The button will be a child of this, so as to be placed next to it. + TextLabel colorLabel = TextLabel::New( "Text Color: " ); + colorLabel.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH ); + colorLabel.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT ); + colorLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" ); + + // Create a container for the color button, to layout the drop-down list below it. + mColorContainer = Control::New(); + mColorContainer.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::WIDTH ); + mColorContainer.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::HEIGHT ); + mColorContainer.SetProperty( Actor::Property::SIZE_MODE_FACTOR, Vector3( 0.0f, BUTTON_PERCENTAGE, 0.0f ) ); + + // Place to right of parent. + mColorContainer.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER_RIGHT ); + mColorContainer.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER_LEFT ); + colorLabel.Add( mColorContainer ); + + // Add border to highlight harder-to-see colors. + // We use a color rather than border visual as the container will always be behind the button. + Property::Map colorMap; + colorMap.Insert( Toolkit::Visual::Property::TYPE, Visual::COLOR); + colorMap.Insert( ColorVisual::Property::MIX_COLOR, Color::BLACK ); + mColorContainer.SetProperty( Control::Property::BACKGROUND, colorMap ); + // Create a 'select color' button. mColorButtonOption = Toolkit::PushButton::New(); mColorButtonOption.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS ); - mColorButtonOption.SetSizeModeFactor( BUTTON_PERCENTAGE ); + mColorButtonOption.SetProperty( Actor::Property::SIZE_MODE_FACTOR, Vector3( 0.9f, 0.9f, 0.0f ) ); // Smaller than container to show border. + mColorButtonOption.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER ); + mColorButtonOption.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER ); - mColorButtonOption.SetProperty( Button::Property::UNSELECTED_COLOR, Color::BLACK ); - mColorButtonOption.SetProperty( Button::Property::SELECTED_COLOR, Color::BLACK ); + SetButtonColor( mColorButtonOption, Color::BLACK ); mColorButtonOption.ClickedSignal().Connect( this, &TextEditorExample::OnChangeColorButtonClicked ); + mColorContainer.Add( mColorButtonOption ); - mToolBar.AddControl( mColorButtonOption, viewStyle.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING ); + //Add label to toolbar, which will also add the color button next to it. + mToolBar.AddControl( colorLabel, viewStyle.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING ); // Create the text editor. mEditor = TextEditor::New(); - mEditor.SetParentOrigin( ParentOrigin::TOP_CENTER ); - mEditor.SetAnchorPoint( AnchorPoint::TOP_CENTER ); - mEditor.SetPosition( 0.f, toolBarHeight, 0.f ); + mEditor.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_CENTER ); + mEditor.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_CENTER ); + mEditor.SetProperty( Actor::Property::POSITION, Vector3( 0.f, toolBarHeight * 2.0f, 0.f )); mEditor.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS ); - mEditor.SetSizeModeFactor( TEXT_EDITOR_RELATIVE_SIZE ); + mEditor.SetProperty( Actor::Property::SIZE_MODE_FACTOR, TEXT_EDITOR_RELATIVE_SIZE ); mEditor.SetBackgroundColor( TEXT_EDITOR_BACKGROUND_COLOR ); @@ -152,41 +179,37 @@ public: "Asšúm sapěret usu ůť.\n" "Síť ut apeirián laboramúš percipitur, sůas hařum ín éos?\n" ); + mEditor.InputStyleChangedSignal().Connect( this, &TextEditorExample::OnTextInputStyleChanged ); + contents.Add( mEditor ); + StyleManager styleManager = StyleManager::Get(); + styleManager.ApplyTheme( THEME_PATH ); } void CreateButtonContainer() { mButtonContainer = Toolkit::TableView::New( NUMBER_OF_COLORS, 1u ); - mButtonContainer.SetParentOrigin( ParentOrigin::TOP_LEFT ); - mButtonContainer.SetAnchorPoint( AnchorPoint::TOP_LEFT ); - - Stage stage = Stage::GetCurrent(); - const Vector2 stageSize = stage.GetSize(); - const float toolBarHeight = TOOLBAR_HEIGHT_PERCENTAGE * stageSize.height; - mButtonContainer.SetPosition( TOOLBAR_PADDING, 2.f * TOOLBAR_PADDING + toolBarHeight, 0.f ); - mButtonContainer.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS ); + mButtonContainer.SetProperty( Actor::Property::SIZE_MODE_FACTOR, Vector3( 1.0f, NUMBER_OF_COLORS, 1.0f ) ); - const Vector3 containerPercentage( 0.8f * TOOLBAR_BUTTON_PERCENTAGE, NUMBER_OF_COLORS, 1.f ); - mButtonContainer.SetSizeModeFactor( containerPercentage ); - - Layer toolbarLayer = mToolBar.GetLayer(); - toolbarLayer.Add( mButtonContainer ); + // Place below color selection button. + mButtonContainer.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::BOTTOM_CENTER ); + mButtonContainer.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_CENTER ); + mButtonContainer.SetProperty( Actor::Property::POSITION, Vector3( 0.0f, 2.f * TOOLBAR_PADDING, 0.f )); + mColorContainer.Add( mButtonContainer ); const Vector3 buttonPercentage( 1.f, 0.8f / static_cast( NUMBER_OF_COLORS ), 1.f ); for( unsigned int index = 0u; index < NUMBER_OF_COLORS; ++index ) { Toolkit::PushButton button = Toolkit::PushButton::New(); button.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS ); - button.SetSizeModeFactor( buttonPercentage ); + button.SetProperty( Actor::Property::SIZE_MODE_FACTOR, buttonPercentage ); std::ostringstream s; s << "color" << index; - button.SetName( s.str() ); + button.SetProperty( Dali::Actor::Property::NAME, s.str() ); - button.SetProperty( Button::Property::UNSELECTED_COLOR, COLORS[index] ); - button.SetProperty( Button::Property::SELECTED_COLOR, COLORS[index] ); + SetButtonColor( button, COLORS[index] ); button.ClickedSignal().Connect( this, &TextEditorExample::OnColorButtonClicked ); @@ -213,27 +236,52 @@ public: CreateButtonContainer(); } - mButtonContainer.SetVisible( true ); - mButtonContainer.SetSensitive( true ); + mButtonContainer.SetProperty( Actor::Property::VISIBLE, true ); + mButtonContainer.SetProperty( Actor::Property::SENSITIVE, true ); return true; } bool OnColorButtonClicked( Button button ) { - const std::string& name = button.GetName(); + const std::string& name = button.GetProperty< std::string >( Dali::Actor::Property::NAME ); + Vector4 color; if( "color" == name.substr( 0u, 5u ) ) { const unsigned int index = strtoul( name.substr( 5u, 1u ).c_str(), NULL, 10u ); - mEditor.SetProperty( TextEditor::Property::INPUT_COLOR, COLORS[index] ); + color = COLORS[index]; + mEditor.SetProperty( TextEditor::Property::INPUT_COLOR, color ); } - mButtonContainer.SetVisible( false ); - mButtonContainer.SetSensitive( false ); + SetButtonColor( mColorButtonOption, color ); + + mButtonContainer.SetProperty( Actor::Property::VISIBLE, false ); + mButtonContainer.SetProperty( Actor::Property::SENSITIVE, false ); return true; } + void OnTextInputStyleChanged( TextEditor editor, TextEditor::InputStyle::Mask mask ) + { + if( TextEditor::InputStyle::NONE != static_cast( mask & TextEditor::InputStyle::COLOR ) ) + { + const Vector4 color = editor.GetProperty( TextEditor::Property::INPUT_COLOR ).Get(); + SetButtonColor( mColorButtonOption, color ); + } + + editor.Reset(); + } + + void SetButtonColor( Button& button, const Vector4& color ) + { + Property::Map colorVisualMap; + colorVisualMap.Add( Toolkit::Visual::Property::TYPE, Visual::COLOR ) + .Add( ColorVisual::Property::MIX_COLOR, color ); + + button.SetProperty( Button::Property::UNSELECTED_BACKGROUND_VISUAL, colorVisualMap ); + button.SetProperty( Button::Property::SELECTED_BACKGROUND_VISUAL, colorVisualMap ); + } + private: Application& mApplication; @@ -241,24 +289,16 @@ private: Toolkit::Control mView; Toolkit::ToolBar mToolBar; Toolkit::TextEditor mEditor; + Toolkit::Control mColorContainer; Toolkit::PushButton mColorButtonOption; Toolkit::TableView mButtonContainer; }; -void RunTest( Application& application ) -{ - TextEditorExample test( application ); - - application.MainLoop(); -} - -/** Entry point for Linux & Tizen applications */ -int main( int argc, char **argv ) +int DALI_EXPORT_API main( int argc, char **argv ) { // DALI_DEMO_THEME_PATH not passed to Application so TextEditor example uses default Toolkit style sheet. Application application = Application::New( &argc, &argv ); - - RunTest( application ); - + TextEditorExample test( application ); + application.MainLoop(); return 0; }