HTML and CSS in Oracle Application Express. Part 1
In this article I would like to talk a little bit about how to work with HTML and CSS in the apex.
I have already heard several times about the cases when the use of the apex was refused due to the fact that “this is ugly”. Usually the problem was that there is some kind of default layout in the apex, and all the means to work with it are hidden quite far away and do not catch the eye, because of what it seems that what is in it by default is ceiling of its capabilities. I, as a real fan of apex, simply could not pass by. "Beautiful" in the apex can also be done, if you know how.
I will try to make the article useful for two categories of people at once. The first is PL / SQL developers who are just starting to master apex and web development for which is still a dark forest. The second is web developers, who have long been on “you” with layout and are faced with the task: “here’s an apex, you have to do it beautifully”. I just want to warn you that I myself belong to the first category of apex developers.
Let's go from simple to complex. First, I will talk about how to modify standard components with a file, and finish with global things - creating your own topics.
You can study CSS, HTML and tools for working with them for a long time, I will try to describe a certain minimum necessary to apply CSS / HTML and understand this article:
')
It is advisable to read in advance and in general to imagine:
When you edit a page in the apex, by default the page is shown in the “Page Designer” mode. I prefer the “Component View” mode, I prefer to work in it. Switch to it by clicking the "Component View" button:
The properties of the page, regions and elements are located here (this is the “Component View” mode):
Create a region and input field:
Next, go to the properties of the input field. There are two main tabs responsible for the layout: “Grid Layout” and “Element”. The first of them is responsible for the position of the element relative to other elements and at the present time is more of historical interest.
The second is responsible for the properties of the element itself. For example, we need to tweak its appearance a bit. Enter the following text in the “HTML Form Element Attributes” field:
and we get the result:
Let's look inside the element. Here is its HTML code:
Here we see the style attribute entered in the "HTML Form Element Attributes" field. You can add several attributes with values ​​to this field, and all of them will appear in the HTML code of the element.
Changing the label can be even easier. You can use HTML tags in the properties of the element on the “Label” tab; they will be displayed correctly. For example, we introduce there
The label text is italicized:
The same applies to the regions. If we go into the properties of the region, we will see the same “Grid Layout” tab, for which everything mentioned above about the “Grid Layout” tab of a separate element is true. The second important tab is called "Attributes". For example, add such a code in the “Region Attributes” field (this code makes the corners rounded with a given radius):
And look at the result:
Now let's go further. In order not to control every element with your hands, you can create your own CSS style and use it. For example, we have a page with several regions filled with plain text. By default, they look something like this:
(For the regions to be located not under each other, but as in the picture, it is enough to specify the “Start New Row” - “No” property in the second and fourth. The property is located on the “Grid Layout” tab)
Go to the page properties and find the tab "CSS". In the "Inline" field we will write the following code:
Next we go into the properties of the regions, and on the tab "Attributes" find the property "Region CSS Classes". Here you can write the names of any CSS-classes, which will then be applied to the region. If you need to specify several classes, list them separated by a space - the way you do it in the class attribute in the HTML code of the page. When the page is generated, the string from this field will be added to the HTML code as you fill it out.
Fill this property with our regions as follows: Region 2 let them get "class1", Region 3 - "class2", Region 4 - "class1 class2". Launch the page and get the result:
Now add our CSS classes to the page as a file. Copy the code from the previous example into a text editor and save to a file with a name, for example, “my_css.css”. In the page properties, delete this code from the “Inline” field - it is no longer needed there. Instead, enter the file path in the “File URLs” field on the same tab:
Here the folder "/ i /" is a pseudo-folder with images. By default, it corresponds to the folder
(Details can be found in the documentation for setting up a web server).
Then you just have to copy the CSS file to this folder on the server.
If you don’t have access to the files on the server (for example, you have apex hosting, you create a test application on apex.oracle.com or simply have strict security rules in your organization), there is another way to download the file. Go to the section “Shared Components”, in the section “Files” click “Static Application Files”. You will see a list of files (if you didn’t upload anything there, the list will be empty). Click “Upload File” and upload the newly created file “my_css.css”. After uploading the file to the server, you will see a line with your file in the table. In the "Reference" column you will see something like "# APP_IMAGES # my_css.css" - this is the path to the file that you need to copy as it is in the "File URLs" field in the properties of the page on which you want to use it. Apex will prescribe the address of this file in the page code.
Now let's see the HTML code for the input field from the first example.
Here “P1_INPUT_FIELD” is the name of the input field in the apex, which I specified when creating it. Input fields in apex usually get names in the following format:
These names must be unique within the page; the apex simply will not allow two elements with the same name to be created on the page. These same names become the basis for HTML ID tags. In the above code, there are identifiers (generated by the name-based apex) for the field itself, its labels, and the div container in which they are located.
There are also identifiers for regions and buttons. Here is the HTML code for the region:
And here is the code for the button (the button was created with the simple name “BUTTON” and the inscription “Button”):
The IDs of the regions and buttons are taken from the primary key of the apex system tables, which store the data on the regions and buttons, respectively (this is not so convenient, because to know them, you must first start the application and open the page, and if you recreate the region / button, then the identifier will be different). Thus, you can change the style of any page element from a CSS file or inline CSS, referring to it by ID.
In the next part I will talk about working with reports and creating your own templates and themes.
To be continued...
I have already heard several times about the cases when the use of the apex was refused due to the fact that “this is ugly”. Usually the problem was that there is some kind of default layout in the apex, and all the means to work with it are hidden quite far away and do not catch the eye, because of what it seems that what is in it by default is ceiling of its capabilities. I, as a real fan of apex, simply could not pass by. "Beautiful" in the apex can also be done, if you know how.
I will try to make the article useful for two categories of people at once. The first is PL / SQL developers who are just starting to master apex and web development for which is still a dark forest. The second is web developers, who have long been on “you” with layout and are faced with the task: “here’s an apex, you have to do it beautifully”. I just want to warn you that I myself belong to the first category of apex developers.
Let's go from simple to complex. First, I will talk about how to modify standard components with a file, and finish with global things - creating your own topics.
A small lyrical digression for PL / SQL developers
You can study CSS, HTML and tools for working with them for a long time, I will try to describe a certain minimum necessary to apply CSS / HTML and understand this article:
- Get a debugging tool, explore the capabilities of your favorite browser. For example, Firefox has a Firebug plugin, other browsers have similar tools.
- Learn the basics of HTML and CSS. I started with this tutorial. You will need one or two evenings of thoughtful reading, for the first time the reading will suffice.
- It’s advisable to know what class and selector are in CSS, how classes are applied to elements on a page.
- It is also useful to practice a bit on the sandbox sites, of which there are many on the Internet (google "css sandbox").
')
A small digression for web developers
It is advisable to read in advance and in general to imagine:
- What are the components of the application and page apex
- what is Item (item, or item) and Region (region) and what are they for
- what is “Shared Components” and where to find them
When you edit a page in the apex, by default the page is shown in the “Page Designer” mode. I prefer the “Component View” mode, I prefer to work in it. Switch to it by clicking the "Component View" button:
The properties of the page, regions and elements are located here (this is the “Component View” mode):
Change the properties of individual elements
Create a region and input field:
Next, go to the properties of the input field. There are two main tabs responsible for the layout: “Grid Layout” and “Element”. The first of them is responsible for the position of the element relative to other elements and at the present time is more of historical interest.
Historical excursion
The fact is that in the apex up to version 4.2 inclusive, a table layout was used. That is, if you created a region with several elements (input fields and buttons), the apex in the process of generating the HTML code for the page created a <table> tag and placed all the elements inside the table. For the niche in which apex is mainly used (development of web interfaces for databases by PL / SQL developers), this was a fairly convenient solution. What can I say - almost perfect. All elements were lined up in straight rows, and by manipulating the attributes of elements from the “Grid Layout” tab, one could simply set the position of the elements relative to each other. And do not bother with extra information. Now, starting with version 5, block layout is used in the apex. On the one hand, such a layout is now the mainstream, and there are no supporters of layout using tables. Apex has become a more versatile tool. But on the other hand, the apex developer now needs to learn CSS to control the position of elements on the page with the same ease as in version 4.x. However, if you do not touch anything and leave all the properties by default, the apex arranges the elements quite decently.
The second is responsible for the properties of the element itself. For example, we need to tweak its appearance a bit. Enter the following text in the “HTML Form Element Attributes” field:
style="color: red" and we get the result:
Let's look inside the element. Here is its HTML code:
<input id="P2_X" class="text_field" type="text" maxlength="4000" size="30" value="" style="color: red" name="p_t01"> Here we see the style attribute entered in the "HTML Form Element Attributes" field. You can add several attributes with values ​​to this field, and all of them will appear in the HTML code of the element.
Changing the label can be even easier. You can use HTML tags in the properties of the element on the “Label” tab; they will be displayed correctly. For example, we introduce there
<i> </i> The label text is italicized:
The same applies to the regions. If we go into the properties of the region, we will see the same “Grid Layout” tab, for which everything mentioned above about the “Grid Layout” tab of a separate element is true. The second important tab is called "Attributes". For example, add such a code in the “Region Attributes” field (this code makes the corners rounded with a given radius):
style="border-top-left-radius: 20px; border-bottom-left-radius: 20px;" And look at the result:
Using your own style page
Now let's go further. In order not to control every element with your hands, you can create your own CSS style and use it. For example, we have a page with several regions filled with plain text. By default, they look something like this:
(For the regions to be located not under each other, but as in the picture, it is enough to specify the “Start New Row” - “No” property in the second and fourth. The property is located on the “Grid Layout” tab)
Go to the page properties and find the tab "CSS". In the "Inline" field we will write the following code:
.class1 { background-color: #FFFFDD; } .class2 { border-style: dotted; border-width: 3px; border-color: red; } Next we go into the properties of the regions, and on the tab "Attributes" find the property "Region CSS Classes". Here you can write the names of any CSS-classes, which will then be applied to the region. If you need to specify several classes, list them separated by a space - the way you do it in the class attribute in the HTML code of the page. When the page is generated, the string from this field will be added to the HTML code as you fill it out.
Fill this property with our regions as follows: Region 2 let them get "class1", Region 3 - "class2", Region 4 - "class1 class2". Launch the page and get the result:
Add your style file
Now add our CSS classes to the page as a file. Copy the code from the previous example into a text editor and save to a file with a name, for example, “my_css.css”. In the page properties, delete this code from the “Inline” field - it is no longer needed there. Instead, enter the file path in the “File URLs” field on the same tab:
/i/my_css.css Here the folder "/ i /" is a pseudo-folder with images. By default, it corresponds to the folder
$ORACLE_HOME/apex/images (Details can be found in the documentation for setting up a web server).
Then you just have to copy the CSS file to this folder on the server.
If you don’t have access to the files on the server (for example, you have apex hosting, you create a test application on apex.oracle.com or simply have strict security rules in your organization), there is another way to download the file. Go to the section “Shared Components”, in the section “Files” click “Static Application Files”. You will see a list of files (if you didn’t upload anything there, the list will be empty). Click “Upload File” and upload the newly created file “my_css.css”. After uploading the file to the server, you will see a line with your file in the table. In the "Reference" column you will see something like "# APP_IMAGES # my_css.css" - this is the path to the file that you need to copy as it is in the "File URLs" field in the properties of the page on which you want to use it. Apex will prescribe the address of this file in the page code.
Accessing an item by its ID
Now let's see the HTML code for the input field from the first example.
<div class="t-Form-fieldContainer rel-col " id="P1_INPUT_FIELD_CONTAINER"> <div class="t-Form-labelContainer col col-3"> <label for="P1_INPUT_FIELD" id="P1_INPUT_FIELD_LABEL" class="t-Form-label"><i> </i></label> </div> <div class="t-Form-inputContainer col col-9"><input type="hidden" name="p_arg_names" value="27260033523482846547" /><input type="text" id="P1_INPUT_FIELD" name="p_t01" class="text_field" style="color: red" value="" size="30" maxlength="4000" /> </div> </div> Here “P1_INPUT_FIELD” is the name of the input field in the apex, which I specified when creating it. Input fields in apex usually get names in the following format:
P< >_< > These names must be unique within the page; the apex simply will not allow two elements with the same name to be created on the page. These same names become the basis for HTML ID tags. In the above code, there are identifiers (generated by the name-based apex) for the field itself, its labels, and the div container in which they are located.
There are also identifiers for regions and buttons. Here is the HTML code for the region:
<div class="t-Region t-Region--hiddenOverflow" id="R27145185734392799612" role="group" aria-labelledby="R27145185734392799612_heading"> <div class="t-Region-header"> <div class="t-Region-headerItems t-Region-headerItems--title"> <h2 class="t-Region-title" id="R27145185734392799612_heading"></h2> </div> ... And here is the code for the button (the button was created with the simple name “BUTTON” and the inscription “Button”):
<button onclick="apex.submit('BUTTON');" class="t-Button " type="button" id="B27329794070148088425"> <span class="t-Button-label">Button</span> </button> The IDs of the regions and buttons are taken from the primary key of the apex system tables, which store the data on the regions and buttons, respectively (this is not so convenient, because to know them, you must first start the application and open the page, and if you recreate the region / button, then the identifier will be different). Thus, you can change the style of any page element from a CSS file or inline CSS, referring to it by ID.
In the next part I will talk about working with reports and creating your own templates and themes.
To be continued...
Source: https://habr.com/ru/post/278671/
All Articles