Please disable your adblock and script blockers to view this page

Search this blog

Showing posts with label contentStyle. Show all posts
Showing posts with label contentStyle. Show all posts

Tuesday 10 July 2018

Styling HTML elements using CSS

In this post, we'll learn about styling HTML elements using CSS code, CSS stands for Cascading Style Sheet. It is used for changing the look of HTML components on the page and is very important for designing a beautiful user interface. After this tutorial, you'll be able to learn the basics about CSS and can use it in any type of web application or technology to beautify components.



CSS can be used in HTML pages in 3 ways, Here we'll see how to style HTML elements.

Inline CSS

Inline CSS is used to decorate a single HTML element and makes use of style attributes. See this example of styling HTML paragraph tag using inline CSS

<!DOCTYPE html>
<html>
<body>

<p style="color:red;font-size:20px;font-weight:bold;">This is a Red bold Paragraph</p>
<p style="color:darkgreen;font-size:15px;font-style:italic;">This is a green italic Paragraph</p>

</body>
</html>

Try this in our HTML Editor

Internal CSS

Internal CSS is used to decorate elements in a single HTML page. It is defined between <style> - </style> tag in <head> section. See this example of using internal CSS in an HTML page

<!DOCTYPE html>
<html>
<body>

<style>
p{
color:red;
font-size:20px;
font-weight:bold;
border: 1px solid blue;
padding: 50px;
background-color:yellow;
}
</style>

<p>This is a Red bold Paragraph with a border and background color</p>

</body>
</html>

Try this in our HTML Editor

External CSS

External CSS is used to decorate many HTML pages, Like for designing a website's template we use external CSS, In this, we create a file with .css extension and this file contains CSS code for all page elements.

A CSS file looks like this - style.css

p{
color:red;
font-size:20px;
font-weight:bold;
border: 1px solid blue;
padding: 50px;
background-color:yellow;
}
h1{
color:blue;
}

And this is how it is attached to the HTML page

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<p>This is a Red bold Paragraph with a border and background color</p>
<h1>This is the H1 heading</h1>
</body>
</html>

After this information, you'll be able to understand the basics of CSS and get an idea of using styles with any other framework.

Cheers :) Happy Learning

You might also like:

No comments :
Labels: , , ,

Saturday 8 August 2015

Set ADF Faces Component properties using custom javascript

This post is about using JavaScript in ADF Faces to change default properties , sometimes using JavaScript can make task easier and all scenarios covered in this post are based on very common requirement. One important point is - set clientComponent property of component to true when using JavaScript on that
Why this is important ? (Check what docs say)

whether a client-side component will be generated. A component may be generated whether or not this flag is set, but if client Javascript requires the component object, this must be set to true to guarantee the component's presence. Client component objects that are generated today by default may not be present in the future; setting this flag is the only way to guarantee a component's presence, and clients cannot rely on implicit behavior. However, there is a performance cost to setting this flag, so clients should avoid turning on client components unless absolutely necessary

Read more about clientComponent property - Understanding ADF Faces clientComponent attribute


Set panel group layout properties-


Use this JavaScript function to set panel group layout's layout and other properties

 <!--Function to set panelGroupLayout properties-->
              function changeGroupLayout(evt) {
                  var pgl = AdfPage.PAGE.findComponent('pgl1');
                  pgl.setProperty("layout", "vertical");
                  pgl.setProperty("inlineStyle", "background-color:red");
              }

I have called this function using client listener on a image that is inside my panel group layout

<af:panelGroupLayout id="pgl1" layout="horizontal" clientComponent="true">
                    <af:image source="#{resource['images:5-10.jpg']}" id="i1" inlineStyle="width:250px;height:200px;"/>
                    <af:image source="#{resource['images:13.jpg']}" id="i2" inlineStyle="width:250px;height:200px;">
                        <af:clientListener method="changeGroupLayout" type="dblClick"/>
                    </af:image>
                    <af:image source="#{resource['images:1.jpg']}" id="i3" inlineStyle="width:250px;height:200px;"/>
                </af:panelGroupLayout>

Initially group layout is horizontal-




After executing JavaScript on double click on second image-



Set input component property (inlineStyle, contentStyle, value etc)-


This function is same as previous one , this function sets value in input text , changes it's contentStyle

<!--Function to set af:inputText properties-->
              function changeInputText(evt) {
                  var iText = AdfPage.PAGE.findComponent('it1');
                  iText.setProperty("value", "Ashish Awasthi");
                  iText.setProperty("contentStyle", "background-color:red;color:white;font-weight:bold;");

              }

Called this function on double click event in inputText-

<af:inputText label="Label 1" id="it1" clientComponent="true" unsecure="disabled">
                        <af:clientListener method="changeInputText" type="dblClick"/>
              
                    </af:inputText>


Output is like this-
 on double click inside inputText

In same way we can set disabled property of component . It is a secure property of component , that should not be changed from a client side event normally but if this is a requirement then we have to set disabled in unsecure property of input component. Only disable property is supported as of now
Read more about this property -<af:inputText>


Set panelSplitter width according to browser window width-


This JavaScript function divides af:panelSplitter in equal parts to fit in browser 

 <!--Function to set panel Splitter position-->
              function changePanelSpliterPosition(evt) {
                  var width = window.innerWidth;
                  var ps = AdfPage.PAGE.findComponent('ps1');
                  ps.setProperty("splitterPosition", width / 2);
              }

In same way try setting other properties of different components. Soon i will update this post with some more JavaScript functions and examples

Cheers :)  Happy Learning
You might also like:

1 comment :
Labels: , , , , , , , , ,

Saturday 25 July 2015

ADF Skinning : Change label, content, design and 'Update' button style of af:inputFile

This post is about skinning af:inputFile, see how default inputFile looks on page



See how ADF Skin changes it's appearance :)
Change basic inline style of af:inputFile (background color and design) :

/**Skin Selector to change inline style of af:inputFile**/ 
af|inputFile {
    background-color: Green;
    border-radius: 20px 20px 20px 20px;
    padding: 5px;
}

Output on page-

Change label style of af:inputFile : 


/**Skin Selector to change label style of af:inputFile**/
af|inputFile::label {
  font-weight:bold;
  color:white;
  font-family: cursive;
}

Output on page-





Change content style of af:inputFile (background color, design of content only) : 


/**Skin Selector to change content style of af:inputFile**/
af|inputFile::content {
    color: #ff6363;
    font-weight: bold;
    border-color: #79bc79;
    border-style: solid;
    border-width: thin;
    border-radius: 15px 15px 15px 15px;
    padding: 5px;
    background-color: #d6ffd6;
    font-family: cursive;
}


Output on page-

After selecting a file, update button appears -


On click of update button a popup with af:inputFile appears-



Change update button style of af:inputFile:


/**Skin Selector to change style of update button of af:inputFile**/
af|inputFile af|commandButton {
    color: white;
    font-weight: bold;
    background: #00b55a;
    border-radius: 15px 15px 15px 15px;
    font-family: cursive;
}

/**Skin Selector to change style of update button of af:inputFile in case of hover**/
af|inputFile af|commandButton:hover {
    color: white;
    font-weight: bold;
    background: #940000;
    border-radius: 15px 15px 15px 15px;
    font-family: cursive;
}


Output on page-
On hover-
Cheers :) Happy Learning
o
You might also like:

2 comments :
Labels: , , , , , , , , , , ,

Saturday 27 June 2015

ADF Basics: Using contentStyle and inlineStyle property to change basic styling of component in ADF Faces

Hello All,
Again a post about ADF Basics for beginners
I have seen lots of thread on OTN about changing basic styles of component . for example,

How to change font size of inputText ?
How to change color of inputText/outputText ?
How to change color of link or button ?

and everyone starts creating a css/skin for these minor changes but there is no need of that
Skin should be used for complex styles or you have apply same style to all components of your application

If you will read API docs then you will know this, See what docs says about inlineStyle property-

The CSS styles to use for this component. This is intended for basic style changes; you should use the skinning mechanism if you require any complex style changes. The inlineStyle is a set of CSS styles that are applied to the root DOM element of the component. Be aware that because of browser CSS precedence rules, CSS rendered on a DOM element takes precedence over external stylesheets like the skin file. Therefore skins will not be able to override what you set on this attribute.



Difference between contentStyle and inlineStyle -


contentStyle property used to style content part of component like if you want to change color of inputText or any other input component then you have to specify this in contentStyle property of that component

inlineStyle is about whole component and also available in output (outputText) or collection (table, tree etc) component's property where contentStyle is not there. This can be use to set width, height ,border or color of output components etc.

So this is enough about theory , no one likes theory ;) , Everyone is looking for some code that is ready to use
Let's see some practical usage of both properties -

Change font, color, size(width), padding of input components (af:inputText, af:inputDate, af:selectOneChoice etc)-


 Used this in contentStyle property of components
width:150px;color:white;font-weight:bold;font-size:small;background-color:red;padding:5px;
and check the output


you can also change input text to uppercase , lowercase, Initcap using contentStyle property, just use any of this -
text-transform:uppercase; // To change in uppercase
text-transform:lowercase; //To change in lowercase
text-transform:capitalize; //To change in initcap

Change properties of output components , color of link/button -

Output components doesn't have contentStyle property as there is not content part in component , here we make use of inlineStyle property
See what happens on applying same style in outputText and link using inlineStyle


It looks good :) , but same style doesn't work for button because button has multiple root element (we can only change width, color of text and font of button but background color and other styling can not be changed using inlineStyle property)
For more detail about button skinning check - Customize af:button (font, shape, size, color etc) using skinning -Oracle ADF (12.1.3)

Change data collection components (af:table, af:treeTable,etc) height, width -


just write in inlineStyle property like this
width:600px;height:200px;background-color:lightyellow;color:red;
background color will be applied on empty area of table and color will be applicable on column header and EmptyText
Remember to set table's height using inlineStyle ensure that autoHeightRows should be set to -1


In same way we can change color of columns too, see i have used different background colors (set background-color:colorName; in inlineStyle of af:column) for columns and it looks like this


Now it's your turn , try more combination on different components. you can do a lot using contentStyle and inlineStyle property. Remember all these changes can be done using skin also but if have some minor changes then why use skin , when framework provides these wonderful properties

Cheers :) Happy Learning
You might also like:

2 comments :
Labels: , , , , , , , , , , , , ,

Tuesday 4 March 2014

Showing white-spaces properly in ADF table column- 11g & 12c

Hello All,
This posts talks about a requirement of showing white-spaces before any text/number in an af:table
Suppose i have , form and table of a ViewObject on page

Case 1- both table and form are editable , in this case you can see that white spaces are properly visible in both form and table

but normally in applications we have a read-only table and editable form so in this case you can see that white-spaces are not visible in table

But sometimes we need to show spaces in table same as in form so to do this select that field and go to property inspector and select component




Now set it's contentStyle (for input component as- af:inputText) or inlineStyle (for display component as- af:outputText)- white-space:pre;




now run your page and see-

 Cheers :-)


You might also like:

No comments :
Labels: , , , , , , , ,
Subscribe to: Posts ( Atom )