Cboard Framework Usage Summary Two--expansion of new function modules

article content

1. Add a new menu item
2. Complete the background processing logic
3. Overall process 1. Add a new menu item 1.1. Provide menu Data

The Basic Cboard Framework menu item needs to be configured in the Code (service layer), because it is stored in list form and can be implemented by the database when necessary;

/*org.cboard.services.menuservice */Public
class Menuservice {
    private static list<dashboardmenu> Menulist = new arraylist<> ();

    static {
        Menulist.add (new Dashboardmenu (1,-1, "SIDEBAR. Config "," config "));
        Menulist.add (New Dashboardmenu,-1, "SIDEBAR. EXTEND "," EXTEND "));
        Menulist.add (New Dashboardmenu, "SIDEBAR. Extend_function_1 "," extend.function_1 "));
    }

    Public list<dashboardmenu> getmenulist () {
        return menulist;
    }

}

Configuration parameters:
Menulist.add (New Dashboardmenu (Long menuId, long ParentID, String menuName, String menucode));

Parameters	meaning	Notes
MenuId	Menu ID
ParentID	Parent menu item ID
MenuName	Menu Name	The identity string for the corresponding language configuration file
Menucode	Menu encoding	Unique identity string

1.2. Return menu Data

The data is returned by the common controller, and the front-end code is called to fetch the data;

@RequestMapping (value = "/getmenulist") public
list<dashboardmenu> getmenulist () {
    return Menuservice.getmenulist ();
}

1.3. Front-end processing data, and display on the interface

At the controller layer of the ANGULARJS, we find the Cboardctrl controllers, which are used to get the menu list;

var getmenulist = function () {
    $http. Get ("Commons/getmenulist.do"). Success (function (response) {
        $ Scope.menulist = response;
    });

In particular, Cboard does not directly display the menu item on the interface, but instead configures all the menus in the template, and Isshowmenu (Menucode) Determines whether the menu item is displayed;

/*isshowmenu method */
$scope. Isshowmenu = function (code) {
    return!_.isundefined (_.find ($scope. Menulist, Function (menu) {
        return menu.menucode = = Code
    });
};

<!--src/main/webapp/starter/main-sidebar.html-->

<!--Extends-
<li class= "TreeView" Ui-sref-active= "Active" ng-if= "isshowmenu (' Extend ')" >
    <a>
        <i class= "fa fa-cog" ></i>
        <span>{{' SIDEBAR. EXTEND ' |translate}}</span>
        <span class= "Pull-right-container" >
            <i class= "FA Fa-angle-left Pull-right "></i>
        </span>
    </a>
    <ul class=" Treeview-menu ">
        <li Ui-sref-active= "Active" ng-if= "Isshowmenu (' extend.function_1 ')" >
            <a ui-sref= "extend.function_1" > <i class= "fa fa-fw fa-user" ></i>{{' SIDEBAR. Extend_function_1 ' |translate}}</a>
        </li>
    </ul>
</li>

1.4. Configure the menu item function

The function configuration of the menu is completed in Angularjs Config, which involves the specific request address, template path, Controller (front end), which is stored in config as a constant;

<!--src/main/webapp/org/cboard/ng-config.js-->

angular.module (' Cboard '). config ([' $stateProvider ', function ($stateProvider) {    
$stateProvider
        //....
        State (' extend ', {
            URL: '/extend ',
            abstract:true,
            Template: ' <div ui-view></div> '
        })
        . State (' extend.function_1 ', {
            URL: '/extend ',
            templateurl: ' org/cboard/view/extend/function_1.html ' ,
            controller: ' Extendfunction '
        );

}]);

When the specific menu item is clicked, the response controller is requested and the corresponding template is loaded, and the rendering of the interface is finished; 1.5. Configure Language strings

The language configuration of Cboard is done through the Angularjs Internationalization Service (angular-translate), as shown in the language string for the menu item:

/*src/main/webapp/i18n/cn/cboard.json*/"SIDEBAR": {"C_dashboard": "Kanban", "My_dashboard": " My Kanban "," config ":" Configuration "," Data_source ":" Data source management "," Cube ":" DataSet Management "," Widgets ":" Chart Design "," DASHBOARD ":" Kanban Design "," Dashboard_ca
 Tegory ":" Kanban Classification "," admin ":" Management "," user_admin ":" User Management "," Res_admin ":" Resource Management "," Job ":" Scheduled Task "," Share_resource ":" Resource Sharing ", "EXTEND": "Extended Function", "extend_function_1": "Test function One"},