For this assignment (Adobe Gen Pro App Design course, Jun 2015, Class 2), we were to create and personalize a biography app in Brackets and PhoneGap following the tutorial by Mark Shufflebottom (https://vimeo.com/96324243). This exercise would teach us how to implement a menu system with multiple pages for an app running on a mobile device.

 

I was not content simply to recreate Mark’s app and change the name and biographical bullet points. I also wanted to add some humor, as Mark taught us that successful apps make people laugh. I also learned from the week’s Live Class that Suzanne Cronin implemented an animated GIF in her Winner-of-the-Class assignment, and that inspired me to want to do something similar.

 

I therefore decided against doing a boring bio on myself, and instead did one on Bessie, a cow.

 

(Note: This post gives only partial code for this project. I assume the reader will view the tutorial and follow what Mark S. does, and then understand the changes I have made.)

I searched for public domain cow clip-art and came across one that thousands have used over time immemorial (https://pixabay.com/en/cow-milk-farming-animal-eyes-farm-35561/).

 

I took the image into Photoshop, created several versions of Bessie (as noted in the caption above), and organized and animated them via an 18-frame Frame Animation. I set each frame to last 0.3s, except the “Moooo” frame, which lasts just a little longer (0.5s) for effect. I then exported it as an animated GIF.

 

I actually created Bessie and her dance after I had finished the rest of the project. That is why the colors of the text and its balloon (both border and fill) appear as shown: They all match the colors of the theme. (See the “Color Theme” discussion below.) I made the eyes a radically different shade of green to make them stand out, especially since the viewer gets to see those eyes only once every 5.6s.

The home screen layout duplicates that in the tutorial: The links for Hobbies, Work, and About reside in a jQuery Inset Listview. (See http://demos.jquerymobile.com/1.4.5/listview/.) The data-inset=”true” property in the <ul> tag gives the block its rounded corners and L-R indentations.

 

Bessie sits on top of the <ul> tag in her own <img> tag. As in the tutorial, she also gets her own id and CSS selector in order to center her.

 

If you tap one of the buttons, it slides to the next “page.” The data-transition=”slide” property in each <li> sets this behavior. Each “page” resides within the index.html file, as a unique <div> accessed via a # link, rather than within its own file; as Mark S. points out, this is more efficient since the phone must load the entire app at once.

 

I created the color theme in ThemeRoller (https://themeroller.jquerymobile.com/). I chose colors that go with farms: very green grass, light yellow-green grass, earth brown, and sand yellow. I didn’t bother with the blue-color elements since I am not using any of them.

 

Note: Do not try to change theme colors by directly editing the jQuery files, or even by creating custom CSS selectors. The jQuery structure is complex, and you could easily adjust the wrong element. Sites like ThemeRoller save you hours of headaches.

 

Applying the theme was not as straightforward as the site makes it out to be. Here is how I did it:

 

1) Download the finished theme via the “Download” button. You get a ZIP file structured like the following. If I gave my theme the name “Farm”:

 

 

2) Extract and copy the entire [themes] folder from the ZIP file to your project’s [css/themes] folder, and rename it as desired:

 

 

3) In index.html, add links to the two CSS files. Place both of these links above any jquery.mobile.structure link but below any default themes link. This order is critical; if you place the custom theme links above the default theme link, you will not see your theme.

 

 

 

 

 

 

4) That should do it! Run/Refresh your project, and your theme colors should appear.

Creating a “Hobbies” page was just a matter of following the tutorial: Copy the “Home” page <div>, paste it, and adjust it.

 

Putting in a “home” button that slides in reverse back to #home was also as simple as following the tutorial: Give the button the data-direction=”reverse” property.

 

Filling in the #hobbies page with non-navigable list items was easy: Just don’t give them <a> links.

 

Making the list items inset was as simple as doing the same as for the #home page: Just set data-inset=”true”.

 

Centering the text in the line items, though... That was tricky. I had to go to stackoverflow.com for the answer. You somehow have to know the structure of the jQuery files to change the correct element, using CSS to target a specific element and a very specific selector.

 

 

 

Implementing this page required considerable research, both technically at the jQuery Mobile and stackoverflow.com sites, and factually through numerous Internet sites about cows. For the technical part, I wanted to do a collapsible menu with expand/collapse icons centered and underneath the text. I also wanted to indent the entire menu system so that the light green background appears around it, and I wanted each main list item to contain an indented sub-list. Finally, I needed a smaller font for the sub-list items to accommodate each item’s extensive text.

 

- To implement collapsible lists, set data-role=”collapsible” instead of “listview”.

 

- To nest an indented Listview inside an indented collapsible list, first create an overall <ul> with data-role=”listview” and data-inset=”true”, then nest <li> elements with data-role=”collapsible” and data-inset=”false” for the collapsible items, then nest <ul> elements with data-role=”listview” and data-inset=”true”, and then finally nest the inner <li> elements.

 

- To place the expand/collapse icon under the text, set data-iconpos=”bottom” for each of the collapsible <li>s.

 

- To get the whole unit to look correct, you also have to implement some complex CSS code. (The jQuery Mobile site shows all of this. I also post it below.)

 

- I also discovered, quite by accident, that it is very important to set data-theme=”a” for both of the inner <ul> Listviews, if using a custom theme such as from ThemeRoller. If you leave it at the default data-theme=”b”, parts of your custom theme will not show.

 

- To get the smaller font, you have to target a very specific CSS selector.