Test the app in my Ipad

[aebki]

Hi Dave,

In what in copied before, i had not the graphic named "rectangle"...

Now yes, and when i press in one text field to write, this rectangle is appearing quite in the middle of the screen...
But everything is hidden and i can't see what i wrote in the middle and bottom text fields...

Regards.

[dave.kilroy]

aebki - OK if you are trying to just get your fields moving without any of the stuff from the lesson then remove all of the code from the lesson except for the keyboardactivated and keyboarddeactivated handlers, and inside those handlers remove the lesson code and replace with references to the keyboard-up and keyboard-down locations for your 4 fields.

Also, debug and step-through-your code - it's the best way to learn!

Kind regards

Dave

[aebki]

Hi Dave,

Thanks for the answer...

I didn't understand what you mean with this sentence...
"and inside those handlers remove the lesson code and replace with references to the keyboard-up and keyboard-down locations for your 4 fields."

I think you explained well... but it is me who is not able to understand what i have to do...
Can you try to explain me with other words, please?

Regards.

[dave.kilroy]

hi aebki - I've just double-checked the example code from the lesson still works on LC 7.0.1 - and it works just fine

Maybe it would help if I included the code here along with some comments on what I think each piece of it is doing?

First of all, place all of the code in the script of a card - ideally a new card so that you can see it working without interfering with any existing controls or handlers.

Lets have a look at the declaration of script-local variable first:

Code: Select all

local sinputId

Declaring this variable outside any handlers and at the top of the script ensures that its scope covers all handlers in the card's script

Now let's see what the openCard handler is doing:

Code: Select all

on opencard
   if environment() = "mobile" then
      mobileControlCreate "input"
      put the result into sinputID
      mobileControlSet sinputID, "rect", "38,726,748,916"
      mobileControlSet sinputID, "visible", "true"
      mobileControlSet sinputID, "opaque", "true"
   end if
end opencard

On opening the card, first of all a check is made to see if the app is running on a mobile device, it then goes on to create a control of 'input' type (i.e. a native text input control), then the ID of the newly created control is put into our script-local variable (sinputID), then some attributes of the new control are set (its rect, its visibility and whether it is opaque or not). Please note that this control will only be created when the app is running on a mobile device and will not be there when you run the app in the IDE!

Now lets have a look at the handlers that control what happens when the user taps inside and outside the text input control:

Code: Select all

on keyboardActivated
   mobileControlSet sinputID, "rect", "36,320,746,510"
   set the rect of graphic "rectangle" to "36,320,746,510"
end keyboardActivated

on keyboardDeactivated
   mobileControlSet sinputID, "rect", "38,726,748,916"
   set the rect of graphic "rectangle" to "38,726,748,916"
end keyboardDeactivated

When a user taps inside a native input control iOS automatically opens the on-screen keyboard, LiveCode 'listens' for this event and when it detects it happening sends a 'keyboardActivated' message to the card that contains the control - and that is why we put the 'keyboardActivated' handler in the card script, to capture the message that LiveCode sends. Inside the handler that only gets called when the user taps inside the control, we can get the identity of the control we want to move out of the way of the advancing on-screen keyboard from our script-local variable (sinputID), and using this variable we are able to change the 'rect' (short for rectangle or the area on the screen it occupies) to a new 'rect' - and at the same time move the 'rect' of the graphic (which really only serves as a visual clue to make it easier for us to understand what is going on) to be the same as the newly moved control.

On an iOS mobile device if a user taps outside a native input control the operating system automatically closes the on-screen keyboard. Once again LiveCode 'listens' for this and this time sends a 'keyboardDeactivated' message to the card. We again have a handler to catch this message which is called the 'keyboardDeactivated' handler. Once again we use the sinputID variable to identify the control we want to move, which again we do by changing its 'rect', and we again move the graphic to match the input control. After this handler has run you should see that the control and the graphic are back where they started from.

I hope all of the above makes sense - do some further reading and get in touch if it still isn't clear

Dave

[aebki]

Hi Dave,

Thanks for your answer and this complete explanation...


So i made as you told me and i created one new card.
In this new card i created only one graphic named "rectangle" and one text field named "Field". And i placed this field quite in the right bottom of the card...

Then i copied your code:

Code: Select all

local sinputId

on opencard
if environment() = "mobile" then
mobileControlCreate "input"
put the result into sinputID
mobileControlSet sinputID, "rect", "38,726,748,916"
mobileControlSet sinputID, "visible", "true"
mobileControlSet sinputID, "opaque", "true"
end if
end opencard

on keyboardActivated
mobileControlSet sinputID, "rect", "120,220,546,310"
set the rect of graphic "rectangle" to "120,220,546,310"
end keyboardActivated

on keyboardDeactivated
mobileControlSet sinputID, "rect", "38,726,748,916"
set the rect of graphic "rectangle" to "38,726,748,916"
end keyboardDeactivated

i only changed the values in the on keyboardActivated...So i put this values "120,220,546,310" because with the others the half of the graphic was under the keyboard in my Ipad...

Once i pressed on the text field, the keyboard appeared and also the graphic as is attached in the first image...
Then i wrote "hello"...And during i was writing this word in the screen was as before...So like the first image i attached...

And once i finished to write, i pressed outside of the text field and the keyboard disappeared and i could see what i wrote in the text field ( as the second image i attached )...Because till this moment it was hidden by the keyboard...

So i am wondering why is not working as it should...

Regards.

[dave.kilroy]

Hi aebki - don't include a LiveCode field.

A text file with 'traversal on' (or focusable) set to true will interfere by trying to capture the cursor. You do not need a text file if you are using a native input control. the code you have attempts to move the native input control and graphic and doesn't address the field.

OR - you could remove the native input control and in the code refer to a LiveCode field.

Dave

[dave.kilroy]

Also, your 'rect' measurements for when the keyboard is up and down seem to change the shape of the rect and it's horizontal position - surely you only need to move the native input control move up and down while keeping everything else constant?

Code: Select all

on keyboardActivated
mobileControlSet sinputID, "rect", "38,226,748,416"
set the rect of graphic "rectangle" to "38,226,748,416"
end keyboardActivated

on keyboardDeactivated
mobileControlSet sinputID, "rect", "38,726,748,916"
set the rect of graphic "rectangle" to "38,726,748,916"
end keyboardDeactivated

Good luck!

Kind regards

Dave

PS: if things are still not working for you post your stack for us to have a look...

[aebki]

Hi Dave,

I am a little bit lost...
But i think it is because of me as i didn't explain well what i wanted from the beginning...

So, i will show you my card...All the objects i have there and i will also put you my code.
But first i will try to explain you what i am trying to do and what i have...

So, in this card i need the user will fill some data. And this data is recollected in 10 different text fields.
And as Klaus told me i made one fake 'text field with rounded corners"...So i have 10 transparent text fields above 10 'rounded corner images'.
And i have one invisible DataGrid that is filled with different data (depending on the button that the user pressed before to enter in this card).
And in the bottom i have also two buttons. in the left side,one to add the information the user filled and in the right side one button to go back.

And i told you that i think that i didn't explain well what i wanted from my first post, because you told me that i don't need to include a LiveCode field...
And in fact my problem is that in the last four text fields i can't see what is written because of the keyboard...
But i need these text fields...

So this all the code i have in my card:

Code: Select all

local sDatabaseID
local tDatabasePath, tDatabaseID
global ruta

local sinputId

on opencard
if environment() = "mobile" then
mobileControlCreate "input"
put the result into sinputID
mobileControlSet sinputID, "rect", "38,726,748,916"
mobileControlSet sinputID, "visible", "true"
mobileControlSet sinputID, "opaque", "true"
end if
end opencard

on keyboardActivated
mobileControlSet sinputID, "rect", "38,226,748,416"
set the rect of graphic "rectangle" to "38,226,748,416"
end keyboardActivated

on keyboardDeactivated
mobileControlSet sinputID, "rect", "38,726,748,916"
set the rect of graphic "rectangle" to "38,726,748,916"
end keyboardDeactivated


on ocultarBotonesAnadir numeroOcultar, nombreDeTabla
   put numeroOcultar into i
   put 35000 into identificadorImagen
   add i to identificadorImagen
   repeat while i< 11
      put "TxtAnadir" & nombreDeTabla & i into nombreTxtAnadir
      set the visible of field nombreTxtAnadir of card "card2" to false 
      set the visible of image id identificadorImagen to false
      add 1 to i
      add 1 to identificadorImagen
      end repeat
end ocultarBotonesAnadir

on mostrarBotonesAnadir numeroMostrar, nombreDeTabla 
   put 1 into i
   put 35000 into identificadorImagen
   repeat while i<=numeroMostrar
      add 1 to identificadorImagen
      put "TxtAnadir" & nombreDeTabla & i into nombreTxtAnadir
      set the visible of field nombreTxtAnadir of card "card2" to true 
      set the visible of image id identificadorImagen to true
      add 1 to i
   end repeat
end mostrarBotonesAnadir


on MostrarParrilla DGNombre, nombreTab
   
   set the dgData of group DGNombre of card "card1" to empty
   databaseConnect
   
   
   if tDatabaseID is an integer then
      
      put "SELECT * FROM "  & nombreTab into query
      put revQueryDatabase( tDatabaseID, query ) into theCursor
      if theCursor is an integer then
         ConvertSQLCursorToArray theCursor, theDataGridArray
         put the result into theError
         
         if theError is empty then
            set the dgData of group DGNombre of card "card1" to theDataGridArray
         end if
         revCloseCursor theCursor
      end if
      
      revCloseDatabase tDatabaseID
   else
      answer "Error connecting to the database:" && tDatabaseID & "."
   end if
   
end MostrarParrilla

command ConvertSQLCursorToArray pCursor, @pOutArrayA
   local i
   local theFields
   local theError
   
   put revDatabaseColumnNames(pCursor) into theFields
   if theFields begins with "revdberr," then
      put item 2 to -1 of theFields into theError
   end if
   
   if theError is empty then
      put 0 into i
      repeat until revQueryIsAtEnd(pCursor)
         add 1 to i
         repeat for each item theField in theFields
            put revDatabaseColumnNamed(pCursor, theField) into pOutArrayA[i][ theField ]
         end repeat
         
         revMoveToNextRecord pCursor
      end repeat
   end if
   
   return theError
end ConvertSQLCursorToArray

on mostrarDataGrid valorMostrar, nombreDataGrid, nombreCarta
   
   if valorMostrar is 0 then
      set the vis of grp nombreDataGrid of card nombreCarta to false
   else
      set the vis of grp nombreDataGrid of card nombreCarta to true
   end if
end mostrarDataGrid

command databaseConnect
   put revOpenDatabase ("sqlite",ruta,,,,) into tDatabaseID
end databaseConnect

And i attached one screenshot of my card too.


So, since i began this thread i was looking for one solution to show what is written in the bottom text fields as they are hidden by the keyboard when i try to fill the data that i have to recollect with these 10 text fields.

I hope i expressed myself better...

Regards.

[dave.kilroy]

hi aebki

I suggest you try getting things working with one field first on a separate card first to get things straight in your head - and once you are confident with that move back to your current card.

I'll have a look at your code/posting now to see if I can find any obvious errors ... but I suggest you get things working with one field first!

Dave

[dave.kilroy]

Hi aebki

Well I thought I would code up a version of the lesson stack to show use of LiveCode fields instead of native fields and post here - but my iOS simulator has stopped opening the on-screen keyboard for some reason - and I'm away from my office and don't have a cable to attach to an iOS device...

So for the moment I'll post some code that SHOULD work fine on a device (although I haven't been able to test it yet) that moves a single group of field and graphic like Klaus described to you. You will need a group called "grpPrettyFld1" which contains a field and a graphic:

Code: Select all

local sFldH,sFldV

on opencard
   set the loc of grp "grpPrettyFld1" to (round(the width of me * 0.5)) & comma & (round(the height of me * 0.75))
   put item 1 of the loc of grp "grpPrettyFld1" into sFldH
   put item 2 of the loc of grp "grpPrettyFld1" into sFldV
end opencard

on keyboardActivated
   set the loc of grp "grpPrettyFld1" to sFldH & comma & (sFldV - 250)
end keyboardActivated

on keyboardDeactivated
   set the loc of grp "grpPrettyFld1" to sFldH & comma & sFldV
end keyboardDeactivated

See how it is different to your script? in the opencard handler I reference the group to be moved and set and store it's location, and in the keyboardactivated and keyboarddeactivated handlers I move the group up and down. In your opencard, keyboardactivated and keyboarddeactivated handlers you reference the text input control and ignore your own fields completely!

But like I say I haven't been able to test this code on a device yet ... even so, you could try it in your test card (the one which does not contain all the other fields you are trying to move). And if you get it working there you will have learned enough to apply to your card with multiple fields...

If I get a chance tonight or tomorrow I'll test the code myself on a device and tell you how I got on

Kind regards

Dave

[aebki]

Hi Dave,

Sorry for my late answer... I was quite busy today and i didn't enter in the forum till now...

And once again thanks for your answer...

I tested it with the card where i had only one text field and it is working well!!!

Now i will have to adapt my code, because i had not the image and the text field in one group...So they were independents objects.

But for the rest, it is doing what i wanted!!!

Regards.

[dave.kilroy]

hi aebki

Great news! I was just about to test the code on my iPad when I saw your reply (won't bother now as it works for you)

Now all you have to do is to manage multiple fields instead of one (actually you'll find it easier to deal with multiple groups, each containing a single field and graphic) ... come back here again if you get stuck

Kind regards

Dave

[aebki]

Hi Dave,

Yes tomorrow i will try to make it with different fields...

I will tell you if i will manage...

Regards.

[aebki]

Hi,

During these last two days i was changing in different cards of my app where i had apply what you gave me on Thursday or Friday.
So now i managed to put in the middle of the screen the different text field, who were hidden by the keyboard, before to fill them and they are working well...

And i also made one group for each image and text field, because till now they were separated.

I had activated the option 'tab on return' in each text field and all the text field had consecutive layers...So when i finished to filled one text field and pressing 'enter' the focus was associated to the next text field...And we can say that was working well!

But now, since i added the groups, is not working well...
Because now i have one layer for the text field, one layer for the image and one layer for the group.

In the image i attached some days ago ( with the green background ), i only made groups for the text fields who are 'hidden by the keyboard' and for the i let the image and text fields independents.
So for the first text fields is passing well the 'tab on return', but when i have to pass from one independent text field to one included in one group i would like that with the enter i press it will change to the next text field, but also moving the group to the middle of the screen.

I used the method 'on enterKey' and 'on focusIn'...

This is the code i have in the text field: (in this case in the text field number 9)

Code: Select all

on enterKey
   focus on grp "grpTxt10"
end enterKey

This is what i have in the code of the group: (for the text field number 10)

Code: Select all

on focusIn
   put "grpTxt10" into TxtSel
   put item 1 of the loc of grp "grpTxt10" into sFldH
   put item 2 of the loc of grp "grpTxt10" into sFldV
end focusIn

I don't know if explained well the problem or not...I hope so!!!

How should i resolve the 'pass between the text field and the text field that belongs to one group' and in the same time moving the loc of the group?

Regatds.

[dave.kilroy]

hi aebki

If I understand you correctly you want to be able to hit enter/return/tab key on the iPad and 'go' to the next field inside its group? I'm presuming you may sometimes have a bluetooth keyboard or similar attached to the iPad as I don't think the virtual keyboard has a tab key...

You very nearly had the code right to focus on the next field, all you were missing was "on fld 1 of" - see below:

Code: Select all

on returninfield
   goNextTarget
end returninfield

on tabinfield
   goNextTarget
end tabinfield

on enterinfield
   goNextTarget
end enterinfield

on goNextTarget
   focus on fld 1 of grp "grpTxt10"
end goNextTarget

Dave