From: Editor Lionbridge Date: Thu, 17 Nov 2016 07:20:44 +0000 (+0200) Subject: [LB] UI Builder info updated based on Tizen Studio (synch from 2.4) X-Git-Tag: tizen_3.0/TD_SYNC/20161201~27 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=refs%2Fchanges%2F97%2F98397%2F1;p=sdk%2Fonline-doc.git [LB] UI Builder info updated based on Tizen Studio (synch from 2.4) Change-Id: I3b8d14bd07925f7d520f3df422f52042fdde6cc9 --- diff --git a/org.tizen.studio/html/native_tools/ui_builder_n.htm b/org.tizen.studio/html/native_tools/ui_builder_n.htm index fe34d0c..8de00ee 100644 --- a/org.tizen.studio/html/native_tools/ui_builder_n.htm +++ b/org.tizen.studio/html/native_tools/ui_builder_n.htm @@ -65,7 +65,7 @@
  1. Create a view.

    A Tizen native application is composed of multiple views through which the user navigates. The view is an editing unit in the native UI Builder.

    -

    To add a new view in the Outline view, click the Empty View icon in the toolbar (marked by a red circle in the following figure), or right-click the Outline view area and select Add View.

    +

    To add a new view in the Outline view, click the Empty View icon in the toolbar (marked by a red circle in the following figure), or right-click the Outline view area and select Add and the applicable view.

    Empty view Empty view

    2. diff --git a/org.tizen.tutorials/html/images/ui_builder_add.png b/org.tizen.tutorials/html/images/ui_builder_add.png index 38876b7..28cceb7 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_add.png and b/org.tizen.tutorials/html/images/ui_builder_add.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_addview1.png b/org.tizen.tutorials/html/images/ui_builder_addview1.png deleted file mode 100644 index fac8ab2..0000000 Binary files a/org.tizen.tutorials/html/images/ui_builder_addview1.png and /dev/null differ diff --git a/org.tizen.tutorials/html/images/ui_builder_addview2.png b/org.tizen.tutorials/html/images/ui_builder_addview2.png deleted file mode 100644 index f6355c6..0000000 Binary files a/org.tizen.tutorials/html/images/ui_builder_addview2.png and /dev/null differ diff --git a/org.tizen.tutorials/html/images/ui_builder_assist.png b/org.tizen.tutorials/html/images/ui_builder_assist.png index 6f09e0d..63557ce 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_assist.png and b/org.tizen.tutorials/html/images/ui_builder_assist.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_autocomplete.png b/org.tizen.tutorials/html/images/ui_builder_autocomplete.png index 9179e97..b551290 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_autocomplete.png and b/org.tizen.tutorials/html/images/ui_builder_autocomplete.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_change_view.png b/org.tizen.tutorials/html/images/ui_builder_change_view.png deleted file mode 100644 index a079408..0000000 Binary files a/org.tizen.tutorials/html/images/ui_builder_change_view.png and /dev/null differ diff --git a/org.tizen.tutorials/html/images/ui_builder_content_assist.png b/org.tizen.tutorials/html/images/ui_builder_content_assist.png index 8856bf5..c2ae616 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_content_assist.png and b/org.tizen.tutorials/html/images/ui_builder_content_assist.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_design_view.png b/org.tizen.tutorials/html/images/ui_builder_design_view.png deleted file mode 100644 index 2b1818e..0000000 Binary files a/org.tizen.tutorials/html/images/ui_builder_design_view.png and /dev/null differ diff --git a/org.tizen.tutorials/html/images/ui_builder_drag.png b/org.tizen.tutorials/html/images/ui_builder_drag.png index 6f0997d..120cdc2 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_drag.png and b/org.tizen.tutorials/html/images/ui_builder_drag.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_drop.png b/org.tizen.tutorials/html/images/ui_builder_drop.png deleted file mode 100644 index 4464133..0000000 Binary files a/org.tizen.tutorials/html/images/ui_builder_drop.png and /dev/null differ diff --git a/org.tizen.tutorials/html/images/ui_builder_empty_view.png b/org.tizen.tutorials/html/images/ui_builder_empty_view.png new file mode 100644 index 0000000..aa491fc Binary files /dev/null and b/org.tizen.tutorials/html/images/ui_builder_empty_view.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_empty_view2.png b/org.tizen.tutorials/html/images/ui_builder_empty_view2.png new file mode 100644 index 0000000..1137fc3 Binary files /dev/null and b/org.tizen.tutorials/html/images/ui_builder_empty_view2.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_event_handler_code.png b/org.tizen.tutorials/html/images/ui_builder_event_handler_code.png index eb61fc9..d33029e 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_event_handler_code.png and b/org.tizen.tutorials/html/images/ui_builder_event_handler_code.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_event_layout.png b/org.tizen.tutorials/html/images/ui_builder_event_layout.png index 90b100b..001b197 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_event_layout.png and b/org.tizen.tutorials/html/images/ui_builder_event_layout.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_event_tab.png b/org.tizen.tutorials/html/images/ui_builder_event_tab.png index a7d93e8..d1a09b7 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_event_tab.png and b/org.tizen.tutorials/html/images/ui_builder_event_tab.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_folder.png b/org.tizen.tutorials/html/images/ui_builder_folder.png index 0414fcc..e0bd333 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_folder.png and b/org.tizen.tutorials/html/images/ui_builder_folder.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_go.png b/org.tizen.tutorials/html/images/ui_builder_go.png index 696df80..f6f3dcb 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_go.png and b/org.tizen.tutorials/html/images/ui_builder_go.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_layout.png b/org.tizen.tutorials/html/images/ui_builder_layout.png index 178e289..8b0fe70 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_layout.png and b/org.tizen.tutorials/html/images/ui_builder_layout.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_login.png b/org.tizen.tutorials/html/images/ui_builder_login.png index 1861655..c19d0d4 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_login.png and b/org.tizen.tutorials/html/images/ui_builder_login.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_manifest.png b/org.tizen.tutorials/html/images/ui_builder_manifest.png index b8c14ba..c96aeba 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_manifest.png and b/org.tizen.tutorials/html/images/ui_builder_manifest.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_negative.png b/org.tizen.tutorials/html/images/ui_builder_negative.png index 0288f1a..3be235d 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_negative.png and b/org.tizen.tutorials/html/images/ui_builder_negative.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_new_dialog.png b/org.tizen.tutorials/html/images/ui_builder_new_dialog.png deleted file mode 100644 index 9acea06..0000000 Binary files a/org.tizen.tutorials/html/images/ui_builder_new_dialog.png and /dev/null differ diff --git a/org.tizen.tutorials/html/images/ui_builder_new_view.png b/org.tizen.tutorials/html/images/ui_builder_new_view.png index ddd25f7..4b97a0e 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_new_view.png and b/org.tizen.tutorials/html/images/ui_builder_new_view.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_positive.png b/org.tizen.tutorials/html/images/ui_builder_positive.png index 95b248b..a6436b2 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_positive.png and b/org.tizen.tutorials/html/images/ui_builder_positive.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_project_details.png b/org.tizen.tutorials/html/images/ui_builder_project_details.png index 492a4c3..4b78e3b 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_project_details.png and b/org.tizen.tutorials/html/images/ui_builder_project_details.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_project_structure.png b/org.tizen.tutorials/html/images/ui_builder_project_structure.png deleted file mode 100644 index 659c3c4..0000000 Binary files a/org.tizen.tutorials/html/images/ui_builder_project_structure.png and /dev/null differ diff --git a/org.tizen.tutorials/html/images/ui_builder_properties.png b/org.tizen.tutorials/html/images/ui_builder_properties.png index 9f565a0..c72c6af 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_properties.png and b/org.tizen.tutorials/html/images/ui_builder_properties.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_remove.png b/org.tizen.tutorials/html/images/ui_builder_remove.png index 6e23b25..cc242c3 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_remove.png and b/org.tizen.tutorials/html/images/ui_builder_remove.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_root.png b/org.tizen.tutorials/html/images/ui_builder_root.png index ec9a8f3..c9b1822 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_root.png and b/org.tizen.tutorials/html/images/ui_builder_root.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_selection.png b/org.tizen.tutorials/html/images/ui_builder_selection.png index 9841652..7599535 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_selection.png and b/org.tizen.tutorials/html/images/ui_builder_selection.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_source.png b/org.tizen.tutorials/html/images/ui_builder_source.png index afb2e30..a0ca201 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_source.png and b/org.tizen.tutorials/html/images/ui_builder_source.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_storyboard_all.png b/org.tizen.tutorials/html/images/ui_builder_storyboard_all.png deleted file mode 100644 index 7da2f99..0000000 Binary files a/org.tizen.tutorials/html/images/ui_builder_storyboard_all.png and /dev/null differ diff --git a/org.tizen.tutorials/html/images/ui_builder_storyboard_drag.png b/org.tizen.tutorials/html/images/ui_builder_storyboard_drag.png index f1b0571..a771420 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_storyboard_drag.png and b/org.tizen.tutorials/html/images/ui_builder_storyboard_drag.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_storyboard_drop.png b/org.tizen.tutorials/html/images/ui_builder_storyboard_drop.png index 88016ed..abd5061 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_storyboard_drop.png and b/org.tizen.tutorials/html/images/ui_builder_storyboard_drop.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_storyboard_options.png b/org.tizen.tutorials/html/images/ui_builder_storyboard_options.png index 8036aa1..f95341b 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_storyboard_options.png and b/org.tizen.tutorials/html/images/ui_builder_storyboard_options.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_storyboard_properties.png b/org.tizen.tutorials/html/images/ui_builder_storyboard_properties.png index a729f3d..895ecbd 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_storyboard_properties.png and b/org.tizen.tutorials/html/images/ui_builder_storyboard_properties.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_storyboard_transitions.png b/org.tizen.tutorials/html/images/ui_builder_storyboard_transitions.png index 8dd7351..ff27693 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_storyboard_transitions.png and b/org.tizen.tutorials/html/images/ui_builder_storyboard_transitions.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_templates.png b/org.tizen.tutorials/html/images/ui_builder_templates.png new file mode 100644 index 0000000..47e2a03 Binary files /dev/null and b/org.tizen.tutorials/html/images/ui_builder_templates.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_view_shown.png b/org.tizen.tutorials/html/images/ui_builder_view_shown.png index 2732aec..57702b3 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_view_shown.png and b/org.tizen.tutorials/html/images/ui_builder_view_shown.png differ diff --git a/org.tizen.tutorials/html/images/ui_builder_views.png b/org.tizen.tutorials/html/images/ui_builder_views.png index 754262c..323f7c8 100644 Binary files a/org.tizen.tutorials/html/images/ui_builder_views.png and b/org.tizen.tutorials/html/images/ui_builder_views.png differ diff --git a/org.tizen.tutorials/html/native/feature/ui_builder_app_design_mn.htm b/org.tizen.tutorials/html/native/feature/ui_builder_app_design_mn.htm index 5d182e4..7c22196 100644 --- a/org.tizen.tutorials/html/native/feature/ui_builder_app_design_mn.htm +++ b/org.tizen.tutorials/html/native/feature/ui_builder_app_design_mn.htm @@ -36,57 +36,36 @@

    You can approach the task of designing a native application with several methods. On the one hand, you can edit the application in the Tizen Studio after creating it with a basic template. On the other hand, you can edit the application in another editor and build it with the CLI interface of the Tizen Studio. As a third option, you can use the native UI Builder in the Tizen Studio.

    -

    This documentation has been created based on the mobile profile.

    +

    This topic describes the design of a mobile application with the UI Builder. The process for a wearable application is similar.

    -

    The native UI Builder offers 2 ways to develop a native application:

    +

    The native UI Builder offers 2 ways to develop a native application in the WYSIWYG Editor view:

    -

    The Design and Source tabs are visible in the WYSIWYG Editor view. You can switch between the tabs as needed.

    +

    You can switch between the tabs as needed.

    Creating a Project

    To create a native UI Builder project:

      -
    1. In the Tizen Studio, select File > New > Tizen Native Project. -

      If the project option you want is not visible, make sure that you are using the correct perspective (Tizen Native UI Builder). To switch perspectives, go to Window > Open Perspective > Other and select the perspective you need.

      -

      In the New dialog, select Tizen Native Project and click Next.

      +
    2. In the Tizen Studio, select File > New > Tizen Project.
      3. +
    3. In the Project Wizard, create a template-based mobile native application, and select a Tizen native UI Builder project template. +

      The UI Builder - Navigation View template creates an application with 3 default views, while the UI Builder - Single View template offers a single view. For more information on the Project Wizard and templates, see Creating Tizen Projects with Tizen Project Wizard.

      -

      New dialog

      -
      4. -
    4. In the New Tizen Native Project window, select the Template tab and define the project details: -
        -
      • Select a Tizen native UI Builder project template.
        • -
      • Define the name for your project. - - - - - - - - - -
        Note
        The Tizen API names cannot be used as project names. The project name must be more than 2 characters and is restricted to the following regular expression: [a-z OR A-Z][a-z OR A-Z OR 0-9]{2,49}.
        -
        • -
      • A default location for your application project is used by default.
        • -
      -

      Click Finish.

      -

      Project details

      +

      Project templates

      5. +
    5. Define the project details, and click Finish. +

      Project templates

    -

    After you have created the project, the Tizen Studio changes to the Tizen native UI Builder interface and the project structure is shown in the Project Explorer view.

    +

    After you have created the project, the Tizen Studio changes to the UI Builder perspective with the applicable views, and the project structure is shown in the Project Explorer view.

    -

    Figure: UI Builder views

    -

    UI Builder views

    - -

    Figure: Default project structure

    -

    Default project structure

    +

    Figure: UI Builder views and default project structure

    +

    UI Builder views and default project structure

    The following table describes the content of the default project folders and files.

    @@ -128,7 +107,7 @@ Layout layout.xml - Layout meta file (xml: Extensible Markup Language) + Layout meta file Icon icon.png @@ -143,28 +122,26 @@

    Designing a UI Layout for a View

    -

    Using the GUI Editor (WYSIWYG)

    +

    Using the WYSIWYG Editor

    To create a UI with the WYSIWYG Editor:

    1. Each view must have a root container as a top-level UI component (see the UI hierarchy structure figure). To design a view, first place the top-level UI component, the root container, on the canvas. -

      To place a top-level UI component, use the components in the UI Component Container category of the Palette. You can drag & drop the component from the palette to the canvas, or select the component in the palette and click in the canvas. After you have added the component, you can see it in the Outline view.

      -

      In this example, a grid component is added as a root container. The following figures show how to drag a grid component from the Palette and drop it on the canvas. In the final figure, you can see the new root grid component in the Outline view.

      +

      To place a top-level UI component, use the components in the UI container category of the Palette. You can drag and drop the component from the palette to the canvas, or select the component in the palette and click in the canvas. After you have added the component, you can see it in the Outline view.

      Drag a grid UI component from the Palette

      -

      Drop the grid UI component on the canvas

      Root container in the Outline view

    2. After placing the root container, you can place any other UI components you want. -

      The native UI Builder provides a useful visual feedback. When you drag a UI component on the canvas, a feedback shows whether you can place the component. If the component can be placed in the selected position, a blue dashed rectangle is shown. If not, a red background is shown and you have to move the component to another position.

      +

      The native UI Builder provides a useful visual feedback. When you drag a UI component on the canvas, a feedback shows whether you can place the component. If the component can be placed in the selected position, the cursor shows a + sign. If not, the canvas turns red and the cursor displays a rejection sign.

      The following figures show an example of positive and negative feedback.

      Positive feedback

      Negative feedback

    3. After placing the UI components, you can set their properties and bind any event handlers for specific events. -

      Select the component you want to modify in the Design tab, and it is shown with a red-dotted line. Use the Properties view to set the properties and bind event handlers for the selected component.

      +

      Select the component you want to modify in the Design tab, and it is shown with a blue line. Use the Properties view to set the properties and bind event handlers for the selected component.

      Set the component properties

    @@ -177,13 +154,13 @@

    Using the XML Editor

    Another UI programming method of the native UI Builder is to use the XML editor. You can edit your layout file in the Source tab. This section describes some of the features that are available in the Source tab.

    -

    For more information about the XML schema of the layout file, see XML specification.

    +

    For more information about the XML schema of the layout file, see Managing UI Component Attributes in layout.xml.

    -

    To use the XML Editor and its helpful features:

    +

    To use the XML editor and its helpful features:

    -

    To add a view with the Navigation view:

    +

    Adding Views

    +

    To add a new view:

      -
    1. To add a new view, do one of the following: -
        -
      • Click the Empty View icon in the Navigation view toolbar.
        • -
      • Press the Ctrl+A shortcut. -

        Adding a view using the toolbar or shortcut

        -
        • -
      • Open the Navigation view context menu, and select New. -

        Adding a view using the context menu

        -

        In this case, a New View dialog opens with thumbnails and you can select a predefined view template for creating the view. Select the template you want, enter a name (ID) for the view, and click Finish.

        -

        New View

        -
        • -
      -

      After adding a view, you can see it in the Navigation view and the Source tab.

      -

      View in the Navigation view and Source tab

      -
      2. -
    2. To design a new view: -
        -
      1. To activate the view you want to edit, double-click the desired view in the Navigation view. -

        Changing an editing view

        -
        2. -
      2. After selecting the view, create a layout for it. -

        Designing a view

        -
        3. -
      +
    3. In the Outline view, click the Empty View icon in the toolbar (marked by a red circle in the following figure), or right-click the Outline view area and select Add and the applicable view. + +

      Empty view Empty view

      +
      4. + +
    4. If you select View From Template List, a collection of predefined view templates for creating the view is shown. Select the template you want, enter a name (ID) for the view, and click Finish. +

      View templates

      + +

      After adding a view, you can see it in the Outline view and the Source tab.

      +

      View in the Outline view and Source tab

      5. +
    5. To activate the view for editing, click it in the Outline view.
      6. +
    6. After selecting the view, create a layout for it by adding UI components from the Palette and defining their properties in the Properties view.

    Binding an Event Handler to the UI Component

    @@ -247,12 +213,12 @@
    1. Select a UI component in the Design tab.
      2. -
    2. In the Properties view, select the Event tab. +
    3. In the Properties view, scroll down to the Events panel.

      Event tab

      -

      The Event tab shows all available event types for the selected UI component:

      +

      The Events panel shows all available event types for the selected UI component:

      • To add an event handler for an event type, click Add next to the event type. -

        The Event tab is expanded and you can see the suggested event handler name in gray color. Change the function name of the event handler, if needed. You can see the added event element in the Source tab.

        • +

        The Events panel expands and you can see the suggested event handler name in gray color. Change the function name of the event handler, if needed. You can see the added event element in the Source tab.

      • To go to the event handler source, click Go.
      • To remove the event handler, click Remove.
      @@ -312,9 +278,6 @@ typedef struct _uib_view1_view_context uib_view1_view_context;

      Adding an Event Handler from the Storyboard

      To transition between pages in your application, use the Storyboard feature of the UI Builder. In the Storyboard tab, you can see all the views of your application. In the Storyboard, transitioning between the application views based on some UI component event is called a connection from a UI component to the target view. The target view is the view to be opened when performing a specific event on the UI component.

      - -

      Figure: All views mode in the Storyboard tab

      -

      All views mode in the Storyboard tab

      To create a connection:

      @@ -327,15 +290,15 @@ typedef struct _uib_view1_view_context uib_view1_view_context;

      Drop the connection

      Selecting an event from the context menu generates the code for the view transition and creates a connection between the 2 views.

      4. -
    4. To see the properties of the created event, select the UI component and go to the Event tab in the Properties view. +
    5. To see the properties of the created event, select the UI component (or the connection arrow) and go to the Events panel in the Properties view.

      Event properties

    6. To manage the connection options, right-click the connection, and select Go to Source Code to access the source code or Delete Connection to delete the connection.

      Connection options

      The Go to Source Code option takes you to the source code, where 2 functions have been generated:

        -
      • One is called before the transition is performed to the target view (view1_button1_onclicked()).
        • -
      • One is provided after the transition has been performed (view1_button1_onclicked_post()).
        • +
      • One is called before the transition is performed to the target view (view1_<UI_component>_<event>()).
        • +
      • One is provided after the transition has been performed (view1_<UI_component>_<event>_post()).

      You can perform whatever pre or post transition operations you want in these functions.

      Pre and post transition operations

      @@ -345,7 +308,7 @@ typedef struct _uib_view1_view_context uib_view1_view_context;

      Running the Application in the Emulator

      -

      You can run your application in the Emulator. The device Emulator, provided with the Tizen Studio, imitates the target environment running Tizen native applications. Using this replicated environment, you can test your application before deploying to a real target device. For more information, see Running Applications on the Emulator.

      +

      You can run your application in the emulator. The device emulator, provided with the Tizen Studio, imitates the target environment running Tizen native applications. Using this replicated environment, you can test your application before deploying to a real target device. For more information, see Running Applications on the Emulator.

      To run the application: