My first mobile app - First question

[AvanIeperen]

Using Clarion 9 and NetTalk 7.37 i started work on my first mobile app. It's still more of a test app than a real app. 
It's pretty basic. It will have a fixed header, a fixed footer and four pages. Each page will have a list with data. The footer has a button for each page. Something is happening in the footer that i can't explain and i can't figure out who is doing it and why.

This is the code i use to build the footer. The footer has four buttons that can be used to go to the four pages. The button for the active page has a different color.

Code: [Select]

Footer                        Routine
  DATA
Button1Active   BOOL(FALSE)
Button2Active   BOOL(FALSE)
Button3Active   BOOL(FALSE)
Button4Active   BOOL(FALSE)

  CODE

  IF    p_web.PageName = 'page1.htm' OR p_web.PageName = 'page1' THEN Button1Active = TRUE;
  ELSIF p_web.PageName = 'page2.htm' OR p_web.PageName = 'page2' THEN Button2Active = TRUE;
  ELSIF p_web.PageName = 'page3.htm' OR p_web.PageName = 'page3' THEN Button3Active = TRUE;
  ELSIF p_web.PageName = 'page4.htm' OR p_web.PageName = 'page4' THEN Button4Active = TRUE;
  END

  packet = clip(packet) & p_web.AsciiToUTF(|
      '<div class="ui-navbar ui-navbar-noicons" data-role="navbar" role="navigation"><13,10>' & |
      '<ul class="ui-grid-c"><13,10>'                                                         & |
      NavButton('Page 1', 'page1.htm', 'a', Button1Active)                                    & |
      NavButton('Page 2', 'page2.htm', 'b', Button2Active)                                    & |
      NavButton('Page 3', 'page3.htm', 'c', Button3Active)                                    & |
      NavButton('Page 4', 'page4.htm', 'd', Button4Active)                                    & |
      '</ul><13,10>'                                                                          & |
      '</div><13,10>'                                                                         & |
      '',                                                                                       |
      net:OnlyIfUTF,net:StoreAsAscii)

  EXIT

Code: [Select]

NavButton PROCEDURE(STRING pText, STRING pLink, STRING pBlock, BOOL pActive) ! Added by LocalProcedures Template

! Start of "Local Procedures Data"
! [Priority 5000]
ButtonClassText CSTRING(512)

! End of "Local Procedures Data"

  CODE

! Start of "Local Procedures Code"
! [Priority 5000]
  ButtonClassText = '<li class="ui-block-' & pBlock & '"><13,10>'
  IF pActive THEN
    ButtonClassText = ButtonClassText & '<a class="ui-state-persist ui-btn ui-btn-active'
  ELSE
    ButtonClassText = ButtonClassText & '<a class="ui-btn'
  END
  ButtonClassText = ButtonClassText                               & |
      ' ui-btn-up-a" href="' & pLink & '" data-theme="a"><13,10>' & |
      '<span class="ui-btn-inner" aria-hidden="true"><13,10>'     & |
      '<span class="ui-btn-text">' & pText & '</span><13,10>'     & |
      '</span><13,10>'                                            & |
      '</a><13,10>'                                               & |
      '</li><13,10>'
 
  RETURN ButtonClassText

The bit to keep an eye on here are the span classes with ui-btn-inner and ui-btn-text.

This is the what i see when i look at the web page with firebug in FireFox.

Code: [Select]

<div id="pagefootertag_div" class="ui-footer ui-bar-a ui-footer-fixed fade ui-fixed-overlay slideup" role="contentinfo" data-role="footer" data-id="foo1" data-position="fixed">
<div class="ui-navbar ui-navbar-noicons ui-mini" role="navigation" data-role="navbar">
<ul class="ui-grid-c">
<li class="ui-block-a">
<a class="ui-state-persist ui-btn ui-btn-active ui-btn-inline ui-btn-up-a" data-theme="a" href="page1.htm" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-inline="true">
<span class="ui-btn-inner">
<span class="ui-btn-text">
<span class="ui-btn-inner" aria-hidden="true">
<span class="ui-btn-text">Page 1</span>
</span>
</span>
</span>
</a>
</li>
<li class="ui-block-b">
<a class="ui-btn ui-btn-inline ui-btn-up-a" data-theme="a" href="page2.htm" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-inline="true">
<span class="ui-btn-inner">
<span class="ui-btn-text">
<span class="ui-btn-inner" aria-hidden="true">
<span class="ui-btn-text">Page 2</span>
</span>
</span>
</span>
</a>
</li>
<li class="ui-block-c">
<a class="ui-btn ui-btn-inline ui-btn-up-a" data-theme="a" href="page3.htm" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-inline="true">
<span class="ui-btn-inner">
<span class="ui-btn-text">
<span class="ui-btn-inner" aria-hidden="true">
<span class="ui-btn-text">Page 3</span>
</span>
</span>
</span>
</a>
</li>
<li class="ui-block-d">
<a class="ui-btn ui-btn-inline ui-btn-up-a" data-theme="a" href="page4.htm" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-inline="true">
<span class="ui-btn-inner">
<span class="ui-btn-text">
<span class="ui-btn-inner" aria-hidden="true">
<span class="ui-btn-text">Page 4</span>
</span>
</span>
</span>
</a>
</li>
</ul>
</div>
</div>
Each button is wrapped in extra span classes. This affects the way the buttons are displayed. Where do these extra span classes come from? Is there a way to disable this behaviour?

If i remove the span classes from my NavButton code the extra span classes are gone from the web page. But aria-hidden="true" is missing. Is there is a way to add that?

Code: [Select]

<li class="ui-block-a">
<a class="ui-state-persist ui-btn ui-btn-active ui-btn-up-a ui-btn-inline" data-theme="a" href="page1.htm" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-inline="true">
<span class="ui-btn-inner">
<span class="ui-btn-text"> Page 1 </span>
</span>
</a>
</li>
I hope someone can clear this up for me.

Btw if i am being stupid and doing stuff the hard way please point out how things are supposed to be done. I am still trying to figure out how all the different pieces fit together, the obvious easy sollutions are not that obvious to me yet.

Adriaan

[Bruce]

post example app & dict.

cheers
Bruce

[AvanIeperen]

Here is the zipped .app file. No .dct needed and i removed all the templates that weren't needed.

[attachment deleted by admin]

[Bruce]

I think you should start with a netWebform, and go from there.
the difference between your code, and the code in the browser is jQueryMobile manipulating the page. That's what it does. If you go down the hand-coded road like this you may need to do a bit more research on jQuery Mobile itself.

cheers
Bruce

[AvanIeperen]

Hi Bruce,

I had some problems at the start using the web form in the footer. The web form always generates a header section (mobile mode) and that messed up the real page header. Once i disabled the header on the web form it worked. The only thing i need to do now is to get the buttons to display like i want.

Thanks,

Adriaan