Exemplo: Criando uma tarefa personalizada para o ThingWorx Navigate
Nas seções abaixo, vamos verificar a criação de uma tarefa personalizada do início ao fim no ThingWorx Composer. Com a tarefa de exemplo, os usuários buscam dados do Windchill e recebem os resultados em uma tabela. Ao selecionar um item da tabela, aparecerão mais propriedades em uma tabela abaixo e será possível ver uma representação 3D interativa do item. É possível clicar em um link para abrir a representação no Creo View. Veja como a tarefa ficará:
Este exemplo mostra como combinar os componentes de uma tarefa em um mashup de trabalho. Pode ser que vários serviços necessários à sua organização já estejam incluídos no mashup de demonstração e no WindchillSwaggerConnector.
Como resultado, é possível montar várias tarefas personalizadas usando somente a interface do usuário do
ThingWorx e esses serviços predefinidos. Se for necessário escrever seus próprios serviços, existem passos para alguns serviços comumente usados que podem ser úteis. Verifique o guia do Windchill Extension nos
documentos de referência do site da PTC.
Mas primeiramente, vamos tentar criar a tarefa de exemplo.
Crie um novo mashup no ThingWorx Composer
Recomenda-se planejar o layout da tarefa antes de começar. Assim, você sabe quantos painéis serão necessários, que serviços serão incluídos neles e como eles serão organizados.
1. Em VISUALIZATION, clique em Mashups e, em seguida, clique no botão New. A caixa de diálogo New Mashup é aberta.
2. Em Mashup Type, selecione Page.
3. Em Layout Options, selecione Responsive e, em seguida, clique em Done. O editor de mashup é aberto.
4. Na aba Widgets, selecione Panel e, em seguida, arraste o painel para a área de visualização de layout. Arraste widgets de painel adicionais e ajuste seus tamanhos até obter o layout planejado. Em nosso exemplo, use o layout da figura acima.
Adicione widgets aos painéis
Agora, você tem a estrutura básica da tarefa. Em seguida, vamos adicionar widgets para definir os componentes visuais de cada painel.
1. Arraste um widget para cada painel. Nesse exemplo, vamos adicionar estes widgets:
◦ List — Exibe uma lista de buscas salvas do Windchill. Ao selecionar um item da lista, seus detalhes aparecerão no painel Grid.
◦ Text Box — Permite aos usuários fazer outra busca.
◦ Button — Executa a busca.
◦ Grid — Mostra os detalhes do item selecionado pelo usuário.
◦ Property Display — Mostra os atributos do item selecionado no painel Grid.
◦ Creo View — Mostra uma vista 3D do item selecionado.
◦ Link — Abre o item selecionado no aplicativo cliente do Creo View.
Adicione fontes de dados e serviços
Agora que os widgets foram definidos, a interface do usuário é criada. É necessário fornecer fontes de informação. Esta tarefa de exemplo usa a fonte de dado predefinida, ptc-windchill-demo-thing. No próximo passo, vamos adicionar a fonte de dados e os serviços necessários para que o mashup funcione.
1. Na aba Data, no painel superior direito do ThingWorx, clique no sinal de mais para adicionar uma nova fonte de dados. A caixa de diálogo Add Data é aberta.
2. Na caixa Search entities, começa a digitar a fonte de dados necessária. Em nosso exemplo, vamos digitar ptc-windchill.
3. Nos resultados, selecione a fonte de dados. Nesse exemplo, é ptc-windchill-demo-thing. Os serviços disponíveis para essa entidade aparecem à esquerda.
4. Clique no botão de seta azul para adicionar os serviços necessários. Para o mashup de exemplo, vamos selecionar estes serviços:
◦ GetCreoViewData
◦ ExecuteSavedSearch
◦ ListSavedSearches
No exemplo, desejamos mostrar as buscas salvas do Windchill assim que o mashup for carregado. Para isso, marque a caixa de seleção Mashup Loaded? para ListSavedSearches.
5. Após selecionar todos os serviços necessários, clique em Done.
Conecte os serviços aos widgets
Os serviços de dados foram definidos, juntamente com os elementos da interface do usuário. Nos próximos passos, tudo será conectado.
1. No painel Data, em ListSavedSearches, expanda a seção Returned Data.
2. Arraste All Data para o widget List. Essa operação habilita o retorno de todos os dados encontrados em uma busca salva.
3. Para Binding Targets, selecione Data. Um diagrama de conexão aparece na parte inferior do Composer.
| Esse passo substitui a necessidade de scripts Java manuais do cliente requeridos em versões anteriores do ThingWorx. |
4. Em seguida, é possível configurar o widget. Defina estes parâmetros no widget de lista:
◦ DisplayField — name
◦ ValueField — objectid
◦ Label — Saved Searches
| Clique fora da caixa de texto para salvar cada entidade. |
Associe dados entre serviços
Alguns serviços dependem de dados de outro serviço. Por exemplo, ao selecionar uma busca salva na lista, ela deve ser executada. Nos próximos passos, vamos criar conexões entre os serviços, chamadas de associações. Também, vamos associar serviços a widgets, como a conexão de ExecuteSavedSearch à digitação de uma palavra-chave na caixa de busca.
1. Em ExecuteSavedSearch, expanda Parameters.
2. Em ListSavedSearches, expanda Returned Data e, em seguida, Selected Row(s).
3. Em Selected Row(s), arraste objectId para oid, que encontra-se na seção Parameters de ExecuteSavedSearch.
A primeira conexão foi concluída.
4. Para a segunda conexão, selecione ListSavedSearches.
5. Em seguida, arraste SelectedRowsChanged da parte inferior do painel para ExecuteSavedSearch.
Agora, vamos conectar a funcionalidade de busca. A entrada na caixa de texto será conectada ao parâmetro de entrada keyword e o botão será conectado ao serviço para obter os dados.
1. Expanda ExecuteSavedSearch e, em seguida, Parameters.
2. Selecione o widget de caixa de texto e, em seguida, clique na seta para abrir a lista. Arraste Text para keyword em ExecuteSavedSearch.
3. No painel da caixa de busca, selecione o botão de widget e, no menu suspenso, arraste Clicked para ExecuteSavedSearch.
4. Vamos adicionar rótulos para a caixa de busca e o botão. Selecione cada elemento e, em seguida, escolha Label no menu. Digite um nome para cada entidade, tais como estes:
◦ Caixa de texto — Items to find
◦ Botão — Find
5. Salve as suas mudanças.
Verifique suas conexões
A seguir, as conexões que devem ser vistas nessa etapa. Selecione cada entidade abaixo para ver sua conexão:
Widget de lista
ExecuteSavedSearch
ListSavedSearches
Exiba a estrutura da peça como tabela
Para mostrar a estrutura da peça no widget de tabela, é necessário conectar os dados de estrutura da peça ao widget de grade. Observe que nesse passo, estamos arrastando na direção oposta à anterior, do serviço para o widget.
1. Em ExecuteSavedSearch, expanda Returned Data e, em seguida, arraste All Data para o widget de grade.
2. Em Select Binding Target, selecione Data.
3. Agora que os dados estão conectados à grade, podemos configurar a tabela. Selecione o widget de grade e escolha Configure Grid Columns no menu.
4. Em Configure Widget, selecione e reordene as propriedades a serem mostradas.
5. Salve as suas mudanças.
Mostre o objeto visualizável quando o item for selecionado
Nossa tarefa mostrará o objeto visualizável quando o item for selecionado na grade. Para realizar essa configuração, conecte os dados de estrutura ao widget do Creo View e, em seguida, é possível definir o widget para atualizar dinamicamente quando o usuário selecionar outro item.
1. No serviço GetCreoViewData, em Returned Data, expanda All Data e, em seguida, selecione structure. Arraste-o para o widget do Creo View.
2. Em Select Binding Target, selecione ProductToView.
3. Para configurar a atualização dinâmica, selecione ExecuteSavedSearch. Em seguida, no painel inferior esquerdo, arraste SelectedRowsChanged para o serviço GetCreoViewData.
4. Clique em Save.
Adicione um link para abrir o item no Creo View
Para fornecer aos usuários uma forma rápida de abrir o arquivo do objeto visualizável 3D, vamos adicionar um link para que ele seja aberto no Creo View. Para usar esse serviço, os usuários devem ter o Creo View instalado ou devem ter acesso ao Creo View Lite pelo Windchill.
1. Em GetCreoViewData, expanda Returned Data e All Data.
2. Selecione launchCreoViewUrl e, em seguida, arraste-o para o widget de link.
3. Em Select Binding Target, selecione SourceURL.
4. Também é necessário conectar o ID do objeto do Windchill do item ao serviço: em GetCreoViewData, expanda Parameters.
5. Em ExecuteSavedSearch, expanda Returned Data e, em seguida, Selected Row(s).
6. Selecione objectId e arraste-o para o parâmetro oid em GetCreoViewData.
7. Finalmente, podemos dar nome ao link. Selecione o widget de link e, em seguida, escolha Text. Digite um texto para o link, tal como View item in Creo View.
8. Clique em Save.
Mostre as propriedades de um item quando ele é selecionado na tabela
A tabela de resultados da busca mostra algumas propriedades do item. Para adicionar uma lista mais detalhada de propriedades, é necessário conectar o widget de exibição de propriedades e, em seguida, selecionar as propriedades a serem mostradas.
1. Em ExecuteSavedSearch, expanda Returned Data e, em seguida, selecione Selected Row(s).
2. Arraste Selected Row(s) do serviço para o widget de exibição de propriedades.
3. Em Select Binding Target, selecione Data.
4. Agora que o widget de exibição está conectado aos dados, é possível selecionar as propriedades a serem mostradas: selecione o widget e, em seguida, clique na seta do canto superior esquerdo.
5. Escolha Configure Widget no menu.
6. Em Configure Widget, selecione e reordene as propriedades a serem mostradas.
Verifique suas conexões novamente
Nessa etapa, estas são as conexões que devem existir. Selecione cada entidade abaixo para ver suas conexões:
GetCreoViewData
ExecuteSavedSearch
ListSavedSearch
Salve e nomeie o mashup e, em seguida, veja nossa nova tarefa
Estamos quase terminando. Nestes últimos passos, vamos nomear e salvar o mashup e, em seguida, vamos ver sua tarefa personalizada do ThingWorx Navigate.
1. Clique em Save.
2. Em General Information, digite um nome para a tarefa na caixa Name.
3. Clique em View Mashup. A nova tarefa é aberta. Parabéns!
Agora, é possível adicionar a tarefa à página inicial do ThingWorx Navigate e adaptá-la. Veja o próximo tópico, "Adicionar uma tarefa personalizada à sua página inicial".
Precisa de mais informações? A seguir, alguns recursos
