Creating a view for HelloWorld Gadget

To create a view for HelloWorld gadget

1. Select the UI Development perspective in Designer.

2. In Solutions view, expand User Interfaces, right-click onMyPortletAppProject project.

3. Open the view.xhtml file located under MyPortletAppProject > gadgets > HelloWord > views.

4. The view.xhtml file of the new HelloWorld gadget will contain only the basic HTML header as shown below.

<html>
<h3> HelloWorld Gadget</h3>
</html>

5. Add content to the view as shown below.

<html>
<h3> HelloWorld Gadget</h3>
<div>
Hello World!
</div>
</html>

6. To style the text in the gadget, add a class as shown below.

<html>
<h3> HelloWorld Gadget</h3>
<div class="hello-world">
Hello World!
</div>
</html>

7. To add styling to the css file:

a. Expand the styles directory.

b. Double click on gadget.scss.

c. Add the following to gadget.scss.

.hello-world{
font-weight:bold;
color:#ff0000;}