About the Download

Ti.WebView

Ti.WebView is an iOS Hyperloop wrapper for two native iOS components.

  • WKWebView
  • SFSafariViewController

With Titanium and Hyperloop you can embed this module into your project and with a few lines of code you will be able to create native webviews with way more performance or even webviews with a better UI and UX.

You may be wondering the difference between this component and the component provided by Appcelerator, aren’t you? So we will explain soon in a post. 🙂

SFSafariViewController

It provides you a better UI to display web content and with a few lines of code you invoke a window with everything your users are expecting from a webview. It creates AUTOMATICALLY the bar at the top with a Done and Refresh buttons. It also creates a bar at the bottom of the window with some useful functionalities:

  • Back and forward navigation buttons;
  • Share button;
  • Open the page directly in Safari button.

Screen Shot 2016-09-02 at 6.06.11 PM

WKWebView

It provides pretty much the same experience as the default Titanium Webview, however this component brings a much improved performance and it is considered as the next version of the UiWebView component provided by Apple. With this component you will also be able to trigger the events onLoad and onBeforeLoad, as well as tell the component to accept 3D Touch to preview the content of the next webpage.

You can add this component into a Titanium View and it will work without problems.

Screen Shot 2016-09-02 at 6.06.02 PM

README

These instructions are being shipped with the module, so you can check later on your README file.

LoopModules – Ti.WebView

This HyperLoop module expose some of the WebView native functionalities.
It exposes the native WKWebView and the native SFSafariViewController

1 – Requirements

This project uses HyperLoop. We recommend you to read the basics of HyperLoop in the links below before proceeding any further in this README.
iOS: Hyperloop_for_iOS-Programming_Guide
Android: Hyperloop_for_Android_Programming_Guide

HyperLoop does a pretty good job in allowing you to use Objective-C / Swift with Javascript syntax, but that doesn’t mean that you won’t
need to learn Objective-C / Swift if you want to customise the module / create your own. For that reason we highly recommend you to
learn the basics of Objective-C / Swift.
In the long run that will make your job easier, since Objective-C is far from being an easy language to understand at the first sight.

2 – Environment setup

This module was tested and developed with the following environment:

  • CocoaPods 1.0.1
  • Titanium SDK 5.5.0.v20160831100821
  • HyperLoop 1.2.6
  • XCode 7.3.1

3 – Creating a HyperLoop-enabled project:

  • Create a new Alloy project like you would normally do. (Don’t forget to a hyperloop-enabled project)
  • Take a look at the example tiapp.xml file that you’ve received from us. Your tiapp.xml should have the same properties defined in this example
    otherwise you’ll face some issues while building your project later on.
    Don’t forget to change the App GUID in the provided tiapp.xml file to your original App GUID!
  • Copy the controller, styles and view files + the “libs” folder provided with this module to your project’s “/app” folder.

4 – Usage

You’ll find inside this zip a very simple example of controller that you can copy to your HyperLoop-enabled project and start playing with it.
You have two ways to use this module:

Instantiating and adding the native WKWebview by callind the function ‘createWebView’:

$.win.add(HLWebView.createWebView({url:'http://loopmodules.com',
allowsLinkPreview:true,
onLoad:onLoad,
onBeforeLoad:onBeforeLoad}));

This function gives you back and instance that can be added to a Titanium component. It accepts the following arguments:

  • url (Required): The URL to be opened;
  • allowsLinkPreview (Not Required): Change the configuration if the WebView to accept 3D touches
  • onLoad (Not Required): a listener triggered when the page is fully loaded
  • onBeforeLoad (Not Required): a listener triggered before loading the page

Opening the native Safari ViewController by calling the function ‘createSafariWebView’:

HLWebView.createSafariWebView({url:'http://loopmodules.com'});

This function open a new window with the native Safari WebView component. It accepts the following argument:

  • url (Required): The URL to be opened;

After following all the steps above you should have the project up and running without any problems.
HyperLoop DOES NOT work with LiveView as of now, so you will need to rebuild your project every time you change anything.

Support

One of the things we want to offer you as a reward for joining LoopModules is the ability to contact us to discuss and get help with problems that you may come across.
We’ve tested this module a lot of times and we want to deliver something that will work for everyone (as long as the environments are the same, e.g. SDK, HL version, and so on).
If you come across one of the following:

  • Bugs
  • Suggestions
  • Issues while compiling this module

Feel free to contact us at contact@loopmodules.com.