Ashish Awasthi's Blog

Wednesday 4 July 2018

Skinning ADF Dialog box inside popup component

In this post, we'll see how to change the look n feel of popup component by skinning the ADF dialog box using CSS code in ADF Application. Skinning plays important role in designing a better user interface, You can read more about ADF Skinning here.

Default ADF dialog component inside popup looks like this

And here I'll show you how to customize the look of dialog box using ADF Skin (CSS Code), I hope you all know about creating ADF Skin file. After creating the Skin file put the CSS script mentioned below in that file.

See ADF Skin code used to customize ADF dialog box.

/**Change background color and border color of dialog**/
af|dialog {
    background-color: White;
    border-color: #4267b2;
}

/**Change dialog header style**/
af|dialog::header, af|dialog::header-end, af|dialog::header-start, af|dialog::title {
    color: #FFFFFF;
    text-align: center;
    background-color: #45619d;
    background-image: none;
    font-family: Arial;
    padding: 3px;
}

/**Change dialog button styler**/
af|dialog af|button {
    background-color: #4267b2;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #4267b2 1.5px solid;
    width: 60px;
}

af|dialog af|button::link {
    background-color: #4267b2;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #4267b2 1.5px solid;
    font-family: Arial;
}

/**Set hover event properties for dialog button**/
af|dialog af|button:hover {
    background-color: red;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #528cff 1.5px solid;
    width: 60px;
}

af|dialog af|button::link:hover {
    background-color: #528cff;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #528cff 1.5px solid;
    font-family: Arial;
}

/**Change default close icon of dialog**/
af|dialog::close-icon-style {
    background: none;
    background-image: url("../../lblue_cross_16.png");
    height: 17px;
}

af|dialog::close-icon-style:hover {
    background: none;
    background-image: url("../../red_cross_16.png");
    height: 17px;
}

And after skinning, ADF dialog box looks like this

Cheers :) Happy Learning

You might also like:

Friday 29 June 2018

HTML Tags and their usage

List of Basic HTML Tags

Here a list of HTML tags with their significant use is given. Read this and try in our online HTML editor. Learning Basic HTML helps in the development of Web Applications.

Tag Name	Tag Code		Purpose
Tag Name	Start Tag	Close Tag	Purpose
HTML	<html>	</html>	Starting & ending tag of page,
HEAD	<head>	</head>	Formatting information, and content is not visible
BODY	<body>	</body>	Contains the visible information
HEADING	<h1>,<h2>,<h3>,<h4>,<h5>,<h6>	</h1>,</h2>,</h3>,</h4>,</h5>,</h6>	Largest to smallest heading
Bold Text	<b>,<strong>	</b>,</strong>	For bold text
Paragraph	<p>	</p>	For writing text in paragraphs
Line Break	<br>	Not needed	Insert a line break
LIST	<ol>	</ol>	For Ordered List
LIST	<ul>	</ul>	For Unordered List
List Item	<li>	</li>	For component of list
IMAGE	<img src="source">	Not needed, </img>	For inserting image in webpage
LINK	<a href="url of page">	</a>	For Hyperlink
CENTER	<center>	<center>	For center alignment
TT	<tt>	</tt>	Typewriter like text
BLOCKQUOTE	<blockquote>	</blockquote>	Intends from both side
HR	<hr>	</hr>	Horizontal Rule
TABLE	<table>	</table>	Specifies the beginning and end of a table
TABLE ROW	<tr>	</tr>	Specifies the beginning and end of a table row
TABLE DATA	<td>	</td>	Specifies the beginning and end of a table cell
TABLE HEAD	<th>	</th>	A normal cell with text that is bold and centered
TABLE BORDER	<table border="1">	</table>	Specifies the border for table
ITALIC	<i>	</i>	For italic text
LESS THAN	<	Not needed	For < sign
GREATER THAN	>	Not needed	For > sign
SUBSCRIPT	<sub>	</sub>	For subscript
SUPERSCRIPT	<sup>	</sup>	For superscript
JAVASCRIPT	<script type="javascript">	</script>	For using javascript

Cheers :) Happy Learning

Thursday 28 June 2018

HTML Tutorial - A Quick Overview for beginners

After this HTML Tutorial, you'll learn about basics of HTML and it's tag. It'll help you in developing and customizing applications and Web sites that make use of HTML. With our online HTML editor, you can run HTML code directly from your browser.

What is HTML-

HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an .htm or .html file extension
An HTML file can be created using a simple text editor as Notepad

HTML Tags-

The HTML tags are used to markup HTML elements
The HTML tags are surrounded by the two characters
The surrounding characters are called angle brackets
HTML tags normally come in pairs
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive

Simply open Online HTML Editor in the new tab Tab and copy HTML code from this page and just paste in the editor, then click on "Run Button" at top of the editor and see your result in the right panel.

Headings in HTML

<html>
<body>
<h1>HTML Largest Heading</h1>
<h2>HTML Second Largest Heading</h2>
<h3>HTML Third Largest Heading</h3>
<h4>HTML Fourth Largest Heading</h4>
<h5>HTML Fifth Largest Heading</h5>
<h6>HTML Smallest Heading</h6>
</body>
</html>

Paragraphs in HTML

<html>
<body>
<p>This is example of paragraph, first paragraph</p>
<p>HTML tutorial, Second paragraph</p>
</body>
</html>

Links in HTML

<html>
<body>
<a href="http://www.awasthiashish.com">Ashish Awasthi's Blog</a>
<br />
<a href="http://www.facebook.com">Link to facebook</p>
</body>
</html>

Ordered List in HTML

<html>
<body>
<ol>
<li>Computers</li>
<li>Software</li>
<li>Laptop</li>
<li>Mobile</li>
</ol>
</body>
</html>

Unordered List in HTML

<html>
<body>
<ul>
<li>Computers</li>
<li>Software</li>
<li>Laptop</li>
<li>Mobile</li>
</ul>
</body>
</html>

Moving text using MARQUEE tag in HTML

<html>
<body>
<marquee>HTML Tutorial - This is moving text</marquee>
</body>
</html>

Images in HTML

<html>
<body>

<img src="http://www.awasthiashish.com/wp-content/uploads/2018/06/logo.png"
alt="Ashish Awasthi's Blog" width="200" height="200">

</body>
</html>

Text in HTML

<html>
<head>
<title>Title</title>
</head>
<body>

<b>Bold Text</b>
<br>
<i>Italic Text</i>
<br>
<u>Underline Text</i>

</body>
</html>

Test your HTML skills with W3School's Quiz

Cheers :) Happy Learning

Tuesday 8 May 2018

Change Style of ADF TreeTable, Column, Data Cell, Selected Row using ADF Skin

Hello Everyone

In this tutorial, We'll learn to change look n feel of ADF tree table component using Oracle ADF Skin
Here I am using Departments and Employees table HR Schema to prepare the model and created tree Table using view link between Departments and Employees View Object

Monday 16 April 2018

Increase Icon size of af:panelSpringBoard using ADF Skin

ADF Faces af:panelSpringBoard component shows af:showDetailItem in a fancy view using icons as the notation of showDetailItem

From Oracle Docs

The panelSpringboard control can be used to display a group of contents that belongs to a showDetailItem. An icon strip with icons representing the showDetailItem children along with the item's contents are displayed when in strip mode, and a grid of icons with no contents shown is displayed in grid mode. When the user selects an icon while the panelSpringboard is in strip mode, the panelSpringboard discloses the associated showDetailItem. When the user selects an icon while the panelSpringboard is in grid mode, this automatically causes the panelSpringboard to display in strip mode. Typically you would put one or more showDetailItem components inside of the panelSpringboard but you may also alternatively place a facetRef, group, iterator, or switcher inside of the panelSpringboard as long as these wrappers provide showDetailItem components as a result of their execution

I have added a panel springboard on the page and by default, it looks like this

Monday 9 April 2018

PL/SQL Function

PL/SQL Function is same as PL/SQL Procedure, The only difference is that function must return a value and a procedure may or may not return a value

Saturday 7 April 2018

PL/SQL Procedure

Previously I have posted about PL/SQL Block structure , A piece of code that is organized in a properly defined sequence is called a block

PL/SQL provides two types of blocks

Function- A PL/SQL block that performs a task or set of tasks and returns a value

Procedure- A PL/SQL block that performs a task or set of tasks and may or may not return a value

Monday 2 April 2018

PL/SQL Exceptions

An error that occurs during execution of the program is called exception, Like other programming languages, PL/SQL offers a way to catch these exceptions and handle them.

There are two types of exceptions in PL/SQL

System-Defined Exceptions
User-Defined Exceptions

Friday 23 March 2018

PL/SQL For Loop

PL/SQL FOR loop is used when we need to execute set of statements for the specific number of times and loop operates between the start and end counter values. The counter is always incremented by one and once the counter reaches to end integer value, the loop terminates

The syntax of PL/SQL FOR Loop is like this

FOR counter_variable IN start value.. end value LOOP

statements to execute

END LOOP;

PL/SQL While Loop

PL/SQL WHILE loop is used to execute statements as long as given condition is true and the condition is checked at the beginning of each iteration

The syntax of PL/SQL While loop is like this

WHILE condition

statements to execute

END LOOP;

PL/SQL Basic Exit Loop

In PL/SQL Basic Loop all statements inside the block are executed at least once before loop termination, Basic loop encloses statement between LOOP and END LOOP and there must be an EXIT or EXIT-WHEN condition to terminate the loop

The syntax of Basic Exit loop is like this

LOOP

statements to execute

EXIT; or EXIT-WHEN

END LOOP;

See these examples for better understanding

PL/SQL Loops , Iterative Statement in PL/SQL

Loops are used to repeat execution of a statement or a set of statements multiple times on base of a condition or expression
EXIT and EXIT-WHEN keywords are used to terminate the loop

EXIT- terminates the loop unconditionally and passes control to the next statement after the loop
EXIT-WHEN- terminates the loop when EXIT-WHEN clause is checked and if returns true then the loop is terminated and control is passed to next statement after the loop

The basic syntax of Loop in PL/SQL is like this

LOOP

Set of statements

END LOOP;

Thursday 22 March 2018

PL/SQL CASE Statement, Decision Making Statement in PL/SQL

Like real life in programming sometimes we need to execute some code on a specific condition, PL/SQL CASE statement allows us to execute a sequence of instructions based on a selector (A variable, function, expression etc)
and if selector value is equal to value or expression in WHEN clause then corresponding THEN clause will execute and process the statements

Wednesday 21 March 2018

PL/SQL Conditions, IF-ELSE Conditional Statement

Like other programming languages, PL/SQL supports decision making statements, These statements are also called conditional statement

Basic Syntax of IF-ELSE is like this in PL/SQL

IF (Condition 1)

THEN

Statement to execute (if condition 1 is true)

ELSIF (Condition 2)

THEN

Statement to execute (if condition 2 is true)

ELSE

Statement to execute (if condition 1& 2 both are false)

END IF;

For a better understanding of concept look at these examples

Friday 9 March 2018

PL/SQL Variables and Constants

A variable in any programming language is the name of space where values are stored and controlled by our code/program

We can not use reserve keyword as a variable name
Variable length should not exceed 30 characters
The variable name consists of letters followed by other letters, dollar sign, underscore and numerals
The variable name should be clear and easy to understand

Here we'll learn how to declare and initialize variables in PL/SQL

The basic syntax for declaring a variable in PL/SQL is following

variable_name [CONSTANT] datatype [NOT NULL] [:= | DEFAULT initial_value]

Here variable_name is the identifier of variable and datatype is a valid PL/SQL datatype. CONSTANT and DEFAULT are keywords used to define constants and set default values of variables

Wednesday 7 March 2018

PL/SQL Basic Syntax, Block Structure and Anonymous block

PL/SQL is highly structured language and it's program units are written in the block of code, In this tutorial, we'll learn about basic syntax and the block structure of PL/SQL

A piece of code that is organized in a properly defined sequence is called a Block. A PL/SQL Block consists of 3 parts

DECLARE
<<declaration >>
--Declare Variables,Constants, Cursors and all elements

BEGIN
<<executable statements>>
--SQL, PL/SQL Commands

EXCEPTION
<<exception handling>>
--Code to handle the exception

END;

Tuesday 6 March 2018

PL/SQL Tutorial - What is PL/SQL, Features and Advantages of PL/SQL

PL/SQL is developed by Oracle Corporation to increase/enhance capabilities of SQL, PL/SQL stands for Procedural Language extension to SQL . PL/SQL is highly structured and expressive language and because of its expressive syntax it is very easy to understand and learn

PL/SQL is integrated with Oracle Database and can be called from any other programming language. It is tightly integrated with SQL so it's easy to learn PL/SQL if you have knowledge of SQL

Tuesday 20 February 2018

Enable DBMS_OUTPUT in Oracle SQL Developer

I hope all of you'll be familiar with Oracle SQL Developer tool , A tool used by database developers to perform DB related tasks efficiently

DBMS_OUTPUT package of PL/SQL enables user to show/print some debugging information and used by learners to run and check small chunks of pl/sql code

Here we'll see how to enable DBMS_OUTPUT package in SQL Developer

Subscribe to: Posts ( Atom )

Search this blog

Wednesday 4 July 2018

Friday 29 June 2018

List of Basic HTML Tags

Thursday 28 June 2018

What is HTML-

HTML Tags-

Headings in HTML

Paragraphs in HTML

Links in HTML

Ordered List in HTML

Unordered List in HTML

Moving text using MARQUEE tag in HTML

Images in HTML

Text in HTML

Tuesday 8 May 2018

Monday 16 April 2018

Monday 9 April 2018

Saturday 7 April 2018

Monday 2 April 2018

Friday 23 March 2018

Thursday 22 March 2018

Wednesday 21 March 2018

Friday 9 March 2018

Wednesday 7 March 2018

Tuesday 6 March 2018

Tuesday 20 February 2018