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.

More Design

I changed the look of the app again, I really thought I had to center the content in the middle but I now realize that is probably unnecessary. The app now looks more like their examples of list items which are very pretty, each list item has this subtle line to separate each which I want to try and make. I'm currently using <h2> and <hr> but I'll replace the <hr> eventually. You can also read about jQuery Mobile Data Attributes here.

Ubuntu Font and Centering

I tried to center my list of answers today. I don't know why I had so much trouble with this and in the end I only centered the top left corner of the list so that needs to be fixed. I also tried to use the Ubuntu font which you can get off of Google fonts. I think I am importing the downloaded font wrong and I am assuming that you can't use the URL from google fonts to import because I am not using the font on a website. You can see the google font here and how they suggest to use it(like 30ish pt font for header and 12ish pt for content).

Question App

First of all if you ever make a new app you have to put in your name and your email in the maintainer field. I was actually unable to run my code at one point because I didn't have a valid maintainer name(I just had the default "MainterName" set) so I changed it to Aki Nicholakos <aki42197@gmail.com> and the error went away. I suppose this is required so that if you make your app public people can contact the creator for whatever reason.

This is the current design of my question. I think the questions need to be spaced out more and in the center because it would be uncomfortable for someone to stretch their finger to the far left corner. I need to mess around with the CSS quite a bit and in the picture the list had a small margin which removed some of the divider and the list items won't be ordered since it's a question.

Ubuntu App Design Guides

Design Tips

• One important tip when designing is to make the content the center of attention but allow the user to quickly access other features like checking the tool bar or header at the edges of the screen.
• Therefore users can swipe at the edges of a screen to view the header or toolbar, etc
• The scroll bar is hidden until used.
• Use bold sparingly, for strong emphasis of one or two words.
• Don’t use italics.
• Use underlining only for hyperlinks.

Core(Horizontal) & Full screen(Vertical)

• Core is like a landscape layout and it includes a header, like a page title, and a divider under it where the content goes
• Full screen is very similar to Core except it is like a portrait view and I don't think it usually includes a divider
• Both include a toolbar which can have up to 5 icons such as a deletion tool, camera, etc

Content Views

• Grid View: This type of layout divides the content into different sections kind of like graph paper and it takes up most of the screen. This is usually used for things like photo galleries where you have a bunch of thumbnails of all the photos you have taken.
• List View: A list view is what it sounds like where you have a list of content and the different listed items can be grouped and styled different so contacts tend to use a list view where you have different people under different categories like Recently Contacted or Favorites.
• Full screen View: This view is actually just the Full screen layout that I mentioned above and I suppose you can also use a Core layout. So if you have a Grid View to see your thumbnails you could click a thumbnail to display the whole picture in a Full screen View.

Deleting Stuff

• Swipe: Swiping can be used to delete items but only if they are in a list view because you can swipe the content to the side and it will go away. When swiping you sometimes have to specify whether you want to delete the content permanently or just remove it from the screen so you won't be notified of it anymore.
• Tool Bar Button: A tool bar button can be used to delete content but this is generally used if there is a lot of content or the view is full screen.