Menu Wapplication
What is the wApplication menu?
The wApplication menu is a purely client side wApplication not needing any server side files.
It runs using the wApplication ecosystem built by Kyube.
What are wApplications?
wApplications allow you to build sophisticated web application with
HTML and JavaScript knowledge only without the need any technical
server side knowledge or needs.
Using wApplications, you can build a full blown Ecommerce, not just a menu.
Click Here to know more about wapplications
The menu wApplication is an excellent way to include navigation in your website, its advantages are:
- Complete separation between the design and the structure.
- The highlighting of selected labels and pages is automated.
- The addition of a new page and link is made very simple.
To add a menu wapplication, you need to follow the below steps:
- Add the simplify engine tag
For your menu to function in the pages of your website, you have to add the following two links in the <head> tag of all your pages.
Head Tag (page.html)
<
html>
<
head>
.................
<
script
src=
"
ky_wapp.wapps/ky_wapplication.js" type=
"text/javascript" id=
"_ky_wapp_rw"></
script>
<
script
src=
"http://member.simplifycms.com/wapplication/js/ky_wapplication.js" type=
"text/javascript" id=
"_ky_wapp_ro"> </
script>
..................
</
head>
- Add the form in the html page
In the template where you want the menu to be, insert the following code in the region you want to contain the menu:
Form Tag (page.html)
<body
>
..................
<!--{Library_NAME.lbi}-->
<form id="
ky_QuickMenu_TopMenu"
ky_wapp="on" method="post" enctype="multipart/form-data" >
<div id="
face1_tpl" style="display: none;">Loading...</div>
</form>
<!--{/Library}-->
..................
</
body>
- Folder Structure of ky_Wapp.wapps folder
Image 1: Contents of ky_wapp.wapps folder
|
In this step you will build the required folder structure to support the menu wApplication.
In the root folder of your website, you need to add a folder called ky_Wapp.wapps, as shown in Image 1.
The ky_wapp.wapps is the folder needed by the wApplication ecosystem.
This ky_wapp.wapps folder contains 3 folders: “faceJSON”, “ky_menu” and "css" and 4 javascript files: ky_include.js, ky_wapplication.js, ky_wkey.js, and ky_maskMsg.js.
You do not need to worry about these files for now, you can keep them empty or just click here to download them.
The css folder is the folder where the needed css by the wApplication are stored.
The faceJSON is the folder where the client side control of the menu is stored; it will contain the faceJSON file corresponding to the menu. It should have the same name as the id of the form containing the menu on the html page.
The ky_menu is the folder where the preference file as well as the links file of the menu are stored
The remaining files are needed files by the ecosystem.
The content of ky_menu will be discussed in more detail below.
|
- FaceJSON file
Add the faceJSON file, which is a JSON object responsible for running the client java script of the menu.
Create a js file in the faceJSON folder called ky_QuickMenu_TopMenu.js, and insert the following code in it:
faceJSON (ky_QuickMenu_TopMenu.js)
{
"author": "Kyube Inc",
"startup" : "face1_tpl",
"face1_tpl" : {
"initialize" : ["KYMENU1"],
"KYMENU1" : {
"type" : "client",
"hook" : "KYMENU",
"menuID" : "topMenu"
}
}
}
"startup": Set it to the first face to display the form
"face1": define the contents of this face
"initialize": the first hook to run on the load of the face
** Note that the name of the faceJSON file should correspond to the id to the form tag
This faceJSON file contains the basic configuration pointing to the menu properties.
The menuID is used to link this file with the two other configuration files found in ky_menu folder.
- ky_menu folder
Image 2: Contents of ky_menu folder
|
The ky_menu folder contains 2 configuration files that will define the contents of the menu (links.js), and its format (pref.js or a css file).
The name of these file is influenced by the menuID.
So that, as indicated in the image above, if the menuID is set to "topMenu”,
then the files in the ky_menu folder should be topMenu_links.js and topMenu_pref.js.
The links and preferences files(sometimes replaced by a css file) are used to define the content of the menu and its format.
They will be discussed in more detail for each type of menu separately.
|
- Different types of menu
| Menu Name |
Description |
|
| Quick Menu
|
The Quick menu is a one level simple menu that can be rendered either vertically or horizontally. It also allows for implementing hover and selected effects.
|
More details
|
| Open Tree Menu |
The Open Tree Menu is a multi-level menu that will display the sub pages and the sections that the user is navigating through, in addition to other available pages in the same sub sections.
|
|
| Quick DHTML Menu |
The Quick DHTML Menu is similar to the Quick Menu but has the ability to support sub links. That is, it is a multi-level tree menu that will behave similar to the open tree menu. |
|
