PageRenderTime 51ms CodeModel.GetById 25ms RepoModel.GetById 0ms app.codeStats 0ms

/raxan/sdk/docs/embeddable-apps.html

http://raxan.googlecode.com/
HTML | 122 lines | 90 code | 25 blank | 7 comment | 0 complexity | 269bb1f30aa8af1b7e13eb2c78c80d82 MD5 | raw file
Possible License(s): GPL-2.0 
    

  1. <!DOCTYPE html>

    2. 

  2. 

    3. 

  3. <html>

    4. 

  4. <head>

    5. 

  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    6. 

  6.     <title>Embeddable Apps - Raxan User Guide</title>

    7. 

  7.     <link href="../raxan/ui/css/master.css" rel="stylesheet" type="text/css" />

    8. 

  8.     <!--[if lt IE 8]> <link rel="stylesheet" href="../raxan/ui/css/master.ie.css" type="text/css"><![endif]-->

    9. 

  9.     <link href="../raxan/ui/css/default/theme.css" rel="stylesheet" type="text/css" />

    10. 

  10.     <link href="style.css" rel="stylesheet" type="text/css" />

    11. 

  11.     <link href="highlight/styles/default.css" rel="stylesheet" type="text/css" />

    12. 

  12.     <script type="text/javascript" src="highlight/highlight.js"></script>

    13. 

  13.     <script type="text/javascript">

    14. 

  14.         <!--

    15. 

  15.         hljs.initHighlightingOnLoad('javascript','html','php','css');

    16. 

  16.         //-->

    17. 

  17.     </script>

    18. 

  18.     <!--[if lt IE 7]>

    19. 

  19.         <style type="text/css"> form input.textbox { height: 26px; }</style>

    20. 

  20.     <![endif]-->

    21. 

  21. </head>

    22. 

  22. 

    23. 

  23. <body>

    24. 

  24.     <div class="container">

    25. 

  25.         <div id="header" class="rax-header-pal rax-metalic">

    26. 

  26.             <h2 class="ltm bottom c14">Raxan User Guide</h2>

    27. 

  27.             <ul>

    28. 

  28.                 <li><a href="../../index.html">Home</a></li>

    29. 

  29.                 <li><a href="index.html">Overview</a></li>

    30. 

  30.                 <li><a href="features.html">Features</a></li>

    31. 

  31.                 <li><a href="table-of-contents.html" title="Table of Content">Contents</a></li>

    32. 

  32.                 <li><a href="../examples">Examples</a></li>

    33. 

  33.             </ul>

    34. 

  34.             <ul class="search">

    35. 

  35.                 <li>

    36. 

  36.                     <form class="tpm c9" name="form1" action="../tools/search.php" method="get">

    37. 

  37.                         <input class="c6 textbox round left" placeholder="Search" type="text" name="q" value="" title="Search User Guide"  />

    38. 

  38.                         <input class="c2 button round left ltm" type="submit" value="Go" />

    39. 

  39.                     </form>

    40. 

  40.                 </li>

    41. 

  41.             </ul>

    42. 

  42. 

    43. 

  43.         </div>

    44. 

  44.         <hr class="space"/>

    45. 

  45.         <div class="master-content-wrapper">

    46. 

  46.             <div class="container prepend-top c48 master-content"><h2>Embeddable Applications</h2>
    47. 

  47. 

  48. <p>Raxan makes it possible to embed an Ajax application within another web page or application. With embeddable apps developers can use Raxan to
    49. 

  49. extend or enhance their existing web pages without having to make any major changes or convert or port the entire web page to into PHP.</p>
    50. 

  50. 

  51. <h3>Other Benefits:</h3>
    52. 

  52. 

  53. <ol>
    54. 

  54. <li>Embeddable apps can be used with static or dynamically generated web pages such as those generated by other languages such as Perl, JSP, ASP, ASP.Net, Ruby, Python, etc. </li>
    55. 

  55. <li>They can also be used to manipulate and traverse the client-side DOM elements within a web page. This means that an application can be designed to add or remove elements as the user interacts with the web page.</li>
    56. 

  56. </ol>
    57. 

  57. 

  58. <p>Creating an embedded application is the same as creating a typical Raxan for PHP Ajax web page. The one thing to bear in mind is that the application will only communicate with the client's browser via Ajax after first load. Full page post-backs are not recommended for embedded applications.</p>
    59. 

    60. 

  60. <h4><strong>Emebedded Hello World app</strong></h4>
    61. 

  61. 

  62. <p>This will add a button to the web page and will then display the 'Hello World' message when the button is clicked.</p>
    63. 

  63. 

  64. <pre><code class="php">&lt;?php 
    65. 

  65.     require_once("raxan/pdi/autostart.php");
    66. 

  66. 

  67.     class EmbeddedApp extends RaxanWebPage {
    68. 

  68.         protected function buttonClick(){
    69. 

  69.             // use the CLX to sent and alert action script to the client
    70. 

  70.             c()-&gt;alert('Hello World!!! - PHP Rules!');
    71. 

  71.         }
    72. 

  72.     }
    73. 

  73. ?&gt;
    74. 

  74. &lt;button id="button" xt-bind="#click,buttonClick"&gt;Click Me!&lt;/button&gt;
    75. 

  75. </code></pre>
    76. 

  76. 

  77. <p>To load the above application inside your web page you only need to add a single script tag with the <strong>?embed[js]</strong> query string as shown below:</p>
    78. 

  78. 

  79. <pre><code class="javascript">&lt;script type="text/javascript" src="hello.php?embed[js]"&gt;&lt;/script&gt;
    80. 

  80. </code></pre>
    81. 

  81. 

  82. <p>Using the above you can pass special instructions to the app to prevent it from loading external CSS or JavaScript files:</p>
    83. 

  83. 

  84. <pre><code class="javascript">&lt;script type="text/javascript" src="hello.php?embed[js]=noxcss,noxjs"&gt;&lt;/script&gt;
    85. 

  85. </code></pre>
    86. 

  86. 

  87. <p>The noxcss option will prevent the loading of all external css files, while noxjs will prevent the loading of all external JavaScript files. These options will come in handy if you have already loaded a specific script of css file.</p>
    88. 

  88. 

  89. <h3>Sending Content To The Client</h3>
    90. 

  90. 

  91. <p>The appendToClient(), prependToClient, replaceClient() and updateClient() methods provide a convenient way for developers to transfer DOMs elements
    92. 

  92. from the server to the client. Let's say you wanted to create a div on the server and then add the div inside an element called "sidebar", here's how
    93. 

  93. it could be done in a single line:</p>
    94. 

  94. 

  95. <pre><code class="php">&lt;?php
    96. 

  96.     $div = $this['&lt;div id="box1" class="box" /&gt;'];
    97. 

  97.     $div-&gt;appendToClient('#sidebar');
    98. 

  98. ?&gt;
    99. 

  99. </code></pre>
    100. 

  100. 

  101. <p>You can also use the c() function to make jQuery calls from the server. For example: c('#sidebar')->html('This is a message from PHP');</p>
    102. 

  102. 

  103. <hr class="clear" />
    104. 

  104. 

  105. <p align="right">Up Next: <a href="degradable-pages.html" title="Creating Degradable Web Pages">Creating Degradable Web Pages</a> </p>
    106. 

  106. </div>

    107. 

  107.             

    108. 

  108.             <div id="footer" class="container c48 rax-active-pal round rax-glossy">

    109. 

  109.                 <ul class="clearfix">

    110. 

  110.                     <li><a href="index.html">Overview</a></li>

    111. 

  111.                     <li><a href="features.html">Features</a></li>

    112. 

  112.                     <li><a href="new-features.html">What's new</a></li>

    113. 

  113.                     <li><a href="table-of-contents.html" title="Table of Content">Contents</a></li>

    114. 

  114.                     <li><a href="../examples">Examples</a></li>

    115. 

  115.                 </ul>

    116. 

  116.             </div>

    117. 

  117.         </div>

    118. 

  118.     </div>

    119. 

  119. </body>

    120. 

  120. 

    121. 

  121. </html>

    122. 

  122. 

    123. 

  123.