Implementation of keyboard

[Arunprasanth]

Do we have any sample application which shows the implementation of keyboard in bbc/tal ? I have tried it using the below code

var myVirtualKeyBoard = new Keyboard("keyboards", 13,2, "abcdefghijklmnopqrstuvwxyz", false, true);
               myVirtualKeyBoard.setActiveChildKey('A')
  this.appendChildWidget(myVirtualKeyBoard);

But this is not showing a keyboard , instead it shows 13*2(column *row) number of buttons in the screen. I couldn't get any column/row design , all the data are coming as rows. Can someone help me on this issue ? Please share if anybody has a sample for the same

[tsadler1988]

You're defining your keys in lower case, but then using upper case to reference them (myVirtualKeyBoard.setActiveChildKey('A')). Looking at the implementation, this is case sensitive, so I'd suggest you try fixing that and see if it resolves your issue.

[Arunprasanth]

@tsadler1988 Thanks for your replay. I have tried to change the code based on your comment but nothing got changed. Still it is showing letters in row by row.

 var myVirtualKeyBoard = new Keyboard("keyboards", 13, 2, "ABCDEFGHIJKLMNOPQRSTUVWXYZ", false, true);
               myVirtualKeyBoard.setActiveChildKey('A')
 this.appendChildWidget(myVirtualKeyBoard);

I have attached a screenshot below.

[tsadler1988]

@Arunprasanth can you share the DOM structure? It should look something like this:

And then inside the row:

[Arunprasanth]

Hi , Thanks for your response.

My dom tree looks like below

And you can find my code on https://github.com/Arunprasanth/bbc-tal-sample

Clicking on the above like doesn't work it seems, Please copy paste the link in the browser for grtting the source code.

[tsadler1988]

@Arunprasanth your DOM looks correct, so I can only assume that this is a CSS issue.

It looks like you're using the TAL example app as a base. I believe there are styles around the .listitem CSS class that might be causing it to be displayed incorrectly, but it could easily be some other CSS causing your issue.

[Arunprasanth]

@tsadler1988 Thank you for pointing out the issue. I will look into it.

[Arunprasanth]

@tsadler1988 Hi, I couldn't find any class named keyboard in the base.css file in the given sample application. Could you please share a keyboard style class if you have ?

[kukulaka]

We have deprecated this project and there are no plans for active development going forward.

Please see the deprecation notice.