Java — Установить картинку на фон textArea


Содержание

Java — Установить картинку на фон textArea

В статье представлено несколько трюков, которые вы, возможно, не знали и которые вы найдёте полезными в своих разработках.

1. Изображение в качестве фона, которое пропадает при вводе текста.

Вы можете добавить фоновое изображение также, как и в любой другой элемент. В этом случае стиль по умолчанию для textarea изменяется, а именно бордер толщиной в 1px изменяется на скошенную границу. Исправляется это явным указанием бордера.

Фоновое изображение может повлиять на читаемость текста. Поэтому фоновое изображение надо убирать при получении фокуса и возвращать его, если textarea осталась без текста. Например, используя jQuery это можно сделать таким образом:

2. Placeholder в HTML5

В HTML5 появился новый атрибут, называемый placeholder. Значение этого атрибута показывается в текстовом элементе и исчезает при получении фокуса, а также в случае когда в элементе введён текст.

HTML5 placeholder поддерживается в следующих браузерах: Safari 5, Mobile Safari, Chrome 6, и Firefox 4 alpha.

3. Placeholder, HTML5 с поддержкой старых браузеров используя jQuery

Самый простой способ проверить поддерживается ли атрибут браузером это проверить с помощью javaScript:

Затем можно написать код, который будет срабатывать если браузер не поддерживает атрибут placeholder.

4. Удаляем обводку textarea

Браузеры на движках webkit, а также в FireFox 3.6, обводят textarea, когда он находится в фокусе. Удалить эту обводку можно используя css-свойство outline для webkit-браузеров. Для FireFox используется свойство -moz-appearance, либо можно просто установить элементу бордер или фон.

5. Запрет изменения размера

Webkit-браузеры добавляют к textarea визуальный элемент в правом нижнем углу, который позволяет изменять размер текстовой области. Если вы хотите убрать эту возможность, то вам необходимо использовать следующее css-свойство:

6. Добавление возможности изменения размера

jQuery UI позволяет добавить возможность изменения размера для textarea. Это работает для всех браузеров, а для webkit-браузеров подменяет стандартное поведение. Для того, чтобы использовать эту возможность, необходимо подключить jquery.ui и написать следующий код:

7. Изменение размера под содержимое

James Padolsey написал удобный jQuery-скрипт который позволяет автоматически изменять размер textarea под его содержимое. Похоже что этого плагина больше нет, но можно использовать например вот этот. Плагин содержит много настроек, но самый простой способ его использовать это:

8. Nowrap

Чтобы не переносить слова на новые строки, для всех элементов используется css-свойство white-space, которое не работает с textarea. Для textarea необходимо использовать атрибут wrap.

9. Удаляем скролл-бары в IE

IE показывает вертикальный скролл-бар для всех textarea. Вы можете их спрятать используя overflow: hidden, но в таком случае он не будет показываться при увеличении контента. Поэтому правильнее использовать следующий подход:

В этом случае скролл-бар не будет отображаться когда в textarea помещается весь текст, но выведется в случае необходимости.

Примеры к статье вы можете посмотреть здесь.

Java — Установить картинку на фон textArea


Задача программиста заключается не только в создании эффективной, но и элегантной и понятной пользователю программы. Не мало важную роль при этом несет графический интерфейс. Не для кого не секрет, что человек усваивает графическую информацию быстрее чем текстовую. Рисунки на форме помогают украсить интерфейс программы. А также сделать его более понятным. Данная статья посвящена добавлению рисунков на фрёйм с компонентами.

Способ 1. Добавление картинки с использованием JLabel.

Это вероятно самый простой способ, но в тоже время не самый гибкий, поскольку все управление за отображение рисунком возлагается на плечи JLabel.

Чтобы добавить рисунок на JLabel существуют следующие методы.
setIcon(Icon image);
Конструкторы
JLabel(Icon image);
JLabel(Icon image, int horizontalAlignment);
JLabel(String text, Icon icon, int horizontalAlignment);

здесь:
Icon image — добавляемая картинка. Она может быть без труда создана например след. образом: new javax.swing.ImageIcon(«C:\\Documents and Settings\\All Users\\Документы\\Мои рисунки\\Образцы рисунков\\Водяные лилии.jpg»);
String text — текст метки.
int horizontalAlignment — тип горизонтального выравнивания. Может принимать след. значения:
javax.swing.SwingConstants.CENTER — по центру,
javax.swing.SwingConstants.LEFT — по левому краю,
javax.swing.SwingConstants.RIGHT — по правому краю.

Плюсом данного способа является возможность добавть текстомый коментарий к рисунку, минусом — отстутствие управления размерами рикунка.

Код
public class LablePictureFrame extends javax.swing.JFrame <

public LablePictureFrame() <
initComponents();
>

private void initComponents() <
jLabel1 = new javax.swing.JLabel();

setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
jLabel1.setHorizontalAlignment(javax.swing.SwingConstants.CENTER);
jLabel1.setIcon(new javax.swing.ImageIcon(getClass().getResource(«/MoonCat.gif»)));
jLabel1.setText(«Foreign Cat. «);
jLabel1.setBorder(new javax.swing.border.LineBorder(new java.awt.Color(102, 102, 102), 1, true));
getContentPane().add(jLabel1, java.awt.BorderLayout.CENTER);

public static void main(String args[]) <
java.awt.EventQueue.invokeLater(new Runnable() <
public void run() <
new LablePictureFrame().setVisible(true);
>
>);
>

private javax.swing.JLabel jLabel1;
>

Способ 2. Создание JPanel c возможностью добавления картинки в качестве фона.

Этот способ более гибкий, и практически ограничивается только нашей фантазией. Он заключается в том, что мы напишем подкласс для класса JPanel и переопределим его метод public void paint(Graphics g). Реализация нашего метода будет производить прорисовку картинки на панели. Более того, мы будем управлять размерами изображения, и подстраивать (вписывать) его под размеры JPanel. Но и это еще не все: Мы оставим возможность добавления дочерних компонентов на эту панель, и у нас получится что-то компоненты размещаются на «красивом» фоне.

Вот пример такой панели:

Код
import java.awt.Graphics;
import java.awt.Image;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;

public class PicturePanel extends javax.swing.JPanel <
// Храним 2 изображения: оригинальное и текущее.
// Оригинальное используется для получения текущего в зависимости от размеров панели.
// Текущее непосредственно прорисовывается на панели.
private BufferedImage originalImage = null;
private Image image = null;

public PicturePanel() <
initComponents();
>

private void initComponents() <
setLayout(null);
addComponentListener(new java.awt.event.ComponentAdapter() <
public void componentResized(java.awt.event.ComponentEvent evt) <
formComponentResized(evt);
>
>);

// Реакция на изменение размеров панели — изменение размера изображения.
private void formComponentResized(java.awt.event.ComponentEvent evt) <
int w = this.getWidth();
int h = this.getHeight();
if ((originalImage != null) && (w > 0) && (h > 0)) <
image = originalImage.getScaledInstance(w, h, Image.SCALE_DEFAULT);
this.repaint();
>
>


// Берем прорисовку в свои руки.
public void paint(Graphics g) <
// Рисуем картинку
if (image != null) <
g.drawImage(image, 0, 0, null);
>

// Рисуем подкомпоненты.
super.paintChildren(g);
// Рисуем рамку
super.paintBorder(g);
>

// Методы для настройки картинки.
public BufferedImage getImage() <
return originalImage;
>

public void setImage(BufferedImage image) <
this.image = image;
>

public void setImageFile(File imageFile) <
try <
if (imageFile == null) <
originalImage = null;
>
BufferedImage bi = ImageIO.read(imageFile);
originalImage = bi;
> catch (IOException ex) <
System.err.println(«Неудалось загрузить картинку!»);
ex.printStackTrace();
>
repaint();
>
>

А вот пример её использования:

Код
public class PanelPictureFrame extends javax.swing.JFrame <

public PanelPictureFrame() <
initComponents();
>

private void initComponents() <
picturePanel1 = new PicturePanel();
jPanel1 = new javax.swing.JPanel();
jLabel1 = new javax.swing.JLabel();
jButton1 = new javax.swing.JButton();

setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
picturePanel1.setLayout(new java.awt.BorderLayout());

picturePanel1.setImageFile(new java.io.File(«C:\\Documents and Settings\\All Users\\Документы\\Мои рисунки\\Образцы рисунков\\Зима.jpg»));
jPanel1.setLayout(new java.awt.GridLayout());

jPanel1.setOpaque(false);
jLabel1.setFont(new java.awt.Font(«Tahoma», 0, 24));
jLabel1.setForeground(new java.awt.Color(255, 0, 0));
jLabel1.setText(«\u042d\u0442\u043e JLabel»);
jPanel1.add(jLabel1);

jButton1.setText(«\u0410 \u044d\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430!»);
jPanel1.add(jButton1);

public static void main(String args[]) <
java.awt.EventQueue.invokeLater(new Runnable() <
public void run() <
new PanelPictureFrame().setVisible(true);
>
>);
>

private javax.swing.JButton jButton1;
private javax.swing.JLabel jLabel1;
private javax.swing.JPanel jPanel1;
private PicturePanel picturePanel1;
>

Надеюсь что данная статья будет Вам полезна. На все вопросы постараюсь ответить.
С Уважением MoonCat.

Дата 23.4.2008, 11:54 (ссылка) | (нет голосов) Загрузка .
LSD Репутация: 206 Всего: 533

Спасибо SoulKeeper за дополнение.

В результате тестов с использованием картинки размером 1024×768 и увеличении панели до 10000×10000 панелька №2 требовала не много не мало, 438 мб памяти В это же время IntelliJ IDEA открывала эту картинку и делала максимальный зум без значительного потребления памяти. Что заставило задуматся над эфективностью алгоритма.

В результате, как всегда, все оказалось проще простого

Код
import javax.swing.*;
import java.awt.*;

public class ImagePanel extends JPanel <

private Image image;

public Image getImage() <
return image;
>

public void setImage(Image image) <
this.image = image;
>

public void paintComponent(Graphics g) <
super.paintComponent(g);

if(image != null) <
g.drawImage(image, 0, 0, getWidth(), getHeight(), null);
>
>
>

Код
import javax.imageio.ImageIO;
import javax.swing.*;
import java.awt.*;
import java.io.File;
import java.io.IOException;

public class TestPicture <

public static void main(String[] args) <

JFrame f = new JFrame();
f.setTitle(«My Panel»);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

ImagePanel pp = new ImagePanel();
pp.setLayout(new BorderLayout());
try <
pp.setImage(ImageIO.read(new File(«picture.jpg»)));
> catch (IOException e) <
e.printStackTrace();
>

JPanel panel = new JPanel();
panel.setLayout(new java.awt.GridLayout());
panel.setOpaque(false);

JLabel label = new JLabel();
label.setFont(new java.awt.Font(«Tahoma», 0, 24));
label.setForeground(new java.awt.Color(255, 0, 0));
label.setText(«\u042d\u0442\u043e JLabel»);
panel.add(label);

JButton button = new JButton();

button.setText(«\u0410 \u044d\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430!»);
panel.add(button);

pp.setPreferredSize(new Dimension(10000, 10000));
f.add(new JScrollPane(pp));

f.pack();
f.setSize(800, 600);
f.setLocationRelativeTo(null);
f.setVisible(true);
>
>

Правила форума «Java»
  • Прежде, чем задать вопрос, прочтите это!
  • Книги по Java собираются здесь.
  • Документация и ресурсы по Java находятся здесь.
  • Используйте теги [code=java][/code] для подсветки кода. Используйтe чекбокс «транслит«, если у Вас нет русских шрифтов.
  • Помечайте свой вопрос как решённый, если на него получен ответ. Ссылка «Пометить как решённый» находится над первым постом.
  • Действия модераторов можно обсудить здесь.
  • FAQ раздела лежит здесь.

Если Вам помогли, и атмосфера форума Вам понравилась, то заходите к нам чаще! С уважением, LSD, AntonSaburov, powerOn, tux, javastic.

Как работать с фоном TextArea в JavaFX?

У меня есть изображение с рамкой на прозрачном фоне, и я хочу положить его в качестве фона для TextArea.Using google я нашел 2 способа сделать это:

2), чтобы сделать прозрачный фон с помощью

Сделать изображение как другой объект, вставьте оба объекта в одном месте и добавьте текстовую область после изображения в группу.


Но ничего не получилось. Я также нашел некоторые способы с помощью CSS, но в моем текущем проекте я не был этим и хотел бы избежать, если это возможно.

Основной случай заключается в том, что я не могу сделать прозрачный фон, он все еще белый. Может кто-нибудь дать мне совет, что я делаю неправильно и пример рабочего кода?

Фоновый фрейм не является квадратным, поэтому мне действительно нужен прозрачный фон.

1 ответ

Но ничего не получилось. Я также нашел несколько способов использования CSS, но в моем текущем проекте у меня его нет, и я хотел бы избежать, если это возможно.

Вы уже используете CSS. Здесь нет способа избежать использования CSS, если только вы не хотите использовать собственную реализацию скина TextArea .

Вам необходимо использовать таблицу стилей CSS, которая создает фон для область содержимого и прозрачный видовой экран ScrollPane :

Элемент textarea

Элемент textarea HTML — это поле для ввода текста, состоящего из нескольких строк, и его редактирования. Он используется для ввода и редактирования длинных фрагментов текста.

Содержимое этого элемента представляет его исходное значение. Оно отображается в текстовом поле после загрузки документа или после нажатия кнопки сброса в форме.

Примеры

В первом примере мы создадим форму с элементом управления textarea со всеми значениями по умолчанию. Также мы установим атрибут placeholder с подсказкой относительно того, контент какого типа должен вводиться в поле. Она будет отображаться, когда текстовая область пуста:

Во втором примере мы установим начальное значение в качестве содержимого HTML textarea . Оно будет использоваться для заполнения элемента управления сразу после загрузки документа, а также после сброса формы.

В отличие от поля для ввода однострочного текста элемент textarea использует начальное значение в качестве содержимого ( вместо атрибута value ):

Далее мы используем атрибуты cols и rows , чтобы задать количество символов, которые могут одновременно отображаться в элементе управления. Браузеры рассчитывают ширину и высоту элемента, умножая эти значения на ширину и высоту символа используемого шрифта.

Ширина HTML input textarea вычисляется относительно ширины символа используемого шрифта. Так как символы не всегда имеют одинаковую ширину, то браузеры могут использовать различные методы, чтобы округлить это значение:

В следующем примере мы используем два атрибута. Они устанавливают ограничения на длину текста, который может быть введен в текстовую область. Это minlength и maxlength , их названия говорят сами за себя.

Соответствие minlength проверяется только при отправке данных формы, а в maxlength браузеры проверяют, чтобы пользователь не ввел больше символов, чем указано через этот атрибут.

Атрибут maxlength элемента textarea HTML хорошо поддерживается браузерами, а minlength – нет:

Теперь мы используем атрибут required , который был введен в HTML5 . Когда этот атрибут указан, браузер не позволяют отправить данные формы, пока соответствующее поле не будет заполнено.

Поддержка браузерами атрибута является неполной. Чтобы обеспечить этот функционал во всех браузерах, придется использовать скрипты.

Атрибуты

Специальные атрибуты

autocomplete

Указывает браузеру, должен ли он автоматически предлагать варианты при вводе данных для этого элемента управления, пытаясь угадать, что пользователь печатает. Для данного атрибута элемента HTML textarea допустимы два значения, они не чувствительны к регистру:

  • on: браузер должен предлагать варианты автоматически. Это значение по умолчанию;
  • off: браузер не должен предлагать варианты автоматически.

autofocus

Логическое значение, указывающее браузеру установить фокус ввода на элементе управления после завершения загрузки документа или при открытии диалогового окна, в котором отображается элемент управления. Если атрибут имеет значение « autofocus «, пустую строку ( » « ), то элемент управления будет находиться в фокусе ввода сразу после загрузки страницы или диалогового окна.

Ширина элемента управления, задаваемая через количество символов исходя из ширины литер текущего шрифта. Так как символы не всегда имеют одинаковую ширину, браузеры могут использовать различные методы, чтобы округлить это значение.

Значение, указанное в этом атрибуте тега textarea в HTML должно быть целым числом больше нуля. Если значение отсутствует или имеет некорректный формат, атрибуту будет присвоено значение по умолчанию — 20 .

dirname

Название нового поля, предназначенного для передачи направления ввода текста. Этот атрибут, введенный в HTML5 , позволяет авторам корректно обрабатывать значения, вводимые на языках с различным направлением письма. Для этого добавляется отдельное поле, заполняемое вместе с формой. Название поля будет выступать в качестве значения атрибута.

Так как этот атрибут textarea HTML является относительно новым, он не полностью поддерживается браузерами. Разработчики должны проверять поддержку браузерами при получении данных на стороне сервера.

disabled

Логическое значение, указывающее отключен ли данный элемент управления или нет. Если атрибут принимает значение « disabled » или пустую строку ( «» ), то элемент управления отключен.

Отключенные элементы управления при отображении формы неактивны, блокируются от взаимодействия с пользователем и их значения ( если таковые имеются ) не передаются при отправке данных формы.

Значение атрибута идентификатора формы, с которой HTML input textarea связан.

Этот атрибут является новым и был введен в HTML5 . Он помогает определить принадлежность элементов управления во вложенных или разделенных формах.

inputmode

Указывает, какой способ ввода является наиболее приемлемым для пользователей. Существует двенадцать возможных значений, не чувствительных к регистру:

  • verbatim : алфавитно-цифровой ввод на латинице текста, такого как имена пользователей, пароли, коды товаров и т.д.;
  • latin : ввод на латинице на предпочтительном для пользователя языке с подключением вспомогательных средств, таких как автоматическое заполнение. Предназначен для передачи данных от пользователей компьютеру. Например, через форму поиска;
  • latin-name : ввод на латинице на предпочтительном для пользователя языке, с подключением некоторых вспомогательных средств. Таких, как автоматическое заполнение предлагаемых имен из списка контактов и автоматическая установка регистра;
  • latin-prose : ввод для передачи данных от человека человеку с автоматическим заполнением предлагаемого текста и автоматической расстановкой заглавных букв в начале предложений;
  • full-width-latin : ввод на латинице на втором языке пользователя, с подключением вспомогательных средств для ввода символов в полном размере и передачи данных от человека человеку, таких как автоматическое заполнение предлагаемого текста и расстановка заглавных букв в начале предложений;
  • kana : ввод на кана или ромадзи, стандартный ввод на хирагана, использующий ввод символов в полном размере с поддержкой преобразования в кандзи. Предназначен для ввода текста на японском языке;
  • kana-name : то же самое, что и « kana «, но с подключением вспомогательных средств для ввода человеческих имен из списка контактов;
  • katakana : ввод на катакана с использованием символов и поддержкой преобразования в кандзи. Предназначен для ввода текста на японском языке;
  • numeric : ввод цифр, включая клавиши для цифр от 0 до 9 , с использованием указанного символа, разделяющего тысячи и символа для отрицательных чисел. Рекомендуется для элемента ввода цифр;
  • tel : ввод номеров телефонов, включая клавиши цифр от 0 до 9 , символа « # » и символа « * «. В некоторых локальных зонах это значение атрибута HTML textarea может включать буквенные мнемонические метки. Рекомендуется для элемента ввода номера телефона;
  • email : ввод текста в локали пользователя с использованием клавиш для ввода адреса электронной почты. Например, символов « @ » и « . «. Рекомендуется для элемента ввода адреса электронной почты;
  • url : ввод текста в локали пользователя с использованием клавиш для ввода адресов. Например, символов « / » и « . «, а также для быстрого ввода частей доменных имен, таких как « www .» или « .co.uk «. Рекомендуется для элемента управления ввода URL-адреса .

Браузеры могут использовать информацию, содержащуюся в этом атрибуте, чтобы предоставить средства, помогающие пользователю вводить данные. Например, виртуальные экранные клавиатуры могут предоставлять специальные клавиши для выбранного режима ввода.

maxlength

Целое число, указывающее максимальное количество символов, которое может содержать значение элемента управления.


Разработчики не должны полагаться на атрибут textarea HTML maxlength . Пользователи могут отправить данные формы через браузер, не поддерживающий эту функцию.

minlength

Целое число, указывающее минимальное количество символов, которое может содержать значение элемента управления.

Разработчики не должны полагаться на атрибут minlength . Пользователи могут отправить данные формы через браузер, не поддерживающий эту функцию.

Поддержка браузерами атрибута minlength является крайне слабой. Лучше не полагаться на этот атрибут, пока его поддержка не улучшится.

Имя тега textarea в HTML . Оно будет отправлено браузером обработчику, связанному с содержимым элемента. Они вместе будут соответствовать паре имя-значение, которая используется для обработки данных формы.

placeholder

Текст подсказки, как должно быть заполнено поле ( пример или краткое описание ). Браузеры могут отображать содержимое атрибута в элементе управления, хотя он не имеет никакого значения. Когда пользователь начинает вводить собственный текст, подсказка должна удаляться из элемента управления.

readonly

Логическое значение, указывающее браузеру запретить пользователю изменять значение элемента управления. Если атрибут имеет значение « readonly » или пустую строку ( «» ), то пользователю запрещено изменять значение в элементе управления.

Хотя этот атрибут не позволяет редактировать значения элемента управления, но блокируются не все действия: пользователь все равно сможет выделить и скопировать текст в элементе управления.

required

Логическое значение, указывающее на то, может ли данный элемент управления оставаться незаполненным. Если атрибут имеет значение « required » или пустую строку ( «» ), то пользователь должен заполнить элемент управления, чтобы отправить данные формы.

Если HTML input textarea с атрибутом required не заполнен, то при попытке пользователя отправить данные формы, браузер выдаст ошибку и отменит отправку данных.

Поддержка браузеров для атрибута required является неполной. Разработчикам придется полагаться на скрипты, чтобы обеспечить данный функционал во всех браузерах.

Количество строк, отображаемых в элементе управления. Если текст внутри элемента управления содержит больше строк, чем задано атрибутом, браузер выведет вертикальную полосу прокрутки, чтобы пользователь смог получить доступ к скрытому содержимому.

Значение, указанное в этом атрибуте тега textarea в HTML , должно быть целым числом больше нуля. Если значение отсутствует или имеет неправильный формат, то для атрибута будет назначено значение по умолчанию — 2 .

Значение, указывающее браузеру, должен ли переноситься текст при отправке данных формы. Для атрибута доступно два значения, не чувствительных к регистру:

  • soft : текст не будет переноситься при отправке данных формы, но он может переноситься при отображении. Это значение по умолчанию;
  • hard : текст будет переноситься при отправке данных формы с помощью добавления новых строк. Таким образом длина текста не превысит ширину фрейма.

Это относительно новый атрибут textarea HTML , его поддержка является неполной. Разработчикам придется полагаться на скрипты, чтобы обеспечить этот функционал во всех браузерах.

Данная публикация представляет собой перевод статьи « textarea element » , подготовленной дружной командой проекта Интернет-технологии.ру

Java: прозрачный TextArea + рисовать фон

Мой вопрос здесь довольно прост. Можно ли сделать JTextArea прозрачным, но не полностью невидимым? Кроме того, если это возможно, как я могу нарисовать изображение позади него (сначала нарисуйте изображение, а затем нарисуйте поверх него прозрачную текстовую область)?

2 ответа

Возможно, для Вашего проекта будут необходимы бесплатные векторные карты. На нашем сайте представлены карты для всех стран.

1) Переопределите метод paintComponent() объекта JTextArea примерно так:

2) При создании текстовой области вам нужно придать ей прозрачный фон:

Вы также можете сделать это:

jscrollpane является непосредственным родительским компонентом jtextarea.

Изображение в качестве фона для jFrame в Java Netbeans

Не так давно я столкнулся с задачей установки изображения в качестве фона для jFrame в Java. Итак, начнем. Суть способа в следующем: у jLabel в Java можно установить фоновое изображение — иконку (icon). При этом jLabel можно будет использовать как фон. Сверху расположим прозрачный jPanel, и уже на панели разместим все остальные компоненты. Давайте сначала я покажу как это сделать через визуальный редактор Netbeans, а потом в конце статьи я выложу исходный код Java:

  1. В конструкторе форм Netbeans щелкаем по jFrame правой кнопкой мыши и в контекстном меню выбираем пункт «Установить расположение» -> «Макет контейнера сетки» (GridBagLayout)
  2. Добавьте панель (jPanel) в jFrame
  3. В окне «Свойства» jPanel уберите галочку со свойства «opaque»
  4. Добавьте на jFrame (не на jPanel) компонент jLabel (метка)
  5. В свойствах только что добавленного jLabel найдите свойство icon и возле него нажмите на кнопку … и выберите интересующее вас изображение:
  6. В свойствах jLabel найдите свойство «text» и удалите оттуда весь текст
  7. В свойствах jLabel найдите «X в сетке» (Grid X), «Y в сетке» (Grid Y), Ширина шага сетки, Высота шага сетки (Weight X и Weight Y) и установите значение 1 у всех этих свойств, а свойству «заполнение» (Fill) установите значение «Оба» (Both):
  8. Повторите шаг 7 для добавленной ранее jPanel

Все, фон готов, теперь можно перетаскивать элементы на фрейм с фоном. А теперь, как я и обещал, исходный код для создания фона для jFrame вручную, без конструктора:

Java — Установить картинку на фон textArea

В статье представлено несколько трюков, которые вы, возможно, не знали и которые вы найдёте полезными в своих разработках.

1. Изображение в качестве фона, которое пропадает при вводе текста.

Вы можете добавить фоновое изображение также, как и в любой другой элемент. В этом случае стиль по умолчанию для textarea изменяется, а именно бордер толщиной в 1px изменяется на скошенную границу. Исправляется это явным указанием бордера.

Фоновое изображение может повлиять на читаемость текста. Поэтому фоновое изображение надо убирать при получении фокуса и возвращать его, если textarea осталась без текста. Например, используя jQuery это можно сделать таким образом:

2. Placeholder в HTML5

В HTML5 появился новый атрибут, называемый placeholder. Значение этого атрибута показывается в текстовом элементе и исчезает при получении фокуса, а также в случае когда в элементе введён текст.

HTML5 placeholder поддерживается в следующих браузерах: Safari 5, Mobile Safari, Chrome 6, и Firefox 4 alpha.

3. Placeholder, HTML5 с поддержкой старых браузеров используя jQuery

Самый простой способ проверить поддерживается ли атрибут браузером это проверить с помощью javaScript:


Затем можно написать код, который будет срабатывать если браузер не поддерживает атрибут placeholder.

4. Удаляем обводку textarea

Браузеры на движках webkit, а также в FireFox 3.6, обводят textarea, когда он находится в фокусе. Удалить эту обводку можно используя css-свойство outline для webkit-браузеров. Для FireFox используется свойство -moz-appearance, либо можно просто установить элементу бордер или фон.

5. Запрет изменения размера

Webkit-браузеры добавляют к textarea визуальный элемент в правом нижнем углу, который позволяет изменять размер текстовой области. Если вы хотите убрать эту возможность, то вам необходимо использовать следующее css-свойство:

6. Добавление возможности изменения размера

jQuery UI позволяет добавить возможность изменения размера для textarea. Это работает для всех браузеров, а для webkit-браузеров подменяет стандартное поведение. Для того, чтобы использовать эту возможность, необходимо подключить jquery.ui и написать следующий код:

7. Изменение размера под содержимое

James Padolsey написал удобный jQuery-скрипт который позволяет автоматически изменять размер textarea под его содержимое. Похоже что этого плагина больше нет, но можно использовать например вот этот. Плагин содержит много настроек, но самый простой способ его использовать это:

8. Nowrap

Чтобы не переносить слова на новые строки, для всех элементов используется css-свойство white-space, которое не работает с textarea. Для textarea необходимо использовать атрибут wrap.

9. Удаляем скролл-бары в IE

IE показывает вертикальный скролл-бар для всех textarea. Вы можете их спрятать используя overflow: hidden, но в таком случае он не будет показываться при увеличении контента. Поэтому правильнее использовать следующий подход:

В этом случае скролл-бар не будет отображаться когда в textarea помещается весь текст, но выведется в случае необходимости.

Примеры к статье вы можете посмотреть здесь.

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.
Страница 1 из 2 1 2 >

Дано
Есть на сайте div с фоновой картинкой (небольшого объёма).

Задача:
Поменять исходную фоновую картинку в этом div-e на другую фоновую картинку, которая весит довольно много.

Проблема вот в чём:
Когда меняю лёгкую картинку на тяжёлую видно как стара картинка исчезла, дальше на её месте белый экран, потом только через пару секунд появляется тяжёлая.
Менял как свойство imageBackground, так и класс у div.

Элемент textarea

Элемент textarea HTML — это поле для ввода текста, состоящего из нескольких строк, и его редактирования. Он используется для ввода и редактирования длинных фрагментов текста.

Содержимое этого элемента представляет его исходное значение. Оно отображается в текстовом поле после загрузки документа или после нажатия кнопки сброса в форме.

Примеры

В первом примере мы создадим форму с элементом управления textarea со всеми значениями по умолчанию. Также мы установим атрибут placeholder с подсказкой относительно того, контент какого типа должен вводиться в поле. Она будет отображаться, когда текстовая область пуста:

Во втором примере мы установим начальное значение в качестве содержимого HTML textarea . Оно будет использоваться для заполнения элемента управления сразу после загрузки документа, а также после сброса формы.

В отличие от поля для ввода однострочного текста элемент textarea использует начальное значение в качестве содержимого ( вместо атрибута value ):

Далее мы используем атрибуты cols и rows , чтобы задать количество символов, которые могут одновременно отображаться в элементе управления. Браузеры рассчитывают ширину и высоту элемента, умножая эти значения на ширину и высоту символа используемого шрифта.

Ширина HTML input textarea вычисляется относительно ширины символа используемого шрифта. Так как символы не всегда имеют одинаковую ширину, то браузеры могут использовать различные методы, чтобы округлить это значение:

В следующем примере мы используем два атрибута. Они устанавливают ограничения на длину текста, который может быть введен в текстовую область. Это minlength и maxlength , их названия говорят сами за себя.

Соответствие minlength проверяется только при отправке данных формы, а в maxlength браузеры проверяют, чтобы пользователь не ввел больше символов, чем указано через этот атрибут.

Атрибут maxlength элемента textarea HTML хорошо поддерживается браузерами, а minlength – нет:

Теперь мы используем атрибут required , который был введен в HTML5 . Когда этот атрибут указан, браузер не позволяют отправить данные формы, пока соответствующее поле не будет заполнено.

Поддержка браузерами атрибута является неполной. Чтобы обеспечить этот функционал во всех браузерах, придется использовать скрипты.

Атрибуты

Специальные атрибуты

autocomplete

Указывает браузеру, должен ли он автоматически предлагать варианты при вводе данных для этого элемента управления, пытаясь угадать, что пользователь печатает. Для данного атрибута элемента HTML textarea допустимы два значения, они не чувствительны к регистру:

  • on: браузер должен предлагать варианты автоматически. Это значение по умолчанию;
  • off: браузер не должен предлагать варианты автоматически.

autofocus

Логическое значение, указывающее браузеру установить фокус ввода на элементе управления после завершения загрузки документа или при открытии диалогового окна, в котором отображается элемент управления. Если атрибут имеет значение « autofocus «, пустую строку ( » « ), то элемент управления будет находиться в фокусе ввода сразу после загрузки страницы или диалогового окна.


Ширина элемента управления, задаваемая через количество символов исходя из ширины литер текущего шрифта. Так как символы не всегда имеют одинаковую ширину, браузеры могут использовать различные методы, чтобы округлить это значение.

Значение, указанное в этом атрибуте тега textarea в HTML должно быть целым числом больше нуля. Если значение отсутствует или имеет некорректный формат, атрибуту будет присвоено значение по умолчанию — 20 .

dirname

Название нового поля, предназначенного для передачи направления ввода текста. Этот атрибут, введенный в HTML5 , позволяет авторам корректно обрабатывать значения, вводимые на языках с различным направлением письма. Для этого добавляется отдельное поле, заполняемое вместе с формой. Название поля будет выступать в качестве значения атрибута.

Так как этот атрибут textarea HTML является относительно новым, он не полностью поддерживается браузерами. Разработчики должны проверять поддержку браузерами при получении данных на стороне сервера.

disabled

Логическое значение, указывающее отключен ли данный элемент управления или нет. Если атрибут принимает значение « disabled » или пустую строку ( «» ), то элемент управления отключен.

Отключенные элементы управления при отображении формы неактивны, блокируются от взаимодействия с пользователем и их значения ( если таковые имеются ) не передаются при отправке данных формы.

Значение атрибута идентификатора формы, с которой HTML input textarea связан.

Этот атрибут является новым и был введен в HTML5 . Он помогает определить принадлежность элементов управления во вложенных или разделенных формах.

inputmode

Указывает, какой способ ввода является наиболее приемлемым для пользователей. Существует двенадцать возможных значений, не чувствительных к регистру:

  • verbatim : алфавитно-цифровой ввод на латинице текста, такого как имена пользователей, пароли, коды товаров и т.д.;
  • latin : ввод на латинице на предпочтительном для пользователя языке с подключением вспомогательных средств, таких как автоматическое заполнение. Предназначен для передачи данных от пользователей компьютеру. Например, через форму поиска;
  • latin-name : ввод на латинице на предпочтительном для пользователя языке, с подключением некоторых вспомогательных средств. Таких, как автоматическое заполнение предлагаемых имен из списка контактов и автоматическая установка регистра;
  • latin-prose : ввод для передачи данных от человека человеку с автоматическим заполнением предлагаемого текста и автоматической расстановкой заглавных букв в начале предложений;
  • full-width-latin : ввод на латинице на втором языке пользователя, с подключением вспомогательных средств для ввода символов в полном размере и передачи данных от человека человеку, таких как автоматическое заполнение предлагаемого текста и расстановка заглавных букв в начале предложений;
  • kana : ввод на кана или ромадзи, стандартный ввод на хирагана, использующий ввод символов в полном размере с поддержкой преобразования в кандзи. Предназначен для ввода текста на японском языке;
  • kana-name : то же самое, что и « kana «, но с подключением вспомогательных средств для ввода человеческих имен из списка контактов;
  • katakana : ввод на катакана с использованием символов и поддержкой преобразования в кандзи. Предназначен для ввода текста на японском языке;
  • numeric : ввод цифр, включая клавиши для цифр от 0 до 9 , с использованием указанного символа, разделяющего тысячи и символа для отрицательных чисел. Рекомендуется для элемента ввода цифр;
  • tel : ввод номеров телефонов, включая клавиши цифр от 0 до 9 , символа « # » и символа « * «. В некоторых локальных зонах это значение атрибута HTML textarea может включать буквенные мнемонические метки. Рекомендуется для элемента ввода номера телефона;
  • email : ввод текста в локали пользователя с использованием клавиш для ввода адреса электронной почты. Например, символов « @ » и « . «. Рекомендуется для элемента ввода адреса электронной почты;
  • url : ввод текста в локали пользователя с использованием клавиш для ввода адресов. Например, символов « / » и « . «, а также для быстрого ввода частей доменных имен, таких как « www .» или « .co.uk «. Рекомендуется для элемента управления ввода URL-адреса .

Браузеры могут использовать информацию, содержащуюся в этом атрибуте, чтобы предоставить средства, помогающие пользователю вводить данные. Например, виртуальные экранные клавиатуры могут предоставлять специальные клавиши для выбранного режима ввода.

maxlength

Целое число, указывающее максимальное количество символов, которое может содержать значение элемента управления.

Разработчики не должны полагаться на атрибут textarea HTML maxlength . Пользователи могут отправить данные формы через браузер, не поддерживающий эту функцию.

minlength

Целое число, указывающее минимальное количество символов, которое может содержать значение элемента управления.

Разработчики не должны полагаться на атрибут minlength . Пользователи могут отправить данные формы через браузер, не поддерживающий эту функцию.

Поддержка браузерами атрибута minlength является крайне слабой. Лучше не полагаться на этот атрибут, пока его поддержка не улучшится.

Имя тега textarea в HTML . Оно будет отправлено браузером обработчику, связанному с содержимым элемента. Они вместе будут соответствовать паре имя-значение, которая используется для обработки данных формы.

placeholder

Текст подсказки, как должно быть заполнено поле ( пример или краткое описание ). Браузеры могут отображать содержимое атрибута в элементе управления, хотя он не имеет никакого значения. Когда пользователь начинает вводить собственный текст, подсказка должна удаляться из элемента управления.

readonly

Логическое значение, указывающее браузеру запретить пользователю изменять значение элемента управления. Если атрибут имеет значение « readonly » или пустую строку ( «» ), то пользователю запрещено изменять значение в элементе управления.

Хотя этот атрибут не позволяет редактировать значения элемента управления, но блокируются не все действия: пользователь все равно сможет выделить и скопировать текст в элементе управления.

required

Логическое значение, указывающее на то, может ли данный элемент управления оставаться незаполненным. Если атрибут имеет значение « required » или пустую строку ( «» ), то пользователь должен заполнить элемент управления, чтобы отправить данные формы.

Если HTML input textarea с атрибутом required не заполнен, то при попытке пользователя отправить данные формы, браузер выдаст ошибку и отменит отправку данных.

Поддержка браузеров для атрибута required является неполной. Разработчикам придется полагаться на скрипты, чтобы обеспечить данный функционал во всех браузерах.

Количество строк, отображаемых в элементе управления. Если текст внутри элемента управления содержит больше строк, чем задано атрибутом, браузер выведет вертикальную полосу прокрутки, чтобы пользователь смог получить доступ к скрытому содержимому.

Значение, указанное в этом атрибуте тега textarea в HTML , должно быть целым числом больше нуля. Если значение отсутствует или имеет неправильный формат, то для атрибута будет назначено значение по умолчанию — 2 .

Значение, указывающее браузеру, должен ли переноситься текст при отправке данных формы. Для атрибута доступно два значения, не чувствительных к регистру:

  • soft : текст не будет переноситься при отправке данных формы, но он может переноситься при отображении. Это значение по умолчанию;
  • hard : текст будет переноситься при отправке данных формы с помощью добавления новых строк. Таким образом длина текста не превысит ширину фрейма.

Это относительно новый атрибут textarea HTML , его поддержка является неполной. Разработчикам придется полагаться на скрипты, чтобы обеспечить этот функционал во всех браузерах.

Данная публикация представляет собой перевод статьи « textarea element » , подготовленной дружной командой проекта Интернет-технологии.ру

Java: прозрачный TextArea + рисовать фон

Мой вопрос здесь довольно прост. Можно ли сделать JTextArea прозрачным, но не полностью невидимым? Кроме того, если это возможно, как я могу нарисовать изображение позади него (сначала нарисуйте изображение, а затем нарисуйте поверх него прозрачную текстовую область)?

2 ответа

1) Переопределите метод paintComponent() объекта JTextArea примерно так:

2) При создании текстовой области вам необходимо придать ей прозрачный фон:

Вы также можете сделать это:

jscrollpane является непосредственным родительским компонентом jtextarea.

Цукерберг рекомендует:  С++ - Лямбда-выражения с++
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих