ict.ken.be

 

Posts in Category: Mobile

Headphones do not go in iPhone 

Categories: Mobile

Sometimes technical problems are so much fun. All of a sudden it was impossible to insert the jack into the hole... it always popped out. Took a bit because it looked like there was nothing inside, but when putting a toothpick... a little cloth of dust/lint came out. And tada iPhone earplug fixed. So much for asking a woman to carry your iPhone in their purse.

Mobile Emulators 

Categories: Mobile

KendoUI Mobile 

Categories: Mobile
 
  • Automatic platform specific styling of form elements
  • Supported inputs: text, password, search, url, email, number, tel, file, date, time, month
  • Transitions: slide, zoom, fade, overlay (direction, reversible) at application or element level
 
Application
var app = new kendo.mobile.Application($(document.body), {
hideAddessBar:true,
initial: "startView",
layout: "myLayout",
loading: "I think I can. Can be disabled",
platform: "blackberry",
transition: "slide"
});
Mobile Layout
<div data-role="layout" data-id="myLayout">
<div data-role="header">HEADER</div>
</div>
 
<div data-role="view" data-title="Home" data-layout="myLayout">
<!-- View Content -->
</div>
<a href="#page2" data-role="button">Next Page</a>
<a href="https://ken.be" data-rel="external">Visit ken.be</a>
<div data-role="view" id="search" data-transition="slide"></div>
<a href="#search" data-role="button" data-transition="fade">Search</a>
 
app.showLoading();
longRunningProcess();
app.hideLoading();
 
<div id="mainView" data-role="view" data-title"main view">
Welcome
<input type="number" />
<a href="#otherview" data-role="button">go there</a>
</div>
 
<div id="otherview" date-role="view" data-title="other view"></div>
 
<div data-role="layout" data-id="mainLayout">
<div data-role="navbar">
<span date-role="view-title"></span>
</div>
</div>
<div data-role="view">
<a href="remoteView.html">only content of first view is rendered</a>
</div>
 
<!--remote view -->
<div data-role="view" data-init="initRemoteView"><a id="link">linky</a></div>
<!--consuming view script -->
<script>
function initRemoteView(e) { e.view.element.find("#link").kendoMobileButton(); }
</script>
<div data-role="splitview">
<div data-role="pane" data-layout="leftPaneLayout">define view and layout divs</div>
<div data-role="pane" data-layout="mainPaneLayout">define view and layout divs</div>
</div>
data-source, data-template, data-show
data-role : footer, tabstrip, navbar
 

PhoneGap - Cordova 

Categories: Mobile

PhoneGap.com

  • Developed by Nitobi which was bought by Adobe who renamed it to Cordova
  • One solution development for iOS, Android, Windows Phone 7, Blackberry, ...
  • Native shell -> Browser -> Packaged HTML App
  • Supports: Accelerometer, Camera, Capture, Compass, Connection, Contacts, Device, Events, File, Geolocation, Media, Notification, Storage
 
Use when building a simple application
  • Where native feel isn't important
  • You want to re-use your html and javascript skills
  • Deploy to multiple devices and app store in one go
  • You need offline data and function not available to the web
  • You deploy to more then 2 platforms
  • You don't need the maximum performance of the device
  • You don't need some of the more device specific features
 
Getting started
  • Install Windows Phone Sdk
  • Download PhoneGap and copy CordovaStarter-2.0.0.zip from lib/windows into %userprofile%\Documents\Visual Studio 2010\Templates\ProjectTemplates\
 
Request the needed priviledges for your application in the WMAppManifest.xml file
 <Capabilities>
      <Capability Name="ID_CAP_IDENTITY_DEVICE" />
      <Capability Name="ID_CAP_IDENTITY_USER" />
      <Capability Name="ID_CAP_LOCATION" />
      <Capability Name="ID_CAP_NETWORKING" />
      <Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />
      <Capability Name="ID_CAP_APPOINTMENTS"/>
      <Capability Name="ID_CAP_CAMERA"/>
      <Capability Name="ID_CAP_CONTACTS"/>
      <Capability Name="ID_CAP_ISV_CAMERA"/>
  <Capability Name="ID_CAP_MEDIALIB"/>
    <Capability Name="ID_CAP_MICROPHONE"/>
      <Capability Name="ID_CAP_PHONEDIALER"/>
      <Capability Name="ID_CAP_PUSH_NOTIFICATION"/>
    <Capability Name="ID_CAP_SENSORS"/>
      <Capability Name="ID_HW_FRONTCAMERA"/>      
</Capabilities>
Use shims to emulate in normal browser
 
Use a mobile design library 
 
Using jQuery mobile
  • Do not use cdn, but add full jquery and jquery mobile + css
  • Use jQuery mobile Metro to emulate native graphics
<div id="home" data-role="page">
            <div data-role="header">
                <h1>Home Page</h1>
            </div>
            <div data-role="content">
                Hello <div id="user"></div>
                <a href="#newpage" data-role="button">new page</a><br />
                <ul data-role="listview" data-theme="b" data-filter="true">
                    <li><a href="">One</a></li>
                    <li><a href="">Two</a></li>
                    <li><a href="">Three</a></li>
                    <li><a href="">Four</a></li>
                </ul>
            </div>
            <div data-role="footer" data-position="fixed">
                <a href="#dialogpage" data-rel="dialog" data-icon="plus">Add something</a>
            </div>
        </div>
        <div id="newpage" data-role="page">
            <div data-role="header">
                <a href="#home" data-icon="delete">cancel</a>
                <h1>New Page</h1>
                <a href="#home" data-icon="save">save</a>
            </div>
            <div data-role="content">
                <label for="name">What is your name?</label>
                <input type="text" name="name" id="name" value="" /> 
                <a id="savebutton" href="#newpage" data-role="button">save</a>
            </div>
            <div data-role="footer" data-position="fixed">
                <h4>Footer</h4>
            </div>
        </div>
        <div id="dialogpage" data-role="page">
            <div data-role="header">
                <h1>dialog</h1>
            </div>
            <div data-role="content">
                this is a dialog
            </div>
        </div>
 
PhoneGap API
var wId = navigator.accelerometer.watchAcceleration(onSuccess, onError, { frequency: 1000 });
var wId3 = navigator.geolocation.watchPosition(onSuccessG, onErrorG, { frequency: 1000 });
var wId2 = navigator.camera.getPicture(onSuccessC, onErrorC, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });
var wId4 = navigator.notification.alert("You clicked me", onSuccessA, "The title", "OK");
 
PhoneGap Build
 
PhoneGap plugins