### Install NetBeauty as a Global Tool

Source: https://github.com/nulastudio/netbeauty2/blob/master/README.md

Command to install NetBeauty globally as a .NET Core tool.

```bash
dotnet tool install --global nulastudio.nbeauty
```

--------------------------------

### Customizing AppHost Example Structure

Source: https://github.com/nulastudio/netbeauty2/blob/master/README.md

Demonstrates a simplified folder structure for a single application using a customized AppHost, with dependencies in a 'libs' folder.

```bash
├── MyApp                       # Main folder for the app
│   ├── libs                    # Dependencies
│   ├── hostfxr.dll ...         # DLLs that cannot be moved
│   ├── libloader.dll           # Loader (moved if using patch)
│   ├── MyApp.deps.json
│   ├── MyApp.dll
│   ├── MyApp.runtimeconfig.json
│   └── ...
└── MyApp.exe                   # AppHost

```

--------------------------------

### Configure NetBeauty in .csproj

Source: https://github.com/nulastudio/netbeauty2/blob/master/README.md

Example .csproj file demonstrating various NetBeauty configuration options.

```xml
<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>netcoreapp3.0</TargetFramework>
  </PropertyGroup>

  <PropertyGroup>
    <!-- Disable NetBeauty (set to True to turn off all features). -->
    <DisableBeauty>False</DisableBeauty>

    <!-- Enable shared runtime mode (set to True to share libraries across apps). -->
    <BeautySharedRuntimeMode>False</BeautySharedRuntimeMode>

    <!-- Directory for dependencies; default is 'libraries'. Use quotes if the path contains spaces. -->
    <BeautyLibsDir Condition="$(BeautySharedRuntimeMode) == 'True'">../libraries</BeautyLibsDir>
    <BeautyLibsDir Condition="$(BeautySharedRuntimeMode) != 'True'">./libraries</BeautyLibsDir>

    <!-- DLLs you want to exclude from being moved (e.g., critical or custom files). -->
    <!-- <BeautyExcludes>dll1.dll;lib*;...</BeautyExcludes> -->

    <!-- Files to hide from end users (e.g., runtime or config files). Only supported on Windows. -->
    <!-- <BeautyHiddens>hostfxr;hostpolicy;*.deps.json;*.runtimeconfig*.json</BeautyHiddens> -->

    <!-- Only run NetBeauty on publish (set to True to skip on build). -->
    <BeautyOnPublishOnly>False</BeautyOnPublishOnly>

    <!-- Internal option: do not modify. -->
    <BeautyNoRuntimeInfo>False</BeautyNoRuntimeInfo>

    <!-- Loader version policy: auto, with, or without. -->
    <BeautyNBLoaderVerPolicy>auto</BeautyNBLoaderVerPolicy>

    <!-- Enable debugging support for third-party debuggers (e.g., dnSpy). -->
    <BeautyEnableDebugging>False</BeautyEnableDebugging>

    <!-- Use the patch to minimize file count (SCD mode only). Set to False to disable. -->
    <BeautyUsePatch>True</BeautyUsePatch>

    <!-- Customize AppHost entry point (relative to AppHostDir). See documentation for details. -->
    <!-- <BeautyAppHostEntry>bin/MyApp.dll</BeautyAppHostEntry> -->

    <!-- Customize AppHost directory (relative to BeautyDir). See documentation for details. -->
    <!-- <BeautyAppHostDir>..</BeautyAppHostDir> -->

    <!-- Specify custom MSBuild tasks to run after NetBeauty completes. -->
    <!-- <BeautyAfterTasks></BeautyAfterTasks> -->

    <!-- Log verbosity: Error, Detail, or Info. -->
    <BeautyLogLevel>Info</BeautyLogLevel>

    <!-- Use a mirror for GitHub resources if needed. -->
    <!-- <BeautyGitCDN>https://gitee.com/liesauer/HostFXRPatcher</BeautyGitCDN> -->

    <!-- Specify a branch or tag for the patcher repository. -->
    <!-- <BeautyGitTree>master</BeautyGitTree> -->
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="nulastudio.NetBeauty" Version="2.1.5.0" />
  </ItemGroup>
</Project>
```

--------------------------------

### Handle GET Request Response

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/messagerouterdemo.html

Parses and displays data from a GET request response. It expects a JSON response with a 'Data' array to populate a table.

```javascript
function messageRouterGetResult(res) {
  $('#messageRouterGetResult tbody').empty();
  var jsonData = JSON.parse(res);
  if (jsonData.ReadyState == 4 && jsonData.Status == 200) {
    for (var i = 0; i < jsonData.Data.length; i++) {
      var row = '<tr>';
      row += '<td>' + jsonData.Data[i].Id + '</td>';
      row += '<td>' + jsonData.Data[i].Title + '</td>';
      row += '<td>' + jsonData.Data[i].Year + '</td>';
      row += '<td>' + jsonData.Data[i].Votes + '</td>';
      row += '<td>' + jsonData.Data[i].Rating + '</td>';
      row += '<td>' + jsonData.Data[i].Date + '</td>';
      row += '<td>' + jsonData.Data[i].RestfulAssembly + '</td>';
      row += '</tr>';
      $('#messageRouterGetResult tbody').append(row);
    }
  }
}
```

--------------------------------

### Initiate GET Request

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/messagerouterdemo.html

Constructs and sends a GET request using Chromely's cefQuery. It defines the request method, URL, and handles success and failure callbacks.

```javascript
function messageRouterGetRun() {
  $('#messageRouterGetResult tbody').html('');
  var request = {
    "method": "GET",
    "url": "/democontroller/movies/get",
    "parameters": null,
    "postData": null,
  };
  window.cefQuery({
    request: JSON.stringify(request),
    onSuccess: function (response) {
      messageRouterGetResult(response);
    },
    onFailure: function (err, msg) {
      console.log(err, msg);
    }
  });
}
```

--------------------------------

### AJAX GET Request

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/ajaxdemo.html

Performs an AJAX GET request to fetch movie data and appends it to a table. Ensure the target element '#ajaxGetResult tbody' exists.

```javascript
function ajaxGetRun() {
    $('#ajaxGetResult tbody').html('');
    var http = new XMLHttpRequest();
    var url = "http://chromely.com/democontroller/movies/get";
    http.open("GET", url, true);
    http.onreadystatechange = function () {
        $('#ajaxGetResult tbody').empty();
        if (http.readyState == 4 && http.status == 200) {
            var jsonData = JSON.parse(http.responseText);
            for (var i = 0; i < jsonData.length; i++) {
                var row = '<tr>';
                row += '<td>' + jsonData[i].Id + '</td>';
                row += '<td>' + jsonData[i].Title + '</td>';
                row += '<td>' + jsonData[i].Year + '</td>';
                row += '<td>' + jsonData[i].Votes + '</td>';
                row += '<td>' + jsonData[i].Rating + '</td>';
                row += '<td>' + jsonData[i].Date + '</td>';
                row += '<td>' + jsonData[i].RestfulAssembly + '</td>';
                row += '</tr>';
                $('#ajaxGetResult tbody').append(row);
            }
        }
    }
    http.send();
}
```

--------------------------------

### Chromely JavaScript Request Example

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/home.html

This snippet uses `window.cefQuery` to send a request to the '/info' endpoint and handles the response to update HTML elements. Ensure the Chromely application is running and the '/info' endpoint is configured.

```javascript
$(document).ready(function () {
    var request = { "url": "/info", "parameters": null, "postData": null };
    window.cefQuery({
        request: JSON.stringify(request),
        onSuccess: function (response) {
            var jsonData = JSON.parse(response);
            if (jsonData.ReadyState == 4 && jsonData.Status == 200) {
                $('#objective').html("<b>Chromely Main Objective</b>: " + jsonData.Data.objective);
                $('#platform').html("<b>Platforms</b>: " + jsonData.Data.platform);
                $('#version').html("<b>Chromium - CefGlue Version</b>: " + jsonData.Data.version);
            }
        },
        onFailure: function (err, msg) {
            console.log(err, msg);
        }
    });
});
```

--------------------------------

### Fetch TODO List Items

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/todolist.html

Retrieves TODO list items based on request type, ID, and completion status. It sends a GET request to the '/todolistcontroller/items' endpoint.

```javascript
function getTodoList(reqType, id, todo, completed) {
    $('#moviesContainer').html("");
    var keys = {};
    keys["name"] = reqType;
    keys["id"] = id;
    keys["todo"] = todo;
    keys["completed"] = completed.toString();
    var parameters = {};
    parameters["keys"] = keys;
    var request = {
        "method": "GET",
        "url": "/todolistcontroller/items",
        "parameters": parameters,
        "postData": null,
    };
    window.cefQuery({
        request: JSON.stringify(request),
        onSuccess: function (response) {
            populateTodoList(response);
            if (reqType == 'clearcompleted') {
                var checkBox = document.getElementById("checkboxSelectAllTodoItems");
                checkBox.checked = false;
            }
        },
        onFailure: function (err, msg) {
            console.log(err, msg);
        }
    });
}
```

--------------------------------

### Initialize TODO List and Add Item on Enter

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/todolist.html

Initializes the TODO list on document ready and adds a new TODO item when the Enter key is pressed in the input field. It also fetches all existing items.

```javascript
$(document).ready(function(){
    $("#textTodoItem").on("keyup",function(e){
        if (e.which == 13) {
            var allItemsSwictchCheckBox = document.getElementById("checkboxSelectAllTodoItems");
            allItemsSwictchCheckBox.checked = false;
            var text = document.getElementById("textTodoItem");
            getTodoList("add", "", text.value, 0);
            document.getElementById("textTodoItem").value = "";
        }
    });
    getTodoList("all", "", "", "");
});
```

--------------------------------

### Shared Runtime Directory Structure

Source: https://github.com/nulastudio/netbeauty2/blob/master/README.md

Illustrates a typical directory layout for shared runtime DLLs, including locales and native libraries, alongside application-specific folders.

```bash
├── libraries                   # Shared runtime DLLs (customizable name)
│   ├── locales                 # Satellite assemblies
│   │   ├── en
│   │   │   └── *.resources.dll
│   │   │       ├── MD5_1       # Allows multiple runtimes between apps
│   │   │       │   └── *.resources.dll
│   │   │       └── MD5_2
│   │   │           └── *.resources.dll
│   │   ├── zh-Hans
│   │   │   └── *.resources.dll
│   │   │       ├── MD5_1
│   │   │       │   └── *.resources.dll
│   │   │       └── MD5_2
│   │   │           └── *.resources.dll
│   │   └── ...                 # Other languages
│   ├── *.dll                   # Shared managed assemblies
│   │   ├── MD5_1
│   │   │   └── *.dll
│   │   └── MD5_2
│   │       └── *.dll
│   └── srm_native              # Native DLLs (not shared; each app has its own copy)
│       ├── APPID_1
│       │   └── *.dll
│       └── APPID_2
│           └── *.dll
├── app1                        # Main folder for app1
│   ├── hostfxr.dll ...         # DLLs that cannot be moved
│   ├── libloader.dll           # Loader (moved if using patch)
│   ├── app1.deps.json
│   ├── app1.dll
│   ├── app1.exe
│   ├── app1.runtimeconfig.json
│   └── ...
└── app2                        # Main folder for app2
    ├── hostfxr.dll ...
    ├── libloader.dll
    ├── app2.deps.json
    ├── app2.dll
    ├── app2.exe
    ├── app2.runtimeconfig.json
    └── ...

```

--------------------------------

### Shared Runtime with Customized AppHost Layout

Source: https://github.com/nulastudio/netbeauty2/blob/master/README.md

Shows a structure where multiple applications share a common runtime library folder, with each application having its own folder and executable.

```bash
├── libraries                   # Shared runtime DLLs (customizable name)
├── app1                        # Main folder for app1
│   ├── hostfxr.dll ...
│   ├── app1.deps.json
│   ├── app1.dll
│   ├── app1.runtimeconfig.json
│   └── ...
├── app2                        # Main folder for app2
│   ├── hostfxr.dll ...
│   ├── app2.deps.json
│   ├── app2.dll
│   ├── app2.runtimeconfig.json
│   └── ...
├── app1.exe
└── app2.exe

```

--------------------------------

### Initialize Movie Display on Document Ready

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/tmdbmovies.html

Fetches and displays popular movies when the document is fully loaded. This ensures the movie list is populated upon initial page view.

```javascript
$(document).ready(function () {
  getTmdbMovies('popular', '');
});
```

--------------------------------

### Add NetBeauty via NuGet

Source: https://github.com/nulastudio/netbeauty2/blob/master/README.md

Use this command to add the NetBeauty package to your .NET Core project.

```bash
dotnet add package nulastudio.NetBeauty
```

--------------------------------

### Populate TODO List UI

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/todolist.html

Parses the response from `getTodoList` and dynamically generates the HTML for the TODO list items. It handles styling for completed items.

```javascript
function populateTodoList(res) {
    var itemsContainer = "";
    $('#todoItemsContainer').html(itemsContainer);
    // Begininng
    itemsContainer += "<div class='col-8'>";
    itemsContainer += "<ul id='listGroupId' class='list-group'>";
    var jsonData = JSON.parse(res);
    if (jsonData.ReadyState == 4 && jsonData.Status == 200) {
        for (var i = 0; i < jsonData.Data.length; i++) {
            var todoItem = jsonData.Data[i];
            var itemChecked = todoItem.Completed == 1 ? "checked" : "unchecked";
            var delTagStart = todoItem.Completed == 1 ? "<del>" : "";
            var delTagEnd = todoItem.Completed == 1 ? "</del>" : "";
            itemsContainer += "<li class='list-group-item d-flex justify-content-between align-items-center'>";
            itemsContainer += "<div class='custom-control custom-switch'>";
            itemsContainer += "<input type='checkbox' class='custom-control-input' id='" + todoItem.Id + "CheckboxTodoItem' " + itemChecked + " onclick=\"switchOnOffTodoItem('" + todoItem.Id + "', '" + todoItem.Id + "CheckboxTodoItem', '" + todoItem.Id + "LabelTodoItem');\">";
            itemsContainer += "<label id='" + todoItem.Id + "LabelTodoItem' class='custom-control-label' for='" + todoItem.Id + "CheckboxTodoItem'>" + delTagStart + todoItem.Todo + delTagEnd + "</label>";
            itemsContainer += "</div>";
            itemsContainer += "<span class='badge badge-secondary badge-pill'><a id='itemDelLink' href='#' onclick=\"getTodoList('delete', '" + todoItem.Id + "', '', '');return false;\">X</a></span>";
            itemsContainer += "</li>";
        }
    }
    // End
    itemsContainer += "</ul>";
    itemsContainer += "</div>";
    $('#todoItemsContainer').html(itemsContainer);
}
```

--------------------------------

### NetBeauty Binary Application Usage

Source: https://github.com/nulastudio/netbeauty2/blob/master/README.md

Command-line usage for the NetBeauty binary application on published projects. The `--hiddens` option is Windows-specific.

```bash
# Usage:
nbeauty2 [--loglevel=(Error|Detail|Info)] [--srmode] [--enabledebug] [--usepatch] [--hiddens=hiddenFiles] [--noruntimeinfo] [--roll-forward=<rollForward>] [--nbloaderverpolicy=(auto|with|without)] [--apphostentry=<appHostEntry>] [--apphostdir=<appHostDir>] <beautyDir> [<libsDir> [<excludes>]]
```

```bash
nbeauty2 --usepatch --loglevel Detail --hiddens "hostfxr;hostpolicy;*.deps.json;*.runtimeconfig*.json" "/path/to/publishDir" libraries "dll1.dll;lib*;..."
```

--------------------------------

### JavaScript Execution and Event Handling

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/javascriptdemo.html

This snippet contains the core JavaScript logic for executing commands, updating script content, and managing UI elements based on script length. It uses `window.cefQuery` for communication with the host application.

```javascript
document.getElementById("demoscript").value = "alert('Chromely : Build .NET/.NET Core HTML5 desktop apps using cross-platform native GUI API.');";
document.getElementById("demoscript").addEventListener("keyup", scriptUpdate);

function scriptUpdate() {
    var content = document.getElementById("demoscript").value;
    if (content.length > 5) {
        $('#execute').removeClass('disabled');
    } else {
        $('#execute').addClass('disabled');
    }
}

function executeResult(res) {
    var jsonData = JSON.parse(res);
    if (jsonData.ReadyState == 4 && jsonData.Status == 200) {
        var row = '<tr>';
        row += '<td>Execute</td>';
        row += '<td>' + jsonData.Data + '</td>';
        row += '</tr>';
        $('#resulttable tr:last').after(row);
    }
}

function executeRun() {
    var content = document.getElementById("demoscript").value;
    var postData = {};
    postData.framename = "alldemoframe";
    postData.script = content;
    var request = {
        "method": "POST",
        "url": "/executejavascript/execute",
        "parameters": null,
        "postData": JSON.stringify(postData),
    };
    window.cefQuery({
        request: JSON.stringify(request),
        onSuccess: function (response) {
            executeResult(response);
        },
        onFailure: function (err, msg) {
            console.log(err, msg);
        }
    });
}
```

--------------------------------

### Initialize Tooltip Component

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/index.html

Initializes the tooltip component for elements with the 'data-toggle="tooltip"' attribute using jQuery.

```javascript
$(function () {
    $('['data-toggle="tooltip"']').tooltip()
})
```

--------------------------------

### Initiate POST Request with Data

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/messagerouterdemo.html

Prepares and sends a POST request with movie data using Chromely's cefQuery. It defines the request details and includes a JSON payload with movie information.

```javascript
function messageRouterPostRun() {
  $('#messageRouterPostResult').html('');
  var moviesJson = [
    { Id: 1, Title: "The Shawshank Redemption", Year: 1994, Votes: 678790, Rating: 9.2 },
    { Id: 2, Title: "The Godfather", Year: 1972, votes: 511495, Rating: 9.2 },
    { Id: 3, Title: "The Godfather: Part II", Year: 1974, Votes: 319352, Rating: 9.0 },
    { Id: 4, Title: "The Good, the Bad and the Ugly", Year: 1966, Votes: 213030, Rating: 8.9 },
    { Id: 5, Title: "My Fair Lady", Year: 1964, Votes: 533848, Rating: 8.9 },
    { Id: 6, Title: "12 Angry Men", Year: 1957, Votes: 164558, Rating: 8.9 }
  ];
  var reqMovies = {};
  reqMovies.movies = moviesJson;
  var request = {
    "method": "POST",
    "url": "/democontroller/movies/post",
    "parameters": null,
    "postData": reqMovies,
  };
  window.cefQuery({
    request: JSON.stringify(request),
    onSuccess: function (response) {
      messageRouterPostResult(response);
    },
    onFailure: function (err, msg) {
      console.log(err, msg);
    }
  });
}
```

--------------------------------

### Toggle All TODO Items Completion

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/todolist.html

Handles the logic for toggling the completion status of all TODO items based on the state of the 'Select All' checkbox.

```javascript
function switchOnOffAllTodoItems() {
    // Get the checkbox
    var checkBox = document.getElementById("checkboxSelectAllTodoItems");
    var allCompleted = 0;
    if (checkBox.checked == true){
        allCompleted = 1;
    }
    getTodoList("toggleall", "", "", allCompleted);
}
```

--------------------------------

### Custom Alert Dialog with Bootbox

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/index.html

Implements a custom alert dialog using the bootbox.js library. This function takes a message string and displays it in a modal alert box.

```javascript
function showCustomAlert(message) {
    bootbox.alert(message);
}
```

--------------------------------

### Custom Prompt Dialog with Bootbox

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/index.html

Enables a custom prompt dialog with an input field using bootbox.js. It displays a message, allows user input, and logs the entered result to the console.

```javascript
function showCustomPrompt(message) {
    bootbox.prompt(message, function (result) {
        console.log(result);
    });
}
```

--------------------------------

### Custom Confirm Dialog with Bootbox

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/index.html

Provides a custom confirmation dialog using bootbox.js. It displays a message and a confirmation button, logging the user's result (true/false) to the console.

```javascript
function showCustomConfirm(message) {
    bootbox.confirm(message, function (result) {
        console.log(result);
    })
}
```

--------------------------------

### Initialize Popover Component

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/index.html

Initializes the popover component for elements with the 'data-toggle="popover"' attribute using jQuery.

```javascript
$(function () {
    $('['data-toggle="popover"']').popover()
})
```

--------------------------------

### Show Chromely Developer Tools

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/index.html

This function constructs a URL to trigger the display of Chromely's developer tools. It creates an anchor element, sets its href to the developer tools URL, appends it to the document body, and programmatically clicks it.

```javascript
function showDevTools() {
    var url = "http://chromely.com/democontroller/showdevtools";
    var link = document.createElement('a');
    link.href = url;
    document.body.appendChild(link);
    link.click();
}
```

--------------------------------

### Handle Frameless Window Commands in JavaScript

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/index_frameless.html

Use this function to send commands to the Chromely window, such as close, minimize, or maximize. It constructs a URL and simulates a click on a link to trigger the command.

```javascript
function frameCommand(type) {
    var url = "http://chromely.com/window/" + type;
    var link = document.createElement('a');
    link.href = url;
    document.body.appendChild(link);
    link.click();
}
```

--------------------------------

### Custom Popup Dialog with Iframe using Bootbox

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/index.html

Creates a custom modal dialog using bootbox.js that embeds an iframe. This is useful for displaying external content or forms within a modal window. The dialog includes a 'Close' button.

```javascript
function showCustomPopupDialog(title, url) {
    bootbox.dialog({
        title: title,
        message: "<iframe src='" + url + "' style='resize: vertical; overflow: both; height: 400px;' width='100%' height='100%' frameborder='0' allowfullscreen />",
        size: 'large',
        buttons: {
            cancel: {
                label: "Close",
                className: 'btn-secondary',
            }
        }
    });
}
```

--------------------------------

### Handle POST Request Response

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/messagerouterdemo.html

Processes the response from a POST request. If the request is successful, it displays the data returned in the response.

```javascript
function messageRouterPostResult(res) {
  var jsonData = JSON.parse(res);
  if (jsonData.ReadyState == 4 && jsonData.Status == 200) {
    $('#messageRouterPostResult').html(jsonData.Data);
  }
}
```

--------------------------------

### JavaScript Prompt Dialog

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/jsdialogs.html

Opens a dialog box that prompts the user for input. It includes a text field for the user to enter data.

```javascript
function showPrompt() {
    var message = 'What is Chromely based on?';
    var newMessage = document.getElementById("id_prompt_message").value;
    if (newMessage) {
        message = newMessage;
    }
    prompt(message, "");
}
```

--------------------------------

### JavaScript Confirm Dialog

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/jsdialogs.html

Shows a confirmation dialog with 'OK' and 'Cancel' buttons. The user's choice can be used to control application flow.

```javascript
function showConfirm() {
    var message = 'Do you want to continue?';
    var newMessage = document.getElementById("id_confirm_message").value;
    if (newMessage) {
        message = newMessage;
    }
    confirm(message);
}
```

--------------------------------

### Toggle Maximize/Restore Button Visibility

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/index_frameless.html

This function controls the display of maximize and restore buttons based on the current window state. It's useful for providing visual feedback to the user.

```javascript
function toggleRestoreMaxButton(max) {
    var maxButton = document.getElementById('max-button');
    var restoreButton = document.getElementById('restore-button');
    if (max === 1) {
        maxButton.style.display = "none";
        restoreButton.style.display = "flex";
    } else {
        restoreButton.style.display = "none";
        maxButton.style.display = "flex";
    }
}
```

--------------------------------

### Search Movies Functionality

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/tmdbmovies.html

Initiates a movie search by retrieving the search text from an input element and calling the getTmdbMovies function with the 'search' request type.

```javascript
function searchMovies() {
  // Get the text from textbox
  var searchText = document.getElementById("textSearchMovies").value;
  getTmdbMovies('search', searchText);
}
```

--------------------------------

### JavaScript Custom Popup Dialog

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/jsdialogs.html

Opens a new browser window or tab to display a specified URL. Useful for external links or embedded content.

```javascript
function showPopupDialog() {
    var url = 'https://www.youtube.com/embed/Khn7sDUSEJM';
    var newUrl = document.getElementById("id_popup_url").value;
    if (newUrl) {
        url = newUrl;
    }
    window.open(url);
}
```

```javascript
window.open('https://www.youtube.com/embed/Khn7sDUSEJM');
```

--------------------------------

### AJAX POST Request

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/ajaxdemo.html

Performs an AJAX POST request with a JSON payload containing movie data. The response is displayed in the '#ajaxPostResult' element. Ensure the target element '#ajaxPostResult' exists.

```javascript
function ajaxPostRun() {
    $('#ajaxPostResult').html('');
    var moviesJson = [
        { Id: 1, Title: "The Shawshank Redemption", Year: 1994, Votes: 678790, Rating: 9.2 },
        { Id: 2, Title: "The Godfather", Year: 1972, votes: 511495, Rating: 9.2 },
        { Id: 3, Title: "The Godfather: Part II", Year: 1974, Votes: 319352, Rating: 9.0 },
        { Id: 4, Title: "The Good, the Bad and the Ugly", Year: 1966, Votes: 213030, Rating: 8.9 },
        { Id: 5, Title: "My Fair Lady", Year: 1964, Votes: 533848, Rating: 8.9 },
        { Id: 6, Title: "12 Angry Men", Year: 1957, Votes: 164558, Rating: 8.9 }
    ];
    var http = new XMLHttpRequest();
    var url = "http://chromely.com/democontroller/movies/post";
    http.open("POST", url, true);
    http.setRequestHeader("Content-type", "application/json");
    http.onreadystatechange = function () {
        if (http.readyState == 4 && http.status == 200) {
            var jsonData = JSON.parse(http.responseText);
            $('#ajaxPostResult').html(jsonData);
        }
    }
    var reqMovies = {};
    reqMovies.movies = moviesJson;
    http.send(JSON.stringify(reqMovies));
}
```

--------------------------------

### JavaScript Alert Dialog

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/jsdialogs.html

Displays a simple alert box to the user. The message can be pre-defined or dynamically set from an input field.

```javascript
function showAlert() {
    var message = 'Chromely: Build HTML Desktop Apps on .NET/.NET Core using native GUI, HTML5, JavaScript, CSS';
    var newMessage = document.getElementById("id_alert_message").value;
    if (newMessage) {
        message = newMessage;
    }
    alert(message);
}
```

```javascript
alert("Chromely: Build HTML Desktop Apps on .NET/.NET Core using native GUI, HTML5, JavaScript, CSS");
```

--------------------------------

### Toggle Individual TODO Item Completion

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/todolist.html

Toggles the completion status of a single TODO item and updates its visual representation (strikethrough). It also triggers a backend call to update the item's status.

```javascript
function switchOnOffTodoItem(itemId, checkboxSelectTodoItem, labelItemTodo) {
    var checkBox = document.getElementById(checkboxSelectTodoItem);
    var labelText = document.getElementById(labelItemTodo);
    var completed = 0;
    if (checkBox.checked == true){
        labelText.innerHTML = "<del>" + labelText.innerText + "</del>";
        completed = 1;
    } else {
        labelText.innerHTML = labelText.innerText;
    }
    var allItemsSwictchCheckBox = document.getElementById("checkboxSelectAllTodoItems");
    allItemsSwictchCheckBox.checked = false;
    var url = "http://chromely.com/todolistcontroller/toggleactive?id=" + itemId + "&completed=" + completed.toString();
    var link = document.createElement('a');
    link.href = url;
    document.body.appendChild(link);
    link.click();
}
```

--------------------------------

### Fetch TMDB Movies Data via Chromely CEF Query

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/tmdbmovies.html

Fetches movie data from the TMDB API using Chromely's CEF query mechanism. It constructs a request object with method, URL, and parameters, then sends it to the backend controller.

```javascript
function getTmdbMovies(reqType, queryValue) {
  $('#moviesContainer').html("");
  var parameters = {};
  parameters["name"] = reqType;
  parameters["query"] = queryValue;
  var request = {
    "method": "GET",
    "url": "/tmdbmoviescontroller/movies",
    "parameters": parameters,
    "postData": null,
  };
  window.cefQuery({
    request: JSON.stringify(request),
    onSuccess: function (response) {
      parseMoviesResult(response);
    },
    onFailure: function (err, msg) {
      console.log(err, msg);
    }
  });
}
```

--------------------------------

### CSS for Draggable Title Bar

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/index_draggable.html

Defines a draggable region for the title bar. Use this for the main window title area that should be movable by the user.

```css
.titlebar {
  -webkit-app-region: drag;
  -webkit-user-select: none;
  position: absolute;
  top: 0px;
  left: 50px;
  width: 100%;
  height: 32px;
}
```

--------------------------------

### Handle Navigation with jQuery

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/index.html

This snippet uses jQuery to intercept click events on navigation links. When a link with a 'data-url' attribute is clicked, it prevents the default action and updates the 'src' of an iframe named 'demoframe' with the specified URL.

```javascript
$(document).ready(function () {
    $('#nav-content a').on('click', function (e) {
        e.preventDefault()
        var url = $(this).attr("data-url"); // the remote url for content
        if (url) {
            demoframe.src = url;
        }
    });
});
```

--------------------------------

### Parse TMDB Movies API Response

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/pages/tmdbmovies.html

Parses the JSON response from the TMDB API and generates HTML to display movie information. It handles different movie categories and displays details like poster, title, and popularity.

```javascript
function parseMoviesResult(res) {
  var containerHtml = "";
  $('#moviesContainer').html(containerHtml);
  var jsonData = JSON.parse(res);
  if (jsonData.ReadyState == 4 && jsonData.Status == 200) {
    for (var i = 0; i < jsonData.Data.length; i++) {
      var movieItem = jsonData.Data[i];
      containerHtml += "<div class='col-sm-6 col-lg-3 mb-3'>";
      containerHtml += "<div class='card h-100'>";
      containerHtml += "<div class='row no-gutters'>";
      containerHtml += "<div class='col-md-12 text-center'>";
      containerHtml += "<img src='https://image.tmdb.org/t/p/original" + movieItem.poster_path + "' alt='...' style='width: 100%;' title='" + movieItem.overview + "'>";
      containerHtml += "</div>";
      containerHtml += "<div class='col-md-12'>";
      containerHtml += "<div class='card-body'>";
      containerHtml += "<h4 class='card-title text-info'>" + movieItem.original_title + "</h4>";
      containerHtml += "<h6 class='card-subtitle text-muted'>" + movieItem.release_date + "</h6>";
      containerHtml += "<p class='card-text mt-4'><b>Popularity</b>: " + movieItem.popularity + "<br><b>Vote Count</b>: " + movieItem.vote_count + "<br><b>Vote Average</b>: " + movieItem.vote_average;
      containerHtml += "<br><br><a href='http://chromely.com/tmdbmoviescontroller/homepage?movieid=" + movieItem.id + "'>Homepage</a></p>";
      containerHtml += "</div>";
      containerHtml += "</div>";
      containerHtml += "</div>";
      containerHtml += "</div>";
      containerHtml += "</div>";
    }
  }
  $('#moviesContainer').html(containerHtml);
}
```

--------------------------------

### CSS for Non-Draggable Button Area

Source: https://github.com/nulastudio/netbeauty2/blob/master/NetBeautyTest/ChromelyTest/app/index_draggable.html

Defines a non-draggable region for buttons within the title bar. Use this for interactive elements like close or minimize buttons.

```css
.titlebar-button {
  -webkit-app-region: no-drag;
  position: absolute;
  top: 0px;
  width: 140px;
  height: 32px;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.