X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=examples%2Ftext-editor%2Ftext-editor-example.cpp;h=d291bbb31d53b57c1c1a1d202aa8f3b458115d88;hb=1b19fd140ff139b5854a1a62447faf31b175d8f6;hp=5ec61b7cbc42a0e8ce8d524f47cf43fc957cd20c;hpb=661bf429a56def085e118b5c7a48ae48ee41c86e;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 5ec61b7..d291bbb 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,7 @@ // EXTERNAL INCLUDES #include -#include +#include #include // INTERNAL INCLUDES @@ -33,26 +33,26 @@ using namespace Dali::Toolkit; namespace { - -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 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, - Color::GREEN, - Color::BLUE, - Color::YELLOW, - Color::CYAN, - Color::MAGENTA, - Color::WHITE, - Color::BLACK }; -const unsigned int NUMBER_OF_COLORS = sizeof( COLORS ) / sizeof( Vector4 ); +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 window's height. +const float TOOLBAR_PADDING = 4.f; ///< The padding in pixels. +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 window'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, + Color::GREEN, + Color::BLUE, + Color::YELLOW, + Color::CYAN, + Color::MAGENTA, + Color::WHITE, + Color::BLACK}; +const unsigned int NUMBER_OF_COLORS = sizeof(COLORS) / sizeof(Vector4); } // Unnamed namespace @@ -62,12 +62,11 @@ const unsigned int NUMBER_OF_COLORS = sizeof( COLORS ) / sizeof( Vector4 ); class TextEditorExample : public ConnectionTracker { public: - - TextEditorExample( Application& application ) - : mApplication( application ) + TextEditorExample(Application& application) + : mApplication(application) { // Connect to the Application's Init signal - mApplication.InitSignal().Connect( this, &TextEditorExample::Create ); + mApplication.InitSignal().Connect(this, &TextEditorExample::Create); } ~TextEditorExample() @@ -78,120 +77,151 @@ public: /** * One-time setup in response to Application InitSignal. */ - void Create( Application& application ) + void Create(Application& application) { - Stage stage = Stage::GetCurrent(); + Window window = application.GetWindow(); // Respond to key events - stage.KeyEventSignal().Connect(this, &TextEditorExample::OnKeyEvent); + window.KeyEventSignal().Connect(this, &TextEditorExample::OnKeyEvent); // Set a background color. - stage.SetBackgroundColor( BACKGROUND_COLOR ); + window.SetBackgroundColor(BACKGROUND_COLOR); - // The stage size. - const Vector2 stageSize = stage.GetSize(); + // The window size. + const Vector2 windowSize = window.GetSize(); // Creates a default view with a default tool bar. - // The view is added to the stage. + // The view is added to the window. // Set the toolbar style - const float toolBarHeight = TOOLBAR_HEIGHT_PERCENTAGE * stageSize.height; - const DemoHelper::ViewStyle viewStyle( TOOLBAR_BUTTON_PERCENTAGE, - TOOLBAR_TITLE_PERCENTAGE, - toolBarHeight, - TOOLBAR_PADDING ); - - Layer contents = DemoHelper::CreateView( mApplication, - mView, - mToolBar, - "", - TOOLBAR_IMAGE, - "", - viewStyle ); + const float toolBarHeight = TOOLBAR_HEIGHT_PERCENTAGE * windowSize.height; + const DemoHelper::ViewStyle viewStyle(TOOLBAR_BUTTON_PERCENTAGE, + TOOLBAR_TITLE_PERCENTAGE, + toolBarHeight, + TOOLBAR_PADDING); + + Layer contents = DemoHelper::CreateView(mApplication, + mView, + mToolBar, + "", + TOOLBAR_IMAGE, + "", + 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.SetResizePolicy(ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS); + 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 ); + 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::HORIZONTAL_LEFT, 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.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS ); - mEditor.SetSizeModeFactor( TEXT_EDITOR_RELATIVE_SIZE ); - - mEditor.SetBackgroundColor( TEXT_EDITOR_BACKGROUND_COLOR ); - - mEditor.SetProperty( TextEditor::Property::TEXT_COLOR, Color::BLACK ); - mEditor.SetProperty( TextEditor::Property::TEXT, - "Lorem ipsum dolor sit amet, aeque definiebas ea mei, posse iracundia ne cum.\n" - "Usu ne nisl maiorum iudicabit, veniam epicurei oporteat eos an.\n" - "Ne nec nulla regione albucius, mea doctus delenit ad!\n" - "Et everti blandit adversarium mei, eam porro neglegentur suscipiantur an.\n" - "Quidam corpora at duo. An eos possim scripserit?\n\n" - "Aťqui dicant sěnťenťíae aň vel!\n" - "Vis viris médiocrem elaboraret ét, verear civibus moderatius ex duo!\n" - "Án veri laborě iňtěgré quó, mei aď poššit lobortis, mei prompťa čonsťitůťó eů.\n" - "Aliquip sanctůs delicáta quí ěá, et natum aliquam est?\n" - "Asšúm sapěret usu ůť.\n" - "Síť ut apeirián laboramúš percipitur, sůas hařum ín éos?\n" ); - - contents.Add( mEditor ); + 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.SetProperty(Actor::Property::SIZE_MODE_FACTOR, TEXT_EDITOR_RELATIVE_SIZE); + + mEditor.SetBackgroundColor(TEXT_EDITOR_BACKGROUND_COLOR); + + const Size boundingBoxSize(windowSize * TEXT_EDITOR_RELATIVE_SIZE.GetVectorXY()); + Rect boundingBox(0, + static_cast(toolBarHeight), + static_cast(boundingBoxSize.width), + static_cast(boundingBoxSize.height - toolBarHeight)); + + mEditor.SetProperty(TextEditor::Property::DECORATION_BOUNDING_BOX, boundingBox); + mEditor.SetProperty(TextEditor::Property::TEXT_COLOR, Color::BLACK); + mEditor.SetProperty(TextEditor::Property::TEXT, + "Lorem ipsum dolor sit amet, aeque definiebas ea mei, posse iracundia ne cum.\n" + "Usu ne nisl maiorum iudicabit, veniam epicurei oporteat eos an.\n" + "Ne nec nulla regione albucius, mea doctus delenit ad!\n" + "Et everti blandit adversarium mei, eam porro neglegentur suscipiantur an.\n" + "Quidam corpora at duo. An eos possim scripserit?\n\n" + "Aťqui dicant sěnťenťíae aň vel!\n" + "Vis viris médiocrem elaboraret ét, verear civibus moderatius ex duo!\n" + "Án veri laborě iňtěgré quó, mei aď poššit lobortis, mei prompťa čonsťitůťó eů.\n" + "Aliquip sanctůs delicáta quí ěá, et natum aliquam est?\n" + "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 ); - - const Vector3 containerPercentage( 0.8f * TOOLBAR_BUTTON_PERCENTAGE, NUMBER_OF_COLORS, 1.f ); - mButtonContainer.SetSizeModeFactor( containerPercentage ); - - Layer toolbarLayer = mToolBar.GetLayer(); - toolbarLayer.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 ) + mButtonContainer = Toolkit::TableView::New(NUMBER_OF_COLORS, 1u); + 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)); + + // 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.SetResizePolicy(ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS); + 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 ); + button.ClickedSignal().Connect(this, &TextEditorExample::OnColorButtonClicked); - mButtonContainer.Add( button ); + mButtonContainer.Add(button); } } - void OnKeyEvent( const KeyEvent& event ) + void OnKeyEvent(const KeyEvent& event) { - if( event.state == KeyEvent::Down ) + if(event.GetState() == KeyEvent::DOWN) { - if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) ) + if(IsKey(event, Dali::DALI_KEY_ESCAPE) || IsKey(event, Dali::DALI_KEY_BACK)) { // Exit application when click back or escape. mApplication.Quit(); @@ -199,59 +229,75 @@ public: } } - bool OnChangeColorButtonClicked( Button button ) + bool OnChangeColorButtonClicked(Button button) { - if( !mButtonContainer ) + if(!mButtonContainer) { 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 ) + bool OnColorButtonClicked(Button button) { - const std::string& name = button.GetName(); + const std::string& name = button.GetProperty(Dali::Actor::Property::NAME); - if( "color" == name.substr( 0u, 5u ) ) + 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] ); + const unsigned int index = strtoul(name.substr(5u, 1u).c_str(), NULL, 10u); + 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; } -private: + 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; 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 ); - + Application application = Application::New(&argc, &argv); + TextEditorExample test(application); + application.MainLoop(); return 0; }