Category Archives: Mobile

Android AVM machine adb commond commands

Posted on by

Source

adb help // List all comands
  
 == Adb Server
 adb kill-server
 adb start-server
  
 == Adb Reboot
 adb reboot
 adb reboot recovery
 adb reboot-bootloader
 adb root //restarts adb with root permissions
  
 == Shell
 adb shell // Open or run commands in a terminal on the host Android device.
  
 == Devices
 adb usb
 adb devices //show devices attached
 adb devices -l //devices (product/model)
 adb connect ip_address_of_device
  
 == Get device android version
 adb shell getprop ro.build.version.release
  
 == LogCat
 adb logcat
 adb logcat -c // clear // The parameter -c will clear the current logs on the device.
 adb logcat -d > [path_to_file] // Save the logcat output to a file on the local system.
 adb bugreport > [path_to_file] // Will dump the whole device information like dumpstate, dumpsys and logcat output.
  
 == Files
 adb push [source] [destination] // Copy files from your computer to your phone.
 adb pull [device file location] [local file location] // Copy files from your phone to your computer.
  
 == App install
 adb -e install path/to/app.apk
  
 -d – directs command to the only connected USB device…
 -e – directs command to the only running emulator…
 -s <serial number> …
 -p <product name or path> …
 The flag you decide to use has to come before the actual adb command:
  
 adb devices | tail -n +2 | cut -sf 1 | xargs -IX adb -s X install -r com.myAppPackage // Install the given app on all connected devices.
  
 == Uninstalling app from device
 adb uninstall com.myAppPackage
 adb uninstall <app .apk name>
 adb uninstall -k <app .apk name> -> “Uninstall .apk withour deleting data”
  
 adb shell pm uninstall com.example.MyApp
 adb shell pm clear [package] // Deletes all data associated with a package.
  
 adb devices | tail -n +2 | cut -sf 1 | xargs -IX adb -s X uninstall com.myAppPackage //Uninstall the given app from all connected devices
  
 == Update app
 adb install -r yourApp.apk // -r means re-install the app and keep its data on the device.
 adb install –k <.apk file path on computer>
  
 == Home button
 adb shell am start -W -c android.intent.category.HOME -a android.intent.action.MAIN
  
 == Activity Manager
 adb shell am start -a android.intent.action.VIEW
 adb shell am broadcast -a ‘my_action’
  
 adb shell am start -a android.intent.action.CALL -d tel:+972527300294 // Make a call
  
 // Open send sms screen with phone number and the message:
 adb shell am start -a android.intent.action.SENDTO -d sms:+972527300294 –es sms_body “Test –ez exit_on_sent false
  
 // Reset permissions
 adb shell pm reset-permissions -p your.app.package
 adb shell pm grant [packageName] [ Permission] // Grant a permission to an app.
 adb shell pm revoke [packageName] [ Permission] // Revoke a permission from an app.
  
  
 // Emulate device
 adb shell wm size 2048×1536
 adb shell wm density 288
 // And reset to default
 adb shell wm size reset
 adb shell wm density reset
  
 == Print text
 adb shell input text ‘Wow, it so cool feature’
  
 == Screenshot
 adb shell screencap -p /sdcard/screenshot.png
  
 $ adb shell
 shell@ $ screencap /sdcard/screen.png
 shell@ $ exit
 $ adb pull /sdcard/screen.png
  
 —
 adb shell screenrecord /sdcard/NotAbleToLogin.mp4
  
 $ adb shell
 shell@ $ screenrecord –verbose /sdcard/demo.mp4
 (press Control + C to stop)
 shell@ $ exit
 $ adb pull /sdcard/demo.mp4
  
 == Key event
 adb shell input keyevent 3 // Home btn
 adb shell input keyevent 4 // Back btn
 adb shell input keyevent 5 // Call
 adb shell input keyevent 6 // End call
 adb shell input keyevent 26 // Turn Android device ON and OFF. It will toggle device to on/off status.
 adb shell input keyevent 27 // Camera
 adb shell input keyevent 64 // Open browser
 adb shell input keyevent 66 // Enter
 adb shell input keyevent 67 // Delete (backspace)
 adb shell input keyevent 207 // Contacts
 adb shell input keyevent 220 / 221 // Brightness down/up
 adb shell input keyevent 277 / 278 /279 // Cut/Copy/Paste
  
 0 –> “KEYCODE_0”
 1 –> “KEYCODE_SOFT_LEFT”
 2 –> “KEYCODE_SOFT_RIGHT”
 3 –> “KEYCODE_HOME”
 4 –> “KEYCODE_BACK”
 5 –> “KEYCODE_CALL”
 6 –> “KEYCODE_ENDCALL”
 7 –> “KEYCODE_0”
 8 –> “KEYCODE_1”
 9 –> “KEYCODE_2”
 10 –> “KEYCODE_3”
 11 –> “KEYCODE_4”
 12 –> “KEYCODE_5”
 13 –> “KEYCODE_6”
 14 –> “KEYCODE_7”
 15 –> “KEYCODE_8”
 16 –> “KEYCODE_9”
 17 –> “KEYCODE_STAR”
 18 –> “KEYCODE_POUND”
 19 –> “KEYCODE_DPAD_UP”
 20 –> “KEYCODE_DPAD_DOWN”
 21 –> “KEYCODE_DPAD_LEFT”
 22 –> “KEYCODE_DPAD_RIGHT”
 23 –> “KEYCODE_DPAD_CENTER”
 24 –> “KEYCODE_VOLUME_UP”
 25 –> “KEYCODE_VOLUME_DOWN”
 26 –> “KEYCODE_POWER”
 27 –> “KEYCODE_CAMERA”
 28 –> “KEYCODE_CLEAR”
 29 –> “KEYCODE_A”
 30 –> “KEYCODE_B”
 31 –> “KEYCODE_C”
 32 –> “KEYCODE_D”
 33 –> “KEYCODE_E”
 34 –> “KEYCODE_F”
 35 –> “KEYCODE_G”
 36 –> “KEYCODE_H”
 37 –> “KEYCODE_I”
 38 –> “KEYCODE_J”
 39 –> “KEYCODE_K”
 40 –> “KEYCODE_L”
 41 –> “KEYCODE_M”
 42 –> “KEYCODE_N”
 43 –> “KEYCODE_O”
 44 –> “KEYCODE_P”
 45 –> “KEYCODE_Q”
 46 –> “KEYCODE_R”
 47 –> “KEYCODE_S”
 48 –> “KEYCODE_T”
 49 –> “KEYCODE_U”
 50 –> “KEYCODE_V”
 51 –> “KEYCODE_W”
 52 –> “KEYCODE_X”
 53 –> “KEYCODE_Y”
 54 –> “KEYCODE_Z”
 55 –> “KEYCODE_COMMA”
 56 –> “KEYCODE_PERIOD”
 57 –> “KEYCODE_ALT_LEFT”
 58 –> “KEYCODE_ALT_RIGHT”
 59 –> “KEYCODE_SHIFT_LEFT”
 60 –> “KEYCODE_SHIFT_RIGHT”
 61 –> “KEYCODE_TAB”
 62 –> “KEYCODE_SPACE”
 63 –> “KEYCODE_SYM”
 64 –> “KEYCODE_EXPLORER”
 65 –> “KEYCODE_ENVELOPE”
 66 –> “KEYCODE_ENTER”
 67 –> “KEYCODE_DEL”
 68 –> “KEYCODE_GRAVE”
 69 –> “KEYCODE_MINUS”
 70 –> “KEYCODE_EQUALS”
 71 –> “KEYCODE_LEFT_BRACKET”
 72 –> “KEYCODE_RIGHT_BRACKET”
 73 –> “KEYCODE_BACKSLASH”
 74 –> “KEYCODE_SEMICOLON”
 75 –> “KEYCODE_APOSTROPHE”
 76 –> “KEYCODE_SLASH”
 77 –> “KEYCODE_AT”
 78 –> “KEYCODE_NUM”
 79 –> “KEYCODE_HEADSETHOOK”
 80 –> “KEYCODE_FOCUS”
 81 –> “KEYCODE_PLUS”
 82 –> “KEYCODE_MENU”
 83 –> “KEYCODE_NOTIFICATION”
 84 –> “KEYCODE_SEARCH”
 85 –> “KEYCODE_MEDIA_PLAY_PAUSE”
 86 –> “KEYCODE_MEDIA_STOP”
 87 –> “KEYCODE_MEDIA_NEXT”
 88 –> “KEYCODE_MEDIA_PREVIOUS”
 89 –> “KEYCODE_MEDIA_REWIND”
 90 –> “KEYCODE_MEDIA_FAST_FORWARD”
 91 –> “KEYCODE_MUTE”
 92 –> “KEYCODE_PAGE_UP”
 93 –> “KEYCODE_PAGE_DOWN”
 94 –> “KEYCODE_PICTSYMBOLS”
 …
 122 –> “KEYCODE_MOVE_HOME”
 123 –> “KEYCODE_MOVE_END”
 // https://developer.android.com/reference/android/view/KeyEvent.html
  
  
 == ShPref
 # replace org.example.app with your application id
  
 # Add a value to default shared preferences.
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es key key_name –es value “hello world!”‘
  
 # Remove a value to default shared preferences.
 adb shell ‘am broadcast -a org.example.app.sp.REMOVE –es key key_name’
  
 # Clear all default shared preferences.
 adb shell ‘am broadcast -a org.example.app.sp.CLEAR –es key key_name’
  
 # It’s also possible to specify shared preferences file.
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es name Game –es key level –ei value 10’
  
 # Data types
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es key string –es value “hello world!”‘
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es key boolean –ez value true’
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es key float –ef value 3.14159’
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es key int –ei value 2015’
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es key long –el value 9223372036854775807’
  
 # Restart application process after making changes
 adb shell ‘am broadcast -a org.example.app.sp.CLEAR –ez restart true’
  
 == Monkey
 adb shell monkey -p com.myAppPackage -v 10000 -s 100 // monkey tool is generating 10.000 random events on the real device
  
 == Paths
 /data/data/<package>/databases (app databases)
 /data/data/<package>/shared_prefs/ (shared preferences)
 /data/app (apk installed by user)
 /system/app (pre-installed APK files)
 /mmt/asec (encrypted apps) (App2SD)
 /mmt/emmc (internal SD Card)
 /mmt/adcard (external/Internal SD Card)
 /mmt/adcard/external_sd (external SD Card)
  
 adb shell ls (list directory contents)
 adb shell ls -s (print size of each file)
 adb shell ls -R (list subdirectories recursively)
  
 == Device onformation
 adb get-statе (print device state)
 adb get-serialno (get the serial number)
 adb shell dumpsys iphonesybinfo (get the IMEI)
 adb shell netstat (list TCP connectivity)
 adb shell pwd (print current working directory)
 adb shell dumpsys battery (battery status)
 adb shell pm list features (list phone features)
 adb shell service list (list all services)
 adb shell dumpsys activity <package>/<activity> (activity info)
 adb shell ps (print process status)
 adb shell wm size (displays the current screen resolution)
 dumpsys window windows | grep -E ‘mCurrentFocus|mFocusedApp’ (print current app’s opened activity)
  
 == Package info
 adb shell list packages (list package names)
 adb shell list packages -r (list package name + path to apks)
 adb shell list packages -3 (list third party package names)
 adb shell list packages -s (list only system packages)
 adb shell list packages -u (list package names + uninstalled)
 adb shell dumpsys package packages (list info on all apps)
 adb shell dump <name> (list info on one package)
 adb shell path <package> (path to the apk file)
  
 ==Configure Settings Commands
 adb shell dumpsys battery set level <n> (change the level from 0 to 100)
 adb shell dumpsys battery set status<n> (change the level to unknown, charging, discharging, not charging or full)
 adb shell dumpsys battery reset (reset the battery)
 adb shell dumpsys battery set usb <n> (change the status of USB connection. ON or OFF)
 adb shell wm size WxH (sets the resolution to WxH)
  
  
 == Device Related Commands
 adb reboot-recovery (reboot device into recovery mode)
 adb reboot fastboot (reboot device into recovery mode)
 adb shell screencap -p “/path/to/screenshot.png” (capture screenshot)
 adb shell screenrecord “/path/to/record.mp4” (record device screen)
 adb backup -apk -all -f backup.ab (backup settings and apps)
 adb backup -apk -shared -all -f backup.ab (backup settings, apps and shared storage)
 adb backup -apk -nosystem -all -f backup.ab (backup only non-system apps)
 adb restore backup.ab (restore a previous backup)
 adb shell am start|startservice|broadcast <INTENT>[<COMPONENT>]
 -a <ACTION> e.g. android.intent.action.VIEW
 -c <CATEGORY> e.g. android.intent.category.LAUNCHER (start activity intent)
  
 adb shell am start -a android.intent.action.VIEW -d URL (open URL)
 adb shell am start -t image/* -a android.intent.action.VIEW (opens gallery)
  
 == Logs
 adb logcat [options] [filter] [filter] (view device log)
 adb bugreport (print bug reports)
  
 == Other
 adb backup // Create a full backup of your phone and save to the computer.
 adb restore // Restore a backup to your phone.
 adb sideload // Push and flash custom ROMs and zips from your computer.
  
 fastboot devices
 // Check connection and get basic information about devices connected to the computer.
 // This is essentially the same command as adb devices from earlier.
 //However, it works in the bootloader, which ADB does not. Handy for ensuring that you have properly established a connection.
  
  
 ——————————————————————————–
 Shared Preferences
  
 # replace org.example.app with your application id
  
 # Add a value to default shared preferences.
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es key key_name –es value “hello world!”‘
  
 # Remove a value to default shared preferences.
 adb shell ‘am broadcast -a org.example.app.sp.REMOVE –es key key_name’
  
 # Clear all default shared preferences.
 adb shell ‘am broadcast -a org.example.app.sp.CLEAR –es key key_name’
  
 # It’s also possible to specify shared preferences file.
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es name Game –es key level –ei value 10’
  
 # Data types
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es key string –es value “hello world!”‘
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es key boolean –ez value true’
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es key float –ef value 3.14159’
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es key int –ei value 2015’
 adb shell ‘am broadcast -a org.example.app.sp.PUT –es key long –el value 9223372036854775807’
  
 # Restart application process after making changes
 adb shell ‘am broadcast -a org.example.app.sp.CLEAR –ez restart true’
 ——————————————————————————–
  
 === Few bash snippets ===
 @Source (https://jonfhancock.com/bash-your-way-to-better-android-development-1169bc3e0424)
  
 === Using tail -n
 //Use tail to remove the first line. Actually two lines. The first one is just a newline. The second is “List of devices attached.”
 $ adb devices | tail -n +2
  
 === Using cut -sf
 // Cut the last word and any white space off the end of each line.
 $ adb devices | tail -n +2 | cut -sf -1
  
 === Using xargs -I
 // Given the -I option, xargs will perform an action for each line of text that we feed into it.
 // We can give the line a variable name to use in commands that xargs can execute.
 $ adb devices | tail -n +2 | cut -sf -1 | xargs -I X echo X aw yiss
  
 === Three options below together
 // Will print android version of all connected devices
 adb devices | tail -n +2 | cut -sf -1 | xargs -I X adb -s X shell getprop ro.build.version.release
  
 === Using alias
 — Example 1
 alias tellMeMore=echo
 tellMeMore “hi there”
 Output => hi there
 — Example 2
 // Define alias
 alias apkinstall=”adb devices | tail -n +2 | cut -sf 1 | xargs -I X adb -s X install -r $1″
 // And you can use it later
 apkinstall ~/Downloads/MyAppRelease.apk // Install an apk on all devices
 — Example 3
 alias rmapp=”adb devices | tail -n +2 | cut -sf 1 | xargs -I X adb -s X uninstall $1″
 rmapp com.example.myapp // Uninstall a package from all devices
 — Example 4
 alias clearapp=”adb devices | tail -n +2 | cut -sf 1 | xargs -I X adb -s X shell pm clear $1″
 clearapp com.example.myapp // Clear data on all devices (leave installed)
 — Example 5
 alias startintent=”adb devices | tail -n +2 | cut -sf 1 | xargs -I X adb -s X shell am start $1″
 startintent https://twitter.com/JonFHancock // Launch a deep link on all devices
  
  
 Setting up your .bash_profile
 Finally, to make this all reusable even after rebooting your computer (aliases only last through the current session), we have to add these to your .bash_profile. You might or might not already have a .bash_profile, so let’s make sure we append to it rather than overwriting it. Just open a terminal, and run the following command
  
 touch .bash_profile && open .bash_profile
  
 This will create it if it doesn’t already exist, and open it in a text editor either way. Now just copy and paste all of the aliases into it, save, and close.
  
 alias startintent=”adb devices | tail -n +2 | cut -sf 1 | xargs -I X adb -s X shell am start $1″
 alias apkinstall=”adb devices | tail -n +2 | cut -sf 1 | xargs -I X adb -s X install -r $1″
 alias rmapp=”adb devices | tail -n +2 | cut -sf 1 | xargs -I X adb -s X uninstall $1″
 alias clearapp=”adb devices | tail -n +2 | cut -sf 1 | xargs -I X adb -s X shell pm clear $1″
  
  
 ===============================================================
 Sources:
 – Internet
 – https://www.automatetheplanet.com/adb-cheat-sheet/

How to run Windows on Android Tablet

Posted on by

Top 5 Best Cross-Platform Mobile Development Tools

Posted on by

Information based on AppIndex.com and Wikipedia:

Xamarin Inc..zpoh_xamarin-logo-hexagon-blue

With a C# shared codebase, developers can use Xamarin tools to write native iOS, Android, and Windows apps with native user interfaces and share code across multiple platforms.[4] Xamarin has over 1 million developers in more than 120 countries around the world as of May 2015.[5] 

http://xamarin.com/

In software development, PhoneGap is a mobile development framework created by Nitobi. Adobe Systems purchased Nitobi in 2011.[3][4] It enables software programmers to build applications for mobile devices using JavaScript, HTML5, and CSS3, instead of relying on platform-specific APIs like those in iOS, Windows Phone, or Android.[5] It enables wrapping up of HTML, CSS, and Javascript code depending upon the platform of the device. It extends the features of HTML and Javascript to work with the device. The resulting applications are hybrid, meaning that they are neither truly native mobile application (because all layout rendering is done via web views instead of the platform’s native UI framework) nor purely web-based (because they are not just web apps, but are packaged as apps for distribution and have access to native device APIs). Mixing native and hybrid code snippets has been possible since version 1.9.

The software underlying PhoneGap is Apache Cordova.[6] The software was previously called just “PhoneGap”, then “Apache Callback”.[7][8] Asopen-source software, Apache Cordova allows non-Adobe wrappers around it, such as Intel XDK or Appery.io.

http://phonegap.com/

appc-logo-landscape-light

Appcelerator is a privately held mobile technology company based in Mountain View, California. Its main products are Titanium, an open-source software development kit for cross-platform mobile development, and the Appcelerator Platform, a mobile engagement platform that provides cross-platform native mobile app development using JavaScript, mobile backend as a service (MBaaS), mobile test automation, crash detection and performance management, and mobile analytics.

http://www.appcelerator.com/

ifactrbrandwhite

iFactr provides the only mobile platform that supports both legacy and modern Windows as well as iOS and Android. Whether building new apps or modernizing existing systems, iFactr was designed from the ground-up for mission-critical enterprise line-of-business apps, providing rich, native experiences for every platform and support for critical sensors on rugged devices like barcode scanning and geolocation.

http://ifactr.com/

Qt is a cross-platform application development framework for desktop, embedded and mobile. Supported Platforms include Linux, OS X, Windows, VxWorks, QNX, Android, iOS, BlackBerry, Sailfish OS and others.

https://wiki.qt.io/Main_Page

 

Based on:

http://appindex.com/blog/ten-best-cross-platform-development-mobile-enterprises/

http://wp.flash-jet.com/2015/08/12/qt5-what-is-it/

Build Android App with PhoneGap

Posted on by

Build Android App with PhoneGap

01 – Install JDK

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

02 – Install Android Studio

http://developer.android.com/sdk/index.html#top

03 – Install Node.JS

http://nodejs.org/download/

04 – Install PhoneGap

Open command prompt and write there:

C:> npm install -g phonegap

05 – Install Cordova

 C:>npm install -g cordova

06 – Create new phonegap project :

Open command prompt and write there:

phonegap create [Path]+[Package Name]+Project name

For example:
phonegap create c:androidphonegap_test com.phonegap.test001 phonegaptest001

07 – Enter to directory of created project:

If you created a project at c:androidphonegap_test then change directory to there by command prompt:
c:
cd
cd androidphonegap_test

08 – Run command prompt again:

At command prompt write:
c:> phonegap platform add android

This will install phonegap android at local directory of our example: c:androidphonegap_test

09 Import project to Android Studio:

Select "import Non-Android Studio project"
Click Point to project directory and click on Next->Next...

10 – Place you HTML/Javascript code under Assetswww folder.

11 – That’s it

JQuery Mobile – Lesson 05 – Navbar – Buttons and more

Posted on by

JQuery Mobile – Lesson 05 – Navbar – Buttons and more

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05

1. At this lesson we will continue from Lesson 03.

2. Here is the HTML Code from Lesson 03 with changes marked with RED color:

A navbar will appear with two buttons.

You can also download the following content as a file from HERE.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1" data-theme="b">
       <div data-role="header">
       <h1>Page 1 header</h1>
          <div data-role="navbar">
             <ul>
                <li><a href="#page1">Home</a></li>
                <li><a href="#page2">Contact</a></li>
             </ul>
          </div>             
       </div> 
       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       <a href="#page2" data-transition="flow">page 2</a>      
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2" data-theme="b">
       <div data-role="header">
       <h1>Page 2 header</h1>
          <div data-role="navbar"> 
            <ul>
               <li><a href="#page1">Home</a></li>
               <li><a href="#page2">Contact</a></li>
            </ul>
           </div>
    </div>        
    <div data-role="main" class="ui-content">
        <h1>Page 2 Main</h1>        
           <a href="#page1" data-transition="flow">page 1</a>        
    </div>        
    <div data-role="footer">        
      <h1>Page 2 footer</h1>        
   </div>     
</div> 
</body> 
</html>

3. Now let’s add icons to the navbar by adding to the following line, we will see buttons with icon of grid:

<li><a href="#page1" data-icon="grid">Home</a></li>

Click on this link for list of icons
4. At this point we can remove the following lines under data-role=”main”:

<a href=”#page1″ data-transition=”flow”>page 1</a>

5. Now let’s add the following block code under data=role=”main”:

<div data-role="collapsible">
  <h1>Click here to view what is under this button</h1>
  <p>There is nothing here</p>
</div>

Here is an example of collapsible:

6. At this point add the code mark with RED color, you code suppose to be look like the following:

Copy & Paste the following and see what is the output:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Page title</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 
<body> 
<div data-role="page" id="page1" data-theme="a"> 
<div data-role="header"> 
<h1>Page 1 header</h1> 
<div data-role="navbar"> 
<ul> 
<li><a href="#page1" data-icon="action">Home</a></li> 
<li><a href="#page2" data-icon="alert">Contact</a></li> 
</ul> 
</div> 
</div> 
<div data-role="main" class="ui-content"> 
<h1>Page 1 Main</h1> 
 <div data-role="collapsible">
 <h1>Click here to view what is under this button</h1>
 <p>There is nothing here</p>
 </div>
</div> 
<div data-role="footer"> 
<h1>Page 1 footer</h1> 
</div> 
</div> 
 <div data-role="page" id="page2" data-theme="a"> 
 <div data-role="header"> 
 <h1>Page 2 header</h1> 
 <div data-role="navbar"> 
 <ul> 
 <li><a href="#page1" data-icon="grid">Home</a></li> 
 <li><a href="#page2" data-icon="grid">Contact</a></li> 
 
 </ul> 
 </div> 
 </div> 
 <div data-role="main" class="ui-content"> 
 <h1>Page 2 Main</h1> 
 <form>
 <textarea></textarea>
 <input type="range" min="0" max="10">
 <input type="submit" value="submit button">
 </form>
 </div> 
 <div data-role="footer"> 
 <h1>Page 2 footer</h1> 
 </div> 
 </div> 
</body> 
</html>

JQuery Mobile – Lesson 04 – Themes

Posted on by

JQuery Mobile – Lesson 04 – Themes

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05

1. Here We will learn about JQuery Mobile Themes.

2. Browse to http://themeroller.jquerymobile.com/

3. Select a Theme or click on Add Swatch to create new theme, looks at the rights side of the following picture:

4. Drag colors from colors plate directly to the new created swatch, theme.

5. Once finished designing the theme then click of download button, then you will see the following picture:

6. At picture at #5 copy and paste the two lines that starts with <link rel=.

7. Download the ZIP file.

8. Open the downloaded ZIP file and copy the directory THEME from there and place it next to index.html file.

9. At index.html file replace the line that starts with  <link rel=, replace it with the two lines from #6.

10. Index.html should look like the following:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title> 
<!--
1. Remove The css/.
2. Change my-custom-theme to the name that you selected at http://themeroller.jquerymobile.com/
3. Add to page div data-theme with the swatch leffter that you selected.
-->
<link rel="stylesheet" href="css/themes/my-custom-theme.css" />
 <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1" data-theme="d">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       <a href="#page2" data-transition="flow">page 2</a>      
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2" data-theme="d">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       <a href="#page1" data-transition="flow">page 1</a>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

11. At the lines that starts with <link rel.., remove “css/”, as shwon at #10.

12. Change my-custom-theme.css to a theme name that you selected at :

http://themeroller.jquerymobile.com/

13. Add data-theme to the page div as shown at #10.

JQuery Mobile – Lesson 03 – Transitions

Posted on by

JQuery Mobile – Lesson 03 – Transitions

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05

1. In continuation to Lesson 02, here you will see a demo of transitions.

2. We will use the last HTML file that has been created at the last lesson with addition of the red tags below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       <a href="#page2" data-transition="flow">page 2</a>      
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       <a href="#page1" data-transition="flow">page 1</a>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

3. Replace the transition with the transitions below:

fade Default. Fades to the next page
flip Flips to the next page from back to front
flow Throws the current page away and comes in with the next page
pop Goes to the next page like a popup window
slide Slides to the next page from right to left
slidefade Slides from right to left and fades in the next page
slideup Slides to the next page from bottom to top
slidedown Slides to the next page from top to bottom
turn Turns to the next page
none No transition effect

JQuery Mobile – Lesson 02 – Switching between pages

Posted on by

JQuery Mobile – Lesson 02 – Switching between pages

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05

1. In continuation to Lesson 01, We will learn how to switch between div pages.

2. Let’s give each page an different ID:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

3. After adding the tags (marked red) below, you should browse from one page to the other:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page" id="page1">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       <a href="#page2">page 2</a>      
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page" id="page2">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       <a href="#page1">page 1</a>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

JQuery Mobile – Lesson 01 – Basic page Template

Posted on by

JQuery Mobile – Lesson 01 – Basic page Template

Lesson 01 | Lesson 02 | Lesson 03 | Lesson 04 | Lesson 05

1. <Optional> Download JQuery Mobile from http://jquerymobile.com/download/.

2. Or just the use the following code between <head> tags of HTML document:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

3. Use the following HTML5 template:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>Page title</title>
 </head>
 <body>
</body>
</html>

4. Add data-role div for page, header, main and footer to every page at your application according to the following template:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page">
       <div data-role="header">
       </div>

       <div data-role="main" class="ui-content">
       </div>

       <div data-role="footer">
       </div>
    </div>
</body>
</html>

5. Try the following code which is the same as #4 but with two divs of page:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page">
       <div data-role="header">
       <h1>Page 1 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 1 Main</h1>
       </div>

       <div data-role="footer">
       <h1>Page 1 footer</h1>
       </div>
    </div>

    <div data-role="page">
       <div data-role="header">
       <h1>Page 2 header</h1>
       </div>

       <div data-role="main" class="ui-content">
       <h1>Page 2 Main</h1>
       </div>

       <div data-role="footer">
       <h1>Page 2 footer</h1>
       </div>
    </div>
</body>
</html>

6. As you can see, div of page 2 is not visible.

Mobile development resources

Posted on by

Native

Android
01 - 77  videos (Dec/2014) https://www.thenewboston.com/videos.php?cat=278
02 - 200 videos (Aug/2011) https://www.thenewboston.com/videos.php?cat=6
03 - 25 videos Android Development for Beginners 
04 - 42 videos Android Development Tutorial
05 - 29 videos How to Make Android Apps
Apple
01 - https://www.thenewboston.com/videos.php?cat=28

Multi Platform

01 - MS Visual Studio - Apache Cordova Template
02 - PhoneGap
03 - Intel XDK
04 - Link a: Ionic - Link b: Ionic Code samples

General

01 - http://wp.flash-jet.com/the-five-best-ways-to-develop-enterprise-mobile-apps
02 - https://www.youtube.com/user/cogee/playlists - HTML / JavaScript / JQuery Mobile / Many more
03 - http://www.w3schools.com/jquerymobile/default.asp
04 - http://demos.jquerymobile.com/1.4.5/
05 - http://www.codenutz.com/getting-started-phonegap-android-studio/ - how to install and run App on android studio with phoneGAP
06 - http://wp.flash-jet.com/build-android-app-with-phonegap/

THE FIVE BEST WAYS TO DEVELOP ENTERPRISE MOBILE APPS

Posted on by

THE FIVE BEST WAYS TO DEVELOP ENTERPRISE MOBILE APPS

With the advancement of technology, the way to build enterprise apps and mobile apps is changing. There is no right or wrong way to develop mobile apps, and the way you choose to develop your app will depend on your needs, like how many backend systems you need to integrate, is your app going to be Native, HTML5, or a hybrid of the two, and so forth.

FIVE WAYS ENTERPRISES ARE BUILDING MOBILE APPS

1. CUSTOM NATIVE APPS

We’ve found most enterprise mobile apps are custom built. For years, this has been the only way to develop an app for a specific business need. One of the fastest ways to custom build native apps is using a device-side SDK like iOS SDK or Android SDK.

If you need an app to run in iOS, Android, Blackberry, and Windows, you have to basically develop the app 4 times, once for each OS. Obviously, this is a time consuming way to develop a mobile app. More important than the time it takes to replicate the code for each SDK is the inevitable error and bug list that follows trying to morph code into different platforms.

Once the app is completed, backend integration is required, which opens a lot of security concerns. The backend integration with user authorizations and connectivity is complicated, not only because of the complex work, but also because all enterprise systems, whether on-premise or cloud apps, were never built for mobile consumption.

Enterprise systems have traditionally been designed for data exchange between two applications. However, mobile apps need small subsets of data, and often context-aware data. To integrate mobile apps requires modifications to the backend application, or hand-coding and building logic for the integration between the mobile app and the backend application.

The integration can take from 50% to 70% of the development effort. Even with a dedicated set of developers it can literally take months to build a single app.

2. CROSS-PLATFORM DEVELOPMENT

Most companies have realized the long cycles in traditional development and have started taking advantage of cross-platform development tools to build mobile apps. It’s possible to build Native apps, as well as HTML5 apps, and Hybrid apps using cross-platform tools.

HTML5 apps by nature are cross-platform, but HTML5 lacks the ability to leverage all the capabilities and sensors of mobile devices. Native apps, on the other hand, can effectively use all the capabilities of the mobile device it runs on.

Cross-platform tools like Xamarin and Titanum/Appcelerator allows a developer to write code once, and then generate code for all 4 smartphone operating systems. This allows a developer to cut down the time spent writing 4 versions of the app, while still being able to execute native apps across all devices.

While this speeds up the development time considerably, it still doesn’t solve the bigger problem of enterprise integration and security.

There is a third alternative, called hybrid apps. It’s a combination of native apps and HTML5. In Hybrid apps, device specific containers are used to communicate to each device and leverage the native sensors and capabilities of that device while keeping the user interface in HTML5.

The most well-known tool for developing cross-platform hybrid apps is Apache Cordova, or PhoneGap. Using PhoneGap, the code is written once and executed in all four operating systems without generating separate code for each device.

Hybrid apps provide all the advantages of native apps without the hassle to maintain seperate code-bases for every device. However, like we mentioned before, no matter which approach you take, the larger problem is still data integration, security, and authentication with enterprise applications.

3. MOBILE APPLICATION DEVELOPMENT PLATFORM (MADP)

A third option for building enterprise apps is to use an integrated application development platform. MADP’s are specifically built for enterprise apps and provide an integrated environment to build apps as well as provide integration and security between the mobile app and enterprise applications.

MDAP provides a one-stop solution for enterprises to build integrated mobile apps. However, the main problem we’ve found with using MADP’s is they are built on legacy software architectures. They almost always use proprietary technologies that never keep up with mobile device capabilities. Most MDAP’s are not nearly as sophisticated in capability as the cross-platform development kits.

Probably the most negative aspect of MDAP’s is their integration capability are limited to their proprietary technology. This means, customers are forever locked in to that vendor’s technology. MADP typically requires an IT procurement of servers and an army of developers trained to build and maintain apps. This has turned out to be very expensive for customers and usually resulted in lengthy development and deployment cycles.

4. BACKEND-AS-A-SERVICE (BAAS)

In the last few years, another alternative has become available which solves enterprise integration problems for cross-development platforms, called Backed-as-a-Service. Because MDAP was very expensive and laborious to maintain, many vendors switched to BaaS services to augment their cross-platform development tools.

BaaS provides various enterprise integrations along with security and user authentication. Developers can leverage BaaS services along with their cross-platform tools to develop integrated enterprise mobile apps that can run on any device. Developers can now simply call BaaS services to integrate their apps into enterprise applications without worrying about the backend.

However, there is no perfect solution and even BaaS has it’s problems to overcome. With BaaS, it’s easy to integrate with cloud systems, but it’s still super-difficult to integrate to an on-premise enterprise application. In the real world, most of these backend enterprise applications are either customized or do not have the right API’s for integration. They need enhancements to mobile-enable them. This is what makes mobilizing traditional, on-premise applications difficult.

Also, a customer must buy and maintain at least 2 tools, the cross-platform development tool, and a BaaS service in order to develop and roll out each app. This means 2 teams of developers, maintenance, and the list goes on.

5. MODEL-DRIVEN PLATFORM-AS-A-SERVICE (PAAS)

The 5th way to build integrated enterprise mobile apps is with a model-driven platform, which is the newest of all five development methods. This is the system appsFreedom was built to provide.

Essentially, a model-driven platform with complete app lifecycle management capabilities enables non-professional programmers, or citizen developers, to build integrated enterprise mobile apps by modeling the business logic, and allowing the platform to generate the code in the background.

The most obvious benefits of using the appsFreedom platform is:

It Requires Less Resources

Because the platform is model-driven, it generates the code in the background. This allows any tech-savvy person, like an analyst or citizen developer, to build full-featured, fully-integrated apps without any coding.

IT departments can do away with many of the backlog projects without bogging down their developer resources, + Add New Categoryallowing them to leverage developers for complex and sophisticated projects.

It Makes Integration Easy

The appsFreedom platform is engineered to seamlessly integrate with enterprise applications, both on-premise and in the cloud. This can be accomplished, literally, in days where other methods of app development can take months just on the integration.

Which Method is Best For You?

Figuring out which method is best for you really depends on your requirements and what you want the app to do.