Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
es:doc:devel:luci [2015/06/18 01:11] – [Agregar una nueva pestaña de nivel superior] bazzaes:doc:devel:luci [2015/06/18 01:12] (current) – [Agregar el codigo view_tab] bazza
Line 1: Line 1:
 +===== Agregando nuevos elementos a LuCI =====
  
 +Este es un ejemplo para mostrar cómo agregar un nuevo elemento a la interface de LuCi.
 +
 +**NOTA:** alguna de la informacion provista en este wiki podria ser redundante de como los ej. mostrados en la wiki de luci. http://luci.subsignal.org/trac/wiki/Documentation/ModulesHowTo
 +
 +hay 2 maneras de hacer esto: 
 +
 +  - CBI
 +  - Vista (Maquetado)
 +
 +===== Agregar una nueva pestaña de nivel superior =====
 +
 +Primero vamos a agregar una nueva pestaña a la navegación superior. Normalmente uno puede ver:  Estado | Sistema | Servicios | Red, etc
 +
 +Uno puede hacer esto agregando un archivo al directorio controlador en tu  ''/usr/lib/lua/luci/controller/myappp''
 +
 +El directorio **controller** es el directorio por defecto para cualquier ui control (ej nueva pestaña).
 +
 +El directorio **myapp** es un directorio para tu aplicación.
 +
 +Nosotros llamaremos a este archivo ''new_tab.lua''
 +
 +El contenido es el que sigue:
 +<WRAP prewrap 1000px>
 +<code lua>
 +module("luci.controller.myapp.new_tab", package.seeall)  --notice that new_tab is the name of the file new_tab.lua
 + function index()
 +     entry({"admin", "new_tab"}, firstchild(), "New tab", 30).dependent=false  --this adds the top level tab and defaults to the first sub-tab (tab_from_cbi), also it is set to position 30
 +     entry({"admin", "new_tab", "tab_from_cbi"}, cbi("myapp-mymodule/cbi_tab"), "CBI Tab", 1)  --this adds the first sub-tab that is located in <luci-path>/luci-myapplication/model/cbi/myapp-mymodule and the file is called cbi_tab.lua, also set to first position
 +     entry({"admin", "new_tab", "tab_from_view"}, template("myapp-mymodule/view_tab"), "View Tab", 2)  --this adds the second sub-tab that is located in <luci-path>/luci-myapplication/view/myapp-mymodule and the file is called view_tab.lua, also set to the second position
 +     end
 +</code>
 +</WRAP>
 +----
 +===== Agregar el cbi_tab codigo =====
 +
 +Como dijimos arriba, necesitamos crear un archivo llamado ''cbi_tab.lua'' en ''/usr/lib/lua/luci/model/cbi/myapp-mymodule''. Incluiremos el siguiente codigo:
 +
 +<WRAP prewrap 1000px>
 +<code lua>
 +m = Map("cbi_file", translate("Formulario con CBI"), translate("Por favor, llene el siguiente formulario"))
 +d = m:section(TypedSection, "info", "Parte inicial A")
 +a = d:option(Value, "name", "Nombre"); a.optional=false; a.rmempty = false;
 +return m
 +</code>
 +</WRAP>
 +----
 +
 +
 +En el codigo de arriba, sabemos que necesitamos un archivo de config que tine las secciones apropiadas y opciones. En nuestro caso, crearemos el archivo //cbi_file// en ''/etc/config'' que luce asi:
 +
 +<WRAP prewrap 1000px>
 +<code>
 +config 'info' 'A'
 + option 'name' 'OpenWRT'
 +</code>
 +</WRAP>
 +
 +----
 +
 +===== Agregar el codigo view_tab =====
 +
 +El archivo //view_tab.lua// necesita ir en ''/usr/lib/lua/luci/view/myapp-mymodule''. Aquí esta el contenido de este archivo:
 +
 +<WRAP prewrap 1000px>
 +<code>
 +<%+header%>
 +<% local eating = luci.model.uci.cursor():get("current", "ice", "flavor") %> 
 +<div class="cbi-map" id="cbi-ice_cream">
 +<h2><a id="content" name="content">Ice Cream Information</a></h2>
 +<div class="cbi-map-descr">This is the selected ice cream flavor</div>
 +<fieldset class="cbi-section" id="cbi-ice_cream-flavor">
 +        <legend>Ice Cream Flavor</legend>
 +        <div class="cbi-section-descr"></div>
 +<ul><li>&nbsp;Flavor <%=eating%></li></ul>
 +</fieldset>
 +<%+footer%>
 +</code>
 +</WRAP>
  • Last modified: 2015/06/18 01:12
  • by bazza