Create Alta UI Responsive Template

Advanced Oracle ADF 12c Course View|Shared Template and Responsive Template
16 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$69.99
List Price:  $99.99
You save:  $30
€68.25
List Price:  €97.50
You save:  €29.25
£57.33
List Price:  £81.90
You save:  £24.57
CA$101.03
List Price:  CA$144.33
You save:  CA$43.30
A$113.86
List Price:  A$162.66
You save:  A$48.80
S$95.99
List Price:  S$137.13
You save:  S$41.14
HK$545.17
List Price:  HK$778.85
You save:  HK$233.68
CHF 64.14
List Price:  CHF 91.63
You save:  CHF 27.49
NOK kr803.19
List Price:  NOK kr1,147.46
You save:  NOK kr344.27
DKK kr509.63
List Price:  DKK kr728.08
You save:  DKK kr218.44
NZ$125.85
List Price:  NZ$179.80
You save:  NZ$53.94
د.إ257.07
List Price:  د.إ367.26
You save:  د.إ110.19
৳8,575.67
List Price:  ৳12,251.49
You save:  ৳3,675.81
₹6,031.36
List Price:  ₹8,616.60
You save:  ₹2,585.23
RM314.71
List Price:  RM449.60
You save:  RM134.89
₦109,053.86
List Price:  ₦155,797.90
You save:  ₦46,744.04
₨19,577.98
List Price:  ₨27,969.74
You save:  ₨8,391.76
฿2,427.96
List Price:  ฿3,468.67
You save:  ฿1,040.70
₺2,477.73
List Price:  ₺3,539.77
You save:  ₺1,062.03
B$428.63
List Price:  B$612.35
You save:  B$183.72
R1,337.78
List Price:  R1,911.19
You save:  R573.41
Лв133.49
List Price:  Лв190.71
You save:  Лв57.22
₩103,174
List Price:  ₩147,397.75
You save:  ₩44,223.75
₪258.06
List Price:  ₪368.67
You save:  ₪110.61
₱4,130.04
List Price:  ₱5,900.31
You save:  ₱1,770.27
¥11,036.37
List Price:  ¥15,766.92
You save:  ¥4,730.55
MX$1,450.05
List Price:  MX$2,071.60
You save:  MX$621.54
QR256.28
List Price:  QR366.14
You save:  QR109.85
P989.40
List Price:  P1,413.49
You save:  P424.09
KSh9,099.75
List Price:  KSh13,000.20
You save:  KSh3,900.45
E£3,534.81
List Price:  E£5,049.95
You save:  E£1,515.13
ብር8,821.25
List Price:  ብር12,602.33
You save:  ብር3,781.07
Kz63,830.88
List Price:  Kz91,190.88
You save:  Kz27,360
CLP$70,650.70
List Price:  CLP$100,933.90
You save:  CLP$30,283.20
CN¥513.21
List Price:  CN¥733.19
You save:  CN¥219.98
RD$4,315.47
List Price:  RD$6,165.22
You save:  RD$1,849.75
DA9,511.73
List Price:  DA13,588.77
You save:  DA4,077.03
FJ$163.76
List Price:  FJ$233.95
You save:  FJ$70.19
Q542.50
List Price:  Q775.04
You save:  Q232.53
GY$14,707.69
List Price:  GY$21,011.89
You save:  GY$6,304.19
ISK kr9,874.27
List Price:  ISK kr14,106.71
You save:  ISK kr4,232.43
DH706.53
List Price:  DH1,009.38
You save:  DH302.84
L1,313.88
List Price:  L1,877.06
You save:  L563.17
ден4,198.78
List Price:  ден5,998.52
You save:  ден1,799.73
MOP$563.73
List Price:  MOP$805.36
You save:  MOP$241.63
N$1,336.06
List Price:  N$1,908.74
You save:  N$572.68
C$2,586.96
List Price:  C$3,695.82
You save:  C$1,108.85
रु9,679.86
List Price:  रु13,828.96
You save:  रु4,149.10
S/264.53
List Price:  S/377.91
You save:  S/113.38
K281.82
List Price:  K402.63
You save:  K120.80
SAR262.72
List Price:  SAR375.34
You save:  SAR112.61
ZK1,941.96
List Price:  ZK2,774.35
You save:  ZK832.38
L339.95
List Price:  L485.67
You save:  L145.71
Kč1,713.36
List Price:  Kč2,447.77
You save:  Kč734.40
Ft28,238.86
List Price:  Ft40,342.96
You save:  Ft12,104.10
SEK kr784.88
List Price:  SEK kr1,121.31
You save:  SEK kr336.42
ARS$72,562.13
List Price:  ARS$103,664.63
You save:  ARS$31,102.50
Bs485.72
List Price:  Bs693.92
You save:  Bs208.19
COP$304,389.79
List Price:  COP$434,861.20
You save:  COP$130,471.40
₡35,484.61
List Price:  ₡50,694.48
You save:  ₡15,209.86
L1,787.81
List Price:  L2,554.12
You save:  L766.31
₲551,987.20
List Price:  ₲788,586.94
You save:  ₲236,599.74
$U3,058.06
List Price:  $U4,368.84
You save:  $U1,310.78
zł290.96
List Price:  zł415.68
You save:  zł124.71
Already have an account? Log In

Transcript

Hello, in this video I will talk about ultra responsive UI responsive it means is a screen should adapt itself depending on the screen size. So, if you open the PDF application from a laptop, so wide screens the content should be displayed by somehow if your ADF application forms a tablet, the content of this change should be changed and that itself when they go on screen size, if it is a mobile and so on is called responsive template and if to the C, there is a predefined responsive template come with G developer. I will explain this and how you can overwrite some attributes from this. So let's now try to create ADF application Okay, so I have created a simple PDF application with in to entity and to view object department and employee. And here we need to create a responsive template which actually with PDF or was the developer tool see by default any PDF application in G developer tool we see it we will use an alto a skid so if you open the thread the config you will find the here's the scan family which is alt version one.

So because of this we can create a responsive template. You have two options you can create a bitch and sis beach can point straightaway with was it If I need to hear reference to any of which template, you can find the responsive template here if you select this jar file, which contains this template will be added to the view controller and the page will directly use this jar file for system. But if you make this way, it will be hard for you to make some customization on this template for example, if you want to change the logo or make something you have to add to make it change in on every page not in central place. So I prefer to create your own low can pitch template, copy the responsive template from the short file how we can do this. So first, you should create your own page template.

So I will create it if pitch template icon I will call it my local pitch, template or responsibility Whatever you want to name it next here, I will copy existing templates. So, I need to copy the responsive template to be local here. So that I will be able to make interchange on this template biggest Nick is fish. So, now we will connect to the shot file and all thing is from this template locally here in your ADF application. This is my local responsive template. So let us now try to create a pitch can call it response pitch.

Pitch and I need to use my local pitch template. If you expand the pitch template you will find here some face it with You can use Heather status app, global links photo center star center and started it it is the most important places which you will use in the content of the page. This is for some other things so we can right here now, so that you will know where actually this visit will go into your component. We can call this header visit here I will call it status, navigation, app nav. Global links. This just to show you we're actually this visit will put the content in the beach footer and this is our main center and started in center would be central to page start in here in the left and the end would be in the right side.

So in the start, I need to add Penny books with departments and in the end I need to add Bennett books for employees and in the center I need to add a new if component which is used in the responsive template to display the content or another sport core. This is bassoon replay with this component. This component it wouldn't be like a dash board panel dashboard which has been improved boxes and each box in boxes will have a different content can graphs can be table information. And the best thing in this component it will rearrange the component inside it depending on the screen width and height, it will automatically update or change and organize the component and sites they are. So this is the responsive template face it I need to show you actually face by face it and the houses component will work perfectly with a responsive template.

It does drag the department here and I will show you how the responsive template will work is the center start in visit once you are resizing the screen. So this is just as a table See if all that said yeah, maybe the movie ends and more tears should be under the books and let's run and see how a beach will looks like okay as you can see here, this is such a bottoming table. Stuart, this is me to the left and this is the dashboard which has some ballot books and as you can see, the component is rearranged the bundle books randomly pitting the width, depending on the content of each of their books. This component would organize this when it books According to the content and size of the screen, let's now try to talk about the face it as you can see here, the globe and links and status is behind each other.

So, if you add any component in the status face it it will appear in this site. So you can add here maybe look at all the login user is the status. Nick is to edit straightaway is a global Linkous so if you add the global links here, some links it should split here maybe contact us about us maybe some some link is site is a user should be here, here will be a navigation which your bottom or your menu should be is a navigation bar here okay. So this is the header face it hit a face it will be this is the header. So it will be the ward which will be beside the logo. To be here to visit this is how you can know we're actually deficit we'll put some components in the page.

So let us now try to resize this page and see how the responsive template will deal with this. Okay, so let us make it start with like this. Here's a movie here you're burning a boxes and this is the Berkman so if you resize the beach, as you can see, Sep component itself will arrange the Bangladesh depending on the size as you can see, see and look at Zimbabwean department as well. If the screen become very small like in mobile, what will happen is the department is jumped to up Xin here we'll add the Bennett boxes and this is MB Louis will be put in the end if you want more And the more you will find, the component will rearrange it, depending on the screen size, you will find it will rearrange the components. So this is called a responsive template. How it will look like.

Now if you want to make some change, like if you want to change the logo, for example to any other things, if you want to increase the width of this thing is you can now deal with this because you have a copy of this template locally. So, let's not try to change this logo is our logo. We can go here and we'll add our image. Okay, we'll just edit here is our logo. Okay Krish you'll find my Lewis here. As a template if you use the straightaway the template was adding your local here if you select a bitch big template, you can override the local intubation itself by point eight in Zulu image boss is local if you select a blank template in rubbish 11 you can override it from the local image of us and here is in the width.

If you want to crease in width, and here is the start with if you want to change the width and start start with at the end which if you want to change it in the big 11 you can do it is available but because of we already copies a better beach template locally, we can make the change here is a beach tip itself. No need to go through each page and select a bundle, big template and change the width of the end or the changes who knows Now we have our own local, we can make any change as we want. So, to change that, to change the logo, let us now change the logo to boy to my logo. So what I will do, I will go here in the local image bus I need to see where it's used. It's used in sis links. As you can see here, there are four links, one will be rendered if the attribute no image was not equal to be null.

If there are no boss in the page is not equal to null it will display this link. But if it is equal to null, it will display this link. This is for the logo. A link is a short description this is for their logo here, here for the Small logo same if the small logo was not equal not and this is will be, if it is equal not. So, what we can do now, if it is null it will display this branding. So, what we can do we can remove this blue and we could add here icon icon equal dummy This is in case of the local image bus equal equal null and it is actually equal equal not same I can do this is a small if the small equal equal not and it will remove this is tight close and I will use my own look let us know try to run and see Okay, so as you can see, the logo now is change it was my logo.

And if you want to increase the width of this you can do it in the template itself, you can find here as you can see here, start with a default value is 170 you can increase it to make me be 250 and in the width should be as well, maybe 250 or three, whatever you want. So here you can have a control in the page itself is a bitch template because you copy it locally so you can control everything otherwise you will make this change In the big level to select is a bundle template and you can update the in the width and the start with so as you can see, now the width on the bottom is increased. So it's also been increased, the logo is changed. So now you can be able to make any customization in the responsive template and as you can see, so it's this will be changed like this, the bottom into is go up you will we will be the winner.

And this is a responsive template how you can use ultra responsive template how you can copy it locally how you can make some change on this template. So because the video will go for another thing, so see you next activity

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.