Business Console 10.7 | webMethods Business Console Documentation | Developing Gadgets for Business Console | Getting Started | Creating your First HelloWorld Gadget | Creating a view for HelloWorld Gadget
 
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;}