ComponentOne AppView for ASP.NET WebForms
Tutorials / Creating an Event Planning Application / Step 2 of 4: Creating the Application's Web Forms / d. Creating the Home Folder Elements
In This Topic
    d. Creating the Home Folder Elements
    In This Topic

    In this step, you'll create the application elements found in the Home folder.

    1. From the Home folder, double-click the About file to open it. Replace the existing markup with the following:

      To write code in Source View

      <div data-role="appviewpage" data-title="About">
             <div data-role="header"><h2>About</h2></div>
             <div data-role="content">
                    <article>
                           <p>
                                 Use this area to provide additional information.
                           </p>
                    </article>
                    <aside>
                           <h3>Aside Title</h3>
                           <p>
                                 Use this area to provide additional information.
                           </p>
                           <ul>
                                 <li><a href="Index.aspx">Home</a></li>
                                 <li><a href="About.aspx">About</a></li>
                                 <li><a href="Contact.aspx">Contact</a></li>
                           </ul>
                    </aside>
             </div>
      </div>
    2. From the Home folder, double-click the Contact file to open it. Replace the existing markup with the following:

      To write code in Source View

      <div data-role="appviewpage" data-title="Contact">
             <div data-role="header"><h2>Contact</h2></div>
             <div data-role="content">
                    <h3>Phone</h3>
                    <span>425.555.0100</span>
       
                    <h3>Email</h3>
                    <span><a href="mailto:General@example.com">General@example.com</a></span>
             </div>
      </div>
    3. From the Home folder, double-click the Index file to open it. Replace the existing markup with the following:

      To write code in Source View

      <div data-role="appviewpage" data-title="Index">
             <div data-role="header"><h2>Home Page</h2></div>
             <div data-role="content">
                    <p>
                           This application was built with Wijmo, jQuery Mobile. Learn more about Wijmo at <a href="http://wijmo.com">http://wijmo.com</a>.
                    </p>
             </div>
      </div>