examples/text-editor/text-editor-example.cpp

   1 /*
   2  * Copyright (c) 2017 Samsung Electronics Co., Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  *
  16  */
  17
  18 /**
  19  * @file simple-text-editor-example.cpp
  20  * @brief Very basic usage of TextEditor control
  21  */
  22
  23 // EXTERNAL INCLUDES
  24 #include <dali-toolkit/dali-toolkit.h>
  25 #include <dali-toolkit/devel-api/controls/buttons/button-devel.h>
  26 #include <sstream>
  27
  28 // INTERNAL INCLUDES
  29 #include "shared/view.h"
  30
  31 using namespace Dali;
  32 using namespace Dali::Toolkit;
  33
  34 namespace
  35 {
  36
  37 const Vector4 BACKGROUND_COLOR( 0.04f, 0.345f, 0.392f, 1.0f );      ///< The background color.
  38 const char*   TOOLBAR_IMAGE = DEMO_IMAGE_DIR "top-bar.png";         ///< The tool-bar image.
  39 const float   TOOLBAR_BUTTON_PERCENTAGE = 0.1f;                     ///< The button's space width as a percentage of the toolbar's width.
  40 const float   TOOLBAR_TITLE_PERCENTAGE = 0.7f;                      ///< The title's width as a percentage of the toolbar's width.
  41 const float   TOOLBAR_HEIGHT_PERCENTAGE = 0.05f;                    ///< The toolbar's height as a percentage of the stage's height.
  42 const float   TOOLBAR_PADDING = 4.f;                                ///< The padding in pixels.
  43 const float   BUTTON_PERCENTAGE = 0.8f;                             ///< The button's height as a percentage of the space for the buttons in the toolbar.
  44 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.
  45 const Vector4 TEXT_EDITOR_BACKGROUND_COLOR( 1.f, 1.f, 1.f, 0.15f ); ///< The background color of the text editor.
  46
  47 const Vector4 COLORS[] = { Color::RED,
  48                            Color::GREEN,
  49                            Color::BLUE,
  50                            Color::YELLOW,
  51                            Color::CYAN,
  52                            Color::MAGENTA,
  53                            Color::WHITE,
  54                            Color::BLACK };
  55 const unsigned int NUMBER_OF_COLORS = sizeof( COLORS ) / sizeof( Vector4 );
  56
  57 } // Unnamed namespace
  58
  59 /**
  60  * @brief The main class of the demo.
  61  */
  62 class TextEditorExample : public ConnectionTracker
  63 {
  64 public:
  65   TextEditorExample( Application& application )
  66   : mApplication( application )
  67   {
  68     // Connect to the Application's Init signal
  69     mApplication.InitSignal().Connect( this, &TextEditorExample::Create );
  70   }
  71
  72   ~TextEditorExample()
  73   {
  74     // Nothing to do here.
  75   }
  76
  77   /**
  78    * One-time setup in response to Application InitSignal.
  79    */
  80   void Create( Application& application )
  81   {
  82     Stage stage = Stage::GetCurrent();
  83
  84     // Respond to key events
  85     stage.KeyEventSignal().Connect(this, &TextEditorExample::OnKeyEvent);
  86
  87     // Set a background color.
  88     stage.SetBackgroundColor( BACKGROUND_COLOR );
  89
  90     // The stage size.
  91     const Vector2 stageSize = stage.GetSize();
  92
  93     // Creates a default view with a default tool bar.
  94     // The view is added to the stage.
  95
  96     // Set the toolbar style
  97     const float toolBarHeight = TOOLBAR_HEIGHT_PERCENTAGE * stageSize.height;
  98     const DemoHelper::ViewStyle viewStyle( TOOLBAR_BUTTON_PERCENTAGE,
  99                                            TOOLBAR_TITLE_PERCENTAGE,
 100                                            toolBarHeight,
 101                                            TOOLBAR_PADDING );
 102
 103     Layer contents = DemoHelper::CreateView( mApplication,
 104                                              mView,
 105                                              mToolBar,
 106                                              "",
 107                                              TOOLBAR_IMAGE,
 108                                              "",
 109                                              viewStyle );
 110
 111     // Create a label for the color selection button.
 112     // The button will be a child of this, so as to be placed next to it.
 113     TextLabel colorLabel = TextLabel::New( "Text Color: " );
 114     colorLabel.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH );
 115     colorLabel.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT );
 116     colorLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
 117
 118     // Create a container for the color button, to layout the drop-down list below it.
 119     mColorContainer = Control::New();
 120     mColorContainer.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::WIDTH );
 121     mColorContainer.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::HEIGHT );
 122     mColorContainer.SetSizeModeFactor( Vector3( 0.0f, BUTTON_PERCENTAGE, 0.0f ) );
 123
 124     // Place to right of parent.
 125     mColorContainer.SetParentOrigin( ParentOrigin::CENTER_RIGHT );
 126     mColorContainer.SetAnchorPoint( AnchorPoint::CENTER_LEFT );
 127     colorLabel.Add( mColorContainer );
 128
 129     // Add border to highlight harder-to-see colors.
 130     // We use a color rather than border visual as the container will always be behind the button.
 131     Property::Map colorMap;
 132     colorMap.Insert( Visual::Property::TYPE, Visual::COLOR);
 133     colorMap.Insert( ColorVisual::Property::MIX_COLOR, Color::BLACK );
 134     mColorContainer.SetProperty( Control::Property::BACKGROUND, colorMap );
 135
 136     // Create a 'select color' button.
 137     mColorButtonOption = Toolkit::PushButton::New();
 138     mColorButtonOption.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
 139     mColorButtonOption.SetSizeModeFactor( Vector3( 0.9f, 0.9f, 0.0f ) ); // Smaller than container to show border.
 140     mColorButtonOption.SetParentOrigin( ParentOrigin::CENTER );
 141     mColorButtonOption.SetAnchorPoint( AnchorPoint::CENTER );
 142
 143     SetButtonColor( mColorButtonOption, Color::BLACK );
 144
 145     mColorButtonOption.ClickedSignal().Connect( this, &TextEditorExample::OnChangeColorButtonClicked );
 146     mColorContainer.Add( mColorButtonOption );
 147
 148     //Add label to toolbar, which will also add the color button next to it.
 149     mToolBar.AddControl( colorLabel, viewStyle.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
 150
 151     // Create the text editor.
 152     mEditor = TextEditor::New();
 153     mEditor.SetParentOrigin( ParentOrigin::TOP_CENTER );
 154     mEditor.SetAnchorPoint( AnchorPoint::TOP_CENTER );
 155     mEditor.SetPosition( 0.f, toolBarHeight, 0.f );
 156     mEditor.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
 157     mEditor.SetSizeModeFactor( TEXT_EDITOR_RELATIVE_SIZE );
 158
 159     mEditor.SetBackgroundColor( TEXT_EDITOR_BACKGROUND_COLOR );
 160
 161     const Size boundingBoxSize( stageSize * TEXT_EDITOR_RELATIVE_SIZE.GetVectorXY() );
 162     Rect<int> boundingBox( 0,
 163                            static_cast<int>( toolBarHeight ),
 164                            static_cast<int>( boundingBoxSize.width ),
 165                            static_cast<int>( boundingBoxSize.height - toolBarHeight ) );
 166
 167     mEditor.SetProperty( TextEditor::Property::DECORATION_BOUNDING_BOX, boundingBox );
 168     mEditor.SetProperty( TextEditor::Property::TEXT_COLOR, Color::BLACK );
 169     mEditor.SetProperty( TextEditor::Property::TEXT,
 170                          "Lorem ipsum dolor sit amet, aeque definiebas ea mei, posse iracundia ne cum.\n"
 171                          "Usu ne nisl maiorum iudicabit, veniam epicurei oporteat eos an.\n"
 172                          "Ne nec nulla regione albucius, mea doctus delenit ad!\n"
 173                          "Et everti blandit adversarium mei, eam porro neglegentur suscipiantur an.\n"
 174                          "Quidam corpora at duo. An eos possim scripserit?\n\n"
 175                          "Aťqui dicant sěnťenťíae aň vel!\n"
 176                          "Vis viris médiocrem elaboraret ét, verear civibus moderatius ex duo!\n"
 177                          "Án veri laborě iňtěgré quó, mei aď poššit lobortis, mei prompťa čonsťitůťó eů.\n"
 178                          "Aliquip sanctůs delicáta quí ěá, et natum aliquam est?\n"
 179                          "Asšúm sapěret usu ůť.\n"
 180                          "Síť ut apeirián laboramúš percipitur, sůas hařum ín éos?\n" );
 181
 182     mEditor.InputStyleChangedSignal().Connect( this, &TextEditorExample::OnTextInputStyleChanged );
 183
 184     contents.Add( mEditor );
 185   }
 186
 187   void CreateButtonContainer()
 188   {
 189     mButtonContainer = Toolkit::TableView::New( NUMBER_OF_COLORS, 1u );
 190     mButtonContainer.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
 191     mButtonContainer.SetSizeModeFactor( Vector3( 1.0f, NUMBER_OF_COLORS, 1.0f ) );
 192
 193     // Place below color selection button.
 194     mButtonContainer.SetParentOrigin( ParentOrigin::BOTTOM_CENTER  );
 195     mButtonContainer.SetAnchorPoint( AnchorPoint::TOP_CENTER );
 196     mButtonContainer.SetPosition( 0.0f, 2.f * TOOLBAR_PADDING, 0.f );
 197     mColorContainer.Add( mButtonContainer );
 198
 199     const Vector3 buttonPercentage( 1.f, 0.8f / static_cast<float>( NUMBER_OF_COLORS ), 1.f );
 200     for( unsigned int index = 0u; index < NUMBER_OF_COLORS; ++index )
 201     {
 202       Toolkit::PushButton button = Toolkit::PushButton::New();
 203       button.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
 204       button.SetSizeModeFactor( buttonPercentage );
 205
 206       std::ostringstream s;
 207       s << "color" << index;
 208       button.SetName( s.str() );
 209
 210       SetButtonColor( button, COLORS[index] );
 211
 212       button.ClickedSignal().Connect( this, &TextEditorExample::OnColorButtonClicked );
 213
 214       mButtonContainer.Add( button );
 215     }
 216   }
 217
 218   void OnKeyEvent( const KeyEvent& event )
 219   {
 220     if( event.state == KeyEvent::Down )
 221     {
 222       if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
 223       {
 224         // Exit application when click back or escape.
 225         mApplication.Quit();
 226       }
 227     }
 228   }
 229
 230   bool OnChangeColorButtonClicked( Button button )
 231   {
 232     if( !mButtonContainer )
 233     {
 234       CreateButtonContainer();
 235     }
 236
 237     mButtonContainer.SetVisible( true );
 238     mButtonContainer.SetSensitive( true );
 239     return true;
 240   }
 241
 242   bool OnColorButtonClicked( Button button )
 243   {
 244     const std::string& name = button.GetName();
 245
 246     Vector4 color;
 247     if( "color" == name.substr( 0u, 5u ) )
 248     {
 249       const unsigned int index = strtoul( name.substr( 5u, 1u ).c_str(), NULL, 10u );
 250       color = COLORS[index];
 251       mEditor.SetProperty( TextEditor::Property::INPUT_COLOR, color );
 252     }
 253
 254     SetButtonColor( mColorButtonOption, color  );
 255
 256     mButtonContainer.SetVisible( false );
 257     mButtonContainer.SetSensitive( false );
 258
 259     return true;
 260   }
 261
 262   void OnTextInputStyleChanged( TextEditor editor, TextEditor::InputStyle::Mask mask )
 263   {
 264     if( TextEditor::InputStyle::NONE != static_cast<TextEditor::InputStyle::Mask>( mask & TextEditor::InputStyle::COLOR ) )
 265     {
 266       const Vector4 color = editor.GetProperty( TextEditor::Property::INPUT_COLOR ).Get<Vector4>();
 267       SetButtonColor( mColorButtonOption, color  );
 268     }
 269
 270     editor.Reset();
 271   }
 272
 273   void SetButtonColor( Button& button, const Vector4& color )
 274   {
 275     Property::Map colorVisualMap;
 276     colorVisualMap.Add( Visual::Property::TYPE, Visual::COLOR )
 277                   .Add( ColorVisual::Property::MIX_COLOR, color );
 278
 279     button.SetProperty( DevelButton::Property::UNSELECTED_BACKGROUND_VISUAL, colorVisualMap );
 280     button.SetProperty( DevelButton::Property::SELECTED_BACKGROUND_VISUAL, colorVisualMap );
 281   }
 282
 283 private:
 284
 285   Application& mApplication;
 286
 287   Toolkit::Control    mView;
 288   Toolkit::ToolBar    mToolBar;
 289   Toolkit::TextEditor mEditor;
 290   Toolkit::Control    mColorContainer;
 291   Toolkit::PushButton mColorButtonOption;
 292   Toolkit::TableView  mButtonContainer;
 293 };
 294
 295 void RunTest( Application& application )
 296 {
 297   TextEditorExample test( application );
 298
 299   application.MainLoop();
 300 }
 301
 302 /** Entry point for Linux & Tizen applications */
 303 int main( int argc, char **argv )
 304 {
 305   // DALI_DEMO_THEME_PATH not passed to Application so TextEditor example uses default Toolkit style sheet.
 306   Application application = Application::New( &argc, &argv );
 307
 308   RunTest( application );
 309
 310   return 0;
 311 }