When I read the blog of Allessandro Spadoni(BSP mobile logon screen using jQuery Mobileabout how to build a login-screen optimized for mobile devices, I thought about my last project, where we have to build a very fancy logon-screen. I spoke to him, if I can reuse his example and here I present you, how you implement a new logon-screen with less effort and more flexibility.

        <link href=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css” mcehref=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css” rel=”stylesheet”/>

        <script src=”http://code.jquery.com/jquery-1.6.4.min.js” mcesrc=”http://code.jquery.com/jquery-1.6.4.min.js“/>

        <script src=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js” mcesrc=”http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js“/>

Custom Logon using jQueryMobile

Messages

Footer content

          </div>

          <!– /footer –>

        </div>

        <!– /page –>

      </body>

    </html>

  </xsl:template>

  <!– Message processing –>

  <xsl:template match=”asx:abap/asx:values/MSG”>

    <div  mcetmp=”1″>

      METHOD htm_login.

• Create HTML Login-Page

  CALL TRANSFORMATION zxslt_icflogin

  SOURCE msg             = m_logmessages

         type            = ‘LOGON’

         mandt           = sy-mandt

         langu           = sy-langu

         javascript      = iv_javascript

         hiddenfields    = iv_hidden_fields

         application     = m_sap_application

  RESULT XML rv_html.

ENDMETHOD.

    <div  mcetmp=”1″>