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

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 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 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.(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.*

...

Desenvolvendo widgets com suporte a exibição no

...

• Suporte a páginas e widgets no aplicativo Mobile

...

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

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

...