VisualNEO Web is an integrated development environment for rapidly building high quality applications for web and mobile platforms. The environment provides a complete set of tools that simplify the complex process of devloping web and mobile apps. 


When you start VisualNEO Web for the first time, you will be prompted to create a new app. Here you can select the dimensions and initial orientation of your app. The settings you choose depend on the type of device where your app will be used. More information about creating a new app can be found here. Alternatively, you can close the New Application screen and open one of the sample apps by selecting the Open command from the File menu.


The VisualNEO Web screen consists of a large workspace surrounded by several dockable palettes. After creating or opening an app you will be placed into Design Mode. Here you can quickly create a graphical user interface for your app by dragging and dropping (or drawing) objects from the Tool Palette onto the workspace. The parts of the screen are described below:



Menu Bar

VisualNEO Web’s Menu Bar includes commands for opening, saving and modifying your apps. The commands found in the menu are described in detail here.


Button Bar

The Button Bar contains buttons that provide single click access to often used VisualNEO Web commands.


Tool Palette

VisualNEO Web’s Tool Palette contains a selection of tools that you will use to design your apps. The Tool Palette is described in detail here.


Mode Selector

These tabs allow you to switch between VisualNEO Web’s screen designer and code views or show both side-by-side. The design view is where you will place objects from the Tool Palette onto your app's screen to create a user interface. The code view is where you will assign actions to each of the objects to make them behave the way you want. For example, when a user of your app clicks a button you might navigate to the next page, play a sound or perform a calculation or all three.


Page List

This is a list of all the pages in your app. Each page is assigned a unique name or id which is shown in the list. You may jump between pages by clicking on id of the page you want to display. The current or active page will appear highlighted. You can change the order of the pages by dragging the page ids up or down in the page list.


The tabs at the top of the page list are used to switch between VisualNEO Web's three types of pages. The first tab contains Normal Pages which make up the core of your app's interface. The second tab will display Master Pages which typically contain elements that are common to most (or all) pages in an app. Common elements can include navigational buttons, titles, page numbers, etc. You can add, modify and delete objects on master pages just as you would on any other page. The third tab will display Dialog Pages which can be used to create custom dialog boxes that popup on top of your app's interface. Dialog boxes are primarily used to present information or request input.


Object List

This palette contains a list of all the objects that have been placed on the current page. Like pages, each object is assigned a unique name or id. You may use the Object List to select specific objects for modification. Multiple objects may be selected at the same time. Selected objects will appear highlighted. 


Property List

This palette contains a list of properties belonging to the currently selected object or objects. The controls on the property palette are used to modify the appearance of the objects that make up your app. The properties available depend on the object(s) selected. Most objects share common properties such as width and height. Other properties are specific to certain types of objects. For example, the Image object includes a 'source' property used to specify the name of the graphic file it displays on-screen. The tabs at the top of the property list are used to swicth between the selected object's physical properties and its CSS style properties. The CSS style properties are primarily used to override an object's normal attributes like color, font, border, etc. See Working with Objects for more information about modifying object properties.


Navigation Buttons

The lower right corner of the screen contains controls for changing the designer's magnification level and navigating to other pages (if your app contains more than one). 


Workspace

The Workspace occupies the largest portion of VisualNEO Web’s screen. This is the area where you will create and edit your apps. You may open several work windows at a time, each containing a different app. If your VisualNEO Web screen does not contain a work window, you can open one by selecting New or Open from the File menu.


Status Bar

The Status Bar contains the coordinates of the mouse pointer and other information that changes depending on what task you are currently undertaking. For example, when you are adding an object to your app, information about the current mouse position and the dimension of the object will be displayed here.


Customizing Your Workspace

You can customize your VisualNEO Web environment by positioning the palette windows anywhere on the screen, or by docking them to the left, right, top or bottom edges of the main program window. Docked palettes can be repositioned or undocked by dragging the small bar at the top or left of each palette window.