Jennifer's Weblog

« Creating an Ajax-ena... | Main | More Fun with jMaki:... »

Thursday January 04, 2007

Fun with jMaki: Using the Yahoo Geocoder service with the Dojo Combobox

Those of you who've looked at jMaki have probably seen the document on how to use the XMLHttpProxy to access services from widgets (See https://ajax.dev.java.net/xmlhttpproxy.html). In the document, Greg talks about the Yahoo Geocoder service. He also created a demo that uses the service with a Yahoo map widget.

I wanted to see how easy it would be to use the Geocoder service with the Dojo combobox widget included with jMaki. It turns out that there wasn't much to it.

My example allows a user to select a city from the combobox to see it plotted on the map, as shown in this figure:

Screenshot of application plotting Helsinki

To build this application, I first created my data file, europeCities.js, which contains a list of European cities in a JavaScript file:

[
	["Berlin","Berlin"],
	["Helsinki","Helsinki"],
	["London","London"],
	["Madrid","Madrid"],
	["Paris","Paris"],
	["Rome","Rome"]
]

Next, I created the JSP page that includes the ajax tags that represent the combobox and the map:

<a:ajax id="cb1" name="dojo.combobox" service="europeCities.js" />
<p>
<a:ajax id="map001" 
           name="yahoo.map" 
           args="{zoom:10, 
              centerLat:37.39316, 
              centerLon:-121.947333700, 
              width:350}" />

The cb1 ajax tag represents the combobox. It gets its data from the europeCities.js file. The map001 ajax tag represents the yahoo map and is set to a default set of coordinates.

To get the city that the user selects to be plotted on the map, I first needed a topic listener that takes the value of that city and uses dojo.io.bind to do the following:

Create a URL to the service using the selected value.
Publish the coordinates that are returned from the service to the /yahoo/geocoder topic.

Here is the listener code, which is located in the web/resources/glue.js file in the jmaki-core distribution:

jmaki.addGlueListener({
       topic: "/dojo/combobox/updateMap", 
       action: "call", 
       target: {object:"jmaki.listeners.ComboboxGeocoder",
       functionName:"updateMapHandler"}});

jmaki.listeners.ComboboxGeocoder = {
	
     updateMapHandler  : function(args) {
       var location = encodeURIComponent("location="+ args.value);
       dojo.io.bind({
           url: "xhp?key=yahoogeocoder&urlparams=" + location,
           method: "get",
           mimetype: "text/json",
           load : function(type, data) {
               jmaki.publish("/yahoo/geocoder", data.coordinates);
           }
       });
   }
}

The /yahoo/geocoder topic listener is already included with the jMaki distribution. This listener function plots the coordinates on the map.

To get my new listener to be called when a new value is selected, I needed to add code to dojo combobox widget's component.js file that publishes the selected value and other arguments on the widget tag to the updateMap topic when the combobox experiences a value change:

   this.onChange = function(value){
       if (value == '') return;
       jmaki.publish("/dojo/combobox/updateMap", {wargs: wargs, value: value});
   }

That's all there is to it.

You can download this application from the jMaki file download page by selecting comboboxGeocoder.war from the list of files.

If you are using a proxy server to server your web requests, you need to specify the proxyHost and proxyPort context parameters in the web.xml file:

  <context-param>
  <param-name>proxyHost</param-name>
  <param-value>myProxy.com</param-value>
  </context-param>
  <context-param>
  <param-name>proxyPort</param-name>
  <param-value>8080</param-value>
  </context-param>

To edit the web.xml file, unpack the WAR file and then re-package it with the jar command after editing the file.

Thanks to Greg Murray for helping me debug the listener code.

Posted at 12:48AM Jan 04, 2007 by jenniferb in Sun | Comments[31]

Comments:

Very nice Jennifer. I'm hoping as we write more of the jMaki Glue (listener code) this type of application will become easier ;-)

A note for PHP users:

The URL for the Dojo Bind:

dojo.io.bind({
           url: "xhp?key=yahoogeocoder&urlparams=" + location,
           method: "get",
           mimetype: "text/json",
           load : function(type, data) {
               jmaki.publish("/yahoo/geocoder", data.coordinates);
           }
       });

would be:

dojo.io.bind({
           url: "XmlHttpProxy.php?key=yahoogeocoder&urlparams=" + location,
           method: "get",
           mimetype: "text/json",
           load : function(type, data) {
               jmaki.publish("/yahoo/geocoder", data.coordinates);
           }
       });

Once again great work Jennifer!

Posted by Greg Murray on January 04, 2007 at 01:09 AM PST #

Hi Jeniffer,

I am so happy to get my first glue code running - after following this blog -
I did have to change 2 things to make this work -
i had to add (this may be straight forward for some, but i had to try a couple of things b4 getting it right)
1. jmaki.namespace("jmaki.listeners"); before the insert in to glue.js
2. the dojo.io.bind.. needed to be updated as djd43.io.bind so that it worked.. this indicates that probably there is a better mechanism using jmaki. that i should be using here - i don't know it..

The question I have is:
1. Instead of using the 'updateMap' channel custom created for this purpose, which is fired for every 'onChange' for any combobox could it be possible to use 'onSelect' from the combobox?
- I tried:
jmaki.subscribe("/dojo/combobox/onSelect", function(args){
jmaki.log("Why doesn't this print?");
// your function for updateMaphandler
}
);
It somehow did not seem to get picked up
2. How would i use the onChange on this specific combobox handler only- rather than any combox in my project?

- I am using netbeans IDE with jMaki 0.9.7.1 [NetBeans Plugin (v1.6.9.9.9.6) ]release..

regards,
rasane

Posted by rasane on August 20, 2007 at 12:42 PM PDT #

HI Jennifer!!

I need a help from you. I have been using jMaki since past two weeks and am very fasinated by the way jMaki does its job but I found really difficult to configure events(publish and subscribe mechanism). Like for example for my application I need a tree control ( say dojo or yahoo) which should be in sidebar preferably left so that when i click a node or leaf a JSP page should appear in right hand pane.

Looking at the functionality, I used onclick function to call an event and wrote a javascript function in jsp itself then i wrote dojo.io.bind programatic glue handler in glue.js but this doent work....So please do help me to solve this issue and run this tree.

tree.jsp:
-----------
{ id: 'foo', label : 'Amair', onclick : {url : 'foo'}},

glue.js
--------
// map topics ending with /onClick to the handler
jmaki.subscribe("onClick", function(args) {
jmaki.log("glue.js : onClick request from: " + args.widgetId);

});

Thanks in Advance
Amair Ahmed

Posted by Amair on October 09, 2007 at 12:05 AM PDT #

wow

Posted by 71.79.29.182 on March 18, 2008 at 05:22 PM PDT #

Hello, please tell me how to update a Mysql database from an editable dojo table.
Thank you,
Ioana.

Posted by Ioana Iacob on May 13, 2008 at 07:19 AM PDT #

<a href="http://xn--b-ieura9ioe7dye.269g.net/">ロデオボーイ</a> <a href="http://nikonicodouga.269g.net/">ニコニコ動画</a> <a href="http://xn--b-w7t2cxc0b0866i.seesaa.net/">駅すぱあと</a> <a href="http://souka.codiego.com/">草花木果（そうかもっか）の化粧品/メイク落としの口コミ案内！</a> <a href="http://kyon.codiego.com/auto/">石田塾</a> <a href="http://www.codiego.com/sesamin/">セサミンEプラス</a>

Posted by ken on June 02, 2008 at 08:35 PM PDT #

[URL=http://www.codiego.com/sesamin/]セサミンEプラス[/URL] [URL=http://www.codiego.com/onsen/auto/]温泉旅館・ホテルのエリア別ガイド.com[/URL] [URL=http://www.codiego.com/auto/]グルメ割引クーポン券のエリア別検索ガイド.JP[/URL] [URL=http://rizo.codiego.com/]リゾートバイト[/URL] [URL=http://elbruz.kind7.biz/]自動車保険[/URL] [URL=http://pastel.aodiego.net/]ヒルズコレクション[/URL] [URL=http://scalp-d.aodiego.net/]スカルプＤシャンプー[/URL] [URL=http://hillz.aodiego.net/]ヒルズダイエット[/URL]

Posted by ken on June 02, 2008 at 08:36 PM PDT #

[http://www.chinagate.jp/re-sikku/ レーシック手術]
[http://www.chinagate.jp/goldcard/ ゴールドカード比較]
[http://www.chinagate.jp/gasorinn/ ガソリンカード]
[http://www.getqnx.com/ レーシック失敗例]
[http://www.mediterraneo-net.com/ レーシック　失敗]
[http://www.syouhikarori.com/ 筋トレの正しい方法]
[http://www.redcarnelian.com/resi/ レーシック手術失敗例]
[http://www.ireneblea.com/kinnsi/ 錦糸眼科の評判・口コミ・うわさ]
[http://www.sostips.com/kinnsi/ 錦糸眼科]
[http://www.wolfpackden.com/ 基礎代謝]
[http://www.2007senkyo.jp/pc/re-sikku/ レーシック失敗]
[http://www.2007senkyo.jp/pc/fx/ FX比較]
[http://www.2007senkyo.jp/pc/gold/ ゴールドカード]
[http://dental-job.jp/re-sikku/ レーシック]
[http://dental-job.jp/goldcard/ ゴールドカード]

Posted by mikkyo on November 13, 2008 at 10:32 PM PST #

風俗ブログを書く。日本では当初ブログという言葉はなじみの薄いものであり、すでに世界最大級の電子掲示板集合体｢2ちゃんねる｣などが存在し、これらがコミュニケーションサイトとして浸透していた。2002年ごろ、ブログツールの日本語化などにより、ブログが急速に広まっていった。
今現在の状況としてブログは市民権を得ており、最近では人気タレントや政治家、その他著名人などによるブログも増加し、風俗店などにまで普及している。また、日本のブログは投稿数が多いのが特徴であり、アメリカのテクノラティが発表した調査結果によると、2006年第4四半期は世界のブログ投稿数の37％が日本語によるもので、事実上の世界標準語である英語や、母語人口で世界最多の中国語を抑えての1位であった。
http://ikebukuro-g.straysheep.biz
池袋グルメ
http://ikebukuro.straysheep.biz
池袋
http://yoshiwara.oiran.org
江戸風俗
http://the.ninja-web.net
忍者風俗
http://budo.uijin.com
武道風俗
http://fuzoku.edo-jidai.com
江戸文化風俗
http://blogs.yahoo.co.jp/ooedofuzoku
風俗雑記
http://ohanasi.nomaki.jp
昔話の文化風俗

Posted by zyandaman on December 16, 2008 at 03:17 AM PST #

<a href="http://www.link4seo.com">SEO</a> (or come grinding engine optimization) is to rewrite the web page to appear higher in search results for a particular search engine. Its technology. Also known as search engine optimization. The English "Search Engine Optimization" to take initial measures which are known as the <a href="http://www.link4seo.com">SEO</a>. Search engine optimization has become a target, Google often. The foreign (especially American) by the high market share in Google. In Japan, Yahoo! For many users of the search, Yahoo! Is focused search measures.

Posted by seo on January 28, 2009 at 06:55 PM PST #

http://www.gunow.net
http://www.vangsof.com
http://www.voview.org
http://www.wampipirik.com
http://www.waroom.org
http://www.totown.org
http://www.abduet.com
http://www.pustudy.com
http://www.webnot.org
http://www.cufire.com
http://www.wfolk.net
http://www.fufire.com
http://www.ceratin.net
http://www.srisen.com
http://www.nabody.com
http://www.kenmind.com
http://www.byobizz.org
http://www.strykertrauma.biz
http://www.bchour.com
http://www.vofolk.com
http://www.vostaff.com
http://www.chartbc.com
http://www.hupoint.com
http://www.om-shiv.com
http://www.simgle.org
http://www.ikyo9.com
http://www.fisz.info
http://www.pudepot.com
http://www.hippc.net
http://www.gprekyba.com
http://www.exdale.com
http://www.joicity.com
http://www.ignightseattle.com
http://www.enmage.com
http://www.tjzhuyou.com
http://www.futsubay.com
http://www.consfry.com
http://www.wupoint.com
http://www.XJXUELIAN.COM
http://www.wuquick.com
http://www.xiday.org
http://www.kocable.net
http://www.lifairy.com
http://www.enjoywd.com
http://www.bctroop.com
http://www.popeo.net
http://www.kennkoou.com
http://www.kodisk.org

Posted by yy on January 28, 2009 at 06:56 PM PST #

http://www.yndryl.com

Posted by dsh on March 04, 2009 at 11:44 PM PST #

http://www.thewowgold.net/

Posted by cartvip on March 23, 2009 at 10:26 PM PDT #

http://www.yndryl.com

Posted by jfdk on March 29, 2009 at 11:55 PM PDT #

Hi Jeniffer,

This is a very simple but complete example for showing how JMaki works. Great job!

Although I did have a little problem to get the example works at the first place, maybe because I am using much newer version of JMaki, I did found the plotCity example your post on jMaki file download page works pretty well. Then, I update the code based on plotCity and get everything figured out. I think the approach used in plotCity is much better and simpler.

One thing I found is that you cannot set the height of Google map. If height value is specified, the map will not show. I hope this can be fixed in the next release of JMaki.

Thanks a lot!

tao

Posted by tao on April 07, 2009 at 11:53 AM PDT #

We at accountmmo.com are dedicated in offering you a full range of <a href=http://www.accountmmo.com>WoW account</a> and gold selling services. We only <a href=http://blogs.albawaba.com/wowaccount>sell wow account</a> so you can feel totally safe buying from us as we only sell accounts with full original owner details and history.Simply Choose US or EU account from our many options below and receive your character within 15 minutes!<a href=http://wowaccount.xtrablog.dk>Buy wow account</a> here without any worries. Best service and safest delivery for customers are what we can promise to you. Our knowledge of the online gaming industry, secure network, 24/7 support, and quick transactions have earned us a reputation as the MMORPG account specialists. We will provide our customers lower price than any other retailer that you can compare on the whole game account market. So, buy wow account is your good choice! Believe us, believe yourself!

Posted by wow account on May 11, 2009 at 12:49 AM PDT #

http://spectator.org/archives/2008/12/19/payback-time#comment_55499

Posted by tanghong on May 13, 2009 at 08:52 PM PDT #

great post sir..
thanks for sharing. really helped a lot here.
--------------------------------------------------
<a href="http://www.uggfree.co.uk">Ugg Boots</a> | <a href="http://www.iugg.co.uk">Uggs</a>

Posted by wallace smith on May 18, 2009 at 06:18 PM PDT #

<A href="http://www.silver-jewelry-wholesaler.com">Silver Jewelry</A>|
<A href="http://www.china-jewelry-supplier.com">Jewelry Supplier</A>
<A href="http://www.bead-jewelry-wholesale.com">Bead Jewelry</A>

Posted by silver jewelry on May 22, 2009 at 01:37 AM PDT #

[url=http://fx00000001.blog96.fc2.com/]外国為替証拠金取引（FX）ニュース[/url]
[url=http://blog.livedoor.jp/b08dayo/]為替でドン！[/url]
[url=http://0000000b01.blog96.fc2.com/]スワップでポン♪FXやってみるかね。[/url]
[url=http://00000000b03.blog.shinobi.jp/]FX大好き少年[/url]
[url=http://blog.livedoor.jp/b10dayo/]為替王信者とFX友の会[/url]
[url=http://00000000b04.blog.shinobi.jp/]外国為替証拠金取引マニア[/url]
[url=http://blog.livedoor.jp/b09dayo/]FXで天国と地獄[/url]
[url=http://blog.goo.ne.jp/b11dayo/]FX情報商材で勝ち組に・・・[/url]
[url=http://blog.goo.ne.jp/b12dayo/]FXのスワップで暮せるものか？[/url]
[url=http://blog.goo.ne.jp/b13dayo/]FXを極める⇒億万長者[/url]
[url=http://0000000b02.blog96.fc2.com/]外国為替証拠金取引（FX）をがっつり極める[/url]
[url=http://00000000b05.blog.shinobi.jp/]コツコツFXでいきましょう[/url]
[url=http://00000000b06.jugem.jp/]外国為替証拠金は恐ろしい[/url]
[url=http://b14dayo.seesaa.net/]FXで上流階級[/url]
[url=http://b15dayo.seesaa.net/]FXでセレブポン[/url]
[url=http://00000000b07.jugem.jp/]FXでスワップ生活[/url]
[url=http://b16dayo.seesaa.net/]FXでなんぼのもんじゃい[/url]
[url=http://somethingmb04.seesaa.net/]なんでも適当日記[/url]
[url=http://somethingmb05.seesaa.net/]ひとりごとブログ[/url]

[url=http://kininaru28.269g.net/]気になるもの日記[/url]
[url=http://wadaimb29.blog.shinobi.jp/]ちょっとびっくりな話題[/url]
[url=http://blogcity.jp/page.asp?idx=10001495]最新の話題を追ってみよう[/url]
[url=http://blogcity.jp/page.asp?idx=10001499]お気に入りブログを紹介[/url]
[url=http://wadai008.osakazine.net/]最近の気になることを…[/url]
[url=http://wadaikatarumb28.blog123.fc2.com/]最近の話題を語る[/url]
[url=http://kininarusupponmb22.269g.net/]気になったものすっぽんブログ[/url]
[url=http://blog.livedoor.jp/mb30/?blog_id=2580370]話題で気になるもの[/url]
[url=http://wadai06.jugem.jp/]気になるトピックなどなど[/url]
[url=http://blue.ap.teacup.com/wwwadai07/]話題ネタ[/url]
[url=http://mb27.dtiblog.com/]話題ネタなど[/url]
[url=http://mb21.dtiblog.com/]気になったものを書くdeviの日記[/url]
[url=http://wwwadai06.seesaa.net/]気になるトピック[/url]
[url=http://some2525.osakazine.net/]なんでも話題にしましょうブログ[/url]
[url=http://kininarukininarumb11.blogspot.com/]気になっている話題とネタ[/url]
[url=http://whatgeinou12.blog.shinobi.jp/]おもしろブログサイトかき集め[/url]

[url=http://b20dayo.blog98.fc2.com/]FXスワップ命[/url]
[url=http://b22dayo.blog98.fc2.com/]FX・為替ニュース[/url]
[url=http://b28dayo.seesaa.net/]FXでスワップウマー[/url]
[url=http://blog.livedoor.jp/b29dayo/]FX初心者脱却までの道のり[/url]
[url=http://blog.livedoor.jp/b30dayo/]FX為替差益三昧[/url]
[url=http://b21dayo.blog98.fc2.com/]FXでOL脱却♪[/url]
[url=http://b24dayo.blog.shinobi.jp/]FXで勝ち組に[/url]
[url=http://b25dayo.blog.shinobi.jp/]FXで旦那の収入を抜いてやる♪[/url]
[url=http://b23dayo.blog.shinobi.jp/]FX業者マニア[/url]
[url=http://wwwadai01.seesaa.net/]気になる～.net[/url]
[url=http://star.ap.teacup.com/wwwadai02/]最近の話題をつかもう[/url]
[url=http://geinou2323.blog108.fc2.com/]いろいろ話題ＮＥＷＳ[/url]
[url=http://blog.livedoor.jp/b26dayo/]FXなら必勝♪[/url]
[url=http://b27dayo.seesaa.net/]FXで億万長者[/url]
[url=http://wadai04.blog.shinobi.jp/]話題の庭[/url]
[url=http://blog.livedoor.jp/mb25/?blog_id=2390093]最近気になるもの[/url]
[url=http://www.f-hime.com/001/]中洲風俗[/url]
[url=http://www.f-hime.com/tenga/]オナホール[/url]
[url=http://www.platinum-venus.jp/]福岡デリヘル[/url]
[url=http://www.moshimo.com/bargain/322/326413]ヤーマン[/url]

Posted by 0406 on June 01, 2009 at 09:08 PM PDT #

Posted by sad on June 07, 2009 at 08:48 AM PDT #

Posted by fds on June 07, 2009 at 08:48 AM PDT #

Christian Louboutin shoes is acclaimed in the most exclusive circles.
His shoes are worn on some of the world's most glamorous feet –
Princess Caroline of Monaco, Madonna, Diane von Furstenberg, Catherine Deneuve and countless Hollywood A-liters.

Do those red soles and straight heels smite you too?

Welcome to www.louboutinsales.com

Posted by David on June 16, 2009 at 10:59 PM PDT #

Sounds good! Thanks for sharing it!
<a href="http://www.louboutinsales.com"> Christian Louboutin shoes</a> is acclaimed in the most exclusive circles
Try treating yourself on <a href="http://www.louboutinsales.com"> our store </a> to see if any items interest you.

Posted by David on June 16, 2009 at 11:01 PM PDT #

http://www.ehokens.net/orix/

Posted by rw on June 21, 2009 at 07:01 PM PDT #

http://norishio.info/
http://chapatu.info/
http://atui.info/

Posted by noris on September 21, 2009 at 10:01 PM PDT #

http://www.skycloud.cn

Posted by 数据采集 on October 25, 2009 at 08:43 PM PDT #

不動産　不動産投資　ホームページ制作　札幌不動産　仙台不動産　大阪不動産　横浜不動産　名古屋不動産　広島不動産　福岡不動産　京都不動産　埼玉不動産　千葉不動産　静岡不動産　神戸不動産　浜松不動産　堺市不動産　川崎市不動産　相模原市不動産　姫路不動産　岡山不動産　明石不動産　鹿児島不動産　北九州市不動産　熊本不動産　北海道不動産　青森不動産　岩手不動産　宮城　不動産　秋田不動産　山形不動産　福島　不動産　群馬　不動産　栃木　不動産　茨城　不動産　山梨不動産　新潟不動産　長野不動産　富山不動産　石川不動産　福井不動産　愛知不動産　岐阜不動産三重不動産　兵庫不動産　滋賀不動産　奈良不動産　和歌山不動産　鳥取不動産　島根不動産　山口不動産　徳島不動産　香川不動産　愛媛不動産　高知　不動産　佐賀不動産　長崎不動産　熊本　不動産　大分　不動産　宮崎　不動産　沖縄　不動産　岡山　不動産

Posted by kiki on October 25, 2009 at 09:43 PM PDT #