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

   1 /*
   2  * Copyright (c) 2016 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 <iostream>
  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     mColorButtonOption.SetProperty( Button::Property::UNSELECTED_COLOR, Color::BLACK );
 144     mColorButtonOption.SetProperty( Button::Property::SELECTED_COLOR, Color::BLACK );
 145
 146     mColorButtonOption.ClickedSignal().Connect( this, &TextEditorExample::OnChangeColorButtonClicked );
 147     mColorContainer.Add( mColorButtonOption );
 148
 149     //Add label to toolbar, which will also add the color button next to it.
 150     mToolBar.AddControl( colorLabel, viewStyle.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
 151
 152     // Create the text editor.
 153     mEditor = TextEditor::New();
 154     mEditor.SetParentOrigin( ParentOrigin::TOP_CENTER );
 155     mEditor.SetAnchorPoint( AnchorPoint::TOP_CENTER );
 156     mEditor.SetPosition( 0.f, toolBarHeight, 0.f );
 157     mEditor.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
 158     mEditor.SetSizeModeFactor( TEXT_EDITOR_RELATIVE_SIZE );
 159
 160     mEditor.SetBackgroundColor( TEXT_EDITOR_BACKGROUND_COLOR );
 161
 162     const Size boundingBoxSize( stageSize * TEXT_EDITOR_RELATIVE_SIZE.GetVectorXY() );
 163     Rect<int> boundingBox( 0,
 164                            static_cast<int>( toolBarHeight ),
 165                            static_cast<int>( boundingBoxSize.width ),
 166                            static_cast<int>( boundingBoxSize.height - toolBarHeight ) );
 167
 168     mEditor.SetProperty( TextEditor::Property::DECORATION_BOUNDING_BOX, boundingBox );
 169     mEditor.SetProperty( TextEditor::Property::TEXT_COLOR, Color::BLACK );
 170     mEditor.SetProperty( TextEditor::Property::TEXT,
 171                          "Lorem ipsum dolor sit amet, aeque definiebas ea mei, posse iracundia ne cum.\n"
 172                          "Usu ne nisl maiorum iudicabit, veniam epicurei oporteat eos an.\n"
 173                          "Ne nec nulla regione albucius, mea doctus delenit ad!\n"
 174                          "Et everti blandit adversarium mei, eam porro neglegentur suscipiantur an.\n"
 175                          "Quidam corpora at duo. An eos possim scripserit?\n\n"
 176                          "Aťqui dicant sěnťenťíae aň vel!\n"
 177                          "Vis viris médiocrem elaboraret ét, verear civibus moderatius ex duo!\n"
 178                          "Án veri laborě iňtěgré quó, mei aď poššit lobortis, mei prompťa čonsťitůťó eů.\n"
 179                          "Aliquip sanctůs delicáta quí ěá, et natum aliquam est?\n"
 180                          "Asšúm sapěret usu ůť.\n"
 181                          "Síť ut apeirián laboramúš percipitur, sůas hařum ín éos?\n" );
 182
 183     mEditor.InputStyleChangedSignal().Connect( this, &TextEditorExample::OnTextInputStyleChanged );
 184
 185     contents.Add( mEditor );
 186   }
 187
 188   void CreateButtonContainer()
 189   {
 190     mButtonContainer = Toolkit::TableView::New( NUMBER_OF_COLORS, 1u );
 191     mButtonContainer.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
 192     mButtonContainer.SetSizeModeFactor( Vector3( 1.0f, NUMBER_OF_COLORS, 1.0f ) );
 193
 194     // Place below color selection button.
 195     mButtonContainer.SetParentOrigin( ParentOrigin::BOTTOM_CENTER  );
 196     mButtonContainer.SetAnchorPoint( AnchorPoint::TOP_CENTER );
 197     mButtonContainer.SetPosition( 0.0f, 2.f * TOOLBAR_PADDING, 0.f );
 198     mColorContainer.Add( mButtonContainer );
 199
 200     const Vector3 buttonPercentage( 1.f, 0.8f / static_cast<float>( NUMBER_OF_COLORS ), 1.f );
 201     for( unsigned int index = 0u; index < NUMBER_OF_COLORS; ++index )
 202     {
 203       Toolkit::PushButton button = Toolkit::PushButton::New();
 204       button.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
 205       button.SetSizeModeFactor( buttonPercentage );
 206
 207       std::ostringstream s;
 208       s << "color" << index;
 209       button.SetName( s.str() );
 210
 211       button.SetProperty( Button::Property::UNSELECTED_COLOR, COLORS[index] );
 212       button.SetProperty( Button::Property::SELECTED_COLOR, COLORS[index] );
 213
 214       button.ClickedSignal().Connect( this, &TextEditorExample::OnColorButtonClicked );
 215
 216       mButtonContainer.Add( button );
 217     }
 218   }
 219
 220   void OnKeyEvent( const KeyEvent& event )
 221   {
 222     if( event.state == KeyEvent::Down )
 223     {
 224       if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
 225       {
 226         // Exit application when click back or escape.
 227         mApplication.Quit();
 228       }
 229     }
 230   }
 231
 232   bool OnChangeColorButtonClicked( Button button )
 233   {
 234     if( !mButtonContainer )
 235     {
 236       CreateButtonContainer();
 237     }
 238
 239     mButtonContainer.SetVisible( true );
 240     mButtonContainer.SetSensitive( true );
 241     return true;
 242   }
 243
 244   bool OnColorButtonClicked( Button button )
 245   {
 246     const std::string& name = button.GetName();
 247
 248     Vector4 color;
 249     if( "color" == name.substr( 0u, 5u ) )
 250     {
 251       const unsigned int index = strtoul( name.substr( 5u, 1u ).c_str(), NULL, 10u );
 252       color = COLORS[index];
 253       mEditor.SetProperty( TextEditor::Property::INPUT_COLOR, color );
 254     }
 255
 256     mColorButtonOption.SetProperty( Button::Property::UNSELECTED_COLOR, color );
 257     mColorButtonOption.SetProperty( Button::Property::SELECTED_COLOR, color );
 258
 259     mButtonContainer.SetVisible( false );
 260     mButtonContainer.SetSensitive( false );
 261
 262     return true;
 263   }
 264
 265   void OnTextInputStyleChanged( TextEditor editor, TextEditor::InputStyle::Mask mask )
 266   {
 267     if( TextEditor::InputStyle::NONE != static_cast<TextEditor::InputStyle::Mask>( mask & TextEditor::InputStyle::COLOR ) )
 268     {
 269       const Vector4 color = editor.GetProperty( TextEditor::Property::INPUT_COLOR ).Get<Vector4>();
 270
 271       mColorButtonOption.SetProperty( Button::Property::UNSELECTED_COLOR, color );
 272       mColorButtonOption.SetProperty( Button::Property::SELECTED_COLOR, color );
 273     }
 274
 275     editor.Reset();
 276   }
 277
 278 private:
 279
 280   Application& mApplication;
 281
 282   Toolkit::Control    mView;
 283   Toolkit::ToolBar    mToolBar;
 284   Toolkit::TextEditor mEditor;
 285   Toolkit::Control    mColorContainer;
 286   Toolkit::PushButton mColorButtonOption;
 287   Toolkit::TableView  mButtonContainer;
 288 };
 289
 290 void RunTest( Application& application )
 291 {
 292   TextEditorExample test( application );
 293
 294   application.MainLoop();
 295 }
 296
 297 /** Entry point for Linux & Tizen applications */
 298 int main( int argc, char **argv )
 299 {
 300   // DALI_DEMO_THEME_PATH not passed to Application so TextEditor example uses default Toolkit style sheet.
 301   Application application = Application::New( &argc, &argv );
 302
 303   RunTest( application );
 304
 305   return 0;
 306 }