===== Window: Create (simple) + Add a Widget ===== 

=== Window: Create (simple) ===

<WRAP GROUP>
<WRAP center round tip 60%>
<WRAP centeralign>
**From experience, a window can be created and the user can not see it!**
</WRAP>
This happens if 2 options and 1 action are set:
  * **Option 1**: The ''Main menu'' > ''Launcher Options'' > ''UI & Animation'' > ''Blur behind'' is //not// activated.
  * **Option 2**: The window object ''Background'' > ''Color'' > ''ARGB code'' is set to transparent such as 00000000
  * **Action**:  The user has no objects placed in the window container.
<WRAP centeralign>
Sounds too simple, but happens ... and if it does, //try to remember this tip!//
</WRAP>
</WRAP>
</WRAP>

Since the above TIP has been mentioned, the procedure includes the "simple" addition of adding an "App widget". If that is not want, simply change what the window is to contain ... leave the window empty but make sure to retain the default ''background'' so the window does not appear to "disappear".

  - On the home screen, enter Edit On mode (see[[section:section1-2-e_beginners_basic_editing_steps#edit-on| here]] for details) or one method is to long-press an empty space.
  - In the to Object Design Menu tap the {{:ui:ui-icon_add_gray.webp?25}} icon
  - Select Graphic
  - Select either •Image or •Text
    - Image if the screen object to open the window will be an icon-type
    - Text if the screen object to open the window will be text-based
      * Note: There are other ways to open a window such as [[:section:section-hidden_objects|hidden objects]] or [[:section:section-gestures|gestures]]. 
    - ''Image'' will be the example selected here
  - From the dialog listing select ''Window''
    - The Window-Portrait dialog shows any previously created windows ++(see image). | {{:howto:howto-window_create-window_object-window_portrait_dialog.webp?direct&200}}++
      * When a window design is created, it is specific to it's designed purpose and will retain it's previous characteristics or, if modified here, will change those characteristics where it is elsewhere being used.
    - To add a unique window design, in the lower right corner tap {{:ui:ui-icon_add_gray.webp?25}}
      * In the Title dialog, enter a unique name for the new design. As an example: ''App_Widget_Window''
        * Note: no spaces or hyphens are permitted, only underscores (_)
    - Tap OK
  - Tap the Action icon {{:ui:ui-icon_action.webp?15}} to open the new window in full screen mode ++(see image). | {{:howto:howto-window_create-edit_1.webp?direct&200}}++ By default, the window background is light gray. The top Object Design Menu {{:howto:howto-window_create-edit_menu.webp?200}} includes 2 key icons:
    - Edit (pencil) {{:ui:ui-icon_edit.webp?15}} - Tap this to enable:
      * bulb handles on it's boundaries used to down-size the window
      *Option icon {{:ui:ui-icon_option.webp?15}} in the lower right corner of the window opens the Window Option dialog and the Window Animation dialog. ++(see image). | {{:howto:howto-window_create-edit_2.webp?direct&200}}++
        * While the Edit and Option dialogs will not be discussed here, more information is available at [[:section:section-window-option_dialog|Window - Option]] and [[:section:section-window-animation_dialog|Window - Animation]] in the uiTotalLauncherManual wiki.
    - Add icon {{:ui:ui-icon_add_gray.webp?15}} - opens the Add Object dialog
      * objects, such as an app widget, layout, or graphic can be added to a new window. 
        * In this example only the window is being created, so an object will //not// be added. 
              * ++If an object is to be added now, see these steps which will replace Steps 6.c and 6.d and the procedure Window: Add an Existing Widget to a Window after the Window Has Been Created. Click here | 
  ☛ If the object to be added to the currently being created window NOT exist __on a page__
    ☞ On the top Object Design Menu. Tap the Add +
    ☞ From the Add Object dialog select ''Widget''
      • Select any desired object, but in this procedure, ''App drawer''
        • Note: There are 3 types of application drawers and 1 contact "drawer". Each has its own characteristic which can be confusing when really deep diving into their uniqueness. A full description and disection can be found at [[:section:section-widget|here]] at **Total Launcher Widgets** if desired.
  ☛ The App drawer widget is now in the full screen window, centered. Tap-hold and drag the drawer to re-locate it as desired.
  ☛ If the full screen window is to be made smaller (optional):
    ☞ Tap and hold the center of the window to select the entire window (highlight with "bulbs" showing on its edges)
      • Drag any "bulb" to decrease the window size as desired. If too small, the window may block some portions of the widget object which default to a 4x3 view (4 columns, 3 rows). This arrangement can be modified in the widget's Options (Gride type, Columns, Rows) if needed.
  ☛ To close the window, tap outside its edges or swipe right-to-left and return to the page with the default window object icon highlighted.
  ☛ The widget object icon is now in the window.
Now, continue the //SIMPLE// creation, with the procedure: Window: Create (simple) @ Step #7-#11.++
    - Back out of the window by swiping right-to-left to return to the Window-Portrait dialog
    - Back out of the dialog by swiping right-to-left again
  - The new "image" for the window object icon (not the window itself) appears in the center of the page selected (highlighted) ++(see image). | {{:howto:howto-window_create-window_object-selected.webp?direct&200}}++
      * The "bulbs" in the center of each container border can be used as a handle to tap-hold and drag to modify the area of the window object icon.
        * Resize and position on the screen as desired
      * This window object icon can also be re-sized and moved by opening it's Edit mode {{:ui:ui-icon_object_edit.webp?15}} with a light tap to the selected object. This method of editing is reviewed in detail at [[:section:section-object_editing|Object Editing]].
  - The window object icon which activates the window is on the page with it's default image.
    - This image can be changed by selecting the object (tap and hold to highlight) which opens the top Object Design Menu.
    - The top Object Design Menu Option icon {{:ui:ui-icon_option.webp?15}} opens the Option Edit dialog ++(see image). | {{:howto:howto-window_create-window_object-option.webp?direct&200}}++
      * Tap the Image field to open the Image selection categories.
        * Experiment with the Image and Icon Pack categories.
      * Once completed, back out to see the window object icon selected with the new image.
  - To open the newly created window, the window object icon must be linked to that action
    - The window object icon must be selected, then ...
      * Tap the top Object Design Menu Action icon {{:ui:ui-icon_action.webp?15}}
    - The Action dialog opens ++(see image). | {{:howto:howto-window-create-object-tap_action-dialog.webp?direct&200}}++
    - Scroll to view the various actions available. In this example use ''Tap''
      * Select Tap > ''Action'' to open the Action On Tap dialog: ++(see image) | {{:howto:howto-window-create-object-action-dialog_blurred.webp?direct&200}}++
      * Select Window to open the Window-Portrait dialog ++(see image) | {{:howto:howto-window_create-window_object-window_portrait_dialog.webp?direct&200}}++
      * Scroll the dialog to find and select the example ''App_Widget_Window''
      * TL now returns to the previous Action On Tap dialog (Tap) and shows the tap action will open the ''App_Widget_Window''
      * Back out to the page
  - The window object icon is on the page. When tapped it will open the newly created App_Widget_Window. 
  - If the widget was not previously added, it can now be added.
<WRAP Pagebreak />
=== Window: Add an Existing Widget to a Window after the Window Has Been Created ===

  - There are two ways to add an object to a window:
    * When creating a new window: as outlined in the dprevious procedure
    * As an after thought ... a window exists and a user wishes to add any object to the window, such as a widget. So, now at this point ...
  - Create the object to be added to an existing window:
  - Enter Edit On mode
  - From the top Object Design Menu select the Object Add icon {{:ui:ui-icon_add_gray.webp?15}}
  - The Add dialog opens ++(see image). | {{:howto:howto-window_create-widget-add.webp?direct&200}}++Then ...
      * Select Widget
      * Select any desired object, but in this procedure, ''App drawer''
        * Note: There are 3 types of application drawers and 1 contact "drawer". Each has its own characteristics which can be confusing when really deep diving into their uniqueness. A full description and disection can be found at [[:section:section-widget|here]] at **Widgets** if desired.
  - The App drawer widget is now on a page, centered. Tap-hold and drag to re-locate so that it does not block access to the other object(s) which will activate the window.
  - The App drawer widget is on the screen and **is selected**, The following steps will place the widget within the window:
    - Tap the Object Design Menu Copy icon {{:ui:ui-icon_copy.webp?15}} which will remove the highlighting of the App drawer widget, but will change the Add icon {{:ui:ui-icon_add_gray.webp?15}} to a new Add-Paste icon {{:ui:ui-icon_add_paste.webp?15}}
    - Now, to paste the copied widget into the window. Open the target window (tap the window widget)
      * In the upper right corner, tap the {{:ui:ui-icon_add_paste.webp?15}}
    - From the Add dialog, select ''Paste'' ++(see image) | {{:howto:howto-window_create-widget_add-add_paste_dialog.webp?direct&200}}++
      * The "App_Widget_Window" now contains the App Drawer widget
    - Close the window by either tapping a blank space outside the window (if the full screen window has been down-sized earlier there should be enough edge space to do so) //or// by swipping right-to-left.
    - The page still contains the original App drawer widget. Since that widget is //now// contained in the window, it is proper to delete the original App Drawer widget from the page.
      * In Edit On mode, tap and hold the App Drawer widget to select it.
      * Fron the Object Design Menu, select the Delete icon {{:ui:ui-icon_delete.webp?15}}
      * The Confirm - Remove Selections dialog opens. Select OK
      * The widget is removed

**The project is completed.**

<WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>