Histórico da Página
Índice
Índice | ||||||
---|---|---|---|---|---|---|
|
Widgets Mobile
No fluigFluig, agora é possível visualizar widgets por meio das páginas, a partir de aplicativos móveis. Porém existem algumas particularidades que precisam ser lembradas para que o usuário tenha uma boa experiência com este recurso. .
Todas as interfaces devem ser desenvolvidas nativamente, com exceção da visualização dos widgets da página que será renderizada pelo webview nativo da plataforma.
Qualquer tipo de autenticação requerido pela widget é de inteira responsabilidade do servidor do Fluig (SSO, por exemplo), o Mobile é apenas responsável por mostrar o HTML retornado pelo servidor no webview.
Nota |
---|
A visualização de páginas e widgets offline não é suportada no aplicativo Fluig Mobile. |
Recomendações para o desenvolvimento de widgets:
HTML Responsivo: Hoje no mercado existem variados tamanhos de telas e resoluções, por isso qualquer html desenvolvido para Mobile deve ser responsivo, ou seja, deve se ajustar a qualquer tamanho de tela.
Estética: A aparência visual e design da widget devem ser atraentes para os usuários, conseguimos isso através de CSS, para isso recomendamos a utilização do fluig do Fluig style guide.
Usabilidade: A widget deve ser fácil de usar, contendo apenas o conteúdo necessário para usuário.
Área de toque: Os elementos do html devem estar bem posicionados de forma que facilite a área de toque, pois hoje existem dispositivos que as telas são muito pequenas.
Posicionamento das ações: As ações mais importantes devem estar posicionadas onde o usuário consegue alcançar facilmente, conforme a figura:
- Converter widgets já existentes para Mobile : Para agilizar o desenvolvimento focado em mobile e web é necessário utilizar frameworks que tratam a responsividade, recomendamos a utilização do fluig Fluig Style Guide.
- Elementos Suportados: Widgets Mobile suportam os tipos:
- text
- textArea
- radio
- select
- combobox
- checkbox.
- email (3)
- tel (3)
- range (3)
- date (3)
- time (1)(3)
- week (2)(3)
- number
- hidden
- password
(1) Existe um bug no Android Lollipop (5.0) que inviabiliza o uso do tipo time. Para mais informações, clique aqui.
(2) O campo week não é suportado pelo iOS.(3) Os campos email, tel, range, date, time, week não são suportados pelo Windows Phone e são apresentados como caixas de texto padrão.*
Nota |
---|
Não está homologada a implementação de evento que utilizem Swipe. |
...
Desenvolvendo widgets com suporte a exibição no
...
...
Fluig Mobile
Cada uma das plataformas utiliza um browser diferente para a renderização de HTML. Esta informação deve ser considerada durante o desenvolvimento para evitar problemas de compatibilidade com os arquivos JavaScript/CSS. A tabela abaixo apresenta a versão mínima dos browsers de cada plataforma que deve ser considerada durante o desenvolvimento:
Versão mínima da plataforma | Versão mínima do browser |
---|
Android 4.0 (Ice Cream Sandwich) | Webkit 534.30 |
iOS 7 | Mobile Safari 9537.53 |
Nota | ||
---|---|---|
| ||
Apenas as plataformas iOS e Android suportam páginas em comunidades (widget Conteúdo Adicional). |
...
Para o desenvolvimento de widgets com suporte a dispositivos mobile deve ser adicionado a propriedade application.mobileapp no arquivo application.info com o valor true.
Esta propriedade será processada e persistida na base de dados durante o processo de deploy do widget.
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
application.type=widget
application.code=news
application.title=Not\u00EDcias da Semana
application.description=Exibe uma lista com as \u00FAltimas not\u00EDcias da semana
application.category=KitIntranet
application.renderer=freemarker
application.icon=icon.png
developer.code=developer
developer.name=TOTVS S.A.
developer.url=http://www.fluig.com
view.file=view.ftl
edit.file=edit.ftl
application.uiwidget=true
application.resource.js.1=/resources/js/news.js
application.resource.css.2=/resources/css/news.css
simple.deploy=false
application.mobileapp=true |
A variável booleana mobileAppMode no template do FreeMarker determina se a widget está sendo renderizada através de uma requisição do aplicativo mobile. O Fluig irá verificar o header User-Agent da requisição e caso seja oriundo do aplicativo mobile o valor da variável mobileAppMode será true
. Através desta variável é possível modificar o comportamento da widget quando renderizada pelo aplicativo mobile. O valor da variável mobileAppMode também está disponível via JavaScript através do método WCMAPI.isMobileAppMode().
Bloco de código | ||
---|---|---|
| ||
if (WCMAPI.isMobileAppMode()) {
this.DOM.find('a').attr('href', '#');
} |
API Pública
Está disponível o serviço na API Pública para realizar a consulta de páginas do Fluig. Esta consulta retornará somente as páginas que o usuário tenha permissão de visualização. O retorno do serviço será paginado com uma lista de PageVOs contendo as informações das páginas, entre elas a URL de acesso, URL do ícone, páginas filhas (quando houverem) e se está disponível para o aplicativo mobile. Será possível informar os seguintes filtros:
- parentPageCode: Código da página pai. Quando informado, retorna somente as páginas filhas da página informada.
- isMobile: Caso informado
true
retorna somente as páginas disponíveis para o aplicativo mobile.
- pageIndex: Caso informado, será o index da página a ser exibida
- pageSize: Caso informado, definirá a quantidade de registros por página.
- searchLevel: Caso informado, busca hierarquicamente as páginas filhas .
- internalPages: Caso informado true, a consulta de páginas resultará somente em paginas internas da plataforma.
- filter: String para filtrar o dados em caso de busca.
Widgets com exibição de iframe em webviews do iOS
O aplicativo do fluigFluig, em alguns casos, utiliza webviews para visualização de páginas. Os webviews utilizam como base o navegador padrão do dispositivo, como por exemplo, o Safari quando o dispositivo em questão utiliza o sistema iOS (iPads e iPhones).
...
Para contornar esse comportamento, é necessário desenvolver uma técnica de CSS que ajustará o iframe com largura de 100% e altura de 100%, sendo essa altura necessária para compensar a ausência de scroll no iframe, um parâmetro necessário para o funcionamento da técnica de CSS.
Bloco de código | ||||
---|---|---|---|---|
| ||||
<iframe style="width: 1px; min-width: 100%; height: 100%;" scrolling="no"></iframe> |
...