Mobile Development

customaware

It is obvious that there are some seriously talented html / css members in our group but sadly, I am not one of them.

I have forced myself to jump in the toddlers pool for some this that I just could not get around with straight Aware and have managed to cobble together enough to be dangerous to complete a few Custom Templates. Far from elegant but they work.

Problem is, I am now delving in the Mobile version of my app and running into all sorts of obstacles.

I will address the tablet side of it later but for the moment I just want to have a mobile version.

As the screens will be all different it has quickly become apparent that to arrive at a result that looks even half way respectable, Custom Templates are the way to go.

So I have frigged around with tables, divs, css etc trying to lay the data and I have to confess.....it is agonising.

One of the issues I just cannot get my head around is, what width to design to for a portrait app.

For example....iPhone.

iPhone - 320 X 480
iPhone 4 - 640 X 960
iPhone 5 - 640 X 1136

Most of the users I have will have an iPhone 4 or 5. So I designed some screens to fit in 640 width mindful of the touch requirements for people like me with podgy fingers.

Well, the result looked terrible. 🙁

Back to the drawing board... I redid them all and needed to go down to 320 px width to make it look reasonable using the Sencha theme.

So first question is...... why can I not design it for 640 px wide when the screen is 640 px wide?

On the layout issue....part of the problem is we do not need to layout full web sites for our Custom Templates. Really we only need snippets of code. But Ive been looking for a way to simplify the process. Editors, html, css, generators, video tutorials, you name it.

Have in the last day or so been trying unSemantic which is a more recent variant of the 960 grid framework. Actually looks and works great for general layout and have not tried it in Aware yet but certainly the most elegant and straightforward I have seen so far. At least it gets rid of all the tables and just uses divs.

Has anyone been using this framework for Custom Templates in Aware yet and if so, would you mind providing some pros and or cons and also if you have had success in laying out your mobile screens.

Now, before I get howled down as a heretic by the web development purists amongst us... don't tell me that all you need is notepad. I need way more help than that. 😉

Would be interested in comments.

RocketRod

I have had mobile apps being used in the field for sometime now. My main focus has been to get basic AwareIM functionality working rather than focus on the interface and how it looks. Recent changes have improved the mobile version a lot and I now believe that if the new menu's issues were fixed and times could be input on a mobile device then it would be at a place where it is a very usable solution.

Also with the change to recognize tablets in VP's one can easily have the same query operating on a phone or tablet, hiding some attributes for the mobile option and displaying them on a tablet with its greater screen display.

So the next step once the above two items were addressed by Support would be to look at dressing it up as you are embarking on now. I too have no skills in CSS and would love to not only dress up the mobile version but would like to look at doing some basic stuff to the non mobile version.

I would love either Support or a css wiz to change an existing sample AwareIM app with CSS examples embedded within it on VP's, forms etc.
Just to show us what's possible and it doesn't need to be complex. That would help us both!

So I too look to others to maybe help us out here.

Cheers Rod

Rennur

I would recommend free interactive online courses with codeacademy.com.

HTML & CSS
JavaScript
jQuery
PHP
Learn APIs for youtube & twitter

Cheers

RocketRod

Thanks Rennur! Didn't know it existed. Have already started first lesson.

Cheers Rod

Rennur

Cool, let us know your thought on the course.

Cheers

RocketRod

Well I completed 50% of the HTML/CSS course today and I would recommend it to anyone who is a novice such as me! Have gained heaps of confidence today in attempting basic CSS stuff in AwareIM which I will try out once I've completed the full course. Well worth while.

Thanks Rennur!

Cheers Rod

customaware

Well, as mentioned in my post above, I am trying out unSemantic.

Wow! At last finally found a clean, simple and logical way to layout my screens.

It is very good. And, works beautifully with Aware for mobile/tablet.

No more fiddling around with tables.
Lets me build responsive screens that work for both mobile and tablet with minimum of fuss.
Much more logical approach and allows me to change the layout around a lot quicker.

Using the table method I had this...(after hours and hours of tweaking!)

<div class="aw-data-item">
  <div class="aw-custom-line">
     <table>
        <tbody>
          <tr>
             <td class="appno" colspan="2">{ApplicationNumber}</td>
             <td class="employeename" colspan="10">{EmployeeNameSC}</td>
          </tr>
          <tr>
             <td class="reason" colspan="10">{Reason}</td>
             <td class="totalheader" colspan="2">T / L</td>
          </tr>
          <tr>
               <td class="padder" colspan="6">&nbsp;</td>
               <td class="prompt">First Day</td>
               <td class="firstdate">{Absence_FirstDay}</td>
	       <td class="prompt">Last Day</td>
               <td class="lastdate">{Absence_LastDay}</td>
	       <td class="totals" colspan="2">{Absence_Days} / {DaysLeave}</td>
           </tr>
           <tr>
               <td class="s_{SupervisorApproved}" colspan="4">&nbsp;{SupervisorName}&nbsp;</td>
               <td class="h_{DeptHeadApproved}" colspan="4">&nbsp;{DeptManagerName}&nbsp;</td>
	       <td class="e_{ExecDirectApproved}" colspan="4">&nbsp;{ExecDirectorName}&nbsp;</td>
            </tr>
      </tbody>
     </table>
  </div>
</div>

The issue here is having to fiddle around with colspan and taking width into consideration at every turn. And most likely having to redo the entire screen to accommodate a tablet layout. Usually to work all this out I needed to lay it out in a spreadsheet and then work it all out from there.

Enter unSemantic!

Change to this in 20 minutes.

<div class="aw-data-item">
  <div class="aw-custom-line">
   <div class="grid-container">
	<div class="grid-15 mobile-grid-15 applicationno">{ApplicationNumber}</div>
	<div class="grid-85 mobile-grid-85 reason">{EmployeeNameSC}</div>
	<div class="grid-15 mobile-grid-15 applicationno">Reason:</div>
	<div class="grid-85 mobile-grid-85 reason">{Reason}</div>

	<div class="grid-25 mobile-grid-25 datesheader">First Day</div>
	<div class="grid-20 mobile-grid-20 firstdate">{Absence_FirstDay}&nbsp;</div>
	<div class="grid-55 mobile-grid-55 s_{SupervisorApproved}">&nbsp;{SupervisorName}</div>

	<div class="grid-25 mobile-grid-25 datesheader">Last Day</div>
	<div class="grid-20 mobile-grid-20 lastdate">{Absence_LastDay}&nbsp;</div>
	<div class="grid-55 mobile-grid-55 h_{DeptManagerApproved}">&nbsp;{DeptManagerName}</div>

	<div class="grid-25 mobile-grid-25 totalsheader">T / L</div>
	<div class="grid-20 mobile-grid-20 totals">{Absence_Days}/{DaysLeave}</div>
	<div class="grid-55 mobile-grid-55 e_{ExecDirectApproved}">&nbsp;{ExecDirectorName}</div>
      </div>
  </div>
</div>

You can almost do all this intuitively.

If anyone wants to have play.

Go here --- http://unsemantic.com/
Download click Download Here button
Open the unsemantic-master.zip file.
copy unsemantic-grid-responsive-tablet.css file to your AwareIM folder.

In the Header for the Custom Template add the following...

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
<link rel="stylesheet" href="unsemantic-grid-responsive-tablet.css" type="text/css" media="screen" charset="utf-8">

Try the Demo.... http://unsemantic.com/demo-responsive Go on...re-size the screen!
Read the documentation. http://unsemantic.com/css-documentation
Wrap you code in <div class="grid-container"> ..... ></div>
Viola!.

Some good tutorial videos on youtube as well.

I feel liberated... 😃

hpl123

Great stuff guys. I too am a newbie at this and learning so thanks for sharing.

Rennur

Thanks for evaluating and sharing the info on Unsemantic.

There are a quite number of CSS frameworks available & I guess you should go with the one you are most comfortable coding with.

Here's a collection of CSS frameworks to compare (includes Unsemantic):
http://usablica.github.io/front-end-frameworks/compare.html

Cheers

customaware

Hi Rennur,

Yes, thanx for that.

After watching the tutorial last night on UnSemantic (I always revert to the training AFTER trying to do the work - RTFME! 😉 ) the penny finally dropped with his discussion on a variety of frameworks such as BootStrap etc.

I have downloaded BootStrap previously after your post a while back regarding FontAwesome and with the brief look at BootStrap... I didn't "get it".

I suppose the UnSemantic seemed so logical and straightforward it helped crystalize all the others as well.

As I mentioned before....having avoided html / css etc for so long this is a exciting new frontier for me.

I just love things that promote the KISS principle.