7notes Web Client

Tutorial

7knowledge International Corporation

November 18, 2011

2

Introduction

7notes Web Client is an application on iPad.

This document describes features of 7notes Web Client and HTML

specifications. It consists of the following chapters.

1. What is 7notes?

2. Basic Features

3. HTML Basic Specifications

4. HTML Extensions

5. Restrictions

The document is aimed at self-learning or learning the application at a technical

seminar.

If you are a developer or designer for Web services, please read all chapters.

Otherwise, just read the first and second chapters.

3

1. What is 7notes?

4

What is 7notes?

7notes HD is an note taking application

which provides innovative handwriting

features and flexible editing features.

In particular, the 7notes HD Premium

version converts your handwriting to digital

fonts anytime. You can convert word by

word or long handwritten sentences at

once. This is implemented by our

handwriting recognition engine, called

mazec.

7notes Web Client is based on such

features of 7notes HD.

5

mazec in 7notes

mazec is a handwriting recognition engine embedded in

our 7notes products.

Using mazec, you can:

• Write a manuscript by your fingers or a pen

• Convert handwritten letters into font texts

• Have high accuracy of handwriting recognition

• Get suggestive words so that you can quickly write

sentences

6

mazec: Handwriting Recognition

mazec can convert your handwritten letters into font texts.

7

mazec: Predictive Texts

mazec is based on enough vocabularies for native

speakers. It gives you predictive texts for proper nouns,

phrases, and idioms.

Example> I look forward to you at Anniston Metropolitan Airport

in Hilton Head Island.

[Other System]

I +look + forward + to + you… 13 times inputs

[mazec]

I + look forward to + you + at + Anniston Metropolitan + Airport

+ in + Hilton Head Island. 8 times inputs (*) * It depends on what mazec learns from your inputs.

8

mazec: Spelling Correction

mazec can correct a misspelled word and phrase.

Word Correction:

recieve -> receive

Phrase Correction:

catalog rason

-> catalogue raisonne

9

mazec: Automatic Learning

As you enter letters, mazec learns the order of alternative

words and next occurring words of an input word.

For example, you write “When I was young,” and enter

the letters. Next you write “I listened to the radio.” and

enter them.

After that, when you just write “When”, you will get “When

I was young,” in the alternative display.

Selecting “When I was young,” brings “I listened to the

radio.”

10

mazec: Automatic Learning (continued)

Just writing “When”

Select

11

2. Basic Features

12

What is 7notes Web Client?

“7notes Web Client” (7notes

WC) is a browser application.

It provides a handwriting input

method based on mazec to

the users who do not get used

to the software keyboard on

iPad.

mazec

13

Screen Structure

Input Edit Area

Text Input Area

Input Field

Menu Bar

14

Menu Bar

[1] Back

[2] Forward

[3] Home

[4] Bookmark

[5] Add to Bookmark/Print

* A popup menu.

[6] Reload

[7] URL Address

[8] Tools

* A popup menu

15

Text Input Area

[1] Switches to the convert mode.

[2] Switches to software keyboard mode.

[3] Switches to numerical keypad mode.

[4] Displays the type of the letters to be recognized.

[5] Switches the height of the input area.

[6] Moves the insertion point in the text unit when nothing is written in the input

area.

[7] Inserts a space.

[8] Deletes the letter, space, or line feed.

16

Text Input Area (continued)

[9] Displays more alternative words.

[10] Deletes the latest stroke in the input area.

[11] Restores what was written in the input area before the last delete operation.

[12] Inserts a line feed code at the insertion point.

[13] Closes the convert mode screen and drags the screen up and down.

[14] Scrolls the input area.

[15] Displays recognized alternatives for the letters written in the input area.

17

Convert Mode

You can convert

handwritten letters into font

texts.

The mode also provides

you predictive text and

spelling correction.

The mode is suited for

writing:

• Names

• Addresses

• Comments

Predictive text and

spelling correction

18

Software Keyboard Mode

You can type letters using a

software keyboard.

The mode is suited for

writing:

• Email addresses

• URLs

• Product names

19

Numerical Keypad Mode

You can type numbers and

a couple of symbols using a

numerical keypad.

The mode is suited for

writing:

• Telephone numbers

• Zip codes

• Membership numbers

20

User Dictionary

The user dictionary contains

words you use that are not in

the predictive texts.

• Tap the Tools icon and

select Edit User Dictionary.

• Tap “+” to add a word.

– Specify input and output

texts.

• Tap “Edit” to delete

registered words.

Tools

21

Settings (1)

• Tapping “Settings” in the

Tools icon brings the menu

shown in the left picture.

22

Settings (2)

Home Page

Specifies the page to be displayed when the app is invoked.

Show Home Page When Active

When the app is active, the home page is always displayed.

Show Menu Bar

Shows and hides the menu bar.

Show Back and Forward

Shows and hides “Back” and “Forward” buttons.

Title

Changes the name of the screen.

Highlight Phone Numbers

When it is ON, phone numbers on the webpage are highlighted.

Tapping on a highlighted number brings a popup menu.

Title

Menu bar Back & Forward

buttons

23

Settings (3)

Accept Cookies

You can choose how you want 7notes WC to handle cookies; Never, From visited, and Always.

Clear Cookies

Clears all cookies from 7notes WC.

Clear Cache

Clears cache in 7notes WC.

mazec Automatic Learning

When it is ON, mazec learns the order of alternative words and next coming words of a input

word.

Clear History

Clears what mazec has learned.

Lock Settings

You can set a password to open the Settings menu.

If you forget the password, it is necessary to install the app again.

Unlock Settings

A password is required to run this operation. Then you do not need to enter a password to open

the Settings menu.

24

Settings (4)

There is an option (Full Screen Mode) for 7notes WC in the

Settings app.

Setting ON hides the menu bar and the title from the screen.

25

3. HTML Basic Specifications

26

System Structure

HTML

• Rendering

• Form Input

Data Input

• Recognition

• Software

Keyboard

• Numerical

keypad

7notes WC

iPad Safari

(UIWebView) mazec

Web

Application 1 2

3 4

1. UIWebView (a control in iOS) analyzes the HTML structure to display on 7notes

WC.

2. mazec is activated when the user focuses or taps on an input element.

3. The input on mazec is inserted in the input element.

4. Post to the web page.

27

When is mazec invoked?

mazec is invoked when input or textarea element in an HTML page

are focused on or tapped.

Case1: input element

• The element does not have any type attribute

• The element has a type attribute whose value is one of “text“, “search“,

"number“, "range“, "tel“, "url“, and "email"

Exception: When the element has the type attribute whose value is “password”,

mazec can cannot be invoked.

<input name="username" class="name1" value="“></input>

<Input name="username" type=“text" class="name1" value="“></input>

<input name="pass" type="password" class="name1" value="“></input>

28

When is mazec invoked? (continued)

Case2: textarea element

Exception: When the element has readonly or disabled attribute, mazec can not be

invoked.

<textarea name="memo" cols="20" rows="5" wrap="hard" style="memo1" readonly

></textarea>

<textarea name="memo" cols="20" rows="5" wrap="hard" style="memo1" disabled

></textarea>

<textarea name="memo" cols="20" rows="5" wrap="hard" style="memo1"></textarea>

29

“type” attribute changes input mode

Value of type mazec Mode Recognition Type Keyboard Type

text Convert All Standard

search Convert All Standard

number Numerical keypad Numbers (12) Numeric

range Numerical keypad Numbers (12) Numeric

tel Numerical keypad Numbers (12) Telephone

url Software keyboard Alphabets (Ab) URL

email Software keyboard Alphabets (Ab) Email address

30

4. HTML Extensions

31

What are Extension Features?

• You can define original attributes in “input” and

“textarea” elements to customize the behavior of

7notes Web Client.

• You can execute JavaScript codes and invoke 7notes

WC from other apps.

32

Original Attributes for input/textarea

32

Attribute Name Value Description

mwc_mode recognition / numpad /

keyboard

Specify a mode to be used

when mazec is invoked.

mwc_recognition all / alphabet / number / mail Specify a recognition type

in Convert mode.

mwc_nohandle Not Applicable It cannot be handled by

mazec.

mwc_keyboard default / ascii /

numberpunctuation / url /

numberpad / phonepad /

namephonepad /

emailaddress / decimalpad

Specify a type of keyboard

for iOS.

33

How to call 7notes WC from other apps

Specifying an original URL format, you can invoke 7notes

Web Client from other apps.

[URL Format]

mazec:

Invokes 7notes Web Client

mazecwc://<command>?<parameters>

Command Process Parameters

Go Invokes 7notes Web Client to

show the webpage specified

with the parameter.

url=“URI”

34

String Length: maxlength

It is possible to specify the maxlength attribute to restrict

the length of an input characters.

<input type="text" maxlength="25“/>

Sample: No longer than 25 characters

35

API to close mazec

7notes Web Client provides an API to close mazec in

JavaScript.

if (window.MMJmWC && window.MMJmWC.API &&

window.MMJmWC.API.resetFocusItem)

{

window.MMJmWC.API.resetFocusItem();

}

Sample: How to close mazec

36

5. Restrictions

37

Restrictions (1)

Restrictions for start-up

HTTP based authentication

i.e. Basic authentication and Digest authentication

A dialog window for authentication can’t be shown

Invalid security certificate

A dialog window for SSL connection error can’t be shown

Input fields having scripts

Cannot invoke mazec

38

Restrictions (2)

Restrictions for window handling

Creating a new window

Reuse currently-opened window

Close button

If you implement a method using scripts, the browser can’t be

closed.

39

Restrictions (3)

Restrictions for key event handling

Input fields

Key events for input fields does not happen except enter key

Rotation event

The direction of iPad (window.orientation property) can’t be

identified inside a Java script code.