Posts Tagged ‘firebug’

This is a quick tip on how to convert a plain looking XPages File Download control into a Twitter Bootstrap style Table.

Everyone should know by now that the latest XPages Extension Library (2 versions ago actually) includes the Twitter Bootstrap framework. While is this brilliant, the reality is that many of us already have existing designs where Twitter Bootstrap is manually included. This means that XPages controls used in these designs look plain when compared to adding bootstrap-styled HTML.

A good example is the File Download Control below. I’ve added this control to my XPages app that has Twitter Bootstrap manually configured, but the control is not affected by this framework:

If you view the HTML source of the File Download Control in Firebug, you’ll see it’s just a table with row and column tags. This is good news, because Twitter Bootstrap’s table designs follow the same pattern, which means that by just adding 2 Bootstrap classes to the control, you change look of it to:

To achieve this, all you have to do is add the “table” and “table-hover” class to the File Download Control. See example below:

Hi all. So the other day Dojo 1.8 in DDE9 was giving me a bit of grief. Thanks to a neat feature in Notes/Domino 9 I managed to find out why it was complaining.

So the Dojo Library that gets loaded for your XPages Application is minified. This means that when you receive a Dojo error and want to check what it’s moaning about, it’s nearly impossible due to all the Dojo JS code been compressed to 1 line. See below:

Notice that line 15 contains all the Dojo Code in the dojo.js File. Thanks to DDE9, there’s a different way that really helps. Do the following:

1. In DDE9, open up your Application’s XSP Properties, which you will find under “Application Configuration“.

2. Navigate to the Persistance Tab.

3. Select the “Use uncompressed resource files (CSS & Dojo)“.

4. Rebuild your Application.

If you refresh your XPage in let’s say Firefox, you should now see the following in Firebug:

Hi everyone. Here’s a second post that was published by Johan Meyer, Ukuvuma’s senior Microsoft Developer.

Enjoy

John.

From Johan Meyer at Ukuvuma Solutions

Okay, this is a nice short tutorial where I will show you the following:

How to create a print button on a web page.

Use Firebug (Firefox), Developer Tools(IE) or any other developer tools available to identify what controls needs to be hidden or showed before the page gets printed.

Show you what code is needed for jQuery or Dojo.

1. How to create a print button on a web page.
First off you need to create a Print button. Now normally when I create an image as a button on a web page I will use CSS for the style and a <div> for the button.

So first add a <div></div> tag to your Page and give it a class name, for this example I will be using “printButton” as the class name.
In your HTML file add this div:

<body> <div class="printButton"> </div> </body>

Now that you have your div you need to create the Stylesheet that will style our print button. Add a CSS file to your project and add the following to it. The dot before printButton means that this style is applicable to the printButton Class. If the printButton had a # before it would look for the div’s ID.

.printButton {

background-image: url(“printButton.jpg”);

background-repeat: no-repeat;

cursor: pointer;

cursor: hand;

height: 20px;

width: 20px;

padding: 5px;

}

This style will change your div however you want it. The first two lines will show your image without repeating it. Then we use two cursors, the first one works for IE and the second for Firefox (this is the code that will show the little hand when you hover over the image). Then we set the fixed width of the div and the padding to make it look a bit nicer.

The image above shows how the button should look by now. To create an actual print button we need to add the Javascript print command. Add the following to your printButton div.

The onclick event fires a javascript function called printDocument(). Inside this function we call a JavaScript function that calls the browsers print class. This will print the document but not always as the user would want it to print.

2. Use Firebug to enhanced the nor window.print JavaScript function

For now I’m not going to go into depth of how firebug works but I will post on how to use it and all about what I know of firebug in one of my future posts.

Use Firebug and look through the website that you want to print and identify what controls you want to hide before printing, or what controls you want to modify in size before printing.

If you have a layout that looks like this, it is likely that you only want the content part of this layout. So identify the controls by ID or by class and write them down.

The sections that we will want to hide are: LeftSide, Header, Footer and RightSide.

3. JQuery and Dojo code

Now that you know what controls you don’t want to show, you need to hide them before calling the printing function and show them again after printing.

In the printDocument function add the following code for jQuery:

<script type=”text/javascript” language=”javascript”>

function printDocument() {

jQuery(“.LeftSide”).hide();

jQuery(“.Header”).hide();

jQuery(“.Footer”).hide();

jQuery(“.RightSide”).hide();

window.print();

jQuery(“.LeftSide”).show();

jQuery(“.Header”).show();

jQuery(“.Footer”).show();

jQuery(“.RightSide”).show();

}

</script>

And this if you want to use Dojo:

<script type=”text/javascript” language=”javascript”>

function printDocument() {

dojo.query(“.LeftSide”).style(“display”, “none”);

dojo.query(“.Header”).style(“display”, “none”);

dojo.query(“.Footer”).style(“display”, “none”);

dojo.query(“.RightSide”).style(“display”, “none”);

window.print();

dojo.query(“.LeftSide”).style(“display”, “block”);

dojo.query(“.Header”).style(“display”, “block”);

dojo.query(“.Footer”).style(“display”, “block”);

dojo.query(“.RightSide”).style(“display”, “block”);

}

</script>

If you need to call some of the controls on the ID instead of Class, you can change the jQuery to “#Header” and the dojo you need to remover the string with the dot and add dojo.byId(“Header”) instead.

You can manipulate the page as you like, just return everything back to normal after the user has printed or redirect them to a new page.

Hi everyone. There are a couple of awesome posts that were published by Johan Meyer, Ukuvuma’s senior Microsoft Developer. I thought it best to re-blog some of his posts that I feel would add a lot of value to those who follow this particular blog.

Enjoy

John.

From Johan Meyer at Ukuvuma Solutions

I found a nifty plugin for Firefox that enables intelli-sense in the Firebug Console for certain Javascript Frameworks.

To enable intelli-sense for Dojo, jQuery and Javascript, install the following plugin for Firefox. This will enable the intelli-sense in Firebug’s Console Window.

Hi Everyone. Here’s a quick post that I’m sure will make all the difference in your Web Dev Life.

There is a Browser plug-in called YSlow. You can install it on Firefox, Chrome, Safari, Opera and more. I’m going to use the Firefox plug-in for this example.

NOTE: For Firefox, you need to install Firebug to use this plug-in, as it’s an extension to Firebug.

Once you’ve installed the Firebug and YSlow plug-in, and restarted your Browser, do the following:

1. Open your Website. In my example I’m using my XPages Showcase for this example.

2. Push F12 on your keyboard. This will open the Firebug Window at the bottom of the Browser.

3. Click on the YSlow Tab. You’ll see an introduction Page, and a button at the bottom that says “Run Test”. This takes about 2-5 seconds to run.

4. Once completed, YSlow returns a set of results. You’ll get an overall Grade with a Performance score. (Please don’t judge me for getting a C. YSlow’s moaning at me for not optimizing CSS and JS files, but there’s a reason for that…)

5. If you take a look at the 3rd Red Arrow on the Image, you’ll see it’s pointing to the Ruleset List. This is pretty awesome, because you can set the rules and benchmark for how your site should be measured. There is a YSlow Add-On called Web Metrics Framework, which is a ruleset that measures your Website according to Google’s Standards.

6. If you go into each of the sections that’s returned….e.g. Content…..you’ll get a second set of Tabs that Score you according to individual operations….See image below.

7. YSlow also comes with quite a bit of useful Hints, Tips and supporting documentation.

This add-on is easy to navigate, and very very useful. I hope it helps. Thanks Yahoo.