From: sonbc121.son Date: Fri, 20 Oct 2017 06:43:55 +0000 (+0900) Subject: UI BUILDER: Update document and screenshot for the new UI/UX X-Git-Tag: MD/guides-dotnet~55^2 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=15d90d662cce60f907ad855beeb9796134e805e0;p=sdk%2Fonline-doc.git UI BUILDER: Update document and screenshot for the new UI/UX PS2: Reviewed Change-Id: Iffaa72ddb4147d91c632e75de8ed84d692d7d6db Signed-off-by: sonbc121.son --- diff --git a/org.tizen.studio/html/images/ui_builder_component_designer.png b/org.tizen.studio/html/images/ui_builder_component_designer.png index 6336b6f..986f87e 100644 Binary files a/org.tizen.studio/html/images/ui_builder_component_designer.png and b/org.tizen.studio/html/images/ui_builder_component_designer.png differ diff --git a/org.tizen.studio/html/images/ui_builder_edj.png b/org.tizen.studio/html/images/ui_builder_edj.png index f9f3739..316f96e 100644 Binary files a/org.tizen.studio/html/images/ui_builder_edj.png and b/org.tizen.studio/html/images/ui_builder_edj.png differ diff --git a/org.tizen.studio/html/images/ui_builder_empty_view2.png b/org.tizen.studio/html/images/ui_builder_empty_view2.png index c4feba5..2243183 100644 Binary files a/org.tizen.studio/html/images/ui_builder_empty_view2.png and b/org.tizen.studio/html/images/ui_builder_empty_view2.png differ diff --git a/org.tizen.studio/html/images/ui_builder_event_handler.png b/org.tizen.studio/html/images/ui_builder_event_handler.png index 3747c60..cdde4df 100644 Binary files a/org.tizen.studio/html/images/ui_builder_event_handler.png and b/org.tizen.studio/html/images/ui_builder_event_handler.png differ diff --git a/org.tizen.studio/html/images/ui_builder_palette2.png b/org.tizen.studio/html/images/ui_builder_palette2.png index 45baf8c..217a841 100644 Binary files a/org.tizen.studio/html/images/ui_builder_palette2.png and b/org.tizen.studio/html/images/ui_builder_palette2.png differ diff --git a/org.tizen.studio/html/images/ui_builder_source_tab.png b/org.tizen.studio/html/images/ui_builder_source_tab.png index da605a6..9975729 100644 Binary files a/org.tizen.studio/html/images/ui_builder_source_tab.png and b/org.tizen.studio/html/images/ui_builder_source_tab.png differ diff --git a/org.tizen.studio/html/images/ui_builder_view_drag_and_drop.png b/org.tizen.studio/html/images/ui_builder_view_drag_and_drop.png new file mode 100644 index 0000000..e6efec7 Binary files /dev/null and b/org.tizen.studio/html/images/ui_builder_view_drag_and_drop.png differ 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 e86d4b1..a7633e5 100644 --- a/org.tizen.studio/html/native_tools/ui_builder_n.htm +++ b/org.tizen.studio/html/native_tools/ui_builder_n.htm @@ -51,29 +51,38 @@

Designing a User Interface

-

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

+

The native UI Builder offers 2 ways to develop a native application UI with the UI editor toggle button in the top toolbar area:

-

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

+

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

Editing the UI Layout in the WYSIWYG Mode

To create a UI layout:

  1. Create a view. +
      +
    • With the Outline 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 and the applicable view.

      Empty view Empty view

      • +
    • With the Palette: +

      You can add a view from the Palette. The Ctxpopup view and Popup view are available for mobile applications only.

      +

      To add a new view from the Palette, drag and drop the view from the Palette to the canvas.

      + +

      Empty view

      +
      • +
    + +
  2. Add a UI container to the view.

    Each view must have a root container as the topmost UI component on the canvas. To place the root container, use the components in the UI containers category of the Palette view. You can drag and drop the component from the Palette to the canvas.

    -

    If you select an empty view in the Outline view, only the UI container components are shown in the Palette. After you place a root container, the other components become visible in the Palette.

    -

    The following figures show first the Palette with an empty view, and next the Palette after adding the root container.

    -

    Palette

    +

    The following figure shows the Outline view after adding a grid root container from the Palette to the empty view.

    Palette

  3. Add a UI component. @@ -124,24 +133,27 @@

    Editing the UI Layout in the XML Mode

    -

    You can create the UI layout in the native UI Builder by using the XML editor in the Source tab to edit the layout file. For more information on the layout.xml file format and supported elements, see Managing UI Component Attributes in layout.xml.

    -

    While editing in the Source tab, you can preview the resulting layout in the preview pane.

    +

    You can create the UI layout in the native UI Builder by using the XML editor in the Source editor to edit the layout file. For more information on the layout.xml file format and supported elements, see Managing UI Component Attributes in layout.xml.

    +

    While editing in the Source editor, you can preview the resulting layout in the preview pane.

    -

    Figure: Source tab

    -

    Source tab

    +

    Figure: Source editor

    +

    Source editor

    The native UI Builder provides content assist functionality, which helps you to write code faster and more efficiently. To use this functionality, type a few characters of the word and press Ctrl + Space.

    If you select an element in the suggested list with content assist, the auto-complete feature automatically adds the end element.

    -

    If you move a focus to another UI component in the Source tab, the selection in the preview pane is automatically synchronized. Similarly, if you change the selection in the preview pane, the focus in the Source tab moves accordingly.

    +

    If you move a focus to another UI component in the Source editor, the selection in the preview pane is automatically synchronized. Similarly, if you change the selection in the preview pane, the focus in the Source editor moves accordingly.

    Binding an Event Handler

    An event handler is part of the application logic. It is called by the Tizen framework when any user interaction, such as a mouse click or touch, occurs. The event types vary between UI components, and the event information data depends on the UI component and event type.

    -

    You can add event handlers for UI component events in the Properties view. To add view transition events between views, use the Storyboard tab in the Layout Editor view.

    - +

    You can add event handlers for UI component events in the Properties view. To add view transition events between views, use the Storyboard in the Layout Editor view.

    +
    + Note + Since Tizen Studio 2.0, the top Storyboard tab has been removed and the storyboard feature has been included in the layout editor. The storyboard feature in the Layout Editor view gives you a natural understanding of the overall flow of views when you create a screen, and you can write application prototyping for planning and designing your application. +

    Adding an Event Handler to a Specific UI Component

    -

    If you select a UI component in the Design tab, all available event types for the selected UI component are displayed in the Event section of the Properties view:

    +

    If you select a UI component in the Design editor, all available event types for the selected UI component are displayed in the Event section of the Properties view:

    • To add an event handler for an event type, click Add event handler next to the event type. The area below the event is expanded, and a suggested event handler name is shown in gray color.
    • To go to the event handler source, click Get the event handler.