Índice

Widgets Mobile 

No Fluig, 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.

Recomendações para o desenvolvimento de widgets:

1. 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.

2. 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 style guide. 

3. Usabilidade: A widget deve ser fácil de usar, contendo apenas o conteúdo necessário para usuário.

4. Á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.

5. Posicionamento das ações: As ações mais importantes devem estar posicionadas onde o usuário consegue alcançar facilmente, conforme a figura:

   

   

6. 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 Style Guide.
7. Elementos Suportados: Widgets Mobile suportam os tipos:
   
   1. text
   2. textArea
   3. radio
   4. select
   5. combobox
   6. checkbox.
   7. email ⁽³⁾
   8. tel ⁽³⁾
   9. range ⁽³⁾
   10. date ⁽³⁾
   11. time ⁽¹⁾⁽³⁾
   12. week ⁽²⁾⁽³⁾
   13. number
   14. hidden
   15. 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.

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:

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

if (WCMAPI.isMobileAppMode()) {
    this.DOM.find('a').attr('href', '#');
}

O aplicativo do Fluig, 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). 

Quando o navegador Safari de um dispositivo com sistema iOS encontra um iframe dentro da página, ele ajusta a largura do iframe tomando como base a largura do conteúdo exibido dentro do iframe, e ignora qualquer parâmetro de largura definido pelo desenvolvedor. Esse comportamento só acontece no navegador Safari (e, portanto, em webviews que utilizam o Safari como base) de dispositivos com o sistema iOS.

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.

<iframe style="width: 1px; min-width: 100%; height: 100%;" scrolling="no"></iframe>