Previous |
TOC |
Next
1. What will you learn
You will learn how to use embedded HTML and JavaScript including Dojo.
2. Task Description
Create a new XPage in your scrap book database to explore the possibilities of embedded JavaScript and HTML.
3. Detailed Steps
1. Create a new XPage “PlayWithHTML”
2. Switch from the Design to the Source view:
You should see a bare xPage:
Important note: all xPage elements use the namespace xp:, Don't use it for your stuff.
3. You can add any HTML inside the the xp:view and it will be rendered in your page:
This is a HTML headline
Amazing isn't it?
4. xPages renders any markup in computed fields into literal strings. To use controls to actually output HTML you need to disable output-escaping (this is very useful e.g. In views to render custom hyperlinks). Output-escaping is defined in the all properties section of any control.
5. Stuff added to the xPage source or a computed field can include JavaScript or CSS statements. Be aware that they become part of the page body (inside the tags). Try to add this JavaScript:
This will call an additional function once your page has been loaded. The function can be in a library (recommended or elsewhere on the page.
6. When working with client side script (e.g. In Dojo calls) you need to provide the ID of the element. Since xPages is designed to run in various environments where elements can be repeated, the html/DOM it is only generated at rendering time. To access the ID you need to call a server-side function. Inside an xPages event this is easy using the syntax #{id:NameOfYourElement}. However you might want to reference an element outside of an event.
7. Add a new label to the page. Name it FancyLabel. We use it as target for the Demo. In real life applications you will probably do more fancy things there.
8. Add a computed field to the top of the page and add the following code to it. Make sure you set the escape property to false:
var out = '\n';
out
9. Preview in Browser, you should get a prompt and a hello world in red
4. The Result
5. Things To Explore
- Use a view datasource to render a Dojo graphics
6. Further Readings