jueves, 14 de noviembre de 2019

27. Vaadin 14. Problem with styles. (3) TextArea

0. Introduction


This post should be used combined with the last two posts.

1. TextArea Styling

This object HAS NO REFERENCE TO the textboxes !!!

1.0 Assign the Vaaadin Theme (For instance Lumo)

1.1 Create a file that contains general values of styles assigned to variables for instance "shared-styles.css" in the "frontend/styles" folder of your project with this info. Note that this file was created in the previous post and no additional information has been added.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
html {
  /* Example global custom CSS property definition */
  
  /* 1. FORM FIELDS */
    /* 1.1 enabled */
    --ximo-field-color:                     black;
    --ximo-field-background-color:          white;
    --ximo-field-font-weight:               bold;
    --ximo-field-opacity:                   1.0;
  
    --ximo-field-border-radius:             10px;
    --ximo-field-border-width:              1px 2px 2px 1px;
    --ximo-field-border-style:              solid;
    --ximo-field-border-color:              salmon;
    --ximo-field-margin-right:              15px;
  
    /* 1.2 disabled */
    --ximo-field-disabled-color:            gray;
    --ximo-field-disabled-background-color: white;
    --ximo-field-disabled-font-weight:      bold;
    --ximo-field-disabled-opacity:          0.8;
  
    --ximo-field-disabled-border-radius:    10px;
    --ximo-field-disabled-border-width:     1px 2px 2px 1px;
    --ximo-field-disabled-border-style:     solid;
    --ximo-field-disabled-border-color:     thistle;
    --ximo-field-disabled-margin-right:     15px;
 
 
 /* 2. COMBOBOX */
    /* 1.1 App Selector*/
    --ximo-combo-color:                     maroon;;
    --ximo-combo-font-weight:               bold;
    --ximo-combo-background-image:          linear-gradient(to bottom right, lightpink, white);
    --ximo-combo-border-radius:             10px;
 
    --ximo-combo-border:                    2px;
    --ximo-combo-border-bottom-style:       solid;
    --ximo-combo-border-bottom-width:       medium;
    --ximo-combo-border-bottom-color:       saddlebrown;
}

1.2 The file  "my-textfield-styles.css" in the "frontend/styles" folder is not needed for TextAreas, although it is needed for TextBoxes and ComboBoxes

1.3 Create a file called for instance "current-textarea-styles.css" in the "frontend/styles" folder of your project with this info. These are the styles definitively assigned to TextAreas. Take care!


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* General */
[part="input-field"] {
  
    color:                  var(--ximo-field-color);
    font-weight:            var(--ximo-field-font-weight);
    background-color:       var(--ximo-field-background-color);
    border-radius:          var(--ximo-field-border-radius);
    border-width:           var(--ximo-field-border-width);
    border-style:           var(--ximo-field-border-style);
    border-color:           var(--ximo-field-border-color);
    margin-right:           var(--ximo-field-margin-right);
    
    opacity:                var(--ximo-field-opacity);
    max-width:              35ch;
    min-width:              15ch;
    
    
    --lumo-disabled-text-color: var(--ximo-field-disabled-color);
  
 }
 
/* disabled */ 
:host([disabled]) [part="input-field"] { 
    border-color:      var(--ximo-field-disabled-border-color);
} 

/* For the label part of a text area */
[part="label"] {
    --lumo-disabled-text-color: var(--ximo-field-disabled-color);
}

Take into account the different part of a TextArea ("input-field" and "label")

1.4 The class that holds the form should have a reference to all the "css" files, using @CssImport


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@PageTitle("MainView")
@Route("mainview")
//... other stuff ....

//General Vaadin theme
@Theme(value = Lumo.class)  //(1)

//@ see https://vaadin.com/forum/thread/17197360/17863614 from Niels Nachname
@CssImport(value="styles/my-textfield-styles.css", themeFor="vaadin-text-field") // (2) Select only Text fields
@CssImport("./styles/shared-styles.css")              // (3) General variable setting 
@CssImport("./styles/current-textfields-styles.css")  // (4) Applied style to TextFields using previous variables


@CssImport(value="styles/my-comboboxstyles.css" , themeFor="vaadin-combo-box") //(2A) Select only for Combos
@CssImport("./styles/current-combobox-styles.css")  // (4B) Applied style to TextFields using previous variables

@CssImport(value="styles/current-textareastyles.css" , themeFor="vaadin-text-area") //(2B) Select only for TextAreas


public class MainView extends VerticalLayout implements RouterLayout {

 private TextField myTF=new TextField();
 
 private ComboBox myCmb01=new ComboBox<>();
 private ComboBox myCmb02=new ComboBox<>();
 private ComboBox myCmb03=new ComboBox<>();

 private TextArea myTA=new TextArea();
        
 public MainView() { 
  myTF.setClassName("my-textfield"); //Important
  
  //myCmb01.setClassName("my-textfield"); --> No set classname for  MyCmb01 as gets general CSS of [part="text-field"]
  myCmb02.setClassName("my-combobox-app"); // See current-combobox-styles.css
  myCmb03.setClassName("my-combobox-opt"); // See current-combobox-styles.css

  // No need to set Class for the textArea
   
 }
 //...other stuff

Publicado por en No hay comentarios:

26. Vaadin 14. Problem with styles. (2) ComboBox

0. Introduction


This post should be used with last post

1. ComboBox Styling


Following again the idea of Niels Nachname


1.0 Assign the Vaaadin Theme (For instance Lumo)

1.1 Create a file that contains general values of styles assigned to variables for instance "shared-styles.css" in the "frontend/styles" folder of your project with this info. Here related information for combos have been added- Note that this file was created in the previous post and new information is included.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
html {
  /* Example global custom CSS property definition */
  
  /* 1. FORM FIELDS */
    /* 1.1 enabled */
    --ximo-field-color:                     black;
    --ximo-field-background-color:          white;
    --ximo-field-font-weight:               bold;
    --ximo-field-opacity:                   1.0;
  
    --ximo-field-border-radius:             10px;
    --ximo-field-border-width:              1px 2px 2px 1px;
    --ximo-field-border-style:              solid;
    --ximo-field-border-color:              salmon;
    --ximo-field-margin-right:              15px;
  
    /* 1.2 disabled */
    --ximo-field-disabled-color:            gray;
    --ximo-field-disabled-background-color: white;
    --ximo-field-disabled-font-weight:      bold;
    --ximo-field-disabled-opacity:          0.8;
  
    --ximo-field-disabled-border-radius:    10px;
    --ximo-field-disabled-border-width:     1px 2px 2px 1px;
    --ximo-field-disabled-border-style:     solid;
    --ximo-field-disabled-border-color:     thistle;
    --ximo-field-disabled-margin-right:     15px;
 
 
 /* 2. COMBOBOX */
    /* 1.1 App Selector*/
    --ximo-combo-color:                     maroon;;
    --ximo-combo-font-weight:               bold;
    --ximo-combo-background-image:          linear-gradient(to bottom right, lightpink, white);
    --ximo-combo-border-radius:             10px;
 
    --ximo-combo-border:                    2px;
    --ximo-combo-border-bottom-style:       solid;
    --ximo-combo-border-bottom-width:       medium;
    --ximo-combo-border-bottom-color:       saddlebrown;
}

1.2 Create a file called for instance "my-textfield-styles.css" in the "frontend/styles" folder of your project with this info. The styles are redirected to intermediate variables. This file has been created yet in the previous post. Here is a copy

 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
[part="input-field"]{
     background-color: var(--my-background-color, 'auto');
     color:            var(--my-color,            'auto');
     font-size:        var(--my-font-size,        'auto');
     font-weight:      var(--my-font-weight,      'auto');
     background-image: var(--my-background-image, 'auto');
     border:           var(--my-border,           'auto');
     opacity:          var(--my-opacity,          'auto');
 
 
     border-radius:    var(--my-border-radius,    'auto');
     border-width:     var(--my-border-width,     'auto');
     border-style:     var(--my-border-style,     'auto');
     border-color:     var(--my-border-color,     'auto');
   
     border-bottom-style: var(--my-border-bottom-style,    'auto');
     border-bottom-width: var(--my-border-bottom-width,    'auto');
     border-bottom-color: var(--my-border-bottom-color,    'auto'); 
    
     margin-right: var(--my-margin-right,    'auto');
   
}


[part="input-field"][disabled] {
     background-color:   var(--my-background-color, 'auto');
 
     --lumo-disabled-text-color: var(--my-color,  'auto');
 
     font-size:          var(--my-font-size,        'auto');
     font-weight:        var(--my-font-weight,      'auto');
     background-image:   var(--my-background-image, 'auto');
     border:             var(--my-border,           'auto');
     opacity:            var(--my-opacity,          'auto'); 
 
 
     border-radius:       var(--my-border-radius,    'auto');
     border-width:        var(--my-border-width,     'auto');
     border-style:        var(--my-border-style,     'auto');
     border-color:        var(--my-border-color,     'auto');
 
     border-bottom-style: var(--my-border-bottom-style,    'auto');
     border-bottom-width: var(--my-border-bottom-width,    'auto');
     border-bottom-color: var(--my-border-bottom-color,    'auto');     
    
     margin-right:        var(--my-margin-right,    'auto');
     
}


1.3 Create a file called for instance "current-combobox-styles.css" in the "frontend/styles" folder of your project with this info. These are the styles definitively assigned to ComboBoxes. You should assign the classes "my-combobox-app" or "my-combobox-opt" or none of them to the ComboBox.



 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* general style for all combos */
[part="text-field"]{ 
    --my-color:               var(--ximo-combo-color); 
    --my-font-size:           110%;
    --my-font-weight:         var(--ximo-combo-font-weight); 
    --my-background-image:    var(--ximo-combo-background-image);
    --my-border-radius:       var(--ximo-combo-border-radius);
 
    --my-border:              var(--ximo-combo-border);
    --my-border-bottom-style: var(--ximo-combo-border-bottom-style);
    --my-border-bottom-width: var(--ximo-combo-border-bottom-width);
    --my-border-bottom-color: var(--ximo-combo-border-bottom-color);
} 

/* explicid for a combo that has been assigned the class "my-combobox-app" */
:host(.my-combobox-app) [part="text-field"]{ 
    --my-font-size:        110%;
}

/* explicid for a combo that has been assigned the class "my-combobox-opt" */
:host(.my-combobox-opt) [part="text-field"]{ 
    --my-font-size:        100%;
    --my-margin-right: 10px;
    
}

1.4 The class that holds the form should have a reference to all the "css" files, using @CssImport


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@PageTitle("MainView")
@Route("mainview")
//... other stuff ....

//General Vaadin theme
@Theme(value = Lumo.class)  //(1)

//@ see https://vaadin.com/forum/thread/17197360/17863614 from Niels Nachname
@CssImport(value="styles/my-textfield-styles.css", themeFor="vaadin-text-field") // (2) Select only Text fields
@CssImport("./styles/shared-styles.css")              // (3) General variable setting 
@CssImport("./styles/current-textfields-styles.css")  // (4) Applied style to TextFields using previous variables


@CssImport(value="styles/my-comboboxstyles.css" , themeFor="vaadin-combo-box") //(2A) Select only for Combos
@CssImport("./styles/current-combobox-styles.css")  // (4B) Applied style to ComboBox using previous variables

public class MainView extends VerticalLayout implements RouterLayout {

 private TextField myTF=new TextField();
 private ComboBox myCmb01=new ComboBox<>();
 private ComboBox myCmb02=new ComboBox<>();
 private ComboBox myCmb03=new ComboBox<>();
        
 public MainView() { 
  myTF.setClassName("my-textfield"); //Important
  //myCmb01.setClassName("my-textfield"); --> No set classname for  MyCmb01 as gets general CSS of [part="text-field"]
  myCmb02.setClassName("my-combobox-app"); // See current-combobox-styles.css
  myCmb03.setClassName("my-combobox-opt"); // See current-combobox-styles.css
 }
 //...other stuff





Publicado por en No hay comentarios:

25. Vaadin 14. Problem with styles. (1) TextFields

0. Introduction


Themes in Vaadin are difficult to understand. Changing a CSS attribute may be a complicated and unsuccessful task.

1. TextFields styling

As Niels Nachname states:

1.0 Assign the Vaaadin Theme (For instance Lumo)

1.1 Create a file that contains general values of styles assigned to variables for instance "shared-styles.css" in the "frontend/styles" folder of your project with this info.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
html {
  /* Example global custom CSS property definition */
  
  /* 1. FORM FIELDS */
    /* 1.1 enabled */
    --ximo-field-color:                     black;
    --ximo-field-background-color:          white;
    --ximo-field-font-weight:               bold;
    --ximo-field-opacity:                   1.0;
  
    --ximo-field-border-radius:             10px;
    --ximo-field-border-width:              1px 2px 2px 1px;
    --ximo-field-border-style:              solid;
    --ximo-field-border-color:              salmon;
    --ximo-field-margin-right:              15px;
  
    /* 1.2 disabled */
    --ximo-field-disabled-color:            gray;
    --ximo-field-disabled-background-color: white;
    --ximo-field-disabled-font-weight:      bold;
    --ximo-field-disabled-opacity:          0.8;
  
    --ximo-field-disabled-border-radius:    10px;
    --ximo-field-disabled-border-width:     1px 2px 2px 1px;
    --ximo-field-disabled-border-style:     solid;
    --ximo-field-disabled-border-color:     thistle;
    --ximo-field-disabled-margin-right:     15px;
 
}


1.2 Create a file called for instance "my-textfield-styles.css" in the "frontend/styles" folder of your project with this info. The styles are redirected to intermediate variables


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
[part="input-field"]{
     background-color: var(--my-background-color, 'auto');
     color:            var(--my-color,            'auto');
     font-size:        var(--my-font-size,        'auto');
     font-weight:      var(--my-font-weight,      'auto');
     background-image: var(--my-background-image, 'auto');
     border:           var(--my-border,           'auto');
     opacity:          var(--my-opacity,          'auto');
 
 
     border-radius:    var(--my-border-radius,    'auto');
     border-width:     var(--my-border-width,     'auto');
     border-style:     var(--my-border-style,     'auto');
     border-color:     var(--my-border-color,     'auto');
   
     border-bottom-style: var(--my-border-bottom-style,    'auto');
     border-bottom-width: var(--my-border-bottom-width,    'auto');
     border-bottom-color: var(--my-border-bottom-color,    'auto'); 
    
     margin-right: var(--my-margin-right,    'auto');
   
}


[part="input-field"][disabled] {
     background-color:   var(--my-background-color, 'auto');
 
     --lumo-disabled-text-color: var(--my-color,  'auto');
 
     font-size:          var(--my-font-size,        'auto');
     font-weight:        var(--my-font-weight,      'auto');
     background-image:   var(--my-background-image, 'auto');
     border:             var(--my-border,           'auto');
     opacity:            var(--my-opacity,          'auto'); 
 
 
     border-radius:       var(--my-border-radius,    'auto');
     border-width:        var(--my-border-width,     'auto');
     border-style:        var(--my-border-style,     'auto');
     border-color:        var(--my-border-color,     'auto');
 
     border-bottom-style: var(--my-border-bottom-style,    'auto');
     border-bottom-width: var(--my-border-bottom-width,    'auto');
     border-bottom-color: var(--my-border-bottom-color,    'auto');     
    
     margin-right:        var(--my-margin-right,    'auto');
     
}


1.3 Create a file called for instance "current-textfield-styles.css" in the "frontend/styles" folder of your project with this info. These are the styles definitively assigned to TextFields. You should assign the class "my-textfield" to the TextFields.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* style assigned in openadmin.ui.forms.elements.FieldBindCreator 
   IT IS USED IN CONJUNCTION WITH edu-textfieldstyles.css !!!!
*/ 
  .my-textfield{
     --my-color:             var(--ximo-field-color);
     --my-font-weight:       var(--ximo-field-font-weight);
     --my-background-color:  var(--ximo-field-background-color);
     --my-border-radius:     var(--ximo-field-border-radius);
     --my-border-width:      var(--ximo-field-border-width);
     --my-border-style:      var(--ximo-field-border-style);
     --my-border-color:      var(--ximo-field-border-color);
     --my-margin-right:      var(--ximo-field-margin-right);
     --my-opacity:           var(--ximo-field-opacity);

     --lumo-disabled-text-color: var(--ximo-field-disabled-color);
  } 
 
  .my-textfield:disabled,
  .my-textfield[disabled]{
     --my-font-weight:           var(--ximo-field-disabled-font-weight);
     --my-border-radius:         var(--ximo-field-disabled-border-radius);
     --my-border-width:          var(--ximo-field-disabled-border-width);
     --my-border-style:          var(--ximo-field-disabled-border-style);
     --my-border-color:          var(--ximo-field-disabled-border-color);
     --my-margin-right:          var(--ximo-field-disabled-margin-right);
  }

Take into account of the variable --lumo.disabled-text-color  


1.4 The class that holds the form should have a reference to all the "css" files, using @CssImport


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@PageTitle("MainView")
@Route("mainview")
//... other stuff ....

//General Vaadin theme
@Theme(value = Lumo.class)  //(1)

//@ see https://vaadin.com/forum/thread/17197360/17863614 from Niels Nachname
@CssImport(value="styles/my-textfield-styles.css", themeFor="vaadin-text-field") // (2) Select only Text fields
@CssImport("./styles/shared-styles.css")              // (3) General variable setting 
@CssImport("./styles/current-textfields-styles.css")  // (4) Applied style to TextFields using previous variables



public class MainView extends VerticalLayout implements RouterLayout {

 private TextField myTF=new TextField();
        
 public MainView() { 
  myTF.setClassName("my-textfield"); //Important
 }
 //...other stuff
}



Publicado por en No hay comentarios:

jueves, 7 de noviembre de 2019

24. Vaadin 14. Packaging, deploying, war (5). Installing Postgres on the server

1. Installing Postgres on Ubuntu 18.04


I have followed the steps of Postgres page

1.1  Create the file /etc/apt/sources.list.d/pgdg.list (sudo gedit )and add a line for the repository

1.2 Add this content

deb http://apt.postgresql.org/pub/repos/apt/ bionic-pgdg main

1.3 Import repository signing key, and update package list


wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
sudo apt-get update

1.4 Install desired packages


#1st install the DB
sudo apt-get install postgresql-12

#2nd install administrator 
sudo apt-get install pgadmin4

1.5 Update password of recently created user postgres

 
sudo -u postgres psql template1



ALTER USER postgres with encrypted password 'your_password';

1.6 Enable remote connections

 Edit the file /etc/postgresql/12/main/postgresql.conf

 
sudo gedit /etc/postgresql/12/main/postgresql.conf

 add this line

 
listen_addresses = '*'

Edit the file /etc/postgresql/12/main/pg_hba.conf 


sudo gedit /etc/postgresql/12/main/pg_hba.conf

 add this line

 
host  all  all 0.0.0.0/0 md5

1.7 Restart the server

 
sudo /etc/init.d/postgresql restart

1.8 Enter in PgAdmin4 on the localhost (not recommended in remote servers) and create a backup user with all privileges
Publicado por en No hay comentarios:

23. Vaadin 14. Packaging, deploying, war (4). Installing Tomcat on the server

1. Download

1.1. Download, for instance, the zip file from Apache. In my case, the version is 9.0.27.
1.2. Extract it in a folder, for instance /home/myUser/MyPrograms
1.3. Verify you have the variable JAVA_HOME pointing to a JDK 13 installation
1.4. Go to the bin folder of the installation and type ./startup.sh (in ubuntu)
1.5. Open a browser and see if http://localhost:8080 is showing the Tomcat screen.

2. Executing the Tomcat manager

2.1. Go to the conf folder of the installation and edit the file tomcat-users.xml
2.2. Uncomment the users and role part of the file so that it has  this content:


1
2
3
4
5
  <role rolename="manager-gui"/>
  <role rolename="tomcat"/>
  
  <user username="tomcat" password="mypassword" roles="tomcat,manager-gui"/>

2.3.  Go to the bin folder of the installation and type ./shutdown.sh and then ./startup.sh (in ubuntu) in order to stop and start the Tomcat.

2.4 Verify you can access the application Manager (Manager App button)

3. Executing the Tomcat manager from a remote machine

3.1 Go to the tomcat installation and in the webapps/manager/META-INF/ folder, edit the context.xml file

The content should be similar to this one, by commenting on a line:


1
2
3
4
5
6
7
<Context antiResourceLocking="false" privileged="true" >
  <!--
  <Valve className="org.apache.catalina.valves.RemoteAddrValve"
         allow="127\.\d+\.\d+\.\d+|::1|0:0:0:0:0:0:0:1" />
  --> 
  <Manager sessionAttributeValueClassNameFilter="java\.lang\.(?:Boolean|Integer|Long|Number|String)|org\.apache\.catalina\.filters\.CsrfPreventionFilter\$LruCache(?:\$1)?|java\.util\.(?:Linked)?HashMap"/>
</Context>


3.2 Now you can access the application manager from another server 



Publicado por en No hay comentarios:
Suscribirse a: Entradas (Atom)