|
|
Featured White Papers
- Why choose an Open Source BPM?
- 10 FAQs on Business Process Management
- Best Practices for Getting Started with BPM
- Free Your Devs From The Pain Of Java Redeploys
- Increase Velocity 40% by Using JRebel
- What Developers Want: The End of Application Redeploys
- Developer Productivity Report: Java Tools, Tech, Devs, and Data
- Coding with JRebel: Java Forever Changed
- Utilizing Fast Testing to Transform Java Development
- Do You Really Get Classloaders?
- Pragmatic Continuous Delivery with Jenkins, Nexus, and LiveRebel
- Your Next Java Web App: Less XML, No Long Restarts, Fewer Hassles
- Coding with JRebel, Java Forever Changed
- 2012 Developer Productivity Report: Java Tools, Tech, Devs, and Data
http://blogs.sun.com/arungupta
TOTD #20: How to create a new jMaki widget ?
Submitted by Arun Gupta on Wed, 12/12/2007 - 15:26.This TOTD explains how to create a new jMaki
widget and make it available in the NetBeans
palette.
In order to create a jMaki widget, it's important to understand the
jMaki Widget
Model.
Basically, "component.htm", "component.js" and an optional "component.css"
together make a jMaki widget.
Here are the files for a Hello World widget that takes an argument,
concatenates it with the string "Hello" and displays the result on the page.
component.htm
<div id="${uuid}" class="hello"></div>
component.js
jmaki.namespace("jmaki.widgets.hello");<br>
<br>
jmaki.widgets.hello.Widget = function(wargs) {<br>
var hello = document.getElementById(wargs.uuid);<br>
hello.innerHTML = "Hello " + wargs.args.name;<br>
}component.css
.hello {<br>
font-size: 22px;color: red;<br>
}
The following files are required if you like to package your component as a
reusable widget library in the NetBeans IDE:
hello.jsp
<a:widget name="hello" args="{name: 'Duke'}"
/>Bundle.properties (top-level)
jMaki.Library.Name=jMaki Hello Widget
Bundle.properties (templates)
NAME_templates.hello=Hello<br>
HINT_templates.hello=<html>Hello</html>widget.json
{<br>
'name': 'Hello',<br>
'type': 'custom',<br>
'version': '1.0',<br>
'jMakiVersion': '1.0'<br>
}Package these files together in the following directory structure (choose any zip file name):
Bundle.properties<br>
resources<br>
hello<br>
component.htm<br>
component.js<br>
component.css<br>
widget.json (optional)<br>
templates<br>
hello<br>
hello.jsp<br>
Bundle.properties
And then you zip up these files together, that's it! Now this zip file can be
added to the jMaki palette in the NetBeans IDE
as
shown here. Really simple!
After the widget is added to NetBeans palette, it looks like as shown below:
Now, just like any other jMaki widget, you can drag-and-drop "Hello"
from the jMaki palette in your JSP page and the following code fragment is
generated:
<a:widget name="hello" args="{name: 'Duke'}" />
After the application is deployed, the page is rendered in the browser as shown
below:
Couple of points ...
- Templates for other languages such as Ruby or PHP can be added in the
templatesdirectory. This enables drag-and-drop of your widget
in those languages as well. - It's important to maintain the case sensitivity of the property names in
Bundle.propertiesotherwise they will not be recognized.
Please leave suggestions on other TOTD that you'd like to see. A complete
archive is available here.