Contents. Orientation SearchBar and Gallery List Advanced Multiple Form Multi Touch Animations Layout Designing UI using UI Builder

Transcription

1 Advanced UI

2 Contents Orientation SearchBar and Gallery List Advanced Multiple Form Multi Touch Animations Layout Designing UI using UI Builder

3 Introduction Advanced UI Concepts A detailed view of controls and interaction between them. Forms, Orientation etc. Then the friendly UI Builder. 3

4 1 Orientation

5 Orientation The orientation feature helps the device to adapt the screen orientation according to the rotation of the device Supported orientations are ORIENTATION_STATUS_PORTRAIT ORIENTATION_STATUS_LANDSCAPE ORIENTATION_STATUS_PORTRAIT_REVERSE ORIENTATION_STATUS_LANDSCAPE_REVERSE 5

6 How to Respond to the Orientation Change // In the class declaration of the form, // declare the form as an IOrientationEventListener class TestForm:..., public IOrientationEventListener // On construction time // or initialization time, TestForm::Construct() {... // register itself as the orientation listener AddOrientationEventListener (*this); } 6

7 How to Respond to the Orientation Change // orientation change listener function TestForm::OnOrientationChanged(const Control& source, OrientationStatus orientation){ // set the size and position of the sub controls // for the orientation switch( orientation ) { case ORIENTATION_STATUS_PORTRAIT: // say that you have a pointer of a sub-control // or get a sub-controls into ctrl1 via GetControl // change its position and/or size ctrl1->setsize(...); // for another sub-controls ctrl2->setbounds(... );... break; case... Draw(); } } 7

8 2 SearchBar and Gallery

9 SearchBar Supports two modes SEARCH_BAR_MODE_NORMAL SEARCH_BAR_MODE_INPUT Notifies for mode change ISearchBarEventListener interface OnSearchBarModeChanged event handler Button events IActionEventListener interface OnActionPerformed() event handler Content and content area Set using SetContent method 9

10 Using SearchBar : Class declaration class SearchBarSample : public Osp::Ui::Controls::Form, public Osp::Ui::Controls::ISearchBarEventListener, public Osp::Ui::ITextEventListener, public Osp::Ui::Controls::IListViewItemEventListener, public Osp::Ui::Controls::IListViewItemProvider {... protected: Osp::Ui::Controls::SearchBar* psearchbar; Osp::Ui::Controls::ListView* plist; public: virtual void OnSearchBarModeChanged( Osp::Ui::Controls::SearchBar& source, Osp::Ui::Controls::SearchBarMode mode); virtual void OnSearchBarContentAreaResized( Osp::Ui::Controls::SearchBar& source, Osp::Graphics::Dimension& size) {}; virtual void OnTextValueChanged(const Osp::Ui::Control& source); virtual void OnTextValueChangeCanceled(const Osp::Ui::Control& source);... } 10

11 Using SearchBar : Initialization result SearchBarSample::OnInitializing(void) { result r = E_SUCCESS; // Initialize searchbar psearchbar = new SearchBar(); r = psearchbar->construct(rectangle(0, 0, 480, 72)); psearchbar->settext("click here! "); AddControl(* psearchbar); psearchbar->addsearchbareventlistener(*this); psearchbar->addtexteventlistener(*this); // create the content control and set as content plist = new ListView(); plist->construct(rectangle(0, 0, 480, GetClientAreaBounds().height - 72), true, true); psearchbar->setcontent( plist); // Add other initialization code here return r; } 11

12 Using SearchBar : Events interface void SearchBarSample::OnSearchBarModeChanged(SearchBar& source, SearchBarMode mode) { if(mode == SEARCH_BAR_MODE_INPUT) { //Searchbar mode is input } else { // Searchbar mode is normal } } void SearchBarSample::OnTextValueChanged(const Osp::Ui::Control& source){ //Some text changed } 12

13 Gallery Used to display a set of still images one at a time Can also display the images as a slide show StartSlideShow StopSlideShow Supports provider class for Adding, deleting, retrieve image count, and refreshing RefreshGallery GetItemCount UpdateGallery Supports Zooming 13

14 Gallery Events IGalleryItemProvider Registered using SetItemProvider CreateItem DeleteItem IGalleryEventListener OnGalleryCurrentItemChanged OnGalleryItemClicked OnGallerySlideShowStarted OnGallerySlideShowStopped 14

15 3 List Advanced

16 More about Lists: CustomItem Multiple elements in an item CustomItem has a ICustomElement has multiple elements events for each element is notified via ICustomElement ICustomElement : each small element for custom drawing Custom Element String Element (size:50) String Element (size:25) 16

17 Creating Custom List Element Create a Custom List Element Derive a class from Osp::Ui::Controls::ICustomElement Override the OnDraw method. Construct a CustomItem In the CreateItem callback, create a CustomItem object Add Custom List Element 17

18 Creating Custom Items Creating a Custom List Element class CustomListElement : public ICustomElement { virual bool OnDraw(Canvas& canvas, const Rectangle& rect, ListItemDrawingStatus itemstatus) ; }; Creating a CustomItem ListItemBase* ListViewSample::CreateItem(int index, int itemwidth) { CustomItem* pitem = new CustomItem(); pitem->construct(dimension(itemwidth,100), style); pitem->addelement(rectangle(290, 20, 60, 60), ID_FORMAT_CUSTOM, *(static_cast<icustomelement *>( pcustomlistelement))); return pitem; } 18

19 ListContextItem ListContextItem Shown when a list item is swept Elements which can be a text, a bitmap or a combination of text and bitmap Creating ListContextItem ListContextItem* pitemcontext = new ListContextItem(); pitemcontext->construct(); pitemcontext->addelement(id_context_item_1, "Test1"); pitemcontext->addelement(id_context_item_2, "Test2"); pitem->setcontextitem(pitemcontext); 19

20 Interaction Events IListViewItemEventListener OnListViewItemStateChanged(... ) OnListViewContextItemStateChanged( ) OnListViewItemSwept( ) Click! - Item - Click! - Element - 20

21 ListView Example class ListViewSample : public Form,public IListViewItemEventListener, public IListViewItemProvider { protected: ListView* plist; CustomListElement* pcustomlistelement; public: // IListViewItemEventListener virtual void OnListViewContextItemStateChanged(ListView &listview, int index, int elementid, ListContextItemStatus state); virtual void OnListViewItemSwept(ListView &listview, int index, SweepDirection direction); //IListViewItemProvider Virtual ListItemBase* CreateItem(int index, int itemwidth); virtual int GetItemCount(void); }; 21

22 ListView Example : Initializing // Initializing result ListViewSample::OnInitializing(void) { result r = E_SUCCESS; pcustomlistelement = new CustomListElement(); CreateListView(); // Initialize other return r; } void ListViewSample::CreateListView(void) { plist = new ListView(); plist->construct(rectangle(0, 0, 480, GetClientAreaBounds().height), true, false); // Register listeners plist->setitemprovider(*this); plist->addlistviewitemeventlistener(*this); AddControl(* plist); } 22

23 ListView Example : ICustomElement class CustomListElement : public Osp::Ui::Controls::ICustomElement { public: CustomListElement(void){} ~CustomListElement (void){} }; bool OnDraw(Osp::Graphics::Canvas& canvas, const Osp::Graphics::Rectangle& rect, Osp::Ui::Controls::ListItemDrawingStatus itemstatus) { // Custom drawing code... canvas.setforegroundcolor(osp::graphics::color::color_green); canvas.drawtext(osp::graphics::point(rect.x+2, rect.y+20), L"Custom") ; return true; } 23

24 ListView Example : CreateItem Osp::Ui::Controls::ListItemBase* ListViewSample::CreateItem(int index, int itemwidth) { ListAnnexStyle style = LIST_ANNEX_STYLE_NORMAL; CustomItem* pitem = new CustomItem(); pitem->construct(osp::graphics::dimension(itemwidth,100), style); //Add Strings and bitmaps... //Add Custom element pitem->addelement(rectangle(290, 20, 60, 60), ID_FORMAT_CUSTOM, *(static_cast<icustomelement *>( pcustomlistelement))); //Add context item ListContextItem* pitemcontext = new ListContextItem(); pitemcontext->construct(); pitemcontext->addelement(id_context_item_1, "Test1"); pitemcontext->addelement(id_context_item_2, "Test2"); pitem->setcontextitem(pitemcontext); return pitem; } 24

25 ListView Example : Events void ListViewSample::OnListViewItemStateChanged(ListView &listview, int index, int elementid, ListItemStatus status) { switch (elementid) { //Event handling } } void ListViewSample::OnListViewItemSwept(ListView &listview, int index, SweepDirection direction) { //Event handling } void ListViewSample::OnListViewContextItemStateChanged(ListView &listview, int index, int elementid, ListContextItemStatus state) { switch (elementid) { //Event handling } } 25

26 4 Multiple Form

27 Multiple Form Application A Form acts as each sheet (or a screen) of an application An application may contain multiple forms Switching between forms is required Note: an application with many Forms needs a designated Form controller for memory efficiency 27

28 Example: Multiple Form (1/4) // Forms class Form1:... {... }; class Form2:... {... } // in the <App>.h class MyApp :... {... private: // Form array Form* pform[2];... public: result MoveToForm(int i); }; 28

29 Example: Multiple Form (2/4) MyApp::OnAppInitializing(... ) {... // Creating two forms (which are member variable now) pform[0] = new Form1(); ((Form1*)pForm[0])->Initialize(); pform[1] = new Form2(); ((Form2*)pForm[1])->Initialize();... // Adding two forms pframe->addcontrol(*pform[0]); pframe->addcontrol(*pform[1]); } // Setting the current form pframe->setcurrentform(*pform[0]);... 29

30 Example: Multiple Form (3/4) // The function to switch form available from the outside result MyApp::MoveToForm(int i) { // checking if the id is valid if( i<0 i>=2 ) return E_OBJ_NOT_FOUND; // exception } // Get pframe of the application Frame* pframe = GetAppFrame()->GetFrame(); // Setting the current form pframe->setcurrentform(*pform[i]); // Force the frame to redraw pform[i]->draw(); pform[i]->show(); return E_SUCCESS; 30

31 Example: Multiple Form (4/4) // Usually on some event // (action event listener for example) void Form1::OnActionEventListener(... )... if(... ) { MyApp* papp = (MyApp*)GetInstance(); app->movetoform(1); }... } 31

32 5 Multi Touch

33 Multi Touch Detect touch at multiple points at same time. Events to notify type of touch. Provides the co ordinates of all the points being touched. 33

34 Multi Touch usage Enabling Multi Touch //Enable the multi-touch function and add the event listener Touch touch; touch.setmultipointenabled(*this, true); AddTouchEventListener(*this); Knowing the number of points touched void MainForm::OnTouchPressed (const Osp::Ui::Control &source, const Osp::Graphics::Point &currentposition, const Osp::Ui::TouchEventInfo &touchinfo) { Touch touch; IList *plist = null; plist = touch.gettouchinfolistn(source); //Read the number of points being touched int count = plist->getcount(); } 34

35 Multi Touch usage Extracting the points coordinates //Get the first two touched position TouchInfo* ptouchinfo = static_cast<touchinfo *>(plist->getat(0)); Point firstpoint = ptouchinfo->position; ptouchinfo = static_cast<touchinfo *>(plist->getat(1)); Point secondpoint = ptouchinfo->position; 35

36 6 Animations

37 Animations An illusion generated by showing sequential images in a swift manner Basic animation consists of Start value Key value (automatically calculated using interpolators) End value bada supports the following interpolators: ANIMATION_INTERPOLATOR_LINEAR ANIMATION_INTERPOLATOR_DISCRETE ANIMATION_INTERPOLATOR_EASE_IN ANIMATION_INTERPOLATOR_EASE_OUT ANIMATION_INTERPOLATOR_EASE_IN_OUT ANIMATION_INTERPOLATOR_BEZIER 37

38 Handling Animation bada provides methods to create an animation between the start and end values for the same data type in a given duration, using an interpolator Classes IntegerAnimation FloatAnimation PointAnimation DimensionAnimation RectangleAnimation RotateAnimation Using AnimationGroup class, multiple animations can be combined into on e animation group Animation can be applied to UI control properties like Position, Size, Alpha and Rotation 38

39 Listeners and important classes IControlAnimatorEventListener OnControlAnimationFinished OnControlAnimationStarted OnControlAnimationStopped IControlAnimatorDetailedEventListener OnControlAnimationFinished OnControlAnimationRepeated OnControlAnimationStarted OnControlAnimationStopped The ControlAnimator class used for Animating a control Animating multiple controls 39

40 Animation Example Example to animate a button from one position to another Class declaration Initialize controls Use point animation to animate from one point to another Class declaration class AnimationSample : public Osp::Ui::Controls::Form, public Osp::Ui::IActionEventListener { public: virtual result OnInitializing(void); virtual void OnActionPerformed(const Control& source, int actionid); protected: static const int ID_BUTTON = 101; Osp::Ui::Controls::Button * pbutton; }; 40

41 Initialize controls result AnimationSample::OnInitializing(void) { result r = E_SUCCESS; // Creates a button pbutton = new Button(); pbutton->construct(rectangle(10, 200, 460, 100)); pbutton->settext(l"start animation"); pbutton->setactionid(id_button); pbutton->addactioneventlistener(*this); AddControl(* pbutton); } return r; 41

42 Animate the button case ID_BUTTON: { // Starts an animation result r = E_SUCCESS; ControlAnimator* pbuttonanimator = pbutton->getcontrolanimator(); Point startpos = pbutton->getposition(); Point endpos(startpos.x, startpos.y + 200); PointAnimation pointanimation(startpos, endpos, 2000, ANIMATION_INTERPOLATOR_LINEAR); pointanimation.setautoreverseenabled(true); r = pbuttonanimator->startuseranimation(animation_target_position, pointanimation); if (IsFailed(r)) { AppLog("Start Animation on Button Failed.\n"); return; } } break; 42

43 7 Layout

44 Introduction Layout in simple terms is the Organization of Control in a container bada platform allows to attach a Layout to a container Attaching a layout to a parent container affects the size and position of all the child controls added to the parent container 3 types of layout Relative layout Single-dimensional layout: Horizontal box layout Vertical box layout 2-dimensional grid layout 44

45 Relative layout Size and position of each control is relative to the size and position of other child controls of the container For relative layout, it s a must to assign relationships between the controls Relationship style of a child control Align my side to the side of another control Invalidate all the relationships on my side Align my position to the center of the container Invalidate my center alignment 45

46 Single-dimensional layout The HorizontalBoxLayout positions the child controls in a linear horizontal layout. The VerticalBoxLayout positions the child controls in a linear vertical layout. Attributes for vertical and horizontal box layouts Weight Alignment Spacing Margin 46

47 2-dimensional grid layout The GridLayout positions in a cell of a 2-dimensional grid Each cell of the grid is sized based on the height and width of the control placed in it Attributes for Grid layout Stretch, shrink, or collapse Alignment Spacing Margin 47

48 Layout Example Creating a RelativeLayout: Construct a RelativeLayout: RelativeLayout* playout = new RelativeLayout; playout->construct(); Apply the layout to a container Panel* prelativepanel = new Panel; prelativepanel->construct(*playout, Rectangle(0, 0, 300, 500)); Retrieve the relative layout instance from the container RelativeLayout * playout = dynamic_cast<relativelayout*> (prelativepanel->getlayoutn()); 48

49 Layout Example contd Assign relationship and margin TextLeftTop.SetText(L"fixed"); // Align the left side of TextLeftTop to the parent panel s left side playout->setrelation(textlefttop, panel, RECT_EDGE_RELATION_LEFT_TO_LEFT); playout->setrelation(textlefttop, panel, RECT_EDGE_RELATION_TOP_TO_TOP); // Leave a margin of 15 to the left and top of TextLeftTop playout->setmargin(textlefttop, 15, 0, 15, 0); TextRightTop.SetText(L"scalable <=>"); playout->setrelation(textrighttop, TextLeftTop, RECT_EDGE_RELATION_LEFT_TO_RIGHT); playout->setrelation(textrighttop, panel,rect_edge_relation_right_to_right); playout->setrelation(textrighttop, panel,rect_edge_relation_top_to_top); playout->setmargin(textrighttop, 15, 15, 15, 0); TextCenter.SetText(L"centered"); layout.setcenteraligned(textcenter, CENTER_ALIGN_HORIZONTAL); Layout.SetCenterAligned(TextCenter, CENTER_ALIGN_VERTICAL); 49

50 8 Designing UI using UI Builder

51 UI Builder XML code for Form designs Can contain a variety of controls and their hierarchy Why XML Easy localization Choose XML for locale Multiple device support Choose XML for the device resolution & other device configurations WYSWYG (what you see is what you get) style UI design 51

52 UI Builder Common properties to specify ID Size & position Text, text alignments, and text colors Parent-child relationship 52

53 UI Builder At loading time Memory for controls are allocated Hierarchies are set Other properties of controls are set In your code Retrieve controls by their names Set additional properties only available in the code event listeners action id s List items... 53

54 UI Builder: Auto code generation 54

55 Using Controls in XML // Loading a form XML form.construct( IDF_FORM1 ); // name of the form // Getting the instance of a control from the form Button& button = (Button&)*(form.GetControl( IDC_BUT2 )); 55

56 String Table To localize application for multiple languages. Each localized string is saved to its own xml file in Res folder in the appl ication project. 56

57 Using String Table Application* papp = Application::GetInstance(); String str1; r = papp->getappresource()->getstring("ids_hello", str1); 57

58 Resource fallback policy: Bitmap AppResource::GetBitmapN selects and loads the best suited image available. 58

59 Resource fallback policy: Form XML Load target device-specific resources or a best matching resource if the target device-specific resource is unavailable. 59

60 Summary There are many types of controls for many different functionalities Forms can be used for multipage applications UI Builder can help the developer design Forms easily The corresponding XML file can be loaded using code and controls can be found by ID 60