Browser IDE Help Guide
Browser IDE is a powerful and flexible online integrated development environment for Smart TV applications on browser
- User Account
- Project Dashboard
- Browser IDE Menu Bar
- Source Editor
- Project Explorer
- Image Viewer
With Browser IDE, you can develop applications anywhere and work more efficiently.
The following software is used for this installation:
Import SDK BrowserIDE_Server_xxx.ova on your Virtual box
Configure Virtual box
Base Memory: >= 1024 MB
Support Bridged connection method (NAT method not supported)
MAC address should be set if it’s binding with IP address
After network configuration, then start the Browser Server, system will show IP Setting page of Browser IDE.
Input IP Address and DNS Server and click confirm button.
Recommend select OK to reboot Browser Server.
Each user has own account to facilitate managing their projects or files.
Before installing Browser IDE, VirtualBox must be installed first. To access Admin Tools Module in Browser IDE, Chrome or Firefox must be installed. Download "BrowserIDE_Server_1_0.ova" inside of the package named, “Browser IDE Server Image for Virtual Box” from http://www.samsungdforum.com/Devtools/SdkDownload.
Please use chrome to visit the Admin Tools module. The available address will be “http://NetworkIP/”.
Please use the network IP which you have set. If you don’t remember, please login to Admin Tools module inside VirtualBox and see your current IP at “Network”->”IP Setting” page.
To use Browser IDE, a user account is needed. First, open homepage, click the Signup button at the top-right corner and users will be taken to signup page. All information fields are required.
For these information input fields, there’re some notices as follows:
- User name: only contains letters and numbers, and the length is from 6 to 20.
- Password: only contains letters and numbers, and the length is from 6 to 20.
- Secret question: only contains letters and numbers, and the length is from 4 to 20.
- User name: only contains letters and numbers, and the length is from 4 to 20.
If you already have a Browser IDE account, just go to homepage and sign in. There’s a keep user name checkbox, check it and user name will be kept in input box when you login next time with this browser.
There’re three methods to sign out, which are as follows:
- Click log out button in homepage
- Click log out submenu of user menu at the top-right corner of workspace page.
- Click log out submenu of setting menu at the top-right corner of main page.
If you forget your password or want to modify it, click forget password link in homepage and users will be taken to find password page.
The process of retrieving password is as follows:
- Input user name to get secret question.
- Input secret answer, check it.
- Reset user’s password.
The project dashboard provides basic operations to master the project.
After clicking on “Create new project”, users are taken to the dialog which to choose the project type.
Here’s the introduction to different project types available on Browser IDE.
App Framework 2.0 Project
Apps Framework 2.0 is developed for creating web based application for Samsung Smart TV easily. Users can create Smart TV app with less hours, and can concentrate on improving their business logic and services.
Web PNaCl Module(C++) Project
Create fast and powerful application using C/C++ with support for Google’s Portable Native Client (PNaCl) feature. PNaCl applications can be developed in the IDE and then executed in the Smart TV Emulator.
Fill input the project name and select the project type then press OK, after the project successful created, it will be added into the “My Projects” list.
You can see the detail information at the right part of dashboard after you clicking it in “My Projects” list. You can also update the description of project through the “Project Description” text box.
Start editing by Browser IDE via click the “Start Editing”.
You can delete the project through clicking the “Delete” button which in the far right side of the dashboard.
Browser IDE also provides the demonstration projects since it’s not easy to develop the Smart TV application as a freshman. You will know how to manage the focus of user input, showing and hiding each DIVs and event handlers via reading the source code of demonstration projects and take it as a reference. Click the “My Projects” and look at the right side of the list.
User could choose the project type among the projects encountered.
Source Editor can show source code in different color corresponding to syntax. The syntax coloring is automatically rendered when source code file loaded or edited. No need of user interactive. By using syntax highlight, developer can easily find syntax errors and identify symbols. The style of coloring can be changed by selecting item in main menu. Source Editor provides over 20 themes of coloring, both bright and dark.
Auto-completion is a useful function for developer. It helps developer coding by prompting a name list. Select one, then the entire name insert. To show the name list, users can simply press Alt+/, In Source Editor, auto-completion can be divided into several types:
All the items in list which is labeled by “local” come from the local source code file. All the user-defined names (including variable names, function names, class names) and all the names appeared in the local source code file are labeled by “local”.
The names defined by Samsung Smart TV also can be shown in the name list. All the names labeled by “device API” are provided by Samsung Smart TV platform. These names stand for those global objects dealing with TV device and it’s API, including their parameters and methods.
Source Editor auto-completion also provides Samsung Apps Framework 2.0 related objects and operations. Supporting Visual Components and their operations, scene management API, core API, environment API etc.
Code snippet provides developers a lot of code segments for rapid coding. It can generate commonly used code segments and insert into editor, such as “Do-While”, “For-Loop” etc. Developer can modify the generated snippets as they want. To use code snippets, developer can type a part of the keyword and then press “TAB”, or another way, using auto-completion, press “Alt+/”, select snippet item from completion list.
Multi-line Editor is useful for multi-line edit, such as block edit, user can select multi-line and there are many cursors in the editor, user can operate multi-line code and operate them at the same time.
When user select multi-line and type in “hello, world”, the editor will appear multi of “hello, world”.
Settings menu layout in the right-bottom of editor, it’s useful for user to set the global attributes of editor, such as Show Gutter, Highlight Selected Word and so on, next time user open the editor, the setting is still available.
The context menu of project can operate file and folder include Open File, New File, New Folder, Copy, Paste, Delete, Rename, Property as follow figure:
The “Property” can display file information. As follow figure:
The image viewer tab in the console shows project images whenever a user click “Show Images” menu. As follow figure:
The terminal provides user with a TTY interface for direct access to the browser IDE host. It supports shells in UNIX.
|No.||Functions||Local Browser IDE||Native IDE||Remark|
|1||Project||Basic Project / App Framework 2.0 Project||O||O|
|PNaCL Module (C++) Project||O||O|
|4||Terminal||Windows / Linux / Mac OS X||
(as like gnome -
Linux / Mac
OS X: Linux
|5||Visualization Tools||Visual Editor||X||O|
1. Virtual Box
2. Browser (Chrome)
2. Virtual Box
6. Tool chain
|Memory||Recommended (Server)||>= 2G||>= 2G|
|Least||>= 1G||>= 1G|
Windows / Linux /
Windows 7 /
Windows / Linux /
1. Windows XP/7/8
3. Mac OS