Как использовать CSS в веб-приложении Xojo, чтобы оно выглядело красиво

Hi,

поскольку вы можете получить доступ к HTML-заголовку вашего веб-приложения, вы можете добавить свои собственные таблицы стилей в свое веб-приложение Xojo. Я хочу дать вам несколько советов, как вы можете использовать CSS, чтобы сделать ваши веб-приложения более красивыми.

Я использую CSS в каждом веб-приложении, потому что меня не устраивают возможности стилей и анимации в XojoWE.

1.1 Как включить пользовательский CSS с помощью собственного файла

Если вы хотите поместить свой CSS в отдельный файл, что упрощает его обслуживание, вы можете выполнить следующие шаги:

1. Создайте файл с расширением «.css», например «stylesheet.css». вам нужно знать некоторые вещи о CSS.
2. Поместите файл на свой веб-сервер. Для локального тестирования также можно скопировать stylesheet.css на шаге сборки в папку отладки.
3. Перейдите в свойство App.HTMLHeader и добавьте следующее:

<link href="[your link to the stylesheet.css file]" type="text/css" rel="stylesheet">

4. вставьте ссылку на ваш файл стилей.css

• теперь у вас есть доступ к стилям веб-приложения
• например, добавьте контейнерный элемент управления в свое веб-приложение и добавьте этот код в Stylesheet.css:

<style>
div{border: 10px solid;}
</style>

(загрузите новую версию CSS на свой сервер)
-> Теперь ваш контейнер имеет большую черную рамку.

1.2 Как включить пользовательский CSS в ваше приложение с помощью Xojo IDE

Если вы хотите доставить свой CSS прямо в приложение без внешних файлов, выполните следующие действия:

1. Перейдите в свойство App.HTMLHeader и добавьте следующие строки:

<style>
div{border: 10px solid;}
</style>

2. Теперь между тегом ‹style› можно разместить свой CSS.

2. Как настроить стили элементов управления

Xojo-Webstyle-control — отличный способ стилизовать ваши элементы управления простым способом. Если вы добавите некоторые свойства в xojo-webstyle-control, они будут переведены в CSS в работающем веб-приложении. Когда вы применяете стиль к элементу управления в инспекторе, это похоже на добавление пользовательского класса CSS к элементу веб-страницы, например:

<div class="your_xojo_webstyle_name"></div>

Это дает вам возможность перезаписать класс your_xojo_webstyle_name, который вы создали в Xojo во время разработки.

Если вы добавите следующий код в свой Stylesheet.css, все элементы с примененным стилем «your_xojo_webstyle_name» будут изменены:

.your_xojo_webstyle_name{
border: 12px solid;
background: #f3f3f3;
[other CSS properties];
}

Попробуй это!

3. для чего это нужно?

CSS — мощный инструмент в веб-разработке. С новыми стандартами CSS вы можете заменить множество функций JavaScript-Styling всего несколькими строками CSS, например анимацией.

Также Xojo-Webstyle-control не поддерживает некоторые CSS-правила, такие как встроенные тени или анимацию. Конечно, есть управление аниматором, но обработка в коде иногда очень плохая. Например, если вам нужен эффект затухания ваших элементов управления, добавленных во время выполнения.

Я также использую CSS, чтобы скрыть полосы прокрутки в элементах управления контейнерами (=”‹div›”), когда мышь не находится над контейнером.
Также вы можете стилизовать элементы управления Xojo, такие как WebListboxes, WebDialogs, WebUploader. Или вы можете изменить внешний вид ImageWell-Control (изменение размера изображения, оттенки серого, эффекты затухания).

Возможности потрясающие. С Xojo вы можете создавать потрясающие функциональные возможности веб-приложений, а с помощью CSS вы можете сделать их более красивыми. Вы можете улучшить пользовательский опыт, добавив эффекты, затухание, тени. Вы можете улучшить Xojo-Controls и так далее.

С помощью ExecuteJavascript вы можете добавлять свои собственные CSS-классы ко всем элементам или удалять их во время выполнения. Вы можете стать еще большим веб-дизайнером.

Вот и все!

вот несколько моих примеров CSS:

1. Исчезновение эффектов ваших элементов управления:

.[your_Style_Name]]{
  -webkit-animation: move_eye 0.1s linear 0s  alternate;
     -moz-animation: move_eye 0.1s linear 0s  alternate;
       -o-animation: move_eye 0.1s linear 0s  alternate;
          animation: move_eye 0.1s linear 0s  alternate;
}
@-webkit-keyframes move_eye { from { margin-left:-20px; opacity: 0; } to { margin-left:0%; opacity: 1;}  }
   @-moz-keyframes move_eye { from { margin-left:-20px; opacity: 0; } to { margin-left:0%; opacity: 1;}  }
     @-o-keyframes move_eye { from { margin-left:-20px; opacity: 0; } to { margin-left:0%; opacity: 1;}  }
        @keyframes move_eye { from { margin-left:-20px; opacity: 0; } to { margin-left:0%; opacity: 1;}  }

2. Стиль полос прокрутки ваших элементов управления контейнерами: (работает только в хроме)

div::-webkit-scrollbar {
    width: 7px;
    height: 7px;
} 
div::-webkit-scrollbar-track {
   /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
  background-color: rgba(255,255,255,0);
} 
div::-webkit-scrollbar-thumb {
  background-color: rgba(183, 183, 183, 0.2);
    border-radius: 5px;
    border: 0px solid;
}
div::-webkit-scrollbar-thumb:hover {
  background-color: #d1d1d1;
}

3. Показывать полосы прокрутки контейнеров только при наведении указателя мыши:

.noscroll:hover{
   overflow: auto !important;
}
.noscroll{
   overflow: hidden !important;
}

4. более приятные горизонтальные линии:

hr{
background-color: #DAE0E7; /* Farbe für Opera und Firefox */ 
color: #DAE0E7; /* Farbe für Internet Explorer (IE) */
border: 0; 
height: 1px; 
background-image: none;
}

5. Более приятные диалоги:

div.palette{
  -webkit-box-shadow: 0 4px 16px rgba(0,0,0,.2);
  -moz-box-shadow: 0 4px 16px rgba(0,0,0,.2);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  background: #fff;
  background-clip: padding-box;
  outline: 0;
  position: absolute;
}
div.palette table.title{
  z-index: 1;
  background: #FFFFFF;
  border-bottom: 1px solid #DADADA;
      box-shadow: 0px 0px 10px #DBDBDB;
}
div.sheet, div.modal{
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image:none;
  overflow: hidden;
  background-color: rgba(186, 186, 186, 0.2);
}
div.sheet > div.body, div.modal > div.body {
  background-color: rgb(255,255,255);
  position: absolute;
      -webkit-box-shadow: 0px 4px 16px rgba(0,0,0,0.20);
  -moz-box-shadow: 0px 4px 16px rgba(0,0,0,0.20);
  box-shadow: 0px 4px 16px rgba(0,0,0,0.20);
}
body{
      box-shadow: 0px 0px 0px rgba(0,0,0,0);
}