Virtual Keyboard

General PHP
1

Hi,

I have a virtual keyboard in my application and this keyboard is a jQuery plugin (Mottie Keyboard: https://github.com/Mottie/Keyboard).

I was looking for an extension or widget that does this but I didn’t find any. I would like to know how can I do a Yii Widget from this jQuery plugin (in the simplest way) because I need to use the keyboard in more than one view and I don’t like have to repeat all the jquery include logic.

Thanks, All the suggestions are welcome!

2

Hi nereia,

A good place to start is by reading the Extending Yii guide.

Then you can check some existing widgets from Yii and from some extensions.

I hope it helps!

Post again when you need more information.

3

The simplest way is do not create widget at all.

You can just write some js wrapper function with keyboard setup and then use it everywhere when you need an keyboard.

Something like this:

in myapp.js (you can include this script in your layout, so it will be always accessible):




(function( $ ) {

    $.myKeyboard = {

       add: function(selector) {

           // here the common keyboard configuration code

       }

    }

}) (jQuery);

then in the view:




<?php  

    Yii::app()->clientScript->registerScript('addKeyboard',

        '$.myKeyboard.add("#myDiv");'	

    );

?>

Note I do not say you should not write a widget - this is only a simplest way in my opinion.

4

Thanks, I have already looked the Extending tutorial but it seems to me really complicated for what I want. Actually I did a similar thing to what Seb is proposing me: I have the following code in my view:

[html]

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

&lt;title&gt;Virtual Keyboard - jQuery UI&lt;/title&gt;





&#60;&#33;-- jQuery &amp; jQueryUI + theme --&#62;


&lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; &gt;


&#60;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;


&#60;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;


&#60;script src=&quot;/js/jquery.mousewheel.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;





&#60;&#33;-- keyboard widget css &amp; script --&#62;


&lt;link rel=&quot;stylesheet&quot; href=&quot;css/keyboard.css&quot; type=&quot;text/css&quot; &gt;


&#60;script src=&quot;/js/jquery.keyboard.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;





&#60;&#33;-- keyboard optional extensions --&#62;


&#60;script src=&quot;/js/jquery.keyboard.extension-typing.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;


&#60;script src=&quot;/js/jquery.keyboard.extension-autocomplete.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;





&#60;&#33;-- demo --&#62;


&lt;link href=&quot;css/demo.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; &gt;


&#60;script src=&quot;/js/demo.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;


&#60;script src=&quot;http://mottie.github.com/Jatt/js/jquery.jatt.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;





&#60;&#33;-- theme switcher --&#62;


&#60;script src=&quot;http://jqueryui.com/themeroller/themeswitchertool/&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

</head><body>

<div id="page-wrap">

&lt;div class=&quot;block&quot;&gt;


	&lt;h2&gt;&lt;span class=&quot;tooltip&quot; title=&quot;Click to see code&quot;&gt;QWERTY Text&lt;/span&gt;&lt;/h2&gt;


	&lt;input class=&quot;qwerty&quot; type=&quot;text&quot; placeholder=&quot;Enter something...&quot;&gt;


	&lt;br&gt;


	&lt;div class=&quot;code ui-corner-all&quot; style=&quot;width: 585px; height: 365px;&quot;&gt;


&lt;/div&gt;

[/html]

What I would like to create if it’s possible in a simple way is a method that by calling “keyboard” do this for me (this is why I was thinking in a widget) , or at least a “wrapper” of all js and css functions.