iscroll4

jQuery Mobile

Attention ceci ne va marche que dans l’emulateur ios ou sur un mobile iphone ou ipad.

Pour faire un pinchzoom avec iscroll4 dans jqm il faut ajouter un div suplémentaire dans le content comme ceci avec l’id view.

1
2
3
4
5
6
7
8
9
10

<div id="pdf" data-role="page">
    <div data-tap-toggle="false" data-role="header" data-theme="d" data-position="fixed">                                    
        <h1>title</h1>
    </div>
    <div data-role="content" class="content" id="view">
        <div id="scroller">
            <img src="yourpicture.jpg" alt="" />
        </div>
    </div>
</div>

Ensuite ajouter ceci à vos CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#view{
    position:absolute;
    z-index:1;
    padding: 0;
    top:5px;
    bottom:5px;
    left:0;    
    overflow:auto;
    width:100%;
}
#scroller
{
    position:relative;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
}

Pour activer le pinchzoom avec iscroll.

1
2
3
4
5

var pinchZoom = new iScroll('view', {
  zoom: true,
  hScrollbar: true,
  vScrollbar: true
});

Pensez à vider la mémoire des pinchzoom non utilisé comme ceci, car ça consomme beaucoup.

1
2
3
4
5

if(pinchZoom)
{
  pinchZoom.destroy();
  pinchZoom = null;
}

A télécharger ici http://sqlitebrowser.sourceforge.net/

Vous trouverez la base de donnée de votre application dans ce repetoire

/Users/YOUR_NAME/Library/Application\ Support/iPhone\ Simulator/6.1/Applications/ID_IOS_APP/Library/WebKit/LocalStorage/file__0/0000000000000001.db

Ouvrez ce fichier avec SQLITE Browser pour afficher son contenu.

C’est un super simple et super légé template-engine.

Comment ça marche ?

Tout d’abord, ajouter à votre page html un template comme ceci, n’oubliez pas d’ajouter la class tpl , elle est utilisée pour identifier les templates dans la page.

1
2
3
4
5
6

<script type="text/template" class="tpl" id="tplTest">
  <div class="box">
    <strong>Nickname</strong> : {nickname}<br />
    <strong>Age</strong> : {age}<br />
  </div>
</script>

Pour démarrer le moteur, voici ce qu’il faut faire

1

template.initialize();

Pour récupérer un template.

1

var _tpl = template.getTemplate('tplTest');

avec un objet JSON c’est facile d’injecter du contenu.

1
2
3
4
5
6
7
8
9
10

var obj = [
  {nickname:'discoboyz',age:22},
  {nickname:'mariloo',age:25},
  {nickname:'funkybrother',age:35}
];
$(obj).each(function()
{
  var _h = template.format(_tpl,this);
  $('#content').append(_h);
});

Télécharger depuis github

Demo

Je devais pouvoir mettre a jour des fichiers locaux ou assets dans l’application. Le problème c’est que j’ai découvert qu’il n’était pas autorisé de le faire dans le répertoire www de phonegap.

Par contre il y a 2 répertoires Documents et tmp qui le sont.

Du coup un autre problème arrive, celui de pouvoir accéder depuis l’application (www) au fichier Documents ou tmp qui sont placé au même niveau que www.

Pour commencer voici de quoi récupérer tout les path.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var mediapath,  // the app documents path 
    tmppath,    // the app tmp path
    imagepath;  // the medias file path
 
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
  function (fileSystem)
  {
    var entry=fileSystem.root;
    var p = entry.fullPath.split('Documents');
    mediapath = entry.fullPath+'/'; 
    tmppath = p[0]+'tmp/';  
    imagepath = 'file://'+mediapath; 
  }, null
);

Les path mediapath et tmppath seront utilisé pour telecharger ou dezipper des fichiers sans aucun problème.

Pensez toutefois à donner un nom de fichier à vos target dans le téléchargement et l’unzip au risque d’avoir une erreur (code 2).

Tout vos fichiers placés dans le répertoire Documents seront accessible par imagepath mais cela fonctionnera uniquement dans le simulateur ios ou sur ipad/iphone.

1

var mypic = '<img src="'+imagepath+'myfile.jpg" alt="" />';

plus d’info ici : http://www.cyrilpereira.com/webservicesjs/

GitHub :

Ouvrir dans une nouvelle fenetre

Voici les class à importer pour initialiser le projet, HoverCamera3D pour manipuler la camera, View3D pour le viewport, ColorMaterial pour appliquer le material sur les meshes, Torus pour le mesh du torus, Trident pour le mesh du trident affichant le sens de la scene 3D, DirectionalLight3D pour la lumiére, ShadingColorMaterial pour la type de rendu.

1
2
3
4
5
6
7
8

import away3d.cameras.HoverCamera3D;
import away3d.containers.View3D;
import away3d.materials.ColorMaterial;
import away3d.primitives.Torus; 
import away3d.primitives.Trident;
import away3d.core.render.Renderer;
import away3d.lights.DirectionalLight3D;
import away3d.materials.ShadingColorMaterial;

Ensuite voici la liste des class de base a importer. Vectore3D pour definir des positions avec les coordonnées XYZ, Sprite pour flashdevelop, StageAlin et StageScaleMode pour le liquid layout, Event et MouseEvent pour recuperer la souris pour la camera.

11
12
13
14
15
16

import flash.geom.Vector3D;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;

Je ne vais pas vous lister l’integralité du source, mais en gros mon experience consistait à initialiser une vie, manipuler une camera a la souris, afficher des meshes et les animer.

L’affichage final se fait ainsi

131
132
133
134
135
136
137

public function onEnterFrame(e:Event):void
{	
  updateStage();
  hoverCam();
  updateAnimation();
  view.render();
}

updateStage met à jour la vue flash en liquid layout. Pour cela il faut ajouter ces 2 lignes dans le main.

38
39

this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;

Ensuite la methode updateStage met à jour la vue à chaque cycle.

104
105
106
107
108

private function updateStage():void
{
  view.x = stage.width / 2;
  view.y = stage.height / 2;
}

La methode hoverCam va nous permettre de recuperer l’evenement de la souris pour manipuler la camera.

110
111
112
113
114
115
116
117
118
119

private function hoverCam():void
{
  var cameraSpeed:Number = 0.3; // Approximately same speed as mouse movement.
  if (move) {
      camera.panAngle = cameraSpeed * (stage.mouseX - lastMouseX) + lastPanAngle;				
      camera.tiltAngle = cameraSpeed * (stage.mouseY - lastMouseY) + lastTiltAngle;
 
  }
  camera.hover();
}

On constate l’utilisation de certaines variable. Celles ci sont récupérées par un event mis dans le main qui update des varibles precise.

84
85

this.stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
this.stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

90
91
92
93
94
95
96
97
98
99
100
101
102

private function MouseDown(event:MouseEvent):void
{
  lastPanAngle 	= camera.panAngle;
  lastTiltAngle 	= camera.tiltAngle;
  lastMouseX 		= stage.mouseX;
  lastMouseY 		= stage.mouseY;
  move 			= true;
}
 
private function MouseUp(event:MouseEvent):void
{
  move = false;
}

updateAnimation va nous permettre d’animer tout les torus dans la scene. Pour cela à la création des torus je les ais pushé dans une variable qui va me permettre d’y avoir accés facilement. J’aurais tres bien pur les pusher dans un groupe, mais je voulais les animer 1 par 1 pour simuler un delay dans l’animation.

121
122
123
124
125
126
127
128
129

private function updateAnimation():void
{
  for (var r:Number = 0; r < allTorus.length; r++) 
  {
    allTorus[r].yaw(1);
    allTorus[r].roll(.5);
    allTorus[r].pitch(.8);
  }
}

La derniére methode view.render(); fait reference à view, ce qui permet de mettre à jour le viewport.

Voilà, j’éspére vous avoir donnée une idée de comment marche away3D

Télécharger le code avec projet FlashDevelop

Here is a usefull link to test your page on internet explorer http://browsershots.org.

How it works ?

you select the browsers you want to use, and select your details, like colors, depth, and more.. then submit, and you will have many screenshots as you select browsers to test.

if you are a pc users you can download all the internet explorer version here http://tredosoft.com/Multiple_IE?page=1

I tried to found a solution by javascript but finally the solution was more easy than i expected.

The solution was add just this part of code in your css file. In responsive design under 480px in width the modal will adapt correctly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@media (max-width: 480px)
{
    .modal {
        position: fixed;
        top: 3%;
        right: 3%;
        left: 3%;
        bottom: 3%;
        width: auto;
        margin: 0;
    }
    .modal-body {
        max-height: 350px;
        padding: 15px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
     }
}

get the bootstrap here http://twitter.github.com/bootstrap/

• Actionscript
• XML