Thank you in advance. Download jmaki JAR files with all dependencies. Artifact jmaki-resources-jmaki-spry-jsf-lib Group jmaki Version 1. A download is not possible! Please choose another version. Artifact jmaki-resources-jmaki-spry-widgets Group jmaki Version 1. Artifact jmaki-resources-jmaki-flickr-jsf-lib Group jmaki Version 1. Artifact jmaki-resources-jmaki-flickr-widgets Group jmaki Version 1. Artifact jmaki-resources-jmaki-scriptaculous-jsf-lib Group jmaki Version 1. Artifact jmaki-resources-jmaki-scriptaculous-widgets Group jmaki Version 1.
Artifact jmaki-resources-jmaki-jsf-lib Group jmaki Version 1. It refers to the directory that contains the widget's resource files. The IDE also initializes the widget with a default value using the value attribute. You can use the value attribute to reference this data. For example, the default value that NetBeans gives the combobox widget is:. The widget tag requires you to set a different set of attributes depending on which widget the tag represents.
The best way to determine what attributes a widget expects is to look at the widget's widget. You can use the customizer that pops up to edit the values of the attributes.
Refers to a component that provides extra services for the widget. You can use this attribute to reference a component that serves data to the widget. For the plotCity example, you also need to add id attributes to the combobox widget tags so that you can refer to the widgets from your event handlers, as explained in Handling Widget Events. You'll name the combobox that holds the states thisState , and you'll name the combobox that holds the cities thisCity :.
Project jMaki gives you a lot of flexibility with respect to how you populate your widgets with data. Following are the three basic techniques for loading data into your widget:. Use an expression language EL expression expression from the tag's value attribute to reference the data from a bean. This section shows you how to use an EL expression from the value attribute to access data from a bean, just as you would with any other JSP tag.
Whichever method you choose, you need to be sure that you pass the data in JSON format to the widget because this is what all the jMaki widgets expect. The thisState and thisCity combobox widgets on the index. The following code snippet shows the jsp:useBean and widget tags from this page:.
As the preceding markup shows, the data comes from the getStates method of StateBean. The useBean tag makes StateBean available to the index. It's important to remember that the EL expressions can only be used to initialize the widgets with data. The event handler, as described in the next section, uses Ajax to send the selected state value to the StateBean object's getNewCities method, by way of a servlet.
The getNewCities method gets the list of cities for the selected state from the properties file and loads the cities into a JSON array, as shown in the following code:. Loading Data Into a Widget in the plotCity Application gives step-by-step instructions for implementing plotCity to populate its widgets with data.
In this system, producers publish messages to topics and consumers receive the messages from topics to which they have subscribed. This system makes it easy for your application to respond to widget events and to get two widgets to interact by listening for each other's events.
This section describes how you can get widgets to publish and subscribe to a topic so that your application can respond to a widget event. To make event-handling easier, jMaki provides default topics for the most common widget events. Most often, though, you will need to create your own topics, as the plotCity example does. Usually, you go through the following steps to handle a widget event using the publish and subscribe system:.
Add a publish attribute to a widget tag and set it to a topic string so that the widget will publish its current value to that topic when it experiences an event.
Write a handler in glue. When the handler is called, it retrieves the value from the topic, performs some task with the value, and publishes the result of the task to a different topic. Add a subscribe attribute to another widget tag and set the subscribe attribute to the topic to which the handler publishes the result of its task.
When the user selects a state from the thisState combobox, the thisCity combobox repopulates with the list of cities located in that state.
When the user selects a city from the thisCity combobox, the city is plotted on the map. The following event handler in the glue. Because the handler subscribes to the topic, it executes when the widget publishes a new value to the topic.
The handler does the following:. Uses the jmaki. If you have only one combobox in a page, you do not have to create a parent topic for the purpose of updating values in the combobox. This example needs a parent topic because it has two comboboxes. Handling Events in the plotCity Application gives the step-by-step instructions for implementing event handling in plotCity. One characteristic of an Ajax-based client is that it cannot make calls to URLs outside of its domain, which means that it cannot access services located on another server.
Project jMaki provides a proxy, called the XmlHttpProxy client, that communicates with external services on a widget's behalf. To access an external service, a widget uses an XmlHttpRequest object to access the service through the XmlHttpProxy client. Project jMaki already includes some code that allows you to access the Yahoo Geocoder service. This service takes a location, such as a city, and returns the coordinates for that location. The code jMaki provides for widgets to use this service includes the configuration of the service in the centralized xhp.
The configuration includes the URL to the service, a reference to the API key to use for Yahoo services and widgets, a reference to a stylesheet that styles the data returned from the service, and a default location.
To obtain coordinates for a location from the Yahoo Geocoder service from your glue code, you create a string URL out of these elements:. The string,? The first thing to do is to get the location so that you can provide it to the service. A combobox widget always publishes its selected value to the global onSelect topic and to the onSelect sub-topic of any developer-defined parent topic.
Gets the current state from thisState and appends it to the city to construct the location argument. Therefore, when new coordinates are posted to the topic, the Google map widget plots the city located at the coordinates. With this task, you will add the thisState and thisCity combobox widgets and the Google map widget to the page.
Add the ID, thisState to the first Combobox widget and the ID, thisCity to the second combobox widget, so that the page now looks like the following:. Add a paragraph tag and the text, Select a city: right before the second combobox widget. You will see the three widgets on the page in the browser, but the combobox widgets are populated with the default set of data, and nothing happens when you select values from them.
With the next task, you'll load the appropriate data into the combobox widgets. This section details the tasks required to populate a widget with data, using the comboboxes included in the plotCity application as examples. These tasks are:. With this task, you are creating a properties file that contains a set of states and a set of cities for each state. This file acts as the database for the application for simplicity's sake. By performing this task, you are creating the bean that holds the state and city data that you can use with the comboboxes.
Add an init method after the constructor that creates a ResourceBundle object from the cities. Add the following getStates method to the class. It loads a JSON array with the list of state names that you initialized in step Add the following getCities method to the class.
Add the following getNewCities method to the class. It loads a JSON array with the list of city names for the selected state:. Right-click the editor pane and select Fix Imports from the pop-up menu. The IDE will import the packages the class needs. Replace the value attribute of the thisState tag with an EL expression that points to the states property of StateBean :. Replace the value element of the thisCity tag with an EL expression that points to the cities property of StateBean.
Your browser should open and show the two comboboxes populated with the data your created. With the next set of tasks, you will add the event-handling mechanism so that you can select a city and plot it on the map. After this task is complete, the plotCity application will be able to populate the thisCity combobox widget with new data when the user selects a state from the thisState widget.
While performing the previous task, you added an Ajax call to the Service servlet to obtain the values from StateBean.
You'll create the servlet with this task. Delete everything inside the servlet class so that all that the file contains are the package statement, the import statements automatically generated, and the following empty servlet class:.
This method gets the message parameter from the request, passes it to getNewCities , and passes the resulting list of cities to the response.
Now you can select a state and see the thisCity combobox populate with the names of cities located in that state. With the next task, you'll make it so the application will plot a city on the map when you select the city. Previous : Index. Getting Started with Project jMaki This tutorial helps you get started using Project jMaki with the GlassFish TM v3 Technology Preview 2 Application Server by covering the following topics: Obtaining Required Software Creating a jMaki Application Adding Data to a Widget Handling Events Accessing External Services Introduction to Project jMaki Project jMaki is a lightweight framework for creating web applications using built-in templates, a model for creating and using Ajax-enabled widgets, and a set of services to tie the widgets together and enable them to communicate with external services.
In addition to the set of widgets, jMaki also provides the following features: A way to easily customize a widget, such as set the value of its attributes and load your own data into the widget Mechanisms for responding to widget events, getting widgets to interact, and allowing widgets access to external services. Within the IDE, select Tools from the menu bar. Select Plugins. Select the Settings tab. Select the Available Plugins pane. Click Install. Click Add Server. Enter a name for the server in the Name field and click Next.
Click Browse to select the installation location for the server. Select the checkbox to indicate you've read the license and click Download V3 Now. The plotCity Example This section describes the plotCity example and tells you how to run it. What the plotCity Example Does With the plotCity example, you can plot a city on a map by performing the following tasks: Select a state from a Dojo combobox widget, thereby populating another Dojo combobox widget with a list of cities located in that state.
0コメント