Part 1 Mobile Apps

For Simple Mobile Apps Design Interface

Part 1.. Let's enjoy it !!!


1
Design simple app with Dreamweaver CS6
1. Open DW CS6
2. On the opening menu:
 Create New>More>Page From Sample>Sample Folder: Mobile Starters>jQuery Mobile (Local)
 Click the Create button on the bottom right of the opening menu
 You should have a mobile page with 4 pages
 Click the Live button on the top of your code window to see the actual mobile pages
 Click again the Live Button so that you can see back your Code again
3. Choose menu Window>Workspace Layout>App Developer Plus so that DW CS6 display the workspace for Apps development
4. Create app folder:
 Create a folder inside your C:\drive and name it as webDreamweaver
 Inside webDreamweaver folder, create a new folder and name it as appMyRestaurant
 Inside appMyRestaurant folder, create a new folder and name it as www
5. Save your file
 File>Save
 Save your file inside webDreamweaver> appMyRestaurant>www
 Name the file as index.html
6. Create New site for the app
 Open Menu Site>New site
 In the new site window; type “MonroeApp” in the Site Name
 Click the Button for the Local Site Folder and browse to C:\webDreamweaver> appMyRestaurant folder. Then click Select button
 You should see that inside the Local Site Folder textbox; it will be written as C:\webDreamweaver\appMyRestaurant\
 Click Save button
 You site will be displayed File tab at the bottom left of your DW display
7. Make sure you click the Split button on the DW display
8. Deleting existing pages to the app
 Select the word “Page Two” in the jQuery mobile page on the right screen of DR display. You will see that DW will select the Code related to this sentence inside the Code window.
 Delete this code inside the Code Window which is located between like 17-21
<ul data-role="listview">
<li><a href="#page2">Page Two</a></li>
<li><a href="#page3">Page Three</a></li>
<li><a href="#page4">Page Four</a></li>
</ul>
 Click anywhere inside the jQuery Window on the right; your pages (Page One-Page Four) will be deleted
9. Adding new pages to the app
2
 Put your cursor between these tags, (at line 17)
<div data-role="content">
Put your cursor here
</div>
 Find Insert Panel at your top right display
 Click the Common pull down menu and choose jQuery Mobile (all tools for jQuery will be shown)
 While your cursor is between
<div data-role="content">
|
</div>
 Choose ListView tool from the jQuery mobile panel
 When pointed to choose the requirement for jQuery List View, select the following items:
 Click OK button and you should see six new pages inside your Code Window and jQuery Window
10. Change the name of each new page
 Select the first “Page” word list from jQuery Window
3
 Rename it to “Pubs”
 Select the word “Lorem ipsum” just below the “Pubs” word and rename it to “List of Pubs”
 Repeat the same renaming processes to list 2 – 6 based on the following name in Table 1
Table 2
List 2
Restaurant
 List of restaurant
List 3
Event Information
 Coming events
List 4
Tickets Location
 Where to get tickets
List 5
Map
 Geolocation for Monroe
List 6
Contact
 Contact us
11. Adding new app pages
 So far there are only 4 pages for the app; you need to add 3 new pages for the app as the first page is for the Homepage and you have 6 lists
 Put your cursor at Line 85 or just above the </body> tag in the Code Window
 Click the Page tool from the jQuery Panel and click OK. DW will insert a new page (page 5)
 Repeat the same process by adding two more pages until page7 so that you will get 7 pages overall
12. Renaming the app pages and page id
 Select the word “Page 2” in the jQuery Window. Rename it to “Pubs”
 While you’re renaming it, you should noticed that DW also do the same process in the Code Window.
<div data-role="page" id="page2">
<div data-role="header">
<h1>Pubs</h1>  DW rename the word here
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
4
 Whatever you did in the jQuery window, DW will do the same process parallel inside the Code window
 To rename the page id look at this line. Change the id from id=”page2” to id=”page2Pub”
<div data-role="page" id="page2">  Rename the id to page2Pub
<div data-role="header">
 Repeat the same process to the other pages as shown in Table 2
Table 2
Page
Rename to
Page id
Page 3
Restaurant
Page3Restaurant
Page 4
Event Information
Page4Event
Page 5
Tickets Location
Page5Ticket
Page 6
Map
Page6Map
Page 7
Contact
Page7Contact
 Save your file
13. Link pages for the app
 Select the “Pubs” word in Page One inside the jQuery window; you should see the following code somewhere inside Code window
<li><a href="#">
<h3>Pubs</h3>
<p>List of pubs</p>
</a></li>
 Add the link after the <a href=”#”> to page 2 so that it will be like this:
<li><a href="#page2Pub">  add #page2Pub
<h3>Pubs</h3>
<p>List of pubs</p>
</a></li>
5
 Repeat the same process to the rest of the link in Page One (Restaurant until Contact). Your Code will be like this:
<li><a href="#page3Restaurant">
<h3>Restaurant</h3>
<p>List of restaurant</p>
</a></li>
<li><a href="#page4Event">
<h3>Event information </h3>
<p>Coming events</p>
</a></li>
<li><a href="#page5Ticket">
<h3>Tickets </h3>
<p>Where to get tickets</p>
</a></li>
<li><a href="#page6Map">
<h3>Map</h3>
<p>Geolocation for Monroe</p>
</a></li>
<li><a href="#page7Contact">
<h3>Contacts</h3>
<p>Contact us</p>
</a></li>
 Click the Live Button to check your link
 Click back the Live button once you’ve satisfied
14. Adding Back Button
 Click or select the “Pubs” page on jQuery window. Look at their code inside the Code window
<div data-role="page" id="page2Pub">
<div data-role="header">
<h1>Pubs</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4>Page Footer</h4>  Delete Page Footer word
</div>
</div>
 Delete the word “Page Footer” between <h4> …..</h4> tag. Remain your cursor position there
 Choose Button tool from jQuery panel. Choose the following specification for the button tool
6
 Click OK
 Change the Code inside the Code window for the <h4> </h4> tag for the new added button to be like this
<div data-role="page" id="page2Pub">
<div data-role="header">
<h1>Pubs</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h4><a href="#page" data-role="button" data-icon="back"
data-iconpos="top">Back</a> </h4>  Change here
</div>
</div>
 Repeat the same process to add back button to the other pages