Advanced Components in Java Integrating UPC Code in Java Advanced Components

Advanced Components use none none generation tointegrate none with none Visal Basic .NET This file conta none none ins a significant number of styles, but those related to BeanEditForm have t-beaneditor in their name, and those related to Grid contain t-data-grid. Let"s say we want to change the background of BeanEditForm to white, the surrounding border to green and give more space to the labels. Admittedly, I am not an expert in CSS, but it is not actually difficult to figure out what exactly should be changed.

These are the two style definitions we shall want to tweak:. DIV.t-beanedito r { display: block; background: #ffc; border: 2px solid silver; padding: 2px; font-family: "Trebuchet MS", Arial, sans-serif; } DIV.t-beaneditor LABEL { width: 10%; display: block; float: left; text-align: right; clear: left; padding-right: 3px; }.

The first of th none none em defines the appearance of the form in general, the second the appearance of the labels used for the fields in the form. It is easy to guess that the first definition will allow us to change, most significantly, the background, the border and the font of the form, while the second allows us to change the space given to the labels (currently only 10% of the width of the page). But where do we put our own style definitions It will be convenient to have a directory for all the assets of our web application, let"s name it appropriately, styles.

It should be created at the root of the web application, on the same level where page templates are placed. To create it in NetBeans, right click on the Web Pages folder inside the project structure. Select New.

File/Folder , t hen Other in Categories and Folder in File Types. Click on Next, give the new folder a name, and then click on Finish. Now right click on the new styles folder and again select New.

File Folder . C none none hoose Other for Categories, Empty File for File Types, click on Next and name the new file something like styles.css.

In Eclipse, the sequence of actions will be similar, but the new styles folder should be added to the WebContent folder in the project structure.. [ 148 ]. 5 . Now we can put the aforementioned style definitions into styles.css, and change them as required. Let"s try something like this:.

DIV.t-beanedito none none r { display: block; background: white; border: 2px solid green; padding: 2px; font-family: "Trebuchet MS", Arial, sans-serif; } DIV.t-beaneditor LABEL { width: 150px; display: block; float: left; text-align: right; clear: left; padding-right: 3px; }.

In fact, it sho uld be enough to leave only the highlighted lines here as the other details were already specified in the default style sheet. We can also influence the positioning of the Save button:. input.t-beanedi none none tor-submit { position: relative; left: 150px; }. However, to see the changes, we need to make the new stylesheet available to the web page. Tapestry can inject an asset, be it a stylesheet or an image, into the page class when we ask it to do that, so let"s add to the AddCelebrity page class to the following lines of code:. @Inject @Path(" none none context:styles/styles.css") private Asset styles; public Asset getStyles() { return styles; } [ 149 ]. Advanced Components Finally, provid none none e in the page template a link to the stylesheet:. <head> &l t;title>Celebrity Collector: Adding New Celebrity</title> <link rel="stylesheet" href="${styles}" type="text/css"/> </head>. If you run the none none application now, you will notice a significant difference in the form"s appearance:. You can continu e experimenting from here with styles on your own, using the default.css file and the source code of the rendered page (where you can see which styles are used for what) as your starting point. But let me show you one more very useful component.

. FCKEditor Component Quite often, we might want to give the users of our application an opportunity not only to enter a message, but also to format it similarly to how they would do this in a familiar word processor. There are JavaScript-enabled rich text editors available for this purpose, the most famous of them is perhaps FCKEditor (http://www.fckeditor.

net/), but integrating such an editor into a web application might require additional knowledge and effort.. [ 150 ].
Copyright © . All rights reserved.