List App

I made my own list app like in the tutorial that I linked to before. It has a search bar and if you click on a list item it shows the picture in full screen. The toolbar at the bottom sort of works because the buttons are functional but there are no other pages like home. Also this link was useful because it talked about themes along with one that talked about custom icons for list items. You can also style the icons but I didn't get it working. This also seems like a useful link because it talked about useful piece of code when using jQuery Mobile. In the picture below you can see that I was able to style the list items individually, give custom icons like the star, and other stuff. But in most cases you would probably keep everything one style but you could use multiple dividers for different sections of pictures.

jQuery Mobile

I found a really nice beginner's tutorial for jQuery Mobile and it's really nice because it shows how a simple web page can be easily modified to look a lot better on mobile devices. I just realized that I think I have been trying to use jQuery Mobile in my Ubuntu apps when I hadn't even included jQuery Mobile as a source in my apps which explains why a lot of my apps were not being styled. I also like how this is being done on a website because I think I was having trouble with the UI.

Javascript

On Friday I continued to work on Javascript for an app that does something when pushed. I only made a few changes, one of which was that instead of console.log I used replaceWith. I actually did screw up the Javascript because I made a few changes and ran it in a web browser and it didn't work. I did fix it though and I think the problem was that I referenced the button incorrectly, so I guess I'm a bit rusty with my Javascript. Anyway, it should be easy to put it back in the Ubuntu SDK because I just have to add things like "UI" and initialize it. 

Javascript

Cordova
Javascript APIs that allow you to access the hardware on your device such as the camera, accelerometer, GPS, storage, etc, which isn't possible with Javascript alone.

I finally tried adding Javascript to an app, I noticed by default they don't use $(document).ready but instead they use window.onload. I guess either can be used though. I also tried to style my list again but I really can't seem to get it working. Anyway I made a quick app that has a button and when clicked it would display some text but it doesn't work.

$( document ).ready(function() { 
 var UI = new UbuntuUI(); 
 UI.init(); 
   
 UI.button('text').click(function () { 
  console.log('neat'); 
 }); 
});



I have a button with the id "text" but the app is working, I haven't really tested it so I don't know if the button is working or not or if the text is just not showing up.

Swiping and Toolbars

So the app is styled fairly well right now although I can't seem get any other styles working, but I'll try and add some javascript anyway. Like you suggested I looked at the meanings app for help and I took a look at both the javascript and html. Some of it looks familiar but a lot of it I also don't understand. It seems like they apply data roles to nearly every line yet I'm having trouble styling my list. I also cleaned up a lot of unnecessary code that was made when the project was first created. There is now a tool bar on the app which would allow a button to be placed for the lists to be deleted, there should also be small icons on the tool bar and I don't know if the text should be separated like that.

List

I finally managed to make progress on the list view I was making and I used this as a reference. I'm pretty confused right now because I can't seem to apply any CSS to anything and I was also unable to get any swatches working. It seems like my list was styled a lot when I barely did anything to it which is odd but I like the look of it.

Data Attributes

So I spent a lot of the class trying to get a border to simply work but anyway I started working on an app that allows a list to be deleted. I think I need to read up on data roles though because my lists are not working properly. I found a few links, one of which talked specifically about lists on mobile devices. It seems really weird and I think I have been implementing my lists wrong but this website has a lot of examples.