Click here to Skip to main content
15,886,724 members
Search within:


Articles / Web Development / HTML5
 

Anatomy of HTML5/JavaScript Single Page Application in Samples (basics, navigation, composition, communications with the server)

Rate me:
Please Sign up or sign in to vote.
4.99/5 (44 votes)
20 Dec 2012CPOL37 min read 195K   5.1K   143  
Describes Single Page Applications and a new BPF Framework that helps to develop SPAs.
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="../Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <!-- links to be converted to tabs -->
    <ul id="pageTabs">
        <li><a href="#page1">Page1</a></li>
        <li><a href="#page2">Page2</a></li>
    </ul>
    
    <!-- page 1 message colored in red -->
    <div id="page1" style="color:red" >
        This is page 1

        <div id="pluginContainer"></div>
    </div>

    <!-- page 2 message colored in blue -->
    <div id="page2" style="color:blue">This is page 2</div>
</body>
</html>
<script src="../Scripts/jquery-1.8.3.min.js"></script>
<script src="../Scripts/jquery-ui-1.9.2.min.js"></script>
<script src="../Scripts/BPF/bpf.js"></script>

<script>
    $(document).ready(function () {

        // create the tabs, store a reference to the tabs.
        var topLevelTabs = $("body").tabs();

        // create the top level bpf.nav.Node object around the tabs.
        var topLevelNode = bpf.nav.getJQTabsNode(topLevelTabs);

        var compositionReady = new bpf.utils.EventBarrier();

        compositionReady.addSimpleEventHandler(function () {
            // this function is called after all the plugins are loaded (rendered)
            
            // we call "connectToParentNode" function on the plugin
            // passing the topLevelNode to it, in order to connect
            // the plugin's tabs to the bpf navigation framework.
            bpf.control("#pluginContainer").call("connectToParentNode", topLevelNode);

            // connect the navigation framework with the URL's hash
            bpf.nav.connectToUrlHash(topLevelNode);

            // update the current URL
            bpf.nav.setKeySegmentToHash(topLevelNode);
        });

        // get the plugin
        bpf.cmpst.getPlugin("APlugin.html", null, "#pluginContainer", compositionReady);
    });
</script>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Nick Polyak
Architect AWebPros
United States United States
I am a software architect and a developer with great passion for new engineering solutions and finding and applying design patterns.

I am passionate about learning new ways of building software and sharing my knowledge with others.

I worked with many various languages including C#, Java and C++.

I fell in love with WPF (and later Silverlight) at first sight. After Microsoft killed Silverlight, I was distraught until I found Avalonia - a great multiplatform package for building UI on Windows, Linux, Mac as well as within browsers (using WASM) and for mobile platforms.

I have my Ph.D. from RPI.

here is my linkedin profile

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 6 Dec 2012

Article Copyright 2012 by Nick Polyak
Everything else Copyright © CodeProject, 1999-2024

Web02 2.8:2024-04-02:1