What's the state of native looking widgets?

[tetsuo29]

It seems like for a time mobGui was one way of making native looking widgets on iOS. Now, when you click on "buy" at their website, it just takes you to the LiveCode products page. When I click on "Extensions" there, I don't see anything about iOS widgets.

Also, there is a competing library of iOS widgets called tmTools and its website says that it will be updated for LC 8 at some point.

I've been looking around the LC website trying to answer this question and coming up with nothing.

So, would someone please enlighten me? What's the best strategy for making native looking iOS apps with LC 8? Thanks.

[Mikey]

Get tmControls2 from Scott Rossi. The source is unlocked so you can work on it, Scott answers questions, and I have made some sweet-looking apps with it, including ones that don't follow the iOS interface guidelines...

[FourthWorld]

True, the drag-and-drop controls in LC at the moment are mostly geared for the desktop. But LC does indeed support mobile-native controls, via the mobileControlCreate function.

In my own apps I've simplified things with a backscript that automatically calls mobileControlCreate for fields and scrolling groups. Seems many folks do that. Takes only a few minutes to write a script that checks the LC controls on preOpenCard and then calls mobileControlCreate for those that have mobile-native counterparts. Others prefer scripting that instantiation themselves. Either way, you get true mobile-native controls without needing a third-party add-on.

For buttons I find it easy enough to just set the style to rectangle or roundRect and then choose foreground and background colors that compliment my app's color scheme.

TMControls is a nice package, but its strongest value comes in providing very nice touches for less common controls. For the basics, LC has it all available right in the engine.

[tetsuo29]

Takes only a few minutes to write a script that checks the LC controls on preOpenCard and then calls mobileControlCreate for those that have mobile-native counterparts. Others prefer scripting that instantiation themselves. Either way, you get true mobile-native controls without needing a third-party add-on.

Thanks for the reply. This sounds promising. Are there any published examples of this technique?

[tetsuo29]

Hello,

I'm still curious to know if there are is any documentation of examples of this technique you're describing.

Thanks.

[FourthWorld]

I haven't yet finished my library, but here's a recent version that may get you started:

Code: Select all

-- Fourth World Mobile Library

constant kLongPressDuration = 500

local sNativeControlsA
local sTouchEventsA

--================================================================================--
on  __________MESSAGES____________________
end __________MESSAGES____________________


on preOpenCard
   dispatch "resizeStack" to this cd \
         with width of this stack, the height of this stack
   fwmobCreateNativeControls
   pass preOpenCard
end preOpenCard


on resizeStack
   fwmobResizeNativeControls
   pass resizeStack
end resizeStack


on mouseDown
   if the ufwmobNativePicklist of the target is true then
      fwmobHandlePickList the long id of the target
   end if
   --
   if the environment is not mobile then
      put the millisecs into             sTouchEventsA[pTouchID]["start"]
      put the long id of the target into sTouchEventsA[pTouchID]["target"]
      send "_TestLongPress" && pTouchID to me in kLongPressDuration millisecs
   end if
   --
   pass mouseDown
end mouseDown

on touchStart pTouchID
   put the millisecs into             sTouchEventsA[pTouchID]["start"]
   put the long id of the target into sTouchEventsA[pTouchID]["target"]
   send "_TestLongPress" && pTouchID to me in kLongPressDuration millisecs
   pass touchStart
end touchStart

on touchEnd pTouchID
   delete variable sTouchEventsA[pTouchID]
   pass touchEnd
end touchEnd

on _TestLongPress pTouchID
   put sTouchEventsA[pTouchID]["start"] into tStart
   if tStart is empty then exit _TestLongPress
   put sTouchEventsA[pTouchID]["target"] into tObj
   if there is a tObj then
      dispatch "longPress" to tObj
   end if
end _TestLongPress


on closeCard
   fwmobDeleteNativeControls
   pass closeCard
end closeCard

on inputBeginEditing
   fwmobDispatch "openField", mobileControlTarget()
   pass inputBeginEditing
end inputBeginEditing

on inputEndEditing
   fwmobUpdateText mobileControlTarget()
   fwmobDispatch "closeField", mobileControlTarget()
   pass inputEndEditing
end inputEndEditing

on inputReturnKey
   fwmobUpdateText mobileControlTarget()
   fwmobDispatch "returnInField", mobileControlTarget()
   pass inputReturnKey
end inputReturnKey

on inputTextChanged
   fwmobUpdateText mobileControlTarget()
   fwmobDispatch "textChanged", mobileControlTarget()
   pass inputTextChanged
end inputTextChanged

on scrollerDidScroll hOffset, vOffset
   fwmobScroll hOffset, vOffset, mobileControlTarget()
   pass scrollerDidScroll
end scrollerDidScroll
   
   

on errorDialog pErrInfo
   put line (item 1 of pErrInfo) of the uErrors of this stack into tErrString
   answer tErrString &cr& the params &cr& the executionContexts
end errorDialog



--================================================================================--
on  __________COMMANDS____________________
end __________COMMANDS____________________

on fwmobCreateNativeControls
   if the environment is not "mobile" then exit fwmobCreateNativeControls
   --
   repeat with i = 1 to the number of flds
      if the lockText of fld i is false then
         fwmobCreateNativeEditableField the long id of fld i
      else
         if the vscrollbar of fld i is true \
               OR the hscrollbar of fld i is true \
               OR the ufwMobNativeScroller of fld i is true then
            fwmobCreateNativeScroller the long id of fld i
         end if
      end if
   end repeat
   --
   repeat with i = 1 to the number of groups
      if the vscrollbar of grp i is true \
            OR the hscrollbar of grp i is true \
            OR the ufwMobNativeScroller of grp i is true then
         fwmobCreateNativeScroller the long id of grp i
      end if
   end repeat
   --
   repeat with i = 1 to the number of btns
      if the style of btn i is "menu"\
            AND the menuMode of btn i is "option" then
         fwmobCreateNativePickList the long id of btn i
      end if
   end repeat
end fwmobCreateNativeControls


on fwmobCreateNativeEditableField pObj
   hide pObj
   if the height of pObj > (the textHeight of pObj + 10) \
         AND the dontWrap of pObj is false then
      mobileControlCreate "multiline"
   else
      mobileControlCreate "input"
   end if
   put the result into tControlID
   put pObj into sNativeControlsA[tControlID]
   set the ufwmobNativeControl of pObj to tControlID
   put the rect of pObj into tRect
   mobileControlSet tControlID, "rect", tRect
   # put round(the effective textSize of pObj * 0.8) into tSize
   put the effective textSize of pObj into tSize
   mobileControlSet tControlID, "fontSize", tSize
   mobileControlSet tControlID, "visible", true
   mobileControlSet tControlID, "text", the text of pObj
end fwmobCreateNativeEditableField


on fwmobCreateNativeScroller pObj
   put the rect of pObj into tRect
   put 0,0,the formattedWidth of pObj, the formattedHeight of pObj into tContentRect
   put the hscroll of pObj into tHScroll
   put the vscroll of pObj into tVScroll
   set the vscrollbar of pObj to false
   set the hscrollbar of pObj to false
   set the ufwMobNativeScroller of pObj to true
   --
   mobileControlCreate "scroller"
   put the result into tControlID
   put pObj into sNativeControlsA[tControlID]
   mobileControlSet tControlID, "rect", tRect
   mobileControlSet tControlID, "contentRect", tContentRect
   mobileControlSet tControlID, "visible", true
   mobileControlSet tControlID, "scrollingEnabled", true
   mobileControlSet tControlID, "vIndicator", true
   mobileControlSet tControlID, "vscroll", tVScroll
   mobileControlSet tControlID, "hscroll", tHScroll
end fwmobCreateNativeScroller


on fwmobCreateNativePickList pObj
   set the style of pObj to "standard"
   set the ufwmobNativePicklist of pObj to true
end fwmobCreateNativePickList


on fwmobResizeNativeControls
   if the environment is not "mobile" then exit fwmobResizeNativeControls
   lock screen
   repeat for each key tControlID in sNativeControlsA
      put sNativeControlsA[tControlID] into tObj
      if there is a tObj then
         mobileControlSet tControlID, "rect", the rect of tObj
      end if
   end repeat
end fwmobResizeNativeControls


on fwmobDeleteNativeControls
   if the environment is not "mobile" then exit fwmobDeleteNativeControls
   --
   repeat for each line tControlID in mobileControls()
      mobileControlDelete tControlID
      put sNativeControlsA[tControlID] into tObj
      set the ufwmobNativeControl of tObj to empty
      show tObj
      delete variable sNativeControlsA[tControlID]
   end repeat
end fwmobDeleteNativeControls


on fwmobHandlePickList pObj
   put the text of pObj into tList
   put the effective label of pObj into tLabel
   put lineoffset(tLabel, tList) into tSelItem
   mobilePick tList, tSelItem, "checkmark"
   put the result into tNum
   if tNum > 0 then
      put line tNum of tList into tNewLabel
      set the label of pObj to tNewLabel
      dispatch "menuPick" to pObj with tNewLabel
   end if
end fwmobHandlePickList


on fwmobDispatch pMsg, pNativeControl
   put sNativeControlsA[pNativeControl] into tObj
   if there is a tObj then
      dispatch pMsg to tObj
   end if
end fwmobDispatch


on fwmobUpdateField pFld
   if the environment is not "mobile" then exit fwmobUpdateField
   put the long id of fld pFld into tObj
   put fwmobNativeIdByObj(tObj) into tID
   set the text of tObj to mobileControlGet(pNativeControl, "text")
end fwmobUpdateField

on fwmobUpdateText pNativeControl
   put sNativeControlsA[pNativeControl] into tObj
   if there is a tObj then
      set the text of tObj to mobileControlGet(pNativeControl, "text")
   end if
end fwmobUpdateText



on fwmobScroll pHOffset, pVOffset, pNativeControl
   put sNativeControlsA[pNativeControl] into tObj
   if there is a tObj then
      set the vscroll of tObj to pVOffset
      set the hscroll of tObj to pHOffset
      --dispatch "scrollbarDrag" to tObj with pVOffset
   end if
end fwmobScroll



--================================================================================--
on  __________UTILITIES___________________
end __________UTILITIES___________________

on fwSetText pObj, pText
   set the text of pObj to pText
   if the environment is "mobile" then
      put fwmobNativeIDByObj(pObj) into tControlID
      if tControlID is not empty then
         mobileControlSet tControlID, "text", pText
      end if
   end if
end fwSetText


on fwMakeEditable pObj
   if the environment is "mobile" then
      fwmobCreateNativeEditableField pObj
      put fwmobNativeIDByObj(pObj) into tControlID
      set the ufwmobNativeControl of pObj to tControlID
   else
      set the lockText of pObj to false
      set the traversalOn of pObj to true
      set the showFocusBorder of pObj to true
      set the autohilite of pObj to true
   end if
end fwMakeEditable


on fwNotEditable pObj
   lock screen
   select empty
   set the lockText of pObj to true
   set the traversalOn of pObj to false
   set the showFocusBorder of pObj to false
   set the autohilite of pObj to false
   show pObj
   if the environment is "mobile" then
      put fwmobNativeIdByObj(pObj) into tControlID
      put mobileControlGet(tControlID, "text") into tText
      set the text of pObj to tText
      mobileControlDelete tControlID
      set the ufwmobNativeControl of pObj to empty
      delete variable sNativeControlsA[tControlID]
   end if 
   unlock screen
end fwNotEditable



function fwmobNativeIdByObj pObj
   repeat for each key tControlID in sNativeControlsA
      if sNativeControlsA[tControlID] = pObj then
         return tControlID
      end if
   end repeat
   return empty
end fwmobNativeIdByObj