How To Create A Website In Vablet (For Web) With Html And Html (For Html) On A Pc Or Mac) With A Web Browser (For Mac) On Your Computer Or Ipad Or Ipa (For Pc Or Ip

Transcription

1 HTML Integration (ios only) Phone: vablet.com This guide will show you how to integrate HTML content into your vablet experience. Here is a snapshot of 5 common options for integrating HTML: 1 Custom Brand Launch Create your own branded look when vablet is launched. Position quick links or an active ToC to specific files Go straight to your current catalog or pricing sheet Run a product demo video instantly See coding guide on page 3 of this document and coordinate with a graphic designer 2 Opening HTML(5) Website within vablet Leverage your existing HTML developed for web engagement and integrate it into your vablet sandbox. Great for a rich, multi-media sales experience - access an online web form such as a cost calculator or a project template, available oﬄine! 2 How it Works: 1. Zip up the website content and rename the extension to.zhtml 2. Make sure the home page is called: index.html 3. When uploaded to the console, you can establish settings and permissions just like any other file. When the device user opens this file, it will unzip and launch. That's it! For coding instructions, see page 3 of this User Guide. Display Live HTML If you plan to display live web content within vablet, your device must have Wi-Fi/3/4G access. Include the following syntax, in case the device does not have a Wi-Fi signal: 3 <html><head> <meta http-equiv="refresh" content="1;url= catid=1"> </head><body> This page will only be viewable when the device is connected to the Internet. </body> </html> ios ONLY

2 Phone: vablet.com HTML Coding Guide (ios only) HTML Integration 4 5 If you want to enable your HTML to send an , such as data from a webform, results from a survey, cost analysis from a calculator. Reference the sample code on page 4 of this document. Data Capture w/ HTML Forms Let s say you have an interactive form as a part of your sales process, utilized to gather feedback or input from customers on your products and/or services. Capturing the data from the form is easily integrated into the vablet mobile platform. * Create impressive, branded design of your form, using HTML Link the data fields to the vablet console (see code below) Now you have centralized deployment and reporting for your HTML form(s) Sample HTML Form <input type="text" id="vablet_your_form_field_label_goes_here"></input> Supported Field types: Multiple Choice Check Box Text Box Range Make sure the ID starts with: vablet_ (vablet and underscore symbol) BONUS: With custom vablet tags you can include signatures and photo captures in your reporting. Include this code: " " " " <div style="margin-top:10px;"><vabletsignature id="vablet_signature_test"></ VabletSignature></div>" " " " <div style="width: 200px;margin: auto;margin-top:10px;"><vabletphotoselect id="vablet_photo_test"></vabletphotoselect>" </div> * See the Capture Data Tool User Guide for integration with the vablet console.

3 HTML Coding Guide (ios only) 1 Creating the HTML File to Work with vablet Phone: [email protected] vablet.com Follow this code legend for any of the above 5 options, depending on your strategy. This is likely the code you will need for Custom Launch #1. Note: There are two options for deployment, depending on which HTML option you are integrating. Once you have authored your HTML, then either: 1) save it as a web archive file (use Safari), or 2) Zip up the website content and rename the extension to.zhtml Then submit the file(s) to the project manager to upload the content to your vablet account using the Media Uploader on the Admin Console and test the HTML on devices. Syntax 1: Open by Folder Name <a href="vabletgeneral://openfolder/demo%20videos"> Syntax 2: Open by Folder Name and Return <a href="vabletgeneral://openfolder/demo%20videos? backfoldergoestofilewithname=filetitle">! (This will change the Home icon to Back and return user to the file specified in File Title.) Syntax 3: Return to Launch Page <a href= VabletGeneral://home"> Syntax 4: Open by File ID <a href="vabletgeneral://openfile/28324"> Syntax 5: Open by File ID and Return to Invoking Page <a href="vabletgeneral://openfile/28324? returnstocalleronclose=true"> There is a file ID - called a VRL code - for each file when saved to the vablet Console. Open the file from the Media Library and you ll find the VRL code toward the bottom of your file settings. Syntax 6: Open by File Title <a href= VabletGeneral://openFileName/testname"> Syntax 7: Open by File Title and Return to Invoking Page <a href="vabletgeneral://openfilename/testdocument?returnstocalleronclose=true" Syntax 8: For Navigation Commands within a PDF or HTML File <a href="vabletgeneral://openfilename/testdocument? returnstocalleronclose=true;pagetoreturnto=15" Important Tips: These formulas are case-sensitive. If there is a space in the title of the file or folder, insert %20. Do not directly reference an external URL via the <a href> tag: i.e. <a href= > See the next page for further instruction. If you are authoring an HTML file that opens another piece of media in vablet and you wish it to return back to the current HTML page vs the Custom Launch page, make note of 4 & 6 The smaller the web archive file the faster the page will load. Consider CSS for the Button design, instead of individual graphics, for an even faster load. The dimensions for the design of the HTML file should be 1024x768 for landscape display or 768x1024 for portrait. It s easier to keep the buttons/links on the launch page within the general center area of your design, making the links visible in either orientation, when the user rotates the device.

4 Phone: vablet.com HTML Coding Guide (ios only) 4 HTML Integration <form id=" form" onsubmit="return submit ();"> Enter a single to send the test to: <input type="text" id=" input"> <input type="submit" value="submit"> </form> <script> function submit () var thetext = document.forms[0][" input"].value; if (thetext == "" thetext == null) alert("enter an "); return false; VabletNativeInterface.callNativeMethod('Send ', 'subject': 'TestSubject', 'body': 'TestBody', 'to': [thetext], 'cc': [thetext], 'bcc': [thetext], 'attachmentdatabase64encoded': 'PHRlc3Q+dGVzdCBtZTwvdGVzdD4=', attachmentname: 'test.xml', function (response), null); </script> return false;

5 HTML Coding Guide con. Phone: vablet.com JS Functions These are advanced options to enable your own HTML code to interact with native device features. Calling Native Functions: In this section the functions are defined with this format function(arg1,arg2) You call the native interface with the name of the function and with named arguments and a callback for data to be returned. VabletNativeInterface.callNativeMethod(function,namedArguments,callback) *Note: You must wait until the vablet library is loaded to start calling functions, see the event section for details on registering for that event Example: Using the definition function(arg1,arg2), calling this would look like: VabletNativeInterface.callNativeMethod( function, arg1 : x, arg2 : y, function (response) if (response.success) //The function returned a success do something else //The function returned a failure do something else alert(response.error); ); Global Preconditions: Currently no argument may be a null object. For optional arguments nonexistent is ok. Global Returns: success - This is a boolean that indicates whether the function was successful or not error - If the function was unsuccessful, then details on the error are returned here

6 Events - VabletManifestUpdated This event is triggered each manifest update - VabletLibraryLoaded This event is triggered when the library is ready to use. Generally used when you need do something on page load after the vablet library is ready. document.addeventlistener('vabletlibraryloaded', function onbridgeready(event) //Start calling vablet functions here, 1000); - getlatestmanifest() Functions Starts an update and calls back after the update is finished - usevabletguitosend forfiles(fileids) If no files can be ed then success is false - togglefavoritestatusforfilewithid(fileid) - toggletagstatusforfilewithid (fileid) - send forfiles(to,fileids,body,company,subject,includeannotation,sendaslin k,sendasattachment,compressoutputatnumberofbytes) *Notes: ** To is an array of Array of 'name':'x',' ':x ** Currently always returns success because is queued ** The server sends bad request currently if compressoutputatnumberofbytes is not -1, I will have to have Mamoru look into this *Example: var senddata = 'Action': 'send forfiles', 'Data': 'to': ['name':'test',' ':'[email protected]'],'fileids':[fileid],'body':'test','company':'test Co','subject':'testSub','includeAnnotation':false,'sendAsLink':false,'sendAsAttachment':fal se,'compressoutputatnumberofbytes':-1

7 - searchforterm(searchterm,enableliveupdates) *returns success,files,isfinished If isfinished is false search is not complete and it is only an update. When search is finished isfinished will be true. files is an array of file objects with the following data: allowedorientations = 15; annotationpermission = 0; annotationsforpageorframenumber = areannotationsforfilepublic = 0; can = 0; canfilepaint = 0; canfileuseopenwith = 0; canprintfile = 0; checksum = 32669; customfilepath = 0; deleted = 0; deletedannotations = ( ); downloaddate = " :58: "; downloaded = 1; durationviewed = 0; editable = 0; encrypted = 0; expiredate = " :59: "; favorite = 0; fileid = ; filepath = files/ html"; filesize = 405; filesizefrommanifest = 405; hasupgradedencryption = 0; integritychecktype = 0; isfileencrypted = 0; isfilenew = 0;

8 isfileread = 1; ismanual = 0; isthumbdownloaded = 0; isvalidencryptionstate = 1; localfilename = " html"; loggingenabled = 1; manualdownloadactive = 0; maxviewcountallowed = 0; maxviewduration = 0; nonvabletlinksinfileopenexternally = 0; notesenabled = 0; possessiontime = 0; printable = 0; realfilename = "JSFunctionTests.html"; smallthumbpath = files/small_thumb_ html"; startdate = " :00: "; thumbhasfailed = 0; thumbpath = files/thumb_ html"; "thumb_url" = " title = JSFunctionTests; uploaded = 0; url = "secure://105858"; viewcount = 10; whentodisplaysurvey = 0; - getmanifestversion() *returns success,manifestversion - getfolderfulldatabypath(folderpath) - getfolderfulldatabyid(folderid) *These are example returns for both getfolderx full methods. It will be passed as a java object.

9 folderdata = ( filedata = allowedorientations = 15; annotationpermission = 0; annotationsforpageorframenumber = areannotationsforfilepublic = 0; can = 0; canfilepaint = 0; canfileuseopenwith = 0; canprintfile = 0; checksum = 32669; customfilepath = 0; deleted = 0; deletedannotations = ( ); downloaddate = " :58: "; downloaded = 1; durationviewed = 0; editable = 0; encrypted = 0; expiredate = " :59: "; favorite = 0; fileid = ; filepath = files/ html"; filesize = 405; filesizefrommanifest = 405; hasupgradedencryption = 0; integritychecktype = 0; isfileencrypted = 0; isfilenew = 0; isfileread = 1; ismanual = 0; isthumbdownloaded = 0; isvalidencryptionstate = 1; localfilename = " html"; loggingenabled = 1; manualdownloadactive = 0; maxviewcountallowed = 0;

10 maxviewduration = 0; nonvabletlinksinfileopenexternally = 0; notesenabled = 0; possessiontime = 0; printable = 0; realfilename = "JSFunctionTests.html"; smallthumbpath = files/small_thumb_ html"; startdate = " :00: "; thumbhasfailed = 0; thumbpath = files/thumb_ html"; "thumb_url" = " title = JSFunctionTests; uploaded = 0; url = "secure://105858"; viewcount = 10; whentodisplaysurvey = 0; type = File;, folderdata = groupid = "-73"; name = Favorites; systemgroup = 1; hidden = 0; usergroup = 0; type = Folder;, folderdata = groupid = "-71"; name = All; systemgroup = 1; hidden = 0; usergroup = 0;

11 type = Folder;, folderdata = groupid = "-72"; name = New; systemgroup = 1; hidden = 0; usergroup = 0; type = Folder;, folderdata = groupid = "-74"; name = Unread; systemgroup = 1; hidden = 0; usergroup = 0; type = Folder; );