In my last post I showed how to easily add slider functionality using JQuery. In this post I will showcase some of the options that slider provides with a Temperature Converter. This is how it will work: the slider represents temperature measured in Celsius units and ranges between 0 and 100. As the user drags the slider, we will display the temperature equivalent in Fahrenheit.
Lets start by registering a basic slider:
<script type="text/javascript">
$(function()
{
$("#slider").slider();
});
</script>
Since the slider converts temperatures in the range 0 celsius and 100 celsius, modify the slider definition to include the range:
$("#slider").slider({
min: 0,
max: 100,
step: 1
});
The next step is to add two span tags to display the chosen temperature and the temperature in Fahrenheit:
Temperature in Celsius: <span id="celsius">0</span>
Temperature in Fahrenheit: <span id="fahrenheit"></span>
Finally all we need to do would be to captrue the slide event so that we can update the span tags:
$("#slider").slider({
min: 0,
max: 100,
step: 1,
slide: handleSlide
});
The handleSlide is a javascript function that looks like this:
function handleSlide(event, ui)
{
// Update the celsius span
$("#celsius").html(ui.value);
// Compute the fahrenheit equivalent
var fTemp = (1.8 * ui.value) + 32;
// Just display the last two digits of the temp
$("#fahrenheit").html(fTemp.toFixed(2));
}
Here is a working demo
Balaji JQuery, Solutions Log
Here are five easy steps to add slider functionality to your web applications:
Step 1: Go to JQuery UI site and create a custom download. To keep things simple, select “No Theme”.under theme section and deselect all but UI Core and Slider checkboxes. Hit Download and unzip the downloaded file.
Step 2: Copy the jquery-1.3.2.min.js and “jquery-ui-1.7.2.custom.min.js” files into your project. These files should be under the js folder. Include the js files in your html/jsp page.
Step 3: Add the following styles to the page:
I am using the slider bar and slider handle images from YUI
Step 4: Add a DIV for the slider in the HTML.
Step 5: Initialize the slider in the document ready function:
That’s it. You can find a demo of this example here.
Balaji Getting Started, JQuery, Solutions Log JQuery, Slider, UI
Today, I ran into a really cool eclipse plugin called Mousefeed. Once installed, this plugin will popup a reminder with shortcut information every time a button or a menu item is clicked using mouse.
I find this a great way to quickly learn Eclipse shortcuts and becoming productive with the IDE.
Balaji Solutions Log
When you create a MyEclipse Web Project with Maven capabilities, the generated directory structure does not match the “standard” Maven Web Project structure. I find this little annoying and here is what I did to change the directory structure:
- Under “src” folder, create two folders main and test. Underneath each folder create two folders java and resources
- Go to project properties and under Java Build Path, first remove “src” folder from being a source folder. Make java and resources folders source folders
- Create webapp folder underneath src/main. Create WEB-INF and classes folders under webapp. Move the web.xml under WebRoot/WEB-INF to webapp/WEB-INF folder
- In the .mymetadata file located in the project root folder (use Navigator view to get to the file in MyEclipse), change the attribute webrootdir’s value to /src/main/webapp
- In the .classpath file, change the classpathentry of kind “output” from “WebRoot/WEB-INF/classes” to “src/main/webapp/WEB-INF/classes”
- Delete the WebRoot directory and restart MyEclipse
The original pom.xml generated as part of the Maven4MyEclipse Web Project has several entries (sourcedirectory, resource directory e.t.c.) to reflect MyEclipse Web project directory structure. These entries can be safely deleted. Once this is done, the new project can be used to hot-deploy the war file. And yes, dependencies declared as “test” will not end up in the lib directory of the hot-deployed war file.
Balaji Maven, Maven4MyEclipse, MyEclipse, Solutions Log Maven4MyEclipse
In a recent project, I was doing some integration testing against database using DBUnit and JUnit. I was dealing with large datasets and as the tests grew, testing became painfully slow. Culprit: I had JUnit update the database with data for every test.
The data access layer for this project had lots of complex queries but the methods I was testing had two distinct behaviors: methods that read data from the database and methods that wrote data to the database. This simple observation made me realize that I can cut down the testing time by
– Grouping tests in to “read” and “write” groups
– Refreshing database and run ALL the tests in the “read” group (even better run them parallely)
– Refreshing database before running each and every test in the “write” group
Since JUnit does not provide a way to implement the above idea, I tried TestNG. Here is a simple java code of what I ended up doing:
public class RepositoryImplTest {
private void setupDataBase() {
// DBUnit code to refresh data
}
@BeforeClass(groups={"database.read"}, alwaysRun=false)
public void setupForRead() {
setupDataBase();
}
@BeforeMethod(groups={"database.write"}, alwaysRun=false)
public void setupForWrite() {
setupDataBase();
}
@Test(groups="database.read")
public void findAllXXX() {
}
@Test(groups="database.read")
public void findByXXX() {
}
@Test(groups="database.write")
public void updateXXX() {
}
@Test(groups="database.write")
public void removeXXX() {
}
@Test(groups="database.write")
public void createXXX() {
}
}
Here is the sample testng.xml file for the above code:
Balaji Solutions Log TestNG
Problem: Accessing MBeans in WebLogic versions 8.1 SP5 and after results in
javax.naming.NoPermissionException: User <anonymous> does not have permission on weblogic.management.home to perform lookup operation.
Solution: A quick fix to this problem is to enable anonymous admin lookup in WebLogic server. In WebLogic 10, this option is available under Security tab of the domain.
Balaji Solutions Log
Here is a small tip for eclipse users: running eclipse with -clean option once in a while can improve its startup time.
The clean option removes any cached data stored by eclipse runtime and forces cache reinitialization.
Balaji Solutions Log
