Introduction
This article shows how to
create a coach view that contains a simple header and footer. It then shows how
to make the coach view available as a template.
This example creates a coach
view called BlueMix Template CV. BlueMix
Template CV has three areas: a header that contains standard text, a content
area, and a footer that contains some more standard text. To separate the
areas, BlueMix Template CV uses <div> tags.
Implementation
Step 1: Create
a process App name as Coach and Coach
View Sample App and Acronym as CCVSA
then click on Create.
Step 2: Open in
Process Designer and Upload the image for the header background. Click the Add
icon for Files and then select Web File.
Add the image file as a web
file. Similarly upload footer image too.
Step 2: Create
the BlueMix Template CV coach view.
Click the Add icon for User
Interface and then select Coach View. Enter name as BlueMix Template CV.
Step 3: Define
the layout of the BlueMix Template CV
coach view. In the Layout page of the coach view, drop a custom HTML item onto
the layout canvas.
In the properties of the
custom HTML item, add the following HTML code as text that goes in the header:
<html>
<body>
<div
id="header">
<h1
id="header_text">BlueMix Technologies</h1>
</div>
<div
id="content">
This code defines the text
that goes in the header division and opens the main content division.
Drop a content box below the
custom HTML item for the content area. The content box is a placeholder for
content that is defined by coach views and coaches that users create based on
the BlueMix Template CV coach view.
In this case, content placed in the content box fits between the header and
footer in the BlueMix Template CV coach
view.
In the Layout page of the
coach view, drop a custom HTML item onto the layout canvas below the content
box.
In the properties of the
second custom HTML item, add the following HTML code as text that goes in the
footer.
</div>
<div
id="footer">
<h2
id="footer_text">@ BlueMix Technologies</h2>
</div>
</body>
</html>
This code closes the content
division and defines the text that goes in the footer division.
Step 4: In the
Behavior page, define the look of the BlueMix
Template CV coach view by adding the following code as inline CSS:
html{
margin: 0px;
padding:
0px;
border: 0px
none;
outline: 0px
none;
font-size:
100%;
vertical-align: baseline;
}
body {
background:
#F8F8F8;
height:
100%;
margin: 0px
auto;
font-family:
"open_sansregular";
font-size:
13px;
}
#header {
text-align:
center;
background:
url('hearder.png') repeat 50% 0 transparent;
height:
150px;
}
#header_text {
color: #fff;
font-size:
40px;
margin-top:
-7px;
}
h1 {
font-size:
24px;
font-weight:
bold;
border-bottom: 0px solid #bbb;
padding:
40px;
}
#footer {
color: #fff;
text-align:
right;
background:
url('footer.png') repeat 50% 0 transparent;
height:
40px;
}
#footer_text {
color: #fff;
border:
none;
font-size:
15px;
width: 1201px;
padding-top:
10px;
}
#content {
background:
#F8F8F8;
padding:
20px;
min-height:415px;
}
Step 5: To make
the BlueMix Template CV coach view
into a template, in the Overview page select Use as a Template.
Step 6: Save
the BlueMix Template CV coach view.
Step 7: Create
a Client side Human service name as BlueMix
Template HSS. Rename the coach name as
BlueMix Template.
Step 8: Double
click on BlueMix Template coach.
Select BlueMix Template CV as
Template.
Step 9: It will
show the coach design as shown below. Click on run the service to test the
application.
BlueMix Template will display
as shown below. We have implemented UI as a template.
Video
File Name
|
Size
|
Download
|
IBM BPM - Creating a Template using Coach View
|
570 KB
|
0 comments :
Post a Comment