Apx UI. New UI. Marvell Confidential презентация

APX UI New UI Footprint reduction Multi-theme(run-time) support. Ease of rebranding – logos etc. should be changeable without changing backend or front end code. The Basics from UI’s point of view JavaScript – which makes the browser work like an application. jQuery – a JS library. Simpler, faster and more powerful. AJAX – technology that allows JS functions to request information from the server.

APX UI – Communication with Backend The backend uses CGIs that communicate with the frontend using predefined XMLs. Getting the Configuration – HTTP GET is used to get configuration information specific to a module in an XML format. Request: GET /cgi/xml_action.cgi?method=get&module=duster&file=wlan_basic_settings HTTP/1.1 Response for this would be: <?xml version="1.0" encoding="US-ASCII" ?> <RGW> <wlan_settings> <mac>00:50:43:20:cb:2a</mac> <channel>0</channel> <bandwidth></bandwidth> </wlan_settings> </RGW>

APX UI – Communication with Backend Changing the configuration HTTP POST is used to set/change the configuration. Request: POST /cgi/xml_action.cgi?method=set&module=duster&file=wlan_basic_settings HTTP/1.1 Response for this would be: <?xml version="1.0" encoding="US-ASCII" ?> <RGW> <wlan_settings> <channel>2</channel> <bandwidth>2</bandwidth> </wlan_settings> </RGW>

APX UI –Backend Interface All the XML GET/POST are forwarded by the webserver(mongoose) to the CGI task. The CGI task invoke the duster_parse to dispatch the XML GET/POST request to the back-end modules. The XML document hierarchy mirrors the hierarchy maintained by the persistent storage manager(PSM) For get request will retrivers variables from PSM and returns values in an XML format and invoke registered GET API. For set request will save the value to PSM and invoke registered POST API.

APX UI - Overview

APX UI- Directory Structure

APX UI Key Files www/xml/ui.xml Tab definitions. Top level user interface layout. 2. www/index.html New javescript files need to be inclued in the index.html to load by the client. HTML files are loaded by the javascript files when the javascript is invoked. 3. www/properties/Messages_<localed>.properties Locale(e.g en) can be used for development. New property strings nend to be tanslated and added to other supported locales as well. www/js/panel/<newapp>/<function>.js The source code layout convention is to put javascript code for each application in a separate directory with a separate javascript file for each major feature. www/html/<newapp>/<function>.html Any static html markip associated with the tan panel needs to be created. www/help_<locale>.html Add sections to the help file for each new application feature. It need tanslated and added to each locale specific help files.

APX UI - Sample Screen Entry in App Framework(ui.xml)

APX UI – Additional Stuff * Locales Support Properties file corresponding to each locale One place modification for changing label text, popup text etc. * Multiple Themes Changing the theme doesn’t require any code change in HTML or in JS “css” and “images” folders corresponding to each theme The “theme” duster module for communicating to the backend the change of theme.

APX UI – Adding a module Depending on where you want to include the new panel, add an entry in ui.xml inside the corresponding “Tab” and “Menues” tags. Create the html file in specific folder within the html directory. 3) Create the js file in specific folder. Responsibilities of each js class -> 1. Implement the onLoad fun that populates the DOM elements as per the XML fetched. 2. Localization, validation etc as per the screen requirement. 3. Implement the onPost which fetches modified field values and invokes the base API to send data to backend. 4. Implement the setXMLName fun which is called by the Include all the label texts, button texts etc. in the properties files of both the locales. Don’t forget to include the newly created js file in index.html using script tag.

APX UI – Adding a module * Commonly required APIs in the jQuery code – getData(xmlName) – invokes the AJAX call for a GET from backend on the specified xml name. lableLocalization(), buttonLocalization() – pass an array of elements returned from document.getElementById putMapElement(2-D array, index, path-of-xml-node, value-of-that-node) * The jQuery class must implement the loadHTML function. In it the callProductHTML API needs to be used to specify the html file corresponding to this particular panel.

APX UI – Dashboard

APX UI – Quick Access Links * Quick Setup Behavior after Log-In Skip setup option Functionality change in Quick setup behavior than previous UI. * Help Page Opens in new Tb. Context specific help for each panel/screen. * Log Out

APX UI – Commonly offered widgets A bunch of commonly required widgets are provided in the controls/ directory within the js code. For example – enabled_disabled control, ip_address control etc. These widgets expose a set of APIs which can be directly used.